/* @override http://172.28.2.58/index_styles13_2.css
	http://172.28.2.58/index_styles13.css
	http://history.org/index_styles13.css */



body{
	background-color: #002B47;
}
#main{
/* 	background-color: #E3E0D8; */
	background-color: #94886d;
	z-index: 5;
	position: relative;
	width: 100%;
	margin: 0 auto;	
	}


#main .featureimg {
/*	width: 980px;
	position: absolute;
	top: 0px;
	left: 17%;
	z-index: -1;*/
}


/* FEATURES */	
#features{
	color: white;
	height: 570px;
	position: relative;
	width:100%;
}

.loading {
	margin: 150px auto;
	color: #000;
	font-size: 28px;
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
}

#features article {
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: 100%;
	
}

#features article a {
	margin-top: 10px;
	display: block;
	height: 550px;
	border: 5px solid #fff;
	
	-moz-border-radius: 5px; 
	   -webkit-border-radius: 5px; 	
	border-radius: 5px;
	overflow: hidden;
}

#features article img {
margin-top: 0px;
	max-width: 100%;
}
.js #features article {
	display: none;
}

#features article .text {
	position: absolute;
	bottom: 35px;
	right:85px;
	width:300px;
	max-width: 500px;
	min-width: 300px;
	padding: 10px 15px 12px 15px;
	z-index: 2;
	background: #05355A;
	background: rgba(0, 56, 99, .9);
	
	-moz-border-radius: 5px; 
	   -webkit-border-radius: 5px; 	
	border-radius: 5px;	   
	   
	   -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .4);
	   	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .4);
}


#features article h3 {
	font-size: 30px;
	font-size: 2.4rem;
	line-height: 1.2em;
	margin-bottom: 5px;
	padding: 0 50px 0 0;
	font-weight: 600;
	text-align: left;
	color: white;
	text-shadow: 0 1px 1px #000;
/*	text-shadow: 0 0 10px #000,
	                   0 0 10px #23211F;*/
	}
#features article p {
	font-size: 16px;
	font-size: 1.4rem;
	line-height: 1.3em;
	padding: 0 50px 0 0;
	text-align: left;
	color: white;
/*	text-shadow: 0 0 1px #fff,
                   0 0 5px #000,
                 0 0 5px #000,
                 0 0 5px #000;*/
}
#features a.learnmore {
	position: relative;
	margin-top: -28px;
	float: right;
	z-index: 4;
	margin-right: 17px;
	text-indent: -9999em;
}


/* CSS ARROW */
#css-circlearrow {
	position: absolute;
	right: 20px;
	top: ;
	width: 40px;
	height: 40px;
}
#css-arrowcircle {
	width: 40px;
	   height: 40px;
	   background: white; 
	   
	   -moz-border-radius: 20px; 
	   -webkit-border-radius: 20px; 
	   border-radius: 20px;
	   
	   	position: absolute;
	   	left: 0;
	   	top: 0;
	   	-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .3);
	   	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .3);
}
#css-arrowbox {
	width: 12px;
	height: 11px;
	background: #938A73;
		position: absolute;
		left: 9px;
		top: 15px;
}
#css-right-triangle {
   width: 0;
   height: 0;
   border-left: 13px solid #938A73;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   	position: absolute;
   	left: 20px;
   	top: 10px;
}

/* features hover */
#features article:hover {
	cursor: pointer;
}
#features article:hover #css-arrowbox {
	background: #004675;
}
#features article:hover #css-right-triangle {
	border-left-color: #004675;
}

/* numberlinks */
#numberLinks {
	position: absolute;
	bottom:40px;
	right: 63px;
	z-index: 4;
}
#numberLinks a {
	display: block;
	float: left;
	padding: 0;
	width: 15px;
	height: 15px;
	background: #fff;
	border: 1px solid gray;
	font-size: 2px;
	margin-right: 3px;
	position: relative;
	 -moz-opacity: 0.5;
	opacity: .5;

	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;	

	
	text-indent: -9999em;
}
#numberLinks a#currentnum {
	background:#888888;
	border-color: #666;
	 -moz-opacity: 1;
	opacity: 1;
}
#numberLinks a.pausebtn,
#numberLinks a.playbtn {
	background: gray;
	padding: 0;
	text-indent: 0;
	 -moz-opacity: 1;
	opacity: 1;
	
}
#numberLinks a:hover {
	background: #004675;
}
#numberLinks a.pausebtn:hover {
}

