@charset "UTF-8";

/*! 

IMPORTANT: 
- THIS VERSION IS FOR INTERNAL DEVELOPMENT ONLY -- IT IS NOT OPTIMIZED FOR PRODUCTION
Use a good minifier such as: http://tools.w3clubs.com/cssmin/

- Retain this internal version to document alterations made from revision to revision. 

PROJECT INFO:
Project: Lehigh University Web Template 1 - responsive design enhancement
Purpose: Override desktop browser templates with capability to adapt to smaller screen devices (tablet, phones) 
Author: Communications & Public Affairs - Internet Services (Steve Oblas)

Description: Use CSS3 media queries to detect and adapt page view to browser widths of popular mobile devices. This is NOT the preferred practice to use when building an HTML 5 page with the fluid "mobile first" approach from the ground up. 
Rev: 2011-08-18 "LU_web_template1-RD_r1j.html"
2011 Lehigh University

PRODUCTION NOTES: 
It is important to remember that these styles are cumulative and in some cases overwrite SiteLayout.css styles. If you add to these styles, make sure you are properly overwriting previous styles

STYLESHEET COLORS:
Consult an online generator such as: http://www.2createawebsite.com/build/hex-color-scheme-generator.html
000000 : black
ffffff : white
666666 : dark gray
E01BBC : hot pink (for testing)
502d0e : Lehigh brown
dddcda : light gray 
D6D4A9 : light greenish gray (left column nav) 
8db8c8 : light blue (seach box)

STYLESHEET TABLE OF CONTENTS:
Usage: highlight unique character pair at the front of each TOC section, then press Shift + F3 (Adobe CS3)
      ^1 Additional global code and large desktop/laptop screen widths (because CMS styles are preloaded first here)
	  ^2 320screen width  iPhone/Smartphone in portrait orientation
	  ^3 480 screen width  iPhone/Smartphone in landscape orientation
	  ^4 768 screen width  iPad in portrait orientation / netbook in landscape orientation
	  ^5 1024 screen width  iPad in landscape orientation / netbook

	  
/* ^1 --------------- Additional global code and large desktop/laptop screen widths  -------------------------*/
/* SJO: add a hover color to section nav links */

#navcontent	a:hover {color:#fff;}

/* SJO: use alternative way to arrrange global nav, add a hover color to links */
#navGlobaltext {position:absolute; top:0px; left:-10px; text-align:left;}
#navGlobaltext a {border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;color: #ffffff;text-transform: uppercase;padding: 0px 10px 0px 10px;text-decoration: none;font-weight: bold;	display: inline-block;margin: 0px 0px 0px 0px;font-size: 1em;}
#navGlobaltext a:hover {background-color:#666666;color:#fff;}

#subGridCt #breadCt	{font-size:12px;margin-left:24px;}/* SJO: breadcrumb nav*/

/* SJO: Might not be needed here any more ????? */
.clear_both { clear: both; line-height: 1px; }


/* SJO: Begin Rules Sensitive to Screen Size */

/* ^2 --------------------- 320screen width  iPhone/Smartphone in portrait orientation ----------------------*/

@media screen and (max-width: 320px) {
/* Style adjustments for smallest viewports thru 320px */
BODY {
	width: 320px;
	background-image: none;}

.jrotator {display:none;}

#pageCt	{position:relative;background-color:#fff;width:320px;margin:4px auto 0px; }/* SJO: reduce width of entire Page Wrapper -   */

/* Footer */
#footer	{padding:0em 0em 3.4em;font-family:Arial, Helvetica, sans-serif;color:#5D6F7D;text-align:center;width:320px;font-size:.9em;}
#footercurrent						{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #7C6B55;
	width: 320px;
	text-align: center;
	background-image: none;
	background-repeat: repeat-y;
	padding-top: 0.9em;
	padding-right: 0px;
	padding-bottom: 3.4em;
	padding-left: 0px;}
#footerbottom {
	width: 320px;}

