/*
 * $Revision: 732 $
 * $Author: tkeffer $
 * $Date: 2012-11-03 13:59:51 -0700 (Sat, 03 Nov 2012) $
 */
  
/* Global */

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif, Arial, Helvetica;
    font-size: 0.9em;
    background-color: #fff;
}	

#container {
    margin: 0;
    padding: 0;
    border: 0;
}

h1 {
    color: #036;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 160%;
    text-shadow: 1px 1px #999;
    margin-bottom: 0.1em;
}

@media screen and (max-device-width: 480px) { /* stop headings overwriting bg image in masthead */
h1 {font-size: 130%;}
} 

h2 {
    color: #036;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 120%;
    text-shadow: 1px 1px #999;
    margin-top: 0.1em;
}

@media screen and (max-device-width: 480px) { /* stop headings overwriting bg image in masthead */
h2 {font-size: 115%;}
} 

h3 {
    color: #333;
    font-size: 105%;
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
    text-shadow: 1px 1px #999;
}

a:hover, a:focus {
    color: #00f;
    background-color: #e3b900;
}

@media screen and (max-device-width: 480px) { /* stop headings overwriting bg image in masthead */
h3 {font-size: 105%;}
} 

/*
 * This is the big header at the top of the page
 */
#masthead {
    margin: 0;
    padding: 5px 10px 5px 10px;
    text-align: left;
    border-top: 1px solid #dcdcdc;
    border-right: 2px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #81C0ED;
    background: #81C0ed url('backgrounds/masthead.png') right center no-repeat;
}

#nav {
    color: #e3b900;
    background-color: #003;
}

#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#nav li {
    float: left;
}

#nav li.current {
    background-image: url(backgrounds/current.png);
    background-position: left center;
    background-repeat: no-repeat;
}

#nav a {
    display: block; 
    padding: 6px 10px 6px 10px;
/*  width: 6em; */
    color: #e3b900;
}

#nav a:hover, #nav a:focus {
    color: #000;
    background-color: #e3b900;
}

@media screen and (max-device-width: 1000px) { /* hide link to dashboard for smaller screens */
li.dash, p.dash {display: none;}
}

#forecast-disclaimer {
    background-color: #e3b900;
    color: #000;
    text-align: center;
    margin: 0;
    padding: 0;
}

#forecast-disclaimer p {
    margin: 0;
    padding: 4px 0 4px 0;
} 

#grade {
    background: url('backgrounds/fade.gif') top left repeat-x;
    font-size: 50%;
}

/* Rowan 14-12-2013 The top quickstat bar 
*/

#quickstat {
    margin: 0;
    width: 100%;
    padding: 5px 0 8px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    line-height: 140%;
}

.quickdetail {
    width: 21%;
    display: inline-block;
    text-align: center;
}

.quickdetail img {
    margin: 0 0 4px 0;
}

.quickdetail .large {
    font-size: 160%;
    font-weight: bold;
    text-shadow: 1px 1px #999;
}

@media screen and (max-device-width: 480px) { /* stop headings overwriting bg image in masthead */
.quickdetail .large {font-size: 125%;}
} 



/*
 * This holds the statistics (daily high/low, etc.) on the left: 
 */
#stats_group {
/*    width: 30%; 26122013 */
    min-height: 500px;
    margin: 1% 1% 2% 1%;
    padding: 5px;
    float: left;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fff;
}

/* RS 07102017 */
@media screen and (max-width: 640px) {
  #stats_group {
  float: none;
  width: auto;
  }
}
/* END RS 07102017 */

.stats table {
    width: 100%;
}

.fcast table {
    width: 100%;
}

/* Rowan 15-12-2013 */
.stats tr:nth-child(odd) {
    background-color: #ccc;
    color: #000;
}
.stats tr:nth-child(even) {
    background-color: #fff;
    color: #000:
}
.stats td {
    padding: 4px;
    line-height: 140%;
}
/* end Rowan 15-12-2013 */

.fcast td.timestamp {
    padding: 0 4px 0 4px;
    font-size: 140%;
    line-height: 72%;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    text-shadow: 1px 1px #999;
}

.fcast td.timestamp .minor {
    font-size: 80%;
}

.fcast td.forecast {
    line-height: 72%;
    padding: 0 4px 0 4px;
    font-size: 120%;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
/*    text-shadow: 1px 1px #999; */
}


.fcast td.forecast-wind {
    line-height: 72%;
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 120%;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
/*    text-shadow: 1px 1px #999; */
}


/*
 * This holds the "Almanac", and plots on the right
 */
#content {
/*    width: 62%; 26122013 */
    min-height: 500px;
    margin: 1%; 
    padding: 5px;
/*    float: right;  26122013 */
/*    display: inline; 26122013 */
    text-align: center;
}

#sevendayfct {
/*    width: 62%; 26122013 */
    min-height: 500px;
    margin: 1%; 
    padding: 5px;
/*    float: right;  26122013 */
/*    display: inline; 26122013 */
/*    text-align: left; */
/*    float: left; */
/*    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080; */
    border-left: 1px solid #a9a9a9;
    background-color: #fff;
}

#content .header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


#content .caption {
    font-weight: bold;
    color: #3d6c87;
}

#content table {
    text-align: center;
    width: 100%;
}

#content td {
    width: 50%;
}

#content .label {
    text-align: right;
    font-style: italic;
}

#content .data {
    text-align: left;
}

#about, #almanac {
/*    width: 90%; 26122013 */
    display: inline-block; /*26122013 */
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5em;
    margin-bottom: 30px;
}

.celestial_group {
}

.celestial_body {
/*    width: 48%; 26122013 */
    vertical-align: top;
    display:inline-block;
}
.celestial_body_image {
    float: left;
    width: 100px;
}
.celestial_body_detail {
    display: inline-block;
    text-align: left;
    Line-height: 120%;
}


#plots {
/*    width: 90%; 26122013 */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sevendaytable {
/*    width: 90%; 26122013 */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sevendaytable td {
    text-align: left;
    vertical-align: middle;
    padding: 3px 0;
}

.sevendaytable td.period {
    font-weight: bold;
    font-size: 110%;
}

.sevendaytable td.period .date {
    font-weight: normal;
    font-size: 75%;
}
    
#plots img {
    border: thin solid #3d6c87;
    margin: 3px 1% 3px 1%;
/*    padding: 3px; */
}

#radar_img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px; 
}

#radar_img img {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin: 3px;
    padding: 3px;
}

#radar_img p {
    width: 90%;
    font-style: italic;
    font-size: smaller;
    text-align: center;
    margin-top: 0;
}

/*
 * Navigation bar (week, month, etc.) at the bottom
 */
#navbar {
    margin: 0 1% 1% 1%;
    padding: 5px;
    text-align: center;
    clear: both;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #e3b900;
}

#footnote {
    margin-left: 1%;
    font-size: 72%;
    font-style: italic;
}

/*************** Global Styles ***************/

h3, h4, h5, h6 {
    color: #333;
}