/* ### layout bic.mc 2013 April
----------------------- */

html, body { height: 100%; margin:0; padding:0; background:#121e32; }
noscript h3,
#ie_warning { color: red; font-size: 17px; margin-top: 20px; margin-left: 5px; padding: 5px; }


/* 
vollbild im hintergrund mit css
das folgende geht in moderneren browser
ie8 leider nicht, weswegen dort mit dem img (siehe ie8 eigenes css) statt mit dem background img gearbeitet wird.
*/
#bg {
	position: fixed;
	height: 100%; width: 100%;
	background: url(bg_monaco_unscharf.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* brauch ich nur im ie8, deswegen hier hidden */
#bg img { visibility: hidden; }
#intro .transparenz {
  zoom:1; filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";/* erstens! IE7 and under. zoom hack sonst klappts manchmal nicht*/
	filter: alpha(opacity=10); /* zweitens! IE8. sonst klappt IE8-as-IE7 nicht, IE8, IE7, IE6 schon.*/
	opacity: .1; /* IE9, Firefox, Chrome and Safari, Opera  */
}

#front { height: 100%; width: 1200px; margin: 0 auto; }
#wrapper { border-right-color: white; border-left-color: white; border-right-width: 0px; border-right-style: dotted; border-left-style: dotted; border-left-width: 0px; z-index: 5; position: relative; width: 100%; min-height: 100%; }

#main { z-index: 10; position: relative; margin-left: auto; margin-right: auto; width: 1200px; }

#intro .box { background:#444; text-align: center; background:rgba(0,0,0,.4); padding:20px; margin-top: 150px;}
#other .box { background:#444; position: fixed; background:rgba(0,0,0,.4); padding:20px; margin-top: 144px; }

#nav { width: 100%; }

/* "social" media */
#share a, #share a:link, #share a:visited, #share a:hover { border-width: 0px; }
.shareBtn { display: inline-block; width:40px;height:100px;cursor:pointer; }
#share #facebook.white { background:url(facebook_white.png) center left no-repeat; }
#share #twitter.white { background:url(twitter_white.png) center left no-repeat; left:40px; }

/* sprachweiche */
#sprache a { color: white; margin-right: 5px; margin-left: 5px; }
#sprache a.active { border-bottom-color: #486aeb; border-bottom-width: 1px; border-bottom-style: solid;  }

#content { width: 750px; float: right; }

/* flächen */
.txt-img-top { background:rgba(0,0,0,.4); padding:20px; margin-bottom: 2px; }
.txt-img { background:rgba(0,0,0,.4); padding:20px; margin-bottom: 2px; }
.txt-img .rahmen { border-radius:10px; background-color: #25394a; display: inline-block; padding: 1px; }
.txt-img img { border-radius:8px; }
.txt-img h2 { font-size: 30px; }


/* Links- bzw. Rechtsausrichtung für Elemente */
.leftalign {float: left; margin: 0 15px 0 0; }
.rightalign {float: right; margin: 0 0 0 15px; }


                    
/* ### fluid layout
 funktioniert nicht mit ie 7 oder aelteren ff, das wird mit respond.min.js kompatible gemacht aber nicht animiert
 respond.min.js braucht alle css, die veraedert werden, in einer datei
 von klein nach groß
 ----------------------*/
#front, #main, #content, h1  { 
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}



/* Smartphones (portrait) ----------- */
@media handheld, only screen and (max-width: 320px) {

	#front { width: 320px; }
	#main { width: 320px;}
	#intro .box { margin-top: 20px; }
	#intro .box h1 { font-size:60px; }
	#other .box { position: relative; margin-top: 4px; margin-bottom: 20px; }
	#other .box h1 { font-size:60px; }
	#other .box h2 { font-size:18px; }
	#content { width: 400px; float: left; }
	.txt-img-top h1 { font-size:28px; }
	.txt-img img { width: 360px; }
	.txt-img p { font-size:15px; }
	#intro .shareBtn { height: 50px; }
	#other .shareBtn { height: 50px; }
	.txt-img .rahmen { margin-bottom: 15px; }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

	#front { width: 400px; }
	#main { width: 400px;}
	#intro .box 	{ margin-top: 20px; }
	#intro .box h1 { font-size:60px; }
	#other .box 	{ position: relative; margin-top: 4px; margin-bottom: 20px; }
	#other .box h1 { font-size:60px; }
	#other .box h2 { font-size:18px; }
	#content 		{ width: 400px; float: left; }
	.txt-img-top h1 	{ font-size:40px; }
	.txt-img img 	{ width: 360px; }
	.txt-img p { font-size:15px; }
	#intro .shareBtn { height: 50px; }
	#other .shareBtn { height: 50px; }
	.txt-img .rahmen { margin-bottom: 15px; }
}



/*styles for 1024px and up!*/
@media screen and (min-width: 1000px){

	#front { width: 990px; }
	#main { width: 990px;}
	#intro .box 	{ margin-top: 100px;}
	#intro .box h1 { font-size:80px; }
	#other .box 	{ position: fixed; margin-top: 131px; }
	#other .box h1 { font-size:60px; }
	#other .box h2 { font-size:18px; }
	#content 		{ width: 550px; float: right; }
	.txt-img-top h1 	{ font-size:60px; }
	.txt-img img 	{ width: 300px; }
	.txt-img p { font-size:17px; }
	#intro .shareBtn { height: 100px; }
	#other .shareBtn { height: 50px; }
	.txt-img .rahmen { margin-bottom: 0px; }
}
	
	
/*styles for 1200px and up!*/
@media screen and (min-width: 1200px){

	#front { width:1200px; }
	#main { width: 1200px; }
	#intro .box 	{ margin-top: 200px;}
	#intro .box h1 { font-size:100px; }
	#other .box 	{ position: fixed; margin-top: 144px; }
	#other .box h1 { font-size:60px; }
	#other .box h2 { font-size:18px; }
	#content 		{ width: 750px; float: right; }
	.txt-img-top h1 	{ font-size:70px; }
	.txt-img img 	{ width: 360px; }
	.txt-img p { font-size:17px; }
	#intro .shareBtn { height: 100px; }
	#other .shareBtn { height: 50px; }
	.txt-img .rahmen { margin-bottom: 0px; }
}