/* main.css */
/* Main CSS file for the EEI website. */

body {
    background: url("/static/images/background.png") repeat-x #2487B5;

    margin-left: auto;
    margin-right: auto;
    width: 1230px;
}

#bodyInnerContainer {
    margin: 0 35px;
}

noscript div {
    display: block;
    width: 100%;
    padding: 6px;
    text-align: center;
    color: #FFFFFF;
    background-color: #AE0000;
    font-weight: bold;
}

#headerContentContainer {
    padding-left: 34px;
    padding-right: 34px;
    margin-bottom: 9px;
    background-color: #FFFFFF;
}

/*****************************/
/* Utility */
/*****************************/

.noListFormatting {
    margin: 0px !important;
    padding: 0px;
}

.noListFormatting  li {
    margin: 0px;
    list-style-type: none;
}

.renderLineBreaks {
    white-space: pre-wrap;
}

/*****************************/
/* Header */
/*****************************/

#header {
    border-bottom: 2px solid #FFFFFF;
}

#headerImage {
    float: left;
    margin-left: -63px;
    padding-top: 11px;
    border-bottom: 2px solid #FFFFFF;
}

/*** Header Top Links ***/

#headerTopLinks {
    float: right;
    text-align: right;
    margin-top: 75px;
}

#headerTopLinks > ul > li {
    display: inline;
    text-decoration: none;
}

#headerTopLinks > ul > li:after {
    content: '|';
}

#headerTopLinks > ul > li:last-child:after {
    content: '';
}

#headerTopLinks > ul > li > a {
    text-decoration: none;
}

#headerTopLinks > ul > li > a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/*****************************/
/* Navigation */
/*****************************/

/*** Root Nav (1st Level) ***/

#rootNav ul {
    display: flex;
    flex-flow: row;
}

#rootNav li {
    display: inline-block; /*flexbox fallback*/
    flex-grow: 1;
    border-right: 4px solid #FFFFFf;
    
    /*Hack to make inline-block work in IE7*/
    zoom: 1; 
    *display: inline;
}

#rootNav li:last-child {
    border: none;
}

#rootNav li > a {
    height: 26px;
    line-height: 26px;
    padding: 0 20px;
    display: block;
    
    text-align: center;
    font-size: 100%;
    font-weight: 600;
    text-decoration: none;
}

#rootNav li > a > span {
    width: 110px;
}

/*** Sub Nav (2nd and 3rd Level) ***/

#subNav li {
    margin-bottom: 4px;
}

#subNav a {
    display: block;
    padding-left: 4px;
    text-decoration: none;
}

/*****************************/
/* Home Page Carousel */
/*****************************/

#carouselContainer {
    position: relative;
    margin-bottom: 16px;
}

#carousel {
    position: relative;
    overflow: hidden;
}

#carousel img {
    width: 1092px;
    height: 510px;
}

#carousel ul {
    width: 20000em;
    position: relative;
    
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

#carousel li {
    float: left;
}

#carousel a:hover {
    opacity: 0.8;
}

#carouselOverlay {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 8;
    padding: 6px;
    padding-left: 28px;
    width: 100%;

    background: rgba(255, 255, 255, 0.8); /*Fallback*/
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));
}

#carouselOverlay .eventTitle a {
    font-size: 146%;
    color: #2487B5 !important;
    font-weight: 600;
}

#carouselOverlay .eventLink a {
    font-size: 121%;
    color: #1A1A1A !important;
    font-weight: 600;
}

#carouselContainer .jcarousel-next {
    position: absolute;
    bottom: 23px;
    right: 50px;
    width: 27px;
    height: 34px;
    z-index: 10;
    background-image: url("/static/images/carouselRightArrow.png");
    cursor: pointer;
}

#carouselContainer .jcarousel-next:hover {
    opacity: 0.8;
}

#carouselContainer .jcarousel-prev {
    position: absolute;
    bottom: 23px;
    right: 150px;
    width: 27px;
    height: 34px;
    z-index: 10;
    background-image: url("/static/images/carouselLeftArrow.png");
    cursor: pointer;
}

#carouselContainer .jcarousel-prev:hover {
    opacity: 0.8;
}

/*****************************/
/* Content Layout */
/*****************************/

#content {
    background-color: #FFFFFF;
    padding-bottom: 10px;
}

#columnNavAndResources {
    float: left;
    width: 270px;
}

#relatedResources {
    margin-bottom: 10px;
}

#columnContent {
    float: left;
    width: 600px;
    padding: 0 110px;
    
}

.contentText {
    margin-top: 28px;
    margin-bottom: 10px;
}

/*** Featured Video Page ***/

#featuredVideo {
    height: 369px;
}

#featuredVideo .video {
    padding-top: 25px;
    text-align: center;
}

.videoTextFallback {
    width: 79%;
    margin: 0 10%;
    text-align: left;
    background-color: #FFFFFF;
}

/*** Video List Page ***/

#listItemVideo .video {
    padding-top: 25px;
    text-align: center;
}

#videoList h2 {
    border-bottom: 1px solid #6D6D6D;
}

.videoListLink {
    font-size: 13px;
    line-height: 110%;
    
    padding-top: 5px;
    padding-bottom: 20px;
    border-bottom: 1px solid #6D6D6D;
}

.videoListLink img {
    float: left;
    margin-right: 5px;
    box-shadow: 2px 2px 2px #888888;
}

.videoListLink>div {
    white-space: pre-wrap;
}

/*****************************/
/* Footer */
/*****************************/

#footer {
    padding: 0 34px;
    background-color: #1269A1;
    color: #FFFFFF;
    display: flex;
    align-items: center; /*align vertical*/
}

#footer a {
    color: #FFFFFF;
}

#footer .socialIcons {
    
}

#footer .socialIcons a img {
    padding: 3px 0;
    padding-right: 8px;
}

#footer .socialIcons a img {
    vertical-align: middle;
}

#footer .footerRightColumn {
    flex-grow: 1;
}

#footer .footerRightColumn p {
    margin: 3px 0;
}

#footer .footerLinks {
    font-size: 85%;
    float: right;
}

#footer .footerText {
    font-size: 80%;
    float: right;
}

/*****************************/
/* Flowplayer */
/*****************************/

.fp-embed {
    display: none !important;
}

.fp-speed {
    display: none !important;
}

/*****************************/
/* Forms */
/*****************************/

input[type="checkbox"] {
    margin: 4px;
}

/*****************************/
/* Misc. */
/*****************************/

.octicon-triangle-down {
    margin: -5px 0;
}

.helpTooltip {
    font-size: 16px;
    font-family: 'Open Sans', 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
    color: #1A1A1A;
    max-width: 450px;
    border-radius: 4px;
    box-shadow: 0 0 10px 3px #aaaaaa;
}

/*****************************/
/* Media Queries */
/*****************************/

@media screen and (max-width: 1229px) {
    body {
        width: 960px;
    }

    #bodyInnerContainer {
        margin: 0;
    }

    #headerContentContainer {
        padding-left: 6px;
        padding-right: 6px;
    }

    #headerImage {
        margin-left: 0;
    }

    #headerTopLinks {
        margin-top: 25px;
        margin-right: 20px;
    }

    #headerTopLinks > ul > li {
        display: block;
    }

    #headerTopLinks > ul > li:after {
        content: '';
    }

    #carouselOverlay {
        padding: 6px 0;
    }

    #columnContent {
        padding: 0;
        padding-left: 15px;
        width: 650px;
    }

    #footer {
        padding: 0 10px;
    }
}