@import url(/includes/stylesheets/cartersans.css);


@-ms-viewport{ /* this helps Metro UI, used by IE10 on tablet devices, to render pages responsively. it is placed above all other styles so it will be seen before the fixed EM width of the siteWrapper div */
width:device-width; 
}


@media screen {



/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
begin 	regular styles for large screens -- 
		@media (screen) == 75em-60em aka 1200px-960px  == default @media screen
		width: 73.13em == 1170px ÷ 16 == for default BMC layout width
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
/* ------------------------------------------------------------------------
Author URI: http://www.ifactory.com/
Created: January 2010; amended 09/2012; amended 03/2013; amended 02/2014 for new redesign
------------------------------------------------------------------------ */

/***************** begin index ********************************
1. RESET - all elements
2. CSS BASE styles
 	2a. TYPOGRAPHY styles
	2b. TABLE styles
	2c. INPUT styles
	2d. VARIABLES/MIX-INS - clearfix, etc
	2e. PAGE - html, body
3.  BMC - COLORS - **CURRENT 12/2012**
4.  MAIN LAYOUT GRID styles
  	4a. div#siteWrapper
	4b. div#siteContent
	4c. div#siteContentContainer
5.  LOGO -- div#siteHeader
6.  NAVIGATION
  	6a. ul#utilityNavigation and Google Search
	6b. SITEHEADER LINK STYLES
		#siteHeader .headerInfo - admissions express; info for
	6c. ul#primaryNavigation -- horizontal nav bar
	6d. div#secondaryNav ~~ left hand navigation
7.  TYPOGRAPHY 
  	7a. #siteContentContainer base styles
	7b. header styles
	7c. blockquote styles
	7d. list styles
8.  ELEMENTS
  	8a. RIGHT COLUMN -- onThisPg styles
	8b. IMAGE styles
	8c. FEED/ MODULE styles - news, events, boards, youtube, blog, slideshow, transit, courses
		rss-news/events feed styles
		blog-module style
		slideshow module -- blue feature box
		Courses module output styles
		Profiles styles
		Facts module styles
		accordion styles -
		jquery tabcontent  module styles ** used on Library page for Tripod
	8d. INCOMING STUDENT styles by class -color
  	8e. FORMS
  	8f. BUTTONS
  	8g. TABLES 
  	8h. FOOTER   - siteFooter styles 
9.  @Media queries styles for smaller screens and mobile devices
	9a. @media  (max-width: 60em)
	9b. @media (max-width: 53em)
	9c. @media  (max-width: 43.75em)
	9d. @media (max-width: 37.5em)
	9e. @media (max-width: 26em)
 
********************* END index ***********************/

/* ==========================================================================
BEGIN  - 1. RESET - all elements
========================================================================== */	
		html, body, div, h1, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
		address, cite, code, dfn, em, img, q, strong, sub, sup, var, fieldset, legend, 
		caption, article, aside, details, figcaption, figure, footer,
		menu, summary, section, nav, hgroup, header, b, small, samp, kbd, video, canvas, audio,  
		span, applet, object, iframe, big, del, ins, s, strike, tt, u, i, center, 
		label, tfoot, thead, embed, output, ruby, time, mark  
		{/* Eric Meyer - CSS RESET styles*/
			margin: 0;
			padding: 0;
			border: 0;
			font: inherit;
			font-size: 100%;
			vertical-align: baseline;
			line-height:1.5em;}		
		menu, summary, section, nav, hgroup, header, article, aside, 
		details, figcaption, figure, footer {/*  CSS RESET styles*/
			display: block;}
		audio:not([controls]) {/*  CSS BASE styles*/
			display: none;
			height: 0;}
		video, canvas, audio {/*  CSS BASE styles*/
			display: inline-block;}
		[hidden] {/*  CSS BASE styles*/
			display: none;}
		samp, kbd {/*  CSS BASE styles*/
			font-family: monospace, serif;
			font-size: 1em;}
		small {/*  CSS BASE styles*/
			font-size: 80%;}
		mark {/*  CSS BASE styles*/
			background: #ff0;
			color: #000;}	
		button {/*  CSS BASE styles*/
			font-family: inherit; 
			font-size: 100%; 
			margin: 0;
			line-height: normal;
			-webkit-appearance: button; 
			cursor: pointer;
		    vertical-align: middle; /* Helps keep form elements roughly aligned */}	
		button[disabled] {/*  CSS BASE styles*/
			cursor: default;}
		button::-moz-focus-inner {/*  CSS BASE styles*/
			border: 0;
			padding: 0;}
		svg:not(:root) {/*  CSS BASE styles*/
			overflow: hidden;}
		*, *:before, *:after {
			/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
			-webkit-box-sizing: border-box; 
		  
			/* Firefox (desktop or Android) 28- */
			-moz-box-sizing: border-box;
		  
			/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
			box-sizing: border-box;
		  }		
/* ==========================================================================
END  -  1. RESET - all elements
========================================================================== */
			
/* ==========================================================================
BEGIN-  2. CSS BASE styles
========================================================================== */

	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	   BASE  - TYPOGRAPHY styles - h1-6; p, ol, ul, li, address, header, footer, 
								  blockquote, q, sub, sup, dl, dd, dt, strong, em, etc
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
		h1, h5 {color:#f04137;}
		h2, h3, h4, h6 {color:#2b313a;}
		
		h1, h2 {font-size: 1.8em;/* old 1.37em=22px; new- bold 26/32px = 1.625em */ }
		h3, .style3 {font-size: 1.25em;/* old=18px; new-  bold 22/28px = 1.375em */ }
		h4 {font-size: 1.25em;/* old 1.333em=21px; new-  bold 20/26px = 1.25em */ }
		h5 {font-size: 1.125em;/* old 1.4em=23px; new-  red bold 18/24px = 1.125em */ }
		
		h5, h6 {font-weight:400;}			  
		h1, h2, h3, h4,   .style3 {font-weight:bold;}
		
		h1, h2, h3, h4, .style3 {line-height: 1.25;}
		
		h1, h2 {margin: 1em 0 .5em;}
		h3, .style3{margin:1.45em 0 .35em;}
		h4, h5 {margin:1.6em 0 0.4em;}
								
		h3, .style3{padding: 0;}	  
		
		blockquote, 
		.callout{ /* BMC CSS BASE styles  blockquote and callout used similarly*/
			margin: 0 0 1em;
			line-height: 1.25em;
			padding:0.7em;
			width:92%;}
			
		div.last .callout{ /* BMC CSS BASE styles  blockquote and callout used similarly*/
			/* margin: 0 .0 1em .5em; */}	
		  
		blockquote, q {/* BMC CSS BASE styles*/
			quotes: "" "";}	
		
		blockquote:before, blockquote:after { /* BMC CSS BASE styles*/
			content: "";}
		
		q:before, q:after { /* BMC CSS RESET styles*/
			content:'';}
		
		a{/* BMC CSS BASE styles*/
			color: #017dbd;
			text-decoration: none;}
			
		a:focus { /*  CSS BASE styles*/
			outline: thin dotted;}
			
		a:active {/*  CSS BASE styles*/
			color: #0396d3;
			outline: none;}
		
		a:hover { /*  CSS BASE styles*/
			outline: none;
			color: #0396d3;
			text-decoration: underline;}
			
		a:link { /* BMC CSS BASE styles*/
			color: #017dbd;}
		
		a img { /* CSS BASE styles  No border around images in links */
			border: none;}
		 
		 b, strong, .bold {/* BMC CSS RESET styles*/
			font-weight:bold;}
		
		em, i {/* BMC CSS RESET styles*/
			font-style:italic;}
		
		abbr, acronym{ /* BMC CSS RESET styles*/
			font-variant:normal;
			border-bottom:1px dotted #000;
			cursor:help;}
			
		address, cite, code, dfn, em, 
		strong, var, caption, th, {/* BMC CSS RESET styles*/
			font-style:normal;
			font-weight:normal;}
			
		code{/* BMC CSS BASE styles*/
			background-color: #ebeef5;
			font: 11px monospace;}
			
		sub, sup { /*  CSS BASE styles*/
			line-height: 0;
			position: relative;}
					
		sub { /*  CSS BASE styles*/
			bottom: -0.25em;
			vertical-align:text-bottom;}
		
		sup { /*  CSS BASE styles*/
			top: 0.2em;
			font-size: 0.75em;
			vertical-align:text-top;}
			
		dl, dt, dd, ol, ul, li, form { /* BMC CSS RESET styles*/
			margin:0;
			padding:0;}
			
		li { /* BMC CSS RESET styles*/
			list-style:none;}
			
		legend { /* BMC CSS RESET styles*/
			color:#000;
			margin: 0px 0px 10px 0px;
			font-weight: bold;}

	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	   BASE  - TABLE styles - 
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
		table, td, th {
			border-color:#ededed;}
		
		
		table {
			/* BMC CSS RESET styles*/
			border-collapse:collapse;
			border-spacing:0;
			margin-top: 1.5em;
			margin-bottom: 1.5em;
			width: 100%;
			padding: 0;
			font-size: .80em;
			vertical-align: baseline;}
		
		th { /* BMC CSS RESET styles*/
			text-align:left;
			/*background-color: #fff;    */
			font-weight: bold;
			}
		
		thead th { /* BMC CSS RESET styles*/
			 
			color:#f04137;
			}	
		tbody th  { /* BMC CSS RESET styles*/
			
			color:#2b313a;
			}	
		th, td {/* BMC CSS RESET styles*/
			padding: 0.6em;
			 /*line-height: 1.16em;  */}
						
		tr {/* BMC CSS RESET styles*/
			vertical-align: top;}			
		
		caption {/* BMC CSS RESET styles*/
			text-align:left;}

	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	   BASE - INPUT styles - 
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/			
		input{ /* BMC CSS RESET styles*/
			margin:0;
			padding:0;
			line-height: normal;
			vertical-align: middle;
			font-family:inherit;
			font-size:inherit;
			font-weight:inherit;
			*font-size:100%;}
			
		html input[type="button"],
		input[type="reset"],
		input[type="submit"] { /*  CSS BASE styles*/
			-webkit-appearance: button;
			cursor: pointer;}
		
		input[disabled] { /*  CSS BASE styles*/
			cursor: default;}
		
		input[type="checkbox"],
		input[type="radio"] { /*  CSS BASE styles*/
			box-sizing: border-box;
			padding: 0;}
		
		input[type="search"] { /*  CSS BASE styles*/
			-webkit-appearance: textfield;
			-moz-box-sizing: content-box;
			-webkit-box-sizing: content-box;
			box-sizing: content-box;}
		
		input::-moz-focus-inner { /*  CSS BASE styles*/
			border: 0;
			padding: 0;}
		
		input[type="search"]::-webkit-search-cancel-button,
		input[type="search"]::-webkit-search-decoration { /* CSS BASE styles*/
			-webkit-appearance: none;}
		
		textarea{ /* BMC CSS RESET styles*/
			margin:0;
			padding:0;
			overflow: auto;
			vertical-align: top;
			font-family:inherit;
			font-size:inherit;
			font-weight:inherit;
			*font-size:100%;}

	   /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  BASE - VARIABLES/MIX-INS - clearfix, etc.   *~*~*~*
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~ */
		select {
			/* BMC CSS BASE styles*/
			height: 2.25em;
			font-size: 83%;
			margin: 0;
			vertical-align: middle;
			font-family:inherit;
			font-weight:inherit;}
		
		.clear { /* BMC CSS BASE styles*/
			clear: both;}
			
		.clearfix:after { /* BMC CSS BASE styles*/
			visibility: hidden;
			display: block; 
			content: ""; 
			clear: both;
			height: 0;}
			  
		*:first-child+html .clearfix { /* IE7 */
			zoom: 1;}	
			
		.left { /* BMC CSS BASE styles*/
			float: left;}
			
		.right { /* BMC CSS BASE styles*/
			float: right;}
			
		.error { /* BMC CSS BASE styles*/
			margin: 15px;
			padding: 15px;
			border: 1px solid red;}
			
		.error .errorMessage { /* BMC CSS BASE styles*/
			color: red;}

	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	 BASE - PAGE - html, body  				 *~*~*~*~* 			* ~*~*~*
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
		 
		html { /*  CSS BASE styles*/
			font-family:  Arial, Helvetica, sans-serif;
			-webkit-text-size-adjust: 100%; 
			-ms-text-size-adjust: 100%;
			color:#2b313a;
			font-size:18px;}

		#siteHeader,
		#navigation,
		#siteContent,
		div#secondaryNav,
		.two-thirds .first,
		.one-third .last,
		#footer_wrap .inner {
			padding-left: 10px;
			padding-right: 10px;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
			word-wrap: break-word;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0;}

/* ==========================================================================
END   2. - CSS BASE styles
========================================================================== */

/* ==========================================================================
BEGIN  3. COLORS - **CURRENT 2/2014**
========================================================================== */
 	 /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  *~*~*~*~* 		COLORS: 17 total= 			  				*~*~*~*
	  *~*~*~*~* 		13 official + 4 class colors  				*~*~*~*
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
			*********************************************
			************ NEUTRALS  black/white***********
			*********************************************
			#000 - black font
			#fff - white font
			 
			*********************************************
			************    GREYS         ***************
			********************************************* 
			
			GREY
			#77808d med grey for secondary nav top item.. 
			#646e7d dark grey --
			#2b313a SUPER dark grey -- 
			#ebebeb -- light grey
			
			
			*********************************************
			************       BLUES/GREENS      ***************
			*********************************************
			BLUE
			
			#017dbd med blue
			#0396d3 -- light-med-blue --  
			#017dbd -- light blue -- HOVER STATE for  ***ALL*** in
			
			GREEN
			#00a58c  light green 
			#17bba2  lightER green --  
			#017160  dark green --  
			#17bba2  lightER green -- 
			
			
			*********************************************
			************  YELLOWS/REDS ***************
			*********************************************
			YELLOW
			
			#fff0be  light yellow 
			#e6dfcb pale yellow 
			#fff0be -- light yellow hover state
			
			RED
			
			#f04137 red 
						
			*********************************************
			************ CLASS COLORS ONLY***************
			*********************************************
			#ff0000 - red class color 
			#003399 - dark blue class color 
			#066406 - dark green class color 
			#3399ff - light blue class color 
	*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
/* ==========================================================================
END   3. COLORS - **CURRENT 12/2012**
========================================================================== */

/* ==========================================================================
BEGIN 4.   MAIN LAYOUT GRID styles
========================================================================== */			  
	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  *~*~*~*~* 		old ENTIRE PAGE WIDTH:  						*~*~*~*
	  *~*~*~*~* 		siteWrapper (970px [970px/16px=60.625em])		*~*~*~*
	  *~*~*~*~* 		left nav (230px   
	  					[230px / 970px = 0.2371 = width:23.71%] ) + siteContentContainer  		
					*~*~*~*
	  *~*~*~*~* 	[main content and rt column content](715px [715px / 970px = 0.7371 = 
	  						width:73.71%]) *~*~*~* 
	  *~*~*~*~* 		+ margins/paddings 							*~*~*~*
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/  

	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  *~*~*~*~* 		new ENTIRE PAGE WIDTH:  						*~*~*~*
	  *~*~*~*~* 		siteWrapper (1170px [1170px/16px= em]) = 73.13em *~*~*~*
	  *~*~*~*~* 		left nav (233.75px   [233.75px / 1170px = 0.1998  = width: 19.98%] or [233.75px/16px= 14.61em] ) + siteContentContainer  	*~*~*~*
	  *~*~*~*~* 		+ margins between left col + main col (44.25px [44.25px/ 1170px = 0.0378 = width: 3.78%] or [44.25px/16px= 2.77em])	*~*~*~*
	  *~*~*~*~* 		[main content and rt column content](892px [892px / 1170px = .7624  = width: 76.24%] or [892px/16px= 55.75em]) *~*~*~* 
	  *~*~*~*~* 		+ margins/paddings 							*~*~*~*
	  *~*~*~*~* 		[main content ONLY](584px [584px / 1170px = 0.4991  = width: 49.91%] or [584px/16px= 36.5em]) *~*~*~* 
	  *~*~*~*~* 		+ margins between rt col and main col (32px [32px/ 1170px = 0.0274  = width: 2.74%] or [32px/16px= 2em])	*~*~*~*
	  *~*~*~*~* 		[rt column content ONLY](276px [276px / 1170px = 0.2359  = width: 23.59%] or [276px/16px= 17.25em]) *~*~*~* 
	  *~*~*~*~* 		+ margins/paddings 							*~*~*~*
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/  

						  
		div#siteWrapper {/* a wrapper div for whole page - does not include footer.   */
			text-align:left;
			margin:0 auto;
			min-width: 26em; 
			width: 100%;/* 73.13em */
			height:100%;
			min-height:50em;
			  /* width:1170px;  NEW width reference for page */
			  /* width: 73.13em;       1170px / 16px = 73.125 em */}
								   
		div#siteContent {/* a wrapper div for  ***ALL*** content BELOW header contains: secondaryNav (left-hand-nav) + siteContentContainer div. Borders are to match up with top nav borders. does not include footer.  */
			min-height:5px;
			height: auto !important;}
	  
 
	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  begin  MAIN CONTENT LAYOUT GRID  -  siteContentContainer grid layout styles - 
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
			  
		/* grid sizes - quarter third half two-thirds three-quarters whole */
		/* position in flow - first inner last */
		
		div#siteContentContainer {/*  actual area for content, from left nav edge to edge of white space on right 
		*~*[main content and rt column content](892px [892px / 1170px = .7624  = width: 76.24%] or [892px/16px= 55.75em])*~* */
			float: left;
			width:75%; 
			display: inline;
			margin: 1.5em 0 2.32em .75em;}
		
		
div#siteContentContainer.gateway {
	width:98% !important; 
	margin-left:1.2em !important;}
		
			
		div#siteContentContainer div.one-quarter,
		div#siteContentContainer div.one-third,
		div#siteContentContainer div.half,
		div#siteContentContainer div.two-thirds,
		div#siteContentContainer div.three-quarters,
		div#siteContentContainer div.whole,
		div#siteContentContainer div.pictextlist {/* layout styles for  ***ALL*** grid sizes  */
			position: relative;
			float: left;
			display: inline;}	
			
		 div#siteContentContainer div.one-quarter {/*  one-quarter used in tandem with 3/4 as the main column  */
			width: 23.75%; /*170px original width	[170px / 715px  = 0.2377 = width: 23.77% x 892px = 212.03px / 16 = 13.25em] */}
						
		div#siteContentContainer div.one-third {/*  one-thirds used in tandem with 2/3 as the main column  */
			width:32.17% ; /*230px original width	[230px /715px  = 0.3217 = width: 32.17% x 892px = 286.96px / 16 = 17.94em] */}			
			
		div#siteContentContainer div.half {/*  half layout to divide content space in two  */
			width: 48.95%; /*350px original width	[350px / 715px  = 0.4895 = width: 48.95% x 892px = 436.63px / 16 = 27.29em] */}
			
		div#siteContentContainer div.two-thirds {/*  two-thirds used in tandem with 1/3 as the right column  */
			width: 65.5%; /*470px original width	[470px /715px  = 0.6573 = width: 65.73% x 892px = 586.31px / 16 = 36.64em] */ }	
			
		div#siteContentContainer div.three-quarters {/*  three-quarters used in tandem with 1/4 as the right column  */
			width: 73.5%; /*530px original width	[530px / 715px  = 0.7413 = width: 74.13% x 892px = 661.24px / 16 = 41.33em] */}	
				
		div#siteContentContainer div.whole {/* layout style that utilizes whole space between left nav + edge of white on page  */
			width: 99.5%;  /*710px original width	[710px / 715px  = 0.9930 = width: 99.30% x 892px = 885.76px / 16 = 55.36em] */}
		
		
		div#siteContentContainer div.first  {
			margin-left: 0; 
			margin-right: .5%;}
			
		div#siteContentContainer div.inner  {
			margin-left: .35em; 
			margin-right: .35em;}
			
		div#siteContentContainer div.last   {
			margin-left: 1.4%; 
			margin-right: 0;}
			
		div#siteContentContainer div.two-thirds>div.one-third {
			width:45%;
			margin-left: .45em;}		  
  
			
			
  div#siteContentContainer div.two-thirds>div.two-thirds {
			width:100%;}		
			
			  
		div#siteContentContainer div.pictextlist {/*   pictextlist is a clone of div.whole with extra bottom margin for faculty pages with photo and text   */
			width: 99.5%; /*710px original width	[710px / 715px  = 0.9930 = width: 99.30% x 892px = 885.76px / 16 = 55.36em] */
			margin-bottom: .35em;}
			
			
		div#siteContentContainer div.pictextlist>div.last, 
		div#siteContentContainer div.pictextlist>div.last>h3{
			margin: 0;}
			
		div#siteContentContainer div.pictextlist>div.first>img {width:90%; padding:3%;}	
			
	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	  end  MAIN CONTENT LAYOUT GRID  -  siteContentContainer grid layout styles - 
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/		  					
	  
