/* Styles for Orto template */

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    /*background-image: url('/images/lightning.jpg');*/
    background-color: #F0F8FF;
    font-size: 13px;
}

h1, h2, h3 {
    margin: 12px 0 6px 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
}
.h1-unbold {
    font-weight: normal;
}
.h1-blue {
    color: #004e7b;
}
.h1-smaller {
    font-size: 18px;
}
h2 {
    font-size: 16px;
    font-style: normal;
}
h3 {
    font-size: 15px;
    font-style: normal;
}

li {
    margin: 5px 0 5px 0;
}

a, a:visited {
    text-decoration: none;
    color: #004182;
}
a:hover {
    color: #333;
    text-decoration: underline;
}

/* General styles */
.vert-align-container * {
    vertical-align: middle;
}
.smaller-text {
    font-size: 12px;
}

#header-container {
    background-color: #210B61;
}
#header {
    width: 1000px;
    height: 114px;
    margin: 0 auto;
    padding: 0;
    background: #2758a5 0 0 url(/templates/Orto/images/header-bg3b.jpg) no-repeat;
    color: #fff;
}
#header ul {
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
    list-style: none;
}
#header li {
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
}
#header li#logo {
    margin: 9px 0 0 0;
    width: 335px;
    height: 60px;
}
#header li#main-search {
    margin: 16px 0 0 52px;
}
#header li#main-search form {
    margin: 0;
    padding: 0;
    width: 268px;
    height: 39px;
    background: #fff 0 0 url(/templates/Orto/images/search-input-bg.jpg) no-repeat;
}
#header li#main-search input.search {
    margin: 5px;
    padding: 0 4px 0 4px;
    width: 200px;
    height: 29px;
    border: 0;
    background: #fff;
    font-weight: bold;
    font-size: 17px;
    color: #444;
    line-height: 29px;  /* vertically centers on IE */
}
#header li#slogan {
    margin: 19px 0 0 18px;
    width: 250px;
    color: #ffe474;
    font-family: Verdana, sans-serif;
    font-size: 110%;
    font-style: italic;
}
#header li#twitter {
    margin: 17px 0 0 0;
    width: 51px;
    height: 47px;
}

ul#header-menu {
    clear: left;
    margin: 14px 0 0 6px;
    width: 600px;
    height: 31px;
    /*background-color: #f00;*/
}
#header-menu a {
    margin: 0;
    padding: 0;
    height: 41px; /* doesn't help! */
    line-height: 31px; /* doesn't help! */
    /*background-color: #f00; doesn't work well! it's better to set the image background */
}
#header-menu img {
    background: 0 0 url(/templates/Orto/images/menu-tab-sprites2014_v2.png) no-repeat;
}
#tab-home img {
    background-position: 0 -31px;
}
#tab-home img:hover, #tab-home.active img {
    background-position: 0 0;
}
#tab-weather img {
    background-position: -64px -31px;
}
#tab-weather img:hover, #tab-weather.active img {
    background-position: -64px 0;
}
#tab-airports img {
    background-position: -175px -31px;
}
#tab-airports img:hover, #tab-airports.active img {
    background-position: -175px 0;
}
#tab-contact img {
    background-position: -253px -31px;
}
#tab-contact img:hover, #tab-contact.active img {
    background-position: -253px 0;
}
#tab-weather-topics img {
    background-position: -349px -31px;
}
#tab-weather-topics img:hover, #tab-weather-topics.active img {
    background-position: -349px 0;
}
#tab-earthquakes img {
    background-position: -467px -31px;
}
#tab-earthquakes img:hover, #tab-earthquakes.active img {
    background-position: -467px 0;
}
#mtb-container {
    width: 1000px;
background: #fff;
}

#main-container {
    width: 1000px;
    margin: 0 auto;
    background: #fff;
    padding: 5px 0px 5px 0px;
/*    border: 1px solid #2758a5; */ 
     /*border-left:1px solid #2758a5;*/
    /*border-right:1px solid #2758a5;*/
}
#content {
    float: left;
    margin: 0 0px 0 0px;
    width: 673px;
    text-align: left;
    padding: 0 15px 0 10px;
    background: #fff;
    /*border-left:1px solid #2758a5;*/
    /*height: 100px;*/
}

