@import url("modules/Header.css");
@import url("modules/ItemsList.css");
@import url("modules/Footer.css");



/**********************
*	Styles Specific to the homepage header bit
***********************/

/**
**	Cards box on the right hand side
**/
#cards { 
	position:absolute; 
	top:7.7em; 
	right:0.1em;
	width:6em;
	height:17.8em;
	background:url("../../img/homebox_right.gif") top right repeat-y #ffffff;
}
#cards ul { list-style:none; margin:0.1em; margin-right:0.3em; padding:0; } 
#cards ul li { text-align:center; display:block; margin-top:0.5em; } 
#cards ul li a img { border:none;}
#cards div.tl, #cards div.tr, #cards div.btm, #cards div.bl, #cards div.br { position:absolute; }
#cards div.tl { 
	top:0em;
	left:0em;
	background:url("../../img/homemenu_litl.gif") top left no-repeat #ffffff;	
	width:3px;
	height:3px;
}


/**
** Hovermenu in the organce section
**/
#homemenu { 
	position:absolute; 
	top:3.5em; 
	left:0em;
	height:18.7em;
}   

/* Right hand nav categories in the main nav switching box */
#homemenu ul.nav { 
	list-style:none; 
	width:13.5em; 
	float:left; 
	position:relative;  
	font-size:75%;
}
#homemenu ul.nav li { 
	display:block; 
	margin:0em; 
	height:1%;
	background:url("../../img/homemenu_libg.gif" ) bottom left no-repeat;
	text-align:right;
	padding-bottom:0.2em;
	clear:both;
}
#homemenu ul.nav li a.mainlink { 
	text-decoration:none;
	text-align:left;
	font-weight:bold;
	color:#ffffff;
	margin-top:0.2em;
	margin-bottom:0.3em;
	padding-bottom:0em;
	display:block; 
} 
#homemenu ul.nav li a.mainlink span.txt { 
	display:block;
	padding:0.4em 0.3em 0.4em 0.3em;
	cursor:pointer;
}

#homemenu ul.nav li.hover a.mainlink {
	color:#ff9933;
	background:url("../../img/homemenu_litl.gif" ) top left no-repeat #ffffff;
}

#homemenu ul.nav li.hover a.mainlink span.txt { 
	background:url("../../img/homemenu_libl.gif" ) bottom left no-repeat;
}


#homemenu ul.nav li div.innerTxt { 
	display:none; 
} 
#homemenu ul.nav li.hover div.innerTxt { 
	display:block; 
} 



/* Hidden divs with categories  + Product pics.. show on the li : hover */ 
div.innerTxt, div.innerTxt div.tr, 
div.innerTxt div.btm, div.innerTxt div.btm div.bl,
div.innerTxt div.btm div.br { 
	position:absolute;
}
div.innerTxt {  
	background:url("../../img/bg_right.gif") bottom right no-repeat #fff;
	left:13.5em;
	top:0.2em;
	width:63.8em;
	height:23.7em;
	text-align:left;
}
div.innerTxt div.tr, #cards div.tr { 
	background:url("../../img/homebox_tr.gif") top left no-repeat; 
	width:9px;
	height:8px;
	top:0em;
	right:0em;
}
div.innerTxt div.btm, #cards div.btm { 
	background:url("../../img/homebox_bottom.gif") bottom left repeat-x;
	height:10px;
	width:63.8em;
	bottom:0px;
	left:0px;
}
#cards div.btm { width:6em; } 
div.innerTxt div.btm div.br, #cards div.br { 
	background:url("../../img/homebox_br.gif") top right no-repeat;
	width:9px; 
	height:10px;
	right:0px;
}
div.innerTxt div.btm div.bl, #cards div.bl { 
	background:url("../../img/homebox_bl.gif") top left no-repeat;
	width:6px; 
	height:10px;
	left:0px;
	top:0px; 
}

#homemenu div.innerContainer { 
	position:absolute;
	top:0.2em;
	left:0.8em;
	padding-top:0.2em;
	height:21.9em;
}

#homemenu div.innerContainer div.categories { 
	position:absolute;
	left:0em;
	width:50em;
	font-size:1.3em;
}

#homemenu div.innerContainer div.categories a img {
	border:none;
}
#homemenu ul.cats { 
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:48em;
}
#homemenu ul.cats li { 
	display:block; 
	float:left;
	clear:none;
	background:none;
	margin:0.1em 0.8em 0em 0.8em;
	padding:0;
}

a.ovalbutton{
background: transparent url('../img/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('../img/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
}