#features #tooltip {
	display: none;
	position: absolute;
	z-index: 57654432;
}
#features #tooltip p {
	background: #fff;
	border: 1px solid #ccc;
	font-size: 11px;
	margin:0 0 6px 0;
	padding: 7px 7px;
	color: #000;
}
#features #tooltip .tooltiparrow {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7px;
	background: url(/base_images/tips/tip.gif) no-repeat 50% bottom;
}



/*HIGHLIGHTS*/

#highlights .two.columns {
	padding: 0 5px;
}
#highlights{
	background: #05355A;
/*	background: #6285a0;*/
	/*background: rgba(0, 56, 99, .9);*/
	background: #;
	
	padding: 15px 25px 5px;
	position: relative;
	z-index: 3;
	min-height: 240px;
	
	-moz-border-radius-topleftt: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .6);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .6);
}
#highlights h2{
	color: white;
	text-transform: uppercase;
	font-size: 13px;
	font-size: 1.3rem;
	letter-spacing:.09em;
	background: #05355A;
/*		background: rgba(0, 56, 99, .9);*/
		/*background: #6285a0;*/
		
	width: 260px;
	font-weight: 600;
	position:absolute;
	text-align: center;
	margin-top: -45px;
	margin-left: -25px;
	padding-top: 10px;
	padding-bottom: 10px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	text-shadow:1px 1px 2px #333333;
	display: none;
}
#highlights h2 a {
	color: #fff;
}
#highlights article{
	padding-top: 0px;
	padding-bottom: 10px;
	position: relative;
	height: 150px;
	width: 100%;
	margin: 0 auto;
}

#highlights article img{
	height: 130px;
	width: 100%;
	z-index: -1;
	position: absolute;
	top: 20px;
	left: 0px;
	/*-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;*/
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .5);
}

#highlights article h3{
	z-index:2;
	padding: 5px;
	top: 0px;
	font-size: 11px;
	font-size: 1.1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: white;
	margin:0 auto;
	text-align: center;
	/*-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;*/
	position: relative;
	z-index: 3;
	transition: top .1s;
	-moz-transition: top .1s; /* Firefox 4 */
	-webkit-transition: top .1s; /* Safari and Chrome */
	
	-webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, .4);
	box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, .4);
}

#highlights article h3 a {
	color: #fff;
}
#highlights article h4 {
	padding: 6px 10px 0px;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.3em;
	letter-spacing: 0em;
	font-weight: 600;
	position: relative;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;	
}
#highlights article h4:hover {
	background: #F7F3DC;
}
#highlights .highlightinfo {
	background: white /* for lt ie9 */;
	/*background: rgba(255, 255, 255, 0.9);*/
	position: relative;
	top: 125px;
	z-index: 2;
	height: 65px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	transition: top .1s, height .1s;
	-moz-transition: top .1s, height .1s; /* Firefox 4 */
	-webkit-transition: top .1s, height .1s; /* Safari and Chrome */
	
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
}

.highlightinfo p {
	padding: 5px 10px;
	padding-bottom: 0;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.3em;
}

.highlightinfo a.small.button{
	background-color: #fff;
	color: white;
	font-weight: bold;
	font-size: 12px;
	margin: 5px 20px 5px 10px;
	padding: 6px 8px;
	float: right;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.highlightinfo a.small.button:hover {
	background: #F7F3DC;
}

.highlightinfo ul.otherlinks{
	padding: 5px 5px 5px 0;
	clear: right;
	border-top: 1px solid #ccc;
	visibility: hidden;
	opacity: 0;
	}
ul.otherlinks li {
	list-style: none;
	padding:0px 15px 0px 22px;
	position: relative;
	height: 1px;
}
#highlights ul.otherlinks li:before{
content: ' ';
	width: 16px;
	height: 21px;
	background: url(/images_global/arrow_right.gif) no-repeat left center;
	position: absolute;
	top: 0px;
	left: 11px;
}
ul.otherlinks li a {
	font-weight: 600;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.3em;
	letter-spacing:.05em;
	display: block;
	padding: 2px 4px;

}
ul.otherlinks li a:hover {
	background: #fff;
}

