/* ############################################## LAYOUT ############################################ */

/* --- Layout Allgemein --- */

.staedtewetter {
	position: relative;
	width: 663px;
	font-family: Verdana, Helevetiva, Sans-Serif;
	background: url('../images/staedtewetter/background/bg_body.gif') repeat-x;
	background-color: #efefef;
}


/* --- Höhe Layout spezifisch (Hintergrundverlauf) --- */

.staedtewetter.vorhersage_uebersicht, .staedtewetter.trend {
	height: 390px;
}

.staedtewetter.vorhersage_detail {
	height: 332px;
}

.staedtewetter.messwerte {
	height: 292px;
}

.staedtewetter.graph {
	height: 340px;
}

.staedtewetter.graph_legende {
	height: 365px;
}


/* --- Hauptnavigation --- */

.navi {
	width: 663px;
	height: 32px;
}

.navi .tab_vorhersage {
	width: 178px;
  height: 32px;
  cursor: pointer;
  float: left;
}

.navi .tab_trend {
	width: 160px;
  height: 32px;
  cursor: pointer;
  float: left;
}

.navi .tab_verlauf {
	width: 148px;
  height: 32px;
  cursor: pointer;
  float: left;
}

.navi .tab_messwerte {
	width: 171px;
  height: 32px;
  cursor: pointer;
  float: left;
}

.navi .navi_trenner {
	width: 1px;
	height: 32px;
	float:  left;
	background: url('../images/staedtewetter/background/navi/trenner.gif') no-repeat;
}

.navi .aktiv {
	background: url('../images/staedtewetter/background/navi/aktiv.gif') repeat-x;
}

.navi .hover {
	background: url('../images/staedtewetter/background/navi/hover.gif') repeat-x;
}

.navi .tab_inner {
	padding: 7px 0px 0px 10px;
}

.navi a {
	display: block;
	float: left;
	font-size: 11px !important;
	text-decoration: none;
	padding-left: 14px;
  padding-top: 2px;	
	font-weight: bold;
}

.navi .inaktiv a {
	color: #001a6d !important;
	background: url('../images/staedtewetter/icons/navi/pfeil_inaktiv.gif') 0px 4px no-repeat;
}

.navi .aktiv a {
	color: #001a6d !important;
	background: url('../images/staedtewetter/icons/navi/pfeil_aktiv.gif') 0px 5px no-repeat;
}

.navi .hover a {
	color: #001a6d !important;
	background: url('../images/staedtewetter/icons/navi/pfeil_hover.gif') 0px 4px no-repeat;
}

#meteogramme{
	position: absolute;
	right: 171px;
	top: 32px;
	width: 157px;
	height: 108px;
	background: url('../images/staedtewetter/background/navi/meteogramme.png') no-repeat;
	display: none;
	z-index: 99;
}

#meteogramme .meteogramme_inner {
	padding: 12px 0px 0px 25px;
}

#meteogramme .meteogramme_inner .meteogramme_headline {
	font-size: 11px;
	color: #001a6d;
	line-height: 15px;
	font-weight: bold;
	margin-bottom: 12px;
}

#meteogramme .meteogramme_inner a {
	display: block;
	position: relative;
	font-size: 11px;
	color: #939393;
	font-weight: normal;
	text-decoration: none;
	line-height: 17px;
	padding-left: 15px;
	background: url('../images/staedtewetter/icons/navi/stationen_inaktiv.gif') left 4px no-repeat;
}

#meteogramme .meteogramme_inner a:hover, 
#meteogramme .meteogramme_inner a.aktiv {
	position: relative;
	font-size: 11px;
	color: #001a6d;
	line-height: 17px;
	background: url('../images/staedtewetter/icons/navi/stationen_hover.gif') left 4px no-repeat;
}

#meteogramme .meteogramme_inner a.aktiv {
	font-weight: bold;
}

#wetterstationen .stationen_inner {
	padding: 12px 0px 0px 25px;
}

#wetterstationen{
	position: absolute;
	right: 0px;
	top: 32px;
	width: 245px;
	height: 123px;
	background: url('../images/staedtewetter/background/navi/wetterstationen.png') no-repeat;
	display: none;
	z-index: 99;
}

#wetterstationen .stationen_inner .stationen_headline {
	font-size: 11px;
	color: #001a6d;
	line-height: 15px;
	font-weight: bold;
	margin-bottom: 12px;
}

