/*------colors --------
f0f0ff body-back, feildset-back
00c links
333 h3
e60 link, hover
36b header-border-top
136 h2-color, menu-borders-T&B
36a menu-borders-L&R, main-borders
fff8f1 menu-hover
b40 .border-top
03b sidebar-h2-back
*/

body {
background:#f0f0ff;
background-image: url(images/games_bodyback.png);
font-family:verdana;
font-size:small;
}
h1, h2, h3, h4, body, p, li, ul  {
margin:0;
padding:0;
}
h2, h3, h4, p, form, #sidebar ul{margin-left:10px; padding:0 2px;}

#content ul li {margin:10px 0 10px 30px;}


img {border-color: #fff;}
a img{border:0;}
a {text-decoration:none;}
a:link, a:active, a:visited{color:#00c;}
h3 a:link, h3 a:active, h3 a:visited {color:#333;}
#content a:hover{border-bottom: dotted 1px #06e;color:#06e;}
a[href*=".zip"] {
color:#00c;
background: url('images/download.png') no-repeat center left;
padding:2px 18px;
}
a[href*=".swf"] {
color:#00c;
background: url('images/play.png') no-repeat center left;
padding:2px 18px;
}

.header {
color:#000;
border-top:5px solid #36b;
float:left;
width:100%;
background:#fff url(images/menu_main.png) bottom repeat-x;
}
.header img {padding-bottom: 5px;}

h1 {
font-size: 150%;
padding: .4em 0 0 5%;
margin-bottom: 1px;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
h2 {
font-size: 130%;
margin-top: 0.5em;
color: #333;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
.header h2{color:#136; font-style:italic; padding-left:5%;margin:0;}
h3, h3 a {
font-size: 110%;
margin-top: 0.5em;
margin-bottom:0.1em;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
h4{
font-size: 100%;
margin-top: 0.2em;
margin-bottom: 0.1em;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
#footer{clear:both;}
.capoff{clear:both;}

#menu {
clear:both;
float:left;
width:90%;
border-top:solid 1px #136;
border-bottom:solid 1px #136;
padding:0 5%;
background: #fff url(images/menu_main.png) bottom repeat-x;
}
#menu a, #menu a:visited {
display:block;
padding:3px 0.75em;
text-decoration:none;
color:#000;
}
#menu li{
float:left;
display:block;
border-left:1px solid #36a;
background: #fff url(images/menu_main.png) bottom repeat-x;
}
#menu #home{border-left-color:#36a;}
li#training{border-right:1px solid #36a;}
li#tp {float:right;border-right:1px solid #36a;}

#hom #home, #dev #devel, #train #training, #about #tp{background: url(images/menu_main_selected.png) bottom repeat-x;}
#menu a:hover{background:url(images/menu_main_hover.png) bottom repeat-x #f1f8ff;}

#main {
clear:both;
margin:0 5% 1em;
background:#fff;
border:1px solid #36a;
border-top:0;
}	
#content {
float:left;
width:75%;
line-height:1.4em;
color:#000;
background:#fff;
}
#sidebar {
width:25%;
float:right;
line-height:1.4em;
color:#000;
background:#fff;
}
#sidebar h2 {
border-top:solid 1px #14c;
border-bottom:solid 1px #02a;
background:#03b;
color:#fff;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
#sidebar h2 a, #sidebar h2 a:hover {color:#fff;}

#sidebar h3 {
clear:both;
margin-top:.5em;
border-top:1px solid #8ad;
color:#000;
background:#fff url(images/menu.png) no-repeat bottom left;
font-family:'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;
}
#sidebar a {text-decoration:none;}

/* content layout without using a table*/

.col1, .col12, .col23, .col2, .col3 {
text-align:left;
color:#000;
background:#fff;
margin-top:8px;
}
.col1 {
width:33.3%;
float:left;
clear:left;
}
.col2{
	width:33.3%;
	float:left;
}
.col3 {
width: 33.3%;
float:right;
clear:right;
}
.col12{
	width:66.6%;
	float:left;
}
.col23{
	width:66.6%;
	float:right;
}
.col{
width:47.5%;
margin-right:2%;
float:left;
}
.border-top {
border-top:1px solid #36b;
clear:both;
}
.cl_left{clear:left;}
.fl_left{float:left;}
.fl_right{float:right;}
.cl_right{clear:right;}
.cl_both{clear:both;}
h2 + .fl_right, h3 + .fl_right{margin-top:-20px;}

/*------------- Microformats -------------*/
.vcard {margin-left:10px;}
address {text-decoration:none; font-style:normal;}

/*--------------- forms ---------------*/
div.col23 form{
	border-top:1px solid #36b;
	margin-top:0.5em;
}
fieldset{
background-color: #f0f0ff;
margin: 8px 5px;
border: 1px solid #36b;
}
label{
display: inline-block;
font-size: 80%;
line-height: 1.8;
vertical-align: top;
margin-right:1em;
width:110px;
}
input.onerow{width:200px;}
.blackboard{
	margin-top:20px;
}

/*------------------ sidebar  -----------------*/
#sidebar ul{
color:#000;
}
#sidebar li{
display:block;
}
#sidebar ul a{display:block; color:#000;}
#sidebar ul a:hover{background:#fff;}
#sidebar ul li a{padding-left:1em;}
#sidebar ul li ul li a{padding-left:2em;}
#sidebar ul li ul li ul li a{padding-left:3em;}

#sidebar ul{background:#fff0e0;} /* 1st level background */
#sidebar ul ul{background:#fff7f0;} /* 2nd level background */
#sidebar ul ul ul{background:#fff7f0;} /* 3rd level background */

#sidebar ul li{
border-top:1px solid #fff8f0;
border-bottom:1px solid #eed7c7;
}
#sidebar ul ul li {border:0; border-top:1px solid #fffaf4;} /* 2nd level top */
#sidebar ul ul ul li {border-top:1px solid #fffaf4;} /*3rd level top*/

* html #sidebar ul ul li {height:16px;}/* ie6 hack !!*/

#sidebar #current{
border-left:0.5em solid #36b;
color:#36b;
padding-left:0.5em;
}
#sidebar ul ul #current{padding-left:1.5em;}
#sidebar ul ul ul #current{padding-left:2.5em;}
#sidebar ul a#current:hover{background:transparent;}

#sidebar a{text-decoration:none;}
#sidebar a img{
border:0px none #fff;
margin-top:-3px;
}
#sidebar ol{ list-style-type:circle;}

#sidebar address{
text-decoration: none;
font-style:normal;
color:#36b;
padding:0 0 .5em 10px;
margin:0;
}
/*----------- twitter style -----------------*/
#sidebar #twitter_div {
	background-color: #AFEFF1;
	border: solid 1px #aaa;
	margin:6px;
	-webkit-box-shadow: 3px 3px 5px #888;
}
#sidebar #twitter_div #twitter_update_list  {
	background-color: #AFEFF1;
	margin:0;
}
#sidebar h2.twitter-title{
	background-color: #afeff1;
	color:#000;
	margin-bottom:0;
	border:0;
}
#sidebar #twitter_div #twitter_update_list span{
	background-color: #fff;
	display:block;
	padding:0 3px;
}
#sidebar #twitter_div #twitter_update_list li{
	margin:5px;
	border:0;
	border-bottom:1px dashed #999;
}