ul#weather-tabs {
    margin: 8px 0 10px 0;
    width: 630px;
    height: 34px;
    padding: 0;
    list-style: none;
    /*background-color: #aaa;*/
    /*border-bottom: 1px solid #105983; try it without the border for now */
}
#weather-tabs li {
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
}
#weather-tabs a {
    margin: 0;
    padding: 0;
    height: 41px; /* doesn't help! */
    line-height: 34px; /* doesn't help! */
    /*background-color: #f00; doesn't work well! it's better to set the image background */
}
#weather-tabs a#loop-link { /* make it look like a normal a */
    height: 13px;
    line-height: 13px;
}
#weather-tabs img {
    background: 0 0 url(/templates/Orto/images/weather-tab-sprites7.png) no-repeat;
}
#tab-yesterday img {
    background-position: 0 -39px;
}
#tab-yesterday img:hover, #tab-yesterday.active img {
    background-position: 0 0;
}
#tab-currcond img {
    background-position: -85px -39px;
}
#tab-currcond img:hover, #tab-currcond.active img {
    background-position: -85px 0;
}
#tab-5day img {
    background-position: -226px -39px;
}
#tab-5day img:hover, #tab-5day.active img {
    background-position: -226px 0;
}
#tab-hourly img {
    background-position: -338px -39px;
}
#tab-hourly img:hover, #tab-hourly.active img {
    background-position: -338px 0;
}
#tab-alerts img {
    background-position: -403px -39px;
}
#tab-alerts img:hover, #tab-alerts.active img {
    background-position: -403px 0;
}
#tab-animated img {
    background-position: -466px -39px;
}
#tab-animated img:hover, #tab-animated.active img {
    background-position: -466px 0;
}

#curr-cond-div {
    margin: 5px 0 5px 30px;
}
#curr-cond-div * {
    vertical-align:top;
}

#images-5day img {
    margin: 15px 9px 16px 0;
}
#image-day {
    margin: 0 21px 10px 0;
}
#image-night {
    margin: 0 0 10px 0;
}

#ad468x60-above {
    /*float: right;*/
    margin: 0 0 0 50px;
    width: 496px;
    /*height: 66px; */
    padding: 2px;
    /*background: 0 0 url(/templates/Orto/images/ad-bg-468x60.jpg) no-repeat;*/
}
#ad468x60-below {
    margin: 0 0 0 72px;
    width: 496px;
    /*height: 88px;   */
    padding: 2px;
    /*background: 0 0 url(/templates/Orto/images/ad-bg-468x60.jpg) no-repeat;*/
}

#sidebar {
    float: left;
    margin: 0;
    width: 302px;
    background: #fff;
    /*border-left:1px solid #2758a5;*/
    /*border-right:1px solid #2758a5;*/
}
.sidebar-mod-bot {
    margin: 0 0 15px 0;
    background: bottom left url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
    font-family: Arial;
    font-size: 14px;
}
.sidebar-mod-blank {
    margin: 0 0 15px 0;
    font-family: Arial;
    font-size: 14px;
    background: 
#e8f6fa;
}
.sidebar-mod-text {
    padding: 8px;
}
.sidebar-mod-bot a, .sidebar-mod-bot a:visited {
    color: #000;
    text-decoration: none;
}
.sidebar-mod-bot a:hover {
    color: #aaa;
    text-decoration: underline;
}
#sidebar-mod-title-email {
    margin-top: 10px;
    height: 29px;
    background: 0 0 url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#mod-email form {
    margin: 0;
    padding: 0 0 8px 0;
}
#mod-email-input-div {
    height: 33px;
    background: 0 -173px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#mod-email-input-div input {
    margin: 2px 18px 9px 14px;
    padding: 0 4px 0 4px;
    width: 250px;
    height: 20px;
    border: 0;
    background: #fff;
    font-size: 14px;
    color: #666;
    line-height: 20px;  /* vertically centers on IE */
}
#mod-email-submit {
    margin: 1px 11px 1px 4px; /* top/bot need to be the same */
    width: 74px;
    height: 24px;
    background: -213px -87px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#sidebar-mod-title-radar {
    height: 29px;
    background: 0 -29px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#sidebar-mod-radar  {
    height: 90px;  /* same size as img plus top/bot margin */
}
#sidebar-mod-radar img {
    float: left;
    margin: 2px 4px 0 3px;
    background: 0 -87px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#sidebar-mod-title-cities {
    padding: 5px 5px 5px 5px;
    background-color: #210B61;
    color: #fff;
    font-size: 14px;
    text-align: center;
    }
