@charset "UTF-8";
/* CSS Document */

*{ padding: 0; margin: 0; }

/************/
/*** MAIN ***/
/************/

body {
	background: url(../images/bg_main.jpg) no-repeat #00385B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; color: #00385B;
	margin: 0; padding: 0;
	text-align: center;
	}

#container {
	width: 950px;
	margin: 0 auto; padding: 0;
	text-align: left;
	position:relative;
	}
	
#content_top {
	background: url(../images/content_top.png); 
	width: 950px; height: 30px;
	margin: 0 auto; padding: 0;
	text-align: left;
	}
	
#content {
	width: 950px; background-color: #75A2B5;
	margin: 0 auto; padding: 0;
	text-align: left;
	}
	
#full {
	width: 800px; 
	background-color: #96B6C0;
	margin: 0 0 40px 40px; 
	float: left; 
	}
	
#full_left {
	width: 300px; 
	margin: 20px 0 0 60px; 
	float: left; 
	}
	
#full_left_block {
	margin: 0 0 20px 0px; 
	padding: 20px 10px 10px 20px;
	border: 1px solid #1F5070;
	background-image:url(../images/kids/block_bg.jpg);
	background-repeat:repeat-x;
	}
	
#full_right {
	width: 300px; 
	margin: 20px 50px 0 0; 
	float: right; 
	}
	
#full_right_block {
	margin: 0 0 20px 0px; 
	padding: 20px 10px 10px 20px;
	border: 1px solid #1F5070;
	background-image:url(../images/kids/block_bg.jpg);
	background-repeat:repeat-x;
	}

#left {
	width: 525px; 
	margin: 0 0 0 0; float: left; padding-left: 40px
	}

#left_block {
	width: 525px; background-color: #96B6C0;
	margin: 0 0 40px 0;
	}
	
#right {
	width: 250px; 
	margin: 0 0 0 0; float: right; padding-right: 115px;
	}

#right_block {
	width: 250px; background-color: #96B6C0;
	margin: 0 0 20px 0;
	}
	
#highlight {
	width: 520px; background-color: #CADAE0;
	margin: 0px 20px 2px 10px;
	}
	
/*************/
/*** FONTS ***/
/*************/

h1 { 
	font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.0em; 
	font-style: italic; font-weight: bold; color: #992314;
	letter-spacing: 1px; padding: 10px 0px 10px 10px;  
	}
	
h2 { 
	font-size: 1.5em; 
	letter-spacing: .25px; padding: 5px 5px 5px 10px;}

h3 { 
	font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; 
	font-style: italic; font-weight: bold; color: #992314;
	letter-spacing: 1px; padding: 10px 0px 10px 10px;  
	}
	
