/* CSS Document */
/* layout formating */	

body {margin: 0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; min-width: 740px;}
#footer {width: 760px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; margin: auto; background-color:#fff;}
#header {margin:0; padding:0;}
#main1 {
	margin:auto;
	padding:0;
	width:740px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #234E79;
	border-right: 10px solid #234e79;
	background-color: white;
	background-image: url(/education/edu_art/rtbkgrnd1_190x5.jpg);
	background-repeat: repeat-y;
	background-position: right;
	float:none;
}
#supp {
	margin:auto;
	padding:0;
	width:740px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color:   #234E79;
	border-right: 10px solid #234e79;
	background-color: white;
	float:none;
}

#wrapperall {width: 740px; background-image:url(/education/edu_art/elementary/rcol_elementarybg.gif); background-position:top right; background-repeat:repeat-y;}

#main_supp {
	margin:auto;
	padding:0;
	width:740px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color:   #234E79;
	background-color: white;
	background-repeat: repeat-y;
	background-position: right;
	border-right: 10px solid #234e79;

}
#rightcol {
	float:right;
	width:190px;
	background:url();
	font:Verdana, Helvetica, sans-serif;
	font-size:9pt;
	color: #036;
	margin-left: 0px;
}
#leftcol {
	margin-left: 30px;
	margin-top: 10px;
	width:500px;
}
#leftcol_supp {margin-left: 30px; width:80%; text-align:left; }
#arrows {float:right; margin-left: 30px;}
#footer {margin:auto; padding:0; width:740px;}
#navcontainer1_supp {width: 740px; background-color:#242021}
#navcontainer2_supp {width: 740px; background-color:#a4b25b; height: 4px}

.leftcolbot {
	margin-left: 30px;
	margin-top: 10px;
	width:500px;
}


/* end layout formating */

#rightcol p, #rightcol h3{margin-right: 30px; margin-left: 30px }
#contentright p a{margin-top:0px; line-height: 140%; font-size:8pt}
h3.intent30l{margin-left: 30px;}
#contentright li{margin-left: 2px; list-style-image: url(/education/edu_styles/bullet.gif); font-size:10pt; line-height: 110%; font:Verdana, Arial, Helvetica, sans-serif}

#leftcol_supp li{margin-left: 2px; list-style-image: url(/education/edu_styles/bullet.gif); line-height: 110%; font:Verdana, Arial, Helvetica, sans-serif}
#arrows img {padding: 2px; border: 0px;}

#textbox_l{float:left; padding:10px;}
#textbox_l li{margin-left: -24px; list-style-image: url(/education/edu_styles/bullet.gif); font-size:10pt; line-height: 110%; font:Verdana, Arial, Helvetica, sans-serif}
#textbox_r{ float:right}
#textbox_r li{margin-left: -24px; list-style-image: url(/education/edu_styles/bullet.gif); font-size:10pt; line-height: 110%; font:Verdana, Arial, Helvetica, sans-serif}

#imgcontainer_l{ width:280px; float:left}
#imgcontainer_r{
	width:280px;
	float:right;
	z-index: 20;
}
#imgcontainer_r img {padding: 5px 20px;}
#imgcontainer_r p {padding: 4px 15px;}
#imgcontainer_supp{ width:520px; float:center}
#imgcontainer_supp img {padding: 20px;}
#caption {color: #666; font-size: 8pt; padding: 0px 20px 20px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.imgright {float: right; width:240px; padding:0px 5px;}

