html, body, p
{
  margin: 0;
  padding: 0;
  color: #444;
}
body {
  font-family: Myriad Pro, Myriad, Trebuchet MS, Arial, Helvetica, sans-serif;
  background-color: #fff;
}
#top{
  background-color: #f2f2f2;
  width: 100%;
  height: 60px;
}
.small{
  color: #333;
  font-size: 14px;
}
.titletext{
  float:left;
  line-height: 60px;
  font-size: 160%;
  padding-left:60px;
  background: url("/vedre/img/jattefin_logga.png") left center no-repeat;
}
.resultbox{
  border: 1px dotted #333;
  min-height: 50px;
}
.active {
  color: #00c0f0;
  text-decoration: none;
}
#formwrapper{
	margin: 0 auto;
    width: 900px;
}
#top form, #searchform {
  float: left;
  margin-left: 100px;
  clear: none;
  margin-top: 10px;
}
 #top form input{
	margin: 5px;
	padding: 0;
	float:left;
	font-size: 80%;
	height: 28px;
	padding-left:3px;
}
.searchfield{
	width: 10em;
}
.find{
	cursor:pointer;
    color: #00c0ef;
	width: 60px;
	background: url("/vedre/img/find.png") center center no-repeat #00c0ef;
	border: 1px solid #21a2ca;
	border-radius: 2px;
	-moz-border-radius: 2px;
}
.find:hover{
	background-color: #00aad7;
}

#footer{
  width: 100%;
  background: url("/vedre/img/footer_bg.png") top left repeat-x #fff;
  position:relative;
  text-align: center;
  min-height: 400px;
  clear:both;
}

#footer a{
  margin: 0 auto;
  font-size: 70%;
  color: #333;
  text-decoration: none;
}

#footer .greyblock{
  display:inline-block;
  width: 280px;
  height: 65px;
  border: 1px solid #dbdbdb;
  font-size: 200%;
  line-height: 65px;
  margin:15px;
  background-color: #fff;
}

/*<Sökcss>*/
.region{
font-size: 60%;
font-weight: normal;
}
.button{
border:1px solid #FFF;
background: #888;
color:#FFF;
margin:2px 0 2px 5px;
display:none;
}
#top, ul.ui-autocomplete{
  font-size: 130%;
  
}
/*</Sökcss>*/

ul#tabs{
 margin-top: 50px;
 list-style: none outside none;
 margin-left: 0;
 padding-left: 0;
 text-align: left;
 }

ul#tabs li{
display:inline-block;
line-height: 60px;
height: 60px;
font-size: 150%;
padding: 0 20px;
margin-right: 20px;
background: url("/vedre/img/tab_bg.png") 5px 0px repeat-x transparent;
border-radius: 2px;
-moz-border-radius: 2px;
}
ul#tabs li:hover{
  background-position: 0 0;
  color: #00c0f0;
}

#weather{
 width:500px;
 margin: 40px auto;
 background-color: #fff;
 padding: 40px;
}
h2,h3{
font-weight: normal;
text-align:center;
}
h2{
font-size: 200%;
}
h3{
font-size:130%;
}

.clear{
clear: both;
overflow:auto;
}

/*<Vädertabeller>*/
.forecast{
	clear: both;
	overflow: auto;
    text-align: center; 
	margin: 0 auto;
	width:600px;
}
.forecast .time{
float: left; font-weight: bold; width: 20%; padding-top: 8px; clear: both;
}
.forecast .graphic{
float: left; width: 20%;
}
.forecast .temperature{
float: left; font-size: 18px; width: 20%; padding-top: 8px; font-size: 200%;
}
.forecast .warm{
color: #F01C1C;
}
.forecast .cold{
color: #1C35F0;
}
.forecastseparator{
width: 100%; border-bottom: 2px dotted #aaa; margin-bottom: 10px; clear:both;
}
.forecast .date{
width: 100%; float: left; font-weight: bold; padding: 8px 0 20px 0; font-size: 200%; clear: both;
}
.forecast .precipitation{
float: left; width: 20%; padding-top: 8px;
background: url("/vedre/img/rain.png") 20px 5px no-repeat transparent;
}
.forecast .wind{
float: left; width: 20%; padding-top: 8px;
}
/*</Vädertabeller>*/

/*<Vädertabeller>*/
#contentwrapper{
 width:910px;
 margin: 0 auto;
 overflow: hidden; 
}
#weatherbox{
  margin: 0;
  padding: 0;
  width:900px;
}


.smalltablewrapper{
  clear: both;
  padding: 0;
  margin: 0;
  overflow: auto;
  width: 900px;
}

.smalltable{
display: block; float: left; text-align: center;
padding: 2px; margin: 2px; width: 80px; background: url("/vedre/img/smallbox_bg.png") bottom repeat-x;
}

.smalltable a,
.smalltable img{
	border: 0;
	color: inherit;
}

.smalltable span{
	display: block;
}
.smalltable:hover{
padding: 1px;
border: 1px solid #ccc;
}

.smalltable .graphic{
padding-top:30px;
}
.smalltable .temperature{
font-size: 150%;
padding-bottom:30px;
}
.smalltable .warm{
}
.smalltable .cold{
}
.smalltableseparator{
display:none;
}
.smalltable .date{
clear: both; width:100%; font-size: 110%;
}
.smalltable .precipitation{
float: left; padding-top: 8px; clear: both; width: 100%;white-space:nowrap; text-align: left;
background: url("/vedre/img/rain.png") left center no-repeat transparent;
padding-left: 20px;
}
.smalltable .wind{
float: left; padding-top: 8px; clear: both; width: 100%;white-space:nowrap; line-height:20px;height:20px; text-align: left;
}
.smalltable .wind img{
padding-right: 4px;
}

.nowwrapper{
padding:50px;
overflow: auto;
clear:both;
width:100%;
}
.now{
display: block; float: left; text-align: center; margin: 0 33px;
}
.now a, .now img {
    border: 0 none;
	color: inherit;
}


.now .time{
width: 128px; text-align: center; float:left; font-size: 120%; margin-bottom: 5px;
}
.now .graphic{
clear:left;
float:left;
}
.now .temperature{
margin-left: 10px;
font-size: 200%;
float:right; line-height:128px;
}
.now .warm{
}
.now .cold{
}
.nowseparator{
display:none;
}
/*</Vädertabeller>*/

.searchresult a
{
font-size: 120%;
line-height: 120%;
text-decoration: none;
color: #445987
}

#daysleft{
	padding-top: 20px;
	width: 100%;
	text-align: center;
	font-size: 120%;
	clear: both;
}
#daysleft span{
	text-align: center;
	-moz-border-radius: 2px 2px 2px 2px;
    background: url("/vedre/img/tab_bg.png") repeat-x scroll 5px 0 transparent;
    display: inline-block;
    margin-right: 10px;
    padding: 0 10px;
}
#daysleft a{
	text-decoration: none;
	color: #444;
}
#daysleft a:hover{
  color: #00c0f0;
}