/*************************************************
 * Site Name: School of Public Health
 * 
 * Description: Media Queries stylesheet
 * Author: IU Communications 
 * Author URI: http://communications.iu.edu
 ************************************************/

@import url("largescreen.css") screen and (min-width: 768px);

@media screen and (max-width: 1015px) {
    
	/****************************************
	 * Feature
	 ****************************************/
	
	.js #feature li {
		max-width: none;
	}
	.js #feature li img {
		height: auto; 
	}

	/* Controls */
	#feature-buttons {
		right: 10px;
	}
	
}

@media screen and (max-width: 939px) {

    /****************************************
     * Content
     ****************************************/
    
    #content-wrap {
        display: block; 
    }
    #news #content-wrap {
        display: table; 
    }
    #content {
        display: block; 
    }
    
    
    /****************************************
     * Sidebar
     ****************************************/
     
    #sidebar {
        display: block;
        margin: 0 auto 30px auto;
        padding: 0;
        width: 80%;
    }
    
    /* Headings */
    
    #sidebar .container h1,
    #sidebar .container h2,
    #sidebar .container h3 {
        width: auto;
    }
    
    /* Photo Header */
    
    #sidebar .container .photo-header {
        text-align: center; 
    }
    #sidebar .container .photo-header img {
        float: none;
        width: 80%; 
    }
    #sidebar .container .photo-header h1,
    #sidebar .container .photo-header h2,
    #sidebar .container .photo-header h3 {
        margin: 0 0 15px 0;
        position: static;
        text-align: left;
    }
    
    /* Container */
    
    #sidebar .container {
        width: auto;    
    }
    
    /* Images */
    
    #sidebar .container img {
        margin: 0 auto 10px auto;
        width: 80%; 
    }
    
    /* Photo and Caption */

    #sidebar .container .photo-caption {
        margin: 0 auto 15px auto;
        width: 80%;
    }
    #sidebar .container .photo-caption img {
        width: 100%;    
    }
    
    /* Slideshow */

    #sidebar .container .slideshow {
        margin: 0 auto 15px auto;
        width: 80%;
    }
    #sidebar .container .slideshow .lightbox {
        width: 100%;    
    }
    
    /* Video */

    #sidebar .container .video {
        margin: 0 auto 15px auto;
        width: 80%;
    }
    #sidebar .container .video .lightbox {
        width: 100%;    
    }
    
    /* More */

    #sidebar .container .more {
        display: table;
        width: 100%;
    }
    #sidebar .container .more a {
        background-position: 98% 50%;
        width: 100%;
    }
    #sidebar .container .more a:hover {
        background-position: 98% 50%;
    }
	
	
	/****************************************
	 * People List
	 ****************************************/
	
	/* Table */
	
	#content .people-list {
		min-width: 1px;    
	}
    
	
    /****************************************
     * Search Results Form
     ****************************************/
    
    /*** Form ***/
    
    #content #results-sitesearch {
        width: auto;
    }
	
	/****************************************
     * Connect Tray
     ****************************************/

    #connect #connect-content .column:last-child {
        text-align: left;
		max-width:594px;
		display:block;
		margin:10px 0 0 0;
    }
	#connect #connect-content .column:last-child > ul > li:first-child {
		float:left;
		width:292px;
		margin:0 10px 0 0;
		padding:0;
		border:0 none;
	}
	#connect #connect-content .column > ul > li#widget-linkedin {
		float:right;
		width:292px;
	}
		
}

