/*   Main.css   */
body {
    margin: 0;
    padding: 0;
    background: #29ABF7 url(../images/base_page_bg_huge.jpg) center 38px fixed;
    font-family: Calibri, sans-serif;
}
#announce-bar {
    position: relative;
    margin: 0;
    text-align: center;
    height: 54px;
    width: 100%;
    line-height: 54px;
    background: #fb6b02;
    color: white;
    border-bottom: 1px solid white;
    z-index: 75;
}
#announce-bar h1 {
    margin: 0 auto;
    font-weight: normal;
    font-size: 1.85em;
}
#announce-bar a {
    color: white;
}
#announce-bar a:hover {
    color: darkred;
    text-decoration: none;
}
#announce-bar a.presskit {
    position: absolute;
    top: 10px;
    right: 20px;
    display: block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    width: 100px;
    background: #000;
    color: white;
    border-bottom: 1px solid #cccccc;
    border-top: none;
}
#announce-bar a.presskit:hover {
    background: orange;
}
#announce-bar a.presskit:active {
    background: red;
    color: black;
    border-bottom: none;
    border-top: 1px solid #cccccc;
}
#header-content {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 1024px;
    background: url(../images/video_frame.png) 433px 31px no-repeat;
    height: 442px;
}

#intro-content h1 {
    position: absolute;
    top: 27px;
    left: 12px;
    width: 424px;
    height: 356px;
    text-indent: -9999px;
    background: url(../images/header_logo_tag.png) top left no-repeat;
}

#video-player {
    position: absolute;
    top: 95px;
    left: 476px;
    width: 486px;
    height: 275px;
    margin: 0;
    padding: 0;
}

#main-nav {
    position: absolute;
    z-index: 100;
    top: 387px;
    left: 645px;
}

#main-nav a {
    display: block;
    text-indent: -9999px;
    margin: 0;
    padding: 0;
    width: 78px;
    height: 74px;
    z-index: 100;
    position: absolute;
}

#main-nav a.teaser {
    left: 31px;
    top: 0;
    background: url(../images/teaser_sprite.png) 0 0 no-repeat;
}
#main-nav a.teaser:hover {
    background: url(../images/teaser_sprite.png) -78px 0 no-repeat;
}

#main-nav a.gameplay {
    left: 121px;
    top: 0;
    background: url(../images/gameplay_sprite.png) 0 0 no-repeat;
}
#main-nav a.gameplay:hover {
    background: url(../images/gameplay_sprite.png) -78px 0 no-repeat;
}

#main-nav a.morevids {
    left: 210px;
    top: 0;
    background: url(../images/morevids_sprite.png) 0 0 no-repeat;
}
#main-nav a.morevids:hover {
    background: url(../images/morevids_sprite.png) -78px 0 no-repeat;

}
#content-topper {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 1024px;
    height: 34px;
    background: url(../images/base_topper_bg.png) top center no-repeat;
}
#content-topper h2 {
    display: none;
}

#main-content {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 1024px;
    background: url(../images/base_center_bg.png) top center repeat-y;
}

/* regular page */
p.announcement {
    width: 100%;
    margin: 5px auto;
    font-size: 17px;
    color: white;
}
#game-content {
    position: relative;
    margin: 0 50px;
    padding: 0;
}
.bodycopy {
    width: 400px;
    margin: 3px;
    /*float: left;*/
}
#game-content h2 {
    height: 151px;
    width: 590px;
    margin: 12px auto 10px auto;
    text-indent: -9999px;
    background: url(../images/h_challenge.png) top left no-repeat;
}
#game-content .bodycopy h3 {
    font-size: 22px;
    margin-bottom: 8px;
}
.bodycopy p {
    font-size: 18px;
}
.bodycopy p.lead-in {
    font-size: 20px;
    line-height: 1.15;
}

#intro-content {
    position: relative;
    margin: 0;
    padding: 0;
}
#game-intro {
    position: relative;
    width: 1002px;
    height: 500px;
    margin: 0;
    padding: 0;
    background: url(../images/intro_warren_bg.png) top center no-repeat;
}

#intro-box {
    position: absolute;
    top: 20px;
    right: 101px;
    margin: 0 0 0 9px;
    padding: 0;
    height: 478px;
    width: 442px;
    background: url(../images/info_frame.png) top left no-repeat;
}

.intro-story {
    position: absolute;
    top: 32px;
    left: 53px;
    margin: 13px 0 20px 0;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #1f1e1e;
    width: 344px;
}