/* ==========================================================================
=============================================================================
	BEGIN  5. LOGO -- div#siteHeader --
=============================================================================
========================================================================== */
	   /* div#siteHeader is a wrapper div for navbar-nav [which is part of the bootstrap menu that allows responsive hamburger menu to appear]  which contains ***ALL*** header content: logo (as navbar-brand img a) and 3 menus [util-nav (grey text menu at top including search box [ navbar-search ] ); dropdown-menu (information for in yellow); and prime-nav (blue text menu)]  */
			  
		div#siteHeader {/* styles header div element */
		  min-height:6em;  /*   */
		  position: relative;
		  width:100%;
		  border-bottom: 1px solid #d1d3d2;}
	  /*hack for  ***ALL*** FireFox for placement of primary nav bar against next element down */  
		  @-moz-document url-prefix() { 
			div#siteHeader {
			min-height:6em; /*  */}
		} 
		
		noindex:-o-prefocus, div#siteHeader {/* hack for OPERA for placement of primary nav bar against next element down */
			min-height:6em;  /*   */}
					
		div#siteHeader {/* hack for  ***ALL*** ie for placement of primary nav bar against next element down */
			min-height:6em\9;  /*    */}
						
	  
	  /* ==========================================================================
	  =============================================================================
			  END  -- div#siteHeader 
	  =============================================================================
	  ========================================================================== */

/* ==========================================================================
BEGIN 6. NAVIGATION - navigation elements
========================================================================== */

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
begin 	
		BOOTSTRAP
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	

			/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
			begin GENERAL HEADER + NAVBAR styles - 
						
			*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
			  

	  .collapse {/*  */
		  display: none; /* used to "hide" the nav menu behind the page content when hamburger not clicked ... for ***MOBILE*** */			  }
	  
	  .collapsing/*  */ {/* used to ease the sliding in of the nav menu when hamburger is clicked ... for ***MOBILE***  */
		  position: relative;/*  */
		  height: 0;/*  */
		  overflow: hidden;/*  */
		  -webkit-transition: height 0.35s ease;/*  */
				  transition: height 0.35s ease;/*  */			  }

	  .dropdown /*  */{
		  position: relative;min-width: 11.5em;/*  */	}
	  
	  .navbar-default .navbar-nav > li > a.dropdown-toggle {/* for  ***DESKTOP***  */
		/* styles background + font  */
		  font-family: Georgia, Times, sans-serif;
		  font-style: italic;
		  padding: 5% 9%;
		  min-width: 11.5em;
		  width: 96.25%;/*  */
		  display: block;
		  font-size: 95%;
		  color: #414141;
		  background: #fff0be url(/includes/images/arrow-down.png) no-repeat 95% center;}

	  .navbar-default .navbar-nav > li > a.dropdown-toggle:hover,
	  .navbar-default .navbar-nav > li > a.dropdown-toggle:focus,
	  .navbar-default .navbar-nav > li > a.dropdown-toggle:active {/* for  ***ALL*** */
		/* makes background and text color consistent for  "info for" text  */
		  text-decoration: none; outline:none; border:none;		  }
			  
	  .dropdown-menu /*  */ {/* used to hide and style dropdown menu ...for  ***ALL*** */
		  position: absolute;/*  */
		  top:100%;/*   */
		  z-index: 1000;
		  background-color: #fff0be; 
		  padding: .5em  0em 0em 0em ;
		  display: none; /* */
		  float: left; /* */
		  min-width: 11.5em;/*  */}
   
		ul.dropdown-menu li a/*  */ {/* used to style the dropdown menu links ...for  ***ALL*** */
		  display: block;/*  */
		  color:#2b313a; /* */
		  white-space: nowrap;/*  */}
	   ul.dropdown-menu li { 
		  padding: 6% 9%;}
			
	  .dropdown-menu > li:first-child {/* for  ***ALL***   */
		  /* controls link of first dropdown item within the dropdown menu block */
		  padding-top: 0;/* */}
	  
	  ul.dropdown-menu > li:hover,/*  */
	  ul.dropdown-menu > li:focus,
	  ul.dropdown-menu > li:active,
	  ul.dropdown-menu > li:hover > a,/*  */
	  ul.dropdown-menu > li:focus > a,
	  ul.dropdown-menu > li:active > a,
	  	  ul.dropdown-menu > li:hover > a:hover,/*  */
	  ul.dropdown-menu > li:focus > a:focus,
	  ul.dropdown-menu > li:active > a:active {/* used to style hover state for dropdown menu links .. for  ***ALL*** */
			color: #fff;/*  */
			text-decoration: none;/*  */
			background-color: #017db0;/*  */
			outline:none; border:none;}
	  .open > .dropdown-menu /* */{/* used to have dropdown menu appear ...for  ***ALL*** */
			display: block;/* */
			 width:96%;/**/}
	  
	  .nav {/*  */
			padding-left: 0;/*  */
			margin-bottom: 0; /* */
			list-style: none; /* */}
  
	  .nav > li/*  */ {/* helps bullet not appear ... for  ***ALL*** */
			position: relative;/*  */
			display: block;/*  */}
		   
	  .nav > li > a /*  */{/* used to give spacing to link elements within nav menu  */
			position: relative;/*  */
			display: block;/*  */
			margin:.625em; /*  */}
	  
	  .nav > li > a.dropdown-toggle, ul.dropdown-menu /*  */{/* used to give spacing to link elements within nav menu  */
			 margin:0 .625em; }
  
	  .nav > li > a:hover,/*  */
	  .nav > li > a:focus {/* helps style hover state of the nav links */
			text-decoration: none;/*  */
			color: #000;/*  */}
		   
	  .navbar {/*  */
			position: relative;/*  */
			min-height: 50px;/*  */
			margin-bottom: 20px;/*  */
			width:100%;}
		  
	  .navbar:before,/*  */
	  .navbar:after {
			display: table; /* */ 
			content: " ";/* */}
   
	  .navbar:after { /*  */
			clear: both; /**/}
	  
	  .navbar-header:before,/*  */
	  .navbar-header:after {
			display: table; /* */
			content: " "; /* */}
	  
	  .navbar-header:after {/*  */
			clear: both; /* */}
	  
	  .navbar-header/* */ {/****necessary for it to display in mobile correctly***  */
			float: left;/*  */  }
	  
	  .navbar-collapse /*  */{/*   helps style nav menu ... for ***MOBILE***  */
			max-height: 50em;/*  */
			padding-right: 15px;/*  */
			padding-left: 15px;/*  */
			overflow-x: visible;/*  */
			border-top: 1px solid transparent;/*  */
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);/*  */
			-webkit-overflow-scrolling: touch;/*  */}
	  
	  .navbar-collapse:before,/*  */
	  .navbar-collapse:after {
			display: table;/*  */
			content: " ";/*  */}
	  
	  .navbar-collapse:after/*  */ {
			clear: both;/*  */}
  
	  .navbar-collapse.in {/* for ***MOBILE***  */
			overflow-y: visible; /* */}
	  
	   .navbar-collapse {/* ..for  ***DESKTOP*** */
			  width: auto; /* */
			  border-top: 0;  /**/
			  box-shadow: none; /* */  }
		
		.navbar-collapse.collapse/*  */ {/* */
		   /* display behavior for  ***ALL*** menus  */
			  display: block ; /* */ 
			  height: auto !important;/* */ 
			  padding-bottom: 0;/* */ 
			  overflow: visible ;/* */  }
			 
	  .navbar-brand {/*  */
	  /* styles BMC logo -- whole element */
			float: left;/* */ 
			padding: 1.15em 0em .5em 0em;/*  */
			margin-top:.4em;
			font-size: 2em;/*  */}
		  
	  .navbar-brand:hover,
	  .navbar-brand:focus,
	  .navbar-brand img:hover,
	  .navbar-brand img:focus {/*    */
	  /* styles BMC logo -- just logo link */
			text-decoration: none; outline:none;/*  */}
	  
	  .navbar-toggle {/*  */
	  /* hamburger icon style */
			width: 4em;/*  */
			height: 4em;/*  */
			position: absolute;/*  */
			top: 0px;/*  */
			right: -4px;/*  */
			cursor: pointer;/*  */
			display: block;/*  */
			background: none repeat scroll 0% 0% rgb(1, 125, 176) !important;/*  */
			border:none !important;}
	  
	  .navbar-toggle .icon-bar {/*  */
	  /* hamburger icon style */
			display: block;/*  */
			background: none repeat scroll 0% 0% rgb(255, 255, 255);
			height: 3px;
			margin: 0em 0 0 1em;
			width: 1.5em;}
			
	  .navbar-toggle .icon-bar + .icon-bar {/*  */
	  /* hamburger icon style */
			margin-top: 4px;/*  */}
	  
	 .navbar-toggle>.sr-only  {/* styles closing X on menu in mobile */
			  background: none; 
			  color: rgb(255,255,255); 
			  right: 0px; 
			  left: auto; 
			  text-align: center; 
			  text-indent: 0px; 
			  font-size: 18px;}
			  
	  .navbar-toggle.collapsed>.sr-only{
			display: none;/*  */  }
	  
	  .navbar-toggle {
			display: none;/*  */  }
	  
	  .navbar-nav {/*  */
	  /*  primary and util nav*** */ 
			/* for  ***ALL*** */
			float: left;/*  */  } 
		
	  .navbar-nav > li {/*  */
		/*  primary and util nav*** */
			float: left;/*  */  }
	   
	  .navbar-nav.navbar-right:last-child {/*  */
			margin-right: -15px;/*  */  }
	  
	  .navbar-left {/*  */
			float: left !important;/*   */  }
			
	  .navbar-right {/*  */
			float: right !important;/*  */  }
	  
	  .navbar-nav > li > .dropdown-menu {/*  */
	   /* dropdown style for whole dropdown menu element  */
			margin-top: 0;/*  */
			border-top-right-radius: 0;/*  */
			border-top-left-radius: 0;/*  */}
			
	.prime-nav {/* for  ***ALL*** */
	  /* primary nav styles */
		 
		  margin-top:.85em;}
		  
		  .prime-nav li {/* for  ***ALL*** */
	  /* primary nav styles */
		 
		  margin: 0 .35em;}
		  		  
	  .util-nav li  a {/* for  ***ALL***   */
	  /* utility nav  link item styles */
		  font-size:.875em; 
		  color: rgb(153, 153, 153);}
	  
	  .prime-nav li  a {/* for  ***ALL*** */
	  /* primary nav styles */
		  font-size:1em; 
		  color:#017dbd; 
		  font-weight:bold;
		  margin-top:.35em;}

			/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
			begin GOOGLE SEARCH BOX styles - 
					the use of !important below is necessary to over ride default Google styles	
	
			*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
			
			.navbar-default .navbar-search {/*      */
			/* places google search box in upper right corner  */
				 max-width: 15.3125em;}
				 
			
				 
				 
	/* SEARCH FORM */
#block-bmc-search-bmc-search {
  float: left;
  max-width: 232px;
}
form.gsc-search-box {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #EEE;
}
@media (max-width: 800px) {
  form.gsc-search-box {
    border: 0;
  }
}
form.gsc-search-box table {
  margin: 0;
}
form.gsc-search-box table tbody {
  border: 0 !important;
}
form.gsc-search-box table tbody td.gsc-input {
  padding: 0;
}

form.gsc-search-box table tbody td.gsc-input .gsc-input-box {
  background: none;
  border: 0;
  height: 23px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  min-width: 190px;
}
form.gsc-search-box table tbody td.gsc-input .gsc-input-box td {
  padding: 0;
  width: auto !important;
}
form.gsc-search-box table tbody td.gsc-input .gsc-input-box td input {
  padding: 5px 0 5px 2px !important;
  margin: 0 0 0 10px !important;
  height: auto !important;
  float: left;
  position: relative;
  top: -3px;
  color: #666;
  width: 140px !important;
  font-family: Carter Sans, Georgia, sans-serif;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




form.gsc-search-box table tbody td.gsc-input .gsc-input-box td input:hover, form.gsc-search-box table tbody td.gsc-input .gsc-input-box td input:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-box: none;
}
form.gsc-search-box table tbody td.gsc-search-button {
  padding: 8px 5px;
  border-left: 1px solid #EEE;
  border-right: 1px solid #EEE;
  background: #fcfcfc;
}
@media (max-width: 800px) {
  form.gsc-search-box table tbody td.gsc-search-button {
    border: 0;
    background: transparent;
  }
}
form.gsc-search-box table tbody td.gsc-search-button input {
  width: 0;
  min-width: 0;
  border: none;
  height: 28px;
  background: url(/includes/images/main-search.png) no-repeat center center;
  padding: 0 0 0 28px;
}
@media (max-width: 800px) {

  form.gsc-search-box {
    background: transparent;
    margin-top: 13px;
  }
}


