/* phone.css - map styles viewports with screen widths less than 768px */

/* Hide timescale slider on phones to reduce clutter */
#slider-range {
    display: none;
}

/* Responsive CSS added 2015-01-20 by SL */

/* Splash styles */

div#fullintro {
    width: 320px;
    padding-top: 40px;
}

div.intro_block {
    padding: 0 10px;
    width: 300px;
}

.intro_block img {
    width: 280px;
    height: 54px;
}

div.intro_block h1 {
    font-size: 40px;
    margin: 0;
    line-height: normal;
}

p.intro_bigtxt {
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: normal;
}

p.intro_bigtxt span {
    font-size: 20px;
}

div.intro_maplink_frame {
    padding-top: 330px;
}

div.intro_gotomap {
    left: 10px;
    top: 10px;
}

div.intro_maplink {
    width: 320px;
    marign-top: -40px;
}

div.intro_maplink p, div.intro_maplink span {
    font-size: 18px;
}

div.loadpercent {
    top: 300px;
}


div.intro_gotomap p {
    font-size: 14px;
}

/* Sidebar styles */

div.sidebartitle {
    width: 280px;
}

#sidebar .sidebartitle p, #sidebar .sidebartitle p b, #sidebar .sidebartitle p i {
    font-size: 20px;
    line-height: 22px;
    padding-top: 15px;
}

div#sidebar, div#sidebarBehind {
    width: 280px;
}

#maplabel {
    z-index: 100;
}

#sidebar p {
    margin: 0 0 10px 14px;
}

#sidebar p.layerinfokey {
    margin: 0 0 2px;
    padding: 0 0 2px 12px;
}

#sidebar div.sidebar_section_container {
    width: 280px;
}

.sidebar_section {
    clear: both;
}

.sidebar_section.js_legend .sidebar_section_container > div {
    width: 280px!important;
}

.sidebar_section.js_legend .sidebar_section_container > p {
    width: 260px!important;
}

.js_colorLegend {
    padding-left: 0!important;
}

#sidebar h3.bar {
    margin: 0 0 7px 10px;
}

div.chartframe {
    margin-left: 10px;
}

#sidebar div.storylegend {
    float: left;
    margin-bottom: 6px;
    width: 250px;
}

#sidebar p.legendicon {
    height: 30px;
}

.chartbody > div {
    margin-left: 0!important;
}

.layerset_container .transSlider {
    display: none;
}

#sidebar .check, .check {
    margin-left: 12px;
}

#sidebar h3.layerset, #sidebar h3.layerset_on {
    margin-left: 14px;    
}

#sidebar p.layers {
    margin-left: 6px;
}

#sidebar div.kpi, #sidebar div.kpi-hilite {
    width: auto;
}

div.infointro h2, #sidebar div.sidebar_section_container h2 {
    clear: both;
    margin: 8px 20px 5px 14px;
}

#sidebar p.showmap {
    float: left;
    margin-left: 70px;
}

div.legendclass.tree {
    height: 180px;
}

.pieLegendName {
    width: 100px;
}

.js_selectState.selectState {
    margin-left: 81px;
}

.chartContainerWorldwide .chartframe {
    height: 220px;
}

#sidebar div.kpi-mortalitym, #sidebar div.kpi-mortalityc {
    padding-left: 15px;
}

/* Social panel */

.socialpanel {
    float: right;
    width: 300px;
}

/* Media panels */

#storyContainer.mediabox {
    left: 0!important;
    top: 0!important;
    width: 100%;
    height: 100%;
}

#storyContainer > div.mediabox {
    margin: 10px auto;
    width: 95%;
}

.mediabox .titleframe {
    height: auto!important;
}

.mediabox div.storyelems {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

div.mediabox div.storytxt p .leadin {
    display: inline-block;
}

div.mediabox div.storytxt p {
    padding: 0 35px 12px 15px;
}

div.mediabox div.storytxt h2 {
    padding: 0 0 4px 15px;
}

div.mediabox div.storytxt .photobig {
    height: auto;
    max-width: 100%;
    margin: 2px auto 0;
    display: block;
}

storyphotocontainer, .storyphotocontainer img {
    height: auto;
    max-width: 100%;
}

div.mediaframe div.mediaboxclose, div.titleframe div.mediaboxclose {
    background: url("../images/infowindow/btn_close.gif") no-repeat scroll 15px 15px rgba(0, 0, 0, 0);
    padding: 15px;
}

.storyelems .storytxt .mediaframe .mediaboxclose {
    display: none;
}

/* Header styles */

div.headernav {
    left: 0;
    width: 480px;
}

div.headernav ul {
    display: none;
}

div.headertitle {
    width: 300px;
}

div.headertitle img {
    margin-left: -15px;
}

div.headertitle h1 {
    padding: 9px 0 0;
}

span.deleteicon span {
    right: 0;
}

div.headernav #helplink {
    height: 37px;
}