.intro-story p, p {
    margin: -1px 0 20px 0;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    color: #1f1e1e;
}
.intro-story p:last-child {
    margin-bottom: 7px;
}
.intro-story span.dropcap-w {
    text-indent: -9999px;
    display: inline-block;
    width: 41px;
    height: 24px;
    background: url(../images/drop_cap_w.png) top left no-repeat;
}
span.dropcap-t {
    text-indent: -9999px;
    display: inline-block;
    width: 21px;
    height: 23px;
    background: url(../images/drop_cap_t.png) 0 -5px no-repeat;
    overflow: visible;
}
#stones {
    margin: 35px auto 20px;
    width: 612px;
    height: 211px;
    text-indent: -9999px;
    background: url(../images/stones.png) top center no-repeat;
}
/** BUY NOW **/
#buynow {
    position: relative;
    margin: 0 auto;
    width: 966px;
}
#buynow h3 {
    text-indent: -9999px;
    display: none;
}
.buybox {
    text-align: center;
    margin: 0 auto;
}
#steambuy {
    margin-bottom: 15px;
}
a.steamlink {
    text-indent: -9999px;
    width: 364px;
    height: 220px;
    display: block;
    margin: 20px auto;
    background: url(../images/steam_bg.png) top center no-repeat;
}
a.steamlink:hover {
    background: url(../images/steam_bg_over.png) top center no-repeat;
}
#quotes {
    width: 230px;
    margin-top: -25px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute;
    left: -274px;
    top: 0;
}
p.quote-body {
    color: white;
    line-height: 1.15;
    font-size: 20px;
}
p.quote-attr {
    text-align: right;
    color: white;
    margin: -10px 0 28px 0;
    font-size: 15px;
    font-style: italic;
}
#quotes a {
    color: yellow;
    text-decoration: underline;
}
#quotes a:hover {
    color: white;
    text-decoration: none;
}
/** SOCIAL MEDIA LINKS **/
.share {
    position: absolute;
    height: 66px;
    width: 176px;
    right: -115px;
    margin: 0;
    padding: 0;
    z-index: 50;
}
.fb-share {
    top: 9px;
}
a.fb {
    display: block;
    width: 66px;
    height: 66px;
    text-indent: -9999px;
    float: left;
    background: url(../images/fb_sprites.png) top left no-repeat;
}
a.fb:hover {
    background: url(../images/fb_sprites.png) -66px 0 no-repeat;
}
.fb-share-button {
    height: 66px;
    line-height: 40px;
    margin-left: 8px;
    float: left;
}
.twitter-share-button {
    /*height: 66px;*/
    /*margin-left: 10px;*/
    /*float: left;*/
}
#twitter-widget-0 {
    position:absolute;
    top: 20px;
    left: 74px;
}
.twitter-share {
    top: 80px;
}
a.twitter {
    display: block;
    width: 66px;
    height: 66px;
    text-indent: -9999px;
    float: left;
    background: url(../images/twitter_sprites.png) 0 0 no-repeat;
}
a.twitter:hover {
    background: url(../images/twitter_sprites.png) -66px 0 no-repeat;
}

/**** Unit Section *****/
#meet-the-druids {
    position: absolute;
    top: 170px;
    left: 417px;
    width: 506px;
    height: 434px;
    background: url(../images/meet_bg_newland.png) top left no-repeat;
}

#meet-the-druids h2 {
    margin: 0 auto 14px auto;
    padding: 0;
    width: 284px;
    height: 32px;
    text-indent: -9999px;
    white-space: nowrap;
    background-image: url(../images/h_meet_bg.png);
    background-size: 284px 32px;
}
#meet-the-druids .rock {
    text-indent: -9999px;
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 179px;
    left: 294px;
    width: 107px;
    height: 94px;
    background-image: url(../images/af_rocks.png);

}

#meet-the-druids a.guardian {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 46px;
    left: 48px;
    width: 67px;
    height: 84px;
    background-image: url(../images/guardian_sprite.png);
}
#meet-the-druids a.guardian:hover {
    cursor: pointer;
}
#meet-the-druids a.wolf {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 52px;
    left: 38px;
    width: 71px;
    height: 84px;
    background-image: url(../images/wolf_sprite.png);
    display: none;
}
#meet-the-druids a.windrider {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 118px;
    left: 183px;
    width: 65px;
    height: 82px;
    background-image: url(../images/windrider_sprite.png);
}
#meet-the-druids a.windrider:hover {
    cursor: pointer;
}
#meet-the-druids a.eagle {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 94px;
    left: 156px;
    width: 103px;
    height: 100px;
    background-image: url(../images/eagle_sprite.png);
    display: none;
}

#meet-the-druids a.snarlclaw {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 147px;
    left: 363px;
    width: 93px;
    height: 82px;
    background-image: url(../images/snarlclaw_sprite.png);
}

