/* margin = top right  bottom left */

body{
	margin:0;
	padding:0;
	text-align:center;
	font: 70% Tahoma, Arial, Helvetica, sans-serif;	
    background-color: #CFC6C1;
	/** line-height:150%; **/
}

a {
        color: #032456;
	text-decoration:none;
}
a:hover{
        color: #f90;
}
/****
p, h1, h2, h3, h4, h5, h6{
	margin:1em 0;
	padding:0;
}
h1 {
	font-size:140%;
        color: #032456;
}
h2 {
	font-size: 130%;
        color: #032456;
}
h3 {
	font-size:120%;
	font-weight:bold;
	text-transform:uppercase;
}
h4 {
	font-size:110%;
	font-weight:bold;
	margin:.2em 0;
        color: #6991AA;
}
h5 {
	font-size: 110%;
        color: #032456;
}
h6 {
	font-size: 100%;
        color: #032456;
}
table, td, select, input, textarea, li {
	font: 100% Tahoma, Arial, Helvetica, sans-serif;	
}
img{
	border:0;
}
**/
/* ---------------------------------- container ---------------------------------- */
/**
#container{
	margin:0 auto;
	text-align:left;
	width:980px;
	background:#fff;
}
**/
/* ---------------------------------- header ---------------------------------- */
#header{
	position:relative;
}
#logo{
	position: absolute;
	margin: 0;
	left: 222px;
	top: 2px;
	width: 245px;
	height: 100px;
	text-indent: -8000px;	
	background: url(../images/system/howsthesurfTiny.jpg) no-repeat 1px 1px;
}

#logo a{
	display:block;
	height:62px;
}

/* ---------------------------------- navigation ---------------------------------- */
/**
#nav, #nav li{
	margin:0;
	padding:0;
	list-style:none;
}
#nav {
        background: #AAADBC;
	text-align: right;
	height: 24px;
	line-height: 3px;
	margin: 1px 0;
}
#nav li {
	display: inline;
        color: #455260;
        margin: 0 1em;
}

**/
/* ---------------------------------- classes ---------------------------------- */

/**
.title {
        margin: 0 0 5.5em 0;
        color: #032456;
        font-size: 130%;
}
.status {
        margin: 0 0.5em 1.5em 2em;
        color: #032456;
        font-size: 120%;
}

**/
/* ------------------------------- menu ------------------------------------ */
/**
#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu ul li {
    position: relative;
    display: inline;
    float: left;
}
**/
/* ---------------------------------- chart forecast info ------------------ */
#information {
        width: 360px;
        left: 180px;
        top: -20px;
        float: left;
        position: absolute;
}
#information h2 {
        text-align: left;
} 
#information p {
        color: #556270;
        text-align: left;
}
/* ---------------------------------- main ---------------------------------- */
#main {
}

#top {
        clear: both;
        margin: 1.0em 0 0.2em 1.0em;
        padding: 0;
        color: #1A5F72;
        position: relative;
        float: left;
        width: 920px;
        height: 50px;
}

#quick {
        margin: 0.4em 0 1.0em 0.5em;   /* top right  bottom left */
        color: #032456;
        width: 720px;
        position: relative;
        float: left;
        font-size: 95%;
}


/* takes care of IE issue with map indent */
#mapIndent {
        clear: both;
        margin: 0 0 0 1.0em;
}


#system {
        margin: 1.0em 0 0.2em 2.0em;
        padding: 0;
        color: #1A5F72;
        /* position: relative; */
        float: left;
        height: 50px;
        background: #f2f2f2;
/* border: 1px solid #564b47; */
}


#full {
        clear: both;
        margin: 1.0em 0 0.2em 1.0em;
        padding: 0;
        color: #1A5F72;
        position: relative;
        float: left;
        width: 920px;
/* border: 1px solid #564b47; */
}


/* ---------------------------------- right area ------------------------------- */

#right {
        width: 220px;
        float: right;
        position: relative;
/*border: 1px solid #564b47; */
}
#right h4 {
	padding:5px 10px;
	/*margin:.5em 15px;*/
	color:#032456;
        /* border-bottom: 1px solid #ddd; */
        /* border-top: 1px solid #ddd; */
        background: #f2f2f2 url("../images/titlebar.jpg") repeat-y left top;
}

#right p {
        /*margin: .25em 15px 1em 15px;*/
        /*color: #556270;
        text-align: center; */
}

#right table, td {
	/*margin:.25em 15px 1em 15px;*/
	/*background:#71a9e3;*/
}

/* ---------------------------------- noaa area ------------------------------- */
#current {
        width: 250px;
        float: right;
        position: relative;
        background: #E9EFF2;
}
#current h2 {
        text-align: center;
} 
#current p {
        color: #556270;
        text-align: center;
}

/* --------------------------------- Chart Forecast page -------------------------------- */

