/**
* Wetter.in
*
* Wetter.in Stylesheet
*
* @author Joram Höfs <joram@fliks.com>
* @version 1.0
*
* @creator My cold dead hands + TextMate
*
* @media all
*
* @date 2009-12-17 Dokument erstellt
*/
 
/* <base-layout>------------------------------------------------------------------------------------------------------*/
/**
* Basislayout
* @section base-layout
*/

/**
* Body
*/
body {
	margin: 0 0 0 10px;
}

/**
* Body mit default Background-Theme
*/
body#default {
	background: #5a93d4 url(../img/bg.jpg) top left no-repeat;
}

/**
* Wrap
*/
#wrap {
	width: 950px;
}

/**
* Head
*/
#head {
	background: url(../img/head.png) top left no-repeat;
	height: 130px;
}

/**
* Logo
*/
#logo {
	background: url(../img/logo.png) top left no-repeat;
	display: block;
	width: 535px;
	padding: 115px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:115px;
	position: absolute;
	z-index: 100;
	left: 20px;
}

/**
* Content
*/
#content {
	overflow: hidden;
}

/**
* Contentarea
*/
#ca {
	float: left;
}

/**
* Sidebar
*/
#sb {
	float: right;
	width: 300px;
	position: relative;
	left: -80px;
}

/* </base-layout>------------------------------------------------------------------------------------------------------*/