#meet-the-druids a.snarlclaw:hover {
    cursor: pointer;
}

#meet-the-druids a.bear {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 129px;
    left: 365px;
    width: 110px;
    height: 102px;
    background-image: url(../images/bear_sprite.png);
    display: none;
}
#meet-the-druids a.waywalker {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 45px;
    left: 309px;
    width: 80px;
    height: 91px;
    background-image: url(../images/waywalker_sprite.png);
}
#meet-the-druids a.waywalker:hover {
    cursor: pointer;
}
#meet-the-druids a.turtle {
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: 64px;
    left: 316px;
    width: 79px;
    height: 76px;
    background-image: url(../images/turtle_sprite.png);
    display: none;
}

#unit-info-box {
    position: absolute;
    top: 175px;
    left: 48px;
    margin: 11px 0 21px 2px;
    font-family: Calibri, sans-serif;
    color: #1f1e1e;
    width: 405px;
    height: 454px;
    display: none;
    background: url(../images/unit_info_box_bg.png) top left no-repeat;
    z-index: 80;

}
#unit-info-box h3 {
    margin: 35px 0 20px 46px;
    text-indent: -9999px;
    height: 58px;
    width: 268px;
}
#unit-info-box h4 {
    font-size: 17px;
    color: #939495;
    margin: 12px 0 8px 1px;
    display: none;
}
#unit-info-box p {
    margin: 2px 50px;
    font-size: 15px;
}
#unit-info-box h4.abilities, #unit-info-box h4.animal-form {
    margin: 29px auto 10px auto;
    display: block;
    text-indent: -9999px;
    height: 32px;
}
#unit-info-box h4.abilities {
    width: 157px;
    background: url(../images/hr_bg.png) top left no-repeat;
}
#unit-info-box h4.animal-form {
    width: 124px;
    background: url(../images/hr_animal_bg.png) top left no-repeat;
}

#unit-info-box .guardian-info h3 {
    background: url(../images/info_h_guardian.png) top left no-repeat;
}
#unit-info-box .windrider-info h3 {
    background: url(../images/info_h_windrider.png) top left no-repeat;
}
#unit-info-box .snarlclaw-info h3 {
    background: url(../images/info_h_snarlclaw.png) top left no-repeat;
}
#unit-info-box .waywalker-info h3 {
    width: 288px;
    background: url(../images/info_h_waywalker.png) top left no-repeat;
}
#unit-info-box .wolf-info h3 {
    background: url(../images/info_h_wolf.png) top left no-repeat;
}
#unit-info-box .eagle-info h3 {
    background: url(../images/info_h_eagle.png) top left no-repeat;
}
#unit-info-box .bear-info h3 {
    background: url(../images/info_h_bear.png) top left no-repeat;
}
#unit-info-box .turtle-info h3 {
    width: 246px;
    background: url(../images/info_h_turtle.png) top left no-repeat;
}

#unit-info-box button.close {
    position: absolute;
    top: 0;
    right: 9px;
    margin: 0;
    padding: 0;
    height: 36px;
    width: 37px;
    border: 0;
    z-index: 100;
    background: url(../images/close_window.png) top left no-repeat;
    cursor: pointer;
}
#unit-info-box button.animal {
    position: relative;
    width: 72px;
    height: 74px;
    margin: 5px auto;
    border: 0;
    cursor: pointer;
    display: block
}
#unit-info-box button.wolf {
    background: url(../images/wolf.png) top left no-repeat;
}
#unit-info-box button.eagle {
    background: url(../images/eagle.png) top left no-repeat;
}
#unit-info-box button.bear {
    background: url(../images/bear.png) top left no-repeat;
}
#unit-info-box button.turtle {
    background: url(../images/turtle.png) top left no-repeat;
}

/* Screens and Media */
#media-files {
    position: relative;
    margin: 18px auto 30px auto;
    padding: 0 10px;
}
#media-files h2 {
    margin: 0 auto 16px auto;
    padding: 0;
    width: 592px;
    height: 153px;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(../images/h_media_bg.png) top center no-repeat;
}
#gallerybox a {
    margin: 20px;
    padding: 0;
    width: 200px;
    height: 140px;
    float: left;
    display: block;
    overflow: hidden;
    border: 2px solid black;
    box-shadow: 2px 2px #000;
}
#gallerybox a img {
    width: 200px;
    height: 140px;
}
#gallerybox a:hover {
    border: 2px solid white;
    box-shadow: none;
}

