/* ################################################ Warnings ################################################ */

.WarningArea
{
	position: relative;
	height: auto;
	float: left;
	width: 100%;
}

.WarnIcon
{
	width: 50px;
	float: left;
	position: relative;
}

.WarnIcon img
{
	width: 20px;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

#Warnings
{
	float: left;
	position: relative;
	width:915px;
	min-height:10px;
	margin-bottom: 5px;
}

#Warning
{
	display: none;
}


#WarningImageContainer {
    float: left;
    padding: 0;
    position: relative;
    width: 10%;
	background: #DB3A3A;
}

#WarningText a {
    line-height: 15px;
	color: white;
}

#WarningImage {
margin-left: 15%;
width: 50%;
margin-top: 10%;
}

#WarningImage img {
margin-left: 15%;
width: 50%;
margin-top: 10%;
}

.WarningRed, .WarningOrange, .WarningGreen
{
	width: 100%;
	padding:0px; margin:0px;
	float:left;
	display: none;
	position: relative;
	display: inline-block;
	margin-top: 2%;
	background: #DB3A3A;
}

#WarningContent {
float: left;
position: relative;
width: 100%;
font-size: 3vw;
}


/* ################################################ Warning-Titlebar ################################################ */
.WarningRed .Title, .WarningOrange .Title, .WarningGreen .Title
{
	float: left;
	position: relative;
	width: 90%;
	color: white;
}

.WarningRed .Title, .WarningRed .Toggle
{
	background: #DB3A3A;
}

.WarningOrange .Title, .WarningOrange .Toggle
{
	background: #FF7A22;
}

.WarningGreen .Title, .WarningGreen .Toggle
{
	background: #0B9B3F;
}


/* ################################################ Warning-Togglebutons ################################################ */
.WarningRed .Toggle, .WarningOrange .Toggle, .WarningGreen .Toggle
{
	float: right;
	position: relative;
	width: 59px;
	height: 30px;
}

.WarningRed .Toggle img, .WarningOrange .Toggle img, .WarningGreen .Toggle img
{
	margin-top: 8px;
	margin-left: 34px;
}


.WarningGreen .Content, .WarningRed .Content, .WarningOrange .Content
{
	display: none;
	float: left;
	background: #FFFFFF;
	width: 913px;
	border-left: 1px dashed #5E788B;
	border-right: 1px dashed #5E788B;
	border-bottom: 1px dashed #5E788B;
}

.WarningGreen .Content p, .WarningRed .Content p, .WarningOrange .Content p
{
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 10px;
}





/* ################################################ Widgets ################################################ */
.WidgetSmall, .WidgetMedium
{
	display: block;
	margin:0px;
}

.WidgetSmall
{
	width: 100%;
	height: 100%;
	float: right;
	margin-top: 2%;
}

.WidgetMedium
{
	width: 100%;
	height: 100%;
	float: right;
	margin-top: 2%;
}

.WidgetLarge
{
	width: 100%;
	height: 100%;
	float: right;
	margin-top: 2%;
}

/* ################################################ Widget Title ################################################ */
.WidgetSmall .Title, .WidgetMedium .Title, .FooterTopic .Title
{
	font-weight: normal;
	z-index: 2;
	position: relative;
	display: inline-block;
	float: right;
	text-align: center;
}

.WidgetSmall .Title
{
	width: 100%;
	background: #336699;
	color: #FFF;
	font-size: 6vw;
	height: 3%;
	line-height: 200%;
}


.WidgetMedium .Title
{
	width: 100%;
	background: #336699;
	color: #FFF;
	font-size: 6vw;
	height: 3%;
	line-height: 200%;
}

.WidgetLarge .Title
{
	width: 100%;
	background: #336699;
	color: #FFF;
	font-size: 6vw;
	height: 3%;
	line-height: 200%;
}


.WidgetSmall .Title .Text, .WidgetMedium .Title .Text, .WidgetLarge .Title .Text
{
	width: 100%;
	text-align: center;
}

.WidgetSmall .Title .Toggle, .WidgetMedium .Title .Toggle, .WidgetLarge .Title .Toggle
{
	float:right;
	margin-left: 8px;
	margin-top: 2px;
}

.WidgetSmall .Title .Delete, .WidgetMedium .Title .Delete, .WidgetLarge .Title .Delete
{
	float:left;
	margin-right: -5px;
	margin-top: 2px;
}

.WidgetSmall .Delete img, .WidgetMedium .Delete img, .WidgetLarge .Delete img
{
	margin-top: 7px;
	width: 14px;
}

.gridster .WidgetSmall .Title .Text, .gridster .WidgetMedium .Title .Text
{
	cursor: move;
}

