@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

	  

/* 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;}
#billboarddt {display:none;}
#billboardmobile {display:block;}
#slideshow-main {display:none;}
#pageCt	{position:relative;background-color:#fff;width:320px;margin:4px auto 0px; }/* SJO: reduce width of entire Page Wrapper -   */

#header	{position:relative;background-color:#502d0e;height:77px;} /* SJO: Reduce height of header block above Global navigation */
#header H1{position:absolute;top:10px;left:12px;background:url(../images/header/small_logo.gif) no-repeat;width:290px;height:21px;text-indent:-9999px;overflow:hidden;}/* SJO: Substitute small logo version */
#homeLink A	{position:absolute;top:10px;left:12px;width:290px;height:21px;text-indent:-9999px;overflow:hidden;}/* SJO: hotspot for small logo */

.imageheader #header H2 {visibility:hidden; height: 1px; left: 1px; top: 1px; width: 1px;}
#header H2 {visibility:hidden;}/* SJO: reposition office name*/
#headerLink A {visibility:hidden;height: 1px;left: 1px;overflow: hidden;position: absolute;text-indent: -9999px;top: 2px;width: 1px;} /* SJO: hotspot for repositioned office name */
/*.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 */

#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 url(../images/mobile_link_arrow.png) no-repeat right 50%;-moz-border-radius: 6px;
	-webkit-border-radius: 6px;}

#pageNav {font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform: uppercase; font-weight:bold; background-color:#D6D4A9;padding:18px 5px 2em 30px;}


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


#subGridCt #zone1 {float:left;width:300px; margin-top:130px;border-right:0px #000000 solid;font-size:100%;line-height:1.5em;}/* middle/main area  */
#subGridCt #breadCt	{font-size:10px;}/* SJO: breadcrumb nav*/
#page_content H1 {font-size:24px;font-weight:normal;line-height:1em;margin:0;padding:0 0 1em;}
#page_content {font-size:100%;line-height:1.5em;;margin-left: 8px;margin-top:10px;margin-right:2px;} /* middle/main column content*/


#subGridCt #zone2 {float:left;width:300px;margin-left:40px;margin-top:15px;}/* right column/sidebar*/

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


#subGridCt #zone3 {float:left;width:298px;margin-left:8px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#searchCt {position:absolute; top:155px;right:48px; width:223px; height:22px; background-color:#8db8c8; 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;background:url("../images/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#mdnav ul li a:hover {background-color:#666666;color:#fff;}
#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;background:url("../images/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#n1 a {width:80%;}
#n2 a {width:80%;}
#n3 a {width:80%;}
#n4 a {width:80%;}
#n5 a {width:80%;}
#n6 a {width:80%;}
#n7 a {width:80%;}
#n8 a {width:80%;}
#n9 a {width:80%;}

#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;text-align: center;}
#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;background: url("../images/sitewide/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#navGlobal ul li a:hover {background-color:#666666;color:#fff;}	
#navGlobaltext {text-align: center;	margin-left:auto;margin-right:auto;	width:70%;position:absolute;line-height: 1.8em;}
#navGlobaltext a {color: #fff;font-weight: bold;font-size: 1em;display: block;text-indent: 0;margin: 2px 10px 1px 24px;background:url("../images/sitewide/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#n1 a {width:70%;}
#n2 a {width:70%;}
#n3 a {width:70%;}
#n4 a {width:70%;}
#n5 a {width:70%;}
#n6 a {width:70%;}
#n7 a {width:70%;}
#n8 a {width:70%;}
#n9 a {width:70%;}

/*/ New N Changes //*/
#navRCEASGlobal {display:none;}

#subGridCt .content_header {display:none; }

/* New N Changes for Main Pages /*/
#sbox_main { display:none; }
#secGridCt #zone1 { margin-top: 188px; width:320px; margin-top: 25px; }
#secGridCt #zoneCt { width: 320px; }
#secGridCt #zone1 {padding:0 0 0 25px;}

/*/ New Changes for Portrait /*/

#subGridCt #zone2 { margin-left:0px; padding-left:10px; }

#header H1 { background: url("http://www4.lehigh.edu/Media/Website%20Resources/images/sitewide/small_logo.gif") no-repeat scroll 0 0 transparent; }
#subGridCt #zone1 #deans_insert { float:none; }
#subGridCt #zone1 #eac_grid .left_cell { width: 50%; height:250px;}
#subGridCt #zone1 #eac_grid .center_cell { width: 50%; height:250px;}
#subGridCt #zone1 #eac_grid .right_cell { width: 50%; height:250px;}
#subGridCt #zone1 #eac_grid p {  width: 117px; }
#subGridCt #zone1 #eac_grid .clear_both { display:none; }
#homeGridCt #zone1 { margin-top: -2250px; width: 320px; }
#homeGridCt #zone2 { margin-top: 2120px; }
#sbox_sec { margin:25px 0 0 0; padding: 0 0 0 60px; width:200px }
#sbox_sec_right { display: none; }
#secGridCt #zone1 { margin: 0; padding: 0 0 0 25px; width: 280px; }
#secGridCt { width: 320px; }
#secGridCt #zone2 { margin: 0 0 0 15px; }
#sbox { background:white;margin: 170px 0 0; width: 280px;}
#homeGridCt #zone2 #twittertitle {display:none; }
#homeGridCt #zone2 #twitterhead {display:none; }
#homeGridCt #zone2 #twitter  {display:none; }