#wetterstationen .stationen_inner a {
	display: block;
	position: relative;
	font-size: 11px;
	color: #939393;
	font-weight: normal;
	text-decoration: none;
	line-height: 17px;
	padding-left: 15px;
	background: url('../images/staedtewetter/icons/navi/stationen_inaktiv.gif') left 4px no-repeat;
}

#wetterstationen .stationen_inner a:hover, 
#wetterstationen .stationen_inner a.aktiv {
	position: relative;
	font-size: 11px;
	color: #001a6d;
	line-height: 17px;
	background: url('../images/staedtewetter/icons/navi/stationen_hover.gif') left 4px no-repeat;
}

#wetterstationen .stationen_inner a.aktiv {
	font-weight: bold;
}


/* --- Content --- */

.content_stadt {
	padding: 0px 7px;
}

.content_border {
	border: 1px solid #bbbfc7;
}

.content_inner{
	width: 647px;
	background: #FFFFFF;
}


/* --- Höhe Content spezifisch --- */

.staedtewetter.vorhersage_uebersicht .content_inner,
.staedtewetter.trend .content_inner {
	position: relative;
	height: 348px;
}

.staedtewetter.vorhersage_detail .content_inner {
	position: relative;
	height: 291px;
}

.staedtewetter.messwerte .content_inner {
	position: relative;
	height: 251px;
}

.staedtewetter.graph .content_inner {
	position: relative;
	height: 290px;
}

.staedtewetter.graph_legende .content_inner {
	position: relative;
	height: 315px;
}


/* --- Padding zu content_inner und Initialisierung der verschiedenen Content-Bereiche --- */

.start_vorhersage_uebersicht, .start_trend {
	padding-top: 5px;
}

.start_messwerte, .start_vorhersage_detail {
	padding-top: 0px;
}



/* ############################################## INHALTE ############################################ */

/* --- Boxen für Tage --- */

.tag_aktiv {
	width: 323px;
	height: 304px;
	position: relative;
	float: left;
	background: url('../images/staedtewetter/background/tag_aktiv.gif') no-repeat;
}

/* Browser-Hack IE */
* html div.tag_aktiv {
	width: 322px;
}

.tag_inaktiv {
	width: 161px;
	height: 304px;
	position: relative;
	float: left;
	background: url('../images/staedtewetter/background/tag_inaktiv.gif') no-repeat;
}

.tag_trend {
	width: 161px;
	height: 323px;
	position: relative;
	float: left;
}

/* Browser-Hack IE */
* html div.tag_inaktiv,
* html div.tag_trend {
	width: 160px;
}

.zeilenbeschriftung_vorhersage_uebersicht {
	width: 81px;
	height: 323px;
	position: relative;
	float: left;
	color: #757575;
  font-size: 9px;
	font-weight: bold;
}

.tag_vorhersage_uebersicht {
	width: 112px;
	height: 323px;
	position: relative;
	float: left;
}

/* Browser-Hack IE */
* html div.tag_vorhersage_uebersicht {
	width: 111px;
}

.tag_messwerte {
	width: 647px;
	height: 196px;
	position: relative;
	background: url('../images/staedtewetter/background/tag_messwerte.gif') left 20px no-repeat;
}

.tag_trenner {
	width: 1px;
	height: 337px;
	float: left;
	background-color: #bbbfc7;
}


/* --- Datum Wettervorhersage + Trend --- */

.vorhersage_uebersicht .datum {
	position: absolute;
	top: 5px;
	left: 7px;
	width: 100px;
	height: 30px;
	/*background: url('../images/staedtewetter/background/details.gif') 29px 28px no-repeat;*/
}

.vorhersage_uebersicht .datum_hover {
	position: absolute;
	top: 5px;
	left: 7px;
	width: 100px;
	height: 30px;
	/*background: url('../images/staedtewetter/background/details_hover.gif') 29px 28px no-repeat;*/
}

.details_unten {
	margin-top:8px;
	background: url('../images/staedtewetter/background/details.gif') 29px 3px no-repeat;
	cursor: pointer;
	height:20px;
}

.details_hover {
	margin-top:8px;
	background: url('../images/staedtewetter/background/details_hover.gif') 29px 3px no-repeat;
	cursor: pointer;
	height:20px;
}

