/* CSS Document */
/**************************************************************
   AUTHOR:  Christy Carlson(High Plains Regional Climate Center)
   DATE:    2006.08.16
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/

html,body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ul,ol,li{margin:0;padding:0}

body{color:#4d4d4d; background: #FFF; font:11px tahoma, arial, sans-serif;}

img,fieldset{border:0}

input,button,textarea,select{font:11px tahoma, arial}
button{font-weight:bold}

a{color:#336699;text-decoration:none}
a:hover{text-decoration:underline}

p{padding-top:4px; padding-bottom:4px;}

h1, h2, h3, h4, h5, h6 {padding-top:10px; padding-bottom:2px;}

h1{font-size:19px;width:98%; border-bottom:#336699 dotted 1px;}
h2{font-size:14px}
h3{font-size:11px}


#pagetitle{margin:0px; padding:0px; padding-left:10px; margin-bottom:10px;}

/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/
#content { margin:auto; padding:5px 5px 5px 5px; background: #FFF; width: 940px; height:95%; font-size: 12px; background:url(/images/bg1_02.jpg) repeat-y left top;}
body {background-color:#666666;}
/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/
#header {padding:0px; margin:0; width: 100%;}
#logo { margin: 0; padding: 0; border: none;}
/**************************************************************
   .status - Status Message Area (error messages)
 **************************************************************/