#header h1{position:absolute;top:10px;left:12px;background:url(http://www4.lehigh.edu/Media/Website%20Resources/images/sitewide/small_logo.gif) no-repeat;width:290px;height:21px;text-indent:-9999px;overflow:hidden;}
#header h2 {background-image: url("../images/RCEAS-mobile-name.gif");height: 21px; left: 12px; margin-top: 34px; top: 0;
width: 290px; z-index:2;}

#main_content .board		{display:block;float:none;width:300px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .boardfirst	{display:block;float:none;width:300px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .trustee		{display:block;float:none;width:300px;padding-right:5px;padding-bottom:12px;}
#main_content .trusteefirst	{display:block;float:none;width:300px;padding-right:5px;padding-bottom:12px;clear:both;}
#trusteeright {display:block;float:none;width:290px; padding-bottom:20px;}

#annrepsidebar 	{width:90%} 
#annrepsidebar1	{width:100%}
#annrepsidebar1 img	{width:auto!important;}
#annrepsidebar2	{width:100%}
#annrepsidebar3	{width:100%}
#annrepsidebar3 img	{width:auto!important;}
#annrepsidebar4	{width:100%}
img.annrepcover	{width:90%}

} /* 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;}
#billboarddt {display:none;}
#billboardmobile {display:block;}
#slideshow-main {display:none;}
#pageCt	{position:relative;background-color:#fff;width:480px;margin:4px auto 0px; }/* SJO: reduce width of entire Page Wrapper -   */

#header	{position:relative;background-color:#502d0e;height:77px;} /* SJO: Reduce height of header block above Global navigation */
#header H1{position:absolute;top:10px;left:82px;background:url(http://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 */

#homeLink A	{position:absolute;top:10px;left:82px;width:290px;height:21px;overflow:hidden;text-indent:0px;color:transparent;}/* SJO: hotspot for small logo */
#lsnav {display:none;}

.imageheader #header H2 {visibility:hidden; height: 1px; left: 1px; top: 1px; width: 1px;}
#header H2 {visibility:hidden;}/* SJO: reposition office name*/
#headerLink A {visibility:hidden;height: 1px;left: 1px;overflow: hidden;position: absolute;text-indent: -9999px;top: 2px;width: 1px;} /* 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;}

#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;text-align: center;}
#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;background: url("../images/sitewide/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#navGlobal ul li a:hover {background-color:#666666;color:#fff;}	
#navGlobaltext {text-align: center;	margin-left:auto;margin-right:auto;	width:70%;position:absolute;line-height: 1.8em;}
#navGlobaltext a {color: #fff;font-weight: bold;font-size: 1em;display: block;text-indent: 0;margin: 2px 10px 1px 24px;background:url("../images/sitewide/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
	
#printLogo {display:none}
#pageNav {font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform: uppercase; font-weight:bold; background-color:#D6D4A9;padding:18px 5px 2em 95px;}


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

#subGridCt #zone1  {float:left;width:460px; border-right:0px #000000 solid;margin-top:150px;font-size:100%;line-height:1.5em;}/* middle/main area  */
/*#page_content {margin-left: 20px; margin-top: 170px; margin-right: 16px} /* middle/main column content*/
#subGridCt #breadCt	{font-size:10px;}/* SJO: breadcrumb nav*/
#page_content H1 {font-size:24px;font-weight:normal;line-height:1em;margin:0;padding:0 0 1em;}
#page_content {font-size:100%;line-height:1.5em;margin-left:20px; margin-top:10px; margin-right:16px;} /* middle/main column content*/


#subGridCt #zone2 {float:left;width:340px;margin-left:20px;margin-top:15px;}/* right column/sidebar*/

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

#subGridCt #zone3 {float:left;width:436px;margin-left:20px; margin-top:10px; margin-bottom:4px;} /*left column/section navigation*/

#searchCt {position:absolute; top:150px;right:130px; width:223px; height:22px; background-color:#8db8c8; 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:url("../images/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
#header #mdnav ul li a:hover {background-color:#666666;color:#fff;}
#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;background:url("../images/mobile_link_arrow.png") no-repeat scroll right 50% #341C07;-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;}
#n6 a {width:45%;float:right; margin-top:-20px;}
#n7 a {width:45%;float:left;}
#n8 a {width:45%;float:right; margin-top:-20px;}
#n9 a {width:45%;float:left;}