@media screen and (max-width: 767px) {
    
    /****************************************
     * General Formatting
     ****************************************/
    
    body:after {
        content: 'maxwidth767';
        display: none;
    }
    body {
        padding-bottom: 35px;   
    }
	
	/*** Reusable Classes ***/

	/* Wrapper */
	.wrapper {
		padding: 0 10px;
	}
	
	/* Line Break */
	.line-break {
		display: block;	
	}
    
    
    /****************************************
	 * Branding Bar
	 ****************************************/
	
	#branding-bar {
		min-height: 46px;
	}
	
	/*** Trident Tab & Campus Name ***/
	
	#branding-bar .campus {
		font-size: 1em; /* 16px (16/16) */
		line-height: 1em; /* 16px (16/16) */
	}
	#branding-bar .campus a {
		height: 40px;
		padding: 0 0 0 45px;
	}
	#branding-bar .campus img {
		left: 5px;
		width: 34px;
	}
	
	/*** Search ***/
	
	#branding-bar #cse-search {
		-webkit-transition: margin 0.8s ease-in-out, opacity 0s ease-in-out 0.8s;
  		-moz-transition: margin 0.8s ease-in-out, opacity 0s ease-in-out 0.8s;
  		-ms-transition: margin 0.8s ease-in-out, opacity 0s ease-in-out 0.8s;
  		-o-transition: margin 0.8s ease-in-out, opacity 0s ease-in-out 0.8s;
		float: left;
		height: auto;
		margin: -300% 0 0 0;
		opacity: 0;
		padding: 53px 0 36px 0;
		text-align: left;
		transition: margin 0.8s ease-in-out, opacity 0s ease-in-out 0.8s;
		width: 100%;
		z-index: 200;
	}
	#branding-bar #cse-search:target {
		margin: 0;	
		opacity: 1;
		z-index: 300;
	}
	#branding-bar #cse-search * {
		opacity: 0;	
	}
	#branding-bar #cse-search:target * {
		opacity: 1;	
	}
	#branding-bar #cse-search form {
		margin: 0 auto;
		width: 95%;	
	}
	#branding-bar #cse-search fieldset {
		display: block;
	}
	
	/* Fieldset 1 */
	#branding-bar #cse-search-fieldset1 {
		bottom: 16px;
		margin: 0 2.5%;
		position: absolute;	
		right: 36px;
	}
	
	/* Keywords */
	#branding-bar #cse-search-keywords {
		background: #d3d3d3;
		color: #000;
		padding: 0 5% 0 2%;
		width: 93%;	
	}
	#branding-bar #cse-search-keywords::-webkit-input-placeholder {
	   color: #000;
	}
	#branding-bar #cse-search-keywords:-moz-placeholder {
	   color: #000; 
	}
	#branding-bar #cse-search-keywords::-moz-placeholder {
	   color: #000;  
	}
	#branding-bar #cse-search-keywords:-ms-input-placeholder {  
	   color: #000; 
	}
	
	/* Submit */
	#branding-bar #cse-search-submit {
		background: #990000;
		margin: 0 0 0 -36px;
		text-indent: 0;
		width: 36px;	
	}
	
	/*** Toggles ***/
	
	#branding-bar .toggle {
		margin: -6px 5px 14px -4px;
	}
	#branding-bar .toggle a {
		height: 32px;
	}
	#branding-bar #cse-search:target .toggle.search.close {
		display: block;	
	}
    
    
    /****************************************
     * Header
     ****************************************/
    
    #header {
        font-size: 2.500em; /* 40px (40/16) */
        line-height: 1em; /* 40px (40/40) */
        padding: 18px 105px 15px 0;
    }
    
    
    /****************************************
     * Navigation
     ****************************************/

    #nav {
        background: #990000;
        overflow: hidden;
        padding: 15px 0;
    }
    .js #nav {
        left: -9999px;
        position: absolute;
        top: -9999px;   
    }
    .js #nav.open {
        position: static;
    }
    
    /* Menu Button */
    
    #nav-toggle a {
        background: url(../img/nav/bg-menu.gif) no-repeat;
        bottom: 0;
        display: block;
        height: 35px;
        left: auto;
        position: absolute;
        right: 12px;
        text-indent: -9999px;
        width: 83px;
    }
    #nav-toggle.open a {
        background-position: 0 -35px;
    }

    /* First Tier */
    #nav ul {
        float: left;
        font-family: "LatoBold", Arial, Helvetica, sans-serif;
        font-size: 1em; /* 16px (16/16) */
        line-height: 1.250em; /* 20px (20/16) */
        list-style: none;
        vertical-align: top;
        width: 50%;
    }
    #nav #nav-audience li {
        margin-right: 20px; 
    }
    #nav ul li.current {
        margin: 5px 0;  
    }
    #nav ul li a {
        color: #fff;
        display: block;
        padding: 3px 20px 6px 20px;
    }
    #nav ul li.current a {
        background: #e0dede;
        color: #262626; 
    }
    
    /* Second Tier */
    #nav ul li ul {
        background: #780000;
        float: none;
        font-size: 0.875em; /* 14px (14/16) */ 
        line-height: 1.286em; /* 18px (18/14) */
        padding: 10px 0 15px 37px;
        width: auto;
    }
    #nav #nav-audience li ul li {
        margin-right: 0;    
    }
    #nav ul li ul li a {
        padding: 4px 13px;
    }
    #nav ul li.current ul li a {
        background: none;
        color: #fff;    
    }
    #nav ul li.current ul li.current a {
        background: #4a0404;
        text-transform: uppercase;
    }
    
    /* Third Tier */
    #nav ul li ul li ul {
        background: #4a0404;
        font-size: 0.929em; /* 13px (13/14) */
        line-height: 1.308em; /* 17px (17/13) */
        padding: 0 0 8px 33px;
    }
    #nav ul li.current ul li.current ul li.current {
        margin: 0;
    }
    #nav ul li ul li ul li a {
        padding: 2px 10px;
    }
    #nav ul li.current ul li.current ul li a {
        background: url(../img/nav/bg-subnav-tier3-mobile.gif) no-repeat 0 10px;
        text-transform: none;
    }
    
    
    /****************************************
     * Section Header
     ****************************************/
     
    #section-header {
        float: none;    
    }
    #section-header h2 {
        background: #e0dede;
        clear: left;
        margin: 0;
        padding: 10px 30px 14px 30px;
    }
    #section-header img {
        float: left;
        height: auto;
        max-width: 100%;
        position: static;   
    }
    .landing #section-header img {
        height: auto;
    }
    
    
    /****************************************
     * Breadcrumbs
     ****************************************/
    
    #breadcrumbs {
        display: none;  
    }
    
    
    /****************************************
     * Content
     ****************************************/
    
    #content-wrap,
    .fixed-capable #content-wrap {
        padding-bottom: 90px;
    }
    #content-wrap, 
    .landing #content-wrap,
    #news #content-wrap,
	#news.landing #content-wrap {
        margin: 0;  
    }
    #content {
        padding-right: 30px;
        padding-left: 30px;
    }
    #content:last-child {
        padding-right: 30px;
        padding-left: 30px; 
    }
    #home #content,
    #home #content:last-child {
        padding-right: 0;
        padding-left: 0;    
    }
    
    
    /****************************************
     * Connect Tray
     ****************************************/
    
    #connect-wrap,
    .fixed-capable #connect-wrap {
        margin: 0;
    }
	#connect #connect-content .column > ul > li:first-child, #connect #connect-content .column > ul > li:last-child {
		margin:0;
		padding:0;
		border-bottom:0 none;
	}
    
	#connect #connect-content .column > ul > li {
		margin:0 0 10px 0;
		padding:0 0 5px 0;
		border-bottom:1px solid #fff;
	}
	#connect #connect-content .column:last-child > ul > li:first-child {
		margin:0 10px 0 0;
	}

    
    /****************************************
     * Homepage
     ****************************************/
	
    /* Content */
    
    #home #content,
    .fixed-capable #home #content {
        padding-bottom: 130px;  
    }
    
    /* Containers */
    
    #home #content .container {
		display: block;
		margin-top: 20px;
        margin-right: 0;
        width: 100%; 
    }
    
    
    /****************************************
     * People Profile
     ****************************************/
    
    #content .people-profile-header-wrap {
        margin-right: -30px;
        margin-left: -30px; 
    }
    
    /* Content */
    
    #content .people-profile-header {
        padding-left: 30px;
    }
    
    /* Photo */

    #content .people-profile-header-photo {
        margin-right: 30px; 
    }
	

	/****************************************
	 * Footer
	 ****************************************/
	
	/*#footer-wrap,
    .fixed-capable #footer-wrap {
        background: none;
        margin-top: 0;
        padding-top: 9px;
        text-align: center;
    }*/
	#footer {
		border-top: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#footer .wrapper {
		padding: 0;	
	}
	#footer .tagline {
		font-size: 1.636em; /* 18px (18/11) */
		line-height: 1em; /* 18px (18/18) */
		margin: 0 0 10px 0;
		max-width: none;
		padding: 5px;	
		position: static;
		width: auto;	
	}
	#footer .copyright {
		padding: 0;
	}
	#footer .internal {
		margin: 0 0 15px 0;	
		position: static;
	}
	#footer .block-iu { 
		float: none;
		margin: 0 auto 5px auto;
	}
    
}