ul.otherlinks .leftcol {
	width:39%;
	float: left;
}
ul.otherlinks .rightcol {
	width:59%;
	float: right;
}




.highlightinfo p,
.highlightinfo a.small.button,
.highlightinfo ul.otherlinks
{
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s;
	-moz-transition: opacity .3s; /* Firefox 4 */
	-webkit-transition: opacity .3s; /* Safari and Chrome */
}


/* highlights hover */
#highlights article:hover h3{
	top: -10px;
	width: 150%;
	left: -40px;
	z-index: 9;
}
#highlights article:hover h4{
	-moz-border-radius: 0;
	border-radius: 0;
	border-top: none;
}
#highlights article:hover .highlightinfo {
	height: 220px;
	width: 150%;
	top: -10px;
	left: -40px;
	z-index: 10;
}
#highlights article:hover .highlightinfo p,
#highlights article:hover .highlightinfo a.small.button,
#highlights article:hover .highlightinfo .otherlinks {
	visibility: visible;
	opacity: 1;
}
#highlights article:hover .highlightinfo .otherlinks li {
	height: auto;
}


/*highlight box specific styles */

article#citizenshipfeature h3{
	background-color: #ab0707;
	/*width: 110px;*/
}
article#historyfeature h3{
	background-color: #235573;
	letter-spacing: .05em;
	/*width: 170px;*/
}
article#visitfeature h3{
	background-color: #af913b;
	/*width: 140px;*/
}
article#teachersfeature h3{
	background-color: #123360;
	/*width: 90px;*/
}
article#blogsfeature h3{
	background-color: #30482C;
	/*width: 70px;*/
}
article#multimediafeature h3{
	background-color: #214A4B;
	/*width: 110px;*/
}
article#citizenshipfeature h4{
	border-top: 4px solid #ab0707;
}
article#historyfeature h4{
	border-top: 4px solid #235573;
}
article#visitfeature h4{
	border-top: 4px solid  #af913b;
}
article#teachersfeature h4{
	border-top: 4px solid #123360;
}
article#blogsfeature h4{
	border-top: 4px solid #30482C;
}
article#multimediafeature h4{
	border-top: 4px solid #214A4B;
}
article#citizenshipfeature h4 a, article#citizenshipfeature a.small.button, article#citizenshipfeature ul.otherlinks li a{
	color: #ab0707;
}
article#historyfeature h4 a, article#historyfeature a.small.button, article#historyfeature ul.otherlinks li a{
	color: #235573;
}
article#visitfeature h4 a, article#visitfeature a.small.button, article#visitfeature ul.otherlinks li a{
	color: #af913b;
}
article#teachersfeature h4 a, article#teachersfeature a.small.button,  article#teachersfeature ul.otherlinks li a{
	color: #123360;
}
article#blogsfeature h4 a, article#blogsfeature a.small.button, article#blogsfeature ul.otherlinks li a{
	color: #30482C;
}
article#multimediafeature h4 a, article#multimediafeature a.small.button, article#multimediafeature ul.otherlinks li a{
	color: #214A4B;
}






/* POPULAR LINKS */
#popularlinks ul li {
	position: relative;
}
#popularlinks ul li a {
	color: #fff !important;
}



/* -- webcam tooltip -- */
#popularlinks ul li .tooltip.webcamtooltip {
	width: 250px;
	left: -65px;
}
#popularlinks ul li .tooltip div.webcam {
	clear: left;
		float: left;
		width: 99%;
		padding: 0px 8px 8px;
}
#popularlinks ul li .tooltip div.webcam:hover,
#popularlinks ul li .tooltip p a:hover {
	background-color: beige;
}






#footer {
	background: #002b47 !important;
}




