.teaser { font-size: 12px; font-style: italic; margin-top: 10px; }
.section-nav {display: none;}
div.article {width: 100%; margin: 0; padding-top: 35px; margin-bottom: 40px; }
.aside  {display: none !important;}
.interactive-body {float: left; width: 100%;}
.byline { display: none; }

.subtitle{font-size:1.45em;font-family:"Miller Headline Roman","Times New Roman",Times,Georgia,serif;max-width:100%; color: #464646}
p.subtitle{margin: 0}

#source-and-credit{width:100%;overflow:hidden;margin: 0; color: #999; font-size: 0.65em}
#source-and-credit p{margin:0;padding:0}
#source-and-credit .credit{margin:.25em 0 0 0;text-transform:uppercase;text-align: right}

.main-hed { padding-bottom: 0px; }
#stormMap {
    border: 1px #bbb solid;
    display: inline;
    height: 400px;
    float: left;
    width: 100%;
    margin-top: 10px;
}

.legend {
    visibility: hidden;
    position: relative;
    left: 0px;
    bottom: 10px
    margin-top: 240px;
    z-index: 10;
    background: #fff;
    padding: 10px;
    -moz-box-shadow:    1px 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 1px 2px 2px #ccc;
    box-shadow:         1px 1px 2px 2px #ccc;
    }

