/*
colors:
    blue (masthead):            #226083
    blue (links)                #30737b

    green (dark text):          #003b2b
    green (pale background):    #b0cf00
    green Line                  #84aa0b

    grey Line                   #d5d5d5
    grey (search text)          #768480
    grey (search input border)  #dcdcdc
    grey (default text)         #333333
    grey (pale text)            #808080
    grey (forecast border)      #cccccc
    grey (pagination  no link)  #cccccc
*/

/* =BASE
--------------------------------------------- */
* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    text-decoration: none;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

.hide {
    position: absolute;
    left: -2500px;
    width: 1px;
    overflow: hidden;
}

body {
    -webkit-text-size-adjust: 100%; /* http://stackoverflow.com/questions/3466434/font-size-issue-with-iphone */
}

.weather-main {
    max-width: 976px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 16px;
    color:#333333;
}

a {
    text-decoration: none;
    color: #30737b;
    outline: 1px;
}
:focus {
    outline:thin dotted;
}
a:hover,
a:focus,
a:active {
    text-decoration: underline;
}

h1, h2, h3 {
    font-weight:bold;
}

h1 {
    font-size:16px;
    line-height:32px;
    border-bottom:1px solid #d5d5d5;
}
h2 {
    font-size:16px;
    line-height:16px;
    margin-bottom:8px;
}

p {
    color:#333333;
    margin-bottom:8px;
}

/* =COMPONENTS
--------------------------------------------- */
.icon {
    display:block;
    float:right;
    margin-right:8px;
}
.acknowledgment-metoffice,
.time-info p {
    padding-top:5px;
    color:#808080;
}

/* ---------  Masthead ------- */
.masthead {
    background:#226083;
    padding:10px 0 9px 8px;
    position:relative;
    border-bottom:1px solid #cccccc;
}
.masthead-title {
    color:#ffffff;
    text-transform:uppercase;
    font-size:26px;
}
.masthead img {
    display:block;
}
.masthead .icon-search {
    position:absolute;
    top:0;
    right:0;
    background:#226083 url(img/sprite.png) 0 -1px no-repeat;
    width:40px;
    height:39px;
    border-left:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
}
.masthead h1 {
    border-bottom:none;
}

/* ---------  Find A Forecast ------- */
.find-a-forecast {
    background:#b0cf00;
    padding:3px 8px 8px 8px;
}
.find-a-forecast h2 {
    color:#003b2b;
    margin:6px 0 11px 0;
}
/* -- override defaults --*/
.locator-search form span.locator-search-input {
    border:1px solid #dcdcdc;
}
.locator-search form span.locator-search-input input {
    color:#768480;
}
.locator-search .locator-results li {
    line-height: 16px;
}
.locator-search form input.locator-submit {
    font-weight:normal;
}
.locator-results,
.locator-results p {
    color:#003b2b;
}
.locator-results a,
.locator-results a:link,
.locator-results a:hover,
.locator-results a:visited,
.locator-results a:active,
.locator-pagination a,
.locator-pagination a:link,
.locator-pagination a:hover,
.locator-pagination a:visited,
.locator-pagination a:active {
    color:#003b2b;
    font-weight:bold;
}
.locator-search form span.locator-search-input {
    padding: 3px 8px;
}
.locator-results a:hover,
.locator-pagination a:hover {
    text-decoration:underline;
}
.locator-search .locator-pagination {
    color: #84aa0b;
    border-color:#84aa0b;
}

.locator-pagination .previous,
.locator-pagination .next {
    font-size:12px;
}
.locator-pagination li {
   font-size:13px;
}

/* ---------  Location results ------- */
.locator-results h3 {
    font-weight:normal;
}
.find-a-forecast .error {
    color: #003b2b;
}
/* ---------  Forecast Slot ------- */
.forecast-slot {
    padding:5px 0 8px 0;
    border-bottom:1px solid #d5d5d5;
    overflow: hidden;
    clear:both;
}
.last-forecast-slot {
    border-bottom:none;
}
.forecast-slot img {
    float:left;
}
.forecast-slot-text {
    width:50%;
    float:right;
    text-align: left;
    margin-top:4px;
    margin-bottom:4px;
}
.weather-text {
    font-weight:bold;
}
.forecast-slot p {
    margin-bottom:0;
}
a.forecast-slot {
    display:block;
}

