@charset "utf-8";
/* CSS Document */

/* * * * * * * RESET * * * * * * * */
body, div {margin:0; padding:0;}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;}

header, nav, footer, section, aside, article{display: block;}

/* * * * * * * STRUKTUR * * * * */
html, body, #content{height:100%;}
html {padding-bottom:1px;background-color:#96B125; background-color:#369;/*background-color:#FF8A00*/}
body {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; overflow-y:scroll;background-color:#336699;}
body > #content{height:auto;min-height:100%;}
header {position:fixed; bottom:0; left:0; height:120px; width:100%; -moz-box-shadow: 0px -2px 7px #333;-webkit-box-shadow: 0px -2px 7px #333;box-shadow: 0px -2px 7px #333; z-index:100;background-color:#fff;}
/*body > header {
    background: none repeat scroll 0 0 #fff;
    bottom: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}*/
#stupidIE {display:none;}

/* * * * * * * FORMATE * * * * * * * */
h1, h2, h3 {color:#fff;
/*font-family: 'Quicksand', sans-serif;
font-family: 'Sue Ellen Francisco', cursive;
font-family: 'Handlee', cursive;
font-family: 'Over the Rainbow', cursive;*/
font-family: 'Shadows Into Light', cursive;
letter-spacing:0.05em;
font-weight:300;}
h1 {font-size:230%;margin:10px 0 5px 0;}
h2 {font-size:140%;margin:15px 0 5px 0;}
h3 {font-size:120%;margin-bottom:5px}
.ue {font-family: 'Shadows Into Light', cursive;
letter-spacing:0.05em;
font-weight:300;
font-size:120%;
color:#fff;
}
a img {border:0; outline: 0}

.imgResp {max-width: 100%;height: auto;-moz-box-shadow: 2px -2px 7px #333;-webkit-box-shadow: 2px -2px 7px #333;box-shadow: 2px -2px 7px #333;padding:5px; background-color:#fff;}
.thumb {width:90px; height:160px;float:left;margin-right:15px;-moz-box-shadow: 2px -2px 7px #333;-webkit-box-shadow: 2px -2px 7px #333;box-shadow: 2px -2px 7px #333; background-image:url(../bilder/projekte/projekte_1.png); background-repeat:no-repeat;background-position:top left}
.thumb a {display:block;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearing:before{content:".";display:block;height:20px;clear:both;visibility:hidden;}
.todo {background-color:#9F3;}
.kleiner {font-size:smaller;}
.tel a {color:#000!important;border-color:#000!important;}

/* * * * * * * LOGO * * * * * * * */
#logo {font-size:3em; position:relative;left:15%;padding-top:20px; }
#logo a{color:#b2cf0c; text-decoration:none;text-shadow: 0px 1px 0px #009FBF;}
#logo span {color:#b2cf0c; font-size:0.7em;position:absolute; left:1.9em;top:1.2em;}
#slogan {position:absolute; top:2em; left:47%;font-size:1.4em;color:#666;}


/* * * * * * * NAVI * * * * * * * */
nav {position:absolute; top:4.5em; right: 15%;}
nav a {color:#fff; text-decoration:none;}
.navA {color:#333;} 
#hauptNav li {width:80px; height:65px;list-style-type:none;text-align:center;float:left;margin-right:5px;margin-top:12px;background-color:#666; color:#fff;font-size:0.7em;font-weight:bold;padding-top:14px;-moz-border-radius:60px;-webkit-border-radius:60px; border-radius:60px;}
#hauptNav li.aktiv, #hauptNav li:hover {background-color:#b2cf0c;}
#smartNav {display:none;}
#smartNav li {list-style-type:none;text-align:center;float:left;margin-right:5px;margin-top:0;color:#333}
a[rel='next'] {padding-left: 35px;background-image:url(../bilder/next.png); background-repeat:no-repeat;background-position:left; color:#333;}
/*a[rel='prev']:before{content:"\25C4";color:#333}*/
a[rel='prev'] {padding-right: 25px;background-image:url(../bilder/prev.png); background-repeat:no-repeat;background-position:left;color:#333;}
a[rel='start']{padding-right:10px;color:#333;}


/* * * * * * * INHALT * * * * * * * */
#content { height:100%; background-image:url(../bilder/KreiseHG.png);background-repeat:no-repeat;background-position:center; /*background-size:100%;*/max-width:1140px;margin:0 auto;background-attachment:fixed; font-size:1.1em;}
#main {padding-top:30px; padding-left:47%; background-image:url(../bilder/cmsBG.png); background-repeat:no-repeat; background-position:75% 0; background-attachment:fixed;position:relative;}
#mainInnen {padding-bottom:141px;width:400px;font-size:0.9em;color:#000;}
#main a{color:#EAFD60; text-decoration:none; border-bottom:1px dotted #EAFD60;}
#main .thumb a {border-bottom:0;}
h1 + p{color:#eee;}

/* Boxen Startseite */
#web, #printFoto, #cms, #sonstNoch, #profilinfo {color:#efefef; font-size:160%;letter-spacing:0.05em;font-family: 'Shadows Into Light', serif;}
#web p, #printFoto p, #cms p, #sonstNoch p {margin:0; padding:0;}
#web .titel, #printFoto .titel, #cms .titel {letter-spacing:0.1em;font-family: 'Shadows Into Light', serif;}
#web {position:absolute; top:3%; right:35%; background-image:url(../bilder/webBG.png); background-repeat:no-repeat; background-position:120px 25px ;}
#cms {position:absolute; top:28%; right:9%;/*left:12%;*/ background-image:url(../bilder/cmsBG.png); background-repeat:no-repeat; background-position:120px 0;padding-right:70px;}
#printFoto {position:absolute; top:42%; right:42%; /*left:48%;*/background-image:url(../bilder/printFotoBG.png); background-repeat:no-repeat; background-position:0 0;padding-left:80px;padding-top:60px;}
#sonstNoch {position:absolute; bottom:7em; left:12%;color:#369;}
#profilinfo {position:absolute; bottom:5em; left:15%;display:none;}

/* hoverInfos Startseite */
.info{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#333; font-size:50%;font-weight:normal;text-align:left;
	position:absolute; top:5em; left:0; width:30em;padding:5px 5px 5px 5px;
	background-color:#fff;opacity:0.8;
	display:none;
}
.info a {color:#369;}
#web:hover .info, #cms:hover .info, #printFoto:hover .info, #sonstNoch:hover .info  {display:block;}
#web:active .info, #cms:focus .info, #printFoto:hover .info, #sonstNoch:hover .info  {display:block;}
#cms:hover .info{width:20em;}
#printFoto:hover .info {top:8em;}
#sonstNoch:hover .info {padding:5px; top:0.5em;left:2em;}


@media only screen and (max-width: 800px) and (min-width: 601px) {
	#logo {font-size:2.5em; position:relative;left:10%;padding-top:20px;}
	#slogan  {top:1.5em; left:38%;}
	nav {right:5%;}
	#main { padding-left:38%;}
	#mainInnen {width:350px;}
	#sonstNoch {left:0.5em;bottom:4.5em;}
	}
	@media only screen and (max-device-width: 1024px) {
		#content {/*background-image:none*/background-attachment:scroll; background-position:center -100px; background-repeat:repeat-y; }
		.info {	display:none;}
		#sonstNoch {display:none;}
		#profilinfo {display:block!important;}
		#profilinfo a {color:#fff;text-decoration:none;}
		
		
	}
		@media only screen and (max-device-width: 800px) {
		#content {/*background-image:none*/background-size:auto;}
		#profilinfo {display:none;}
	}

@media only screen and (max-width: 600px) and (min-width: 320px) {
	/*body {background-color:#7D9AB9;}*/
	header {position:static;height:100px;}
	nav {margin-top:25px;position:static;}
	#hauptNav {display:none;}
	#smartNav {display:block;margin-left:45%;}
	#logo {font-size:1.8em; position:relative;left:3%;padding-top:10px;}
	#slogan  {top:1.5em; left:45%;font-size:0.8em;}
	nav {right:3%;}
	#content.start {padding-bottom:121px;padding-left:10px;}
	#content {background-image:url(../bilder/KreiseSmart.png);}
	#main { padding-left:3%;}
	#mainInnen {width:300px;}
	#web, #printFoto, #cms, #sonstNoch {font-size:0.9em; position:static!important;}
 	#web {background-position:100px 0}
	#printFoto {padding-left:0;}
	.info {font-size:1em;color:#000;width:300px;background-color:transparent;z-index:200;display:block;position:static;}
	.info a {color:#EAFD60;}
	#printFoto:hover .info{top:auto;display:block;position:static}
	#cms:hover .info{width:300px;}
	#sonstNoch {color:#efefef;}
	#profilinfo {display:none;}
	}

@media only screen and (max-height: 710px) {
	#printFoto {position:absolute; top:28%; right:62%;}
}	

@media only screen and (max-device-width: 480px) {
	#content {background-image:url(../bilder/KreiseSmart.png);font-size:110%;}
	#main {background-image:none;}
	#mainInnen, .info {color:#A7C3DF}
	#web, #printFoto, #cms, #sonstNoch {background-image:none;}
	#printFoto {background-image:url(../bilder/webBG.png);}
	#profilinfo {display:none!important;}
	#cms {padding-top:10px;}
	a:active {border:0!important;outline:0!important;}
	}