table.gssb_c {
  margin: 0;
  width: 200px !important;
}
table.gssb_c tbody {
  border-collapse: collapse;
  border-spacing: 0;
}
table.gssb_c tbody .gssb_a, table.gssb_c tbody .gssb_a td {
  white-space: normal;
  padding: 2px 5px;
}
table.gssb_c tbody .gssb_a span, table.gssb_c tbody .gssb_a td span {
  cursor: pointer;
}			 
				 
				 
				 
				 
				 
				 
				 
				 
				 
				 
				 
				 
				 
	/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
	end GOOGLE SEARCH BOX styles - 
	*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
				
			.gsc-results .gsc-cursor-box .gsc-cursor-page {/*      */
			/*~ GOOGLE SEARCH RESULTS styles  ~*/
				margin-right: .8em !important;}
			
			.gsc-tabHeader {
				margin-top: .15em !important;
				height: 2.44em !important;}
	
			.gsc-tabHeader.gsc-tabhActive {
				border-left:none !important;
				border-right:none !important;
				border-top:none !important;}
	
			.gsc-tabHeader.gsc-tabhActive,
			.gsc-tabHeader.gsc-tabhInactive {
				background-color:transparent !important;}
				
			.gsc-webResult.gsc-result.gsc-promotion {
				border-color: rgb(248, 242, 218) !important;
				background-color: rgb(248, 242, 218) !important;}	
				
			.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {
				border: 1px solid rgb(248, 242, 218) !important;
				background-color: rgb(248, 242, 218) !important;}
			
			
				

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end	
		BOOTSTRAP
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
	  /*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
		end TOP UTILITY NAV  - utilityNavigation styles - 
	  *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
	 		   
	  /* ==========================================================================
	  =============================================================================
			  BEGIN  -- div#secondaryNav ~~ left hand navigation
	  =============================================================================
	  ========================================================================== */  
/* ==========	  	div#secondaryNav	 =================================	====== */

	  /******  secondaryNav is left hand nav   */
	  div#secondaryNav { /*whole of left column...   */
		  width: 19.98%; /*216px original width	[216px / 970px = 0.2227 = width:22.27%]  
		  *~* 	new calculation *~* left nav (233.75px   [233.75px / 1170px = 0.1998  = width: 19.98%] or [233.75px/16px= 14.61em] ) */
		  margin: .875em .75em 3em 0.5em; /* */ 
		  min-width:12.5em;
		  padding:8px 0 0; /* */ 
		  float: left;/*  */ 
		  display:inline;/*  */ 
		  font-size: .75em;/*  */ }

/* ==========	  	ul.breadcrumbs (some cases it is ul#breadcrumbs instead)	 =================================	====== */

	  div#secondaryNav ul { /* thing that makes up second nav box..not actively seen on page*/
		  overflow:hidden;/*  */ 
		  padding:0px 0 0;/* all browsers, of course */
		  padding:0px 0 0\9;/*  IE8 and below */
		  *padding:0px 0 0;/*  IE7 and below */
		  margin-bottom:.5em; }
           
/* ==========		li#topDept    a  	=============================	====== */

	  li#topDept {
		  margin-top:1em;} 
				  
/* ==========		li#mainDept    a 	 =================================	====== */
			
	  div#secondaryNav li#mainDept { /* this li is the Main Dept and will have a line under it to indicate that */
			border-bottom: 1px solid #ebebeb;/*  */ 
			padding-bottom: .5em; /*   */ 
			margin-bottom: 0.5em; /* */ }
				
/* ==========	 	li     a	 =================================	====== */
				  
	  div#secondaryNav li { /* formerly known as breadcrumbs, these are the LI that appear before LI#CURRENT */
		   /*for IE height: 1%;*/
		   margin-right:0 .5em .4em;/*   */
		   padding:.5em;/*  */ }	
		
	  div#secondaryNav li:first-child a { /* breadcrumbs with > as an image */
			/*for IE height: 1%;*/
			color:#77808d;/*  */ 
			font-size:1.6em;/*  */ 
			font-weight:bold;}	
		  		  
	  div#secondaryNav li:first-child a:hover { /* breadcrumbs with > as an image */
			/*for IE height: 1%;*/
			color:2b313a;}	
	  
	  div#secondaryNav li a { /* breadcrumbs with > as an image */
			/*for IE height: 1%;*/
			color: #2b313a;/*  */ 
			font-size:1.2em;/*  */
			font-weight:bold;}		
	  
	  div#secondaryNav li a { /* */
			display: block;/*  */ }
	  
	  div#secondaryNav li a:hover { /* link hover NO underline  */
			text-decoration: none;/*  */ }				  	
	 
	  div#secondaryNav li a:hover,
	  div#secondaryNav li.curDept a:hover { /* link hover color  */
			color:#0396d3;/*  */ }
					  				  
/* ==========	 	li.curDept    a	 =================================	====== */

			
	  div#secondaryNav li.curDept,
	  div#secondaryNav li#current dt.curDept {/* this li should be indented the same amount as the text in the red box as it is part of the department labeled above it */
		   padding-left: 1.65em;/*   */ 
		   background: transparent !important;
		   color: #2b313a;/*  */}
		 
		 
	   div#secondaryNav li.curDept a,
	   div#secondaryNav li#current dt.curDept a { /* breadcrumbs with > as an image */
		  /*for IE height: 1%;*/
		  color: #2b313a;/*  */ 
		  font-size:1.2em;/*  */
		  font-weight: normal;}		

					
/* ==========		li#current 	 =================================	====== */	
			
		/******* for current selected item   */
		div#secondaryNav li#current {
			/* */
			float:none;/*  */ 
			position: relative;/*  */ 
			*width:215px !important;  /*IE7 and below */
			padding: 0 !important; /*all browsers, of course */
			padding: 0 !important\9;  /*IE8 and below */ 
			*padding: 0 !important;  /*IE7 and below */
			clear: both;/*  */ }
					  
/* ==========	 	li#current dl  ================================= ====== */	
		/******* for main left nav   */
		div#secondaryNav dl { /* menu items in second navigation area of left nav*/
			position: relative;/*  */ }
		
		div#secondaryNav li#current dl { /* menu items in first navigation area of left nav*/
			border: none;/*  */ 
			padding:0 .4em;/*  */ }	
			 
/* ==========		li#current  dt    a  ====== */	
		div#secondaryNav dt { /* title of first navigation area of left nav */
		   color: #2b313a;/*  */ 
			font-size:1.2em;/*  */
			padding-left:1%;}	
			
		div#secondaryNav li dt a, 
		div#secondaryNav dt a {	/* link style for both titles of left nav menu sections */
			color: #435361;/*  */ 
			font-weight:bold;/*  */ }

		div#secondaryNav dt a { /* */
			display: block;/*  */ }
			
		div#secondaryNav dt a:hover { /* link hover NO underline  */
			text-decoration: none;/*  */
			color:#003a6f; /* link hover color  */ }

		div#secondaryNav li#current dt { /* title of first navigation area of left nav*/
			color: #fff;/*  */ 
			font-size: 1.2em;/*  */ 
			font-weight: 800;
			padding: .25em 1em;/*  */ 
			background-color: #f04137;/* RED BOX item in nav */ }	


					  
		div#secondaryNav li#current dt a { /* title of first navigation area of left nav*/
			color: #fff; /*  */  
			font-weight: normal;}
	   
		div#secondaryNav li#current dt a:hover { /* title of first navigation area of left nav*/
			color: #ebebeb; /*  */ }

/* ==========	 	li#current	 dd    a	 ======================================= */	

		div#secondaryNav li dd a {	/* links of breadcrumbs as well as links in first nav section in column */
			color: #2b313a;/*  */ 
			font-size:1.2em;/*  */ }
		
		div#secondaryNav dd, 
		div#secondaryNav li#current dd { /* controls links in both first and second section of nav  */
		   padding: 0 2em;/*   */ 
		   margin:0;/*   */ }
		
		div#secondaryNav li#current dd a, 
		div#secondaryNav dd a {	/* gives border to links to give look of buttons on left nav */
			
		   padding:.4em  0.3em;/*   */ }
			
		div#secondaryNav li#current dd.first a	{ /* */
			border-top: 0;/*  */ }
		
		div#secondaryNav dl dd:last-child a, 
		div#secondaryNav li#current dd:last-child a { /* */
			border-bottom: 0 !important;/*  */ }
		
		div#secondaryNav dd.divide, 
		div#secondaryNav li#current dd:last-child { /* */
		
		   padding-bottom: .3em; /*  */ }
		
		div#secondaryNav dd.divide a, 
		div#secondaryNav li#current dd.divide a { /* */
			border:0;/*  */ }
		div#secondaryNav dd a { /* */
			display: block;/*  */ }
			
		div#secondaryNav dd a {	/*gives color to links*/
			color: #435361;/*  */ 
			font-weight: normal;/*  */ }
		
		div#secondaryNav dd a:hover { /* link hover NO underline  */
			text-decoration: none;/*  */ }
									  
		div#secondaryNav dd a:hover { /* link hover color  */
			color:#0396d3;/*  */ }
	  
/* ==========	 	 h2.giving  a, h2.hepburn  a	 ======================================= */
 		  
		div#secondaryNav h2 { /* title of first navigation area of left nav*/
			font-weight:normal;/*  */  
			font-size:1em;/*  */ 
			padding: .5em;/*  */ 
			margin:.3em;}	  
			
		div#secondaryNav h2 a {	/* link for the snowflake links */
			color:#77808d; /*  */
			font-weight:bold;/*  */ 
			font-size:1.4em;/*  */}
				  
		div#secondaryNav h2 a:hover { /* link hover NO underline  */
			text-decoration: none;/*  */				  
			color:#0396d3; /* link hover color  */ }
			
			  
		/* ******  begin ContactUs styles which appear under nav on left   */
	   
			/* ******  these are now in section 8, below  */
	   
		/* ******  end ContactUs styles which appear under nav on left   */
				
	  /* ==========================================================================
	  =============================================================================
			END  -- div#secondaryNav ~~ left hand navigation
	  =============================================================================
	  ========================================================================== */
	  
/* ==========================================================================
7. TYPOGRAPHY - h1-6; p, ol, ul, li, address, header, footer, blockquote, q, sub, sup, dl, dd, dt, strong, em, etc
==========================================================================*/
		
		.lead {/* styles lead paragraph with serif font */
			font-family: Arial, Helvetica, sans-serif;
			font-size: 1.1em;/*  */ 
			line-height: 1.3em;/* */ 
			padding-top:.3em;/* */ 
			font-weight:bold;}


/*~   header styles -   ~*/	
		#siteContentContainer h2 {/* styles #siteContentContainer h2 with Carter Sans font, margin, size, etc */
			/* font-size: 2.25em; */ 
			margin: 0em 0 .75em;
			color:#f04137;
			font-family: "Carter Sans", Arial, Helvetica, sans-serif;
			font-weight:500;}
			
		#siteContentContainer div.last h2,
		#siteContentContainer div.last h1 {/* styles right column h2 as more of an h3  */ 
			margin: 0.2em 0 .3em;
			font-family: Arial, Helvetica, sans-serif;
			color:#2b313a;
			font-size:1.15em;
			font-weight:bold;}			
		#siteContentContainer h1 {color:#2B313A; font-size:1.25em;}	

/*~  blockquote styles -  ~*/	
		blockquote.blockquote {/* styles blockquote.blockquote so there is a yellow background */
			background-color: #f8f2da;}
	
		blockquote.real {/* styles blockquote.real to indent farther and without background color for use on /president */
			padding: 1em 5em;}  		
				
/*~  2e.list styles -  ~*/	
		
		#siteContentContainer ul,
		#siteContentContainer ol,
		#siteContentContainer dl {/*  sets element attributes  */
			margin: 0 1em;
			line-height: 1.2em;
			padding: 0.3em 0 0.5em 0;}
		
		#siteContentContainer ol li ul li,
		#siteContentContainer ul li ul li {/*  sets element attributes  */
			padding: 0;}
		
		#siteContentContainer li {/*  sets element attributes  */
			margin-bottom:.5em;
			line-height: 1.2em;}
			
		#siteContentContainer ol li,
		#siteContentContainer ol li ol li,
		#siteContentContainer ul li ol li {/*  sets element attributes  */
			list-style: decimal inside none;
			display:list-item;
			padding: 0 0 0 2em;
			text-indent: -1.5em;}
		
		#siteContentContainer ul li, 
		#siteContentContainer ol ul li {/*  sets element attributes  */
			text-indent: hanging;
			list-style:outside disc;}
		
		#siteContentContainer ol li ul li,
		#siteContentContainer ul li ul li {/*  sets element attributes  */
			list-style:inside disc;}
					
		dl dd {/*  sets element attributes  */
			margin-left:1em;}
		
		caption {/*  sets element attributes  */
			margin-bottom:.5em;
			text-align:center;}
		
		p,
		pre{/*  sets element attributes  */
			margin-bottom:1em;}
/* ==========================================================================
COLOR - a and color swatches (for LESS and for background elements)
========================================================================== 
see BASE STYLES for these   */

/* ==========================================================================
TEXTURE - alert, badge, basegrad, othergrad (gradients)
========================================================================== 
we do not currently have these   */

/* ==========================================================================
FONT - icons and @fontface
========================================================================== 
see top of document for this   */

/* ==========================================================================
8. ELEMENTS - hr, img, svg, figure, caption, fancy lists, modules
========================================================================== */

/*~  RIGHT COLUMN -- onThisPg styles -    ~*/	
	  div.module, 
	  div.relatedlinks-module,
	  div.anchorlinks-module, 
	  div.onThisPg,
	  div.onThisPgQuarter {/*  sets column element attributes  */
		  clear: both;
		  float: none;
		  display:block; 
		  margin:.5em 0 .85em 0;}
		  
	  div.onThisPgQuarter {/* sets width of column element  */
		  width: 11.5em;}
	
	div.relatedlinks-module ul,
	  div.anchorlinks-module ul, .anchorlinks ul, .anchorlinks ul,
	  div.onThisPg ul, div.onThisPgQuarter ul {
		  margin:0 !important;}
		  
	  div.relatedlinks-module li,
	  div.anchorlinks-module li, .anchorlinks li, .anchorlinks li a,
	  div.onThisPg a, div.onThisPg li a  {/* sets style to not show bullet */
		  list-style: none outside none !important;}
		  
	  div.relatedlinks-module li,
	  div.anchorlinks-module li, .anchorlinks li, div.onThisPg li   {/*  */
		  border-bottom:1px solid #d8d7d7; 
		  padding-bottom:.5em;}	  
	  
	  div.onThisPg h2,
	  div.onThisPgQuarter h2,
	  div.module h2,
	  div.relatedlinks-module h2,
	  div.anchorlinks-module h2,
	  #side h2 {/* sets style to have no bold */
		  font-weight:normal;
		  border-top:1px solid #017db0;
		  border-bottom:1px solid #d8d7d7;
		  padding:.95em 0;
		  margin:0 0 .5em 0 !important;}
		  
	  div.onThisPg h4,
	  div.onThisPgQuarter h4,
	  div.onThisPg p, 
	  div.onThisPgQuarter p {/* sets style for headline ~~ please note that legacy style dictates use of plain "p" tag as a headline ~~ */
		  font-size:1.167em;
		  margin:0 0 .5em 0 !important;
		  font-weight:bold;border-top:1px solid #017db0;
		  border-bottom:1px solid #d8d7d7;
		  padding:.95em 0;}
		  
	  div.onThisPg p.reg, 
	  div.onThisPgQuarter p.reg {/* sets style for regular paragraph */
		  font-weight:normal;}
	
/*~  end  RIGHT COLUMN -- onThisPg styles -   ~*/	

/*~  begin  RIGHT COLUMN -- ContactUs styles -   ~*/	

	  /* ******  begin ContactUs styles    */
	  div#ContactUs {	/* contact us area ;*/
		  position: relative;
		  background-image:none !important;
		  float: none;
		  padding:0 !important;
		  margin: 3em .85em 0;/* all browsers, of course */
		  margin: 3em .85em 0\9; /* IE8 and below */ 
		  *margin:15px 0 10px !important; /* IE7 and below */}
	  
	  div#ContactUs dl {/* contact us area smaller area */
		  color: black;}
		  
	  div#ContactUs dl a,
	  div#ContactUs dl dt, 
	  div#ContactUs dl dt a { /*  */
		  color: #2b313a; }
		  
	  div#ContactUs dl dt { /* contact us title*/ 
		  font-size: 1.167em;
		  font-weight:bold;
		  border-bottom:solid medium #435361;}
	  
	  div#ContactUs dl dd { /* contact us content */
		  font-size: 0.917em;
		  line-height:1.3em;
		  padding: 0.5em;
		  margin:0;}
	  
	  div#ContactUs dd a { /*contact us -- for when emails appear in contact us section */
		  border-bottom:0 !important;
		  padding: 0.2em 0 !important;}
	  /* ******  end ContactUs styles    */

/*~  end  RIGHT COLUMN -- ContactUs styles -   ~*/	

