﻿/*! 
    "Impact" Site Specific CSS
    last update: 6/12/2014 @mgcooper
*/
/*
 * UTMB "Modern Web" Media Queries
 * Mobile First - Start with everything below 768px (48em)
 * 768px (48em) - Desktop/Tablet and up
 * 980px (61.25em) - Desktop - *Where UTMB nav changes - @mgcooper
 * 1280px (80em) - Desktop Large
 * 1440px (90em) - Desktop X-Large
*/

/* color: #ea2839 !important;  Red */
/* color: #616365 !important;  Gray */
/* color: #3d7edb !important;  Blue */
/* color: #ffc40d !important;  Yellow */
/* color: #ec7a08 !important;  Orange */
/* color: #4e7c8c !important;  Teal */
/* color: #879637 !important;  Green */

/* stupid breadcrumb skip link */
#ctl00_siteBreadcrumbs { display: none !important; }




/* Home Page
   =================================== */

/* Expand the max-width of the page layout */
@media only screen and (min-width: 61.25em) {
    body.nav-sub #navigate,
    #header .head,
    #main,
    #footer .foot,
    #explore .explore-section,
    #navigate .navigate-section,
    #breadcrumbs,
    .row {
        max-width: 1100px !important;
    }
}

/* home page grid */
body.impact-home-page .padding {
    padding: 15px !important;
}
.impact-grid {
    min-width: 100%;
}
.impact-grid .body-column,
.impact-grid .aside-column,
.impact-grid .left-column,
.impact-grid .center-column {
        padding: 0;
}
.impact-grid .center-column {
    padding-top: 15px;
}
@media only screen and (min-width: 61.25em) {
    .impact-grid .left-column {
        padding-top: 15px;
    }
    .impact-grid .center-column {
        padding-left: 15px;
    }
    .impact-grid .aside-column {
        padding-left: 15px;
    }
}


/* hero */
.hero {
    position: relative;
    background-color: #000;
    /*background: url(/impact/assets/img/mockup/turtle-burger-805x320.jpg) center center no-repeat;*/
    height: 320px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
}
.hero a {
    display: block;
    height: 320px;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background-repeat: no-repeat;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
}
/* title bar */
.hero span.hero-title-bar {
    position: absolute;
    top: 200px;
    left: 0;
    height: 112px;
    width: 100%;
    /*background: url(/impact/assets/img/mockup/featurebox-title-bar.png) top left no-repeat;*/
    background: none;
    display: none !important;
}
/* 
    Custom feature box hero image positioning
    horizontal is first in positioning 
*/
/* h left */
.halign-left.valign-left {
    background-position: left left !important;
}
.halign-left.valign-center {
    background-position: left center !important;
}
.halign-left.valign-right {
    background-position: left right !important;
}
/* h center */
.halign-center.valign-left {
    background-position: center left !important;
}
.halign-center.valign-center {
    background-position: center center !important;
}
.halign-center.valign-right {
    background-position: center right !important;
}
/* h right */
.halign-right.valign-left {
    background-position: right left !important;
}
.halign-right.valign-center {
    background-position: right center !important;
}
.halign-right.valign-right {
    background-position: right right !important;
}




/* home page articles */
.impact-home-page .articles ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.impact-home-page .articles ul li {
    margin: 0;
    padding: 0;
    clear: both;
    float: none;
}
/* home page article hyperlink wrapper */
.impact-home-page .articles ul li a {
    display: block;
    text-decoration: none;
    padding: 8px;
    margin-bottom: 5px;
}
.impact-home-page .articles ul li a:hover {
    text-decoration: none;
    background-color: #eee;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
}
/* PROOF MODE for admin issue manager */
.impact-home-page .articles ul li a.proof-mode {
    background-color: #eee;
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
}
.impact-home-page .articles ul li a.proof-mode span {
    display: block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: .8em;
}
.impact-home-page .articles ul li a.proof-mode:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*.impact-home-page .articles ul li a.proof-mode:hover h3,
.impact-home-page .articles ul li a.proof-mode:hover p {
    color: red !important;
}*/
/* end/ PROOF MODE */
.impact-home-page .articles ul li a h3 {
    margin-bottom: 8px;
    font-size: 1.125em;
}
.impact-home-page .articles ul li a p {
    font-size: .85em !important;
    margin: 0;
    padding: 0;
}
.impact-home-page .articles ul li a i {
    font-size: .9em;
    color: #3d7edb;
}
/* home page thumbnails */
.impact-home-page .articles ul li a span.thumb {
    display: block;
    margin-bottom: 5px;
}
.impact-home-page .articles ul li a span.thumb img {
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
}
/* Portrait */
.impact-home-page .articles ul li a span.thumb.portrait img {
    max-width: 100px;
    float: right;
    margin-left: 10px;
}