/* <generic-elements>------------------------------------------------------------------------------------------------------*/
/**
* Generische Elemente
* @section generic-elements
*/

	/* <widgetbox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die einfache Widgetbox, z.B. Suchfunktion
	* @subsection widgetbox
	*/

	/**
	* Widgetbox
	*/
	.wbox {
		background: url(../img/wbox.png) top left no-repeat;	
		height: 132px;
		width: 590px;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-15 */
		margin: -15px 0 0 0;
	}

	/**
	* Widgetbox Titel
	*/
	.wbox .head {
		color: #33557a;
		font: 500 18px Verdana, Arial, Sans-Serif;
		padding: 22px 0 0 25px;
	}
	
	/**
	* Widgetbox Content
	*/
	.wbox .content {
		margin: 8px 0 0 26px;
		width: 535px;
	}
	
	/* </widgetbox>------------------------------------------------------------------------------------------------------*/
	
	/* <widgetinfobox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Info-Widgetbox, Stadtkurzinfo
	* @subsection widgetinfobox
	*/

	/**
	* Widget Kurzinfo
	*/
	.winfo {
		background: url(../img/winfo.png) top left no-repeat;	
		height: 132px;
		width: 590px;
		padding: 30px 0 0 0;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-15*/
		margin: -15px 0 0 0;
	}

	/**
	* Widget Content
	*/
	.winfo .content {	
		margin: 0 0 0 8px;
		overflow: hidden;
	}
		
	/* </widgetinfobox>------------------------------------------------------------------------------------------------------*/
	
	/* <minibox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Mini-Widgetbox, z.B: für die Buttons auf der Stadtseite
	* @subsection minibox
	*/

	/**
	* Minibox 
	*/
	.mbox {
		background: url(../img/mbox.png) top left no-repeat;	
		height: 81px;
		width: 590px;
		padding: 30px 0 0 15px;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-15*/
		margin: -15px 0 0 0;
	}
	
	/* </minibox>------------------------------------------------------------------------------------------------------*/
	
	/* <forecastbox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Forecastbox, für die 9 Tage Wettervorschau
	* @subsection forecastbox
	*/

	/**
	* Forecastbox
	*/
	.forecast {
		background: url(../img/forecastBox.png) top left no-repeat;	
		height: 500px;
		width: 590px;
		padding: 30px 0 0 15px;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-50*/
		margin: -50px 0 0 0;
	}

	/**
	* Forecastbox Titel
	*/
	.forecast .head {
		color: #33557a;
		font: 500 18px Verdana, Arial, Sans-Serif;
		padding: 0 0 0 25px;
		margin: -10px 0 0 0;
	}

	/**
	* Forecastbox Content
	*/
	.forecast .content {
		margin: 6px 0 0 0;
		width: 535px;
	}

	/**
	* Forecastbox info
	*/
	.forecast .info {
		padding: 5px 0 0 0;
		overflow: hidden;
	}

	/**
	* Forecastbox info línks
	*/
	.forecast .info .box_lft {
		width: 115px;
		margin: 0 0 0 10px;
	}
	
	/**
	* Forecastbox info links karte
	*/
	.forecast .info .box_lft #map {
		height: 52px;
		width: 100%;
	}
	
	/**
	* Forecastbox bigmap
	*/
	#bigMap {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 200;
		background: #ccc;
	}

	/**
	* Forecastbox info rechts
	*/
	.forecast .info .box_rgt {
		width: 395px;
		margin: 0 0 0 10px;
	}

	/**
	* Forecastbox info tabellen bezeichner
	*/
	.forecast .info .box_rgt table td.lbl
	{
		color: #243d57;
		font: 600 12px Verdana, Arial, Sans-Serif;
		padding: 0 15px 0 0;
	}

	/**
	* Forecastbox info tabellen daten
	*/
	.forecast .info .box_rgt table tr td
	{
		color: #243d57;
		font: 500 12px Verdana, Arial, Sans-Serif;
	}
	
	/**
	* Forecastbox Wetterdaten bereich
	*/
	.forecast .data {
		padding: 20px 0 0 20px;
	}
	
	/**
	* Forecastbox Wetterdatenauswahl einrtag
	*/
	.forecast .data ul li {
		display: block;
		float: left;
		width: 10%;
	}

	/**
	* Forecastbox Wetterdatenauswahl link
	*/
	.forecast .data ul li a {
		color: #243d57;
		cursor: pointer;
		font: 500 13px Verdana, Arial, Sans-Serif;
		text-decoration: none;
	}

	/**
	* Forecastbox Wetterdatenauswahl aktiver link
	*/
	.forecast .data ul li.act a {
		color: #243d57;
		font: 600 13px Verdana, Arial, Sans-Serif;
	}

	/**
	* Forecastbox Wetterdaten Tabelle
	*/
	.forecast .data table {
		color: #243d57;
		margin: 30px 0 0 0;
		width: 100%;
		table-layout: fixed;
		empty-cells: show;
	}
	
	/**
	* Forecastbox Wetterdaten Tabelledatne
	*/
	.forecast .data table tbody {
		display: none;
		height: 290px;
		width: 100%;
	}
	
	/**
	* Forecastbox Wetterdaten Tabelledaten
	*/
	.forecast .data table tbody#day_today {
		display: table;
		height: 290px;
	}
	
	/**
	* Forecastbox Wetterdaten Tabelle bezeichner
	*/
	.forecast .data table td.lbl {
		text-align: right;
		font: 600 14px Verdana, Arial, Sans-Serif;
	}

	/**
	* Forecastbox Wetterdaten Tabelle Daten
	*/
	.forecast .data table td {
		text-align: center;
		font: 500 14px Verdana, Arial, Sans-Serif;
	}
	
	/**
	* Forecastbox Wetterdaten Tabelle Daten Zeitraum
	*/
	.forecast .data table td.timeframe {
		font: 600 11px Verdana, Arial, Sans-Serif;
	}
	
	/* </forecastbox>------------------------------------------------------------------------------------------------------*/
		
	/* <sidebarbox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Sidebarbox in der Sidebar
	* @subsection sidebarbox
	*/

	/**
	* Sidebarbox Wrap
	*/
	.sb_box_wrap {
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-15 l-50*/
		margin: -15px 0 0 0;
	}

	/**
	* Sidebarbox
	*/
	.sb_box {
		background: url(../img/sb_t.png) top left no-repeat;
		min-height: 204px;
		width: 330px;
	}

	/**
	* Sidebarbox Titel
	*/
	.sb_box .head {
		color: #33557a;
		font: 500 18px Verdana, Arial, Sans-Serif;
		padding: 22px 0 0 25px;
	}

	/**
	* Sidebarbox Content
	*/
	.sb_box .content {
		width: 279px;
		margin: 15px 0 0 26px;
	}

	/**
	* Sidebarbox Content Listeneintrag
	*/
	.sb_box .content ul li {
		border-bottom: 1px solid #e1e1e1;
		height: 24px;
	}

	/**
	* Sidebarbox Content Listeneintrag Link
	*/
	.sb_box .content ul li a {
		color: #575757;
		font: 500 13px Verdana, Arial, Sans-Serif;
		line-height: 24px;
		padding: 0 0 0 10px;
		text-decoration: none;
	}

	/**
	* Sidebarbox footer
	*/
	.sb_box_foot {
		background: url(../img/sb_f.png) top left repeat;
		height: 44px;
		width: 330px;
	}
	
	/* </sidebarbox>------------------------------------------------------------------------------------------------------*/
		
		/* <contentbox>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Contentbox
	* @subsection contentbox
	*/

	/**
	* Contentbox Wrap
	*/
	.box_wrap {
		width: 590px;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-15*/
		margin: -15px 0 0 0;
	}

	/**
	* Contentbox head
	*/
	.box_head {
		background: url(../img/box_t.png) top left no-repeat;
		height: 31px;
	}
	
	/**
	* Contentbox content
	*/
	.box_content {
		background: url(../img/box_c.png) top left repeat;
		padding: 0 0 0 25px;
	}

	/**
	* Contentbox foot
	*/
	.box_foot {
		background: url(../img/box_f.png) top left no-repeat;
		height: 33px;
	}

	/**
	* Textbox
	*/
	.txt {
		background: #fff;
		width:514px;
		padding: 10px;
		border:1px solid #87b1e0;
		color: #243d57;
		font: 500 12px Verdana, Arial, Sans-Serif;
	}
	
	/**
	* Textbox
	*/
	.txt p {
		margin: 0 0 10px 0;
	}
	
	/**
	* Textbox Überschriften
	*/
	.txt h1, .txt h2, .txt h3, .txt h4, .txt h5, .txt h6 {
		font: 600 12px Verdana, Arial, Sans-Serif;
		margin: 0 0 10px 0;
	}
	
	/* </contentbox>------------------------------------------------------------------------------------------------------*/

