/* Cascading Style Sheet */
/* Niles Oien from Frank Hage's May 2004 work */
/* Adapted from various sources, used here in ciddView */


/* Miscellaneous. */

html {
        margin: 0;
        padding: 0;
}

body {
        margin: 0;
        padding: 0;
        background-color: #AAAACC;
        font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

a {
        color: #09c;
        text-decoration: none;
}

p {margin-left: 100px}
p {margin-right: 100px}
ul {margin-left: 100px}
ul {margin-right: 100px}

a:link { color: #09c; }
a:hover { color: blue; }
a:visited { color: #07a; }

h1 {
        font-size: 150%;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #90a0a0;
}

h2 {
        padding-left: 8px;
        margin-top: 1.5em;
        font-size: 115%;
        color: #000;
}

h1 + h2 {
        margin-top: 0;
}

h3 {
        margin-right: 5%;
}

.footer {
        margin: 3px;
        padding: 0;
        color: #00f;
        text-align: center;
        font-size: small;
}


/* Sidebar. */
#sidebar {
        float: left;
        width: 20%;
}


/* Main page content. */
#content {
        padding: 0;
        height: auto;
        margin: 0 5% 2em 20%;
}

#content p {
        margin-left: 1em;
        margin-right: 1em;
}

#mainimage {
        clear: both;
	position: relative;
        top: 0px;
        left: 0px;
	height: 110%;
	width: 98%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
        border: 0px solid #000;
}

#Pan_img {
	position: relative;
    top: 0px;
    left: 0px;
}


#anim_controls {
        position: relative;
        float: left;
        margin: 20px 0px 0px 20px;
        background: #AAAACC;
}

#link_buttons {
        position: relative;
        float: left;
        margin: 2px 0px 0px 15px;
        background: #AAAACC;
}

#legend_panel {
    position: relative;
    float: right;
}

#status_panel {
    position: relative;
	clear: both;
    margin: 0px 0px 0px 10px;
}

#meso_text {
	top: 150px;
	left: 350px;
	width: 55em;
    border: 2px solid #222;
    background: lightblue;
    font: 9px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#meso_strip {
	top: 300px;
	left: 350px;
    border: 2px solid #222;
}

#snow_plot {
	top: 475px;
	left: 10px;
    border: 2px solid #222;
}

#metar_text {
	top: 150px;
	left: 10px;
	width: 38em;
    border: 2px solid #080;
    background: lightgreen;
    font: 9px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}


#Pan_div {
	position: relative;
    top: 0px;
    left: 0px;
}

.data_table td  {
    font: 10px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.data_table th  {
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.data_plot {
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}


.product_choices {
		position: relative;
		clear: both;
		float: left;
		margin-left: 10px;
}

.choice_item {
		position: relative;
		padding: 4px;
        bottom: 5px;
		margin: 2px 2px 2px 2px;
		width: auto;
		float: left;
}

.select_item {
		position: relative;
		padding: 4px;
        bottom: -25px;
		margin: 2px 2px 2px 2px;
		width: auto;
		float: left;
}

.choice_item h3 {
 color: #000;
 font: 10px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

/* Footer. */
#footer {
        bottom: 0px;
        clear: both;
        width: 100%;
        padding-bottom: 2px;
}

/******************************************************************
 * Header.
/* Tabs courtesy http://labs.silverorange.com */
#header {
        position: relative;
		top: 0px;
		left: 0px;
        width: 100%;
        height: 95px;
		clear: both;
        background-color: #AAAACC;
        background-image: url(/data/wsddm/DIA/wsdm/images/ral-header_top.jpg);
        background-repeat: no-repeat;
}

/* Hide the section navigation heading. */
#header h2 {
        display: none;
}

#header ul#primary {
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: -1px;
        /* A width is required for Opera, older Mozilla browsers,
        and Konqueror browsers. */
        width: 55em;
}

#header ul#primary li  {
        display: inline;
        list-style: none;
}
#header ul#primary a, #header ul#primary span, #header ul#primary a.current {
        width: 9em;
        display: block;
        float: left;
        padding: 2px 0;
        margin: 1px 1px 0 0;
        text-align: center;
        font-family: tahoma, verdana, sans-serif;
        font-size: 80%;
        text-decoration: none;
        color: brown;
}

#header ul#primary span, #header ul#primary a.current, #header ul#primary a.current:hover {
        border: 1px solid #666;
        border-bottom: none;
        background: #CCD;
        padding-bottom: 2px;
        margin-top: 0;
}

#header ul#primary a {
        background: #AAC;
        border: 1px solid #AAA;
        border-bottom: none;
}

#header ul#primary a:hover {
        margin-top: 0;
        border-color: #666;
        background: #AAC;
        padding-bottom: 5px;
}
#header ul#secondary {
        position: absolute;
        margin: 0;
        padding: 0;
        bottom: -1.4em;
        left: 1px;
        /* A width is required for Opera, older Mozilla browsers,
        and Konqueror browsers. */
        width: 55em;
}

#header ul#secondary li a, #header ul#secondary li span {
        width: auto;
        display: block;
        float: left;
        padding: 0 10px;
        margin: 0;
        /* CSS validation errors... */
        /* text-align: auto; */
        border: none;
        border-right: 1px dotted #AAA;
        background: none;

}

#header ul#secondary li a {
        color: #06C;
        text-decoration: underline;
}

#header ul#secondary li a:hover {
        color: #333;
        background: transparent;
        padding: 0 10px;
        border: none;
        border-right: 1px dotted #AAA;
}

header ul#secondary li a:active {
        color: #000;
        background: transparent;
}