.showLegend { font-size: 12px; font-family: "Benton Sans Bold",arial, helvetica, verdana, sans-serif; color: #444; cursor: pointer; }
.showLegend:hover { color: #000; }
.legendPic { width: 100px; height: 100px;  }
.explainer {
    font-family: "Benton Sans",Helvetica, Arial, Verdana;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.hashTag { background: #eee; color: #333; font-size: 12px; border: 0px #fff solid; border-radius: 6px; padding: 10px; margin: -10px 0 -38px; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; }
.hashTag:hover { background: #E6F5E6; }
.hashTagHeader { display: inline; color: #333; text-decoration: none; font-size: 15px; font-weight: bold; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out;}
.hashTagHeader:hover { color: green; }
.explainer2 {
    float: left;
    width: 100%;
    font-family: Helvetica, Arial, Verdana;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* full width graphic */
.section-nav {display: none; }
div.article {width: 100%;margin: 0;}
.aside {display: none;}
.interactive-body {float: left; width: 100%;}

.appContainer { margin-bottom: 30px;
float: left;
width: 100%;
}
.byline { display: none; }
.onMap { font-size: 10px; font-weight: bold; cursor: pointer; border: 1px solid #bbb; border-radius: 6px; padding:2px; background: #eee; color: #000; width: 60px; margin-top: 7px; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
.onMap:hover { opacity: 0.5; }
.popDate { font-size: 10px; text-transform: uppercase; }
.popHeadline { font-family: "Benton Sans Bold", "Arial Black", Arial, Helvetica; font-size: 16px; line-height: 18px; margin: 5px 0 5px;}
.popImage { width: 250px; }
.popImageDirect {border: solid 1px #333; width: 100%; }
.popText { font-family: "Benton Sans","Arial", "Helvetica", sans-serif; font-size: 12px; }
.popLink { font-family: "Benton Sans","Arial", "Helvetica", sans-serif; font-weight: bold; margin-top: 10px; font-size: 14px; text-align: left;  }
.popReporter { font-size: 12px; font-style: italic; text-align: right; }
.findOnMapPointer { font-family: "Benton Sans Bold","Arial", "Helvetica", sans-serif; font-size: 12px;}

.rightSide { float: left; width: 100%;  }
.mostRecent { width: 100%; border-top: #666 solid 1px; display: block; height: 555px; overflow: scroll;}
.cityFilter { font-family: "Benton Sans Bold", "Arial Black", Arial, Helvetica; font-size: 13px; float: right; display: inline; margin-bottom: 5px;}
#inStateForm { font-family: "Benton Sans Bold", "Arial Black", Arial, Helvetica; font-size: 15px; background: transparent; border: #ccc solid 1px; }
.mostRecentHeader { font-size: 18px; font-family: "Benton Sans Bold", Helvetica, Arial, sans-serif; margin: 20px 0 -5px; }
.recentExplainer { float: right; font-family: arial, helvetica, verdana; font-size: 11px; font-weight: 100; margin-left: 1%; visibility: visible; }
.loading { text-align: center; font-size: 14px; font-weight: bold; margin-top: 5%;}
.recentItem { 
    font-family: Arial;
    font-weight: normal;
    font-size: 12px;
    width: 94%;
    margin: 6px 0 4px; 
    border: 1px #bbb solid;
    border-radius: 2px;
    -moz-box-shadow:    .5% .5% 1% 1% #ccc;
    -webkit-box-shadow: .5% .5% 1% 1% #ccc;
    box-shadow:         .5% .5% 1% 1% #ccc; 
    padding: 2%;  
    }
.recentDate {  font-size: 11px; text-transform: uppercase; display: inline; margin-right: 5px; color: #aaa; } 
.recentHeadline { font-family: "Benton Sans Bold", Helvetica, Arial, sans-serif; display: block; font-size: 15px; color: #000; margin: 0; }
.recentLink { display: inline; font-size: 12px; }
.recentText { font-size: 12px;  display: inline; color: #444; margin-right: 10px; }
.recentPic { border: #aaa solid 1px; display: block; }
.reload { width: 15px; height: 15px; float: right; display: inline; opacity: 0.4; cursor: pointer; margin-top: 2px;}
.reload:hover { opacity: 0.7; }
.reload:click { opacity: 1; } 
    .statusBar {
    border: 1px solid #ccc;
    height: 18px;
    width: 100%;
    margin-left: -1.7%;
    background: #eee;
    color: #777;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding:3px;
    text-align: center;
    }

#theTop {
    float: left;
    text-align: left;
    }
#backToTop { margin-right: 20px; font-weight: 100; }



@media screen and (min-width: 680px) {
    .legendPic { width: 120px; height: 120px; }
    .popImage { width: 250px; }
    .popImageDirect {border: solid 1px #333; width: 100%; }
    #stormMap {
    border: 1px #bbb solid;
    display: inline;
    height: 500px;
    float: left;
    width: 66%;
    }
    .rightSide {
    display: inline; float: right; width: 31%; overflow: visible;
    }
    .mostRecentHeader { font-size: 18px; font-family: "Benton Sans Bold", Helvetica, Arial, sans-serif; margin: 0px; }
    .recentExplainer { float: right; visibility: hidden; width: 0; }
    .mostRecent {
    width: 100%;
    border-top: #666 solid 1px;
    margin-left: 2px;
    height: 455px;
    overflow: scroll;
    }
    .hashTag { background: #eee; color: #333; font-size: 12px; border: 0px #fff solid; border-radius: 6px; padding: 10px; margin: -10px 0 10px; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; }
    .loading { text-align: center; font-size: 14px; font-weight: bold; margin-top: 40%;}
    .recentDate { font-size: 11px; text-transform: uppercase; color: #aaa; } 
    .recentHeadline { font-size: 15px; color: #000; margin: 0px 0 4px; }
    .recentPic { width: 100%; border: #aaa solid 1px; }
    .recentItem { 
    font-size: 12px;
    width: 92%;
    margin: 4px 0 6px 0; 
    border: 1px #bbb solid;
    border-radius: 2px;
    -moz-box-shadow:    1px 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 1px 2px 2px #ccc;
    box-shadow:         1px 1px 2px 2px #ccc; 
    padding: 3%;  
    }   
    
    .legend {
    visibility: visible;
    position: absolute;
    left: 0px;
    bottom: 20px;
    margin: 340px 0 0 0;
    z-index: 10;
    background: #fff;
    padding: 10px;
    z-index: 10;
    -moz-box-shadow:    1px 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 1px 2px 2px #ccc;
    box-shadow:         1px 1px 2px 2px #ccc; 
    }
}