#header	{position:relative;background-color:#502d0e;height:77px;margin-left: 0px} /* SJO: Reduce height of header block above Global navigation */
#header #mdnav { display:block;}
#header H1 { background: url("../images/head_logo_office.gif") no-repeat scroll 0 0 transparent; }
#header h1{position:absolute;top:10px;left:12px;background:url(//www4.lehigh.edu/Media/Website%20Resources/images/sitewide/small_logo.gif) no-repeat;width:290px;height:21px;text-indent:-9999px;overflow:hidden;}/* SJO: Substitute small logo version */
#header h2 {background-image: url("../images/ESEI-mobile-name.gif");height: 21px; left: 12px; margin-top: 34px; top: 0; width: 290px; z-index:2;}
#headerLink A {position:absolute;top:1px;left:1px;width:1px;height:1px;overflow:hidden;} /* SJO: hotspot for repositioned office name */

.imageheader #header H2 {visibility:hidden;}/* SJO: hide the office name graphic at this size */

/*.imageheader #header H2 {top:210px;left:40px;background-image:url(../images/head_logo_office.gif);width:243px;height:58px;}*//* SJO: ALT - reposition office name graphic */
/*#headerLink {font-size:16px;font-weight:bold;}*//* SJO: ALT - display text intead of graphic */

#pageNav {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	padding-top: 18px;
	padding-right: 5px;
	padding-bottom: 2em;
	padding-left: 5px;
}


#gridCt {margin:3px;padding-bottom:3px;border-bottom:3px solid #dddcda;background-image: none}/* 3 column area PLUS footer area */
#subGridCt {background:url(../images/spacer.gif) repeat-y;width:320px; }/* 3 column width area */
#subGridCt .content_header {display:none; }
#subGridCt #zoneCt {float:right;width:320px;} /* middle or main column area */
#subGridCt #zone1 {float:left;margin-top:110px;border-right:0px #000000 solid;font-size:100%;line-height:1.5em;padding: 0 0 0 25px; width: 280px; }/* middle/main area  */
#subGridCt #zone2 {float:left;width:300px;margin-left:40px;margin-top:15px; margin-left:0px; padding-left:25px;}/* right column/sidebar*/
#subGridCt #zone3 {float:left;width:298px;margin-left:8px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#sidebarcaption {
	float: left;
	color: #000;
	margin-left: auto;
	margin-right: auto;
	width: 76%;
	color: #000;
	padding: 10px 0 30px 0;
	text-align: left;
} 

#secGridCt {background:url(../images/spacer.gif) repeat-y;width:320px; }/* 3 column width area */
#secGridCt #zoneCt {float:right;width:320px;} /* middle or main column area */
#secGridCt #zone1 {float:left;margin-top:130px;border-right:0px #000000 solid;font-size:100%;line-height:1.5em;padding: 0 0 0 25px; width: 280px; }/* middle/main area  */
#secGridCt #zone2 {float:left;width:300px;margin-left:40px;margin-top:15px; margin-left:0px; padding-left:25px;}/* right column/sidebar*/
#secGridCt #zone3 {float:left;width:298px;margin-left:8px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#searchCt {
	position: absolute;
	top: 175px;
	right: 48px;
	width: 223px;
	height: 22px;
	background-color: #C6CB30;
	overflow: hidden;
}/* SJO: relocate search box*/

#lsnav {display:none;}

#mdnav {position:absolute;bottom:0px;background-color:#FFFFFF;width:320px;height:22px;font-family:Helvetica, Arial, sans-serif;font-size:100%;color:#FFFFFF;text-transform:uppercase;line-height:1.8em;text-align: center;}
#mdnav ul {margin-left: auto;margin-right: auto;text-align: center;width: 80%;}
#mdnav ul li {float:none;}
#mdnav ul li a {
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	display: block;
	text-indent: 0;
	margin: 2px 10px 1px 24px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-attachment: scroll;
	background-color: #C6CB30;
	background-image: url(../images/mobile_link_arrow.png);
	background-repeat: no-repeat;
	background-position: right 50%;}
#mdnav ul li a:hover {
	background-color: #E3E593;
	color: #5c6f7c;}