/*/ New N Changes //*/
#navRCEASGlobal {display:none;}

#subGridCt .content_header {display:none; }

#subGridCt #zone1 .research_div_leftcell img { padding:5px; margin:0; display:none; }

#header {background-color: #502D0E; height: 60px; position: relative; height:77px;}
#header h2 {background-image: url("../images/RCEAS-mobile-name.gif");height: 21px; left: 85px; margin-top: 34px; top: 0;
width: 290px; z-index:2;}

#main_content .board		{display:block;float:none;width:420px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .boardfirst	{display:block;float:none;width:420px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .trustee		{display:block;float:none;width:300px;padding-right:5px;padding-bottom:12px;}
#main_content .trusteefirst	{display:block;float:none;width:300px;padding-right:5px;padding-bottom:12px;clear:both;}
#trusteeright {display:block;float:none;width:290px; padding-bottom:20px;}

#annrepsidebar 	{width:90%} 
#annrepsidebar1	{width:100%}
#annrepsidebar1 img	{width:auto!important;}
#annrepsidebar2	{width:100%}
#annrepsidebar3	{width:100%}
#annrepsidebar3 img	{width:auto!important;}
#annrepsidebar4	{width:100%}
img.annrepcover	{width:90%}

} /* 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;}
#billboarddt {display:block;}
#billboardmobile {display:none;}
#pageCt	{position:relative;background-color:#fff;width:768px;margin:12px auto 0px 12px; }/* Entire Page Wrapper - reduce width  */


#header	{position:relative;background-color:#502d0e;height:84px;} /* Header block above Global navigation */
#header H1{position:absolute;top:16px;left:20px;background:url(http://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 */
#homeLink A	{position:absolute;top:16px;left:20px;width:480px;height:35px;overflow:hidden;}/* SJO: hotspot for medium logo */
.imageheader #header H2 {visibility:hidden; height: 1px; left: 1px; top: 1px; width: 1px;}
#header H2 {visibility:hidden;}/* SJO: reposition office name*/
#headerLink A {visibility:hidden;height: 1px;left: 1px;overflow: hidden;position: absolute;text-indent: -9999px;top: 2px;width: 1px;} /* SJO: hotspot for repositioned office name */
#navGlobaltext {padding-left:20px}/* SJO: shift global nav left*/

#gridCt {margin:7px;padding-bottom:7px;border-bottom:7px solid #dddcda;}/* 3 column area PLUS footer area */
#subGridCt {background:none;width:768px; background-position:-234px 50%;}/* 3 column width area */
#subGridCt #zoneCt {float:right;width:768px;} /* middle or main column area */


#subGridCt #zone1 {float:left;width:711px; border-right:0px #000000 solid;}/* middle/main area  */
#subGridCt #breadCt	{font-size:11px;margin-left:14px;}/* SJO: breadcrumb nav*/
#page_content {margin-left: 14px; margin-top: 14px; margin-right: 5px} /* middle/main column content*/
H1 {font-size:24px;font-weight:normal;line-height:1em;margin:0;padding:0 0 1em;}


#subGridCt #zone2 {float:left;width:240px;margin-top:15px; padding-left:10px;}/* right column/sidebar*/
#subGridCt #zone2 IMG{width:230px;}/* right column/sidebar*/
#sidebarcaption {float:left;width:200px; margin-left: 4px; margin-top:10px; margin-right:3px; font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:normal;color:#FFFFFF;padding:10px;line-height:12px;text-align:center;} 

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

#subGridCt #zone3 {float:left;width:700px;margin-left:14px; margin-top:10px; } /*left column/section navigation*/
#pageNav {font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform: uppercase; font-weight:bold; background-color:#D6D4A9;padding:18px 5px 2em 195px;}

#subGridCt .content_header {height: 340px; margin: 0 auto; padding: 20px 0 0; width: 748px;}
#subGridCt .content_header IMG {max-width: 100%;}

#main_content .board		{display:block;float:none;width:640px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .boardfirst	{display:block;float:none;width:640px;padding:0px;padding-bottom:20px;clear:both;}
#main_content .trustee		{display:block;float:left;width:200px;padding-right:5px;padding-bottom:12px;}
#main_content .trusteefirst	{display:block;float:left;width:200px;padding-right:5px;padding-bottom:12px;clear:both;}
#trusteeright {display:block;float:none;width:290px; padding-bottom:20px;}

#annrepsidebar 	{width:90%} 
#annrepsidebar1	{width:100%}
#annrepsidebar1 img	{width:auto!important;}
#annrepsidebar2	{width:100%}
#annrepsidebar3	{width:100%}
#annrepsidebar3 img	{width:auto!important;}
#annrepsidebar4	{width:100%}

} /* 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 */