@media screen and (max-width: 680px) {
    
    /****************************************
     * Content
     ****************************************/
    
    #content-wrap {
        display: block; 
    }
    #content {
        display: block; 
    }
    
    
    /****************************************
     * Sidebar
     ****************************************/
     
    #sidebar {
        margin: 0 30px 30px 30px;
        width: auto;
    }
    
}


@media screen and (max-width: 620px) {
	
	/****************************************
     * General Formatting
     ****************************************/
    
    body:after {
        content: 'maxwidth620';
        display: none; 
    }
	
	/****************************************
     * Connect Tray
     ****************************************/
    
    #connect #connect-bar {
        background: none;
        margin-left: 0;
        left: 0;
        top: 0;
        width: 100%;
    }
    #connect #connect-bar ul {
        left: 10px;
    }
    #connect #connect-bar #connect-toggle a {
        right: 10px;
    }
    #connect #connect-content {
        padding: 20px 0 15px 0;
        text-align: left;
		width:90%;
    }
    #connect #connect-content .column {
        display: block;
        margin: 0 auto;
		width:100%;
		max-width: 520px;
    }
    #connect #connect-content .column:last-child {
        margin-right: auto; 
        margin-left: auto;
    }
    #connect #connect-content .widget {
        display: none;  
    }
    #connect #connect-content .widget.active {
        display: block; 
    }
	#connect #connect-content .column > ul > li {
		margin:0;
		padding:0;
		border-bottom:0 none;
	}
	#connect #connect-content .column:last-child > ul > li:first-child {
		width:100%;
	}
	#connect #connect-content .column:last-child > ul > li:first-child iframe {
		width:100%;
		height:300px;
	}
	#connect #connect-content .column > ul > li#widget-linkedin {
		float:none;
		width:100%;
	}
	#connect #connect-content .column:last-child > ul > li:first-child iframe {
		width:100%;
		height:300px;
	}
	#connect #connect-content .column iframe#widget-facebook {
		width:100%;
	}
	

	#connect #connect-bar ul li.active a {
        background: url(../img/connect/icons-active.png) no-repeat;
	}
	#connect #connect-bar ul li#connect-twitter.active a {
		background-position: 0 0;
	}
	#connect #connect-bar ul li#connect-facebook.active a {
		background-position: -30px 0;
	}
	#connect #connect-bar ul li#connect-linkedin.active a {
		background-position: -90px 0;
	}
	#connect #connect-bar ul li#connect-youtube.active a {
		background-position: -60px 0;
	}
	#connect #connect-bar ul li#connect-flickr.active a {
		background-position: -120px 0;
	}
    
}


