html, body {
   background: #d7e1ff;
   height: 95%;
}

body {
   font-family: arial, sans-serif, times;
   font-size: 12pt;
   color: #333;
}

#footer {
   text-align: center;
   clear: both;
   margin: 0 auto;
}

a {
   text-decoration: underline;
   color: #AAAAFF;
}

a:visited {
   color: #00b;
}

a:link {
   color: #00b;
}

a:hover {
   color: #e2144a;
}

h1 {
   font-size: 18pt;
   display: inline;
   text-align: center;
   font-family: arial, sans-serif;
   font-weight: bold;
   text-decoration: none;
   margin-top: 2em;
   margin-bottom: 2em;
   margin-left:auto;
   margin-right:auto;
}

.indented {
   margin-left: 2em;
}

.margins {
   margin: 15px 0 15px -1.5em;
}

h2 {
   font-size: 15pt;
   text-decoration: none;
   margin-top: 0.3em;
   margin-bottom: 0.25em;
   margin-left:2.5em;
   margin-right:2.5em;
}

.answers{
   font-size: 15pt;
   font-weight: bold;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
}

.clear ol ul{
   margin-left: 1em;
}

h3 {
   font-size: 13pt;
   text-decoration: none;
}

.clear ol h3 {
   margin-left: -1.5em;
}

p {
   font-size: 10pt;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
   margin-left: 4em;
   margin-right: 4em;
}

ol p {
   font-size: 10pt;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
   margin-left: 0;
}

.hidden {
   display: none;
}

form.visible {
   /*background: #337788;*/
   text-align: center;
}
form h1 {
   margin: 0;
   /*background: #004455;*/
   font-size: 16pt;
   font-weight: bold;
   text-decoration: none;
   display: block;
}

.spacer {
   margin: 2em;
}

.clear {
   clear: both;
}
.left {
   float: left;
   width: auto;
}
.center {
   text-align: center;
}
/* Divs dont align to center properly since they autosize, fix it */
div.center {
   padding-left: 1em;
   padding-right: 1em;
   width:auto; /* Real width */
   font-size: 10pt;
}

div#FlexiView {
   line-height:130%;
}

h1.sm_lh {
   line-height:70%;
}

.flexibtn{
   background:#1042ad;
   border-top:2px solid #C2D2FF;
   border-right:2px solid #4274ff;
   border-left:2px solid #C2D2FF;
   border-bottom:2px solid #4274ff;
   color:white;
   cursor:pointer;
   font-weight: bold;
   margin:0;
   padding:0;
   
}

br.sm { 
   font-size: 1px;
   line-height: 0; 
}

/* And for some reason tables dont center at all so fix this too */
div.center table {
   margin: 5px auto;
}

.right {
   float: right;
   width: auto;
}

img {
   margin: 2px 2px 2px 2px;
   border: 0px;
}

ol {
   /*list-style-type: lower-latin;*/
   margin-left:2em;
}

div.answers li{
   font-size: 15pt;
}

.clear li {
   font-size: 10pt;
}

.content li {
   font-size: 10pt;
}

/* IE doesnt style acronym tags, use this to make it firefox-ish */
acronym {
   border-bottom: dotted #ffffff 1px;
}

.smartbuoythumbnail {
   text-align: center;
   margin: 1em 1em 1em 1em;
}
.thumbnail {
   text-align: center;
   margin: 0em 1em 0em 1em;
}

.float_thumbnail {
   float: left;

   text-align: center;
   margin: 0em 1em 0em 1em;
}

.searchresult {
   padding: 1em 1em 1em 1em;
}


/* Another example of center aligning not working, this fixes it */
div.center_imagebutton {
   margin: auto;
   padding: 0;
   width: 125px;
}
div.imagebutton {
   background: url(/multiview/images/buttons/button.png) no-repeat;
   margin: 0;
   padding: 0;
   height: 59px;
   width: 125px;
   text-align: center;
   vertical-align: middle;
}
div.imagebutton:hover {
   background: url(/multiview/images/buttons/button_hot.png) no-repeat;
}