/* Smaller Devices ----------------------------------------------------------------------- */
@media only screen and (max-width: 855px){
	#highlights {
		height: 100px;
	}
	
	#highlights .two.columns {
		height: 200px;
	}

	#highlights article{
		height: auto;
		margin: 0 auto 15px;
	}
	
	#highlights article img{
		height: 100px;
		top: 20px;
	}
	
	#highlights article h3{
		top: 0px;
		height: 33px;
		}
	#highlights article h4 {
		font-size: 1.3rem;
	}	
	#highlights .highlightinfo {
		top: 85px;
		height: 82px;
		
	}
	#highlights article:hover .highlightinfo {
		height: 178px;
		top: 20px;
	}
	.highlightinfo ul.otherlinks {
		display: none;
	}
	
	#popularlinks ul li {
		padding: 15px 6px !important;
	}
}

@media only screen and (max-width: 767px) { 

	#features article .text {
		width: 100%;
		max-width: 100%;
		left: 0;
		border-radius: 0;
	}
	#numberLinks{
		margin-left: 255px;
		position: static;
		margin-top: 400px;
		width: 100%;
	}
	
	#highlights {
		height: auto;
	}
	#highlights .two.columns {
		height: auto;
	}
	#highlights h2 {
		width: 100%;
		border-radius: 0;
		background-color: #002b47;
	}
	#highlights article {
		padding-top: 0px;
		padding-bottom: 0px;
		position: relative;
		height: 240px;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	#highlights article img {
		width: 240px;
		height: auto;
		position: absolute;
		left: 0;
		top: 23px;
		-moz-border-radius-topright: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-bottomright: 0;
		border-bottom-right-radius: 0px;
	}
		
	#highlights article h3{
		top: 0px;
		left: 0px;
		height: auto;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.6em;
		padding: 0;
		
		transition: none;
		-moz-transition: none; /* Firefox 4 */
		-webkit-transition: none; /* Safari and Chrome */
	}
	#highlights article h4 {
		font-size: 16px;
		font-size: 1.6rem;
		border-top: none;
	}
	#highlights article h4:hover {
			}
	#highlights .highlightinfo {
		background: white /* for lt ie9 */;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		top: 23px;
		z-index: 2;
		margin-left: 30%;
		height: 243px;
		float: right;
		width: 70%;
		-moz-border-radius-bottomright: 5px;
		border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 0px;
		border-top-right-radius: 0px;
		-moz-border-radius-bottomleft: 0;
		border-bottom-left-radius: 0px;
		
		transition: none;
		-moz-transition: none; /* Firefox 4 */
		-webkit-transition: none; /* Safari and Chrome */
	}
	
	.highlightinfo p {
			}
	
	.highlightinfo a.small.button{
		}
	.highlightinfo a.small.button:hover {
		
	}
		
	
	
	.highlightinfo p,
	.highlightinfo a.small.button,
	.highlightinfo ul.otherlinks
	{
	visibility: visible;
	opacity: 1;
	font-size: 1.4rem;
	}
	


	/* highlights hover */
	#highlights article:hover h3{
		top: 0px;
		width: 100%;
		left: 0px;
		z-index: 9;
	}
	#highlights article:hover h4{
		-moz-border-radius: 0;
		border-radius: 0;
		border-top: none;
	}
	#highlights article:hover .highlightinfo {
		height: 240px;
		width: 70%;
		top: 23px;
		left: 0px;
		z-index: 10;
	}
	#highlights article:hover .highlightinfo p,
	#highlights article:hover .highlightinfo a.small.button,
	#highlights article:hover .highlightinfo .otherlinks {
		visibility: visible;
		opacity: 1;
	}
	#highlights article:hover .highlightinfo .otherlinks li {
		height: auto;
	}
	
	
	
}


/* FEEDBACK BUTTON */
.feedbackbutton {
display: none;

position: absolute;
top:600px;
right:0px;
z-index: 2000000;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding-top: 8px;
  padding-right: 13px;
  padding-bottom: 8px;
  padding-left: 13px;
  text-decoration: none;
  
		-moz-border-radius-bottomleft: 7px;
		border-bottom-left-radius: 7px;
		-moz-border-radius-topleft: 7px;
		border-top-left-radius: 7px;
		
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #e67f00 0px;
  background: #f5be7a;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5be7a), to(#e38109));
  background: -moz-linear-gradient(top, #f5be7a, #e38109);
     -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .4);
	   	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .4);
}
.feedbackbutton:hover {
  background: #faa741;
}