/*~  IMAGE styles - to float, have caption, fit in rt column, display as part of bio  ~*/		
		#siteContentContainer img {/* GENERAL img STYLE */
			margin:3%;}
			
		 div.two-thirds img.imgWide {/* GENERAL img STYLE */
			width:99%;
			max-width:29em;}
			
		div.two-thirds img.imgFloat {
			width:auto;}
						
		div#siteContentContainer div.one-quarter img {
			width:auto; 
			height:auto;
			max-width:11.95em;}	
		
	/*~  imgFloat is widely used (> 20 hits); imgAATravel used on alumnae travel index page only  ~*/	
		div.imgFloat, 
		.imgFloat {/* floats image to right or div to right and then gives italic font-style */
			float:left;
			position:relative; 
			padding:0 .8em .8em .8em;  
			font-style:italic;}
			
		div.imgFloat img, 
		.imgFloat img, div.imgWcap img {
			margin-top:0; 
			padding-top:0;}
				
		.imgFloatRight,
		.imgAATravel {/* floats image to right */
			float:right;
			position:relative; 
			padding:6px;}
		
		.imgAATravel {/* max-width for use on AAtravel index page */
			max-width:230px;}
		
		div.imgWcap {/* pads image for use with captions style */
			padding:0.5em .75em .2em 0;
			background-color: #f8f2da;}
		
		div.imgWcap p {/* sets caption style */
			font-style:italic;
			text-align:left;
			padding:.5em;
			font-size:.75em;}
				
		div#siteContentContainer img.thumbnail {
			float: left;
			margin: 0 1.75em 1.3em 0;
			width: auto;}
		
	/******* 9d. misc IMAGE styles    **********/
		div.imageSet {/*  used to display staff bio pages, mostly  ~*/
			clear: both;
			float: none;
			overflow: hidden;
			display:block;}	
		div.imageSet>img {/* floats image to right without adjusting size ** added AK 07112014 */
			float:left;
			position:relative; 
			padding:0;  
			height:auto;}
		div.imageSet>img.imgFloat {/* floats image to right or div to right and then gives italic font-style */
			float:left;
			position:relative; 
			padding:0;  
			font-style:italic;
			width:25%;
			height:auto;}

		div.imageSet>ul {
			float:left; 
			width:50%; 
			margin:0; 
			padding:0;}
		
		img.si {/* side image style for use in right column */
			width:100%;
			max-width:14em;}
		
		
		object.flickrss, 
		object.flickrss embed,
		iframe.youtube  {
	width:95% !important; 
	padding:1%; 
	/*height:auto; */}
		
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end     IMAGE styles - to float, to have caption, to fit in rt column, to have text overlay, to have caption and img on grey background
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
begin   10.FEED/ MODULE styles - news, events, boards, youtube, blog, slideshow, transit, courses
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	

/*  10a.profile module   */
		div.profile,  
		div.featured {
			clear: both;
			display: block;
			padding: .3em;/**/
			margin-bottom: 18px;
			background-color: #f8f2da;
			width:100%;
			font-size:.875em;}
			
		div.profile:after,  
		div.featured:after { /* BMC CSS BASE styles*/
			visibility: hidden;
			display: block; 
			content: ""; 
			clear: both;
			height: 0;}
		
		
		
		div.profile img, 
		div.featured img {
			width: 100%;
			margin:0 !important;}
		
		div.featured img:first-child {
			margin-left: auto;
			margin-right: auto; 
			text-align: center;
			padding: 0 !important;}
		
		
		div.profile h2,
		div.profile h4,
		div.profile h6,
		div.profile p,
		div.profile p.source,
		div.profile .more,
		div.featured h2,
		div.featured h4,
		div.featured h6,
		div.featured p, 
		div.featured .more {
			padding: 0 .4em;}
		
		div.profile h2,
		div.profile h3,
		div.profile h3 a,
		div.featured h2,
		div.featured h3 {
			margin: 0 0 .2em;
			font-size:1.15em;
			color: rgb(43, 49, 58)}
		
		div.profile h3,
		div.featured h3 {
			padding: .2em .4em;
			line-height:1.1em;}
		
		div.profile h3 a:hover {
			color: rgb(1, 125, 189);}
		
		div.profile h4,
		div.featured h4 {
			font-size:1.15em;}
		
		div.profile h4, 
		div.profile h6,
		div.profile p,
		div.featured h4,
		div.featured h6,
		div.featured p {
			line-height:1.3em;
			margin:0 0 1em;}
		
		div.profile .more,
		div.featured .more {
			font-weight: bold;}
				
		div.profile p.source {
			text-align: right;}
		
		div.profile cite a:hover,
		dl.profile a:hover {
			text-decoration: underline;}

/*  used only on the /alumnae/profiles.html page    */
		#siteContentContainer ul.profileList li {
			list-style-type: none;}

/*  10b.rss-news/events feed styles    */		
		#siteContentContainer .news-feed-article,
		#siteContentContainer .boards-feed-article {
			clear: both; 
			width: 100%;}
			
		.news-feed {
			border:thin solid #d8d7d7; 
			padding: .2em 1.25em;}
			
		.news-feed h2 {
			border:none !important;}
				 
		.news-feed-article {
			padding: .5em 0;}	
		
		#siteContentContainer .news-feed-article h3 {
			padding:0 !important;
			text-transform:none !important;
			margin:0 0 0.3em;
			font-size: 1em;}
			
		.news-feed-article h3 a {
			line-height:1.15em;}
			
			
		div#siteContentContainer div.news-feed p.news-feed-pubdate,
		div#siteContentContainer div.news-feed p.news-feed-author {
			font-size: 0.75em;
			font-style: italic;}
		
		div#siteContentContainer div.news-feed a.news-feed-thumbnail img {
			float: left;
			margin: .3em 0.5em 0 0;}			
			
		#siteContentContainer .events-module {
			clear: both; 
			width: 100%;
			border:thin solid #00a58c;}
					
		#siteContentContainer .events-module  h2 {
			padding:.4em;
			text-transform:none !important;
			margin:0 0 0.3em; 
			background-color:#00a58c; }
					
		#siteContentContainer .events-module  h2 a {
			color:#fff; 
			font-style:italic;
			font-size:.75em; 
			font-family: "Times New Roman", serif;}
	
		div.events-feed-article h3 {
			 margin: .25em 0px 0.05em;}
			 
		div.events-feed-article h3 a {
			color:#2b313a;
			font-size: 0.75em; 
			line-height:1.15em;}
			
		div.events-feed-article {
			padding:.25em 1em .25em 1em;}
	
		div#siteContentContainer div.events-feed div.events-feed-article p {
			display:block;
			clear:left;font-size: 0.875em;}
		
		div.events-feed-article p.events-feed-summary, .events-module p.more a {
			color:#00a58c;
			font-style:italic;
			font-size:.75em;}
	
		div.events-feed-article p.events-feed-summary {
			border-bottom:1px solid #d8d7d7; 
			padding-bottom:.5em;}
		
		.events-module p.more {
			padding-left:.5em;}

/*  10c.blog-module style... used as more of a call out box    */
		div#siteContentContainer div.blog-module-one {
			border:thin solid #d8d7d7; 
			padding: .2em .5em; 
			width:100%;}
			
		.blog-module-one:after{
			visibility: hidden;
			display: block; 
			content: ""; 
			clear: both;
			height: 0;}
			
		div#siteContentContainer div.blog-module-one h3 {
			margin: 1em 0;}
		
		div#siteContentContainer div.blog-module-one h4 {
			font-weight: bold;
			margin-top:0;}
			
		div.blog-module-one img,
		div.blog-module-one .wrap {
			float: left;
			display:block;
			position:relative;}
			
		div.blog-module-one img {
			width:38%;}
		div.blog-module-one img.full {
			width:100%;
			margin: 0 0 .5em 0 !important;}				
		div.blog-module-one .wrap {
			width:53%;}
			
		div#siteContentContainer div.blog-module-one .more {
			clear: both;
			display: block;
			margin-top: 1em;}
			
/* *********BEGIN 10d.slideshow module, a box that goes at the top of the page to highlight something with pics and text */		 	




/*   -- begin --  OLD SLIDESHOW-MODULE elements  */
		#siteContentContainer .slideshow-module {
			overflow:hidden;
			margin-bottom:1.75em;}
			
		#siteContentContainer .slideshow-module p {
			width: 90%;}	
					
		#siteContentContainer .slideshow-module div.module-controls	 { /*	OLD .slideshow-module sets element style for numbers at bottom of slide  */
			margin-left:5%;			}
					
		#siteContentContainer .slideshow-module ul.pipelist	 { /*	OLD .slideshow-module sets element style for numbers at bottom of slide  */
			float: left;}
			
		#siteContentContainer .slideshow-module li	 { /*	OLD .slideshow-module sets element style for all list items in module */
			display: inline;
			line-height: 2em;
			margin-right:.9em;
			padding: 0;}
		
		#siteContentContainer .slideshow-module a.btn img	 { /*	OLD .slideshow-module sets element style */
			display: inline;}
			
		#siteContentContainer .slideshow-module a.prev, 
		#siteContentContainer .slideshow-module a.next	 { /*OLD .slideshow-module sets element style	 */
			float: left;}
		#siteContentContainer .slideshow-module a.prev	 { 	/*	OLD .slideshow-module sets element style */
			margin-right:.3em;}
			
		#siteContentContainer .slideshow-module a.next	 { /* OLD .slideshow-module sets element style	 */
			margin-left: -.5em;}
			
/*   -- end --  OLD SLIDESHOW-MODULE elements  */
			
			
				
/*  -- begin -- NEW SLIDER slideshow elements  */

		 #slider { /* sets element style for whole box	 */
			position: relative;
			height: auto;
			overflow: hidden;
			margin-bottom: 2em;}
			
		div.cycle_nav {
			max-height:	31em;
			min-height:19em;}
			
			
		div.cycle_nav:after {visibility: hidden;
			display: block; 
			content: ""; 
			clear: both;
			height: 0;}	
			
		 #slider .featureItem { /* sets element style	 */
			width:100%;
			display:block;
			margin-bottom:0.1em;}
			
				
		 #slider img { /*	 sets element style  */
			margin: 0;
			overflow:hidden;}
				
		 #slider div.slide-info {
			position:absolute;
			top:0;
			left:0;
			display: block;
			z-index: 3;
			 width:48%;
			 height:100%;
			 padding:1em 1em .3em;
			 background:#ebebeb;
			 background: rgba(235, 235, 235, .8);}
			
		 #slider h3 { /*	 sets element style  for headline*/
			margin: 0 0 1em 1em;
			font-size: 88%;
			line-height: 120%;}
			
		 #slider h3 a{ /* sets element style	for headline link to story */
			text-decoration: none;
			font-weight:bold;}
			
		 #slider a,  
		 #slider h3 a:hover, 
		 #slider a:hover	 { /*	 sets element style for links */
			text-decoration: underline;}
			
		#slider h5 {
			margin-top: 5%;
			font-size: 80%;}
		
		 #slider p { /*	 sets element style for content */
			float: right; 
			margin-left: .5em;
			padding-top: 0px;
			font-size: 80%;
			line-height: 120%;}
			
		 #slider>div.nav  { /*  sets element style for controls for slide advance  */
			z-index:1000;
			position: absolute;
			width: 100%;
			top: 85%;}
			
		#slider>div.nav:focus,
		#slider>div.nav:hover,
		#slider>div.nav:active {
			outline:none; 
			border:none;}	
			
			
		#slider>div.nav a#next2 { /*	 sets element style for numbers at bottom of slide */
			float:right;
			width: 10%;
			background: url(/includes/images/white-arrow-right.png) no-repeat scroll 20% center rgb(100, 110, 125);
			border-right: medium none;
			text-indent: -9999px;}
			
		#slider>div.nav a#prev2 {
			float:left;
			width: 10%;
			background: url(/includes/images/white-arrow-left.png) no-repeat scroll 80% center rgb(100, 110, 125);
			border-left: medium none;
			text-indent: -9999px;}
				
		 #slider .learnmore { /*	 sets element style */
			font-weight: bold;
			display: block;
			margin-top: 1em;}
		
		
/*  -- end -- NEW SLIDER slideshow elements  */
			
			
/* *********END slideshow module, a box that goes at the top of the page to highlight something with pics and text */





/*Begin  10h.Courses module output styles - default - added by cfarman 9/29/09*/		
		span.courses-term, 
		span.courses-description, 
		span.courses-crosslist, 
		span.courses-notoffered, 
		span.courses-instructor { /*sets element style	 */
			display:block;}
		
		span.courses-subjectareacode, 
		span.courses-catalognumber, 
		span.courses-longtitle { /*	sets element style */
			margin-right:.4em;
			font-weight:bold;}
		
		span.courses-subjectareacode { /*	sets element style */
			display:inline-block;
			padding-top:1.4em;}
		
		h2 + span.courses-subjectareacode, 
		p + span.courses-subjectareacode, 
		h3 + span.courses-subjectareacode, 
		h4 + span.courses-subjectareacode, 
		h5 + span.courses-subjectareacode, 
		h6 + span.courses-subjectareacode, 
		br + span.courses-subjectareacode { /* sets all elements to display inline with one another	 */
			display:inline;
			padding:0;}
		
		span.courses-notoffered { /*	sets font style for courses */
			font-style:italic;}

/*10i.Profiles styles taken from local stylesheet at /character/ added here by cfarman 1/20/10*/
/*  begin --  USED as part of the http://about.blogs.brynmawr.edu/ individual profiles  */
		  				  
		.big-quote { /*	 sets font size */
			font-size: xx-large;
			color: #003a6f; 
			line-height: 1.2;
			font-weight: normal;}
		
		.photo-credit { /*sets font size	 */
			font-size: x-small;}
/*  end --  USED as part of the http://about.blogs.brynmawr.edu/ individual profiles  */


/*10j.Facts module styles for admissions site, removed inline style from includes/modules/facts.php 
added facttext and factnumber styles (AK) for new facts module(AL) 6/11 */

		p.split clearfix span.facttext, 
		p.split clearfix span.factnumber { /*	sets common styles for facttext */
			color:#000000;
			line-height: 2em;}
		
		span.facttext { /*	sets style for normal sized text */
			width: 60%; 
			float: left;
			padding-bottom:1.3em; 
			padding-top:.9em;}
		
		 span.factnumber { /* sets stlye for gigantic number	 */
			 width: 38%;
			 float: right;
			 font-size: 2.4em;
			 padding:.5em 0 1.3em 5px;}

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
10L.accordion styles - 	
	MUST PUT THE FOLLOWING CODE:  <script type="text/javascript" src="/includes/js/accordion.js"></script>
	
	into bottom of page of code, after this line:  <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/analytics.shtml' ?>
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
		.clear { /*	clears elements within accordion */
			clear:both;}
		
		/* --- Headings --- */
		div#accordionContent h1,  
		div#accordionContent h2,  
		div#accordionContent h3 { /* sets maargins for headings	 */
			margin-bottom:1em;}
		
		div#accordionContent h2,  
		div#accordionContent h3,  
		div#accordionContent h4 a, 
		div#accordionContent h5 a { /*sets padding for headings	 */
			padding:3px 10px;}
		
		div#accordionContent h2,  
		div#accordionContent h3,  
		div#accordionContent h4, 
		div#accordionContent h5 { /* sets font size and line height for headings	 */
			font-size:1em; 
			line-height:1.4em;
			margin-bottom: 0;}
		
		#side, 
		#side h2, 
		#side h3 { /* sets color margin and padding for side column accordion	 */
			 
			padding:3px; 
			margin-left:5px;}
		
		/* --- Links --- */
		div#accordionContent a, 
		#side a  { /*	sets styles for links */
			padding:1px; 
			border-top:0 solid #d8d7d7; 
			color:#2b313a;text-decoration:none;}
		
		div#accordionContent a, 
		.accordion .switch a { /*sets styles for other links	 */
			border-width:0 0 1px 0; 
			text-decoration:none;}
		
		div#accordionContent .accordion a{ /*sets link style	 */
			border-width:1px; 
			text-decoration:underline;}
		
		div#accordionContent a:hover,  
		div#accordionContent a:focus, 
		div#accordionContent a:active, 
		#side a:hover, 
		#side a:active, 
		#side a:focus { /*	sets hover style */
			border-color:#d8d7d7; 
			text-decoration:none; 
			outline:0 none;}
		
		/* --- Accordion --- */
		.js #main .accordion { /* hides accordion til js event	 */
			visibility:hidden;}
		
		.js #side .accordion { /*	hides accordion til js event */
			display:none;}
		
		div#accordionContent .accordion { /* sets margins padding	 */
			margin:0; 
			padding:0 10px;}
		
		div#accordionContent .accordion li, 
		div#side .accordion li { /*	sets list styles for accordion */
			list-style:none;
			padding: 0 0 0.5em 1em;}
		
		div#accordionContent .accordion li.last-child, 
		div#side .accordion li.last-child { /*	sets style for last list item in accordion */
			margin-left:12px; 
			list-style-type:disc!important; 
			background:none!important; 
			padding-left: 2px!important;}
		
		#side ul.accordion ul { /*	sets side accordion liat style */
			margin:0; 
			padding:0 0 0 10px;}
		
		div#accordionContent .accordion .inner { /*	sets styles for nesting accordions */
			margin-bottom:0;
			margin-left:1.6em;
			margin-right:0; 
			padding:.5em 1em; 
			overflow:hidden;background: #ededed;}
		
		div#accordionContent .accordion .inner .inner { /*sets styles for nesting accordions	 */
			padding-bottom:0;}
		
		div#accordionContent .accordion .h { /*	sets styles accordions */
			padding-top:.3em;}
		
		div#accordionContent .accordion p { /*	sets styles accordions */
			margin:.5em 0 1em;}
		
		div#accordionContent .switch { /*sets styles accordions	 */
			margin-bottom:.5em;}
		
		/*  Add styles for  ***ALL*** links in the 'accordion':  .accordion a {...} */  
		div#accordionContent .collapse{ /*	sets styles accordions open/close states */
			display:block;}
		
		div#accordionContent a.trigger, 
		div#side a.trigger { /*	sets styles accordions open/close states */
			display:block; 
			padding-left:2em; 
			background-image: url(/images/acc_dwn_arw.png); 
			background-repeat: no-repeat; 
			background-position: 1px 50%;  
			font-weight:700;}
		
		div#accordionContent a.trigger.open, 
		div#side a.trigger.open { /*sets styles accordions open/close states	 */
			background-image: url(/images/acc_up_arw.png);}
		
		div#side li.last-child a.trigger { /*sets styles accordions open/close states	 */
			background:none!important;}
		
		div#accordionContent .last-child a.trigger, 
		div#side .last-child a.trigger { /*	sets styles accordions open/close states */
			padding-left:1px; 
			background-image:none; 
			font-weight:normal; 
			padding-left:-20px!important;}
		
		div#accordionContent #main a.trigger { /*sets styles accordions open/close states	 */
			background-color:#fff;text-decoration:none;}
		
		div#accordionContent #main a.trigger.open { /*	sets styles accordions open/close states */
			border-color:#d8d7d7; 
			background-color:#ededed;}
		
		div#accordionContent #main a:hover.trigger.open,
		div#accordionContent #main a:focus.trigger.open,
		div#accordionContent #main a:active.trigger.open { /*sets styles accordions open/close states	 */
			border-color:#d8d7d7;}
		
		div#accordionContent #main .switch a.open { /*sets styles accordions open/close states	 */
			background:transparent none;}
		
		div#accordionContent #side a.active{ /*	sets styles accordions open/close states */
			font-weight:700; 
			color:#2b313a; 
			text-decoration:none;}
		
