/* CSS Reset */  

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
} 

/*responsive design TEST */
@viewport {
width: device-width;
}

/* HTML5 display-role reset for older browsers */  
article, aside, details, figure, footer, menu, header, hgroup, nav, section {	display: block;}

/* figcaption {	display: block;}  */

body {	line-height: 1;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
li { list-style: none; }

a:link {color: #DDDFF1; text-decoration: none;}


/* Global */


body { background-color:#384666; }
body, html {height: 100%; }



/* Wrapper */

#wrapper {
/*	background-color:rgba(255, 255, 255, 0.9);	*/
	max-width:75em; 
	height: 100%;
	margin: auto;
	    
	}


/* Headlines */

h1 {	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", "Century Gothic", "Geneva", "Verdana", sans-serif;
		font-size: 24px; color :#99A3D3; font-weight:normal; 	}




/* Containers */

#top 				{		}

#graphiclink		{	float:right; margin: auto;	padding:100px 20px 0px 0px}


/* Logo */
#logo				{	float:left;  margin: 60px 0px 0px 20px; } 
img 				{ max-width: 100%; max-height: 100%; }
.cat 				{ width: 1138px; }
		
/* Navigation */

#topnav				{	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", "Century Gothic", "Geneva", "Verdana", sans-serif;
						font-size:24px; width:1200px; clear:both; font-weight:normal; margin: auto 10px; position:fixed; background-color:#384666;}

						
#topnav ul li		{	display:inline;	}
#topnav ul			{	width:100%; float:left; margin: 10px; 	}
#topnav ul li a		{	float:left; padding-right:20px;	}

#topnav a:link		{	color:#DDDFF1; 	}
#topnav a:visited	{	color:#DDDFF1;	}
#topnav a:active	{	color:#DDDFF1; 	}
#topnav a:hover		{	color:#99A3D3; 	}
#topnav a:focus		{	color:#DDDFF1; 	}

#index #topnavIndex a			{	color: #99A3D3;	}
#leistungen #topnavLeistungen a	{	color: #99A3D3;	}
#projekte #topnavProjekte a		{	color: #99A3D3;	}
#ueber #topnavUeber a			{	color: #99A3D3;	}

/* Content */

#content			{	font-family:"Tahoma", "Verdana", "Lucida Sans", "Geneva" ; font-size:16px; color:#DDDFF1; 
						float:left; width:73%; line-height:150%;	 }

						
#content h1			{	margin:50px 100px 25px 20px;	}
#content p			{	margin:0 100px 27px 20px;	color:CCCff1; }


#content a:link		{	color:#99A3D3	}
#content a:visited	{	color:#CCCFF1	}
#content a:active	{	color:#CCCFF1	}
#content a:hover	{	color:#CCCFF1	}
#content a:focus	{	color:#99A3D3	}

#contact-form		{	font-family:"Tahoma", "Verdana", "Lucida Sans",  "Geneva" ; font-size:16px; color:#DDDFF1; 
						float:left; width:680px; line-height:150%; margin: 0px 20px	}

#contact-form a:link	{	color:#99A3D3	}
#contact-form a:visited	{	color:#CCCFF1	}
#contact-form a:active	{	color:#CCCFF1	}
#contact-form a:hover	{	color:#CCCFF1	}
#contact-form a:focus	{	color:#99A3D3	}

#contact-form h1	{	margin:50px 0 25px 0px;	}

.teampicture	{	float: left; width: 180px; height: auto; margin: 5px 10px 10px 0; border-color:#99A3D3; border-width:1px; border-style:hidden} 


/* Team Tabelle */

 table#Tabelle1 {  margin-left: 20px
} 
 
 table#Tabelle1 tr {

} 
 

 
 
table#Tabelle1 td {
 border: 1px solid black;
 padding: 10px;
}
 
		
/* Content rechte Spalte */

#rightside			{	font-family:"Tahoma", "Verdana", "Lucida Sans",  "Geneva";
						font-size:16px; color:#DDDFF1; width:26%; float:right; line-height:150%; 	}
						