@media screen and (max-width: 600px) {
    
    /****************************************
     * General Formatting
     ****************************************/
    
    body:after {
        content: 'maxwidth600';
        display: none;
    }
    
    
    /****************************************
     * Header
     ****************************************/
    
    #header {
        font-size: 1.625em; /* 26px (26/16) */
        line-height: 1.154em; /* 30px (30/26) */
        padding: 18px 105px 6px 11px;
        text-align: left;
    }
    
        
    /****************************************
     * Navigation
     ****************************************/

    #nav ul {
        float: none;
        width: 100%;
    }
    #nav ul li a {
        padding-left: 13px;
    }
    #nav ul li ul {
        padding-left: 30px;
    }
    
    /* Audience Navigation */

    #nav #nav-audience {
        background: url(../img/nav/bg-audience-mobile.gif) no-repeat 0 100%;
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
    }
    #nav #nav-audience li {
        margin-right: 0;    
    }
    
    
    /****************************************
     * Section Header
     ****************************************/
     
    #section-header img {
        margin: 0 -25%;
        max-width: 150%;    
    }
    
    
    
    
    
    /****************************************
     * Homepage
     ****************************************/
    
    /* Feature */
    
    #feature li .feature-content {
        font-size: 0.875em; /* 14px (14/16) */
        line-height: 1.143em; /* 16px (16/14) */
    }
    #feature li .feature-content p {
        padding-right: 10px;
		padding-left: 10px;
    }
    #feature li .feature-content .more {
        font-size: 1em; /* 14px (14/14) */
        padding-right: 0;
    }
	#feature li .feature-content .more a {
		padding-right: 10px;
		padding-left: 10px;
	}
    
    /* Content */
    
    #home #content,
    .fixed-capable #home #content {
        padding-bottom: 80px;   
    }
    
}


