/* This file is under source control */

.min {color: #0045b9}
.max {color: #A30000}
body {-webkit-text-size-adjust: 100%;}
p {margin-top: 0.5em}

p.warning  {border: 1px solid #FBE983; margin: 8px 0; width: 648px;}
p.warning a, p.warning a:visited { font-size: 13px; position: relative; display: block; text-indent: 33px; background: #FBE983 url(/images/symbols/warning.png) 4px 3px no-repeat; padding: 6px 0 5px; color: #000; text-decoration: none;}
p.warning a:hover { color: #000; text-decoration: underline; }
p.no-warnings { border: 1px solid #e4e4e4; background-color: #e4e4e4; margin: 8px 0; padding: 6px 12px 5px; width: 624px; }

.day.main {float: left;}
.day {clear: left;}

p.date {font-size: 0.9em; padding: 2px 0 8px; border-bottom: 2px solid #ccc; width: 650px;}
p.date .validity {display: block; font-size: 1.3em; color: #000; padding-top: 5px;}

.pT h2 {margin: 0 0.2em; border: none; font-weight: bold; background: none;}
.pT p {float: right; margin: 0 0.2em;}
.pT .date {float: left; margin-left: 0.2em; font-size: 1em; border: none; width: auto;}

.synopsis {background: #f0f0f0; padding: 1em 12px; width: 626px; float: left;}

.synopsis p {margin-bottom: 0;}

.day h2 {padding: 0;}

h2 {clear: left; font-size: 1.2em; font-weight: normal; border-top: 2px solid #ccc; border-bottom: 1px dotted #ccc; line-height: 1.9em; padding-top: 0.5em; margin: 0; width: 650px;}
.synopsis h2 {border: 0; width: auto; padding: 0; line-height: 1.6em; color: #333; background: none;}

.forecast {background: #fff url('/images/ui/weather/day_background.png') bottom left no-repeat; width: 650px; overflow: auto;} /* FIXME: overflow: auto causes conflict with social media */
.forecast p {margin: 0 0 0 320px;  padding: 13px 0; width: 315px;}
.forecast h3 {margin: 0 0 0 320px;  padding: 13px 0 0; width: 315px; color: #000; font-size: 1em; margin-bottom: -10px;}
.forecast p.clr {margin: 0; padding: 0; font-size: 0.2em; clear: left; height: 0.5em;} 
p.alert { text-indent: 11px; clear: left; color: #595959; font-weight: normal; margin: 0 0 0 50px; border-top: 1px solid #ccc; width: 600px; line-height: 2em;}
p.alert strong {display: inline-block; width: 10em; font-weight: normal;}
p.alert.no-precis {margin: -0.75em 0 0.5em; border: none; text-indent: 0;}
.surf {border-top: 1px dotted #ccc;}
.p-id { color: #595959;}


.day.noclr .forecast {overflow: auto;}

/* Table CSS Copy and Pasted rules may be contradictory or doubled up or not used at all */

table.precis {clear :both; width: 100%; border-collapse: collapse; margin: 0 0 0.5em; font-size: 1em;}
table.precis, table.precis td, table.precis th {border: 1px solid #ccc; background: #fff; clear: both;}
table.precis td {text-align: center; padding: 0.3em; width: 5em; vertical-align: top;}
table.precis img {display: block; margin: 0.2em auto;}
table.precis td:first-child, table.precis td.first, table.precis th.first {width: 13.4em;}
table.precis th {font-weight: normal;}
table.precis th strong {display: block;}
table.precis caption {display: none;}

iframe {float: right; border: none; clear: right}

.around {float: right; margin: -2px 0 10px 5px; border: 1px solid #ccc; padding: 0 5px; box-shadow: 2px 2px 2px #eee;}
.around table {font-size: 1em; margin: 0.4em 0 1em; width: 288px; border-collapse: collapse; border: none; border-top: 1px solid #ccc;}
.around table caption {display: table-caption; color: #005782; font-weight: bold; text-align: left; line-height: 1.4em; padding: 3px 0 5px 17px;}
.around table th, table td {text-align: center; padding: 0.2em 0.2em; border: none; width: 2.3em;}
.around table th {background: #f5f5f5; font-weight: normal; border-bottom: 1px solid #ccc; font-style: italic;}
.around table td.place, .around table th.place {text-align: left; width: auto;}
.around table td {padding: 0.5em 0.2em 0;}
.around h3 {color: #005782; font-size: 1em; font-weight: bold; text-align: left; line-height: 1.4em; padding: 5px 0 0; width: 288px; margin: 0.4em 0 0;}
.around .first h3 {background: transparent url('/images/ui/weather/aroundarrow3.png') 2px 4px no-repeat; margin-left: -17px; padding-left: 17px;}
.around th.precis {text-indent: -9999px; padding: 0;}
.around td.precis {padding: 0;}
.around table td {padding: 0.4em 0.2em 0.1em;}

.locations {margin: 0; border-bottom: 1px solid #ccc; border-collapse: collapse; border-top: none; width: 650px;}
.locations th {line-height: 1.6em; padding: 0 0.3em; color: #595959; border-bottom: 1px solid #ccc; font-weight: normal}
.locations td {vertical-align: middle; padding: 0 0.2em; border-bottom: 1px dotted #ccc;}
.locations th.first, .locations td:first-child, .locations td.first {width: 150px; text-align: left; font-weight: bold;}
.locations td *, .locations td.first *, .locations td.summary * {vertical-align: middle;}
.locations th.first  {text-indent: -999px}
.locations td.first  {padding-top: 0.2em;}
.locations th.summary, .locations td.summary {width: 260px; text-align: left; padding: 0.2em 0.3em;}
.locations th.summary {text-indent: -999px;}
.locations td img {margin: 0.1em 0.25em 0.3em 0;}
.locations td.min, .locations td.max {width: 5em;}

/* End of table CSS */

dl {margin: 0 0 1em; width: 280px; display: block; float: left; padding-top: 9px;}
dt {position: absolute; top: -9999px; left: -9999px;}

dd {float: left; display: block; margin: 0 0 0 16px; padding: 0; font-weight: normal; line-height: 1.7em; color: #333;}
dd em {vertical-align: baseline; padding-left: 0.2em; font-style: normal; font-size: 1.5em; font-weight: normal;}
dd.image {display: block; float: left; margin: 0; padding: 0;}

dd.rain {clear: both; display: block; width: 230px; border-top: 1px dotted #ccc; font-weight: normal; margin: 3px 0 0 52px; padding: 3px 0 0 9px; line-height: 1.8em;}
dd.rain em {padding: 0; font-size: 1.2em; font-weight: bold; color: #353; margin-left: 0.1em;}
dd.rain em img {margin-left: 0.7em;}
dd.rain em.rain {margin-left: 1.2em;}
dd.summary {display: block; width: 210px; margin-top: 0; font-weight: bold;  color: #000;}
p#next {clear: both; border-top: 4px solid #ccc; width: 650px; margin: 0; line-height: 2.5em; padding: 0; border-bottom: none;}
.p-id {margin: 0;}

/*
	Marine Specific Styles
*/

.marine {width: 465px; float: left;} 

.marine p.warning, .marine .day, .marine .date, .marine .day h2 {width: 633px;}
.marine .synopsis {width: 609px;}
.marine .tropical {background-color: #f0f3f5; border-top: 2px solid #CCCCCC;}
.marine .day h2 {width: 633px;}

.marine .day {float: left}

.marine dl {width: 633px; float: none; padding: 0;}
.marine dl dt {position: relative; top: 0; left: 0; clear: left; margin: 0.4em 0; float: left; width: 68px; color: #000; line-height: 1.3em; font-weight: normal; text-align: right; padding: 0 6px 0 0;}
.marine dl dd {margin: 0.1em; width: 555px; line-height: 1.5em; border-bottom: 1px dotted #ccc; margin-left: -68px; padding-left: 69px; color: #666;}
.marine dl dd span {padding: 0 0.5em; margin: 0.2em 0; display: block; border-left: 1px dotted #ccc;}
.marine dl dd.last, .marine dl dd:last-child {border-bottom: none;}

.marine .day .warning {margin: -0.1em 0 0.3em; padding: 0.3em 8px; width: 614px; background: #f5f5f5; border: 1px solid #ebebeb; border-left: 3px solid #fc0; font-size: 0.9em; color: #666;}

ul.marine.sources {width: 300px; clear: right; float: right; margin: 1em 0 0 0;}
ul.marine.sources li {margin-left: 15px;}
.preamble {float: right; width: 276px; border: 2px solid #ccc; margin: 5.6em 0 1em 0; padding: 0 10px 7px;}
.preamble strong {display: block; color: #f60; background: #f5f5f5; border-bottom: 1px dotted #ccc; margin: 0 -10px 7px; text-indent: 10px; font-size: 1.1em; line-height: 1.7em;}

p.marine#next {width: 633px;}

.nearby {border: 2px solid #ccc; width: 296px; float: right; clear: right; margin: 1em 0 0 0; white-space: normal;}
.nearby h2 {width: auto; border-top: none; text-indent: 8px; font-size: 1.1em; padding: 0;}

/*
	District Specific Styles
*/

.district p.warning, .district .day, .district .date, .district .day h2 {width: 650px;}
.district .synopsis {width: 626px;}

.district .day dl.alert {float: none; width: auto; margin: 0; width: auto; padding: 0.5em 0; border-top: 1px dotted #ccc; overflow: auto;}
.district .day dl.alert dt {position: relative; top: 0; left: 0; margin: 0.2em 0; font-weight: normal; padding: 0; float: left; line-height: 1.3em; color: #000; width: 60px; text-align: right;}
.district .day dl.alert dd {margin: 0; padding: 0; line-height: 1.8em; display: block; float: none; margin-left: 69px; padding-left: 6px; color: #666; border-left: 1px dotted #ccc;}

.district p.alert {clear: left; color: #666; font-weight: normal; margin: 0; text-indent: 0;border-top: 1px dotted #ccc; width: 650px; line-height: 2em;}

.district #next {width: 650px;}

.day dl.alert {float: none; width: auto; margin: 0 0 0 50px; width: 540px; padding: 0.5em 0; border-top: 1px solid #ccc; overflow: auto;}
.day dl.alert dt {position: relative; top: 0; left: 0; margin: 0.2em 0; font-weight: normal; padding: 0; float: left; line-height: 1.3em; color: #000; width: 60px; text-align: right;}
.day dl.alert dd {margin: 0; padding: 0; line-height: 1.8em; display: block; float: none; margin-left: 69px; padding-left: 6px; color: #666; border-left: 1px dotted #ccc;}

p.alert.district { text-indent: 11px; clear: left; color: #595959; font-weight: normal; margin: 0 0 0; border-top: 1px solid #ccc; width: 540px; line-height: 2em;}

.snow {float: none; width: auto; padding: 6px 0; margin: 0; border-top: 1px dotted #ccc; overflow: auto; background: #fff url('/images/ui/weather/snow2.png') 75px 6px no-repeat;}
.snow dt {position: relative; top: 0; left: 0; margin: 0.2em 0; font-weight: normal; padding: 0; float: left; line-height: 1.3em; color: #000; width: 60px; text-align: right;}
.snow dd {margin: 0; padding: 0; line-height: 1.1em; display: block; float: none; margin-left: 69px; padding: 2px 6px; color: #666; border-left: 1px dotted #ccc; font-size: 0.9em;text-indent: 130px;}

h2.subtitle {margin: 0 0 0.8em; padding: 0; border: 0; font-size: 1.4em; line-height: 1em;}
table {clear: left;}

dl.fire {width: 590px; margin: 0.5em 0; padding: 0;}
.fire dt, .fire dd {width: auto; position: relative; top: 0; left: 0; margin: 0; padding: 0; float: left; line-height: 1.5em; margin-right: 2em; color: #666;}
.fire dt {font-weight: normal;  margin-right: 0.4em;}

table.fire, table.fire th, table.fire td {border: 1px dotted #ccc; font-size: 1em; padding: 0 0.4em;}
table.fire th {border-bottom-style: solid; vertical-align: top; text-align: center; background: #f5f5f5;}
table.fire th small {font-size: 1em; display: block;}
table.fire th.split {border-bottom: none;}
table.fire tr.split th {border-left: none; border-top: none; border-right: none;}
table.fire tbody th {font-weight: normal; padding: 0.4em; text-align: left; background: #fff; border-bottom-style: dotted;}
table.fire td.windchange {width: 5.5em;}

.firenotes {clear: both; margin: 2em 0 0;}
.firenotes h3 {color: #666;}
.firenotes ul {list-style: none; margin: 0.7em 0; padding: 0; width: 590px;}
.firenotes li {margin: 0.5em 0;}

.info-box {float: right; width: 190px; border: 2px solid #ccc; margin: -2px 0 0;}
.info-box h3 {background: #f5f5f5; color: #333; margin: 0; padding: 0.5em; border-bottom: 1px dotted #ccc;}
.info-box p {margin: 0.8em 0.5em;}

.social {margin: 0 0 0 303px; position: relative; list-style: none;}
.social li {top: -1.9em; position: absolute;}
.social li.twitter {left: 26px;}
.social li a {width: 16px; height: 16px; overflow: hidden; display: block; text-indent: -9999px;}
.social li.twitter a {background: #fff url('/images/ui/social/twitter.gif') 0px -16px no-repeat;}
.social li.facebook a {background: #fff url('/images/ui/social/facebook.gif') 0px -16px no-repeat;}
.social li.twitter a:hover, .social li.facebook a:hover {background-position: 0px 0px;}

/* IE Hacks */

* html .day {float: left;}
* html dd.rain {float: none;}
/* html .around {margin-right: 10px;}*/
*+html .around table {margin-right: 0px;}
* html .district .around {margin-right: 5px;}
* html .preamble, * html .nearby, * html ul.marine.sources {margin-right: 5px;}
*+html p.alert strong {text-indent: 6px; width:9.5em;}
* html p.alert strong {text-indent: 6px; width:9.5em;}
* html h2 {border-bottom: none; background: transparent url('/images/ui/weather/dotted.png') bottom left repeat-x}
*+html h2 {border-bottom: none; background: transparent url('/images/ui/weather/dotted.png') bottom left repeat-x}
* html .day.eve {margin-right: 35px}
* html .district .synopsis {margin-right: 45px}
*+html .district .synopsis {margin-right: 45px}