/*~ END  --- 10L.accordion styles  */

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
   BEGIN  --- 10n. jquery tabcontent  module styles ** used on Library page for Tripod
   
   **NEEDS:  <script src="/includes/js/tabcontent.js" type="text/javascript"></script>  in page head to work
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
		div#tabContentBox { /*styles whole tab box */
			width:auto; 
			margin: 0 auto; 
			font-family: Arial,Helvetica,sans-serif;
			/*   new styles 7/14 */
			border: 1px solid #ebebeb;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			min-height: 12.5em;
			height:auto;
			position: relative;
			overflow: hidden;}
			
		#tabs_container {/*   new styles 7/14 */
			background: #ebebeb;
			background: -moz-linear-gradient(center top , #eeeeee, #ebebeb);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ebebeb));
			/* width:100%; */   }
	
		div#tabContentBox ul.tabs { /*styles tabs */
			/* font-size:12px; */
			padding: 0 !important; /* */
			margin:0;/* */
			list-style-type: none;
			text-align: left; /*set to left, center, or right to align the tabs as desired*/
			/* new styles 7/14 */
			overflow: hidden;
			background: #ebebeb;
			background: -moz-linear-gradient(center top , #eeeeee, #ebebeb);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ebebeb));
			-moz-border-radius: 4px 4px 0 0;
			-webkit-border-radius: 4px 4px 0 0;
			border-radius: 4px 4px 0 0;
			-webkit-box-shadow: 0 1px 0 #FFF inset;
			-moz-box-shadow: 0 1px 0 #FFF inset;
			box-shadow: 0 1px 0 #FFF inset;}
				
		div#tabContentBox ul.tabs li { /*styles tabs to be next to ea other */
			display: inline;
			width:auto;}
				
		div#tabContentBox ul.tabs li a { /*styles tabs with borders and background image */
			text-decoration: none;
			z-index: 1;
			color: #000;
			/* new styles 7/14 */
			display: block;
			float: left;
			font: .74em/2.5em Arial,Helvetica,Sans-serif;
			padding: 0 1% 0 6%;
			color: #333;
			text-shadow: 0 1px 0 #FFF;
			border-left: solid 1px rgba(0,0,0,0.05);
			border-right: solid 1px rgba(255,255,255,0.7);
			position: relative;
			overflow: hidden;
			border-bottom: none;
			background: url(/includes/images/magnify_inactive.png) no-repeat;}
				
		div#tabContentBox ul.tabs li a:visited { /*sets visited tab link color to black */
			color: #000;}
				
		div#tabContentBox ul.tabs li a:hover { /*hover styles for tabs */
			/* new styles 7/14 */
			border-left-color: #CCC;
			border-bottom: none;
			background: #ffffff url(/includes/images/magnify_active.png) no-repeat;}
				
		div#tabContentBox ul.tabs li.selected a { /*selected tab style */
			position: relative;
			top: 0px;
			font-weight:bold;
			background: white;
			/* new styles 7/14 */
			border-left-color: #CCC;
			border-bottom: none;
			background: #ffffff url(/includes/images/magnify_active.png) no-repeat;}
					   
		div#tabContentBox ul.tabs li.selected a:hover { /*selected tab style hover */
			text-decoration: none;
			/* new styles 7/14 */
			border-left-color: #CCC;
			border-bottom: none;
			background: #ffffff url(/includes/images/magnify_active.png) no-repeat;}
		
		div#tabContentBox div.tabcontent { /*styles tab content  */
			display: block;
			/* height:7em; */}
		
		div#tabContentBox div.tabcontent img { /*styles tab content images */
			float:left; 
			margin: 0% 3% 3% !important;}
		
		div#tabContentBox div.tabcontents { /*styles tab content  */
			margin: 1em 0.5em 0.5em;
			padding: .5em .5em .95em .5em;
			background: #ebebeb;
			background: -moz-linear-gradient(center top, #eeeeee, #ebebeb);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ebebeb));
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px ;
			border-radius: 4px;
			-webkit-box-shadow: 0 1px 0 #FFF inset;
			-moz-box-shadow: 0 1px 0 #FFF inset;
			box-shadow: 0 1px 0 #FFF inset;}
		
		div#tabContentBox div.tabcontents h3 { /*styles h3 title of tab content */
			color: #435361;
			display: block;
			font-size: 1em;
			font-weight: bold;
			line-height: 1em;
			margin-bottom: 0.75em !important;
			margin-top: 0.45em !important;
			padding: 0 !important;}
/* OTHER SEARCH OPTIONS  */

.lib_space{
	background-color:#ffffff;
	margin: 1em 0;
	border-bottom: 1px dotted #cccccc;
}

ul.lib_tab_list {
	margin: 0 0 3px 20px;
	padding: 0;
	list-style-type: none;
	font: 14px/18px Arial, Helvetica, Sans-serif;
	color: #333;
	
	}
.lib_tab_list li {
	display: inline;
	padding: 4px 16px 4px 0px;
	}
.lib_tab_list li a {
	text-decoration:none;
	border-bottom: 0px;
	}
.lib_tab_list li a:hover {
	text-decoration: none;
	}			
		/* LIBRARY SEARCH FORM */
		#searchForm input, textarea, select {
			background: #ffffff;
			border: 1px solid #cccccc;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
			-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
			box-shadow: 0 1px 1px #ccc;
			box-shadow: 0 1px 1px rgba(0,0,0,.1);
			color: #555555;
			font: 13px/21px 'Helvetica Neue', sans-serif;
			padding: 5px;}
		
		#searchForm input[type=text], 
		#searchForm select {
			height: 2.25em;
			/* width:30%; */}
		
		#searchForm option{
			background: #ffffff;
			padding: 0 0 0 5px;
			margin: 4px;}
		
		#searchForm textarea {
			background: #ffffff;
			height: 120px;
			overflow: auto;
			padding: 5px;}
		
		#searchForm button {
			overflow: visible;
			width: auto;}
		
		#searchForm input:focus, textarea:focus, select:focus {
			border: 1px solid #aaaaaa;
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
			-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
			box-shadow: 0 1px 1px #cdcdcd;
			box-shadow: 0 1px 1px rgba(0,0,0,.2);}
		
		#searchForm input[type=radio], input[type=checkbox] {
			border: 0;
			margin: 0;
			padding: 0;}
		
		#searchForm input[type="radio"] {
			vertical-align: text-bottom;}
		
		#searchForm input[type="checkbox"] {
			vertical-align: bottom;}
		
		#searchForm input[type=submit] {
			height: 2.25em;
			background: #0396d3;
			background: -moz-linear-gradient(top, #0396d3, #017db0);
			background: -o-linear-gradient(top, #0396d3, #017db0);
			background: -webkit-gradient(linear, left top, left bottom, from(#0396d3), to(#017db0));
			filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0396d3', endColorstr='#017db0');
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0396d3, endColorstr=#017db0)";
			border: solid 1px #017db0;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
			-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
			box-shadow: 0 1px 2px #000;
			box-shadow: 0 1px 2px rgba(0,0,0,.3);
			color: #fff;
			cursor: hand;
			cursor: pointer;
			display: inline-block;
			*display: inline;
			font-weight: bold;
			padding: 4px 5px 4px 5px;
			text-align: center;
			text-shadow: 0 1px 1px #000;
			text-shadow: 0 1px 1px rgba(0,0,0,.3);
			vertical-align: baseline;}
		
		#searchForm input[type=submit]:hover, input[type=submit]:focus {
			background: #017db0;
			background: -moz-linear-gradient(top, #ebebeb, #c1c2c3);
			background: -o-linear-gradient(top, #ebebeb, #ebebeb);
			background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#4a4a4a));
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#c1c2c3');
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#c1c2c3)";
			border-color: #c1c2c3;}			
		
/*~  END  --- 10n. jquery tabcontent  module styles ** used on Library page for Tripod  */

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end FEED/ MODULE styles - news, events, boards, youtube, blog, slideshow, transit, courses
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	


/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
begin   12.INCOMING STUDENT styles by class -color
colors:   green=g=066406, red=r=ff0000, lt. blue=lb=3399ff, dk blue=db=003399 
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/
	  a.ltblueclass,
	  a.dkblueclass,
	  a.redclass,
	  a.greenclass { /* switch between "this is your color"/"want to know why?" when you hover over span */
		  position:relative; /*this is the key*/
		  z-index:24;
		  color:#fff !important;
		  text-decoration:none !important;
		  width:100%; 
		  display:block;
		  text-align: center; 
		  font-weight:bold; 
		  font-size:1.5em;
		  padding:5px;}
		  
	  a.greenclass{
		  background-color:#066406;}
	  
	  a.redclass {
		  background-color:#ff0000;}
	  
	  a.dkblueclass {
		  background-color:#003399;}
	  
	  a.ltblueclass {
		  background-color:#3399ff;}
	  
	  a.ltblueclass:hover,
	  a.dkblueclass:hover,
	  a.redclass:hover,
	  a.greenclass:hover{
		  z-index:25;}
	  
	  a.ltblueclass span,
	  a.dkblueclass span,
	  a.redclass span,
	  a.greenclass span {
		  display: none;}
	  
	  a.ltblueclass:hover span,
	  a.dkblueclass:hover span,
	  a.redclass:hover span,
	  a.greenclass:hover span {/*the span will display just on :hover state*/
		  display:block;
		  position:absolute;
		  top:0; 
		  left:0;
		  width:100%;
		  background-color:#fff;
		  text-align: center;
		  font-weight:bold;
		  padding:5px;}
		  
	  a.redclass:hover span {/*the span will display just on :hover state*/
		  color:#ff0000;}
	  
	  a.dkblueclass:hover span {/*the span will display just on :hover state*/
		  color:#003399;}
	  
	  a.ltblueclass:hover span {/*the span will display just on :hover state*/
		  color:#3399ff;}
	  
	  a.greenclass:hover span {/*the span will display just on :hover state*/
		  color:#066406;}
	  
	  #siteContentContainer ul li.welcomeClass_g, 
	  #siteContentContainer ul li.welcomeClass_r,
	  #siteContentContainer ul li.welcomeClass_db,
	  #siteContentContainer ul li.welcomeClass_lb {
		  line-height: 2.2em;
		  padding: 0 0 0 2.2em;
		  list-style: none outside none;}
	  
	  #siteContentContainer ul li.welcomeClass_g {
		  background: transparent url(/images/lantern_green_24.gif) no-repeat !important;}
	  
	  #siteContentContainer ul li.welcomeClass_r {
		  background: transparent url(/images/lantern_red_24.gif) no-repeat !important;}
	  
	  #siteContentContainer ul li.welcomeClass_db {
		  background: transparent url(/images/lantern_dkBlue_24.gif) no-repeat !important;}
	  
	  #siteContentContainer ul li.welcomeClass_lb {
		  background: transparent url(/images/lantern_ltBlue_24.gif) no-repeat !important;}
	  
	  #siteContentContainer ul li.welcomeClass_g a, 
	  #siteContentContainer ul li.welcomeClass_g a:visited,
	  #siteContentContainer ul li.welcomeClass_r a, 
	  #siteContentContainer ul li.welcomeClass_r a:visited,
	  #siteContentContainer ul li.welcomeClass_db a, 
	  #siteContentContainer ul li.welcomeClass_db a:visited,
	  #siteContentContainer ul li.welcomeClass_lb a, 
	  #siteContentContainer ul li.welcomeClass_lb a:visited {
		  font-size:1.2em;
		  text-decoration:none !important; 
		  font-weight:bold;
		  line-height: 1.7em;}
	  
	  #siteContentContainer ul li.welcomeClass_g a, 
	  #siteContentContainer ul li.welcomeClass_g a:visited {
		  color:#066406;}
	  
	  #siteContentContainer ul li.welcomeClass_r a, 
	  #siteContentContainer ul li.welcomeClass_r a:visited {
		  color:#ff0000;}  
	  
	  #siteContentContainer ul li.welcomeClass_db a, 
	  #siteContentContainer ul li.welcomeClass_db a:visited {
		  color:#003399;}
	  
	  #siteContentContainer ul li.welcomeClass_lb a, 
	  #siteContentContainer ul li.welcomeClass_lb a:visited {
		  color:#3399ff;}
					  
	  #siteContentContainer ul li.welcomeClass_g a:hover,
	  #siteContentContainer ul li.welcomeClass_r a:hover,
	  #siteContentContainer ul li.welcomeClass_db a:hover,
	  #siteContentContainer ul li.welcomeClass_lb a:hover {
		  text-decoration:underline !important;}
	  
/*~  end    INCOMING STUDENT styles by class -color  ~*/	
/* ==========================================================================
FORMS - form, fieldset, legend, label, input, button, select, textarea, input [types]
========================================================================== */
		input[type=text],
		input[type=password],
		textarea {
			
			padding:2px;
			color: black;
			width:11.25em;
			margin:0 3px;}
		
		input[type=checkbox] {
			border:0 none;
			color:black;
			height:auto;
			margin:2px 2px 0;
			padding:0;
			vertical-align:top;
			width:auto;}
		
		textarea{
			height:100px;
			width:90%;
			padding: 0;}
		
		select{
			/* height: 1.75em; */}
		
		fieldset {
			margin-bottom:1em;}
			
/* ==========================================================================
BUTTONS - btn styles with rounded corners, etc
========================================================================== */
/* begin 11.BUTTON styles - form button, callout button */		  
	  input.formbuttonlink {/* Form Link Button style - for using a link instead of a button in a form formbuttonlink */
	  	  background-color: transparent;
		  border: none;
		  color: #055a95; 
		  padding: 2px 0;
		  overflow:visible; /* ie6/7 width fix */
		  width:auto; /* ie6/7 width fix */}
	  
	  input.formbuttonlink:hover, 
	  input.formbuttonlink:focus {/* hover style */
		  text-decoration:underline;}
		  
	  /*~  callout styles -  ~*/	
	
	
		.button-bookmarklet {
			width:100%;
			display: inline-block;
			text-decoration: none; 
			padding: 9px 14px;
			margin: 0px 5px;
			display: inline-block;
		}
		
		.callout {/* styles "callout" type box/button */
			background-color: #f2f1f1;
			color:#017db0;}
		
		
		.callout>a,
		.callout>a>h5 {/* styles "callout" type box/button */
			
			color:#017db0;}
		
			
	.callout a:after {/*sets element style for ***MOBILE*** 	  */
				  content:"»";
				  float:right;
				  color:#017db0;  font-size: 120%; font-weight:bold;}	
	
		
			
			
				 
		.callout:hover,
		.callout:hover>a,
		.callout:hover>a>h5 {/* styles "callout" type box/button */
			background-color: #bebebe;
			color:#f9f3f3;}
		
		
			
	  
	  #siteContentContainer .one-third .callout h5 {/* used as a yellow button mostly in the right column .. makes h5 relatively huge */
		  line-height: 1.5em;
		  margin:0;
		  font-weight:bold;}
	  
	  
	  
/* end BUTTON styles - form button, callout button */	

/* ==========================================================================
TABLES - table, th, tr, td, thead, tbody, borders, stripes, etc
========================================================================== */

/* begin    8.TABLE styles - alternating row color, grid  */	
		table.striped-grey, 
		table.striped-grey-yellow, 
		table.striped,
		table.striped-schedule-module   {/* styles width, padding, etc of tables */ 
			width: 100%;
			margin: 1px 1px 1em;
			padding: 0;
			vertical-align: baseline;
			text-align: left;}
		
				
		th.colspan{
			background:#ededed; 
			color:#2b313a; 
			border-bottom:none;}		
			
		table.striped-grey tr, 
		table.striped-grey-yellow tr,
		table.striped tr,
		table.striped-schedule-module tr {/* styles table rows  */
			background-color: #ffffff;}
			
		table.striped-grey .even,
		table.striped-grey-yellow .even,
		table.striped .even,
		table.striped-schedule-module .even {/* styles even rows with different color  */
			background-color: #fff0be;}		
  
  
  		table.striped-grey-yellow,
		table.striped-schedule-module {/*  */
			border: none;}		
			
		table.striped-grey-yellow td,
		table.striped-schedule-module td {/*  styles table cells  */
			border-bottom:none;}
			
  /******************
  8g.NOTE: in order to use these above striped table styles insert the following: 
	
	<script type="text/javascript" src="/includes/js/stripedtable.js"></script>    
  into bottom of page of code, after this line: 
  
  <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/analytics.shtml' ?>
  
  table.striped-schedule-module is called from the course schedule module
		
  *****************/

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end       TABLE styles - alternating row color, grid 
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	


/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
begin    13.FOOTER   - siteFooter styles - 
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
		
		div#siteFooter { /* footer styles */
			position:relative;	  
			overflow: hidden;
			background-color:#ebebeb;
			width:100%;}
				
		div#siteFooter>p {margin-bottom:0;}
		
		div#footer_wrap {
			position: relative;
			 overflow: hidden;
			 word-wrap:normal;
			 /* top:-17px; only need if p in-line style of margin-bottom: 0 is NOT present in code */}
		
		div#footer_wrap a {
			color: #017db0;
			text-decoration: none;}
		
		div#footer_wrap a:hover {
			color: #2b313a;
			text-decoration: none;}
						  
		div#links_wrap {
			position: relative;
			margin: 0 auto;
			color: rgb(100, 110, 125);
			font-size: 100%;
			float: left;
			width: 50%;}
		
		div#links_wrap #left-footer {
		  width: 100%;
		}
		@media (max-width: 1200px) {
		  div#links_wrap #left-footer {
			padding: 0 20px;
		  }
		}
								  
		div#social ul,
		#siteContentContainer div.social ul {
			margin: 0;
			padding: 0;
			float: left;
			width: 100%;}
		
		div#social ul li,
		#siteContentContainer div.social ul li {
			text-indent: -9999px;
			list-style-type: none;margin: 0;}
		
		div#social ul li a,
		div.social ul li a {
			width: 50px;
			background: #bebebe;
			height: 50px;
			float: left;}
		
		div#social ul li a.twitter,
		div.social ul li a.twitter {
			background-image: url(/includes/images/ico-twitter2.png); 
			background-repeat:no-repeat;}
		
		div#social ul li a.linkedin,
		div.social ul li a.linkedin {
			background-image: url(/includes/images/ico-linkedIn.png); 
			background-repeat:no-repeat;}
		
		div#social ul li a.facebook,
		div.social ul li a.facebook {
			background-image: url(/includes/images/ico-facebook2.png);
			background-repeat:no-repeat;}

		div#social ul li a.instagram,
		div.social ul li a.instagram {
			background-image: url(/includes/images/ico-instagram.png);
			background-repeat:no-repeat;}
		
		
		div#social ul li a:hover,
		div.social ul li a:hover {
			background-color: #017DB0;}
		
		
		div#links_prime {
			padding: 40px 20px 40px 0;
			float: left;
			clear: left;
			width: 55%;}
		
		div#links_prime ul {
			margin: 0;
			padding: 0;
			-webkit-columns: 2;
			-moz-columns: 2;
			columns: 2;}
		
		div#links_prime ul li {
			padding: 5px 0;
			width: 100%; word-wrap:normal;}			

		div#links_prime ul li a {
			font-size: 110%;
			font-weight: bold;}	
			
		div#links_util {
			padding:  40px 0 40px 20px;
			float: left;
			width: 43%;}
		
		div#links_util ul {
			margin: 0;
			padding: 0;
			-webkit-columns: 2;
			-moz-columns: 2;
			columns: 2;
			 
			}
		  
		div#links_util ul li {
			padding: 5px 0;
			margin-right: 0px;
			width: 100%; 
			/* word-wrap: normal; */
			text-wrap:none;}		

		div#links_util ul li a {
			font-size: 95%;
			font-weight: normal;}		
		
		div#copyright {
			padding: 0 0 10px 0;
			font-size: 85%;
			width: 100%;
			clear: both;
			float: left;}
		
		div#copyright p {
			margin: 0;
			padding: 5px 0;}							
					
		div#cta_wrap  {
			width:47%;
			height:24.3125em; /*  */
			background-image:url(/includes/images/footerPic.jpg);
			background-repeat:no-repeat;
			background-size:cover;
			background-position:left top;
			float:right; 
			position:relative; word-wrap:normal;}
		
		div#cta_button {
			background-color:#017db0; /*  */
			float:left;
			padding: 1em .65em;
			width: 169px;
			height: 275px;
			margin-left:12%;}
		
		 div#cta_button h2 {
			 margin:0 1.55em;  /*  */
			 color:#fff;
			 font-family:"carter sans", arial;
			 font-size:100%;}
		
		div#cta_button img {
			margin:.75em 1em;}
	   
		div#footer_wrap a.giveButton {
			color:#ffffff;
			margin-left:5%;
			font-weight: 200;
			background-color:#0187be;
			display: block;
			width: 90%;
			border:1px solid #0198d6;
			padding:2% 14% 2% 17%;
			cursor: pointer;
			text-decoration:none;}

		div#footer_wrap a.giveButton:hover {
			text-decoration:underline;}
			
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end    FOOTER   - siteFooter styles - 
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	