.trend .datum {
	position: absolute;
	top: 5px;
	left: 16px;
	width: 140px;
}

.datum.link, .datum_hover.link{
	cursor: pointer;
}

.datum .tagzahl_trend,
.datum .tagzahl_vue,
.datum_hover .tagzahl_vue {
	float: left;
	font-size: 24px;
	line-height: 24px;
	font-weight: bold;
	text-align: right;
	padding-right: 6px;
}

/* Browser-Hack IE */
* html .datum .tagzahl_trend,
* html .datum .tagzahl_vue,
* html .datum_hover .tagzahl_vue {
	padding-right: 2px;
}

.datum .monat_trend, 
.datum .monat_vue,
.datum_hover .monat_vue {
	font-size: 9px;
	line-height: 12px;
}

.datum .wochentag_trend,
.datum .wochentag_vue,
.datum_hover .wochentag_vue {
	font-size: 9px;
	line-height: 12px;
	font-weight: bold;
}

/* Farben */
.datum .tagzahl_trend, .datum .monat_trend, .datum .wochentag_trend,
.datum .tagzahl_vue, .datum .monat_vue, .datum .wochentag_vue
{
	color: #001a6e;
}

/* Farben */
.datum_hover .tagzahl_vue, .datum_hover .monat_vue, .datum_hover .wochentag_vue
{
	color: #3193ea;
}


/* --- Headline bei aktivem Tag Wettervorhersage --- */

.vorhersage_headline {
	position: absolute;
	top: 5px;
	left: 225px;
 	font-size: 9px;
	color: #757575;
}

.prognose_zeit {
	position: absolute;
	top: 17px;
	left: 225px;
 	font-size: 11px;
	color: #757575;
	font-weight: bold;
}


/* --- Headline bei Messwerte --- */

.messwerte_headline, .detail_headline {
	position: absolute;
	top: 18px;
	left: 40px;
 	font-size: 15px;
	color: #001a6d;
	font-weight: bold;
}

/* --- Headline bei Meteogrammen --- */

.meteogramm_headline {
	position: absolute;
	top: 14px;
	left: 18px;
 	font-size: 15px;
	color: #001a6d;
	font-weight: bold;
	height: 20px;
}

/* --- Legende bei Meteogrammen --- */

.meteogramm_legende {
	position: absolute;
	top: 290px;
	left: 18px;
 	font-size: 15px;
	color: #001a6d;
	font-weight: bold;
	height: 20px;
}

/* --- Box: Tag und Datum bei Meteogrammen --- */
.meteogramm_datum {
  width: 65px;
  text-align: center;
}

.meteogramm_datum .m_kleiner {
  font-size:9px;
	line-height: 12px;
	text-align: left;
	width:25px;
	height:20px;
	margin-left: 36px;
}

.meteogramm_datum .m_groesser {
  width: 34px;
	font-size: 22px;
	padding-top: 2px;
	text-align:right;
  float:left;
}

.meteogramm_legende span {
  font-size:11px;
	font-weight: normal;
}

/* --- Wettericons -- */

.wettericon_trend {
	position: absolute;
	top: 37px;
	left: 16px;
	width: 80px;
	background-color: transparent;
}

.wettericon_messwerte {
	position: absolute;
	top: 70px;
	left: 46px;
	width: 121px;
	background-color: transparent;
}

.wettericon_vue {
	background-color: transparent;
}

.wettericon_vue img {
  vertical-align: bottom;
}

.wettericon_vue table {
  border-collapse:collapse;
  border-spacing:none;
  margin:0px 0px 0px 4px;
  padding:0px;
}

.wettericon_vue td {
  border-collapse:collapse;
  border-spacing:none;
  margin:0px;
  padding:0px;
}

/* --- Temperaturen Trend + Vorhersage --- */

.temperaturen_trend {
	position: absolute;
	top: 43px;
	left: 102px;
}

.temperaturen_vue {
  margin: 6px auto;
	width: 50px;
}

.temperaturen_trend .temperatur_max,
.temperaturen_vue .temperatur_max
 {
	font-size: 14px;
	color: #cd0000;
	text-align: right;
	font-weight: bold;
	padding: 2px 2px 0px 1px;
	border-top: 1px solid #001a6e;
}

.temperaturen_trend .temperatur_min ,
.temperaturen_vue .temperatur_min
{
	font-size: 14px;
	color: #001a6e;
	text-align: right;
	font-weight: bold;
	padding: 0px 2px 3px 1px;	
}