p { font-size: 1.4em; text-align: left; padding: 0px 20px 10px 10px; line-height: 1.2; }
.lead { color: #992314 }
#full p { font-size: 1.6em; }
#full p.noleft { font-size: 1.6em; padding: 10px 20px 10px 0; }

p.highlight_indent { padding: 5px 20px 5px 25px; margin: 0 2px 0 2px; background-color: #CADAE0;}
.indent { padding: 5px 20px 20px 20px; }
.space { padding: 10px 20px 10px 10px;}

ul { margin: 0; padding: 0 }
li { font-size: 1.4em; text-align: left; list-style-type: none; padding: 0px 10px 10px 20px; line-height: 1.2; }

ul.arrows_home { list-style-image:url(../images/arrow.jpg); margin-left: 45px; }
li.arrows_home { padding: 5px 20px 5px 0px }

ul.keys { list-style-image:url(../images/arrow.jpg); margin: 0 0 0 30px; padding-bottom: 10px;}
li.keys { padding: 5px 10px 0 0px }

a:link { color: #0000EE; text-decoration: none }
a:visited { color: #0000EE; text-decoration: none }
a:active { color: #0000EE; text-decoration: none }
a:hover { color: #0000EE; text-decoration: none }

li.keys a:link { color: #0000EE; text-decoration: none }
li.keys a:visited { color: #0000EE; text-decoration: none }
li.keys a:active { color: #0000EE; text-decoration: none }
li.keys a:hover { color: #0000EE; text-decoration: none }

li.arrows_home a:link { color: #0000EE; text-decoration: none }
li.arrows_home a:visited { color: #0000EE; text-decoration: none }
li.arrows_home a:active { color: #0000EE; text-decoration: none }
li.arrows_home a:hover { color: #0000EE; text-decoration: none }

p a:link { color: #0000EE; text-decoration: none }
p a:visited { color: #0000EE; text-decoration: none }
p a:active { color: #0000EE; text-decoration: none }
p a:hover { color: #0000EE; text-decoration: none }

/*************/
/*** LOGOS ***/
/*************/

#nav_wrap {
width: 100%;
background: url(../images/bg_wpsu_nav.png) repeat-y center;
}

#logo_wpsu {
	center top;
	margin: 0 auto; padding: 0; width: 950px; 
	}
	
#logo_blueribbon {
	position: relative; width: 650px; height: 72px;
	margin: 10px 0 10px 0; padding-top: 10px;
	}

/******************/
/*** NAVIGATION ***/
/******************/

/*** top navigation **/

ul#nav_top {
	background-color: #e6ecf3; border-bottom: 1px solid #FFFFFF;
	margin: 0; height: 30px; line-height: 30px;
	}

ul#nav_top li { 
	font-size: 1em; color: #105185; text-align: left;
	display: inline; float: left; list-style-type: none; height: 30px !important; line-height: 30px; 
	padding: 0 16px 0 16px; 	
	border-right: 1px solid #d0dce8 
	} 

ul#nav_top li.logo { display: inline; list-style-type: none; line-height: 30px; padding: 0; border-right: 0 } 
ul#nav_top li.search { float: right; border-right: 0 }
ul#nav_top li.about { border-right: 0 }
.search_dropdown { width: 110px; color: #105185; font-size: 1em }

ul#nav_top li a:link { color: #105185; text-decoration: none }
ul#nav_top li a:visited { color: #105185; text-decoration: none }
ul#nav_top li a:active { color: #105185; text-decoration: underline; background-color: #e6ecf3}
ul#nav_top li a:hover { color: #105185; text-decoration: underline; background-color: #e6ecf3}

/*** main navigation **/

#nav_main {
	width:800PX; height: 29px;
	margin: 0 0 0 40px;
	background:none;
	}

#nav_main ul { 
	display: block; list-style:none;
	padding:0;margin:0;
	height: 29px;
	}

#nav_main ul li {
	display:inline; height:29px;
	padding:0; margin:0;
	}
	
#nav_main ul li a {
display: block; margin-right: 5px;
height:29px;
float: left;
text-decoration:none;
line-height:29px;
letter-spacing: .75px;
color:#00385B;
font-weight:bold;
text-align: center;
}

#nav_main ul li.bt1 a{ width:70px;}
#nav_main ul li.bt2 a{ width:140px;}
#nav_main ul li.bt3 a{ width:150px;}
#nav_main ul li.bt4 a{ width:145px;}
#nav_main ul li.bt5 a{ width:140px;}
	
#nav_main ul li.bt1 a:hover{ background:url(../images/bt1.png) no-repeat center;text-decoration: none;width:70px;color:#FFFFFF;}
#nav_main ul li.bt2 a:hover{ background:url(../images/bt2.png) no-repeat center;text-decoration: none;width:140px;color:#FFFFFF;}
#nav_main ul li.bt3 a:hover{ background:url(../images/bt3.png) no-repeat center;text-decoration: none;width:150px;color:#FFFFFF;}
#nav_main ul li.bt4 a:hover{ background:url(../images/bt4.png) no-repeat center;text-decoration: none;width:145px;color:#FFFFFF;}
#nav_main ul li.bt5 a:hover{ background:url(../images/bt2.png) no-repeat center;text-decoration: none;width:140px;color:#FFFFFF;}
	
#nav_main ul li.bt1_current a{ background:url(../images/bt1.png) no-repeat center;text-decoration: none;width:70px;color:#FFFFFF;}
#nav_main ul li.bt2_current a{ background:url(../images/bt2.png) no-repeat center;text-decoration: none;width:140px;color:#FFFFFF;}
#nav_main ul li.bt3_current a{ background:url(../images/bt3.png) no-repeat center;text-decoration: none;width:150px;color:#FFFFFF;}
#nav_main ul li.bt4_current a{ background:url(../images/bt4.png) no-repeat center;text-decoration: none;width:145px;color:#FFFFFF;}
#nav_main ul li.bt5_current a{ background:url(../images/bt2.png) no-repeat center;text-decoration: none;width:140px;color:#FFFFFF;}

/**************/
/*** IMAGES ***/
/**************/
#blueribbon_large {
	width: 347px; position: absolute; left: 635px; top: 40px; z-index: 1;
	}
	
#blueribbon_medium {
	width: 200px; position: absolute; left: 835px; top: 0px; z-index: 1;
	}

#blueribbon_small {
	width: 347px; position: absolute; left: 865px; top: 0px; z-index: 1;
	}
	
#line {
	margin: 20px 0 20px 40px; height: 1px; width: 800px;
	}
	
img.arrow { margin:0 }

img.game { border: none; }

img.text { margin: 10px 0 0 0; border: none; }

/*********/ 
/* GAMES */
/*********/

.game { clear: both; margin: 10px 0 0 0; height: 115px}
.game_thumb { float:left; padding: 20px 0 10px 10px; margin: 0; }
.game_describe { float:left; padding: 10px 0 10px 10px; margin: 0; width: 425px; }

.tall_game { clear: both; margin: 10px 0 0 0; height: 325px}
.tall_game_thumb { float:left; padding: 10px 0 10px 10px; margin: 0; }
.tall_game_describe { float:left; padding: 0 0 10px 10px; margin: 0; width: 425px; }

/*********/ 
/* TABLE */
/*********/ 
 
table.lessonplans {
 /* border: 1px solid #369 */
 background-color: #96B6C0;
}
 
.lessonplans th { 
text-align: left; text-decoration: underline;
}

.lessonplans tr { 
}

.lessonplans td { 
 text-align: left;
}
 
.lessonplans td.resource { 
 text-align: left;
 font-size: 1.4em; font-weight: bold; color: #00385B;
 padding: 5px 20px 5px 10px; line-height: 1.2;
}

.lessonplans td.resource a:link { color: #0000EE; text-decoration: none }
.lessonplans td.resource a:visited { color: #0000EE; text-decoration: none }
.lessonplans td.resource a:active { color: #0000EE; text-decoration: none }
.lessonplans td.resource a:hover { color: #0000EE; text-decoration: none }

.lessonplans td.media { 
 text-align: left;
 font-size: 1.3em;
 padding: 5px 20px 5px 10px; line-height: 1.2;
}

.lessonplans td.topics { 
 text-align: left;
 font-size: 1.3em;
 padding: 5px 20px 5px 10px; line-height: 1.2;
}
 
tr.even {
 background-color: #CADAE0;
}

/*********************/
/*** STEP CAROUSEL ***/
/*********************/

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 700px; /*Width of Carousel Viewer itself*/
height: 300px; /*Height should enough to fit largest content's height*/
margin: 20px 0 10px 50px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
background-color: #75A2B5;
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 0px; /*margin around each panel*/
padding: 5px;
width: 220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel .panel:hover{
background-color: #CADADF;
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 10px 5px 0px; /*margin around each panel*/
padding: 5px;
width: 220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.panel a:link, a:visited, a:active, a:hover { color: #00385B; text-decoration: none }

/********/
/*FOOTER*/
/********/

#footer { margin: 20px 0 20px 0; clear:both }
#footer p { text-align: center; font-size: 1.2em}