div.zoomy_outer {
   float: right;
   border-style: solid;
   margin:0cm 1cm 0.2cm 0.2cm;
}

div.zoomy_inner {
   margin:0.2cm;
}

img.scalebar {
   max-width:90%;
   display:block;
   margin-left:auto;
   margin-right:auto;
}

.units {
   text-align: left;
/*  white-space: nowrap;*/
}

pre.equation {
   border: dotted 1px #B0B0B0;
   padding: 0.25em;
   margin: 0.25em;
   background: #308080;
}

.popup_trigger {
   position: relative;
}

.popup {
   display: none;
   border: dotted 1px #B0B0B0;
   padding: 0.25em;
   margin: 0.25em;
   background: #C2D2FF;
   white-space: nowrap;
   width: auto;
   top: 1em;
}

.popup_trigger:hover .popup {
   position: absolute;
   display: block;
}

.warning img {
   margin: 0;
}

.help_link {
   display: inline;
}

.textjustify {
   text-align: justify;
}
.highlight {
   font-weight: bold;
   font-style: italic;
}

div.forecast_container {
   width: 700px;
   float: left;
}

div.forecast {
   width: 100%;
   float: left;
   margin-bottom: 1em;
   padding-bottom: 0.5em;

   background-color: #337788;
   border: 1px black solid;   
   overflow: auto;
}

div.nowcast_container {
   /* width: 22%; */
   width: 225px;
   float: left;
   margin-right: 1em;
}

div.nowcast {
   width: 100%;
   /* float: left; */
   padding: 0em;

   background-color: #337788;
   border: 1px black solid;
}

div.forecast_heading {
   width: 100%;
   margin: 0em;
   padding: 0em;

   border-top: 1px #004455 solid;
   border-bottom: 1px black solid;
   background-color: #004455;
}

div.forecast_product_dropdown {
   width: 100%;
   margin: 0em;
   margin-top: 1em;
   padding: 0em;
}

div.forecast_product_select {
   width: 100%;
   margin-bottom: 1em;
   padding: 0em;

   text-align: left;
}

a.forecast_product_link {
   /* width: 50px; */
   margin: 0px;
   margin-right: 1em;
   padding: 0em 0.5em 0em 0.5em;

   background-color: #337788;
   font-weight: 600;
   font-size: 10pt;
   text-decoration: none;
   border: 1px solid black;
   /*assuming "hidden was meant instead of clip*/
   overflow: hidden;
}

img.swapp_model_scalebar {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 7px;
}
th {
   background: #000;
}

.buttonimage {
   margin-left: 5px;
   margin-right: 5px;
   padding-left: 5px;
   padding-right: 5px;
   float: left;
   height: 23px;
   width: 35px;
   cursor: pointer;
   border: 1px solid #00b;
}

.buttonimage-selected {
   margin-left: 5px;
   margin-right: 5px;
   padding-left: 5px;
   padding-right: 5px;
   float: left;
   height: 23px;
   width: 35px;
   cursor: pointer;
   border: 3px solid #00b;
}

#button-container {
   width: 135px;
   margin: 5px auto 0 auto;
}

.stretchBtnP {
   width: 54px;
   height: 32px;
   margin-top: 5px;
   margin-left:25px;
   margin-right:auto;
   /*background-image: url("/multiview/images/buttons/plus54x32.png");
   background-repeat:no-repeat;*/
   float:left;
   
}
.stretchBtnM {
   width: 54px;
   height: 32px;
   margin-top: 5px;
   margin-left:25px;
   margin-right:auto;
/*   background-image: url("/multiview/images/buttons/minus54x32.png");
   background-repeat:no-repeat;*/
   float:left;
}
.qcbutton{
   float:right;
   margin-top:5px;
   margin-right:25px;
}