#banner
{
    width:100%;
    overflow:hidden;
    background-color:black;
}

#banner .content-slice
{
    overflow:visible;
}

#banner > .content-slice > .player
{
    z-index:10;
    width:1068px;
    height:418px;
    cursor:pointer;
}

#blurb
{
    overflow:visible;
}

#blurb h2
{
    margin-left:-6px;
}

img#trailer
{
    position:absolute;
    top:0px;
    margin:auto;
}

img#trailer-hover
{
    opacity:0;
    position:absolute;
    top:0px;
    margin:auto;
    -webkit-transition:opacity 0.25s linear;
}

#banner:hover img#trailer-hover
{
    opacity:1;
}


#blurb
{
    height:413px;
}

    #blurb p
    {
        margin-top:-1px;
        width:680px;
    }

#social
{
    position:absolute;
    top:1px;
    right:-1px;

    width:228px;
    height:33px;
}

#social p
{
    margin-top:5px;
    width:228px;

    font-size:15px;
    font-weight:bold;
    text-align:center;
}

.twitter-share-button
{
    margin-top:39px;
    margin-bottom:20px;
}

a#download
{
    display:block;

    width:228px;
    height:33px;

    background-image:url("../images/index/download.gif");
}

a#download:hover
{
    background-image:url("../images/index/download-over.gif");
}

#guided-tour
{
    position:relative;
    overflow:visible;
}

#guided-tour > .player
{
    position:relative;

    left:1px;
    width:244px;
    height:138px;

    background-image:url(../images/index/tour-poster.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    margin-bottom:61px;

    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
}

#guided-tour h3
{
    position:absolute;
    left:268px;
    top:-4px;
    margin-bottom:19px;
    z-index:-1;
}

#guided-tour p
{
    position:absolute;
    left:268px;
    top:34px;

    font-size:18px;
    line-height:19px;
    width:350px;
    z-index:-1;
}

#feature-strip
{
    height:287px;
    margin-bottom:50px;

    -webkit-tap-highlight-color:transparent;

    background-repeat:no-repeat;
    background-position:top center;
    background-image:url("../images/index/feature-strip.jpg");
}

#features
{
    overflow:visible;
    height:287px;
}

#feature-photos, #feature-audio, #feature-video, #feature-maps, #feature-info-graphics
{
    overflow:visible;

    position:absolute;
    top:-37px;

    height:200px;
    cursor:default;
}

#feature-photos
{
    left:-25px;

    width:215px;
}

#feature-audio
{
    left:190px;

    width:168px;
}

#feature-video
{
    left:358px;

    width:250px;
}

#feature-maps
{
    left:608px;

    width:280px;
}

#feature-info-graphics
{
    left:863px;

    width:142px;
}

.feature .feature-name
{
    height:15px;
    padding:5px 10px;

    border:0px;
    border-radius:12px;

    position:relative;
    top:10px;

    color:#333333;
    font-size:15px;
    line-height:15px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
}

#feature-photos .feature-name
{
    margin-left:30px;
}

#feature-audio .feature-name
{
    margin-left:8px;
}

#feature-video .feature-name
{
    margin-left:5px;
}

#feature-maps .feature-name
{
    margin-left:85px;
}

#feature-info-graphics .feature-name
{
    margin-left:18px;
}

.feature:hover .feature-name
{
    background:#333333;
    color:white;
}

.feature .callout h3
{
    font-size:25px;
    margin-bottom:10px;
}

    #features .hint
    {
        display:block;

        margin:160px auto 0px auto;

        width:250px;
    }

    #features .hint:after
    {
        content:"Rollover a feature to learn more";
    }

    @media  only screen and (min-device-width: 768px) and (max-device-width: 1024px),
            only screen and (max-device-width: 480px)
    {
        #features .hint:after
        {
            content:"Tap on a feature to learn more";
        }
    }

#footer
{
    height:418px;

    background-repeat:no-repeat;
    background-position:center;
    background-color:black;
    background-image:url("../images/index/gore-solo.jpg");
}

    #footer h3
    {
        margin-top:46px;
        font-size:25px;
        color:white;
    }

    #footer p
    {
        color:white;
        font-size:18px;
        line-height:21px;
        margin-top:-10px;
    }

    #footer-content
    {
        width:540px;
    }

    #footer ul.logo-roll
    {
        list-style:none;

        height:52px;
        margin-top:37px;
    }

    #footer ul.link-roll
    {
        list-style:none;

        height:20px;
        margin-top:49px;
    }

    #footer ul.logo-roll li
    {
        margin-right:45px;
        float:left;
    }

    #footer ul.link-roll li
    {
        color:#5e5e5e;
        font-size:12px;
        font-weight:bold;
        margin-right:20px;
        float:left;
    }

    #footer ul.link-roll li:last-child
    {
        margin-left:20px;
    }

    #footer a, #footer a:hover, #footer a:visited
    {
        color:#5e5e5e;
        font-size:12px;
        font-weight:bold;
        text-decoration:none;
    }

#contents
{
    height:702px;
    overflow:visible;
    -webkit-tap-highlight-color:transparent;
}

    #contents > h2
    {
        margin:-6px 0 0 -2px;
        margin-bottom:22px;
    }

    #contents .callout h3
    {
        margin-bottom:5px;
        font-size:21px;
        font-weight:normal;
        word-spacing:-2px;
    }

    #contents .callout h4
    {
        margin-bottom:15px;

        font-size:21px;
        font-weight:bold;
        word-spacing:-2px;
    }

    #contents ul
    {
        list-style:none;
    }

    #contents ul li a, #contents ul li a:hover, #contents ul li a:visited
    {
        display:inline-block;

        padding:3px 10px;

        border:0px;
        border-radius:12px;

        cursor:default;

        color:#999999;
        font-size:14px;
        line-height:17px;
        font-weight:bold;
        text-transform:uppercase;
        text-decoration:none;
    }

    #contents ul li
    {
        position:relative;
        margin-left:-8px;
    }

    #contents ul li a.active
    {
        background:#333333;
        color:white;
    }

    .gallery
    {
        top:60px;
        right:23px;
        position:absolute;

        width:585px;
        height:466px;

        background:url(../images/index/chapters/0.0.jpg);
    }

    #contents .hint:after
    {
        content:"Rollover a chapter to learn more";
    }

    @media  only screen and (min-device-width: 768px) and (max-device-width: 1024px),
            only screen and (max-device-width: 480px)
    {
        #contents .hint:after
        {
            content:"Tap on a chapter to learn more";
        }
    }