#sidebar-mod-title-widgets {
    height: 29px;
    background: 0 -58px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
#sidebar-mod-widgets  {
    height: 82px;  /* slightly taller than img and its top margin */
}
#sidebar-mod-widgets img {
    float: left;
    margin: 5px 4px 0 7px;
    background: -108px -87px url(/templates/Orto/images/sidebar-sprites2014_v2.png) no-repeat;
}
.sidebar-mod-ad300x250 {
    margin: 0 0 15px 0;
    width: 300px;
    height: 250px;
}

#inner-footer {
    clear: both;
    text-align: center;
    background: #555;
    color: #fff;
    height: 50px;
}

#outer-footer #horiz-links {
    clear: both;
    padding: 4px;
    background-color: #2d2d2d;
    color: #fff;
    font-size: 12px;
    text-align: center;
}
#horiz-links a {
    color: #fff;
    text-decoration: none;
}

#outer-footer #bottom-menus {
    padding: 15px 0 12px 30px;
    background-color: #234d9a;
    color: #fff;
    font-size: 11px;
    text-align: center;
}
#bottom-menus a {
    color: #fff;
    text-decoration: none;
}

#bottom-menus ul {
    margin: 0;
    padding: 0;
    width: 230px;
    float: left;
    display: inline;
    list-style: none;
}
#bottom-menus ul#bot-menu4 {
    margin: 20px 0 0 10px;
}
#bottom-menus li {
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Weather Alerts */
/* Small box of alerts at the top of weather pages #e5e5e5 */
#alerts-box {
    margin: 5px 10px 15px 0;
    padding: 4px;
    border: 1px solid #004182;
    background-color: #FFFF00;
    line-height: 18px;
}
#alerts-box a {
    margin-left: 6px;
    padding-left: 20px;
    background: left 50% url(/images/awicon_yellow_ball_16.gif) no-repeat;
    text-decoration: underline;
}

#alerts-box a.alert-warning {
    background: left 50% url(/images/awicon_red_ball_16.gif) no-repeat;
}
/* Single alert or list of state alerts */
#alert {
    clear: left; /* for weather links */
    margin: 0 0 0 30px;
    padding-top: 3px;
    width: 350px;
}
#alert .headline {
    font-size: 1.20em;
}
#alert .bulleted-alert {
    margin-left: 45px; /* indent all but first line */
    text-indent: -45px
}
#alert a {
    padding-left: 22px;
    background: left 50% url(/images/awicon_yellow_ball_16.gif) no-repeat;
    /* This prevents the bottom of the ball from being cut off. */
    padding-bottom: 1px;
}
#alert a.alert-warning {
    background: left 50% url(/images/awicon_red_ball_16.gif) no-repeat;
}

/* Radar module THESE ARE OLD AND CAN BE DELETED IN JULY 2013! */
div#radarstack {
    /*clear: left;*/ /* for weather links */
    width: 605px;
    height: 565px;
    margin-left: 0;
}
#radarstack img {
    position: absolute;
    top: 297px; /* this is critical! */
}
#radarstack img.mobile {
    position: absolute;
    top: 312px; /* this is critical! */
}
#radarstack img.shiftlower { /* when alerts are showing, etc */
    top: 365px; /* this is critical! */
}
#radarstack img.shiftlowermobile { /* certain phones need extra spacing */
    top: 405px; /* this is critical! */
}

/* New version of radar images */
div#radarstack2 {
    clear: right; /* for 468 ad above */
    width: 602px;
    height: 552px;
    margin-bottom: 15px;
}

/* Search results */
#search-results {
    margin: 10px 0 15px 30px;
    line-height: 24px;
}

