/*   Author: Rafal Bromirski
    www: http://paranoida.com/
    blog: http://lab.paranoida.com/

    twitter: http://twitter.com/paranoida
    dribbble: http://dribbble.com/paranoida

    Licensed under a MIT License

--------------------------------------------------------------------------------------------------------------------- */


/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */


/* Media queries
---------------------------------------- */

/* The media queries included in here are only placeholder. Modify them as your content requires */

@media only screen and (min-width: 320px) and (max-width: 480px) {
	
	h2#sectionHead_fac {
		float:none;
	}
	
	#person nav, #person span {
		margin-top:5px;
		margin-left:0;
	}
	
	#person span {
		margin-right:10px;
	}
	
}



@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#contact ul#follow li {
		padding-left:5px;
	}
	
}

/* iPhone Portrait & Landscape */
@media only screen and (min-width: 320px) and (max-width: 767px) {
	
	#mainnav, #ribbon, #breadCrumb, #mainContent hr, #tweets, .links ul, #socialmedia .max-image, .branding ul, .flex-caption:after, .multi-list .more:after {
		display:none;
	}
	
	html, body {
		background:none;
		padding:0px;
	}
	
	blockquote { padding: 3% 5%; z-index:1; }
		blockquote:before, blockquote:after { z-index:-1; }
	
	.wrapper {
		padding:0;
	}
	
	#logo {
		background-color:#73000a;
	}
		#logo a { 
			width: 185px;
			height: 45px;
			background-size: 175px 37px;
		}
	
	#logo, #ribbon {
		margin:0px;
	}
	
	#home h1, .branding h1 { font-size:1.125em;/* 18px / 16px */ margin-bottom:0; }
	
	.branding h1 {
		margin:0 0 7px 0;
		padding-left:5px;
	}
		
	.branding h2 {
		margin-bottom:5px;
	}
	
	#mainWrapper {
		box-shadow: 0 0 0 0;
		border-radius: 0;
		margin: 0px 0px 0px 5px;
		width: 98%;
	}
	
	#main, #eventsbg h2 {
		margin:0px;
	}
	
	#mainContent p#intro { margin-top: 15px; }
	
	/* Mobile Navigation */	
	
	#mobilenav {
		float:left;
		width:100%;
		top:0;
		text-align:left;
		display:none;
	}
	
	#mobilenav .toplevel, #mobilenav .historyLevel, #mobilenav .currentLevel, #mobilenav .childLevel {
		padding:0px;
		margin:0px;
		font-weight:600;
	}
    
    .toplevel > li {
        margin-left:0;
    }
	
	.toplevel li, .currentLevel .selected, .childLevel li {
		padding: 10px 10px;
	}
	
	.toplevel {
		background-color:#5a5a5a;
		box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .1);
	}
	
	.toplevel li {
		color:white;
		background:url(../img/mobile_nav_back_arrow_white.png) no-repeat 3% center;
		padding-left:30px;
	}
	
	.toplevel .sublevel {
		background-color:#A3A3A3;
		box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, .1);
	}
	
	#mobilenav .currentLevel {
		font-size:1em;
		background-image:none;
	}
	
	#mobilenav .selected a {
		color:#73000a;
	}
	
	.childLevel li {
		border-top:1px solid #FFF;
		margin:0px;
		background: #ECECEC url(../img/mobile_nav_forward_black.png) no-repeat 95% center;
	}
	
	#mobilenav .childLevel li a {
		color:#000;
	}
	
	#mobilesearch {
		background-color:#5b5d5c;
		padding: 5px 1.5%;
		overflow:auto;
	}
	
	#mobilesearch input[type="text"] {
		padding:.4em;
		width:70%;
		float:left;
		border:none;
	}
	
	#mobilesearch button {
		float:left;
		width:20%;
		color:white;
		background-color:#3b3b3d;
		font-weight: 600;
		border:none;
		margin-left: 10px;
		padding:.4em;
	}
	
	#mobilenav ul{
		box-shadow:0 1px 3px #ccc;
	}
	
	#mobilenav a{
		display:block;
		width:100%;
		line-height:20px;
		border:0;
		margin:0;
		color:white;
	}
	
	#mobilenav a:hover,a.current{
	border:0;
	}
	
	#toggle{
		color:#fff;
		line-height:50px;
		font-weight:700;
		text-align:center;
		cursor:pointer;
		width:65px;
		height:50px;
		display:block;
		float:right;
		background-color:#474747;
		padding-right: 10px;
	}
	
	.expand {
		background:url(../img/mobile_nav_expand.png) no-repeat 90% center;
	}
	
	.collapse {
		background:url(../img/mobile_nav_collapse.png) no-repeat 90% center;
	}
	
	 /* Flexslider */
	 .slides {
		 margin:0px;
	 }
	 
	#home + .flex-container .lightbox-video:after { width: 50px; height:50px; background-size:50px 50px; top: 100px; }
	
	.flexslider .slides img {
		max-width:100%;
		border-radius: 0px;
	}
	
	.flex-caption, 
	.content-slider .flex-caption {
		width:100%;
		max-width: 100%;
		position:relative;
		min-height:145px;
		z-index:0;
		right:0;
		background-color: rgba(0, 0, 0, .7);
	}
	
	.flex-caption h1, .flex-caption p,
	.content-slider .flex-caption h1, .content-slider .flex-caption p { 
		padding: 1% 2%; 
		width: 96%;
		font-size:1em; /* 16px / 16px */
		background-color: transparent;
		margin: 0px 0px;
	}
	
	.flex-caption p { font-size:.75em; /* 12px / 16px */ }
	
	.flex-caption strong {
		padding-bottom: 15px;
		font-size:1.25em; /* 20px / 16px */
		font-weight:700;
	}
	
	.flex-control-nav {
		width:100%;
		bottom:2.5%;
	}
	
	.flex-control-nav li {
		padding-right: 10px;
	}
	
	#mainContent {
		margin:0px;
		padding:0px;
		font-size:.8em;
	}
	
	#eventsbg {
		margin-top:15px;
		width:100%;
	}
	
	#eventsbg h3 {
		margin-left:5px;
	}
	
	.date {
		font-size:16px;
	}
	
	.simple-list h2, .simple-list article {
		width:100%;
	}
	
	.simple-list article span.more, .simple-list article span.external {
		line-height: 2.7em;
	}
	
	.events p {
		width:100%;
	}
	
	/* Flip container */
	
	.flip-container { width:49%; clear:none; }
	.flip-container:nth-child(2n+1) { margin-right:0; }
	
	#callout {
		width:50%;
		margin: 0 auto;
	}
	
	.multi-list img { width: 24%; }
		
	.multi-list ul { width:25%; }
	.multi-list ul li {
		line-height: 1.4em;
		text-align:left;
		padding: 5px 0px 5px 5px;
	}
		.multi-list ul li a { padding:0; }
	