@media screen and (max-width: 480px) {
    
    /****************************************
     * General Formatting
     ****************************************/
    
    body:after {
        content: 'maxwidth480';
        display: none;
    }
    
    
    /****************************************
     * Section Header
     ****************************************/
     
    #section-header h2 {
        font-size: 2.000em; /* 26px (26/13) */
        line-height: 1.154em; /* 30px (30/26) */
        padding-right: 15px;
        padding-left: 15px;
    }
    
    
    /****************************************
     * Content
     ****************************************/
    
    #content {
        padding-right: 15px;
        padding-left: 15px;
    }
    #content:last-child {
        padding-right: 15px;
        padding-left: 15px; 
    }
    #home #content,
    #home #content:last-child {
        padding-right: 0;
        padding-left: 0;    
    }
    
    /* Tables */
    
    #content table {
        width: 100%;    
    }
    #content table th,
    #content table td {
        border-left: none;
        display: block;
    }
    #content table tr:last-child th, 
    #content table tr:last-child td {
        border-bottom: 1px solid #bbbbb9;   
    }
    
    /* Photo and Caption */

    #content .photo-caption-small,
    #content .photo-caption-large {
        max-width: 100%;
    }
    #content .photo-caption-small img,
    #content .photo-caption-large img {
        height: auto;
    }
    #content .photo-caption-small img,
    #content .photo-caption-small iframe, 
    #content .photo-caption-small video,
    #content .photo-caption-small .mejs-container,
    #content .photo-caption-large img,
    #content .photo-caption-large iframe, 
    #content .photo-caption-large video,
    #content .photo-caption-large .mejs-container { 
        width: 100%;    
    }
    
    /* Generic Classes */

    #content .float-left,
    #content .float-right {
        float: none;
        margin: 0 0 15px 0; 
    }
    
    /* Generic Classes */
    
    #content:last-child .float-left,
    #content:last-child .float-right {
        float: none;
        margin: 0 0 15px 0; 
    }
    
    
    /****************************************
     * Sidebar
     ****************************************/
    
    #sidebar {
        margin: 0 15px 30px 15px;   
    }
    
    /* Photo Header */
    
    #sidebar .container .photo-header img {
        width: 100%;    
    }
    
    /* Images */
    
    #sidebar .container img {
        width: 100%;    
    }
    
    /* Photo and Caption */

    #sidebar .container .photo-caption {
        width: 100%;    
    }
    
    /* Slideshow */

    #sidebar .container .slideshow {
        width: 100%;    
    }
    
    /* Video */

    #sidebar .container .video {
        width: 100%;    
    }
	
	
	/****************************************
	 * Feature
	 ****************************************/
	 
	/* Content */
	#feature {
		background: #8D0700;	
	}
	#feature li .feature-content {
		background: #fff;
		clear: both;
		position: static; 
	}
	
	/* More */
	#feature li .feature-content .more {
		background: #8D0700; 
	}
	
	/* Javascript On */
	.js #feature li .feature-content {
		display: block !important;	
	}
	.js #feature li .feature-content .more a {
		text-indent: -9999px;	
	}
	.js #feature li.active .feature-content .more a {
		text-indent: 0;	
	}
	.js #feature li .overlay {
		display: none;
	}
    
    
    /****************************************
     * People List
     ****************************************/
    
    .js #content .people-list thead {
        display: none;  
    }
    #content .people-list th, 
    #content .people-list td {
        border-right: none;
        padding: 0 12px 9px 12px;
    }
	#content .people-list img {
		margin: 0 0 8px 0;	
	}
    #content .people-list tbody th:first-child, 
    #content .people-list tbody td:first-child {
        padding-top: 9px;   
        padding-right: 12px;
        width: auto;
    }
    #content .people-list tr:last-child th, 
    #content .people-list tr:last-child td {
        border-bottom: none; 
    }
    #content .people-list tbody th p,
    #content .people-list tbody td p,
    #content .people-list tbody th ul,
    #content .people-list tbody td ul {
        margin: 0;
    }
    #content .people-list tbody th .thead-th,
    #content .people-list tbody td .thead-th {
        font-family: "LatoBold", Arial, Helvetica, sans-serif;
        margin: 0 0 3px 0;
        text-transform: uppercase;
    }
    
    
    /****************************************
     * People Profile
     ****************************************/
    
    #content .people-profile-header-wrap {
        margin-right: -15px;
        margin-left: -15px;
    }
    
    /* Content */
    
    #content .people-profile-header {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    /* Photo */

    #content .people-profile-header-photo {
        float: none;
        margin: 0 15px 10px 15px;
    }
        
}