@charset "utf-8";


/* meat* concept and design css */

body { background: #ffffff; background-image: url('../imgs/background-stripes.png'); font-size: 100%; }
html>body { font-size: 16px; } 

h1,h2,h3,h4,h5,h6 { font-family: "Vista", sans-serif; }
.content .content-box p, .colRight p, .colRight,
.colRight ul li { line-height: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

h1 { position: absolute; bottom: 7%; right: 3%; z-index: 11; visibility: hidden;}
a { font-family: Arial, Helvetica, sans-serif; color: #B70D30; font-size: 12px; font-style: italic; text-decoration: none;}
.clr { overflow: hidden; height: 0px; font-size: 1px; clear: both;}
b { color: #B70D30; } 

/* ------------------------ */



#wrapper { width: 1000px; height: 680px; position: relative; margin: 3% auto; background: #b70d30; }
 
#top { position: absolute; z-index: 12; top: 0; right: 0; left: 0; background-color: #ffffff; padding: 5px 9px 3px 9px;
	   font-family: "Helvetica", Arial, sans-serif; font-size: 13px; color: #B70D30; font-weight: bold; text-align: left; border-top: 0px solid #B70D30;}

#top img.left { float: left; }
#top img.right { float: right; }

#page { }
#page .c50l { width: 50%; float: left;}
#page .c50r { width: 50%; float: right;}
#page .colLeft { position: absolute; width: 50%; top: 0; bottom: 0; z-index: 10 }
#page .colRight { position: absolute; width: 50%; top: 0; bottom: 0; right: 0; height: 100%; overflow: hidden; z-index: 8; background: #ffffff; }
#page .colRight img { position: absolute; }
#page .colRight #content-right { position: absolute; height: 87%; width: 440px; padding-right: 30px; } 

#page .colRight #content-right img {position: relative;}

#page .colRight #content-right { margin: 50px 0 0 20px; overflow-y: auto; overflow-x: hidden; }
#page .colRight h2 { font-size: 32px; margin: 0 0 30px 0; height: 38px;}
#page .colRight h2 span { visibility: hidden; }
#page .colRight h3 { line-height: 24px; margin: 0 0 12px 0; color: #B70D30; font-size: 18px; font-weight: normal;}
#page .colRight h4 { line-height: 18px; font-size: 14px; margin: 0 0 8px 0; color: #222222;}
#page .colRight h5 { line-height: 16px; font-size: 12px; margin: 0 0 8px 0; color: #222222;}
#page .colRight p { margin-bottom: 20px; } 
#page .colRight span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 14px;}
#page .colRight ul { list-style-type: disc; margin: 0 0 18px 18px; }
#page .colRight ul li { margin: 0 0 4px 0; }
#page .colRight address { margin-left: 10px;}

#page .colRight h2.kontaktformular { background-image: url('../imgs/headlines/kontaktformular.png'); background-repeat: no-repeat;}
#page .colRight h2.referenzen { background-image: url('../imgs/headlines/referenzen-rechts.png'); background-repeat: no-repeat; width: 185px; height:28px;}
#page .colRight h2.jobs { background-image: url('../imgs/headlines/jobs-rechts.png'); background-repeat: no-repeat; width: 120px; height:34px; }
#page .colRight h2.leistungen { background-image: url('../imgs/headlines/leistungen-rechts.png'); background-repeat: no-repeat; width: 181px; height:36px;}
#page .colRight h2.anfahrt { background-image: url('../imgs/headlines/adresseanfahrt.png'); background-repeat: no-repeat; width: 299px; height: 28px;}
#page .colRight h2.impressum { background-image: url('../imgs/headlines/impressum-rechts.png'); background-repeat: no-repeat; width: 181px; height: 33px;}

#page .colRight form { width: 80%; }
#page .colRight form .control { float: left; margin-bottom: 12px; }
#page .colRight form label { font-size: 12px; font-family: "Helvetica", Arial, sans-serif; display: block; font-weight: bold; margin: 0 0 2px 0; color: #B70D30; }  
#page .colRight form textarea { width: 420px; }
#page .colRight form input.betreff { width: 420px; }
#page .colRight form input.name { margin-right: 10px; }
#page .colRight form .button { background-color: #B70D30; color: #ffffff; font-weight: bold; font-style: normal; font-size: 12px; border:1px solid #B70D30; -moz-border-radius:5px; -khtml-border-radius:5px; font-weight: bold; cursor: pointer; padding: 1px 6px 2px 6px; }

#page .colRight #map { width: 450px; height: 300px; margin: 0 0 18px 0;}
#page .colRight #map div { font-family: Arial, sans-serif; font-size: 12px; line-height: 18px;}
#page .colRight .adresse b { color: #B60B30;}
#page .colRight .adresse { margin: 0 0 32px 0;}

#page #leistungen {}
#page #leistungen img, #page #referenzen-content p img { margin: 0 3px 0 3px;}
#page #referenzen-content p img { margin: 0px;}

#page #referenzen { width: 450px; height: 100%; position: relative;}
#page #referenzen img { position: relative; width: auto; height: auto; margin: 0 0 12px 0;}
#page #referenzen p { font-size: 12px;}
#page #referenzen h3 { margin: 0px; color: #222222; margin: 0 0 18px 0;}
#page #referenzen h4 { font-size: 13px; margin: -16px 0 18px 0; }

#page #referenzen .portfolio-navigation { margin: -12px 0 32px 0; }
#page #referenzen .portfolio-navigation li { display: inline; margin-right: 5px;}
#page #referenzen .portfolio-navigation li a { font-style: normal; font-weight: bold; font-size: 16px; padding: 0 4px 0 4px; -moz-border-radius:5px; -khtml-border-radius:5px; border: 1px solid #ffffff;}
#page #referenzen .portfolio-navigation li a.active { color: #ffffff; border:1px solid #B70D30; background-color: #B70D30;  }
#page #referenzen .portfolio-navigation li a:hover { color: #ffffff; border:1px solid #B70D30; background-color: #B70D30;  }
#page #referenzen #referenzen-content { height: 372px; margin-bottom: 20px;}

#page #referenzen #referenz-bilder { text-align: center; margin: 0 0 12px 0;}
#page #referenzen #referenz-bilder img { margin: 0px; padding: 0px;}
#page #referenzen #referenz-bilder .thumbs { width: 102px; float: right; }
#page #referenzen #referenz-bilder .thumbs a { display: block; cursor: pointer; margin-bottom: 10px;}
#page #referenzen #referenz-bilder .thumbs a.last { margin-bottom: 0px;}
#page #referenzen #referenz-bilder .stage { float: left; }

#page #referenzen #referenzen-galerie { width: 450px; margin: 0px; display:block; position: absolute; padding:0px; bottom: 0; left: 0;} 
#page #referenzen #referenzen-galerie-inner { position:relative; overflow:hidden; width: 420px; margin: 0 0 0 25px; padding:0px; height: 80px;}
#page #referenzen #referenzen-galerie-items { display:block; position:relative; }
#page #referenzen #referenzen-galerie-items .slide-element {display:block; position:relative; float:left; margin:0 0 0 0; font-size:11px; width:136px; text-align:center; color:#FFFFFF; overflow: hidden;}
#page #referenzen #referenzen-galerie-items .slide-element a { display: block; padding:0px; margin: 0px; clear:both; white-space: nowrap;}
#page #referenzen #referenzen-galerie .SlideItMoo_forward,
#page #referenzen #referenzen-galerie .SlideItMoo_back{	display:block; position:absolute; cursor:pointer; width:25px; height: 25px; bottom:27px; right:0px; background:url(../imgs/portfolio/right.png) no-repeat center; }
#page #referenzen #referenzen-galerie .SlideItMoo_back { left:0px; background:url(../imgs/portfolio/left.png) no-repeat center;  }

#page #referenzen .video { margin: 0 0 12px 0; background-image: url('../imgs/portfolio/shadowbottom.png'); background-repeat: no-repeat; background-position: 15px 246px; padding-bottom: 5px; }

#page .content { position: absolute; left: 50%; z-index: 9; top: 15%; width: 360px; height: 50%;}
#page .content .content-box { padding: 60px 0 0 0; background-image: url('../imgs/content-trans.png'); height: 561px; background-repeat: no-repeat; background-position: top left; position: relative; }  
#page .content .content-box h2 { font-size: 32px; background-position: top left; background-repeat:no-repeat; width: 300px; margin: 0 0 16px 0; }
#page .content .content-box h2 span { visibility: hidden; }
#page .content .content-box .close { position: absolute; top: 25px; right: 60px;}

#page .content .content-box h2.leistungen { background-image: url('../imgs/headlines/leistungen.png');}
#page .content .content-box h2.referenzen { background-image: url('../imgs/headlines/referenzen.png');} 
#page .content .content-box h2.kontakt { background-image: url('../imgs/headlines/kontakt.png');} 
#page .content .content-box h2.was { background-image: url('../imgs/headlines/was.png'); background-repeat: no-repeat; width: 300px;} 
#page .content .content-box h2.soll { background-image: url('../imgs/headlines/soll.png'); background-repeat: no-repeat; width: 300px; height: 60px;}
#page .content .content-box h2.das { background-image: url('../imgs/headlines/das.png'); background-repeat: no-repeat; width: 180px;}
#page .content .content-box h2.denn { background-image: url('../imgs/headlines/denn.png'); background-repeat: no-repeat; width: 180px;}
#page .content .content-box h2.kontakt { background-image: url('../imgs/headlines/kontakt.png'); background-repeat: no-repeat; width: 300px;}

#page .content .content-box h2, 
#page .content .content-box img { margin-left: 20px; margin-bottom: 18px;}
#page .content .content-box p { margin-left: 20px; margin-right: 80px; margin-bottom: 20px;}
#page .content .content-box p.more {margin: 0px; }
#page .content .content-box p.more a { 	background-color: #B70D30; color: #ffffff; font-weight: bold; font-style: normal; margin-left: 20px; font-size: 12px; padding: 1px 5px;
										border:1px solid #B70D30; -moz-border-radius:5px; -khtml-border-radius:5px; }
								
#page #leistungen li, #page #leistungen h3, #page #leistungen h4 { display: inline;}

#page .nav { text-align: right; position: absolute; top: 50px; right: 20px; }
#page .nav li { margin: -35px 0 0 0; }
#page .nav li a { text-decoration: none;}

#page .nav li.was { margin-top: 0px; }
#page .nav li.soll a {  }
#page .nav li.das a { }
#page .nav li.denn a {  }
#page .nav li.kontakt a {  }

#page #pic-was, #page #pic-soll, #page #pic-das, #page #pic-denn, #page #pic-kontakt { opacity: 0.0;}
#page #pic-start { opacity: 1.0; }

#bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 12; background-color: #ffffff; height: 30px; border-bottom: 0px solid #B70D30;}
#bottom p { color: #B70D30; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 6px 8px; font-weight: normal; position: absolute; bottom: 0; left: 0; z-index: 13;}
#bottom ul { font-weight: normal; position: absolute; z-index: 13; bottom: 2px; left: 4px;}
#bottom ul li { display: inline; color: #B70D30; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 0px 0px; font-weight: normal;}

#bottom ul.quicklinks { bottom: 3px; right: 8px; width: 50%; left: auto; text-align: right;}
#bottom a { font-weight: bold; color: #B70D30; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; text-decoration: none; padding: 1px 6px 1px 6px; }
#bottom a img { opacity: 0.8;}
#bottom a:hover img { opacity: 1.0;}