div { }
    * { margin:0; padding:0; }
/*
 Orange: f8bd31
 Red: f36c2c
 Gray: cccccc
/*
body { margin: 0 auto; width: 100%; }
*/
    body, p, div { font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #333 }
    p { margin: 10px 0 }

 
    body { background: #f4f2ea; margin: 0; padding: 0 }

    img { border-width: 0 }

    h1 { font-weight: normal; font-size: 20px;
        font-family: 'Oswald', arial, helvetica, sans-serif;
        padding-bottom: 1px; background: #ccc; color: #fff; margin-left: -17px;
        padding-left: 35px; padding-top: 3px; padding-bottom: 3px;
        background-image: -webkit-gradient(linear, left top, right top, from(#ccc), to(#bbb)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(left, #ccc, #bbb); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(left, #ccc, #bbb); /* FF3.6 */
        background-image:     -ms-linear-gradient(left, #ccc, #bbb); /* IE10 */
        background-image:      -o-linear-gradient(left, #ccc, #bbb); /* Opera 11.10+ */
        background-image:         linear-gradient(left, #ccc, #bbb);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb'); /* IE6ÐIE9 */ }
    .h1corner { left: -17px; top: -1px; position: relative; float: left }
    h1.top { background-color: #f8b32f; font-size: 22px; padding-top: 5px; padding-bottom: 5px; 
        background-image: -webkit-gradient(linear, left top, right top, from(#f8b32f), to(#eaa92c)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(left, #f8b32f, #eaa92c); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(left, #f8b32f, #eaa92c); /* FF3.6 */
        background-image:     -ms-linear-gradient(left, #f8b32f, #eaa92c); /* IE10 */
        background-image:      -o-linear-gradient(left, #f8b32f, #eaa92c); /* Opera 11.10+ */
        background-image:         linear-gradient(left, #f8b32f, #eaa92c);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8b32f', EndColorStr='#eaa92c'); /* IE6ÐIE9 */
    }
    h1 a { color: #fff }
    h2 { font-weight: normal; font-size: 18px; color: #333; margin: 10px 0 }
    h3 { font-weight: normal; font-size: 16px; color: #333; margin: 10px 0 }

    a { text-decoration: none; color: #f36c2c }

    div#wrap { width: 960px; margin: 5px auto; background: url("/img/logo/logo_600px_stamp_light_grain.png") no-repeat scroll 800px -50px }
    div#header { width: 100%; position: relative; height: 145px; background: #828178 /*#7b7a70*/ }
    div#headerInner { 
        width: 960px; margin: 0 auto; background-color: #777675;
        background-image: -webkit-gradient(linear, left top, right top, from(#777675), to(#828178)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(left, #777675, #828178); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(left, #777675, #828178); /* FF3.6 */
        background-image:     -ms-linear-gradient(left, #777675, #828178); /* IE10 */
        background-image:      -o-linear-gradient(left, #777675, #828178); /* Opera 11.10+ */
        background-image:         linear-gradient(left, #777675, #828178);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777675', EndColorStr='#828178'); /* IE6ÐIE9 */
    }
    div#headerIcon { float: left; width: 124px; height: 145px; background-image: url('/img/icon_slice.png'); vertical-align: center; background-repeat: no-repeat }
    div#headerMain { width: 817px; float: left; margin-top: 5px; margin-left: 5px }
    div#headerLeft { width: 291px; float: left; height: 100%; margin-top: 29px }
    div#logo { margin-top: 10px }
    div#loginMenu { text-align: right; text-shadow: 0 1px 1px #fff }
    div#loginMenu a { color: #000 }
    div#search { padding-left: 40px; padding-top: 10px; margin-bottom: 10px; margin-top: 10px }
    div#headerRight { width: 526px; float: right; height: 100% }
    div#content { width: 960px; margin: 25px auto 0 auto; background: #fff;
        min-height: 500px; z-index: 999; border-width: 0 1px 1px 1px;
        border-color: #ccc; border-style: solid;
        box-shadow: 0 4px 4px #888;
        -moz-box-shadow: 0 4px 4px #888; 
        -webkit-box-shadow: 0 4px 4px #888; }
    div#contentLeft { width: 593px; float: left; height: 100%; background: #fff }
    div#contentLeftInner { background: #fff }
    div#contentFullInner { background: #fff }
    div#contentRight { width: 366px; float: left; /*margin-left: 10px;*/ margin-bottom: 10px; background: #fff; border-left: 1px solid #ccc }
    div#contentRightInner { background: #fff }

    div#mainTabs { height: 38px; width: 830px; float: left; background: #6c6a62; margin-top: 4px }
    div#mainTabs ul { list-style: none outside none; margin: 0 }
    div#mainTabs li { display: inline; margin: 0; padding: 0 }
    div#mainTabs li a { 
        font-size: 18px;
        float: left;
        margin-right: 10px;
        margin-top: 2px;
        padding: 5px 20px; 
        text-decoration: none; 
        color: #fff 
    }
    div#mainTabs li a.active {
        background-color: #f4f2ea; color: #000
    }
    div#social { margin-top: 3px }
    div#social a { padding-left: 2px }
    div.tempUnit { height: 30px; width: 30px; -moz-border-radius: 15px;
        border-radius: 15px; padding: 10px; display: inline; background: #ccc; color: #6c6a62; font-size: 18px }
    
    

    div.rightBox { border: 1px solid #fff }
    div.rightBoxTitle, div.rightBoxTitleTop {
        font-family: 'Oswald', arial, helvetica, sans-serif;
        background: #ccc; color: #fff; padding: 3px 20px; font-size: 18px
    }
    div.rightBoxTitleTop { }
    div.rightBoxContent { 
        padding: 10px; 
        /* background: #f8f8f8; */
        background-color: #f8f8f8;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e1e1db)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(top, #f8f8f8, #e1e1db); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(top, #f8f8f8, #e1e1db); /* FF3.6 */
        background-image:     -ms-linear-gradient(top, #f8f8f8, #e1e1db); /* IE10 */
        background-image:      -o-linear-gradient(top, #f8f8f8, #e1e1db); /* Opera 11.10+ */
        background-image:         linear-gradient(top, #f8f8f8, #e1e1db);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8', EndColorStr='#e1e1db'); /* IE6ÐIE9 */
    }
    
    
    div.newsItem { 
        padding: 15px;
        border-width: 0 0 1px 1px; border-color: #fff;
        /* background: #f8f8f8; */
        background-color: #f8f8f8;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e1e1db)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(top, #f8f8f8, #e1e1db); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(top, #f8f8f8, #e1e1db); /* FF3.6 */
        background-image:     -ms-linear-gradient(top, #f8f8f8, #e1e1db); /* IE10 */
        background-image:      -o-linear-gradient(top, #f8f8f8, #e1e1db); /* Opera 11.10+ */
        background-image:         linear-gradient(top, #f8f8f8, #e1e1db);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8', EndColorStr='#e1e1db'); /* IE6ÐIE9 */
    }
    div.newsItemTitle { font-size: 13px }
    div.newsItemTeaser { margin: 3px 0; overflow: hidden; color: #474747 }


    div#subTabs { width: 600px; background: #fff; margin-top: 15px }
    div#subTabs ul { list-style: none outside none; margin: 0 }
    div#subTabs li { display: inline; margin: 0; padding: 0; }
    div#subTabs li a { 
        font-size: 11px;
        font-weight: bold;
        /*float: left;*/
        margin-right: 15px; 
        padding: 5px 8px;
        color: #999; 
        text-decoration: none;
        background: #eee;
        /*border-bottom: 2px solid #ccc*/
    }
    div#subTabs li span { color: #999; padding: 5px; position: relative; left: -18px; top: -5px; font-size: 10px; font-weight: bold }
    div#subTabs li a.active {
        background-color: #f8bd31; color: #fff
        /*border-bottom: 2px solid #000;*/
    }

    div#twitter { height: 28px; width: 960px; background: #000; color: #fff; font-size: 11px }
    div#twitterLeft { width: 70px; border-right: 1px solid #fff; float: left; background: #000; color: #fff; padding: 5px 10px; text-align: center; color: #eee }
    div#twitterRight { float: left; width: 840px; background: #000; padding: 5px 10px; color: #eee }
    div#footer { background: #777675; width: 100%; height: 100px }
    div#footerInner { width: 960px; color: #666; margin: 0 auto; color: #fff; padding-top: 20px }
    div#footerInner a { color: #fff }
    div#slogan { color: #f8b32f; width: 280px; font-size: 16px; float: left; font-family: "Oswald", arial, helvetica, sans-serif }
    div#copyright { float: left; width: 250px; padding-top: 4px; font-size: 12px; color: #fff}
    div#footerLinks { float: left; width: 422px; padding-top: 4px; text-align: right; font-size: 12px; color: #fff }

    div#background { z-index: -99; position: absolute; left: 550px }

    input.searchBox { 
        /*margin: 2px 0 5px 20px;*/ 
        font-size: 18px; 
        height: 28px; 
        padding: 5px; 
        vertical-align: top; 
        border: 0 solid #fef5e2;
        /*border: 1px solid #999;*/
        width: 160px; 
        line-height: 1em;
        color: #999;
        background-color: #fef5e2
    }
    
    div.searchWrap { vertical-align: top /*background-image: url('/img/search_pill.png');
        background-repeat: no-repeat ; width: 280px*/ }

    div.frontState { margin-top: 10px; margin-bottom: 5px }
    div.frontState div.stateName { font-weight: bold; font-size: 14px }
    div.frontState div.stateName span.areaCount { font-size: 11px; font-weight: normal; color: #999 }
    div.frontState div.areas { margin: 5px 0}

    div.forecast { width: 200px; float: left }
    div.forecast div.icon { width: 80px; float: left }
    div.forecast div.icon div.day { font-size: 10px; color: #999; text-transform: uppercase }
    div.forecast div.icon div.symbol { padding: 2px }
    div.forecast div.detail { width: 100px; float: left }
    div.forecast div.desc { font-size: 10px; color: #999 }
    div.forecast div.data { font-size: 20px; padding: 3px 0 3px 0 }
    div.forecast div.dataSmall { font-size: 12px; padding: 3px 0 3px 0 }

    div.forecastSide { width: 110px; float: left }
    div.forecastSide div.icon { width: 40px; float: left }
    div.forecastSide div.icon div.day { font-size: 10px; padding-left: 3px; color: #999; text-transform: uppercase }
    div.forecastSide div.icon div.symbol { padding: 2px; margin-top: 8px }
    div.forecastSide div.detail { width: 60px; float: left; margin-top: 23px; margin-left: 10px }
    div.forecastSide div.dataSmall { font-size: 10px; color: #666 }


    /*div#sunrise { margin: 10px 5px 0 5px; color: #666}*/
    div#areaForecast { margin: 20px 5px 5px 5px }
    table.forecast { width: 100%; border-collapse: collapse; }
    table.forecast th { background: #bbb; color: #fff; text-align: center; padding: 2px 8px }
    table.forecast th.first { text-align: left }
    table.forecast td { text-align: center; padding: 6px 8px }
    table.forecast td.first { text-align: left }
    table.forecast tr.odd { background: #f8f8f8 }
    table.forecast .condition { text-align: left; border-top: 0 solid #eee; border-bottom: 1px solid #999; color: #333 }

    table.forecast td.day_date { text-align: left }
    table.forecast td.day_date div.day { text-transform: uppercase; color: #f36c2c; font-weight: bold }
    table.forecast td.day_date div.date { font-size: 11px }
    table.forecast td.day_divider { text-align: left; text-transform: uppercase; color: #f36c2c; font-weight: bold; background: #fff; border-bottom: 1px solid #999 }
    
    div#areaForecast .db { font-size: 18px }
    div#areaForecast .ds { font-size: 14px }
    
    div#hourlyForecast { margin: 20px 5px 5px 5px }

    div#hourlyForecast .db { font-size: 1.3em }
    div#hourlyForecast .ds { font-size: 1em }

    div.beta { border-bottom: 1px solid #eee; padding: 5px; margin-bottom: 5px; line-height: 1.5 }
    div.beta div.type { color: #999; font-style: italic }
    div.beta h2 { margin: 0; font-size: 14px }
    div.beta h3 { }
    div.beta div.description { margin: 3px 0; color: #333 }

    table.averages { border-collapse: collapse; width: 100% }
    table.averages th { padding: 3px; background: #f8f8f8; border: 1px solid #999 }
    table.averages td { border: 1px solid #999; padding: 3px }
    
    div#info_area { padding-top: 5px; background: #fff; width: 960px }
    div.info { border: 1px solid #74DF00; background: #D0F5A9; padding: 2px 5px }
    div.error { border: 1px solid #ccc; background: #F8E0E0; padding: 2px 5px }
    
div.paging { float: right; width: 380px; margin: 5px 5px 8px 5px; font-size: 11px; text-align: right }
div.paging a { text-decoration: none; padding: 0 1px }
div.paging strong a { color: #fff; background-color: #333; padding-left: 3px; padding-right: 3px }
div.paging a:hover { text-decoration: underline }

    ul#sub_nav { margin: 0; list-style-type: none; background-color: #eee; padding: 5px 10px 5px 10px }
    ul#sub_nav li { display: inline; padding: 2px 5px 2px 5px; margin: 0 5px }
    ul#sub_nav li a { text-decoration: none }
    ul#sub_nav li a:hover { text-decoration: underline }
    ul#sub_nav li.active { border: 1px solid #666; background: #666 }
    ul#sub_nav li.active a { color: #fff; text-decoration: none; font-weight: bold }
    
div.whatNew { margin-bottom: 20px; padding: 10px 20px; }

.box { margin: 10px 20px }

.boxGradient {
        padding: 20px;
        background-color: #f8f8f8;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e1e1db)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(top, #f8f8f8, #e1e1db); /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(top, #f8f8f8, #e1e1db); /* FF3.6 */
        background-image:     -ms-linear-gradient(top, #f8f8f8, #e1e1db); /* IE10 */
        background-image:      -o-linear-gradient(top, #f8f8f8, #e1e1db); /* Opera 11.10+ */
        background-image:         linear-gradient(top, #f8f8f8, #e1e1db);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8', EndColorStr='#e1e1db'); /* IE6ÐIE9 */
}