/* these are the ideal media queries
only screen and (min-width:480px)
only screen and (min-width:768px)
only screen and (min-width:960px)
*/
/*rescuebase*/

/*body.dNonMobile*/ /*this means it's desktop or tablet. can use this to target desktop when the screen is small like a mobile if needed. are doing this to view the 
mobile hero image on desktop. only use if media queries can't do what you need  */
/*body.dMobile */ /*can use this to target mobile only. only use if can't use media queries*/
/*body.rescuebase*/ /*use this to target this page*/
/*body.noMediaQuery*/ /*use this to target devices that don't support media queries such ie8 and below*/

#map-canvas { background-color:#000;display:none;}

.rescuebase #hero .innerContainer {
    margin-top:50%;
    text-align:center;
}
#detailreveal { 
    width:100%;padding:0 0 50px 0;background-color:#8B7D70;text-align:center;color:#fff;


    -moz-box-shadow:    inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
    -webkit-box-shadow: inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
     box-shadow:        inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
 
    
}
.baseslist h3 { font-size:1.55em;}


#detailreveal .inner { 
    max-width:700px;margin:0 auto;
    padding-top:40px;
    position:relative;
}
#detailreveal .inner .header { 
   padding:0 0 15px 0;border-bottom:1px solid #A99F95;
}
#detailreveal .inner .content { 
    padding:0px 0 25px 0;
}
#detailreveal .details-close-btn{
    position: absolute;
    right: 0;
    top: 0;
    cursor:pointer;
    height:auto;
    width:auto;
}
    #detailreveal .details-close-btn a {
        display:block;
        padding:20px 10px 10px;
        width: 22px;
        height: 22px;
    }


.dMobile #detailreveal .details-close-btn {
    right: 20px;
}

.airRescue #articleHeading img,
.rescuebase #articleHeading img {
    vertical-align: top;
    max-width:620px;
}

.airRescue .articleDetailPerson,
.rescuebase .articleDetailPerson {
    background-color: #621849;
    padding:22px 20px 17px;
    color:#fff;
    font-size:1.2em;
}
    .airRescue #articleHeading .copy,
    .rescuebase #articleHeading .copy {
        padding:19px 20px 0;
        font-size:1.15em;
    }

    .airRescue .articleDetailPerson span,
    .rescuebase .articleDetailPerson span {
        display: block;
    }

    .airRescue .articleDetailPerson span.first,
    .rescuebase .articleDetailPerson span.first {
        font-size:1.95em;
        line-height:1em;
    }
        .airRescue .articleDetailPerson span.lr,
        .rescuebase .articleDetailPerson span.lr {
            text-transform: uppercase;
            padding-top:4px;
        }
.dNonMobile .rescuebase #articleListPanel {
    padding-top:0;
}

.pageCtrlWrapper {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom:5px;
}

.dMobile .rescuebase #articleListPanel > .pageCtrlWrapper {
    padding-bottom:25px;
}

.baseshdr { 
    padding-top:19px;text-align:center;
}
.meetTheCrew {
    padding-top:0;
}

.baseshdr h1 { font-size:1.8em;}
.baseshdr h1 {
    font-size: 3.25em;
}
.baseshdr h2 {
    font-size: 2.45em;
}
h2 {
    font-size: 1.65em;
}

.basessubheader { padding:5px 0 0 0;text-align:center;max-width:540px;margin:0 auto;}
.baseslist { max-width:920px;margin:0 auto;padding:0 10px 10px}
.basessubheader p { font-size:1.1em;padding-left:15px;padding-right:15px}
.dMobile .basessubheader p {
    padding-bottom:0;
}
.dMobile .crewbasessubheader p {
    padding-bottom: 15px;
}

.cl { clear:both;}

.stats .stat { padding:10px 15px;text-align:left;}

.rescuebase .content p { text-align:left;display:block;padding:10px 15px;}
.rescuebase .content p span.datavalue { display:inline;padding:25px 10px;}
#rescueDetailWrapper {
    display: block;
}
    /*box-shadow: 2px 0 5px -2px #ccc;*/

.dNonMobile .rescuebase #articleList .scroll-pane {
    height:500px;overflow-y:scroll;
}

#crewOuterWrapper {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom:25px;
}

.dNonMobile #crewOuterWrapper {
    margin-top: 35px;
}

.rescuebase #articleHeading .copyPadding {
    padding: 20px 0 0 20px;
}   
#basename { font-size:2.2em;padding-left:15px;padding-right:15px}
.dMobile #basename {
    text-align: left;
}
.dNonMobile .rescuebase #btnReadStories {
  font-size: 1.15em;
}