#mdnavtext {text-align: center;	margin-left:auto;margin-right:auto;	width:80%;position:absolute;line-height: 1.8em;}
#mdnavtext a {
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	display: block;
	text-indent: 0;
	margin: 2px 10px 1px 24px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #C6CB30;
}
#n1 a {width:80%;}
#n2 a {width:80%;}
#n3 a {width:80%;}
#n4 a {width:80%;}
#n5 a {width:80%;} /*added*/

#navGlobal {position:absolute;bottom:0px;background-color:#FFFFFF;width:320px;height:22px;font-family:Helvetica, Arial, sans-serif;font-size:100%;color:#FFFFFF;text-transform:uppercase;line-height:1.8em;}
#navGlobaltext {text-align: center;	margin-left:auto;margin-right:auto;	width:80%;}
/*#navGlobaltext a {color: #fff;font-weight: bold;font-size: 1em;display: block;	margin: 2px 10px 1px 20px;background: #341c07 url(../images/mobile_link_arrow.png) no-repeat right 50%;}*/
#navGlobaltext a {color: #fff;font-weight: bold;font-size: 1em;display: block;	margin: 2px 10px 1px 24px;background: #341c07 no-repeat right 50%;-moz-border-radius: 6px;
	-webkit-border-radius: 6px;}
#navGlobal .secondtier {display:none}
#navGlobal ul {margin-left: auto;margin-right: auto;text-align: center;width: 70%;}
#navGlobal ul li {float:none;}
#navGlobal ul li a {color: #fff;font-weight: bold;font-size: 1em;display: block;text-indent: 0;margin: 2px 10px 1px 100px;;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#navGlobal ul li a:hover {background-color:#666666;color:#fff;}	
#n1 a {width:70%;}
#n2 a {width:70%;}
#n3 a {width:70%;}
#n4 a {width:70%;}
#n5 a {width:70%;} /*added*/

#navRCEASGlobal {display:none;}


} /* END ^2 */


/* ^3 -------------------- 480 screen width  iPhone/Smartphone in landscape orientation ---------------------*/
@media screen and (min-width: 321px) and (max-width: 480px) {
/* Style adjustments for viewports wider than 320 thru 480px */.
BODY {width:480px;background-image: none}

.jrotator {
	display: none;
}
#pageCt	{position:relative;background-color:#fff;width:480px;margin:4px auto 0px; }/* SJO: reduce width of entire Page Wrapper -   */

/* Footer */
#footer	{padding:0em 0em 3.4em;font-family:Arial, Helvetica, sans-serif;color:#5D6F7D;text-align:center;width:480px;font-size:.9em;}
#footercurrent						{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #7C6B55;
	width: 480px;
	text-align: center;
	background-image: none;
	background-repeat: repeat-y;
	padding-top: 0.9em;
	padding-right: 0px;
	padding-bottom: 3.4em;
	padding-left: 0px;
	font-size: .9em;
}
#footerbottom {
	width: 480px;
}
#footercurrent #top					{
	font-weight: bold;
	font-size: .9em;
	color: #7C6B55;
	padding-top: 8px;
	padding-bottom: 8px;}



#header	{position:relative;background-color:#502d0e;height:77px;margin-left: 0px} /* SJO: Reduce height of header block above Global navigation */
#header H1{position:absolute;top:10px;left:82px;background:url(//www4.lehigh.edu/Media/Website%20Resources/images/sitewide/small_logo.gif) no-repeat;width:290px;height:21px;overflow:hidden;text-indent:0px;color:transparent;}/* SJO: Substitute small logo version */
#header h2 {background-image: url("../images/ESEI-mobile-name.gif");height: 21px; left: 85px; margin-top: 34px; top: 0; width: 290px; z-index:2;}


#lsnav {display:none;}

.imageheader #header H2 {visibility:hidden;}/* SJO: hide the office name graphic at this size */
#headerLink A {position:absolute;top:1px;left:1px;width:1px;height:1px;overflow:hidden;text-indent:0px;} /* SJO: hotspot for repositioned office name */

