/* ===============================================================================================================
FILE: phone.css
DESC: This file contains styles specific to the screen widths indicated below (SCRN). Any styles applying to all
			layouts MUST be added to base.css. If media queries are updated within html.tpl.php, the thresholds should
			be updated below accordingly.
SCRN: 0px - 500px
================================================================================================================== */

/* =================== FONT OVERRIDES =================== */
#site-name {	font:normal 1.5em 'PT Sans Narrow', helvetica, arial, sans-serif; }
#content-main h1 { font:400 1.7em 'PT Sans Narrow', helvetica, arial, sans-serif; }
#content-main h2 { font:400 1.5em 'PT Sans Narrow', helvetica, arial, sans-serif; }
#content-main h3 { font:400 1.3em 'PT Sans Narrow', helvetica, arial, sans-serif; }
#content-main h4 { font:400 1.1em helvetica, arial, sans-serif; }
#content-main h5 { font:400 1em 'PT Sans Narrow', helvetica, arial, sans-serif; }
#footer { font-size:7px; }


/* ================== TOP PAGE LAYOUT ================== */
#branding {
	width:100%;
}
#branding .secondary-menu {
	display:none;
}
#header {
	width:100%;
}
#topnav {
	width:100%;
}

/* ================ FEATURE SLIDESHOW ================= */
#feature-show {
	width:90%;
}
#feature-show .view-frontpage-slideshow img {
	width:100%;
	/* height:auto; */
}
#block-views-frontpage-slideshow-block .group_slide_info {
  padding:6px 0 4px 0;
}
#block-views-frontpage-slideshow-block .group_slide_info .field {
  padding:2px 8px 2px 12px;
}
#block-views-frontpage-slideshow-block .group_slide_info .field-name-field-slide-description .field-item {
  font-size:.75em;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

#content {
	width:100%;
}

/* =============== BLOCK/CONTENT LAYOUT =============== */
/* all layouts output sidebars below main content in one single colum */
/* output order is sidebar-first then sidebar-second according to Zen preprocess */
.region-sidebar-first,
.region-sidebar-second {
	width:94%;
	margin:0 3%;
}
.sidebar-first .region-sidebar-first .block,
.sidebar-first .region-sidebar-second .block,
.sidebar-second .region-sidebar-first .block,
.sidebar-second .region-sidebar-second .block,
.two-sidebars .region-sidebar-first .block,
.two-sidebars .region-sidebar-second .block {
	margin-right:0;
	margin-left:0;
}


/* ================ HIDDEN FEATURES ================= */
#branding .secondary-menu {
	display:none;
}
.region-header #block-search-form {display:none;}
#top-search {
	display:none;
}


/* ========== OPTIMIZE FEATURES FOR PHONES ========== */
#site-name {
	margin:0 0 0 2px;
}
#logo .site-logo {
	width:32px;
	vertical-align:top;
	margin:0 5px 0 6px;
}

/* TOP MENU */
/* main menu button and arrow styles */
.menu-button {
	display:block;
	margin:0 auto 0;
	width:96%;
	height:18px;
	text-transform:uppercase;
	font-size:.9em;
	font-weight:normal;
	text-align:center;
	color:#666666;
	border-bottom:1px solid #999999;
	cursor:pointer;
}
.menu-arrow {
	width:0;
	height:0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #666666;
	display:inline-block;
	position:relative;
	top:-2px;
	left:5px;
	margin:0;
}
/* optimize main menu for phones */
#topnav {
	display:none;
	width:96%;
}
#topnav .hide-main-menu {
	display:none;
}
#topnav a {
	display:block;
	padding:7px 15px;
	margin:0;
	color:#666666;
	text-decoration:none;
	position: relative;
	border-bottom:1px solid #cccccc;
	background-color:#dddddd;
}
#topnav a:hover,
#topnav a:active {
	color:#222222;
	background-color:#e4e4e4;
}
#topnav a:hover:after,
#topnav a.active:after,
#topnav a.active-trail:after,
#topnav a.current-section:after {
	top:0;
	border:0;
	content:"";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #999999;
	border-width:0;
	left:0;
	margin-left:0;
}

/* ================ HIGHLIGHTS LAYOUT ================= */
.region-highlights {
  width:90%;
}
.region-highlights .highlight {
	width:99%;
	min-height:100px;
	overflow:auto;
	padding:0;
	margin:10px auto 0;
	border:0;
	border-bottom:1px solid #d4d4d4;
}
.region-highlights .highlight img {
	width:80px;
  height:auto;
	float:left;
	margin-right:10px;
}
.region-highlights .highlight h4 {
	margin:2px 5px 0;
	font-size:1.1em;
	font-weight:bold;
}
.region-highlights .highlight p {
	font-size:.95em;
	margin-bottom:8px;
}

/* ================== SITE FOOTER ==================== */
#site-footer {
	width:96%;
	padding:2%;
	background-size:170px;
}
#site-footer .sf-left,
#site-footer .sf-main,
#site-footer .sf-right {
	width:100%;
	margin:0 0 0 0;
}
#site-footer hr {
	display:none;
}
#site-footer .sf-right {
	text-align:left;
	margin-top:40px;
	width:140px;
	font-size:10px;
}
#site-footer .sf-right #sf-lehigh-logo {
	width:120px;
	padding:0 12px 9px 4px;
}


/* ==================== FOOTER ====================== */
/* add some extra space between lines when links wrap for finger taps */
#fc #fcb ul li {
  display: inline-block;
	margin:3px 0 !important;
}