@charset "utf-8";
/* CSS Document */

.forecastBlock {

	width:100%;
	}

.hxh_container {
	background:#FFFFFF;
	font-size:10px;
    font-family: sans-serif;
	}

.descriptionBar{
	float:left;
	text-align:right;
		
}

.day{
	float:left;
	text-align:center;	
	border-color:#FFF;
	border-width:1px;
	border-style:solid;
	max-width: 70px;
}

.title{
	padding-right:5px;
	/*padding-left:5px;*/
	font-weight:bold;
	height:14px;
	font-family: sans-serif;
}

.data{
	vertical-align:middle;
	height:14px;	
}

.condition.title{
	
}

.wxHeaderTitle{
	padding:5px;
	font-size:16px;
	font-weight:bold;
	width:100%;
	text-align:center;
}

.wxHeader{
	width:100%;
}

.wxtext{
	height:80px;
	padding-left:3px;
	padding-right:3px;
	vertical-align:middle;
}

.wxWindDirection.data{
	height:auto;
	padding:5px;	
}

.wxWindDirection{
	height:40px;
}

.cloudCover{
	height:41px;	
}

.ccImage{
	width:30px;
	height:18px;
	margin-left:auto;
	margin-right:auto;
	padding-top:0px;	
}

.uvIndex{
	height:40px;	
}

#warning{
	padding-bottom:10px;
	padding-right:10px;	
	white-space: normal;
	width: auto;
	
}

.uvImage{
	width:30px;
	height:30px;
	padding-top:9px;
	margin-left:auto;
	margin-right:auto;
	font-weight:bold;
	background-repeat:no-repeat;
}

.clearDiv{
	clear:both;
	width:100%;
	height:1px;
	
}

.forecastHeader{
	padding:10px;
	text-align:center;
	font-weight:bold;
	font-size:12px;
}

.time{
	padding:3px;
	font-weight:bold;
	height:auto;
	background-color:#FFF;
}

.timeTitle{
	height:70px;
}

.tempTitle{
	height:80px;
}
.feelsLikeTitle{
	height:25px;
}

.humidityTitle{
	height:20px;
}

.dewpointTitle{
	height:20px;
}

.winddirectionTitle{
	height:45px;
}


.windspeedTitle{
	height:15px;
}

.windgustsTitle{
	height:25px;
}

.cloudcoverTitle{
	height:22px;
}
.wxprevious{
	float:left;
	font-weight:bold;
	color:#00F;
}

.wxnext{
	float:right;
	font-weight:bold;
	color:#00F;
}

.hxh-odd{
	background-color:#C0EAFE;
}

.hxh-even{
	
}

.bordertop{
	border-top-style:solid;
	border-top-color:#FFF;
	border-top-width:1px;
}

.autoCompleteResult{
	border-bottom-style:solid;
	border-color:#CCC;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:3px;
	paddint-top:3px;
}

.hrBlock{
	float:left;
}

#forecast{
	height:555px;
}

#container{
	width:650px;
	z-index:1;
}

#searchtext{
	width:200px;	
}

#results{
	position: absolute;
	z-index:10;
	background-color:#CCC;
	border-style:solid;
	border-color:#FFF;
	border-width:1px;
	width:auto;
	margin-top:18px;
	
}

#wxLoading{
	margin-top:20px;
	margin-bottom:20px;
	margin-left:85px;
	width:auto;
	height:auto;
	padding:20px;
	border-color:#FFF;
	border-style:solid;
	border-widht:1px;
	text-align:center;
	font-size:16px;
	background-color:#CCC;
}

#searchContainer{
	padding:5px;
	padding-left:85px;
	float:left;
}

#wxSearch{
	float:left;	
}

#bttnSearch{
	float:left;
	width:20px;
	height:20px;
	background-image:url('https://stormcenter.info/weather/hxh/images/searchBttn.png');
	background-repeat:no-repeat;
	margin-left:5px;
}

#jumpContainer{
	float:left;
	padding:5px;
}

.tempContainer{
	padding:5px;
	text-align:center;	
	height:115px;
	vertical-align:bottom;
}

.thermometer{
	width:10px;
	height:50px;
	background-color:#FFF;
	background-repeat:no-repeat;
	border-style:solid;
	border-bottom-style:none;
	border-color:#000;
	border-width:2px;
	margin-left:auto;
	margin-right:auto;
}

.mercury{
	background-repeat:no-repeat;
	background-color:#F00;
}

.thermotemp{
	color:#FFF;
	font-weight:bold;
	width:25px;
	height:20px;
	background-repeat:no-repeat;
	margin-left:10px;
	text-align:center;
	padding-top:2px;
	font-size: 2em;
    text-shadow: 0px 0px 6px #000, 0 1px #000, 1px 0 black, 0 2px black;
}

.thermotemp:after {
  content: "\00b0";
}

.smallTemp:after {
  content: "\00b0";
}

.realFeelTemp:after {
  content: "\00b0";
}

.realFeelTemp {
  font-size:1.5em;
  border-top:1px solid white;
  height:25px;
  color:white;
  text-shadow: 0px 0px 6px #000, 0 1px #000, 1px 0 black, 0 2px black;
}

.humidity {
  font-size:1.2em;
  height:20px;
  color:black;
}

.dewpoint {
  font-size:1.2em;
  height:20px;
  color:black;
}

.iconPhrase {
	padding-top:5px;
	color:#FFF;
    text-shadow: 0px 0px 6px #000, 0 1px #000, 1px 0 black, 0 2px black;
}


.red{
	background-color:#FF4848;
}

.orange{
	background-color:#FF962D;
}

.lorange{
	background-color:#FFBA75;
}

.yellow{
	background-color:#FF0;
}

.green{
	background-color:#00CA00;
}

.lgreen{
	background-color:#6F9;
}

.lblue{
	background-color:#6CF
}

.blue{
	background-color:#06F;
}