#navGlobal {position:absolute;bottom:0px;background-color:#FFFFFF;width:480px;height:22px;font-family:Helvetica, Arial, sans-serif;font-size:100%;color:#FFFFFF;text-transform:uppercase;line-height:1.8em;}
#navGlobaltext {text-align: center;	margin-left:auto;margin-right:auto;	width:70%;}
#navGlobaltext a {color: #fff;font-weight: bold;font-size: 1em;display: block;	margin: 2px 10px 1px 100px;background: #341c07 url(../images/mobile_link_arrow.png) no-repeat right 50%;-moz-border-radius: 6px;
	-webkit-border-radius: 6px;}
	
#printLogo {display:none}
#pageNav {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 18px 5px 2em 5px;
}

#gridCt {margin:3px;padding-bottom:3px;border-bottom:3px solid #dddcda; background-image:none}/* 3 column area PLUS footer area */
#subGridCt {background:url(../images/spacer.gif) repeat-y;width:480px; }/* 3 column width area */
#subGridCt #zoneCt {float:right;width:460px;} /* middle or main column area */

#subGridCt #zone1  {
	float: left;
	width: 450px;
	border-right: 0px #000000 solid;
	margin-top: 100px;
	font-size: 100%;
	line-height: 1.5em;
	padding-top: 0;
	padding-right: 20;
	padding-bottom: 0;
	padding-left: 20px;
}/* middle/main area  */
#subGridCt #zone2 {float:left;width:340px;margin-left:20px;margin-top:15px;}/* right column/sidebar*/
#subGridCt #zone3 {float:left;width:436px;margin-left:10px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#secGridCt {background:url(../images/spacer.gif) repeat-y;width:480px; }/* 3 column width area */
#secGridCt #zoneCt {float:right;width:460px;} /* middle or main column area */
#secGridCt #zone1 {
	width: 450px;
	margin-top: 100px;
	float: left;
	font-size: 100%;
	line-height: 1.5em;
	padding-top: 0;
	padding-right: 20;
	padding-bottom: 0;
	padding-left: 20px;
}
#secGridCt #zone2 { margin-top:0px; margin-left:10px; }
#secGridCt #zone3 {float:left;width:436px;margin-left:10px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#sidebarcaption {
	float: left;
	width: 340px;
	color: #000;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 48%;
	color: #000;
	padding: 10px 0 30px 0;
} 

#searchCt {
	position: absolute;
	top: 155px;
	right: 130px;
	width: 223px;
	height: 22px;
	background-color: #C6CB30;
	overflow: hidden;
}/* SJO: relocate search box*/

#header #mdnav {display: block; position:absolute;bottom:0px;background-color:#FFFFFF;width:480px;height:22px;font-family:Helvetica, Arial, sans-serif;font-size:100%;color:#FFFFFF;text-transform:uppercase;line-height:1.8em;text-align: center;}
#header #mdnav ul {margin-left: auto;margin-right: auto;text-align: center;width: 80%;}
#header #mdnav ul li {float:none;}
#header #mdnav ul li a {color: #fff;font-weight: bold;font-size: 1em;display: block;text-indent: 0;background: #C6CB30;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#header #mdnav ul li a:hover {background-color:#E3E593;color:#5c6f7c;}
#mdnavtext {text-align: center;	margin-left:auto;margin-right:auto;	width:80%;position:absolute;line-height: 1.8em;}
#mdnavtext a {color: #fff;font-weight: bold;font-size: 1em;display: block;text-indent: 0;margin: 2px 10px 1px 24px;;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#n1 a {width:45%;float:left;}
#n2 a {width:45%;float:right; margin-top:-20px;}
#n3 a {width:45%;float:left;}
#n4 a {width:45%;float:right; margin-top:-20px;}
#n5 a {width:45%;float:left;}  /* added */

#navRCEASGlobal {display:none;}



} /* END ^3 */



/* ^4 ----------- 768 screen width  iPad in portrait orientation / netbook in landscape orientation ---------*/
@media screen and (min-width: 481px) and (max-width: 768px) {
/* Style adjustments for viewports wider than 480 thru 768px */
BODY {
	width: 768px;
	background-image: none;
}
.jrotator
{
	width: 100%;
	height: 343px;
	padding-left: 0px;
	padding-top: 15px;
    }
.jrotator .container
{
	overflow: hidden;
	width: 764px;
}

.jrotator .items
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 764px;
	height: 343px;
}
.jrotator IMG							{border:0px;display:block; width:764px; height:343px;}