h1 { color: #c68320; font-weight: bold; font-size: 13pt; font-family: Verdana, Arial, Helvetica; }
h2  { color: #036; font-weight: bold; font-size: 11pt; font-family: Verdana, Arial, Helvetica;}
h3 { font-weight: bold; font-size: 10pt; font-family: Verdana, Arial, Helvetica; }
h4 {color: #c68320; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; margin-left: 30px;}
h6 {font-size: 12pt; color: #A5B258; font-family: Verdana, Arial, Helvetica, sans-serif;}
.smallertext {font-size:8pt;}
#seal_box h1 a:link {font-weight: bold; font-size: 12pt; font-family: Verdana, Arial, Helvetica; color:#003366; text-decoration:underline;}
#seal_box h1 a:visited {color: #003366; font-weight: bold; font-size: 12pt; font-family: Verdana, Arial, Helvetica; text-decoration:underline;}
#seal_box h1 a:hover {color: #fff; font-weight: bold; font-size: 12pt; font-family: Verdana, Arial, Helvetica; text-decoration:none;}
#seal_box h1 { color: #f2eec9; font-weight: bold; font-size: 13pt; font-family: Verdana, Arial, Helvetica; }


#leftcol_supp h2 {color: #036; font-weight: bold; font-size: 12pt; font-family: Verdana, Arial, Helvetica;}
#leftcol_supp h3 {color:#2e79ab; font-weight: bold; font-size: 10pt; font-family: Verdana, Arial, Helvetica; padding:0; margin-bottom:-10px; }
#leftcol_supp h4 {color:#575757; font-weight: bold; font-size: 14px; font-family: Verdana, Arial, Helvetica; padding:0; margin:-10px 0 0 0; }
h3.maintitle{font-size: 16pt; font-family:Arial, Helvetica, sans-serif; letter-spacing: 0.02em; color: #000066;}
#rightcol h3, #rightcol h3 a:link, #rightcol h3 a:visited {font-weight: bold; font-size: 11pt; font-family: Verdana, Arial, Helvetica; color:#c68320; text-decoration:none;}
#rightcol h3 a:hover, #rightcol h3 a:active {font-weight: bold; font-size: 11pt; font-family: Verdana, Arial, Helvetica; color:#234e79; text-decoration:underline;}
#navcontainer {background-color:#242021; width:740px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #A4B25B;}
#navcontainer ul {
	list-style-type: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 0px;
}
#navcontainer ul li { display: inline;}
#navcontainer ul li a {text-decoration: none; padding: .2em 1em; color: #F5F5F5; background-color: #242021; font-style:normal; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
#navcontainer ul li a:hover {color: #D78E22; background-color: #F5f5f5;}
#navcontainer ul li a.topnav {color: #5995BA; background-color: #463E40;}
#navcontainer ul li a.topnav:hover {color: #f5f5f5; background-color: #7B6C71;}


#seal_box {background-color:#ff9933; color: #000; font-family: verdana, arial, sans-serif, Helvetica; padding: 5px 10px; margin:10px 0 0 0; width: 530px; border-top-color: #FFFFFF; float:none;}
#secondary {background-color:#F2EEC9; color: #000; font-family: verdana, arial, sans-serif, Helvetica; padding: 0 10px; margin:0px; width: 530px; border-top-color: #FFFFFF; float:none;}
#secondary h1 {font-weight: bold; font-size: 14pt; font-family: Verdana, Arial, Helvetica; color:#809c32;}
#seal_box h1 {font-weight: bold; font-size: 12pt;}


#breadcrumb {background-color:#a6b35b; padding-top: 5px; padding-bottom:5px; margin-right: 25.5%; font-size: 8pt; color: #000; font-family: sans-serif, verdana, Helvetica; }
#breadcrumb_supp {background-color:#a6b35b; padding-top: 5px; padding-bottom:5px; font-size: 8pt; color: #000; font-family: sans-serif, verdana, Helvetica; }
#breadcrumb_activity {background-color:#a6b35b; padding-top: 13px; font-size: 8pt; color: #000; font-family: sans-serif, verdana, Helvetica; }
.breadnavi {position:relative; top:-3px;}
.breadcrumb, .padding {padding:5px;}

#breadcrumb a:link, #breadcrumb_supp a:link{font-size: 8pt; color: #000; text-decoration: underline;}
#breadcrumb a:visited, #breadcrumb_supp a:visited{font-size: 8pt; color: #000; text-decoration: underline;}
#breadcrumb a:hover, #breadcrumb_supp a:hover{font-size: 8pt; color: #fff; text-decoration: underline; }

a.bluernav_sml:link { color: #036; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }
a.bluernav_sml:visited { color: #036; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }
a.bluernav_sml:hover   { color: #c68320; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }

a.pages:link {
	color: #333333;
	background-color: #FFCC00;
	text-decoration: underline;
	border: 1px solid #666666;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	font-weight: bold;
}

a.pages:visited {
color: #333333;
	background-color: #FFCC00;
	text-decoration: underline;
	border: 1px solid #666666;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	font-weight: bold;
}

a.pages:hover {
	color: #FF9900;
	background-color: #CCCCCC;
	text-decoration: underline;
	border: 1px solid #666666;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	font-weight: bold;
}

a:link { color: #036; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }
a:visited { color: #036; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }
a:hover { color: #c68320; font-weight: none; font-size: 9pt; font-family: Verdana, Arial, Helvetica; text-decoration: underline }

#footer a{font-size: 8pt;}

.elementary {color: #A5B258}
.subsubtitle {font-size: 10pt; font-weight:bold}

#guess {background-color:#666; width:200px; color:#666666; padding-top: 16px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px;}
#guess a {color:#FFFFFF; font-size: 9pt; line-height:22px}
#guess a:hover {color:#FF9933; padding-top: 20px; padding-right: 0px; padding-bottom: 30px; padding-left: 0px; background-color: #FF9933;}

#guess_long {background-color:#666; width:80%; color:#666666; padding-top: 16px; padding-right: 8px; padding-bottom: 12px; padding-left: 8px;}
#guess_long a {color:#FFFFFF; font-size: 9pt; line-height:22px}
#guess_long a:hover {color:#FF9933; padding-top: 20px; padding-right: 0px; padding-bottom: 30px; padding-left: 0px; background-color: #FF9933;}

hr {border: none 0;  border: 1px solid #e3c057; height: 1px;}

.arrows li{margin-top:5px; list-style-image:url(/education/nautical_charts/images/arrow_large2.gif);}


.bullets {list-style: none; margin: 0 0 4px 0; padding: 0;}
.bullets li{
	display: inline; 
	margin:0; 
	padding:0 0 5px 30px; 
	list-style: none; 
	border-bottom: none;
	display: block;
	text-decoration: none !important;
	background-image: url(/education/nautical_charts/images/bulletpoint.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color: none;
}




/*Questions and Answers*/

#space {
background:url(/education/nautical_charts/images/default.gif);
background-repeat:no-repeat;
display: block;
width:275px;
height:225px;
z-index:1;
position: relative;
left:230px;
}

li#one, li#two, li#three, li#four{
position:relative;
}

#quest a span{
display:none;}

#quest a:hover span{
display: block;
position:absolute;
left:240px;
width:250px;
height:250px;
z-index:2;
}

#one a:hover span{
position:absolute;
top: -15px;
	}
#two a:hover span{
position:absolute;
top: -78px;
	}
#three a:hover span{
position:absolute;
top: -141px;
	}

#four a:hover span{
position:absolute;
top: -180px;
	}
	
/*question and answer blocks*/
#block {padding:2px; background:none; margin:20px 0 0 0; width:200px; float:left;}
#block li {list-style:none; display:block; padding:0px; margin:5px 0;}
#block li a, #block ul li a:visited {display:block; color:#fff; padding:10px 5px; background-color:#fa9703; -moz-border-radius: 12px; text-decoration:none;}
#block li a:hover, #block ul li a:active {display:block; color:#000000; padding:10px 5px; background-color:#e2073f; -moz-border-radius: 12px; text-decoration:none;}

#block li a img, #block ul li a:visited img, #block ul li a:active img{display:none; }
#block li a:hover img{display:block; position:absolute; top:3px; left:25px; border:none;}


#block li.yes a:hover , #block ul li.yes a:active{display:block; color:#000000; padding:10px 5px; background-color:#a6b35b; -moz-border-radius: 12px; text-decoration:none;}


/*roll over text blocks*/

#links {
position: relative;
width: 480px;
font: 14px Arial, sans-serif;
margin:0;
}

#links ul {
list-style-type: none;
padding: 10px;
margin:0;
}

#links li {
float:left; 
margin:5px 0; 
position:relative; 
font-weight:bold;
list-style-type: none;
padding:0 20px 0 0;
}


#links a {
display: block;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 10px 20px;
font: 30px Arial, sans-serif;
color: #234e79;
border: 1px solid #c68320;
background-color:#ebe2a7;
}

#links a:hover {
color: #669933;
background-color: #FFF;
}