/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
end 	regular styles for large screens -- 
		@media (screen) == 75em-60em aka 1200px-960px  == default @media screen
		width: 73.13em == 1170px ÷ 16 == for default BMC layout width
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/	
}



/*   @Media queries styles
9. Begin @Media queries styles for smaller screens and mobile devices. 

/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/* em breakpoint styles */
/*
75em-60em
1200px-960px  === default @media screen
	breakpoints based on zivtech breakpoints		*/	
/*	breakpoints based on zivtech breakpoints		*/	
/*	@media (min-width: 75em) /* 1200px ÷ 16   for default BMC layout width*/
/*	@media (min-width: 65.625em) /* 1050px ÷ 16 for narrow desktop browsers and iPad landscape*/ 
/*	@media (min-width: 60em) /* 960px ÷ 16 iPad landscape*/ 
/*	@media (min-width: 50em) /* 800px ÷ 16 iPad portrait*/  
/*	@media (min-width: 48em) /* 768px ÷ 16 iPad portrait*/ 
/*	@media (min-width: 37.5em) /* 600px ÷ 16 smaller than tablet*/ 
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media  (max-width: 65.625em){
	  
	  /* ==========================================================================
				  BEGIN -- div #siteHeader 
		  ========================================================================== */
	  
	  /* ==========================================================================
	 			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header
		  ========================================================================== */
			 
	  /* ==========================================================================
	 			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	 	  ========================================================================== */
	  
	  /* ==========================================================================
	 			   BEGIN logo 
         			a.navbar-brand img  --	END 
	    ========================================================================== */
	  
	  /* ==========================================================================
	  		  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	 	  ========================================================================== */
	  
	  /* ==========================================================================
	 			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  	  ========================================================================== */
	  
	  /* ==========================================================================
				   BEGIN util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END 
	  	  ========================================================================== */
	  
	  /* ==========================================================================
				 BEGIN dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  	  ========================================================================== */
	  
	  /* ==========================================================================
				  BEGIN prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	END 
	 	  ========================================================================== */
	  
	  /* ==========================================================================
	  			  BEGIN  -- div#secondaryNav -- END
	 	  ========================================================================== */
	  
	  /* ==========================================================================
	 			  BEGIN  --.profile, .featured, p.callout -- OTHER ELEMENTS -- END  
	  	  ========================================================================== */
	  
	  /* ==========================================================================
	  			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules -- END 
	  ========================================================================== */
	  
	  /* ==========================================================================
	  			  BEGIN  -- div#siteFooter -- SITE FOOTER	 -- END 
	 	  ========================================================================== */
		div#links_prime {
			width: 100%;
			clear: both;
			padding: 10px 0;}
		
		div#links_util {
			width: 100%;
			clear: both;
			margin: 0;
			padding: 10px 0;}
			
			
			
	  /* ==========================================================================
	  			  BEGIN  --  LAYOUT ELEMENTS -- END
	  	  ========================================================================== */
}/*/mediaquery*/


/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/* em breakpoint styles */
/*
75em-60em
1200px-960px  === default @media screen
	breakpoints based on zivtech breakpoints		*/	
/*	breakpoints based on zivtech breakpoints		*/	
/*	@media (min-width: 75em) /* 1200px ÷ 16   for default BMC layout width*/
/*	@media (min-width: 65.625em) /* 1050px ÷ 16 for narrow desktop browsers and iPad landscape*/ 
/*	@media (min-width: 60em) /* 960px ÷ 16 iPad landscape*/ 
/*	@media (min-width: 50em) /* 800px ÷ 16 iPad portrait*/  
/*	@media (min-width: 48em) /* 768px ÷ 16 iPad portrait*/ 
/*	@media (min-width: 37.5em) /* 600px ÷ 16 smaller than tablet*/ 
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media  (max-width: 60em){
	  
	  /* ==========================================================================
			  BEGIN -- div #siteHeader 
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header
	  ========================================================================== */
			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
		.navbar-brand {/* for   ***ALL*** 34--.navbar-brand */
			/* styles BMC logo -- whole element */
			padding: .275em .25em 0em .35em;/*  */
			margin-top:.2em;}
		
		.navbar-brand img {
			width:4.95em;}
			
			
			
	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END 
	  ========================================================================== */

	  /* ==========================================================================
			 BEGIN dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */

	  /* ==========================================================================
			  BEGIN prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav -- END
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  --.profile, .featured, p.callout -- OTHER ELEMENTS -- END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules -- END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER	 -- END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  --  LAYOUT ELEMENTS -- END
	  ========================================================================== */
}/*/mediaquery*/


/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/* em breakpoint styles */
/*
50em
800px  === tablet portrait screen
	breakpoints based on zivtech breakpoints		*/	
/*	breakpoints based on zivtech breakpoints		*/	
/*	@media (min-width: 75em) /* 1200px ÷ 16   for default BMC layout width*/
/*	@media (min-width: 65.625em) /* 1050px ÷ 16 for narrow desktop browsers and iPad landscape*/ 
/*	@media (min-width: 60em) /* 960px ÷ 16 iPad landscape*/ 
/*	@media (min-width: 50em) /* 800px ÷ 16 iPad portrait*/  
/*	@media (min-width: 48em) /* 768px ÷ 16 iPad portrait*/ 
/*	@media (min-width: 37.5em) /* 600px ÷ 16 smaller than tablet*/
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media  (max-width: 50em){
	  
	  /* ==========================================================================
			  BEGIN -- div #siteHeader 
	  ========================================================================== */
		#siteHeader{
			min-height:3em !important;}
		
		.navbar-header {/* necessary for it to display in mobile correctly  */
			float: none;/*  */}
		
		.navbar-nav {/*    */
			float: none;/*  */}  
		
		.navbar-collapse.collapse/* 33--.navbar-collapse.collapse */ {/*  */
			/* display behavior for  ***ALL*** menus  */
			display: none;}			  
		
		.navbar-nav > li {/*  -- in max-width: 53em-- for  ***DESKTOP*** -- primary and util nav */
			float: none; /* */}
		
		.navbar-nav > li > a {/*    */
			/* for  ***DESKTOP*** -- primary and util nav  */
			line-height: 3em;/*  */}	

		.navbar-right {/* -- in max-width: 53em--   */
			float: none !important;}
			
			
			
	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header
		  ========================================================================== */
			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
			.navbar-toggle {/* -- in max-width: 53em--   */
				display: block;}
				
			 .navbar-default .navbar-nav > li > a.dropdown-toggle {/* for  ***DESKTOP***  */
				/* styles background + font  */
		
		   		padding: .85em 1.955em .85em .655em; 
				width:100%;}
			
			 ul.dropdown-menu li {
				 padding: .85em 1.955em .85em .655em;}	
			   
			.open > .dropdown-menu /*18--.open > .dropdown-menu  */{
				width:auto;}
		   
	
    
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
		.navbar-default .navbar-search {
			/* width: 35%; */}		

		.navbar-search	{/* positions search on left of hamburger icon for mobile    */
			position: absolute;
			top: 1em;
			right: 4em;}
		form.gsc-search-box table tbody td.gsc-input .gsc-input-box {
   
    min-width: 90px;
}	  
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */
		.navbar-collapse {
			padding-left:0; 
			padding-right:0; 
			width:100%;}
			
			
			
	  /* ==========================================================================
			   BEGIN util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END 
	  ========================================================================== */
		.util-nav {/* used to switch div order for mobile menu revealed.. order should be primary; util; info-for */
			top:26em; 
			position: relative; 
			line-height:1.5em; 
			width:100%; 
			float:none !important; 
			background:#ebebeb; }
			
			
		.util-nav>li{
			width:auto; /*  */
			min-width:18.625%; /*  */
			float:left !important;/*  */ }
		
	   
		.util-nav:after{
			visibility: hidden;
			display: block; 
			content: ""; 
			clear: both;
			height: 0;}
			
			
			
	  /* ==========================================================================
			 BEGIN dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */
		.util-nav li.dropdown {
			width:100%; 
			background:transparent; 
			padding:0 !important; 
			text-align:left;}
			
		a.dropdown-toggle {
			margin:0 0.35em 0 0 !important; 
			padding:0 0 0 0.25em !important;
			background-image: none!important;
			width:100%;}
			
		.dropdown-menu {
			display: block;}
		
		.navbar-nav .open .dropdown-menu, 
		.navbar-nav .dropdown-menu {/* so menu appears open but will not change if one clicks on info for text */
			/* dropdown style for whole dropdown menu element  */
		  position: static;/*  */
		  width: 100%;/*  */}
		
		.dropdown-menu {/* used to have dropdown menu appear ...for  ***ALL*** */
			display: block; 
			width:100%; 
			margin:0 !important;}
			
		.icon-bar,
		.icon-bar.navbar-collapse.collapse {/* used to display hamburger lines in mobile menu -- all based on js classes called in html */
			display: block; height: 3px !important;}	
			
		.sr-only.navbar-collapse.collapse,
		.icon-bar.navbar-collapse.collapsing,
		.icon-bar.navbar-collapse.in {/* used to hide hamburger lines and X in mobile menu -- all based on js classes called in html  */
			display: none;}
			
		.sr-only.navbar-collapse.in {/* used to display X in mobile menu -- all based on js classes called in html */
			display: block;}		
			
	  /* ==========================================================================
			  BEGIN prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	END 
	  ========================================================================== */
		.prime-nav {/* used to switch div order for mobile menu revealed.. order should be primary; util; info-for */
			top:-17.15em;  
			position:relative;/* */ 
			line-height:2.5em; 
			width:100%; 
			float:none !important;}
		
		.prime-nav>li{
			width:90%; 
			border-bottom:thin solid #ebebeb;}
			
			
			
	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav
	  ========================================================================== */
	  
/* ==========	used with .width-480 which changes utility of secondary nav menu to mobile within the mobile.js file for screens less than 800 px wide  	 =================================	====== */

	  /* ==========	  div#secondaryNav	 =================================	====== */
 	 			 
		div#secondaryNav { /*	changes width of secondary nav for ***MOBILE***  */
			width: 100%;
			margin: 0;}
				
		div#secondaryNav.mobileSecNavVisible {  /* modal overlay style for ***MOBILE*** secondary nav */
			background: rgb(0, 0, 0);/* Fallback for web browsers that doesn't support RGBa */
			background: rgba(0, 0, 0, 0.8);/* RGBa with 0.6 opacity */
			z-index:8;
			position:absolute;
			left:0;
			min-height:85%;
			max-height:250%;
			height:120%;
			overflow:visible;
			padding-left:.4em;}
 
	  /* ==========	  ul.breadcrumbs (some cases it is ul#breadcrumbs instead)	 =================================	====== */
	       			  
		div#secondaryNav ul { /*	changes style of secondary nav elements for ***MOBILE***  */
			margin-bottom:-3em;}
				  
		div#secondaryNav.mobileSecNavVisible ul { /*	changes style of secondary nav elements for ***MOBILE***  */
			margin-bottom: 0;}
           
	  /* ==========	li#topDept    a (needs to be only visible item in mobile before menu-expand) 	=============================	====== */
	   
		div#secondaryNav li#topDept {
			position:relative;
			left:0 !important;
			display:block;
			margin-top: 0;
			padding-bottom:1.2em;}	
			
		div#secondaryNav li#topDept a {
		/*	background: url(/includes/images/arrow-down-blue.png) no-repeat scroll center left 30%;   */}	  
			
		 div#secondaryNav li#topDept {
			 border-bottom: 1px solid rgb(209, 211, 210); /*  */}
		  
		 div#secondaryNav li:first-child a {
			 color:#017db0;}
		   
		 li#topDept.mobileSecNavLink.mobileSecNavVisible a {
			 color:#fff;
			/* background: url(/includes/images/arrow-up-blue.png) no-repeat scroll center left 30% !important;  */} 
		  		
		  div#secondaryNav li#topDept.mobileSecNavVisible {
			  border-bottom: 1px solid rgb(61, 68, 79);}	
		
		
		
				div#secondaryNav li#topDept a:after {/* changes style of secondary nav elements for mobile  */
				   width:20px;
				   display:inline-block;
				   content:" . ";
				   color:#fff;
				   font-size:xx-small;
				   background: url(/includes/images/arrow-down-blue.png) right center no-repeat;}	
			  
			  div#secondaryNav li#topDept.mobileSecNavLink.mobileSecNavVisible a:after {/*	sets arrow for secondary nav mobile menu  */ 
				   color:#2b313a;
				   background: url(/includes/images/arrow-up-blue.png) right center no-repeat;}		
		
		
		
		
						
	  /* ==========		li#mainDept    a 	 =================================	====== */
						
		  div#secondaryNav li#mainDept 	{
			  border-bottom: 1px solid #576170;/*  */
			  padding-bottom: 1em;
			  margin:0em 0em 0em .65em; /*  */ }	
					  
	  /* ==========	 	li     a	 =================================	====== */
			
		  div#secondaryNav ul.breadcrumbs li {/*hide secondary nav links off screen until menu expands */
			  position:absolute; 
			  left:-1000px;}
			
		  div#secondaryNav li { /*changes style of secondary nav elements for ***MOBILE***	  */
			  position:relative;
			  padding-left:.8em;
			  z-index:131;}
				  
		  div#secondaryNav ul.breadcrumbs li.mobileSecNavVisible { /* changes style of secondary nav elements for ***MOBILE***  */
			  position:relative;
			  background: rgb(43, 49, 58);/* Fallback for web browsers that doesn't support RGBa */
			  background: rgba(43, 49, 58, 1);/* RGBa with 0.6 opacity */
			  left:0;		
			  line-height:2em;} 			  
				  
		  div#secondaryNav ul.breadcrumbs li.mobileSecNavVisible a, 
		  div#secondaryNav dt.mobileSecNavVisible a, 
		  div#secondaryNav dd.mobileSecNavVisible a,
		  div#secondaryNav li#current dt.curDept.mobileSecNavVisible  {
			  color:#fff;}
		div#secondaryNav li#current dt.curDept.mobileSecNavVisible{ padding:.5em;}	  
			
			
			
			

			
			

			
 li#topDept.mobileSecNavVisible a:hover,
 li#mainDept.mobileSecNavVisible a:hover,
 li.mobileSecNavVisible a:hover,
 li.curDept.mobileSecNavVisible a:hover,
 li#topDept.mobileSecNavVisible a:focus,
 li#mainDept.mobileSecNavVisible a:focus,
 li.mobileSecNavVisible a:focus,
 li.curDept.mobileSecNavVisible a:focus,			  
		
		div#secondaryNav dt.mobileSecNavVisible:hover, 
		div#secondaryNav dd.mobileSecNavVisible:hover, 
		div#secondaryNav h2.mobileSecNavVisible:hover,
		div#secondaryNav dt.mobileSecNavVisible:focus, 
		div#secondaryNav dd.mobileSecNavVisible:focus, 
		div#secondaryNav h2.mobileSecNavVisible:focus {/* used to style hover state for dropdown menu links .. for  ***ALL*** */
			color: #fff;/*  */
			text-decoration: none;/*  */
			background-color: #646e7d;/*  */}	  
			
	#ContactUs>dl>dt.mobileSecNavVisible:hover,
    #ContactUs>dl>dd.mobileSecNavVisible:hover,	
	#ContactUs>dl>dt.mobileSecNavVisible:focus,
    #ContactUs>dl>dd.mobileSecNavVisible:focus {	
	
			background-color: #2b313a;/*  */}
			
					  
