/* this style sheet should be used if any form elements are used on the page due to the IE z-index bug see: http://www.brainjar.com/css/positioning/default5.asp */
* html body {font-size:90%;/* all IE except Mac IE5.0 (though effectively just Mac IE due to the next hack) */}
/* hide from mac ie5.x \*/
* html body {font-size:89%;}
/* end hide from mac ie5 */
html {height:100%; }
body {
	font-size:90%;/* all other browsers (except Mac IE 5.0) */
	margin:0;
	padding:0;
	color:#000;
	background:#fff;
	font-family:Verdana, arial, Helvetica, sans-serif;
	height:100%;
}

/* following declarations clears elements without a clearing element such as <br clear> being needed. For more info see: http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

div.cleardiv {clear:both;padding:0 !important;}

/* following class is to hide elements that give extra information for users of assistive technology such as screenreaders - for more info see: http://www.webaim.org/techniques/articles/hiddentext */
.hidden {
	position:absolute;
 	left:0px;
 	top:-500px;
 	width:1px;
 	height:1px;
 	overflow:hidden;
}

/* note for users of non-standards compliant browsers */
.no-css {height:0px; display:none;}
img {border: 0;}
.clear {clear:both;height:0;line-height:0;}

a {text-decoration: underline;color: #056EA5;}
a:hover {text-decoration: none;}
a:active {position: relative; top: 1px; left: 1px;}
/* Div styles
----------------------------------------------- */


#left{
 position:absolute;
 top:85px;
 left:0;
 width:145px;
 z-index:8;
 background:#08B2BD;
 color: #333333;
 height:100%;
text-align: right;
 }

#contentwrapper {
 width:780px;
 z-index:1;
 background:#fff;
 color: #333333;
 height:80%;
 }

#top{
 height:80px; 
background: #08B2BD url("../i/header.png") no-repeat top left;
 width:100%; 
 color: #333333; 
 margin:0;
  }
  
  #top div#banner { top: 0; left: 0; }
#top div#banner a { position: absolute; text-decoration: none; width: 700px; height: 80px; }
#top div#banner a span { display: none; }  #bar span { display: none; }
  
   /* White bar */ 
 
#bar {
 width: 100%;
 position:absolute;
 top:85px;
 z-index: 7;
 background: url("../i/780.gif") #08B2BD no-repeat top left; 
 height:24px; 
margin: 0;
padding: 0;
 }

#content{
 margin: 37px 0 0 0;
 padding-left: 5px;
 position:relative;
 color: #333333;
 z-index:5;
 border-left: 145px solid #08B2BD;
 min-height: 700px;
 }

 
#content div.content {margin: 0 5px 0 0;padding: 0;font-size: 85%;}
#content  img {margin: 3px;}
#content table img {display: block; margin-left: auto; margin-right: auto;}

#footer {
width:100%;
padding: 45px 0 20px 0;
margin: 0;
font-size: 75%; 
color: #999;
text-align:center;
 }
 


/* Left Hover Styles */


#left div#leftcontainer hr {height: 2px; width:130px; border: 0; background: #938DA3 url("../i/lefthr.gif") no-repeat top left;} #left div#leftcontainer {padding: 3px;margin: 25px 0 0 0;font-size: 75%;}
* html #left div#leftcontainer {font-size: 11px;}
#left div#leftcontainer ul {list-style: none;margin: 0;padding: 0;width:142px;}	
* html #left div#leftcontainer ul {/* IE only */
width: 139px;}
#left div#leftcontainer ul li {	position: relative;}	
#left div#leftcontainer ul li.sub a {margin-right: 15px;padding: 0;}	
#left div#leftcontainer ul li.space {margin-bottom: 10px;}
#left div#leftcontainer ul li.sub a:hover {text-decoration: underline;background: none;color: #fff;}
	
#left div#leftcontainer li ul {
	position: absolute;
	left: 139px;
	top: 0;
	display: none;
	margin: 0;
	
	}

/* Styles for Menu Items */

#left div#leftcontainer ul li a {
	display: block;
	text-decoration: none;
	color: #fff;  /* IE6 Bug */
	background: #08B2BD;
	padding: 5px;
	border-bottom: 0;
	border-left: 3px solid #08B2BD;	
	}
	
#left div#leftcontainer ul li ul a:active{color:#060;background:#ccc;}
#left div#leftcontainer ul li a.visited {	color:#000000;background:#E3E3E3;border-left: #757575 3px solid;}

/* Fix IE. Hide from IE Mac \*/
* html #left div#leftcontainer ul li { float: left; height: 1%; }
* html #left div#leftcontainer ul li a { height: 1%; }
/* End */

/* Hover Styles */

#left div#leftcontainer ul li a:hover { color: #E2144A; background: #f9f9f9; 	} 

 /* Sub Menu Styles */
 
#left div#leftcontainer ul ul{
	position:absolute;
	z-index:400;
	display:none;
	width: 180px;
	}

#left div#leftcontainer li:hover{z-index:50;}
 		
#left div#leftcontainer li ul li a { 
	padding: 2px 5px; 
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border-top: 1px solid #08B2BD;
	border-right: 1px solid #08B2BD;
	text-align: right;
}