@media screen and ( max-width: 375px ) {

    div.mediabox div.mediaframe {
        padding: 0 7px;
    }

    .mediabox .storyelems .storytxt .mediaframe .photo {
        width: 100%;
    }

    .mediabox .mediaframe .arrowleft, .mediabox .mediaframe .arrowright {
        margin: 135px 0 0 0;
        position: absolute;
    }
    .mediabox .mediaframe .arrowleft {
        left: 10px;
    }
    .mediabox .mediaframe .arrowright {
        right: 10px;
    }
}

@media screen and ( min-width: 376px ) and ( max-width: 767px ) {

    div.mediabox div.mediaframe {
        padding: 0 7px;
    }

    .mediabox .storyelems .storytxt .mediaframe .photo {
        float: none;
        margin: 0 auto;
        width: 376px;
    }

    .mediabox .mediaframe .arrowleft, .mediabox .mediaframe .arrowright {
        margin: 135px 0 0 0;
        position: absolute;
    }                                                                    
    .mediabox .mediaframe .arrowleft {
        left: 30px;
        top: 0;
    }
    .mediabox .mediaframe .arrowright {
        right: 30px;
        top: 0;
    }   
}


@media screen and ( max-width: 420px ) {

    #menu_container {
        height: 90px!important;
    }

    #header {
        height: 90px!important;
        min-width: 320px;
    }

    #map {
        top: 90px!important;
    }

    div.headernav input.searchfield {
        float: left;
        margin: 54px 0 0 5px;
        width: 280px !important;
    }

    span.deleteicon span {
        left: 286px;
        top: 58px;
    }

    #popupMenu {
        left: 5px!important;
    }

    div#sidebar {
        top: 90px;
    }

    div.headernav #helplink {
        height: 37px;
        float: left;
        margin-left: -7px;
    }

    div.mediabox div.storytxt .photoright {
        display: block;
        float: none;
        margin: 2px auto 0;
        padding: 0 0 10px 10px;
    }

}

@media screen and ( min-width: 421px ) {

    div.loadpercent {
        top: 275px;
    }

    body.aidmap div#fullintro {
        background: url("../images/intro/bigmap_dblfade.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

    div.intro_block {
        width: 470px;
    }

    div.intro_maplink_frame {
        padding-top: 250px;
    }

    p.intro_bigtxt, p.intro_bigtxt span {
        font-size: 16px;
    }

    div.intro_maplink {
        width: 420px;
    }

    div.headernav input.searchfield {
        margin: 14px 5px 0;
        width: 130px !important;
    }

    span.deleteicon span {
        right: 6px;
        top: 18px;
    }

    .socialpanel {
        float: right;
        width: 420px;
    }

    .popupmenu.slideMenu {
        left: 225px!important;
    }

    div.mediabox div.storytxt p {
        font-size:  13px!important;
    }

}

@media screen and ( min-width: 560px ) {

    div.headernav {
        width: 560px;
    }

    div.headernav input.searchfield {
        margin: 14px 0 0 5px;
        width: 210px !important;
    }

}

@media screen and ( min-width: 640px ) {

    div.headernav {
        width: 640px;
    }

    div.headernav input.searchfield {
        margin: 14px 10px 0 5px;
        width: 240px !important;
    }

    span.deleteicon span {
        right: 12px;
    }

}

@media screen and ( min-width: 700px ) {
    div.headernav {
        width: 700px;
    }
}

@media screen and ( min-height: 300px ) {
    div.storyelems  {
         max-height: 230px;
    }
}

@media screen and ( min-height: 321px ) {
    div.storyelems  {
         max-height: 270px;
    }
}

@media screen and ( min-height: 375px ) {
    div.storyelems  {
         max-height: 285px;
    }
}

@media screen and ( min-height: 400px ) {
    div.storyelems  {
         max-height: 300px;
    }
}

@media screen and ( min-height: 470px ) {
    div.storyelems  {
         max-height: 360px;
    }
}

@media screen and ( min-height: 600px ) {
    div.storyelems  {
         max-height: 520px;
    }
}

@media screen and ( min-height: 700px ) {
    div.storyelems  {
         max-height: 600px;
    }
}