@charset "utf-8";
/* My CSS Document */

body
{
	background:#2b2b2a url(../images/background.png) top center no-repeat;
}

#header
{
	width:984px;
	margin:0 auto;
}

#header-image
{
	width:984px;
	height:199px;
	background: transparent url(../images/header.jpg) top center no-repeat;
}

#menu-container
{
	width:984px;
	height:90px;
	background: transparent url(../images/title.png) top center no-repeat;
	z-index:100;
}



/*TOP MENU begin*/

/* General */

#menu
{
	list-style-position:outside;
	float:right;
	position:relative;
	right:42px;
	top:10px;
}
#menu, #menu ul { 	list-style: none; }

/* Head links */
#menu li 
{ 
	float: left; 
	height: 30px;
	text-align: center; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#7b7b7b;
}

#menu li.toplink {margin: 0 10px}

#menu li a { display: block; height:30px; color:#999999; text-decoration:none }
#menu li a:hover, #menu li a.active { display: block; height:30px; color:#ffffff; text-decoration:none }

#menu li ul li
{
	clear:both;
	float:left;
	width: 160px;
	background: transparent url(../images/menu-item2.png) top center no-repeat;
}

/* Child lists and links */
#menu li ul 
{ 
	display: none; 
	text-align: left; 
	position: absolute;
	top: 30px;
	left: 30px;
	z-index:100;
}

#menu li:hover ul 
{ 
	display: block; 
}

#menu li ul li a 
{ 
	display: block;
	height:25px;
	padding-top:5px;
}

/*TOP MENU end */

#content
{
	width:984px;
	margin: 0 auto;
	overflow:hidden;
}

.stuff-container
{
	background-color:#282728;
	padding:20px;
}

.stuff-container img
{
	border: 1px solid #666666;
}

.stuff-container-top
{
	width:100%;
	height:8px;
	background: transparent url(../images/content_top.png) top left no-repeat;
}

.stuff-container-bottom
{
	width:100%;
	height:8px;
	background: transparent url(../images/content_bottom.png) top left no-repeat;
}

div.index-product
{
	width:220px;
	height:305px;
	background: transparent url(../images/index-item-bg.png) top left no-repeat;
	float:left;
	position:relative;
	margin-left:5px;
	margin-right:5px;
}

div.index-product img
{
	position:relative;
	margin-top:9px;
	margin-left:9px;
	border:0;
}

#footer
{
	width:984px;
	margin: 0 auto;
	text-align:center;
}

#footer p
{	
	margin-top:20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#7b7b7b;
	text-align:center;
}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top:7px;
	margin-bottome:7px;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */

/* SCROLLABLE INDEX */

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 916px;	
	height:320px;
	margin-left:34px;
	/* custom decorations 
	padding:10px 0;	
	border:1px outset #ccc;
	background-color:#efefef;	*/			
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration 
	margin-left:10px;*/
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	width:220px;
	height:305px;
	background: transparent url(../images/index-item-bg.png) top left no-repeat;
	position:relative;
	margin-left:4px;
	margin-right:5px;
}

div.scrollable div.items div img{
	position:relative;
	margin-top:9px;
	margin-left:9px;
	border:0;
}
/* active item 
div.scrollable div.items div.active {
	border:1px inset #ccc;		
	background-color:#fff;
}*/


/* navigation buttons */

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:34px;
	height:63px;
	background:url(../images/left.png) no-repeat;
	float:left;
	margin-top:128px;;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
} */

/* disabled navigational button */
a.disabled {
	opacity: .5; !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/right.png);
	clear:right;	
}

/* ------- Product Page --------- */

.product-name
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FF9900;
}

.headline
{
	color:#666666;
	font-style:italic;
}