#rightside h1		{	margin:50px 0 25px 0	}
#rightside p		{	margin:0 0 20px 0;	}
#rightside a:link		{	color:#9999CC 	}
#rightside a:visited	{	color:#DDDFF1	}
#rightside a:active		{	color:#DDDFF1	}
#rightside a:hover		{	color:#99A3D3	}
#rightside a:focus		{	color:#DDDFF1	}

	
/* Fußzeile */

#footer				{	position:fixed; bottom:0px; width:1200px; padding-top:10px; padding-bottom:10px; color:#99A3D3; font-size:12px; 
						line-height:130%; background-color:#384666; z-index:1; 						}


#footer a:link		{	color:#99A3D3	}
#footer a:visited	{	color:#99A3D3	}
#footer a:active	{	color:#99A3D3	}
#footer a:hover		{	color:#DDDFF1	}
#footer a:focus		{	color:#99A3D3	}

#footer-left		{	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", "Century Gothic", "Geneva", "Verdana", sans-serif;
						width:40%; float:left;	margin:auto 20px; }
	
#footer-right		{	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", "Century Gothic", "Geneva", "Verdana", sans-serif;
						text-align:right; float:right; width:30%;	margin:auto 20px; }
						
/* Forms Kontakt */


form				{	text-align:left; margin-top:20px;	background:none;	/*Kontaktfeld komplett */
						font-size:16px; font-family:"Tahoma", "Verdana", "Lucida Sans", "Geneva"; }

label				{	float: left; width:90px; text-align:left; display:block; 		} /*Namen der Eingabefelder */
	
input, textarea		{	border:1px solid; border-color:#99A3D3; margin-left:10px;  width:500px; padding:3px; margin:0 0 10px 0; font-size:16px; color:#384666} /*Eingabemaske Kontaktdaten */
	
input				{	width:20px: margin-bottom:16px;	}

textarea  			{	width:500px; height:150px; margin-bottom: 16px;  border:1px solid; border-color:#CCCff1; padding:10; margin:10; background:white;	
						font-size:16px; font-family:"Tahoma", "Lucida Sans", "Verdana", "Geneva";	}		/* Eingabemaske Nachricht */

select				{	}

.submit				{	width:100px; color:#384666; height:25px; margin:5px 0 0 90px; font-family:"Tahoma", "Lucida Sans", "Verdana", "Geneva";	}





/* media queries */

@media only screen
/*	and (min-device-width: px), */
	and (max-device-width: 720px),
	and (orientation: portrait),
	and (min-resolution:270ppi)
	/*	and (-webkit-min-device-pixel-ratio: 2) */
	 {


		#wrapper {
			width:100%;
			}		
		h1 {   
			font-size: 28px;  line-height:150%; width:100%;
			}
		#content {	 
			font-size:26px; color:#DDDFF1; float:left; width:100%; line-height:150%; 	   
			}  			
		#logo {	
			margin-left:20px; margin-bottom:50px; float:left; width:95%; 
			}
		img {
 			max-width: 100%;
			max-height: 100%;
			}
		.cat {
 			width: 100%;
			}
			
		#graphiclink {	
			float:right; margin: auto;	padding:20px 50px 0px 0px    
			}
		#rightside {	
			float:left; font-size:26px; width:100%; line-height:150%; margin-left:30px
			} 
		#topnav {	
			font-size:40px; width:100%;	clear:both; font-weight:normal; margin: 20px 10px; position:static;    
			}
		#footer {	
			position:static; width:100%; font-size:40px; line-height:150%; 
			}
		#footer-left, #footer-right {
			font-size:30px; line-height:150%; width:100%; margin-top:30px; padding-bottom:10px; float:left; text-align:left
			}
		#contact-form {
			font-size:30px; 
			}
		form {
			font-size:30px
			}
		input, textarea {
	
			font-size:30px; width:650px
			}
		label {
			width:140px;	
			}
		.submit {
			width:140px; margin-left:140px; height:auto
			}
								    
		}