#links a span {
display: none;
font: 16px Arial, sans-serif;
font-weight:bold;
}

#links a:hover span {
display: block;
position: absolute;
top: 80px;
left: 0px;
width: 370px;
padding: 5px;
color: #4e4e4e;
text-align:left;

}



#linksone a:hover span{position:absolute; left:0; top: 80px;}
#linkstwo a:hover span{position:absolute; left:-79px; top: 80px;}
#linksthree a:hover span{position:absolute; left:-158px; top: 80px;}
#linksfour a:hover span{position:absolute; left:-237px; top: 80px;}
#linksfive a:hover span{position:absolute; left:-316px; top: 80px;}

#links img {margin-right:7px; border:1px solid #000000;}

/*lesson plans anchors */

.lessonanchors { margin-left:-25px;}
.lessonanchors ul {width: 550px;}
.lessonanchors ul li {float: right; width: 270px; list-style-type:square; padding-bottom:7px;}
.lessonanchors ul li a {
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;}
.lessonanchors ul li a:hover, .lessonanchors ul li a:visited, .lessonanchors ul li a:active {
font-size:12px;
font-weight:bold;
display: block;
text-decoration: underline;
color:#4a99ce;}


/*pictures page*/

.doublepics {float:none;}
.doublepics p {padding:0 5px;}
.picleft {width: 225px; float:left; padding-top:5px;}
.picright {width: 225px; float:right; padding-top:5px;}

/*lesson plans page and more*/

.hiddendiv {display:none;}



.head {background:#000; width:760px;}
		#search{ background:url("/siteart/noaa-strip.jpg") top left no-repeat; height:36px; width:740px; font:8pt Verdana, Arial, Helvetica, sans-serif;}
			#search form {float:right; margin:5px 5px 0 0;}
				#search .textbox {border:1px solid #5e6e66; height:12pt;}
				#search .radiobtn {padding-top:5px;}
	#footer {margin:0 auto; width:760px; font:8pt Verdana, Arial, Helvetica, sans-serif; background:#fff; text-align:left;}
	.foot {margin:0 auto; width:760px; font:8pt Verdana, Arial, Helvetica, sans-serif; background:#fff; text-align:left;}
		.foot a {color:#369; text-decoration:none;}
		.foot a:hover { text-decoration:underline;}
		.foot p {margin-top:0; padding-top:0; font-size:8pt;}
		.foot .logo { float:left; padding:0 10px;}
		.column {background: #fff; margin:.5em .7em; width:160px; float:left; padding-left:1.2em; border-left:1px solid #c4cec6;}
			.column dt{ font-weight:bold; padding-bottom:.3em;}
			.column dd{margin:0; padding:.2em 0;}

					/* Social Icons */
	
	.social-icons {
      background:url(/images/socialmedia/social-icons.png);
	  float:left;
	  margin:8px 0 0 10px;
}

	.social-block a {text-decoration:none;}


/* end social icons */

.no-border {border:none;}
.clear{clear:both;}