/* ----------- CSS reset (make styles look the same in every browser) ----------- */

html {
    color: #000;
    background: white;
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input, textarea, select {
    *font-size: 100%;
}

legend {
    color: #000;
}

a img {
    border: none;
}

blockquote, q {
    quotes: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


/* ----------- Clear and Spacing ----------- */

.clear {
    margin: 0 0 -1px 0;
    line-height: 1px;
    display: block;
    font-size: 1px;
    clear: both;
    height: 1px;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    line-height: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}

*:first-child+html .clearfix {
    zoom: 1;
}


/* ----------- Fontface ----------- */

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica.eot');
    src: url('../fonts/Helvetica.eot?#iefix') format('eot'), url('../fonts/Helvetica.woff') format('woff'), url('../fonts/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica-Light';
    src: url('../fonts/HelveticaLight.eot');
    src: url('../fonts/HelveticaLight.eot?#iefix') format('eot'), url('../fonts/HelveticaLight.woff') format('woff'), url('../fonts/HelveticaLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ----------- Font styles ----------- */

html,
body,
p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    line-height: 23px;
    font-weight: normal;
}

h1 {
    font-family: 'Helvetica-Light', Arial, sans-serif;
    font-size: 28px;
    line-height: 28px;
    font-weight: normal;
}

h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 19px;
    line-height: 25px;
    font-weight: normal;
}

h3,
h4,
h5,
h6 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 15px;
    line-height: 23px;
    font-weight: bold;
}

p {
    margin-bottom: 23px;
}

b, strong {
    font-weight: bold;
}

a {
    color: #009fda;
    text-decoration: none;
    outline: none;
}

a:hover, a:focus {
    color: #009fda;
    text-decoration: underline;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin: 0;
    padding: 0;
    list-style: disc;
}

ol {
    margin: 0;
    padding: 0;
}

ol li {
    margin: 0;
    padding: 0;
    list-style: decimal;
}

/* ----------- Global styles ----------- */

html {
    background: #0099ff url('../img/headergradient.png') repeat-x left top;
}

body {
    background: transparent url('../img/headerclouds.png') repeat-x center top;
}

.mainContainer {
    width: 954px;
    margin: 0 auto;
}

/* ----------- Component styles ----------- */

.remaining {
    display: block;
    overflow: hidden;
}

.sliderAction {
    width: 48px;
    height: 48px;
    display: inline-block;
    cursor: pointer;
}

    .sliderAction.nextSlide {
        background: #0099ff url('../img/sliderNext.png') no-repeat left top;
    }

    .sliderAction.previousSlide {
        background: #0099ff url('../img/sliderPrevious.png') no-repeat left top;
    }

.divider {
    height: 1px;
    margin: 36px 0 24px 0;
    border-top: 1px solid #c0c0c0;
}

.ageContainer {
    min-width: 77px;
    height: 32px;
    padding: 1px 8px 1px 8px;
    border: 1px solid #007aa7;
    background-color: #009fda;
    color: #ffffff;
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    line-height: 33px;
}

/* ----------- Header styles ----------- */

.mainMenu a:hover,
.subMenu a:hover {
    text-decoration: none; /* Remove underscore */
}

.mainHeader ul li {
    list-style: none;
    float: left;
    height: 100%;
}

.mainHeader .menuBackground {
    height: 109px;
    background-color: #f0f0f0;
}

    .mainHeader .menuBackground > .wrapper {
        width: 415px;
        height: 109px;
    }

.mainMenu {
    background-color: #000000;
    color: #d7d7d7;
    height: 39px;
    line-height: 39px;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    position: relative;
}

    .mainMenu ul {
        display: inline-block; /* Allows to be aligned right */
        float: right; /* IE7 Fix*/
    }

        .mainMenu ul li a {
            color: #d7d7d7; /* Reset link color */
            padding: 0 16px 0 22px;
        }


        .mainMenu > ul > li.current-menu-item > a,
        .mainMenu > ul > li.current-menu-ancestor > a,
        .mainMenu > ul > li.current-menu-parent > a,
        .mainMenu > ul > li > a:hover {
            color: #0e81c5;
        }

.mainMenu .sub-menu {
    position: absolute;
    top: 39px;
    right: 0;
    width: 540px;
    height: 109px;
    overflow: hidden;
    background-color: #f0f0f0;
    color: #666666;
    display: none;
}

.mainMenu > ul > li.current-menu-item .sub-menu,
.mainMenu > ul > li.current-menu-parent .sub-menu,
.mainMenu > ul > li.current-menu-ancestor .sub-menu {
    display: inline-block;
}

    .mainMenu .sub-menu ul {
        display: table;
    }

    .mainMenu .sub-menu li.current-menu-item,
    .mainMenu .sub-menu li.current-page-ancestor,
    .mainMenu .sub-menu li:hover {
        background-color: #009fda;
        color: #ffffff;
    }

    .mainMenu .sub-menu li.featured:hover {
        background-color: #f0f0f0;
    }

        .mainMenu .sub-menu li {
            width: 134px;
            height: 109px;
            border-right: 1px solid #c0c0c0;
            overflow: hidden;
        }

        .mainMenu .sub-menu li.current-menu-item,
        .mainMenu .sub-menu li.current-page-ancestor,
        .mainMenu .sub-menu li:hover {
            border-right: 1px solid #028BEE;
        }

        .mainMenu .sub-menu li a {
            text-align: center;
            color: #666666;
            font-size: 18px;
            line-height: 22px;
            vertical-align: middle;
            display: table-cell;
            width: 134px;
            height: 109px;
        }

        .mainMenu .sub-menu li.current-menu-item a,
        .mainMenu .sub-menu li.current-page-ancestor a,
        .mainMenu .sub-menu li:hover a {
            color: #ffffff;
        }

        .mainMenu .sub-menu li.last-menu-item a {
            border-right: 0;
        }

        .mainMenu .sub-menu li.featured a {
            /* Play Game Image */
            width: 414px;
        }

        .mainMenu .sub-menu li.featured img {
            position: relative;
            top: 4px;
            left: 12px;
        }

    .headerShadow {
        width: 954px;
        height: 20px;
        background: transparent url('../img/headerShadow.png') no-repeat center top;
    }

/* ----------- Content styles ----------- */

article.hero,
article.page {
    background-color: #f0f0f0;
}

    article.hero > .wrapper,
    article.page > .wrapper {
        padding: 15px;
    }


/* ----------- Main content styles ----------- */

section.content {
    position: relative;
    width: 608px;
    height: auto;
    float: left;
    padding-top: 25px;
}

    section.content h1 {
        margin-bottom: -5px;
    }

    section.content h2 {
        margin-top: 30px;
        margin-bottom: 25px;
        font-size: 19px;
    }

    section.content img {
        max-width: 100%;
        height: auto;
        margin-bottom: 5px;
    }

    section.content .articleShareContainer {
        margin-bottom: 4px;
    }

    section.content .articleShareContainer .actionbar,
    section.content .articleShareContainer .fb-like {
        width: 304px;
        height: 43px;
        margin: 0;
        float: left;
        border-top: 2px solid #cbcbcb;
        border-bottom: 0;
    }

    section.content .articleShareContainer .fb-like {
        padding-top: 10px;
        height: 33px;
    }

/* ---------- Sidebar content styles ----------- */

aside.sidebar {
    position: relative;
    width: 292px;
    height: auto;
    float: right;
    padding-top: 80px;
}

    aside.sidebar img {
        position: relative;
        width: 292px;
        margin-left: -20px;
        margin-top: -30px;
        margin: -30px 0px 5px -20px;
    }

header.actionbar {
    position: relative;
    height: 43px;
    width: 100%;
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
    margin-bottom: 10px;
}

    header.actionbar > .actionItem {
        height: 27px;
        float: left;
        margin-top: 8px;
    }

    header.actionbar > .actionItem img {
        height: 27px; width: auto; margin: 0;
    }

       

section.sidebarItem {
    position: relative;
    width: 252px;
    height: auto;
    padding: 25px 20px 5px 20px;
    margin-bottom: 30px;
    background-color: #e1e1e1;
}

    section.sidebarItem.video .wrapper {
    margin-bottom: -13px;
    }

        section.sidebarItem.video > .wrapper > p {
        }

        section.sidebarItem > .wrapper > p {
            font-size: 14px;
            line-height: 20px;
        }

        section.sidebarItem > .wrapper > h2 {
            font-size: 13px;
            font-weight: 900;
        }

        section.sidebarItem > .wrapper > h1 {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 17px;
        }


/* ---------- Related content styles ----------- */

section.relatedPages {
    border-top: 2px solid #cbcbcb;
    padding-top: 30px;
}

    section.relatedPages > h1 {
        margin-bottom: 18px;
    }

    section.relatedPages a {
        font-weight: 600;
        font-size: 14px;
    }

    section.relatedPages .byline {
        font-size: 11px;
        color: #333333;
        margin-bottom: 8px;
        margin-top: -3px;
    }

    section.relatedPages .description {
        margin-bottom: 8px;
    }


/* ----------- Hero styles ----------- */

article.hero {
    margin-bottom: 20px;
}

    article.hero section.text {
        padding-top: 12px;
    }

    article.hero section.video {
        float: right;
        width: 597px;
        margin-left: 15px;
    }

    article.hero h1 {
        margin-bottom: 15px;
    }

    article.hero p.readMore {
        margin-bottom: 0;
    }

    article.hero .readMore {
        font-weight: 900;
    }

        article.hero section.video .videoContainer {
            line-height: 0;
        }

            article.hero section.video .videoContainer object {
                width: 597px;
                height: 348px;
            }

        article.hero section.video .videoDescriptionContainer {
            background-color: #000000;
            color: #f0f0f0;
            padding: 10px;
        }

            article.hero section.video .videoDescriptionContainer p {
                margin: 0;
            }


/* ----------- Page styles ----------- */

article.page .slider {
    margin-left: -2px; /* Pull 2px left, as defined in PSD */
}

    article.page .sliderHeader {
        background-color: #f0f0f0;
        position: relative;
        padding-top: 11px;
        margin-bottom: 19px;
    }

        article.page .sliderHeader .readMore {
            position: absolute;
            right: 0;
            bottom: 0;
            font-weight: 900;
            text-align: right;
        }

    article.page .sliderContent img {
        vertical-align: top; /* Remove image margins */
    }

    article.page .sliderDescription {
        text-align: center;
        background-color: #e1e1e1;
    }

        article.page .sliderDescription > .wrapper {
            padding-top: 15px;
            width: 805px;
            margin: 0 auto;
            border-bottom: 1px solid #b4b4b4;
        }

        article.page .sliderDescription p {
            font-size: 13px;
            line-height: 16px;
            margin-bottom: 12px;
            display: none;
        }

        article.page .sliderDescription p.active {
            display: block;
        }

    article.page .sliderNavigation {
        background-color: #e1e1e1;
    }

        article.page .sliderNavigation > .wrapper {
            padding: 15px 7px 7px 7px;
        }

        article.page .sliderNavigation .previousSlide {
            float: left;
        }

        article.page .sliderNavigation .nextSlide {
            float: right;
        }

    article.page .sliderThumbnailContainer {
        text-align: center;
    }

        article.page .sliderThumbnailContainer .sliderThumbnail {
            display: inline-block;
            cursor: pointer;
            margin: 0 3px;
        }

        article.page .sliderThumbnailContainer .sliderThumbnail.active {
            zoom: 1; /* IE fix */
            filter: alpha(opacity=60); /* IE opacity */
            opacity: 0.6;
        }


    /* ----------- Article Grid styles ----------- */

    article.page .articleGridHeader h1 {
        margin-bottom: 28px;
    }

    article.page .articleGrid {
        margin-bottom: -28px; /* Account for margin-bottom of last row of tiles */
    }

    article.page .articleGrid .tile {
        background-color: #e1e1e1;
        width: 450px;
        min-height: 419px;
        margin-bottom: 24px;
        float: left;
        position: relative;
    }

    article.page .articleGrid .tile.odd {
        margin-right: 24px;
    }

        article.page .articleGrid .tile > .wrapper {
            padding: 8px 20px 20px 20px;
        }

        article.page .articleGrid .tile h2 {
            font-weight: bold;
            line-height: 26px;
        }

        article.page .articleGrid .tile p {
            font-size: 13px;
            line-height: 18px;
            margin-bottom: 12px;
        }

        article.page .articleGrid .tile .byline {
            font-size: 11px;
            font-weight: 400;
            margin-bottom: 18px;
        }

        article.page .articleGrid .tile .readMore {
            font-weight: 900;
            margin-top: 30px;
        }

        article.page .articleGrid .tile .ageContainer {
            position: absolute;
            top: 10px;
            left: -10px;
        }


    /* ----------- FileGrid styles ----------- */

    article.page .fileGrid {
        margin-bottom: 22px;
    }

    article.page .fileGrid .fileGridHeader h1 {
        margin-bottom: 20px;
    }

        article.page .fileGrid .column {
            width: 450px;
            float: left;
            margin-bottom: -50px; /* Account for margin-bottom of last item */
        }

            article.page .fileGrid .column.first {
                margin-right: 24px;
            }

            article.page .fileGrid .columnDescription {
                margin-bottom: 32px;
            }

        article.page .fileGrid .fileContainer {
            position: relative;
            margin-bottom: 50px;
        }

            article.page .fileGrid .fileContainer .file {
                float: left;
                margin-left: 30px;
                margin-right: 22px;
            }

            article.page .fileGrid .descriptionContainer {
                float: left;
            }

                article.page .fileGrid .descriptionContainer .fileDescription,
                article.page .fileGrid .descriptionContainer .downloadLink {
                    font-size: 13px;
                    font-weight: 900;
                    line-height: 1;
                }

                article.page .fileGrid .descriptionContainer .fileDescription {
                    margin-bottom: 4px;
                    position: relative;
                    top: -1px;
                    left: 0;
                    word-break: break-all;
                    width: 260px;
                }

            article.page .fileGrid .ageContainer {
                position: absolute;
                top: 6px;
                left: 0;
            }


/* ----------- Footer styles ----------- */

.pageFooter {
    color: #8f8f8f;
    background-color: #1e1e1e;
    height: 69px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 63px;
}

.pageFooter p {
    line-height: 69px;
    font-size: 10px;
    font-weight: bold;
}

.pageFooter a {
    text-decoration: underline;
    color: #8f8f8f;
}

/* Popup video */

.video-popup div,
.video-popup object {
    width: 100%;
    height: 100%;
}

/* Wordpress WYSISWG styling */
.page section.content > ul,
.page section.content > ol {
    margin: 10px 0px 10px 20px;
}

.page section.content > h1 {
    margin-bottom: 28px;
}

.page section.content p img {
    margin-bottom: -23px;
}

.sidebarItem .wrapper ul, .sidebarItem .wrapper ol{
    margin: 10px 0 10px 20px;
}

/* Facebook iframe fix */
.fb_edge_widget_with_comment {
    margin-bottom: 30px;
}

/* Additional Wordpress WYSIWYG styling */
section.content .alignnone {
    margin: 5px 20px 20px 0;
}

section.content .aligncenter,
section.content div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

section.content .alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

section.content .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

section.content .aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

section.content a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

section.content a img.alignnone {
    margin: 5px 20px 20px 0;
}

section.content a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

section.content a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

section.content .wp-caption {
    text-align: center;
    max-width: 100%;
}

section.content .wp-caption a {
    display: block;
    line-height: 0;
    padding: 10px 10px 6px 10px;
    border-top: 1px solid #d1d1d1;
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
}

section.content .wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

section.content .wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

section.content .wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

section.content .wp-caption img {
    margin: 0;
}

section.content .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 15px 25px;
    background-color: #e1e1e1;
    border: 1px solid #d1d1d1;
}

/* LANDINGPAGE */

/* STYLE 1 */

.landingpage .tc_text_image {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;

    margin-bottom: 20px;
}
.landingpage .tc_text_image .tc_image {
    width: 529px;
    float: right;
}
.landingpage .tc_text_image .tc_image img {
    width: 100%;
    display: block;
}

.landingpage .tc_text_image .tc_text {
    width: 425px;
    float: left;
    padding: 29px 60px 0px 16px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.landingpage .tc_text h2 {
    font-size: 28px;
    line-height: 28px;
    font-weight: 100;
    margin-bottom: 25px;
}

/* STYLE 2 */

.landingpage .tc_fullwidth {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;

    margin-bottom: 20px;
}

.landingpage .tc_fullwidth .tc_fullwidth_image {
    width: 100%;
    padding: 16px 15px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.landingpage .tc_fullwidth .tc_fullwidth_image img {
    width: 100%;
    display: block;
}

.landingpage .tc_fullwidth .tc_text {
    padding: 16px 315px 16px 15px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* STYLE 3 */

.landingpage .content_field {
    margin-bottom: -12px;
}
.landingpage .content_field .tc_text {
    padding-top: 29px;
}
.landingpage .content_field.color-blue {
    background-color: #d6e2e7;
}