/* --- Temperaturen und Text Messwerte --- */

.temperatur_messwerte {
	position: absolute;
	top: 120px;
	left: 180px;
	height: 50px;
	font-size: 22px;	
	color: #001a6e;
	font-weight: bold;
}

.temptext_messwerte {
	position: absolute;
	top: 89px;
	left: 180px;
	font-size: 13px;
	color: #001a6e;
	font-weight: bold;
}

.text_messwerte {
	position: absolute;
	top: 170px;
	left: 40px;
	width: 260px;
	font-size: 11px;
	color: #001a6e;
}


/* --- Wetterwerte aller Bereiche --- */

.wetterwerte_aktiv {
	position: absolute;
	top: 115px;
	left: 42px;
	border-collapse: collapse;
}

.wetterwerte_inaktiv,
.wetterwerte_trend {
	position: absolute;
	top: 95px;
	left: 16px;
	border-collapse: collapse;
}

.wetterwerte_vue {
	position: absolute;
	top: 38px;
	left: 0px;
	width: 111px;
	text-align: center;
}

.wetterwerte_messwerte {
	position: absolute;
	top: 55px;
	left: 385px;
	border-collapse: collapse;
}

.vorhersage .werte_headline,
.trend .werte_headline,
.messwerte .werte_headline ,
.vorhersage_detail .werte_headline {
	display: block;
	font-size: 9px;
	color: #757575;
	font-weight: bold;
}

.vorhersage_uebersicht .wetterwerte_vue .werte_daten,
.trend .wetterwerte_trend .werte_daten,
.messwerte .wetterwerte_messwerte .werte_daten,
.vorhersage_detail .wetterwerte_detail .werte_daten,
.vorhersage_detail .wetterwerte_detail_dynamisch .werte_daten{
	display: block;
	font-size: 11px;
	color: #001a6e;
	font-weight: bold;
	line-height: 17px;
}

.wetterwerte_aktiv td {
	padding-bottom: 9px;
	padding-right: 45px;
	line-height: auto !important; /* Überschreibt #content td */
}

.wetterwerte_inaktiv td,
.wetterwerte_trend td {
	padding-bottom: 9px;
	line-height: auto !important; /* Überschreibt #content td */
}

.wetterwerte_messwerte td {
	padding-right: 25px;
	padding-bottom: 7px;
	line-height: auto !important; /* Überschreibt #content td */
}

.wetterwerte_detail td {
	padding-bottom: 7px;
	line-height: auto !important; /* Überschreibt #content td */
}

.wetterwerte_detail_dynamisch td {
	padding-bottom: 7px;
	padding-right: 28px;
	line-height: auto !important; /* Überschreibt #content td */
}


/* --- Zeitleiste Vorhersage + Messwerte --- */

.vorhersage_detail .zeitleiste {
	position: absolute;
	left: 55px;
	top: 66px;
	width: 365px;
	height: 26px;

}

.messwerte .zeitleiste {
	position: absolute;
	left: 40px;
	top: 218px;
	width: 569px;
	height: 26px;
}

.vorhersage_detail .hr_linie {
	width: 365px;
	height: 1px;
	background-color: #d4d6db;
}

.messwerte .hr_linie {
	width: 569px;
	height: 1px;
	background-color: #d4d6db;
}

.messwerte .zeitleiste_trenner {
	float: left;
	width: 1px;
	height: 25px;
	background-color: #d4d6db;
}

.vorhersage_detail .zeit {
	float: left;
	cursor: pointer;
	width: 42px;
	height: 25px;
	border-top: 1px solid #d4d6db;
}

.messwerte .zeit {
	float: left;
	cursor: pointer;
	width: 94px;
	height: 25px;
}

.messwerte .zeitleiste .zeit.hover, .messwerte .zeitleiste .zeit.aktiv {
	background: url('../images/staedtewetter/icons/zeitleiste/pfeil_hover.gif') center top no-repeat;
}

.vorhersage_detail .zeitleiste .zeit.hover, .vorhersage_detail .zeitleiste .zeit.aktiv {
  border-top: 1px solid #001a6e;
	background: url('../images/staedtewetter/icons/zeitleiste/detail_hover.gif') center top no-repeat;
}

