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

html 
{ 
}

.LabelCaptcha
{
margin-right: 120px;
}

.Content p {
font-size: 2.5vw;
}

.Content ul {
font-size: 2.5vw;
}

#forecastUpdate
{
position: absolute;
top: 0px;
left: 30px;
}

.overlaySymbolsright img, .overlaySymbolsleft img
{
background: rgba(51, 102, 153, 0.5);
border-radius: 10px;
padding: 2px;
}

.overlayTemperaturRight, .overlayTemperaturLeft
{
color: white;
text-shadow: 1px 1px #000;
}

#stationSelect {
width: 100%;
border: 0px;
height: 5%;
background: #DADADA;
font-size: 200%;
}

body
{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 85%;
	margin: 0px;
	background-color: rgb(200,200,200);
	background-image: url(/opencms/export/system/modules/om.gov.met.website/resources/images/bg.png); 
}

#DGMAN-SETTINGS img
{
	height: 25px;
}

#DGMAN-WRAPPER
{
	margin: 0px auto;
	width: 100%;
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0px 0px 5px black;
	position:relative;
}

#DGMAN-HEADER {display: block; width:100%;}

#DGMAN-BANNER img 
{
	width: 100%;
}

#DGMAN-BANNER .language-switch 
{
    position:absolute;
    top:5%;
    right:1%;
    width:5%;
    height:10%;
}

#DGMAN-BANNER .language-switch img
{
    position:absolute;
    width:100%;
}

#DGMAN-BANNER
{
display: block;
float: right;
position: relative;
width: 100%;
}


#DGMAN-MENU {
background: #336699;
display: block;
width: 100%;
height: 6%;
position: relative;
border-bottom: 2px solid #373737;
float: right;
}

#DGMAN-LINKS {
float: right;
color: #FFF;
width: 100%;
}


.SETTINGS-CONTENT p {	color: #FFF;	margin-right: 10px; margin-top: 10px;}


#DGMAN-LANGUAGE 
{
	display: block;
	float: right;
	position: relative;
	z-index: 105;
	margin-right: 20px;
	width: 140px;
	text-align: left;
}

#DGMAN-LANGUAGE img {
	margin-top: 11px;
	padding-left: 20px;
}


#DGMAN-CONTENT	{display: inline-block;}

.datenews 
{
	padding: 5px;
}

.datenews p {line-height: 0px; text-align: left;}

#DGMAN-WIDGETAREA
{
	clear: both;
	min-height: 400px;
}


h1 {margin-top: 0px;}
h3 {color: white; padding: 10px;}

.widgetContent {display: block; color: black;}

.widgetContent p {padding: 10px;}
.widgetContent table {padding: 10px;}

.PageContent, #PageContent
{
	width: 100%;
	z-index: 3;
	padding: 0px;
	color: black;
	margin-right: 7px;
	display: inline-block;
	float: right;
	position: relative;
	margin-right: 0px;
}

#DynamicWidgetColumnSingleSize
{
	width: 300px;
	float: right;
	position: relative;
	margin-top:10px;
	margin-right:10px;
}

#DynamicWidgetColumnDoubleSize
{
	width: 600px;
	float: right;
	position: relative;
	margin-top:10px;
	margin-right:8px;
}

#localForecast
{
	width: 280px;
	height: 500px;
	z-index: 3;
}

#localForecast li
{
	color: white;
	margin-top: 0;
	padding: 10px;
}

#News ul
{
	color: white;
	margin-top: 0;
	padding: 10px;
}

#AboutUs
{
	width: 870px;
	min-height: 150px;
	padding: -5px;
	margin-top: 10px;
}

#ContentFormat
{
	color: #FFF;
	padding: 20px;
	font-size: 15px;
	line-height: 20px;
}


#Youtube
{
	padding: 3px;
	z-index: 3;
	vertical-align: center;
	width: 280px;
	height: 120px;
}

#DGMAN-FOOTER
{
	background: #336699 ;
	width:100%;
	display: inline-block;
	margin-top: 3%;
}