#left div#leftcontainer ul li ul {border-bottom: 1px solid #08B2BD;}
		
#left div#leftcontainer li:hover ul, #left div li.over ul { display: block;  } /* The magic */


/* sidebar banners
----------------------------------------------- */
#mini .banners .alt { display: none; }

#mini .banners { padding:10px 0 0 20px; }

#mini .banners a {
	float:left;
	margin:0 11px 10px 0;
	padding:0;
	border:none;
	background-position:left top;
	background-repeat:no-repeat;
	text-align:center;
}

* html #mini .banners a {
margin:0 11px 0 0;
}
#mini .banners a:visited { border:none; }
#mini .banners a:hover { border:none; }
#mini .small a { width:100px; height:25px; }
#mini .large a { width:100px; height:50px; }
#mini .small a:hover { background-position:0 -35px; }
#mini .large a:hover { background-position:0 -60px; }

/*
individual banner images - small
*/
#banmp3 { background-image:url("../i/mini_banners/mp3.gif"); }
#bangames{ background-image:url("../i/mini_banners/games.gif"); }
#banuseful{ background-image:url("../i/mini_banners/useful.gif"); }


/* Menu */

form {margin-top: 0; margin-bottom: 0; }

#menuwrapper {width: 630px;position: absolute;z-index: 10; top: 85px; left: 150px;}
#menuwrapper div#menu {width:630px;position: relative;float:left;margin: 0;}

#menuwrapper div#menu a.navi {
	background: #008252;
	text-decoration: none;
	color: #fff;	
	display: block;
	height: 18px;
	padding: 5px 0 0 3px;
	margin:0 5px 0 0;
}


#menuwrapper div#menu a.navi2 {
	background: #4A82B5;
	text-decoration: none;
	color: #fff;	
	display: block;
	height: 18px;
	padding: 5px 0 0 3px;
	margin:0 5px 0 0;
}

#menuwrapper div#menu a.navi3 {
	background: #7B2C73;
	text-decoration: none;
	color: #fff;	
	display: block;
	height: 18px;
	padding: 5px 0 0 3px;
	margin:0 5px 0 0;
}

#menuwrapper div#menu a.navi4 {
	background: #9C1C10;
	text-decoration: none;
	color: #fff;	
	display: block;
	height: 18px;
	padding: 5px 0 0 3px;
	margin:0 5px 0 0;
}

#menuwrapper div#menu a.navi5 {
	background: #E78608;
	text-decoration: none;
	color: #fff;	
	display: block;
	height: 18px;
	padding: 5px 0 0 3px;
	margin:0 5px 0 0;
}

* html #menuwrapper div#menu a.navi {padding: 5px 0 5px 3px;height: 13px;}
* html #menuwrapper div#menu a.navi2 {padding: 5px 0 5px 3px;height: 13px;}
* html #menuwrapper div#menu a.navi3 {padding: 5px 0 5px 3px;height: 13px;}
* html #menuwrapper div#menu a.navi4 {padding: 5px 0 5px 3px;height: 13px;}
* html #menuwrapper div#menu a.navi5 {padding: 5px 0 5px 3px;height: 13px;}

#menuwrapper div#menu a {font-size: 75%;}
* html #menuwrapper div#menu a {font-size: 11px;}

#menuwrapper div#menu ul {
width:126px;
list-style:none;
margin: 0;
padding:0;
float:left;
}
#menuwrapper div#menu li{position:relative;}

/* Styles for Menu Items */

#menuwrapper div#menu ul li a {
	display: block;
	text-decoration: none;
	color: #fff;  /* IE6 Bug */
	background: #000;
	padding: 5px;
border-top: 1px solid #efefef;	
	border-left: 1px solid #efefef;	
	border-right: 1px solid #efefef;
	}
	

/* Fix IE. Hide from IE Mac \*/
* html #menuwrapper div#menu ul li { float: left; height: 1%; }
* html #menuwrapper div#menu ul li a { height: 1%; }
/* End */

/* Hover Styles */

#menuwrapper div#menu ul li a:hover { 
color: #E2144A; 
background: #f9f9f9; 	
border-top: 1px solid #A6A3A6;	
border-left: 1px solid #A6A3A6;	
border-right: 1px solid #A6A3A6;
} 

 /* Sub Menu Styles */ 
#menuwrapper div#menu ul ul{position:absolute;z-index:400;display:none;width: 160px;}
#menuwrapper div#menu li ul li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border-left: 1px solid #A6A3A6;border-top: 1px solid #A6A3A6;border-right: 1px solid #A6A3A6;text-align: left;}
#menuwrapper div#menu ul li ul {border-bottom: 1px solid #999;}		
#menuwrapper div#menu li:hover{cursor:pointer;z-index:100;}
#menuwrapper div#menu li:hover ul ul,
#menuwrapper div#menu li li:hover ul ul,
#menuwrapper div#menu li li li:hover ul ul,
#menuwrapper div#menu li li li li:hover ul ul
{display:none;}
#menuwrapper div#menu li:hover ul,
#menuwrapper div#menu li li:hover ul,
#menuwrapper div#menu li li li:hover ul,
#menuwrapper div#menu li li li li:hover ul
{display:block; }