/* medium grid thumbnail handling 
@media only screen and (min-width: 25em) and (max-width: 47.99em) {
    .impact-home-page .articles ul li a span.thumb {
        width: 130px;
        height: 100px;
        float: left;
        margin-right: 14px;
        overflow: hidden;
        position: relative;
    }
    .impact-home-page .articles ul li a span.thumb img,
    .impact-home-page .articles ul li a span.thumb.portrait img {
        max-width: 180px;
        width: 180px;
        position: absolute;
        margin-left: -40px;
        float: none;
    }
}*/


/* for old IE 
.impact-home-page .center-column ul li a span.thumb {
        float: left;
        margin-right: 14px;
}


@media only screen and (max-width: 24.99em) {
   .impact-home-page .center-column ul li a span.thumb {
        float: right;
        margin-left: 10px;
    } 
}
*/

/* center column thumbnails - medium grid and up
@media only screen and (min-width: 48em) {*/
@media only screen and (min-width: 25em) {
    /*.impact-home-page .center-column ul li a span.thumb {
        width: 130px;
        height: 100px;
        float: left;
        margin-right: 14px;
        overflow: hidden;
        -webkit-border-radius: 4px; 
        -moz-border-radius: 4px; 
        border-radius: 4px;
    }
    .impact-home-page .center-column ul li a span.thumb img {
        min-width: 150px;
        width: 150px;
        margin-left: 0px;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        border-radius: 0px;
    }*/
    .impact-home-page .center-column ul li a span.thumb {
        /*width: 130px;
        height: 100px;
        float: left;
        margin-right: 14px;
        overflow: hidden;
        -webkit-border-radius: 4px; 
        -moz-border-radius: 4px; 
        border-radius: 4px;*/
        float: left;
        margin-right: 14px;
        /*width: 150px;*/
    }
    .impact-home-page .center-column ul li a span.thumb img {
        /*min-width: 150px;
        width: 150px;
        margin-left: 0px;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        border-radius: 0px;*/
        /*width: 150px;*/
        max-width: 100px;
    }
}

/* Impact Contacts */


/*@media only screen and (min-width: 48em) {
    .m-view .impact-contacts {
        display: block;
    }
    .desktop-view .impact-contacts {
        display: block;
    }
}*/
.impact-contacts {
    margin-top: 20px;
    color: #616365;
    /*font-size: .9em;*/
    border: 1px solid #eee;
    padding: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 2px 2px 3px 0px #999; /* horizontal, vertical, blur, spread */
    -webkit-box-shadow: 2px 2px 3px 0px #999;
    box-shadow: 2px 2px 3px 0px #999;
}
.impact-contacts h2 i {
    margin-right: 5px;
    font-size: 120%;
}
.impact-contacts p {
    color: #616365 !important;
}
.impact-contacts .panel {
    font-size: .95em;
    margin: 0 !important;
}
.impact-contacts img {
    float: right;
    margin-left: 12px;
    margin-bottom: 12px;
    border: 0 !important;
}
.impact-contacts a:hover {
    color: #ec7a08;
}











/* center column 
.center-column .filler {
    width: 100px;
    min-height: 100px;
    float: left;
    margin-right: 12px;
}*/
/* center column - "base" section - fyi: .base is assigned to the <a> 
.center-column .base .filler {
    width: 100%;
    min-height: 300px;
    float: none;
    margin-right: 0;
}
*/






/* article detail page */
@media only screen and (min-width: 61.25em) {
    .impact-article {
        padding: 5px 5px 0 15px;
    }
}


/* #sidebar-article */
#sidebar-article h3 {
    color: #999;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