#forecast-text {
    margin: 15px 0 0 0;
}
#forecast-text div {
    margin: 0 0 10px 0;
}
#forecast-text .top-div {
    margin: 0 0 10px 20px;
}

/* Hourly forecasts */
#hourly-forecast {
    margin-top: 10px;
}
table#hourly-table {
    width: 630px;
}
#hourly-table td {
    padding: 2px 0 2px 0;
    width: 44px;
    text-align: center;
    background-color: #e6f1ff;
}
#hourly-table td.col1 {
    width: 65px;
    background-color: #fff;
}
tr#tr-day td, tr#tr-hour td {
    padding: 0;
    background-color: #fff;
}
tr#icons td {
    padding: 5px 0 5px 0;
    background-color: #fff;
}
tr#feels-like td {
    color: #777;
}

#hourly-table span {
   color: #777;
   font-size: 11px;
}
#wwa {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.wwabox {
    width: 15px;
    border: solid 1px black;
    margin-right: 2px;
    float: left;
}
#wwa li {
    list-style-type: none;
    margin: .5em .5em 0 -3.4em;
    font-size: 10px;
    text-align: left;
}
#wwaleft {
    width:210px;
    float: left;
    height:auto;
    margin: 0px;
    padding: 0px;
}
#wwacenter_l {
    width:210px;
    height:auto;
    float:left;
    margin: 0px;
    padding: 0px;
}
#wwacenter_r {
    width:210px;
    height:auto;
    float:left;
    margin: 0px;
    padding: 0px;
}
#wwaright {
    width:195px;
    height:auto;
    float:left;
    margin: 0px;
    padding: 0px;    
}
/*wwa colors*/
#z00FFFF {background-color:#00FFFF;}
#zFFE4C4 {background-color:#FFE4C4;}
#z8A2BE2 {background-color:#8A2BE2;}
#zDEB887 {background-color:#DEB887;}
#z5F9EA0 {background-color:#5F9EA0;}
#z7FFF00 {background-color:#7FFF00;}
#zFF7F50 {background-color:#FF7F50;}
#z6495ED {background-color:#6495ED;}
#zDC143C {background-color:#DC143C;}
#z00FFFF {background-color:#00FFFF;}
#z00008B {background-color:#00008B;}
#z008B8B {background-color:#008B8B;}
#zB8860B {background-color:#B8860B;}
#zA9A9A9 {background-color:#A9A9A9;}
#zBDB76B {background-color:#BDB76B;}
#z8B008B {background-color:#8B008B;}
#z9932CC {background-color:#9932CC;}
#z8B0000 {background-color:#8B0000;}
#zE9967A {background-color:#E9967A;}
#z8FBC8F {background-color:#8FBC8F;}
#z9400D3 {background-color:#9400D3;}
#zFF1493 {background-color:#FF1493;}
#z00BFFF {background-color:#00BFFF;}
#z696969 {background-color:#696969;}
#z1E90FF {background-color:#1E90FF;}
#zB22222 {background-color:#B22222;}
#z228B22 {background-color:#228B22;}
#zFF00FF {background-color:#FF00FF;}
#zDAA520 {background-color:#DAA520;}
#zFFD700 {background-color:#FFD700;}
#z808080 {background-color:#808080;}
#zADFF2F {background-color:#ADFF2F;}
#zFF69B4 {background-color:#FF69B4;}
#z4B0082 {background-color:#4B0082;}
#zF0E68C {background-color:#F0E68C;}
#zADD8E6 {background-color:#ADD8E6;}
#zF08080 {background-color:#F08080;}
#z90EE90 {background-color:#90EE90;}
#zFFB6C1 {background-color:#FFB6C1;}
#zFFA07A {background-color:#FFA07A;}
#zB0C4DE {background-color:#B0C4DE;}
#z00FF00 {background-color:#00FF00;}
#z32CD32 {background-color:#32CD32;}
#zFF00FF {background-color:#FF00FF;}
#z800000 {background-color:#800000;}
#z66CDAA {background-color:#66CDAA;}
#z6699CC {background-color:#6699CC;}
#zBA55D3 {background-color:#BA55D3;}
#z9370DB {background-color:#9370DB;}
#z7B68EE {background-color:#7B68EE;}
#z48D1CC {background-color:#48D1CC;}
#zC71585 {background-color:#C71585;}
#zFFE4B5 {background-color:#FFE4B5;}
#zFFDEAD {background-color:#FFDEAD;}
#z000080 {background-color:#000080;}
#z6B8E23 {background-color:#6B8E23;}
#zFFA500 {background-color:#FFA500;}
#zFF4500 {background-color:#FF4500;}
#zEEE8AA {background-color:#EEE8AA;}
#zAFEEEE {background-color:#AFEEEE;}
#zDB7093 {background-color:#DB7093;}
#zCD853F {background-color:#CD853F;}
#zDDA0DD {background-color:#DDA0DD;}
#zB0E0E6 {background-color:#B0E0E6;}
#zFF0000 {background-color:#FF0000;}
#z8B4513 {background-color:#8B4513;}
#zFA8072 {background-color:#FA8072;}
#zF4A460 {background-color:#F4A460;}
#z2E8B57 {background-color:#2E8B57;}
#zA0522D {background-color:#A0522D;}
#zC0C0C0 {background-color:#C0C0C0;}
#z87CEEB {background-color:#87CEEB;}
#z6A5ACD {background-color:#6A5ACD;}
#z708090 {background-color:#708090;}
#z00FF7F {background-color:#00FF7F;}
#zD2B48C {background-color:#D2B48C;}
#z008080 {background-color:#008080;}
#zD8BFD8 {background-color:#D8BFD8;}
#zFD6347 {background-color:#FD6347;}
#zCD5C5C {background-color:#CD5C5C;}
#zFFFF00 {background-color:#FFFF00;}
#z9ACD32 {background-color:#9ACD32;}
#z4682B4 {background-color:#4682B4;}
#z4169E1 {background-color:#4169E1;}
#zF0FFFF {background-color:#F0FFFF;}
#z0000FF {background-color:#0000FF;}
#zA52A2A {background-color:#A52A2A;}
#zD2691E {background-color:#D2691E;}
#z7CFC00 {background-color:#7CFC00;}
#z87CDFA {background-color:#87CDFA;} /*Lake Effect Snow Watch (lightskyblue) */
#z98FB98 {background-color:#98FB98;}
#zFFDAB9 {background-color:#FFDAB9;}
#zFFFFFF {background-color:#FFFFFF;}
/*Added on June 09 2008*/
#zFF8C00 {background-color:#FF8C00;} /*Extreme Wind Warning (Darkorange) */
#zFFC0CB {background-color:#FFC0CB;} /*Gale Watch (Pink)*/
#z483D8B {background-color:#483D8B;} /*Hazardous Seas Watch (Darkslateblue)*/
#zBC8F8F {background-color:#BC8F8F;} /*Heavy Freezing Spray Watch (Rosybrown)*/
#z87CEFA {background-color:#87CEFA;} /*Lake Effect Snow Watch (Lightskyblue)*/
#zEE82EE {background-color:#EE82EE;} /*Storm Watch (Violet)*/
/*added on Dec 23, 2008*/
#zDA70D6 {background-color:#DA70D6;} /*Freezing Rain Advisory */
/*added on Mar 17, 2009*/
#z2F4F4F {background-color:#2F4F4F;} /*Volcano Warning (darkslategray)*/
/*added on May 25, 2010*/
#z40E0D0 {background-color:#40E0D0;} /*Rip Current (turquoise)*/

/* CakePHP Form helper error messages */
.error-message {
    color: #f00;
}

/* CakePHP Flash message boxes */
.flash-message {
    margin: 15px 0 15px 0;
    padding: 4px;
    border: 1px solid #758392;
    line-height: 18px;
}
.flash-message-default {
    background-color: #b8def3; /* light blue */
    color: #000; /* black */
}
.flash-message-error {
    background-color: #ffd9d4; /* light red */
    color: #f00; /* red */
}
.flash-message-success {
    background-color: #d4efd2; /* light green */
    color: #008000; /* dark green */
}
.flash-message.hidden { /* gets added if user clicks on the Flash message */
    display: none;
}