div#secondaryNav li#current dt a:focus, div#secondaryNav li#current dt a:hover 	{/* used to style hover state for dropdown menu links .. for  ***ALL*** */
			color: #ebebeb;/*  */
			text-decoration:underline;
			background-color: #f04137;/*  */}	 		  
			  
			  
						
	  /* ==========	 	li.curDept    a	 =================================	====== */
	  /* ==========		li#current 	 =================================	====== */
	  /* ==========	 	 dl.mobileSecNavVisible  ================================= ====== */
		  
		  div#secondaryNav li#current dl { /*	changes style of secondary nav elements for ***MOBILE***  */
			  padding:0;
			  margin:0;}	 
			
		  div#secondaryNav li#current dl:after { /*clearfix for container of current link item */
			 height:0; 
			 content: ""; 
			 display:block; 
			 clear:both; 
			 visibility:hidden;}
					 
	  /* ==========	  dt.mobileSecNavLink mobileSecNavVisible    a (currently the last visible item in mobile before menu-expand) ====== */
 
		  div#secondaryNav li#current dt {/*	changes style of secondary nav elements for current selected item  for ***MOBILE***  */
			  float:left; 
			  width:100%; /* <-- box display  whole width of screen	  */
			  position:relative;/*	  */
			  margin:-2px 8px -1px 8px;  /*	 <-- helps box to be positioned closer to rest of nav */
			  padding:0; /*	if not 0, adds way too much padding  */
			  -webkit-user-select: none; /*	  */
			  -khtml-user-select: none; /*	  */
			  -moz-user-select: -moz-none; /*	  */
			  -o-user-select: none; /*	  */
			  user-select: none; /*	  */
			  left:0; /*	<-- keeps item visible when set to 0, otherwise it joins rest of secNav off screen  */}
  
		  div#secondaryNav dt {/*hide secondary nav links off screen until menu expands */
			  position:absolute; 
			  left:-1000px; }
 
		  #secondaryNav>div:first-of-type>ul.breadcrumbs dt a, 
		  #secondaryNav>div:first-of-type>ul#breadcrumbs dt a {/*	changes style of secondary nav breadcrumb elements for ***MOBILE***  */
			 -webkit-tap-highlight-color: rgba(245,236,125,1); /*	<-- should probably move to topDept style  */
			  width:100%;	 
			  height:100%;	
			  padding:.4em;}
			  
		 div#secondaryNav dt.mobileSecNavVisible {/*	changes style of secondary nav elements for ***MOBILE***  */
			  color: #fff;
			  border:none; 
			  position:relative;
			  background: rgb(43, 49, 58);/* Fallback for web browsers that doesn't support RGBa */
			  background: rgba(43, 49, 58, 1);/* RGBa with 0.6 opacity */
			  left:0;
			  line-height:inherit;
			  padding:.5em;} 
			  
	  /* ==========	 	 dd.mobileSecNavVisible    a	 ======================================= */
                  
		  div#secondaryNav dd  {/*hide secondary nav links off screen until menu expands */
			  position:absolute; 
			  left:-1000px;}
					
		  div#secondaryNav li#current dd a, 
		  div#secondaryNav dd a  { /*	changes style of secondary nav elements for ***MOBILE***  */
			  padding-top:8px; 
			  padding-bottom:8px; 
			  width:inherit; 
			 -webkit-user-select: text; 
			 -khtml-user-select: text; 
			 -moz-user-select: -moz-text; 
			 -o-user-select: text; 
			 user-select: text;}
				  
		  div#secondaryNav dd.mobileSecNavVisible   { /* changes style of secondary nav elements for ***MOBILE***  */
			  position:relative;
			  background: rgb(43, 49, 58);/* Fallback for web browsers that doesn't support RGBa */
			  background: rgba(43, 49, 58, 1);/* RGBa with 0.6 opacity */
			  left:0;
			  line-height:inherit;} 
		  
		  div#secondaryNav dd.mobileSecNavVisible {/*	changes style of secondary nav elements for ***MOBILE***  */
			  clear:both;}
		  
		  div#secondaryNav li#current dd.mobileSecNavVisible {/*	changes style of secondary nav elements for ***MOBILE***  */ 
			  padding-right:8px;}
		  
		  div#secondaryNav li#current dd:last-child { /* */
			  border-bottom: 1px solid #576170;/*  */ 
			  padding: 0px 1.65em;
			  margin:0em 0em 0em .65em;}
		  
		  div#secondaryNav li#current dd a,
		  div#secondaryNav dd a {
			  /*	sets font size for secondary nav menu for ***MOBILE***  */
			  font-size:130%;}
		  
	  
	  /* ==========	  h2.giving mobileSecNavVisible a, h2.hepburn mobileSecNavVisible a	 =============
	  	=============		these h2s are the extra "button-like-nav" under the left nav 
							.. used to be yellow boxes in old design		============= */

		div#secondaryNav h2 {/*hide secondary nav links off screen until menu expands */
			position:absolute; /*	  */
			left:-1000px; /*	  */}
		
		div#secondaryNav h2.mobileSecNavVisible { /* changes style of secondary nav elements for ***MOBILE***  */
			position:relative;
			background: rgb(43, 49, 58);/* Fallback for web browsers that doesn't support RGBa */
			background: rgba(43, 49, 58, 1);/* RGBa with 0.6 opacity */
			left:0;} 
		
		div#secondaryNav h2.mobileSecNavVisible a{ /*	changes style of secondary nav elements for ***MOBILE***  */
			display:block;
			line-height:2em;	
			padding-top:8px; 
			padding-bottom:8px; 
			width:inherit; 
			-webkit-user-select: text; 
			-khtml-user-select: text; 
			-moz-user-select: -moz-text; 
			-o-user-select: text; 
			user-select: text; }
		
		div#secondaryNav h2.mobileSecNavVisible,
		div#ContactUs 
		 {/*changes style of secondary nav elements for ***MOBILE***	  */
			margin:0;}

		
		div#secondaryNav h2.mobileSecNavVisible a, 
		div#ContactUs dt.mobileSecNavVisible, 
		div#ContactUs dd.mobileSecNavVisible  {/*	changes style of secondary nav elements for ***MOBILE***  */
			color: #fff;
			border:none;}
		
		div#ContactUs dt.mobileSecNavVisible, 
		div#ContactUs dd.mobileSecNavVisible{
			padding:.5em 0 2em .5em !important;}
			
		#secondaryNav>div>h2:last-of-type {
			padding-bottom:2em;}

	  
	  /* ==========================================================================
			  BEGIN  --.profile, .featured, p.callout -- OTHER ELEMENTS -- END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules -- END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER	 -- END 
	  ========================================================================== */
		div#links_prime,
		div#links_util {
			width: 90%;}
		
		div#copyright {
			width: 80%;}
			
			
	  /* ==========================================================================
			  BEGIN  --  LAYOUT ELEMENTS -- END
	  ========================================================================== */
	  
	  div#siteContentContainer {
		  margin: /* 0.5em */ 2.95em 0 .32em .75em !important;
		  width:96%;}
	  
	  
	  
	  
}/*/mediaquery*/
  
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/*
48em
768px === default iPad portrait screen width */			
/*	breakpoints based on zivtech breakpoints		*/	
/*	@media (min-width: 75em) /* 1200px ÷ 16   for default BMC layout width*/
/*	@media (min-width: 65.625em) /* 1050px ÷ 16 for narrow desktop browsers and iPad landscape*/ 
/*	@media (min-width: 60em) /* 960px ÷ 16 iPad landscape*/ 
/*	@media (min-width: 50em) /* 800px ÷ 16 iPad portrait*/  
/*	@media (min-width: 48em) /* 768px ÷ 16 iPad portrait*/ 
/*	@media (min-width: 37.5em) /* 600px ÷ 16 smaller than tablet*/ 				
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media (max-width: 48em){
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteHeader  -- end
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header -- end
	  ========================================================================== */
			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */	
	    
	  /* ==========================================================================
			   BEGIN util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END 
	  ========================================================================== */

	  /* ==========================================================================
			 BEGIN dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */

	  /* ==========================================================================
			  BEGIN prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav -- end
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- span.factnumber, div.profile, div.featured, p.callout	-- OTHER ELEMENTS
	  ========================================================================== */
			  strong.statistics {/*		changes font size for ***MOBILE***   */
				  font-size:.5em;}
			  
			  span.factnumber {/* changes line height of fact number for about page	  */
				  line-height: .625em;}
			  
			  div#siteContentContainer div.profile img, 
			  div#siteContentContainer div.featured img {	/*	sets element style for ***MOBILE***  */ 
				  float:left;
				  padding-bottom:.5em;}
			  
			  div#siteContentContainer div.profile p,
			  div#siteContentContainer div.featured p, 
			  div#siteContentContainer div.profile h6,
			  div#siteContentContainer div.featured h6 {/*sets element style for ***MOBILE***	  */ 
				  padding-top:.46875em;}
			  
			  div#siteContentContainer div.profile p.source:after, 
			  div#siteContentContainer div.featured p.source:after, 
			  div#siteContentContainer div.profile span a.more:after, 
			  div#siteContentContainer div.featured span a.more:after{/*	sets element style for ***MOBILE***  */
				  content: ".";
				  display: block;
				  clear: both;
				  visibility: hidden;
				  line-height: 0;
				  height: 0;}
			  
			  #siteContentContainer ul li, 
			  #siteContentContainer ol ul li {/*	sets list element style for ***MOBILE***  */ 
				  margin-bottom:.5em;}
			  
			  #siteContentContainer p.callout {/*sets element style for ***MOBILE*** 	  */
				  padding:0;}
			  
			  #siteContentContainer p.callout a {	/*	sets element style for ***MOBILE***   */ 
				  display:block;
				  width:inherit;
				  padding: 0.375em 0.4375em;}
			  
			  #siteContentContainer p.callout a:after {/*sets element style for ***MOBILE*** 	  */
				  content:"»";
				  float:right;
				  color:#005496;
				  font-size:.78125em;}
				  
			  div#siteContentContainer div.last   {/* background #fff for Contribute   */
				  margin-left: .75em; }
				  
				  

	  
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules
	  ========================================================================== */
			  /*  ****************  BEGIN -- tabContentBox style  -- as used on Library tridget  */
				
					
					
		div#tabContentBox ul.tabs li a { /*styles tabs with borders and background image */
			padding: 0 1% 0 1%;
			background-image:none;}
				
		div#tabContentBox ul.tabs li a:hover { /*hover styles for tabs */
			background-image:none;
			background-color:#FFF;}
				
		div#tabContentBox ul.tabs li.selected a { /*selected tab style */
			padding: 0 1% 0 7%;
			background: white;
			background: #ffffff url(/includes/images/magnify_active.png) no-repeat;}
					   
		div#tabContentBox ul.tabs li.selected a:hover { /*selected tab style hover */
			padding: 0 1% 0 7%;
			background: #ffffff url(/includes/images/magnify_active.png) no-repeat;}
			
					
					
					
					
					
					
					
					
					
					
					
			  /*  ****************  END -- tabContentBox style  -- as used on Library tridget  */
			  /*  ****  BEGIN -- OLD .slideshow-module style  -- feature box with pics and info and numbered tabs to goto next slide  */
				
				#siteContentContainer .slideshow-module a.btn {/* sets feature blue-box slideshow element style for ***MOBILE***  */
					font-size:.9375em;}
				
				#siteContentContainer .slideshow-module p, 
				#siteContentContainer .slideshow-module.video-player p {/*	sets feature blue-box slideshow element style for ***MOBILE***  */
					width: 55%;
					margin-left:15px !important;}
				
				#siteContentContainer .slideshow-module .learnmore {/*	sets feature blue-box slideshow element style for ***MOBILE***  */
					margin-bottom: .625em;
					font-size:.75em;
					line-height:.75em;}
				
				#siteContentContainer .slideshow-module ul.pipelist {/*	sets feature blue-box slideshow element style for ***MOBILE***  */ 
					height:auto;
					width:auto;
					font-size:150%;}
				
				#siteContentContainer .slideshow-module li a {/* sets feature blue-box slideshow element style for ***MOBILE***  */
					font-size:.625em;
					padding:4px 6px;}
				
				#siteContentContainer .slideshow-module .module-controls {/* sets feature blue-box slideshow element style for ***MOBILE***  */
					width:auto;}
			  /*  **** END -- OLD  .slideshow-module style  -- blue feature box with pics and info and numbered tabs to goto next slide  */
			  
			  
	  /* ==========================================================================
			  END  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER -- end
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteWrapper, div#siteContentContainer
					  div#siteContentContainer div.one-sixth, 
					  div#siteContentContainer div.one-quarter, 
					  div#siteContentContainer div.one-third,  
					  div#siteContentContainer div.half, 
					  div#siteContentContainer div.two-thirds, 
					  div#siteContentContainer div.three-quarters, 
					  div#siteContentContainer div.whole, 
					  div#siteContentContainer div.pictextlist
					  img
					  -- LAYOUT ELEMENTS
	  ========================================================================== */
			  div#siteWrapper {/*	changes width for layout elements  */
				  width: 100%;}
					  
			  div#siteContentContainer {/* changes width for layout elements  */
				  width: 98%; }
			  
			  div#siteContentContainer div.two-thirds {/* changes width for layout elements  */
				  width: 60%;}
			
			  div#siteContentContainer div.one-third {/* changes width for layout elements  */
				  width: 33%;}


}/*/mediaquery*/

		
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
@viewport{ zoom:1.5;} /* for IE10 Metro for Surface  */