/* ---------  Forecast Intro ------- */
.forecast-slot-next {
    background: #226083;
    margin:0 -8px;
    padding:0 8px 8px 8px;
}
.forecast-slot-next h3 {
    color: #fff;
}
.forecast-slot-next p {
    color:#fff;
}

/* ---------  Forecast Pagination ------- */
.pagination {
    overflow:hidden;
    position:relative;
    padding: 0 32px;
    margin:8px 0;
}
.pagination .pagination-btn {
    width:32px;
    line-height:32px; /* fixes bug in Nokia N95 */
    height:100%;
    position:absolute;
    top:0px;
}
.pagination .prev {
    left:0px;
    background:#cccccc url(img/sprite.png) -88px -36px no-repeat;
}
.pagination .next {
    right:0px;
    background:#cccccc url(img/sprite.png) -120px -36px no-repeat;
}
.pagination a {
    width:32px;
    line-height:32px; /* fixes bug in Nokia N95 */
    height:100%;
    display:block;
    overflow: hidden;
    text-indent: 200%;
}
.pagination .prev a {
    background:#30737b url(img/sprite.png) -88px -88px no-repeat;
}
.pagination .next a {
    background:#30737b url(img/sprite.png) -120px -88px no-repeat;
}
.pagination .day {
    background:#eeeeee;
    line-height:32px;
    margin:0 1px;
    display:block;
    color:#000000;
    text-align: center;
    font-size:16px;
    font-weight:bold;
}

/* ---------  Forecast Group Heading ------- */
.day-group-header {
    overflow:hidden;
    padding-top:7px;
    border-bottom:1px solid #d5d5d5;
}
.day-group-header h2 {
    float:left;
    margin-bottom:10px;
    margin-right:0.5em;
}
.day-group-header a.top {
    float:right;
    margin-left:32px;
}
/* --  Forecast Anchors -- */
p.jump-to {
    clear:left;
    margin-bottom:0.5em;
}

/* =Pages
--------------------------------------------- */

/* ---------  Homepage ------- */
.homepage #weather-content {
    background:#b0cf00;
}
.warnings {
    background: #ffffff;
}
.warnings h2 {
    padding-top:8px;
    margin-left:8px;
}
.warnings p {
    margin-bottom: 0;
    padding:8px 0;
    margin:0 16px 0 8px;
    border-top:1px solid #d5d5d5;
    position:relative;
}
.warnings .icon {
    width:16px;
    height:18px;
    background:url(img/sprite.png) -202px -68px no-repeat;
}
/* ---------  Forecast pages ------- */
.forecast #weather-content {
    padding:0 8px;
}
.forecast h1 {
    background: #226083;
    color: #fff;
    padding:0 8px;
    margin:0 -8px;
    border-bottom:none;
}
.forecast .error {
    padding-top:8px;
}

p.back-to-daybyday {
    margin-top:8px;
    margin-bottom:0;
}
.search-term {
    display:block;
    font-weight:bold;
    margin-top:8px;
}
.forecast-daybyday h1 {
    padding-bottom:0;
    padding-top:8px;
    line-height:16px;
}

/* ---------  Content pages (warning and error)  ------- */
.contentpage #weather-content {
    padding: 0 8px;
}
.contentpage h1 {
    border-bottom:0;
}
.contentpage h2 {
    margin: 8px 0;
    line-height:24px;
}
p.link {
    margin-bottom: 0;
    padding:8px 0;
    border-top:1px solid #d5d5d5;
    position:relative;
}
.link .icon {
    width:8px;
    height:12px;
    background:url(img/sprite.png) -132px -14px no-repeat;
}

/* ---------  No country pages  ------- */

.no-country .errortext {
    padding: 8px 0 0 0;
}
.no-country .error-wrapper {
    padding: 0 8px 0 8px;
}