/* ################################################ Widget Content ################################################ */
.WidgetSmall .Content, .WidgetMedium .Content
{
	background-color: transparent;
	display: block;
	float: right;
	overflow: hidden;
	z-index: 100;
	position: relative;
	margin-bottom: 11px;
}

.WidgetSmall .Content
{
	width: 100%;
	height: 100%;
}

.WidgetMedium .Content
{
	width: 100%;
	height: 100%;
}

.WidgetLarge .Content
{
	width: 100%;
	height: 100%;
}

.Last-Update, .Last-Update-Timestamp
{
float: right;
margin-right: 5px;
}

.LocalIconWidget {
float: right;
width: 24%;
text-align: right;
line-height: 200%;
color: #336699;
border-left: 2px dashed #336699;
}

.LocalWidget2 {
float: right;
width: 70%;
text-align: right;
line-height: 200%;
color: #336699;
font-size: 9vw;
}

img#iconMain {
width: 70%;
}

.LocalTempWidget {
font-size: 11vw;
float: right;
width: 42%;
font-weight: bold;
border-left: 3px dashed #336699;
margin-right: 1%;
}

#windImage {
float: right;
width: 10%;
}
.LocalWindWidget {
font-size: 11vw;
font-weight: bold;
float: right;
width: 37%;
margin-right: 2%;
}

.LocalLinkWidget {
width: 50%;
float: right;
text-align: left;
}

.LocalUpdateWidget {
width: 49%;
font-size: 2vw;
float: right;
}

.LocalWindWidget img {
width: 100%;
height: 100%;
vertical-align: middle;
}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 10%;
  width: 100%;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #fff;
  display: inline-block;
  font-size: 6vw;
  line-height: 200%;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: right;
}
#cssmenu > ul > li {
  float: right;
  text-align: center;
}
#cssmenu > ul > li > a {
  font-size: 6vw;
  line-height: 200%;
  color: #fff;
}

#cssmenu > ul > li:first-child > a {}

#cssmenu > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: 50%;
  bottom: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #373737;
  margin-right: -10px;
}
#cssmenu > ul > li.active > a {
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
  background: #528cc6;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu li {
  z-index: 1000;
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu li ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  right: 0;
}
#cssmenu li ul li {
  *margin-bottom: -1px;
}
#cssmenu li ul li a {
  background: #373737;
  border-bottom: 1px dotted #336699;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu li ul li:hover a {
  background: #528cc6;
}
#cssmenu li li:hover > ul {
  display: block;
}
#cssmenu li li ul {
  display: none;
  position: absolute;
  right: 100%;
  top: 0;
}
#cssmenu li li ul li a {
  background: #a80008;
  border-bottom: 1px dotted #ff0f1b;
}
#cssmenu li li ul li a:hover {
  background: #8f0007;
}


/* ##### DGMAN CSS STYLESHEET ##### */

.WindArea
{
float: left;
width: 50%;
position: relative;
padding-top: 15px;
}

.CL-Content
{
float: left;
width: 100%;
}

.TopicTextContent
{
position: relative;
float: right;
}

.WindDirection-a, .WindSpeed-a
{
float: left;
width: 30%;
}

.WindDirection-b, .WindSpeed-b
{
float: left;
margin-left: 10px;
width: 15%;
}

.ForecastArea
{
	float: left;
	width: 98%;
}

.Forecast-Last-Update, .Forecast-Last-Update-Timestamp
{
	float: left;
	margin-right: 10px;
}

/* ##### FAKE OBSERVATION ##### */

.Location
{
	width: 100%;
	float: left;
	position: relative;
}

.Place
{
	font-weight: bold;
}

#map_div {
width: 100%!important;
}

.TemperaturePicture
{
	position: relative;
	float: left;
	width: 100%;
	overflow: hidden;
	padding-bottom: 10px;
	border-bottom: 1px dashed black;
}

.TemperatureMain
{
	width: 40%;
	float: left;
	margin-top: 25px;
}

.PictureMain
{
width: 20%;
float: left;
text-align: center;
margin-top: 30px;
}
}

.PictureMain img
{
	width: 72px;
}

#IconMain img
{
	overflow: hidden;
	margin-top: 18px;
}

.MinMaxTemp
{

	width: 60%;
	float: right;
	overflow: hidden;
	line-height: 20px;
}

.DataValues
{
	position: relative;
	width: 40%;
	float: left;
	margin-left: 20px;
	padding-top: 15px;
}

.Precipitation-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Precipitation-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Humidity-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Humidity-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Pressure-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Pressure-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Sunrise-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Sunrise-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Sunset-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Sunset-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Wind-a
{

	width: 50%;
	float: left;
	overflow: hidden;
}