/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/*
37.5em
600px  === default smaller than tablet screen */
 
/*	breakpoints based on zivtech breakpoints		*/	
/*	@media (min-width: 75em) /* 1200px ÷ 16   for default BMC layout width*/
/*	@media (min-width: 65.625em) /* 1050px ÷ 16 for narrow desktop browsers and iPad landscape*/ 
/*	@media (min-width: 60em) /* 960px ÷ 16 iPad landscape*/ 
/*	@media (min-width: 50em) /* 800px ÷ 16 iPad portrait*/  
/*	@media (min-width: 48em) /* 768px ÷ 16 iPad portrait*/ 
/*	@media (min-width: 37.5em) /* 600px ÷ 16 smaller than tablet*/ 				
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media  (max-width: 37.5em) {
		  
	  /* ==========================================================================
			  BEGIN  -- div#siteHeader  -- end
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header -- end
	  ========================================================================== */
 			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
			  /************************BEGIN	sets Google mini search ***************************  */	
			  /*************************	results element styles for ***MOBILE*** *****************  */
				div.g_header tbody, 
				div.g_header tbody tr {
					/*	sets Google mini search results element styles for ***MOBILE***  */
					width:300px !important;}
				
				.g_header table, 
				.g_header table tbody * {/*	sets Google mini search results element styles for ***MOBILE***  */
					max-width:100% !important;}
				
				.g_header form[name="gs"] input[name="q"] { /*	sets Google mini search results element styles for ***MOBILE***  */ 
					position:relative;
					left:-10px;
					top:-20px;
					font-size:.75em;
					height:35px !important;
					width:180px !important;}
				
				.g_header form[name="gs"] input[name="btnG"] {
					/*	sets Google mini search results element styles for ***MOBILE***  */
					width:auto;
					position:relative;
					left:-200px;
					top:20px;
					font-size:.5625em;}
				
				div.g_header table tbody tr td form table tbody tr td table tbody tr td[nowrap="1"] {/*sets Google mini search results element styles for ***MOBILE***	  */
					width:0 !important;}
				
				div.g_header table tbody tr td form table tbody tr td table tbody tr td[nowrap="1"] a {/* sets Google mini search results element styles for ***MOBILE***  */ 
					position:relative !important;
					margin-left:-140px !important;
					top:0px !important;
					width:200px !important;}
				
				div#search_links {/*sets Google mini search results element styles for ***MOBILE***  */
					position:relative;
					top:0px;
					float:none;}
				
				div#search_links a#adv_search_link, 
				div#search_links a#search_tips_link {/*	sets Google mini search results element styles for ***MOBILE***  */
					clear:right;}
				
				#siteContent table td {/*	sets Google mini search results element styles for ***MOBILE***  */
					padding:0px !important;}
				
				div.g_results table {/*	sets Google mini search results element styles for ***MOBILE***  */
					font-size:14px;}
				
				div.g_results table, 
				div.g_results td.s, 
				div.g_results p.g {	/*	sets Google mini search results element styles for ***MOBILE***  */ 
					width:99% !important;}
				
				div.g_results_container span.s {/*	sets Google mini search results element styles for ***MOBILE***  */
					width:99%;
					font-size:14px;}
				
				table#sortby {/* sets Google mini search results element styles for ***MOBILE***  */
					width:99%;}
				
				table#sortby td[align="right"] span.s {	/*	sets Google mini search results element styles for ***MOBILE***  */
					padding-left:15px;} 
			  /************************ END sets Google mini search ***************************  */	
			  /*************************	results element styles for ***MOBILE*** *****************  */
			  
			  
			  
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */	  
	  /* ==========================================================================
			   BEGIN util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			 BEGIN dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	END 
	  ========================================================================== */
	
	  
	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav
	  ========================================================================== */
		div#secondaryNav.mobileSecNavVisible {
			 /* height for modal overlay */
			 height:250%;}
			 
		div#secondaryNav>div:first-of-type>ul.breadcrumbs:before, 
		div#secondaryNav>div:first-of-type>ul#breadcrumbs:before {
			 /*hides breadcrumbs for ***MOBILE***	  */
			 display:none !important;}
		
		div#secondaryNav li#current dd a,
		div#secondaryNav dd a {
			/*	sets font size for secondary nav menu for ***MOBILE***  */
			font-size:130%;}
				  
				  
  
	  /* ==========================================================================
			  BEGIN  -- span.factnumber, div.profile, div.featured, p.callout	-- OTHER ELEMENTS
	  ========================================================================== */
		.cycleme img {
			 /*	changes width of image for jquery cycle js  */ 
			 width:99%;}
		
		#siteContentContainer select[name="homestate"], 
		#siteContentContainer select[name="homecountry"], 
		#siteContentContainer select[name="mailstate"], 
		#siteContentContainer select[name="mailcountry"], 
		#siteContentContainer select[name="activity1"], 
		#siteContentContainer select[name="activity2"], 
		#siteContentContainer select[name="major1"], 
		#siteContentContainer select[name="major2"], 
		#siteContentContainer select[name="citizencountry1"], 
		#siteContentContainer select[name="citizencountry2"], 
		#siteContentContainer select[name="ethnicity"] { /*	sets max width for form fields  */
			 max-width:180px;}
			 
		th, td  {/*	helps tables not exceed page width in mobile  */
			 max-width:180px; 
			 padding:0 !important;}
	
		
	object.flickrss,  
	object.flickrss embed,
	iframe.youtube   {
		width:99% !important; 
		padding:1%; 
		height:27em;}
		
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules -- END
	  ========================================================================== */	  
	 		#siteContentContainer .slideshow-module{
				width:85%;}
			
			#siteContentContainer .slideshow-module p, 
			#siteContentContainer .slideshow-module.video-player p {
				 /*	sets feature blue-box slideshow element style for ***MOBILE***  */
				 float:left;
				 width: 95%;}
				 
			div#tabContentBox div.tabcontents input[type="text"], 
			input[type="password"], 
			textarea {
				width: 75%;}		 
				 
			div.blog-module-one .wrap  {
				width: 95%;}
	
					  /*  ****************  BEGIN -- tabContentBox style  -- as used on Library tridget  */
				
		div#tabContentBox ul.tabs li a {
    	    font: 0.75em/3em Arial,Helvetica,Sans-serif;}			
					
		div#tabContentBox ul.tabs li a { /*styles tabs with borders and background image */
			padding: 0 3%;
			background-image:none;}
				
		div#tabContentBox ul.tabs li a:hover { /*hover styles for tabs */
			background-image:none;
			background-color:#FFF;}
				
		div#tabContentBox ul.tabs li.selected a { /*selected tab style */
			padding: 0 3%;
			background-image:none;
			background-color:#FFF;}
					   
		div#tabContentBox ul.tabs li.selected a:hover { /*selected tab style hover */
			padding: 0 3%;
			background-image:none;
			background-color:#FFF;}
			
					
					
					
					
					
					
					
					
					
					
					
			  /*  ****************  END -- tabContentBox style  -- as used on Library tridget  */			
		
	   	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER
	  ========================================================================== */
		div#footer_wrap {
			padding-bottom: 150px;}
		
		div#links_wrap {
			width: 100%;
			clear: both;}
		
		div#links_wrap #left-footer {
			clear: both;
			width: 100%;}
		
		div#links_prime {
			clear: both;} 
		
		div#links_util {
			clear: both;}
		
		div#copyright {
			position: absolute;
			bottom: -595px;
			width: 100%;} 
		
		div#cta_wrap {
			clear: both;
			position: relative;
			width: 100%;
			right: 0;}

	  	  
	  /* ==========================================================================
			  BEGIN  -- div#siteWrapper, div#siteContentContainer
					  div#siteContentContainer div.one-sixth, 
					  div#siteContentContainer div.one-quarter, 
					  div#siteContentContainer div.one-third,  
					  div#siteContentContainer div.half, 
					  div#siteContentContainer div.two-thirds, 
					  div#siteContentContainer div.three-quarters, 
					  div#siteContentContainer div.whole, 
					  div#siteContentContainer div.pictextlist
					  img
					  -- LAYOUT ELEMENTS
	  ========================================================================== */
		div#siteWrapper {
			 /*	changes width for layout elements  */
			 min-width:20em;}	
		
		div#siteContentContainer {
			 /*	eliminates margin and sets text size slightly larger  */
			 -webkit-text-size-adjust: 110%;}
		
		div#siteContentContainer div.one-sixth, 
		div#siteContentContainer div.one-quarter, 
		div#siteContentContainer div.one-third, 
		div#siteContentContainer div.five-twelfths, 
		div#siteContentContainer div.half, 
		div#siteContentContainer div.two-thirds, 
		div#siteContentContainer div.three-quarters, 
		div#siteContentContainer div.whole, 
		div#siteContentContainer div.pictextlist,
		div#siteContentContainer div.two-thirds > div.one-third { /*	changes width for layout elements 	  */
			 width:95%; 
			 margin-left:0;}
			 
		div#siteContentContainer div.pictextlist div.one-third {
			 /*	changes width for layout elements 	  */
			 width:45%;}
		
		div#siteContentContainer div.pictextlist div.two-thirds{
			 /*	changes width for layout elements 	  */
			 width:90%;}

		#siteContentContainer h2 {
			font-size: 2em;
			margin: 0em 0px 0.2em;}



	
			  
}/*/mediaquery*/


/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/*
36.25em				
580px === 
*/
/*	@media (min-width: 36.25em) /* 580px ÷ 16  -- to resolve conflict of hamburger menu open position*/ 
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media (max-width: 36.25em) {
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteHeader  -- end
	  ========================================================================== */

	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header - end
	  ========================================================================== */
			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */

	  /* ==========================================================================
			  BEGIN  -- prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	  END 
	  ========================================================================== */
		.prime-nav {/* repositions order of primary nav for mobile */
    		top: -24.5em;}
			
			
	  /* ==========================================================================
			  BEGIN  -- util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
            			li a
            			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END
	  ========================================================================== */
		ul.util-nav li{/* makes util nav two column presentation */
			width:45%; }
			
			
	  /* ==========================================================================
			  BEGIN  -- dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */

		.nav > li > a.dropdown-toggle, 
		ul.dropdown-menu  > li {
			width: 100%;}


	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav -- end
	  ========================================================================== */
		/* div#secondaryNav li#topDept a {places blue down arrow on 2nd nav in mobile to indicate ability to close menu -- % helps arrow placement past text 
			background: url(/includes/images/arrow-down-blue.png) no-repeat scroll center left 45%; }*/
			
	 /*  li#topDept.mobileSecNavLink.mobileSecNavVisible a { places blue up arrow on 2nd nav in mobile to indicate ability to open menu -- % helps arrow placement past text 
			 color:#fff;
			 background: url(/includes/images/arrow-up-blue.png) no-repeat scroll center left 45% !important;}*/ 		
				  
	  /* ==========================================================================
			  BEGIN  -- span.factnumber, div.profile, div.featured, p.callout	-- OTHER ELEMENTS
	  ========================================================================== */
	  	  
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules
	  ========================================================================== */
	  	  
	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER --  END
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteWrapper, div#siteContentContainer
					  div#siteContentContainer div.one-sixth, 
					  div#siteContentContainer div.one-quarter, 
					  div#siteContentContainer div.one-third,  
					  div#siteContentContainer div.half, 
					  div#siteContentContainer div.two-thirds, 
					  div#siteContentContainer div.three-quarters, 
					  div#siteContentContainer div.whole, 
					  div#siteContentContainer div.pictextlist
					  img
					  -- LAYOUT ELEMENTS --end
	  ========================================================================== */


/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
}/*/mediaquery*/


/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/*
22em-15em				
352px-240px === switch all widths to 95-100%
				change top nav height to have logo above nav items
*/
/*	@media (min-width: 27.1875em) /* 440px ÷ 16 */ 
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media (max-width: 27.1875em){
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */
	
		.navbar-brand {/* resizes logo to accomodate search */
			padding: 0.25em 0.25em 0em 0.35em;
			margin-top: 1.5em;}

	    .navbar-brand img {/* resizes logo to accomodate search */
			width: 4.95em;}

	  /* ==========================================================================
			   END logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */

	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
	  .navbar-default .navbar-search {/* resizes  search box */
		  width: 73%;}

	  /* ==========================================================================
			  END google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */

/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
}/*/mediaquery*/




/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
/*
22em-15em				
352px-240px === switch all widths to 95-100%
				change top nav height to have logo above nav items
*/
/*	@media (min-width: 22em) /* 352px ÷ 16 */ 
/*	@media (min-width: 20em) /* 320px ÷ 16 Smartphones (portrait)*/ 
/*	@media (min-width: 15em) /* 240px ÷ old phones*/ 
/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */

@media (max-width: 22em){
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteHeader  -- end
	  ========================================================================== */
		  
	  /* ==========================================================================
			   BEGIN div.navbar 
			  		 div.navbar .navbar-default
			  	        div.navbar-header - end
	  ========================================================================== */
			 
	  /* ==========================================================================
			  BEGIN           hamburger 
          			button.navbar-toggle 
            			span.sr-only
            			span.icon-bar --	END  
	  ========================================================================== */
	  
	  /* ==========================================================================
			   BEGIN logo 
         			a.navbar-brand img  --	END 
	  ========================================================================== */

	  /* ==========================================================================
			  BEGIN google Search code   
        			div.navbar-right.navbar-search --	END 
	  ========================================================================== */
	
	  /* ==========================================================================
			  BEGIN .nav-collapse 
        			div.navbar-collapse.collapse --	END 
	  ========================================================================== */
				  
	  /* ==========================================================================
			  BEGIN  -- util-nav menu 
          			ul.nav.navbar-nav.navbar-right.util-nav  
             			li a
             			li.dropdown
              				a.dropdown-toggle 
              				b.caret --	END
	  ========================================================================== */
  
	  /* ==========================================================================
			  BEGIN  -- dropdown .. info for menu 
               			ul.dropdown-menu
               				li a--	END 
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- prime-nav menu 
          				ul.nav.navbar-nav.navbar-right.prime-nav  
          					li a --	  END 
	  ========================================================================== */
		.prime-nav {/* repositions order of primary nav for mobile */
			top: -25.15em;}
		
		ul.util-nav li {
			width: 50%;}
	  /* ==========================================================================
			  BEGIN  -- div#secondaryNav
	  ========================================================================== */
	
		div#secondaryNav.mobileSecNavVisible {
			 /* height for modal overlay */
			height:150%;
			padding-left:0em;}
		
		div#secondaryNav li {
			margin-bottom: 0em;}
	  
	  /* ==========================================================================
			  END  -- div#secondaryNav
	  ========================================================================== */	  
	  
	  /* ==========================================================================
			  BEGIN  -- span.factnumber, div.profile, div.featured, p.callout	-- OTHER ELEMENTS
	  ========================================================================== */
			
		div#siteContentContainer div.news-feed a.news-feed-thumbnail {
			margin-top:0;
			padding-right: 1em;}

		div#siteContentContainer div.blog-module-one .wrap {
			margin-left: 0;}
			
		blockquote.real {
			padding:.5em;}	
		
	  /* ==========================================================================
			  END  --  span.factnumber, div.profile, div.featured, p.callout	-- OTHER ELEMENTS
	  ========================================================================== */
	  	  
	  /* ==========================================================================
			  BEGIN  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules
	  ========================================================================== */
	  
	  /* ==========================================================================
			  END  -- .slideshow-module, #tabContentBox -- BOX_TAB_SLIDE Modules
	  ========================================================================== */
	  	  
	  /* ==========================================================================
			  BEGIN  -- div#siteFooter -- SITE FOOTER --  END
	  ========================================================================== */
	  
	  /* ==========================================================================
			  BEGIN  -- div#siteWrapper, div#siteContentContainer
					  div#siteContentContainer div.one-sixth, 
					  div#siteContentContainer div.one-quarter, 
					  div#siteContentContainer div.one-third,  
					  div#siteContentContainer div.half, 
					  div#siteContentContainer div.two-thirds, 
					  div#siteContentContainer div.three-quarters, 
					  div#siteContentContainer div.whole, 
					  div#siteContentContainer div.pictextlist
					  img
					  -- LAYOUT ELEMENTS
 ========================================================================== */
			  div#siteContentContainer div.pictextlist div.one-third,
			  div#siteContentContainer div.pictextlist div.two-thirds {
				  width:100%;}
			  div#siteWrapper {min-width: 16em;}	  
				 
	  /* ==========================================================================
			  END  --  div#siteWrapper, div#siteContentContainer
					  div#siteContentContainer div.one-sixth, 
					  div#siteContentContainer div.one-quarter, 
					  div#siteContentContainer div.one-third,  
					  div#siteContentContainer div.half, 
					  div#siteContentContainer div.two-thirds, 
					  div#siteContentContainer div.three-quarters, 
					  div#siteContentContainer div.whole, 
					  div#siteContentContainer div.pictextlist
					  img
					  -- LAYOUT ELEMENTS
	  ========================================================================== */

/* ************  ********************************** ************************** */
/* ************  ********************************** ************************** */
}/*/mediaquery*/