.status { position: relative;width: 100%; background-color:#666666; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;  margin: 10px;}

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/
#menu {float:right; margin: 0;padding: 0; }

/**************************************************************
   #login
 **************************************************************/
#login{ float: right;  text-align:right; width:810px; font: .7em sans-serif; color: #7fb439; margin: 0; padding:5px;}
#login ul {  margin: 0;  padding: 0;}
#login li {  display: inline;  list-style: none;  }
#login li a {  float: right;  font: 10px sans-serif;  padding-left: 10px; text-decoration: none;  text-transform: uppercase;  color:  #7fb439;}
#login li a:hover{ color:#7fb439;  text-decoration:underline;}
#login form { float: right;}


/**************************************************************
   #bread: The breadcrum navigation
 **************************************************************/
#breadcrumb {width: 98%; color: #333; margin: 0px; padding-left: 1%; padding-right:1%; line-height: 1; font: 8pt verdana, sans-serif; }
#breadcrumb ul {float: left; margin-left: 0px; padding-right: 1%; padding-bottom:5px; display: inline; border: none; }
#breadcrumb ul li {	margin-right: 2px;padding-right: 2px; border: none;display: inline;}
#breadcrumb:after{clear:both;content:".";display:block;height:0;visibility:hidden}
/**************************************************************
   #page: Holds the main page content.
 **************************************************************/
#page { background: #FFF; display: block; margin: 0px; padding-left: 1%; min-height:650px; padding-right:1%; text-align:left; width: 98%; font: 400 12px sans-serif;}
#page ul {list-style-image: url(images/bg/bullet.gif); padding-left: 30px;}
/******************************************************
 *added by Jun Li, this is style for station search tab
 ******************************************************/
#searchtabs ul {list-style-type: none; list-style-image: none; padding-left: 30px;}
/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/
#footer { clear: both; position: relative; background: #FFF; padding-top: 7px; margin: 0px; display:block;  text-align:left;  font-size:10px; width: 100%; background:url(images/bg_orange_grey.jpg) top repeat-x;}
#footer p {margin-left:1%;}


.formhighlight{  display: inline;  border:thin;}

/**************************************************************
   #box
 **************************************************************/
.box { margin:0 0 10px 0px; border: 1px #cccccc solid; width:100%; }
.box h1 {text-decoration:none; border-bottom:#cccccc 1px solid; font-size: 12px; height:17px; float: left; color:#000000; padding-top:3px; margin-bottom:10px; background:url(images/tab-strip-bg.gif) repeat-x top; width: 100%; }
.box h1 a {padding-left:2px; color:#666666;}
.box h1 a:hover {color:#FF9900}
.box h2 {text-decoration:none; border-bottom:none; font-size: 12px; height:17px; float: left; color:#FFFFFF; padding-top:3px; margin-bottom:10px; background:#5488a7 url(images/bg_blue_tab.gif) repeat-x top; width: 100%; }
.box h2 a {padding-left:2px;color:#FFFFFF;}
.box h2 a:hover {color:#FF9900}

.box p {padding-left:5px; padding-right:5px; padding-top:3px;}

.caption { font-size:9px; color:#999999; }

.img_box {border: 3px solid #cccccc; margin: 5px;}
.small_img {border: 1px solid #cccccc; margin: 0; padding: 0; display: inline; float: left;}

#leftColumn{float:left; padding:5px}
#rightColumn{float:right; background-color:#f2f2f2;}

.metagroup {display: block;}
.metagroup .meta {float: left;}
.metagroup .label{float: left; display: inline;}
.metagroup .item {float: right; display: inline;}


.station_img {margin: 5px;}


.clearfix{display:block}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}

.clear {clear:both;}

.smallfeature{ padding:3px; margin:0; width: 24%; float: left;  background: #FFFFFF;
  font: 10px sans-serif;}
.smallfeature h1{ color: #224d6f; font-size: 14px; border-bottom:#ff9933 1px dotted; }
.smallfeature h2{ font-size:10px; font-style:italic; color: #000000;}
.smallfeature img{margin-left: 5px;border: 5px #FFFFFF;display: block;}


/**************************************************************
   Blockquote and included icons
 **************************************************************/

blockquote {
  margin: 10px 15px;
  padding-left: 35px;

  background-color: #cccccc;
  background-image: url(images/icons/quote.gif);
  background-repeat: no-repeat;
  background-position: 5px 50%;
}

blockquote.exclamation {
  background-image: url(images/icons/exclamation.gif);
}

blockquote.stop {
  background-image: url(images/icons/stop.gif);
}

blockquote.go {
  background-image: url(images/icons/go.gif);
}


/**************************************************************
   Images
 **************************************************************/

img.floatRight {
  margin: 5px 0px 10px 15px;
}

img.floatLeft {
  margin: 5px 15px 10px 0px;
}


a:hover img {
  /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
  /*border: 2px solid #FFF !important;
  border: 2px solid #8BE6FA; */
  border: none;
}

.stationlistTable{width:100%; border:none; }
.stationlistTable tr.odd {background-color:#e0e0e0;}
.stationListTable td {padding-left: 5px; text-align:center;}


#menu{margin:0 0 5px 0; padding:0;width:100%; background: url(images/bg_blue_tab.gif) repeat-x top; height:20px; }

#tabs{margin:0;padding:0; height:20px; width:810px; float:left; }
#tabs ul{position:absolute;display:block;width:135px;background:url(images/bg_blue_tab.gif) repeat-x bottom; }
#tabs li ul{z-index:100;visibility:hidden;width:134px;}
#tabs li{width:135px;height:auto;display:inline;float:left;background:#969696 url(images/bg_blue_tab.gif) no-repeat top left;}
#tabs li li{display:block;float:none;background:#fff0ce;width:133px;}
#tabs a{font:bold 11px tahoma, arial;color:#fff;line-height:20px;text-align:center;display:block;width:134px;background:url(images/bg_blue_tab.gif) no-repeat top left;border-right:1px solid #a2a2a2}
#tabs a:hover, #tabs a.selected{background:url(images/bg_orange_tab.gif) no-repeat bottom left;color:#fff;text-decoration:none}
#tabs ul a{font:normal 11px tahoma, arial;color:#666666;line-height:20px;width:132px;background:#e4e4e4;border-right:1px solid #a2a2a2;border-left:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2}
#tabs li.l{width:140px;}
#tabs li.l a{width:139px;}
#tabs li li li{background:#fff9ea;}
#tabs li li ul{position:absolute;margin:-22px 0 0 133px;}
#tabs ul ul a{background:#fff9ea;}
#tabs ul a:hover, #tabs ul a.selected{background:url(images/bg_orange_tab.gif) no-repeat bottom left;}


#submenu_login{clear:both; margin:0 0 5px 0; padding:0;width:100%; background: url(images/bg_blue_tab.gif) repeat-x top; height:20px; }

#subtabs_login{margin:0;padding:0; height:20px; width:810px; float:left; }
#subtabs_login ul{position:absolute;display:block;width:135px;background:url(images/bg_blue_tab.gif) repeat-x bottom; }
#subtabs_login li ul{z-index:100;visibility:hidden;width:134px;}
#subtabs_login li{width:135px;height:auto;display:inline;float:left;background:#969696 url(images/bg_blue_tab.gif) no-repeat top left;}
#subtabs_login li li{display:block;float:none;background:#fff0ce;width:133px;}
#subtabs_login a{font:bold 11px tahoma, arial;color:#fff;line-height:20px;text-align:center;display:block;width:134px;background:url(images/bg_blue_tab.gif) no-repeat top left;border-right:1px solid #a2a2a2}
#subtabs_login a:hover, #tabs a.selected{background:url(images/bg_orange_tab.gif) no-repeat bottom left;color:#fff;text-decoration:none}
#subtabs_login ul a{font:normal 11px tahoma, arial;color:#666666;line-height:20px;width:132px;background:#e4e4e4;border-right:1px solid #a2a2a2;border-left:1px solid #a2a2a2;border-bottom:1px solid #a2a2a2}
#subtabs_login li.l{width:140px;}
#subtabs_login li.l a{width:139px;}
#subtabs_login li li li{background:#fff9ea;}
#subtabs_login li li ul{position:absolute;margin:-22px 0 0 133px;}
#subtabs_login ul ul a{background:#fff9ea;}
#subtabs_login ul a:hover, #tabs ul a.selected{background:url(images/bg_blue_tab.gif) no-repeat bottom left;}


#submenu{clear:both; margin-top:5px; margin-bottom:5px; margin-left:0px; padding:0px; width:100%; background: url(images/bg_lightblue_tab.gif) repeat-x top; height:20px; }

#subtabs{position:absolute; margin:0; padding:0; display:block; width:898px; float:left; background: url(images/bg_lightblue_tab.gif) repeat-x top; }
#subtabs li{width:99px;height:auto;display:inline;float:left;background:#849eb3 url(images/bg_lightblue_tab.gif) no-repeat top left}
#subtabs a{font:normal 11px tahoma, arial;color:#fff;line-height:20px;text-align:center;display:block;width:98px;background:url(images/bg_lightblue_tab.gif) no-repeat top left;border-right:1px solid #d8e1e9}
#subtabs a:hover, #languages a.selected{background:url(images/bg_orange_tab.gif) #fcda2e no-repeat top left;text-decoration:none}
#subtabs li.l{width:101px}
#subtabs li.l a{width:100px}


.treeview {
padding-left:20px;
margin:0px;
position:relative;
float:left;
display:block;
}

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;

}

.na {
color:#CCCCCC;
text-decoration:none;
}

.na a{
color:#CCCCCC;
text-decoration:none;
}

.na a:hover{
color:#999999;
text-decoration:none;
}

.error{
color:#FF0000;
text-decoration:none;
}

/**************************************************************
   Buttons
 **************************************************************/

.button {cursor:pointer;text-decoration:none; text-align:center; border:#cccccc 1px solid; font-size: 11px; color:#000000; background:url(images/tab-strip-bg.gif) repeat-x top; margin-top:5px;}

#topbanner {clear:both; display:block; background:#666666; width:850px; height:200px; float:left; margin:0; padding:0;}
#topbanner:after{clear:both;}
#topimage {width:600px; height:200px; float:left; padding:0; margin:0;}

.clearfix{display:block}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}