/* Changed layout of buttons for items that have a thumbnail */
	.halfwidth { width:70%; }	
	.halfwidth ~ ul { width: 72%; }
	
	.multi-list .external, .multi-list .download, .multi-list .more {
		background-image:none;
	}
	
	#detail {
		padding-left:10px;
	}
	
	#contact .grid_3 {
		width:35%;
	}
	
	#contact .grid_6 {
		width:63%;
	}
	
	#contact .max-image {
		float: left;
		min-width: 100px;
		min-height:117px;
	}
	
	#contact ul#follow li {
		height:40px;
	}
	
	.dataTables_ {
		margin-top:0;
		float:left;
		text-align:left;
	}
	
	#gallery_widget {
		margin: 0 0 10px 0;
		width:100%;
	}
	
	#gallery .view {
		margin:0;
		float:left;
	}
	
	.gallery li {
		width: 33%;
	}
	
	/* Grid page */
	
	.grid li { width: 48%; }
	.grid li:nth-child(2n) { padding:0 !important; }
	.grid li:nth-child(3n) { padding-right: 4%; }
	
	#input-switch { float:left; }
	.dataTables_filter { margin-top:0; }
	
	#inner footer {
		height:auto;
		font-size:.875em; /* 14px / 16px */
	}
	
	.uniticons {
		float:left;
		clear:both;
		margin-left: 10px;
		margin-right: 0;
	}
		.uniticons li { padding-left:0; }
			.uniticons li a {
				background-image:none;
				padding-right: 15px;
				padding-left: 0px;
				border-right: 1px #CCC solid;
				margin-top: 10px;
				margin-bottom: 10px;
				line-height: 1.4em;
			}
	
	.uniticons li:last-child a { border: none; }
	
	.unit-social { position:relative; bottom: 0; }
	.unit-social:after { background:none; }
	
	#footerbg {
		background-color:#73000a;
		background-image:none;
		margin-top: 10px;
		padding-top: 15px;
		text-align: center;
	}
	
	#footerbg small, #footerbg small:last-child {
		padding-left:0px;
		margin-bottom:10px;
	}
	
	#outer {
		margin-bottom: 15px;
	}
	
	#outer h1, #outer h1 a, #footerbg small, #footerbg small a {
		color:white;
		width:100%
	}
	
	#outer h1 {
		font-size:.9375em; /* 15px / 16px */
	}
	
	#socialmedia {
		height:auto;
		padding-top: 5px;
	}
	
	
	#socialmedia .mobile {
		display:inline-block;
		margin-bottom:10px;
		width:100%;
	}
	
	ul#social {
		float:none;
		display:inline-block;
		margin: 0 auto;
		width: 265px;
	}
	
	ul#social li {
		padding-right:10px;
		padding-left:10px;
	}
	
	ul#social li a {
		opacity:1;
		background-image:url(../img/socialmedia_icons_white.svg);
	}
	
	#facebook a {
		background-position:0 0;
	}
	
	#twitter a {
		background-position:-43px 0;
	}
	
	#youtube a {
		background-position:-86px 0;
	}
	
	#linkedin a {
		background-position:-129px 0;
	}
	
	#feed a {
		background-position:-172px 0;
	}
	
	.links {
		height:auto;
		border: none;
		padding: 0;
	}
	
	.links h1 {
		text-align:center;
	}

	#mainContent table.display {
		font-size:9px;
	}
	
	table.display td {
		padding: 3px 3px;
	}

}