/* </generic-elements>------------------------------------------------------------------------------------------------------*/

/* <specific-elements>------------------------------------------------------------------------------------------------------*/
/**
* Spezifische Elemente
* @section specific-elements
*/

	/* <headnav>------------------------------------------------------------------------------------------------------*/
	/**
	* Die Navigation im Header
	* @subsection headnav
	*/

	/**
	* Header navigation
	*/
	#head .h_nav {
		float: right;
		margin: 22px 275px 0 0;
	}

	/**
	* Header navigation Item
	*/
	#head .h_nav li {
		display: block;
		float: left;
		text-align: center;
		margin: 0 10px 0 0;
	}

	/**
	* Header Navigation Link
	*/
	#head .h_nav li a {
		color: #565c75;
		font: 600 11px Helvetica, Verdana, Sans-Serif;
		text-decoration: none;
	}
	
	/* </headnav>------------------------------------------------------------------------------------------------------*/
	
	/* <sidebarelements>------------------------------------------------------------------------------------------------------*/
	/**
	* Elemente in der Sidebar
	* @subsection sidebarelements
	*/

	/**
	* 300er AD rechts
	*/
	.rec {
		background: #ededed;
		height: 250px;
		width: 300px;
		/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t+2 l-36 b+10*/
		margin: 2px 0 10px 15px;
	}
	
	/* </sidebarelements>------------------------------------------------------------------------------------------------------*/
	
	/* <contentelements>------------------------------------------------------------------------------------------------------*/
	/**
	* Elemente im Contentbereich
	* @subsection contentelements
	*/
		/**
		* Landeskarte auf der Startseite
		*/
		#cmap {
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-50*/
			margin: -50px 0 0 0;
		}
		
		/**
		* Landeskarte GoogleMap auf der Startseite
		*/
		#cmap #map {
			height: 452px;
			width: 538px;
		}
		
		/**
		* Widgetgenerator auf Stadtseite
		*/
		#widgetgen {
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-50*/
			margin: -50px 0 0 0;
		}
		
		/**
		* Formularüberschrift für den Widgetgenerator
		*/
		#widgetgen h3 {
			margin: 10px 0 5px 0;
		} 
		
		/**
		* Feldbezeichner
		*/
		#widgetgen label {
			display: block;
			margin: 0 0 5px 0;
		}
		
		/**
		* Widget Vorschau: Design 1
		*/
		#tpl1 {
			border: 1px solid #ccc;
			margin: auto;
			width: 130px;
		}
		
		/**
		* Widget Vorschau: Design 2
		*/
		#tpl2 {
			margin: auto;
			width: 300px;
		}
		
		/* <search>------------------------------------------------------------------------------------------------------*/
		/**
		* Suche
		* @subsubsection search
		*/
		
		/**
		* Orts-Suche
		*/
		#location {
			background: url(../img/search.png) center center no-repeat;
			height: 44px;
			padding: 15px 0 0 0;
		}

		/**
		* Orts-Eingabe
		*/
		#location input {
			background: transparent;
			border: 0;
			display: block;
			font-size: 20px;
			height: 24px;
			margin: auto;
			width: 355px;
			padding: 5px 0 0 0;
			position: relative;
			left: -15px;
		}
		
		/**
		* Livesearch
		*/
		#livesearch {
			border-top: 0;
			border-color: #6691c3;
			box-shadow:4px 4px 20px #243d57;
				-moz-box-shadow: 4px 4px 20px #243d57;
				-webkit-box-shadow: 4px 4px 20px #243d57;
			background: url(../img/livesearchbg.png) top left repeat;
			margin: 0 0 0 0;
			padding: 0;
			width: 385px;
		}
		
		/**
		* Livesearch Treffer
		*/
		#livesearch li {
			border-bottom: 1px solid #243d57;
			list-style: none;
			margin: 0;
		}
		
		/**
		* Livesearch Treffer
		*/
		#livesearch li.lst {
			border: 0;
		}
		
		/**
		* Livesearch Treffer :hover
		*/
		#livesearch li:hover {
			background: url(../img/livesearchbg.png) top left repeat;
		}
		
		/**
		* Livesearch Link
		*/
		#livesearch li a {
			color: #fff;
			font: 500 12px Helvetica, Verdana, Sans-Serif;
			display: block;
			text-decoration: none;
			padding: 5px;
		}
		
		/**
		* Livesearch Link:hover
		*/
		#livesearch li:hover a, #livesearch li:hover a:hover {
			color: #fff;
		}
		
		/* </search>------------------------------------------------------------------------------------------------------*/
		
		/* <cityinfo>------------------------------------------------------------------------------------------------------*/
		/**
		* Cityinfo
		* @subsubsection cityinfo
		*/
		
		/**
		* Cityinfo
		*/
		#city_info {
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-50*/
			margin: -20px 0 0 0;
		}
		
		/**
		* Aktuelles Datum
		*/
		#city_info .current_date {
			width: 90px;
		}
		
		/**
		* Aktuelle Wetterdaten
		*/
		#city_info .current_data {
			width: 120px;
		}
		
		/**
		* Wetterzustandsspalte
		*/
		#city_info .wcol {
			width: 80px;
		}
		
		/**
		* Wetterstationsinfos
		*/
		#city_info .info {
			width: 230px;
		}
		
		/**
		* Zeitauswahlwrapper
		*/
		#city_info .period {
			width: 85px;
		}
		
		/**
		* Stadtinfo
		*/
		#city_info .links {
			overflow:hidden;
			width: 150px;
		}
		
		/**
		* Cityinfo Tag
		*/
		#city_info .day {
			color: #fff;
			font: 600 13px Verdana, Sans-Serif;
			margin: 15px 0 5px 5px;
			text-align: right;
		}

		/**
		* Cityinfo Datum
		*/
		#city_info .date {
			color: #33557a;
			font: 500 13px Verdana, Sans-Serif;
			text-align: right;
			margin: 5px 0 5px 5px;
		}

		/**
		* Cityinfo Time
		*/
		#city_info .time {
			color: #33557a;
			font: 500 13px Verdana, Sans-Serif;
			text-align: right;
		}

		/**
		* Cityinfo Temperatur
		*/
		#city_info .temp {
			color: #243d57;
			font: 600 22px Verdana, Sans-Serif;
			margin: 0 0 5px 15px;
			text-align: right;
		}

		/**
		* Cityinfo Regen
		*/
		#city_info .rain {
			color: #33557a;
			font: 500 12px Verdana, Sans-Serif;
			margin: 0 0 0 15px;
			text-align: right;
		}

		/**
		* Cityinfo Wind
		*/
		#city_info .wind {
			color: #33557a;
			font: 500 12px Verdana, Sans-Serif;
			margin: 0 0 0 15px;
			text-align: right;
		}

		/**
		* Cityinfo Druck
		*/
		#city_info .pressure {
			color: #33557a;
			font: 500 12px Verdana, Sans-Serif;
			margin: 0 0 0 15px;
			text-align: right;
		}

		/**
		* Cityinfo Wetterzustand
		*/
		#city_info .wicon {
			margin: 10px 0 0 15px;
		}
		
		/**
		* Cityinfo Zeitauswahl
		*/
		#city_info ul.v_nav {
			position: relative;
			right: -5px;
		}
		
		/**
		* Cityinfo Zeitauswahl
		*/
		#city_info ul.v_nav li a {
			color: #33557a;
			cursor: pointer;
			font: 500 15px Verdana, Sans-Serif;
			line-height: 16px;
			margin: 0 0 4px 0;
			text-decoration: none;
		}

		/**
		* Cityinfo Zeitauswahl aktiv
		*/
		#city_info ul.v_nav li.act a {
			color: #fff;
			font: 600 14px Verdana, Sans-Serif;
		}
		
		/**
		* Cityinfo Zeitauswahl : Zeit nicht verfügbar
		*/
		#city_info ul.v_nav li a.na {
			cursor: default;
			color: #4e6b8b;
		}
		/**
		* Wetterdaten für den Tag 
		*/
	 	#city_info #periods {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		/**
		* Wettendatensatz
		*/
		#city_info #periods li {
			display: none;
		}

		/**
		* Cityinfo  Stadt
		*/
		#city_info .city {
			color: #243d57;
			font: 600 28px Verdana, Sans-Serif;
			margin: -7px 0 0 15px;
		
			position: relative;
			left: 370px;
			top: -125px;
		}

		/**
		* Cityinfo 9 Tagevorschau
		*/
		#city_info .btn {
			padding: 47px 0 0 0;
			overflow: hidden;
			background: url(../img/forecast.png) top left no-repeat;
			display: block;
			height: 0px !important;
			height /**/:47px;
			width: 183px;

			position: relative;
			left: 380px;
			top: -50px;
		}
		
		/* </cityinfo>------------------------------------------------------------------------------------------------------*/
		
		/* <buttons>------------------------------------------------------------------------------------------------------*/
		/**
		* Buttonbox
		* @subsubsection buttons
		*/

		/**
		* Buttons
		*/
		#buttons {
			overflow: hidden;
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-50*/
			margin: -50px 0 0 0;
		}

		/**
		* Buttons List
		*/
		#buttons ul {
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) l-5*/
			position: relative;
			left: -5px;
		}
		
		/**
		* RSSFeed Button
		*/
		#feedBtn a {
			background: url(../img/feedBtn.png) top left no-repeat;
			display: block;
			cursor: pointer;
			float: left;
			padding: 67px 0 0 0;
			overflow: hidden;
			height: 0px !important;
			height /**/:67px;
			margin-top: -25px;
			width: 193px;
		}

		/**
		* Widget Button
		*/
		#widgetBtn a {
			background: url(../img/widgetBtn.png) top left no-repeat;
			display: block;
			float: left;
			padding: 67px 0 0 0;
			overflow: hidden;
			height: 0px !important;
			height /**/:67px;
			width: 193px;
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-25 l-10*/
			margin-top: -25px;
			position: relative;
			left: -10px;
		}

		/**
		* Favorit Button
		*/
		#favBtn a {
			background: url(../img/favBtn.png) top left no-repeat;
			display: block;
			cursor: pointer;
			float: left;
			padding: 67px 0 0 0;
			overflow: hidden;
			height: 0px !important;
			height /**/:67px;
			width: 193px;
			/* Fix: Abstände wegen Shadow-Transparenz (Top-Position via Margin da es ansonsten Probleme mit der Viewport-Höhe gibt) t-25 l-20*/
			margin-top: -25px;
			position: relative;
			left: -20px;
		}
		
		/* </buttons>------------------------------------------------------------------------------------------------------*/
	
	/* </contentelements>------------------------------------------------------------------------------------------------------*/

/* </specific-elements>------------------------------------------------------------------------------------------------------*/