.dMobile .rescuebase #btnReadStories {
    margin:0 9%;
    }

@media only screen and (min-width: 500px) 
{
    #map-canvas { display:block;}
    .rescuebase .box
    {
        width:50%;
    }
    .baseshdr h1 {
        font-size:4.85em;
    }

    h2 {
        font-size: 2.65em;
    }

    .basessubheader p {
        font-size: 1.3em;
    }
    .meetTheCrew {
        padding-top:initial;
    }
}


.rescuebase #articleHeading {
    background-color:#fff;
        padding-bottom:30px;

}


#crewOuterWrapper {

}
.seperator { max-width:1020px;height:44px;margin:0 auto;background:transparent url('../img/bases/baseseperator.jpg') no-repeat center top}

ul.bases { padding-left:5px;}
ul.bases li ul { padding-left:0;}
    ul.bases li {
        margin:8px 20px 15px;
        text-align:center;
    }

ul.bases li h3 { color:#621849;font-weight:500;}
    ul.bases li li {
        color: #585b5e;
        font-size:1.1em;
        font-weight:500;
        margin-left: 0;
        margin-right: 0;
        margin-top:15px;
        cursor:pointer;
    }
@media only screen and (min-width: 321px) {
    .dNonMobile .rescuebase #articleListPanel {
        padding: 0 20px;
        max-width: 620px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 721px) 
{
    .stats .stat.stat1 { margin-left:30px;}


.rescuebase .content p span.datavalue { padding:25px 0;display:block;}


    ul.bases { padding-left:40px;}
    .rescuebase #articleHeading .btnPurple {
        width:260px;
        padding:0.5em 0;
    }
   
    ul.bases li{ width:175px;float:left;}

    ul.bases li h3 { margin:0 0 10px 0;color:#611949}
    ul.bases li ul { margin:0;padding:0;}
    ul.bases li li { float:none;display:block;padding:0;cursor:pointer;}
    ul.bases li li:hover { text-decoration:underline;}
    .dn { display:none;}

    .rescuebase .searchCtrl {
        margin-top: 0;
    }

    .rescuebase #articleListPanel {
        padding-top:20px;
    }

#rescueDetailWrapper {
    /*display:none;*/
    max-width:620px;
    display:block;
    margin:0 auto 20px;
}
.rescuebase #articleHeading {
    display: block;
    margin: 0 auto;
}

    .stats { margin:28px 0 30px 0;width:700px;}

    .stats .stat { width:150px;float:left;margin-left:57px;text-align:center;}
    .statvalue { font-size:3.6em;}

    body .content.rescuecontent p {display:block; clear:both;width:700px;border-top:1px solid #9F9388;padding:0;}
    .content p span.datakey { display:block;width:179px;float:left;text-align:left;padding:25px 0;font-size:1.4em;}
    .content p span.datavalue { display:block;width:521px;float:left;text-align:left;padding:25px 0;font-size:1.2em;}

    .db { display:block;}
    #baseURL { padding:10px 0 5px;clear:both;}
    #baseURL a { color:#FFFFFF;}



    .dNonMobile .rescuebase #hero 
    {
        background:none;
    }
    .rescuebase #hero .container
    {
        max-width:1800px;
    }

    .dNonMobile .rescuebase #hero .scaleImg 
    {
        display:block;    
    }     
    .rescuebase #hero, #hero
    {
        max-width:1800px;   
    }     
    .rescuebase #hero .innerContainer 
    {
        margin-top:22%;
        color:#fff;
    }
    .dNonMobile .rescuebase #hero .container 
    {
        padding-top:0;
    }
    .airRescue #hero .innerContainer
    .rescuebase #hero .innerContainer 
    {
        margin-top:23%;
    }
}

@media only screen and (min-width: 950px) {
    #rescueDetailWrapper {
        float: left;
        width: 620px;
    }
    .airRescue .articleDetailPerson, .airRescue #articleHeading .copy,
    .rescuebase .articleDetailPerson, .rescuebase #articleHeading .copy {
        padding-left:60px;
        padding-right:60px;
    }
    .airRescue #articleListPanel,
    .rescuebase #articleListPanel {
        padding-top: 0;
    }

    .airRescue #articleListPanel,
    .rescuebase #articleListPanel {
        float: left;
        width: 320px!important;
        padding-left: 0;
    }

    .dNonMobile .airRescue #articleListPanel,
    .dNonMobile .rescuebase #articleListPanel {
        padding:0;
    }
}