/* Carousel */
#shotsbox {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
#media-files a.prev, #media-files a.next {
    display: block;
    height: 34px;
    width: 37px;
    text-indent: -9999px;
}
#media-files a.prev {
    position: absolute;
    top: 70px;
    left: 2px;
}
#media-files a.next {
    position: absolute;
    top: 70px;
    right: 2px;
}
#media-files a.prev {
    background: url(../images/prev-sprite.png) 0 0 no-repeat;
}
#media-files a.prev:hover {
    background: url(../images/prev-sprite.png) -37px 0 no-repeat;
}
#media-files a.next {
    background: url(../images/next-sprite.png) 0 0 no-repeat;
}
#media-files a.next:hover {
    background: url(../images/next-sprite.png) -37px 0 no-repeat;
}
#shotsbox .caroufredsel_wrapper {
    margin: 0 auto;
}

/* Thoughtshelter Games footer */
#thoughtshelterbox, #sabox {
    margin: 30px auto 30px auto;
    padding: 0;
    text-align: center;
}
#thoughtshelterbox p {
    font-size: 12px;
    color: #464646;
    margin-top: 12px;
}

#thoughtshelterbox a {
    width: 292px;
    height: 187px;
    margin: 0 auto;
    padding: 0;
    display: block;
    background: url(../images/thoughtshelter_logo.png) top left no-repeat;
    text-indent: -9999px;
    border: none;
}
#sabox a {
    width: 201px;
    height: 68px;
    margin: 0 auto;
    padding: 0;
    display: block;
    background: url(../images/supattack_logo.png) top left no-repeat;
    text-indent: -9999px;
    border: none;
}
/* Druid's Duel footer */
#ddbox {
    margin: 7px auto -15px auto;
    padding: 0;
    text-align: center;
}
#ddbox a {
    width: 376px;
    height: 271px;
    margin: 0 auto;
    padding: 0;
    display: block;
    background: url(../images/addlogo.png) top left no-repeat;
    text-indent: -9999px;
    border: none;
}

/* Unit Footer Art */
#footer {
    text-indent: -9999px;
    margin: 0 auto;
    height: 241px;
    width: 668px;
    background: url(../images/bottom_units.png) top left no-repeat;    
}

/** Slings & Arrows (really, just arrows) **/
.arrow-box {
    width: 114px;
    margin: 10px auto;
}
.arrow-box-single {
    width: 52px;
    margin: 10px auto;
}

a.arrow {
    display: block;
    width: 51px;
    height: 50px;
    float: left;
}

.arrow-up {
    background: url(../images/arrow_sprite.png) 0 0 no-repeat;
    margin-right: 12px;
}
.arrow-up:hover {
    background: url(../images/arrow_sprite.png) -51px 0 no-repeat;
}

.arrow-down {
    background: url(../images/arrow_sprite.png) 0 -50px no-repeat;
}
.arrow-down:hover {
    background: url(../images/arrow_sprite.png) -51px -50px no-repeat;
}

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

/** Media Queries **/
@media only screen
and (max-width : 1550px) {
    #quotes {
        position: relative;
        margin: 0 auto;
        width: 80%;
        left: auto;
        height: auto;
        background: none;
    }
    p.quote-attr {
        text-align: left;
        color: black;
        margin-left: 70px;
    }
    p.quote-body {
        color: black;
    }
    #quotes a {
        color: black;
    }
    #quotes a:hover {
        color: #0092ef;
    }
}


/*@media only screen 
and (-webkit-min-device-pixel-ratio: 2) { 
       /* Retina-specific stuff here 
       #meet-the-druids a.guardian {
           background-image: url(../images/guardian_sprite_hires.png) no-repeat;
           background-size: 92px 96px;
       }
       
       #meet-the-druids a.windrider {
           background-image: url(../images/windrider_sprite_hires.png) no-repeat;
           background-size: 87px 97px;
       }
       
       #meet-the-druids a.snarlclaw {
           background-image: url(../images/snarlclaw_sprite_hires.png) no-repeat;
           background-size: 89px 97px;
       }
       
       #meet-the-druids a.waywalker {
           background-image: url(../images/waywalker_sprite_hires.png);
           background-size: 110px 108px;
       }
       
       #meet-the-druids h2 {
           background-image: url(../images/h_meet_bg.png);
           background-size: 284px 32px;
}

/* Mail Chimp
#social-media #mc_embed_signup  {
    display: inline-block;
    margin-left: 40px;
}
#social-media #mc_embed_signup form {
    display: inline-block;
    margin: 0;
    padding: 2px;
}

#social-media a.hidden {
    display: none;
}

#social-media a {
    display: block;
    width: 29px;
    height: 29px;
    border: none;
    margin: 0 3px;
    float: left;
    text-indent: -9999px;
}*/