#regionTitle {
        clear: both;
        position: relative;
        float: left;
        margin: 2.0em 0 0 3.0em;
        color: #1A5F72;
        width: 300px;
}

#regionTitle p {
        padding-left:45px;
}
#regionTile p2 {
        padding-left:45px;
        color: #7A7D8C;
}
#regionTitle p3 {
        padding-left:45px;
        color: #7A7D8C;
}

#chartMapLocation {
        margin: 2.0em 0 0 0;
        /* border: 1px solid #564b47; */
}

/* ---------------------------------- chart area ---------------------------------- */

#chart {
    clear: both;
    float: left;
    /* border: 1px solid; color: #7ac8ed; */
    width: 680px;
    
}

#chart table {
	/*margin:.25em 15px 1em 15px;*/
	/*background:#71a9e3;*/
        font-family: Arial, Helvetica, sans-serif;
        color: #544829;
}
#chart td {
	font-size: 9px;
        font-weight: normal;
}


#chartAd {
    float: left;
    margin: 4.0em 0 0 5.0em;
    width: 130px;
    height: 650px;
    /* border: 1px solid; color: #7ac8ed; */
}


/* ---------------------------------- Chart Forecast legend area ---------------------------------- */
#legend  {
        left: 12px;
        position: relative;
        color: #1A5F72;
        width: 60px;
        color: #fff;
        font-weight: bold;
        background-color: #9A9DAC;          /* #eec; */
        text-align: right;
}
#l1 {
        margin: 18px 6px 0px 0px;
        height: 30px;
        border-bottom: 1px solid #64C142;
}
#l2 {
        margin: 70px 6px 0px 0px;
        height: 105px;
        border-bottom: 1px solid #64C142;
}
#l3 {
        margin: 2px 6px 0px 0px;
        height: 16px;
        border-bottom: 1px solid #64C142;
}
#l4 {
        margin: 0px 6px 0px 0px;
        height: 17px;
}
#l5 {
        margin: 0px 0px 0px 0px;
        height: 15px;
        background-color: #fff;
}


#summaryLeg  {
        position: relative;
        color: #3322BA;
        width: 50px;
        color: #555555;
        font-weight: bold;
        background-color: #DDDDDD;          /* #eec; */
        text-align: right;
}


/* ---------------------------------- summary chart stuff ---------------------------------- */

#adBlockHorz {
        margin: 0 0 2.0em 0.8em;
        padding: 0;
       /**
        width: 726px;
        height: 90px;
        **/
        position: relative;
}

#summaryBlock {
        position: relative;
        margin: 1.0em 0.8em 0 0;
        height: 494px;
        width: 235px;
        border: 1px solid; color: #d2d2d2;
}

#regionInfo {
        position: relative;
        top: 0.8em;
        height: 80px;
        width: 240px;
}


#summaryBlock h2 {
        margin: 0 0 0 0.6em;
        font-size: 130%;
        color: #032456;
}
    
#summaryBlock h5 {
        margin: 0 2.0em;
        color: #6991AA;
}


#sumGraph {
        width: 200px;
        height: 430px;
        margin: 0;
        padding: 0;
        list-style: none;
        font: 9px Helvetica, Geneva, sans-serif;
}

#sumGraph ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

/* ---- puts the vertical dotted line on graph ---- */
#sumGraph li {
        position: absolute;
        bottom: 30px;
        width: 24px;
        z-index: 2;
        margin: 0;
        padding: 0;
        text-align: center;
        list-style: none;
}

#sumGraph li.forecast {
        border-right: 1px dotted #C4C4C4;
}

#sumGraph li.block {width: 25px; color: #000;}

#sumGraph li.block p {margin: 5px 0 0; padding: 0; color: #000}

#sumGraph li.hour {bottom: 380px;}

#sumGraph li.swell {background: #DCA url(../images/chart/bar2.gif); bottom: 225px; border: 1px solid; color: #333;}
#sumGraph li.htsgwText {bottom: 225px;}
#sumGraph li.swellArrow {bottom: 205px;}
#sumGraph li.swellText {bottom: 190px;}
#sumGraph li.period {bottom: 170px;}


#sumGraph li.wind {background: #DCA url(../images/chart/bar2.gif); bottom: 40px; border: 1px solid; color: #333;}
#sumGraph li.wText {bottom: 40px;}
#sumGraph li.windArrow {bottom: 20px;}
#sumGraph li.windText {bottom: 5px;}

#sumGraph li.button {bottom: 0px; margin: 0 0 0 2.0em;}

#sumGraph #ticks {width: 600px; height: 100px; z-index: 1;}
#sumGraph #ticks .tick {position: absolute; border-bottom: 1px solid #BBB; width: 600px;}
#sumGraph #ticks .tick p {position: absolute; left: 100%; top: -0.67em; margin: 0 0 0 0.5em;}