.Wind-b
{

	width: 50%;
	float: left;
	overflow: hidden;
}


.ContentSmall, .ContentLarge
{
	margin-bottom: 20px;
}


.Forecast-Day-TOPIC-Text
{
	color: white;
}

.ForecastArea-Day
{
	width: 30%;
	float: left;
	position: relative;
	overflow: hidden;
	margin-top: 5px;
}

.Last
{
	float: right;
}

.Middle
{
	left: 5%;
}

.ContentSmall, .NewsImageArea {
width: 30%;
position: relative;
float: left;
overflow: hidden;
font-size: 2vw;
}

.ForecastArea-Day p
{
	padding: 5px;
	color: white;
	text-shadow: 0 1px 0 #000;
	display: inline;
}

.Forecast-Day-TOPIC
{
	position: relative;
	background: #528cc6 ;
	padding: 5px;
	text-align: center;
}

.Forecast-Day-IMG
{
	width: 100%;
	position: relative;
	float: left;
	text-align: center;
	border-bottom: 1px dashed black;
}

.Forecast-Day-IMG img
{
	width: 72px;
}

.Forecast-Day-TEMP
{
	width: 100%;
	position: relative;
	float: left;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 120%;
	font-weight: bold;
}

.Forecast-ContentArea
{
	background: transparent;
	display: block;
	border: 2px solid #336699 ;
	overflow: hidden;
	height: 100%;
	z-index: 100;
	position: relative;
}

#slider
{
	margin-top: 5px;
	margin-bottom: 10px;
	background: #336699 ;
	float: left;
	position: relative;
}

.SelectSatellite, .SelectChannel
{
	position: relative;
	float: left;
	margin-left: 30px;
	margin-top: 10px;
}

.contentCentered
{
	margin-top: 10px;
	float: left;
	position: relative;
}


.CS-TextArea,

{
	width: 300px;
	position: relative;
	float: left;
}

.ContentLarge, .NewsContentArea

{
	width: 70%;
	position: relative;
	float: left;
	font-size: 2vw;
}

.CL-ContentBox

{
	width: 100%;
	float: left;
}

.CL-Content, .NewsContent
{
	margin-left: 10px;
}

.CL-ContentText

{
	margin-top: 10px;
}

.CL-Topic

{
	margin-top: 10px;
	color: white;
	background: #528cc6 ;
	height: 30px;
	color: #FFF;
	font-size: 110%;
	font-weight: normal;
	line-height: 32px;
	margin-left: 10px;
}
.CS-Topic

{
	margin-top: 10px;
	color: white;
	background: #528cc6 ;
	height: 30px;
	color: #FFF;
	font-size: 110%;
	font-weight: normal;
	line-height: 32px;
}

.NewsDate
{
	margin-top: -3px;
}

.CS-Footer, .NewsDate
{
	color: white;
	background: #528cc6 ;
	height: 30px;
	color: #FFF;
	font-size: 95%;
	font-weight: normal;
	line-height: 32px;
	text-align: center;
}

.CL-TopicText, .CS-TopicText, .Forecast-Day-TOPIC-Text
{
	margin-left: 10px;
}

.CL-TopicText
{
	float: left;
}

.CL-TopicButton
{
	float: right;
	margin-right: 10px;
}

/* ################################################ News ################################################ */

table.NewsOverview
{
	padding:0px;
}


.NewsDetailEntry
{
	float:right; 
	margin:10px;
}


.NewsOverview {
width: 100%;
color: black;
}

.NewsOverview .even
{
	background-color: #BBB;
}

.NewsOverview .uneven
{
	background-color: #EEE;
}

.NewsOverview a
{
	color: black;
	padding-left: 10px;
}

.NewsOverview .Image {
position: relative;
float: right;
height: 7%;
width: 15%;
}

.NewsOverview .Image img {
height: 7%;
width: 100%;
}

.NewsOverview .Date
{
	position: relative;
	float: right;
}

.NewsOverview .Text
{
	position: relative;
	float: right;
}

.NewsImageArea, .NewsContentArea
{
	padding-bottom: 20px;
}

.NewsImage img
{
	width: 11%;
}

.NewsImage, .NewsContent
{
	margin-top: 20px;
}

.WidgetMedium .NewsOverview .NewsRow {
float: right;
width: 100%;
}

.WidgetMedium .NewsOverview .Date {
width: 85%;
}


.WidgetMedium .NewsOverview .Text {
width: 85%;
overflow: hidden;
text-align: left;
color: black;
font-size: 3vw;
}