#sidebar-article ul {
   list-style: square; 
}
#sidebar-article ul li {
   margin: 0;
   padding: 0;
   font-size: .8em;
   line-height: 1.4em;
   margin-bottom: 10px;
   color: #ccc;
}
#sidebar-article ul li a {
   color: #555; 
}
#sidebar-article ul li a:hover {
    color: #3d7edb;
}
#sidebar-article ul li a.current {
   color: #ec7a08 !important; 
   font-weight: bold;
}
@media only screen and (min-width: 61.25em) {
    #sidebar-article {
        margin-right: 10px;
    }
}


/* Article Media */

/* responsive image-width handling */
@media only screen and (min-width: 48em) {
    .rwd-width-500 {max-width: 500px;}
    .rwd-width-450 {max-width: 450px;}
    .rwd-width-400 {max-width: 400px;}
    .rwd-width-350 {max-width: 350px;}
    .rwd-width-300 {max-width: 300px;}
    .rwd-width-250 {max-width: 250px;}
    .rwd-width-200 {max-width: 200px;}
    .rwd-width-150 {max-width: 150px;}
    .rwd-width-100 {max-width: 100px;}
    .rwd-width-0 {} /* orig width */
}

/* photo 
.photo-top-left {
    float: left;
    margin: 0 14px 10px 0 !important;
}
.photo-top-right {
    float: right;
    margin: 0 0 10px 14px !important;
}*/
.photo-bottom {  
}

/* flickr */
.flickr-top-left {
    width: 350px;
    float: left;
    margin: 0 14px 10px 0 !important;
}
.flickr-top-right {
    width: 350px;
    float: right;
    margin: 0 0 10px 14px !important;
}
.flickr-bottom {
    width: 100%;
}

/* video */
.video-top-left {
    width: 350px;
    float: left;
    margin: 0 14px 10px 0 !important;
}
.video-top-right {
    width: 350px;
    float: right;
    margin: 0 0 10px 14px !important;
}
.video-bottom {
    width: 100%;
}



/**
 * Example Image: <img class="photo-right" src="photo.jpg" title="This is the photo caption" alt="my photo" />
 * Automated Output Example: 
 * <figure class="photo-right">
 *    <img src="photo.jpg" title="This is the photo caption" alt="my photo" />
 *    <figcaption>This is the photo caption</figcaption>
 * </figure>
*/
/* Image classes 
.photo {
  display: inline;
}*/

/*.photo,
.photo-left,
.photo-right,
.photoleft,
.photoleft_caption,
.photoright,
.photoright_caption {
    float: none;
    margin: 0;
}*/


@media only screen and (min-width: 48em) {
    .photoleft,
    .photoleft_caption {
        float: left !important;
        margin: 0 14px 10px 0 !important;
        overflow: visible !important;
    }

    .photoright,
    .photoright_caption {
        float: right !important;
        margin: 0 0 10px 14px !important;
        overflow: visible !important;
    }

    figure.photoleft img,
    figure.photoleft_caption img,
    figure.photo-left img,
    figure.photoright img,
    figure.photoright_caption img,
    figure.photo-right img {
        overflow: visible !important;
    }
}



@media print {
    .noprint,
    #aside,
    .fb-like {
        display: none !important;
    }
    #article .padding {
        padding-left: 25px;
        padding-right: 25px;
    }
    .photoleft,
    .photoleft_caption {
        float: left !important;
        margin: 0 14px 10px 0 !important;
    }

    .photoright,
    .photoright_caption {
        float: right !important;
        margin: 0 0 10px 14px !important;
    }
}







/* Archive Home Page
   =================================== */

.impact-issue {
    float: left;
    padding: 8px;
    text-align: center;
}
.impact-issue a:hover {
    color: #3d7edb;
    text-decoration: none;
    background: #f9f9f9;
}
.impact-issue a:hover h3 {
    color: #3d7edb;
}
.impact-issue a:hover img {
    border: 2px solid #3d7edb;
}
.impact-issue h3 {
    font-size: 1.1125em;
    margin-bottom: 5px;
}
.impact-issue img {
    border: 2px solid #eee;
}
.impact-issue a.current-issue h3 {
    color: #ec7a08;
}
.impact-issue a.current-issue img {
    border: 2px solid #ec7a08;
}
.impact-pager {
    font-size: .8em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.impact-pager.top {
    margin-bottom: 15px;
}
.impact-pager.bottom {
    margin-top: 15px;
}