/*############################################

CSS Style "style.css" für Wetterstation

Bachelorarbeit 'Wetterstation' an der 
Hochschule Mannheim von Lukas Sobotta
an der Fakultät Elektrotechnik
Jahr: 2014

Aufbau des Stylesheets:
1. Background
2. Allgemeine änderungen
3. Frame
4. Text
5.


/*############################################



/*####################################################  BACKGROUND  #############################################*/
/*     Hier wird mit zusätzlicher Hilfe eines Codes im HTML Teil der Hintergrund Bildschirmfüllend dargestellt   */

#bg { 
	position: fixed; 
	top: 0; 
	left: 0;
	z-index:-1;
	margin:0;
	padding:0; 
	
	
	}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
/*############################################*/


/*############################################*/
/*#### ALLGEMEIN ###*/
* {
margin: 0;
pading: 0;
}

body { 
	margin: 10px 0px 0px 0px;
	}
	
a:link {color: #333;}
a:hover {color: #666;}
a:visited {color: #333;}
/*############################################*/

/*################################################################################*/
/*############# STYLE FÜR DAS DIV MIT DEM INHALT ###############*/
.frame {
	width: 70%;
	max-width: 1000px;
	min-width:600px;
	min-height:300px;
	margin-top:20px;
	margin-left: 30px;
	margin-bottom: 150px;
	margin-right:30px;
	padding: 10px 10px 10px 10px;
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,.90);
	background-color: transparent\90;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
	zoom:1;
	
	/*Rahmen*/
	border:solid;
	border-width:1px;
	border-color:#FFF;
	border-radius:10px;
	
	/*Schatten*/
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	}
/*################################################################################*/


	
/*################################################################*/
/*################ TEXT #####################*/
p { 

	padding-bottom:10px;
	text-align:justify;

	}

.text { 
	font-family: 'Open Sans', sans-serif;
	font-weight:400; 
	font-size: 85%;
	/*text-shadow: 1px 1px 1px #999;*/
	padding-bottom:0px;
	padding-left:10px;
	}
.text_bold { 
	font-family: 'Open Sans', sans-serif;
	font-weight:600; 
	font-size: 85%;
	/*text-shadow: 1px 1px 1px #999;*/
	padding-bottom:0px;
	padding-left:10px;
	}
	
.h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	font-size: 120%;
	margin-top:0px;
/*text-shadow: 1px 1px 1px #999;*/
	padding-bottom:10px;
	padding-left:10px;
	}
	
.h2 {
	  font-family: 'Open Sans', sans-serif;
   font-weight:600;
   font-size:110%;
   /*text-shadow: 1px 1px 1px #999;*/
   padding-bottom:5px;
   	padding-left:10px;
		}
		
		
/*############################################################################*/




/*################################# IMAGE ####################################*/
/* Definition wie Bilder dargestellt werden sollen 							  */

.img {
	
	border:solid;
	border-width:1px;
	border-color:#FFF;
	
	-moz-box-shadow: 0 1px 2px #CCC;
	-webkit-box-shadow: 0 1px 2px #CCC;
	box-shadow: 0 1px 2px #CCC;
}

/*############################################################################*/



/*############################################################################*/
/*################################## TOP #####################################*/
.top {
	width: 100%;
	min-width:600px;
	height:50px;

	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,.35);
	background-color: transparent\35;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
	/*zoom:1;*/
	
	

	
	-moz-box-shadow: 0 0px 5px #666;
	-webkit-box-shadow: 0 0px 5px #666;
	box-shadow: 0 0px 5px #666;

	
}
/*############################################################################*/





/*###############################################################################*/
/*################################## FOOTER #####################################*/
html, body {
height: 100%;
}

* html #wrapper {
height: 100%;
}

#wrapper {
position: relative;
width:100%;
min-height: 100%;
margin: 0;
}
#content { 
width:100%;
padding: 0;
margin:0; 
} 

#footer {
	position: absolute;
	bottom: -1px;
	width: 100%;
	padding: 15px 0px 10px 0px;
	background: rgb(121,217,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(121,217,255,1) 0%, rgba(24,141,228,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(121,217,255,1)), color-stop(100%,rgba(24,141,228,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(121,217,255,1) 0%,rgba(24,141,228,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(121,217,255,1) 0%,rgba(24,141,228,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(121,217,255,1) 0%,rgba(24,141,228,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(121,217,255,1) 0%,rgba(24,141,228,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79d9ff', endColorstr='#188de4',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: inset 0 5px 5px #666;
	-webkit-box-shadow: inset 0 5px 5px #666;
	box-shadow: inset 0 5px 5px #666;
	left: -2px;
}


.footer_text { 
	font-family: 'Open Sans', sans-serif;
	font-weight:400; 
	font-size: 80%;
	color: #000000;
	margin-top:0px;
	text-shadow: 0px 0px 1px #999;
	line-height: 15px;
	text-align: center;
	}
	
	
.footer_frame {
	width:210px;
	height:80px;
	margin: 0px 0px 5px 5px;
	padding: 5px 5px 5px 5px;
	
background: rgb(244,251,255); /* Old browsers */



	position: relative;


	
	/*Rahmen*/
	border:solid;
	border-width:1px;
	border-color:#FFF;
	
	/*Schatten*/
	-moz-box-shadow: inset 0 0 4px #333;
	-webkit-box-shadow: inset 0 0 4px #333;
	box-shadow: inset 0 0 4px #333;
	
	-webkit-transition: all 0.2s linear;
 	-moz-transition: all 0.2s linear;
 	-o-transition: all 0.2s linear;
 	transition: all 0.2s elinear;
	}	
	
	.footer_frame:hover {
background: rgb(255,255,255); /* Old browsers */
background: rgba(255,255,255,1); /* Old browsers */



	}	
/*############################################################################*/





/*.Logo {
 margin: 0 0 0 40px;
 padding: 0 0 0 0;
 width: 296px;
 height:50px;
 display:block;
 background: url('../Bilder/LogoWetterstation.png') center top no-repeat;
 
	-webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.Logo:hover {
margin: 0 0 0 40px;
 padding: 0 0 0 0;
background-image: url('../Bilder/LogoWetterstation_hover.png');
}*/





/*##################################################################################*/
/*############################ GRAUSTUFEN EFFEKT ###################################*/


img#grayscale {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
img#grayscale:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
/*##################################################################################*/




/*###################################################################################*/
/*##################################  PLOT  #########################################*/

.plot {
	width:100%;
	height:100%;
}
/*###################################################################################*/