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

@media only screen and (min-width: 481px) and (max-width: 850px) {
	
/* Layout (tablet) */

body { margin: 0; padding: 0; }

.page {
	margin: 0 1%;
}
header {
	height: 56px;
	background: url(../images_template/noaa-fisheries-med.png) no-repeat right 0px #ddeeff;
}
.logo {
	font-size: 1.2em;
	display: block;
	padding: .1em;
	width: 65%;
	text-shadow: 1% 1% 1% #999;
}
.logo a {
	color: #000033;
	font-weight: bold;
}
.logo a:hover {
	text-decoration: none;
	color: #336699;
}
nav { background-color: #003366; }
.print {
	display: none; 
}

#content h1, #content h2, #content h3, #content h4 	{ margin: 0 0 1em 0; }
#content p { text-align: justify; }

#recent, #explore {width: 98%; background-color:#f1f1f1; }
#highlights, .column3 { width: 98%; }
#highlights, #recent, #explore, .column3 { float: left; border: 1px solid #336699; }
#image-of-week img { width: 100%; }
#whsa img { width: 40%; float: left; clear: none; margin-right: 5px; }

/* Side nav css to match current NOAA template */
#side-nav {
	width: 100%;
	float: left;
	clear: both;
	margin: 0 20px 5px 0;
	font-family:Arial;
	font-size:10px;
	font-weight: bold;
	text-decoration:none;
}
#side-nav a {
	float: left;
	padding: 5px;
	text-align: center;
	border-right: 1px solid #003366;
}
#side-nav a:hover {
	color: #ffe090;
}


/*Site navbar for sub directories*/
#content #subnav #site-nav { width: 100%; margin: 0 0 10px; float: left; clear: both; }
#content #subnav #site-nav a { display: block; float: left; padding: 0 10px; border-right: 1px solid #000033; font-size: 75%; font-weight: bold; text-decoration: underline; }
#content #subnav #site-nav a:hover { background-color: #FAFF46; }

.video-container img {
	max-width: 50%;
	margin-bottom: 10px;
	height: auto;
	border: 2px solid #336699;
}
video {
	max-width: 100%;
}

/* XML Pages */
#container { width: 100%; }
#container .photo { width: 100%; float: left; clear: both; border-top: 1px solid #dddddd; margin-bottom: 5px; }
#container .photo img { float: left; width: 40%; margin-right: 5px; }
	
/* Photo Gallery CSS */

#gallery { width: 100%; margin: 0 auto; }

.gallery-link {
	width: 47%;
	float: left; 
	margin: 0 .5em .5em 0;
	border: 1px solid #336699;
	border-radius: 0 10px 10px 0;
	box-shadow: 3px 3px 3px #dddddd;
}
.gallery-link img {
	float: left; 
	margin-right: 5px; 
	width: 150px; 
	height: 100px; 
	border: 1px solid #336699;
}
.gallery-link a { display: block; }

.gallery-image {
	width: 95%;
	height: 125px; 
	float: left; 
	padding: 0 5px 0 0;
	clear: none; 
	margin: 0 15px 20px 15px; 
	border-top: 1px solid #336699; 
	overflow: auto;
	border-radius: 10px;
	box-shadow: 3px 3px 3px #003366;
	font-size: 90%;
}
.gallery-image a { text-decoration: underline; }
.gallery-image img { 
	float: left; 
	margin-right: 10px; 
	width: 30%; 
	height: auto; 
}

.image-link { width: 23%; height: 320px; float: left; text-align: center; margin: 0 15px 15px 0; padding: 0; 
border: 3px solid #336699; box-shadow: 5px 5px #dddddd; font-size: 1.1em; background-color: #ddeeff; }
.image-link img { width: 100%; height: auto; padding: 0; margin: 0; }

}
/*Staff bio colorbox*/
#staff { width: 400px; }

/*Staff Page CSS */

#Tabs1 .ui-tabs, #Tabs1 .ui-tabs-nav, #Tabs1 .ui-tabs-anchor { padding: 10px; }
#content #Tabs1 ul li { margin: 0 10px 0 0; }
.division { width: 95%; float: left; clear: none; margin: 0 10px 10px 0; background-color: #EBEBEB; border: 1px solid #cccccc; border-radius: 10px; padding: 5px; }
.division img { margin: 0 5px 5px 0; border: 1px solid #336699; border-radius: 10px; box-shadow: 3px 3px 3px #dddddd; }



#cboxContent img { float: left; margin: 0 10px 5px 0; }
#cboxContent ul li { margin: 0 0 0 25px; }
#cboxContent p { margin-top: 10px; }


.clear-fix { clear: both; line-height: 1px; }


}