/* iPad less than 960 pixels */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#ribbon ul#info {
		font-size:.625em; /* 10px / 16px */
		margin-top:10px;
		margin-right: 5px;
	}
	
	#search input[type="text"]:focus {
		width:90px;
	}
	
	#home, .branding { 
		margin-left: -10px;
		padding: 0px 10px; 
	}
	
	#home h1 { font-size:2em; }
	
	#mainContent { font-size:.8125em;  /* 13px / 16px */ }
		#mainContent p#intro { font-size:1.25em; /* 20px / 16px */ }
	
	.slides { margin: 0 -10px; }
	
	.flex-caption {
		font-size:.625em; /* 10px / 16px */
	}
	
	.flex-caption b {
		bottom:60%;
	}
	
	.flex-caption span {
		top:48%;
	}
	
	.flex-control-nav {
		bottom:1.5%;
	}
	
	#mainnav {
		font-size:.875em; /* 14px / 16px */
		width:100%;
	}
	
	ul.sublevel {
		background-position:0 2%;
	}

	ul.currentlevel #selected > a::after {
		border-bottom: 14px solid transparent;
		border-top: 13px solid transparent;
	}
	
	table.display {
		font-size:12px;
	}
	
	.date {
		width:35px;
		height:35px;
	}
	
	.paddingright {
		padding:0px;
	}
	
	.multi-list article ul {
		font-size: .625em; /* 10px / 16px */
	}
	
	.multi-list ul li {
		line-height: 1.2em;
	}
	
	.external, .download, .more {
		padding:3px 30px 3px 0;
	}
	
	#contact {
		font-size:14px;
	}
	
	#contact ul#follow li {
		padding-left: 5px;
	}
	
	#mainContent table.display {
		font-size:12px;
	}
	
	#outer  {
		font-size:95%;
	}
	
	.links { margin-left: 0px; height: 470px; }
	
	#socialmedia {
		padding-right: 20px;
	}
	
	#outer .links ul li {
		font-size:.625em; /* 10px / 16px */
	}
	
	#outer h1 {
		font-size:.875em; /* 14px / 16px */
	}
	
	#tweets h1 {
		margin-right:50px;
	}
	
	ul#social li {
		padding-left:8px;
	}
}


@media only screen and (min-width: 960px) and (max-width: 1139px) {
	
	.flex-caption {
		font-size:.875em; /* 14px / 16px */
	}
	
	#mainnav {
		font-size:1em;
	}
	
	ul.currentlevel #selected > a::after {
		border-bottom: 15px solid transparent;
		border-top: 15px solid transparent;
	}
	
	#outer h1 {
		font-size: .8125em; /* 13px / 16px */
	}
	
	#tweets h1 {
		margin-right:125px;
	}
	
}

@media only screen and (min-width: 768px) { 
	
	#mobilenav, #toggle {
	display:none !important;
}
	/* Desktops (1024px+) styles go here */
}


@media screen and (max-width: 640px)
{
    /* to avoid the adjustment of fonts on iOS devices you should keep this line */
    * { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
}



/* --- print (optional) --------------------------------------------------------------------------------------------- */

	
	
	/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print { 

  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; font-weight: bold; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  
  body { font: 12pt Georgia, "Times New Roman", Times, serif; line-height: 1.3; }
  #logo:before { content: url(../img/usclogo_2color.png); }
  .branding { float:right; margin-top:-80px; width:auto; }
  .callout img { max-width:150px; }
  
 
  
  /* HIDDEN
     ----------------------------------------------------*/

  #ribbon, #logo img, #breadCrumb, .flexslider, nav, #person, #mobilenav, #toggle, #inner, #outer, .callout hgroup:before, .callout hgroup:after, video, audio, object, embed { display: none !important; }
  
  
  
  /* STRUCTURE
     ----------------------------------------------------*/
  .grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12							{ width:95%; }
  .max-image							{ max-width: 500px !important; }
  
  #contact								{ clear:both; }
  #contact .grid_6						{ width:75%; }
  #contact .grid_3 						{ width:15%; }
  #contact .max-image					{ max-width:200px; }
  
}