.vorhersage_detail .zeit_inner{
	padding: 9px 0px 0px 5px;
}

.messwerte .zeit_inner{
	padding: 9px 0px 0px 21px;
}

.messwerte .zeitleiste a {
	display: block;
	float: left;
	font-size: 10px;
	color: #6c6c6c;
	font-weight: bold;
	text-decoration: none;
	padding-left: 14px;
	line-height: 10px;
	height: 11px;
	background: url('../images/staedtewetter/icons/zeitleiste/uhr3.gif') left top no-repeat;
}

.vorhersage_detail .zeitleiste span {
	display: block;
	float: left;
	font-size: 10px;
	color: #6c6c6c;
	font-weight: bold;
	text-decoration: none;
	line-height: 10px;
	height: 11px;
}

.messwerte .zeitleiste .hover a, .messwerte .zeitleiste .aktiv a {
	color: #001a6e;
	background: url('../images/staedtewetter/icons/zeitleiste/uhr3_hover.gif') left top no-repeat;
}

.vorhersage_detail .zeitleiste .hover span, .vorhersage_detail .zeitleiste .aktiv span {
	color: #001a6e;
}

.vorhersage_detail .zeitleiste_trenner {
	float: left;
	width: 1px;
	height: 25px;
	background-color: #d4d6db;
}


/* --- WETTERVORHERSAGE ÜBERSICHT Zeilenbeschriftung --- */
.zeilenbeschriftung_vorhersage_uebersicht div {
  text-align: right;
	padding-right: 7px;
}

/* Morgens */
.zeilenbeschriftung_vorhersage_uebersicht .zeile1 {
  margin-top: 51px;
}

/* Tagsüber */
.zeilenbeschriftung_vorhersage_uebersicht .zeile2 {
  margin-top: 24px;
}

/* Abends */
.zeilenbeschriftung_vorhersage_uebersicht .zeile3 {
  margin-top: 24px;
}

/* Nachts */
.zeilenbeschriftung_vorhersage_uebersicht .zeile4 {
  margin-top: 24px;
}

/*Temperatur */
.zeilenbeschriftung_vorhersage_uebersicht .zeile5 {
  margin-top: 24px;
}

/* Wind */
.zeilenbeschriftung_vorhersage_uebersicht .zeile6 {
  margin-top: 32px;
}


/* --- WETTERVORHERSAGE DETAIL --- */
.tag_detail {
	width: 647px;
	height: 196px;
	position: relative;
}

.detail_wochenuebersicht {
  position: absolute;
	top: 24px;
	left: 454px;
}

.detail_zurueck {
  position: absolute;
	left: 10px;
	top: 124px;
}

.detail_vor {
  position: absolute;
	left: 621px;
	top: 124px;
}

.detail_wochenuebersicht img,
.detail_zurueck img,
.detail_vor img {
  vertical-align: bottom;
	border: 0px;
}

.wetterwerte_detail {
	position: absolute;
	top: 154px;
	left: 453px;
	border-collapse: collapse;
}

.wetterwerte_detail_dynamisch {
	position: absolute;
	top: 190px;
	left: 61px;
	border-collapse: collapse;
}

.uhr_zeitleiste {
  position: absolute;
	top: 75px;
	left: 40px;
}

.wettericon_detail {
	position: absolute;
	top: 110px;
	left: 50px;
	width: 110px;
	background-color: transparent;
}

.temperatur_detail{
	position: absolute;
	top: 115px;
	left: 190px;
}

.temperatur_detail .temperatur_prognose {
	font-size: 19px;
	color: #001a6e;
	font-weight: bold;
	padding: 0px 0px 0px 2px;
}

.temperatur_detail .text_prognose {
	font-size: 13px;
	color: #001a6e;
	padding: 0px 0px 0px 3px;
	font-weight: bold
}

.detail_hr {
  position: absolute;
	width: 343px;
	height: 1px;
	top: 268px;
	left: 55px;
	background-color: #d4d6db;
}


/* ######################################### ZU BEGINN AUSGEBLENDET ####################################### */

#prognose_00, #prognose_03, #prognose_06, #prognose_09, 
#prognose_12, #prognose_15,
#prognose_18, #prognose_21 {
	display: none;
}


/* --- Messwerte --- */

#minus_1, #minus_2,
#minus_3, #minus_4,
#minus_5 {
	display: none;
}