#DGMAN-COPYRIGHT
{
	color: #FFF;
	//margin-right: 20px;
	line-height: 200%;
	width: 100%;
	float: right;
	font-size: 3.5vw;
}

#DGMAN-FOOTERMENU 
{
	width: 500px;
	float: right;
}

#DGMAN-FOOTERMENU li
{
	overflow: hidden;
	color: #FFF;
	float: right;
	list-style: none;
	line-height: 32px;
	margin-right: 30px;
}


/**
 * Map Examples Specific
 */
.map {                                                                                                                                                                                                                                           
        width: 563px;                                                                                                                                                                                                                                
        height: 353px;                                                                                                                                                                                                                               
        border: 1px solid #ccc;                                                                                                                                                                                                                      
        padding: 3px;
} 

form,input,select,textarea{margin:0; padding:0; color:#000;}

div.box {
width:850px;
position:relative;
margin-top: 20px;
}

div.box label {
width:100%;
display: block;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
float:right;
width:100px;
text-align:left;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background-color: #E9E9E9;
border: 1px; solid;
}

div.box .message{
padding:7px 7px;
width:680px;
max-width:680px;
background-color: #E9E9E9;
overflow:hidden;
height:150px;
border: 1px;
}

div.box .button
{
margin:0 0 30px 0;
padding:4px 7px;
background-color: #E9E9E9;
border:0px;
position: relative;
right: 715px;
width:100px;
color: black;
}

/* OUR SERVICES */

section{
		float: right;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 100%;
		padding-right:0;
		padding-left:0;
}


/* SOCIAL MEDIA FOOTER */

#buttons {
    padding: 14px 7px;
    overflow: hidden;
}


.button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: right;
    height: 40px;
    margin: 0 7px;
    overflow: hidden;
    width: 150px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.icon {
    display: block;
    float: right;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}

.icon i {
    color: #fff;
    line-height: 42px;
}

.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    right: 38px;
    position: absolute;
    width: 112px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}

.slide p {
    font-family: Open Sans;
    font-weight: 400;
    border-right: 1px solid #fff;
    border-right: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    right: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
}

.button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.facebook iframe {
    display: block;
    position: absolute;
    left: 16px;
    top: 10px;
    z-index: 1;
}

.twitter iframe {
    width: 90px !important;
    left: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}

.google #___plusone_0 {
    width: 70px !important;
    top: 10px;
    left: 15px;
    position: absolute;
    display: block;
    z-index: 1;
}

.linkedin .IN-widget {
    top: 10px;
    left: 22px;
    position: absolute;
    display: block;
    z-index: 1;
}

.facebook:hover .slide {
    right: 150px;
}

.twitter:hover .slide {
    top: -40px;
}

.google:hover .slide {
    bottom: -40px;
}

.linkedin:hover .slide {
    right: -150px;
}

.facebook .icon, .facebook .slide {
    background: #305c99;
}

.twitter .icon, .twitter .slide {
    background: #00cdff;
}

.google .icon, .google .slide {
    background: #d24228;
}

.linkedin .icon, .linkedin .slide {
    background: #007bb6;
}

.DGMAN-FOOTER-GREY
{
	float: right;
	position: relative;
	background: #DCE0E0;
	border-top: 1px dashed grey;
	width: 100%;
}

.DGMAN-FOOTER-SOCIAL img
{
	width: 50px;
	position: relative;
	float: right;
	margin: 0px 5px 10px 0px;
	 -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
	opacity: .5;
}

.DGMAN-FOOTER-SOCIAL img:hover
{
	opacity: 1;
}

.DGMAN-FOOTER-SOCIAL
{
	width: 50%;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
}

.DGMAN-FOOTER-LINKS
{
	width: 50%;
	float: right;
}

.wms-topic
{
font-size: 120%;
background: #336699;
color: white;
width: 790px;
padding: 5px;
float: right;
position: relative;
}

.wmsLayer
{
float: right;
width: 200px;
}

#dataLayers, #overlayLayers, #avail, #amount
{
float: right;
width: 800px;
background: white;
line-height: 30px;
position: relative;
}

#map
{
float: right;
position: relative;
}

.responsive-video iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}