#navRCEASGlobal				{
	position: absolute;
	bottom: 0px;
	background-color: #6cabb2;
	width: 678px;
	height: 22px;
	z-index: 50;
	padding-left: 80px;
}

#navGlobaltext {padding-left:20px}/* SJO: shift global nav left*/

#gridCt {width:768px; margin:3px;padding-bottom:3px;border-bottom:3px solid #dddcda; background-image:none}/* 3 column area PLUS footer area */
#pageCt	{position:relative;background-color:#fff;width:768px;margin:12px auto 0px 12px; }/* Entire Page Wrapper - reduce width  */

/* Footer */
#footer	{padding:0em 0em 3.4em;font-family:Arial, Helvetica, sans-serif;color:#5D6F7D;text-align:center;width:480px;font-size:.9em;}
#footercurrent						{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #7C6B55;
	width: 768px;
	text-align: center;
	background-image: none;
	background-repeat: repeat-y;
	padding-top: 0.9em;
	padding-right: 0px;
	padding-bottom: 3.4em;
	padding-left: 0px;
	font-size: .9em;
}
#footerbottom {
	width: 768px;
}
#footercurrent #top					{
	font-weight: bold;
	font-size: .9em;
	color: #7C6B55;
	padding-top: 8px;
	padding-bottom: 8px;}


#header	{position:relative;background-color:#502d0e;height:84px;} /* Header block above Global navigation */
#header H1{position:absolute;top:16px;left:20px;background:url(//www4.lehigh.edu/Media/Website%20Resources/images/sitewide/medium_logo.gif) no-repeat;width:480px;height:35px;text-indent:-9999px;overflow:hidden;}/* SJO: substitute medium logo */
#header H2 {
	top:5px;
	left:515px;
	background-image:url(../images/head_logo_office.gif);
	width:243px;
	height:58px;
}/* SJO: reposition office name*/
#headerLink A {position:absolute;top:6px;left:515px;width:243px;height:58px;overflow:hidden;} /* SJO: hotspot for repositioned office name */

#gridCt {margin:7px;padding-bottom:7px;border-bottom:7px solid #dddcda;}/* 3 column area PLUS footer area */
#subGridCt {background:none;width:768px;}/* 3 column width area */
#subGridCt #zoneCt {float:right;width:768px; background-image:none;} /* middle or main column area */
#subGridCt #zone1 {
	float:left;
	width:768px;
	padding-left:10px;
	padding-right:10px;
	border-right:1px #000000 solid;
	margin-right:10px
}/* middle/main area  */
#subGridCt #zone1a {float:left;width:710px; padding-left:10px; padding-right:10px; border-right:1px #000000 solid; margin-right:10px}/* middle/main area  */
#subGridCt #zone2 {float:left;width:210px;margin-top:15px; padding-left:0px;}/* right column/sidebar*/
#subGridCt #zone2 IMG{width:210px;}/* right column/sidebar*/
#subGridCt #zone3 {float:left;width:500px;margin-left:0px; margin-top:10px; } /*left column/section navigation*/

H1 {font-size:24px;font-weight:normal;line-height:1em;margin:0;padding:0 0 1em;}


/*#subGridCt #zone3 {float:left;width:166px;}*/ /*left column/section navigation*/


#pageNav {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	float:left;
	background-color: #FFFFFF;
	padding: 18px 5px 2em 8px;
}

#searchCt {
	position: absolute;
	top: 84px;
	right: 10px;
	width: 223px;
	height: 22px;
	background-color: #C6CB30;
	overflow: hidden;
}/* SJO: relocate search box*/




} /* END ^4 */



/* ^5 ----------------------- 1024 screen width  iPad in landscape orientation / netbook --------------------*/
/*@media screen and (min-width: 769px) and (max-width: 1024px) {*/
/* Style adjustments for viewports wider than 768 thru 1024px */

/*SJO: This section is not needed for this particular Web page design due to its original maximum width */

/*} *//* END ^5 */