*,html{margin: 0; padding: 0; font-family: Helvetica, Arial, Verdana, sans-serif;}
body{ width: 100%; height: 100%; }
body#gray{ background:#6b6b6b url(../images/bg.png) fixed no-repeat -20px -100px; }
body#gray.wm{ background:#000 url(../images/bg.png) fixed no-repeat -20px -100px; }
body#clients{ background: url(../images/evenmedia_kunden.gif) repeat;}
body#clients #footer a{color: #555;}
body#service{ background: url(../images/three_hands.gif) bottom right no-repeat fixed;}
body#service #footer a{color: #555;}
body#software{ background: url(../images/one_hand.gif) bottom right no-repeat fixed;}
body#software #footer a{color: #555;}
body#contact #footer a{color: #555;}
fb{z-index: 1000;}
a { outline: none; }
#rambo{position: absolute; right: 25px; top: -56px;}
.clear { width: 0; height: 0; overflow: hidden; clear: both; }

@font-face { font-family: "Little Days", Courier, Monaco, monospace; src:local("little_days") url(font/little_days.ttf) format("TrueType"); font-style:normal;  }
h2{ display: block; height: 60px; width: 450px; text-indent: -9999px; margin: -25px 0 0 0;}
h3{font-weight: bold; font-size: 14px; display: block; margin: 0 0 15px 0; padding: 0; color: #333; line-height: 1.4em;}
h3 strong{ color: #00aeef;  }
.small{ font-size: }
.slogan{position: absolute; right: 50px; margin: 50px 0 0 0;}

/* Headlines */
h2#index_headline{ background: url(../images/headline/hallo.png) no-repeat left bottom; }
h2#neuheiten_headline{ background: url(../images/headline/neuheiten.png) no-repeat left bottom; }
h2#agentur_headline{ background: url(../images/headline/wirsind.png) no-repeat left bottom; }

div#headline_fix{z-index: 2000;}
h2#software_headline{ background: url(../images/headline/software.png) no-repeat left bottom;}
h2#design_headline{ background: url(../images/headline/designnachmass.png) no-repeat left bottom; }
h2#fotografie_headline{ background: url(../images/headline/fotoundco.png) no-repeat left bottom; }
h2#videoproduktion_headline{ background: url(../images/headline/videoundco.png) no-repeat left bottom; }

h2#hosting_headline{ background: url(../images/headline/wirwissenweiter.png) no-repeat left bottom; }
h2#leistungen_headline{ background: url(../images/headline/evenmedia.png) no-repeat left bottom; }
h2#kunden_headline{ background: url(../images/headline/auswahl2010.png) no-repeat left bottom; }
h2#jobs_headline{ background: url(../images/headline/waswirsuchen.png) no-repeat left bottom; }
h2#kontakt_headline{ background: url(../images/headline/kontakt.png) no-repeat left bottom; }
h2#impressum_headline{ background: url(../images/headline/impressum.png) no-repeat left bottom; }
 
#header{position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: url(../images/80transparent.png) repeat; z-index: 1000;}
#header h1{ position: absolute; left: 50px; top:0; width: 285px; height: 50px; background: url(../images/evenmedia_logo.png) no-repeat left center;}
#header h1 span#text{ display: block; font-size: 11px; color: #6c6c6c; font-weight: normal; position: absolute; right: 0; top: 20px;}
#header h1 span#logo{text-indent: -9999px; display: block;}

#nav, #nav ul { padding: 0 25px 0 0; margin:0; list-style: none; line-height: 1; float: right; line-height: 50px; z-index: 1000; }
#nav a { display: block; color: #fff; color: #fff; text-decoration: none; font-size: 12px; font-weight: normal;  }
#nav a:hover{color: #666; /*background: url(../images/arrow_cyan.gif) no-repeat bottom; */}
#nav a.active{color: #00aeef;}
#nav li { float: left; margin: 0 25px 0 0; }
#nav li ul { position: absolute; background-color: #00aeef;line-height: 1.6em; margin: 0; padding: 0; left: -999em; }
#nav li ul.cyan{background-color: #00aeef;}
#nav li ul.magenta{background-color: #ec008c;}
#nav li ul.green{background-color: #339900;}
#nav li ul li{display: block; float: none; margin: 0; padding: 0;}
#nav li ul li a{font-size: 12px; display: block; padding: 0 0 0 15px; height: 30px; line-height: 30px; width: 200px;}
#nav li ul li a:hover, #nav li ul li a.active{color: #fff; background: url(../images/10transparent.png) repeat;}
#nav li:hover ul, #nav li.sfhover ul { left: auto; }

div#content { position: absolute; top:30%; left:50px; z-index: 500; width: 450px;}
div#content .text{ background:#fff;  padding: 25px;}
div#content p, #content ol{line-height: 1.7em; font-size: 12px; color: #666; padding: 0 0 15px 0; }
#content ol { padding-left: 30px; }
div#content p a, div#content ol a{color: #000;}
div#content .more{display: block; background: url(../images/80transparent.png) repeat; color: #00aeef; width: 50%; float: right; font-size:12px; height: 30px; line-height: 30px; text-decoration: none; text-align: right; position: relative; }
div#content .more .more_text{padding: 0 25px 0 0;}
div#content .more:hover .more_text{text-decoration: underline;}
div#content .arrow{background: url(../images/arrow_black.gif) no-repeat; width: 15px; height: 8px; display: block; position: absolute; top:-8px; left: 25px;}
div#content table{ font-size: 12px; color: #666; padding: 0 0 15px 0; }
div#content table tr td{line-height: 1.6em;}
div#content table tr td strong{color: #00aeef;}
div#content table tr td.text{font-size: 11px; padding: 0;}
div#content .text ul{padding: 0 0 15px 15px; font-size: 12px;}
div#content .text ul li{color: #666; line-height: 1.6em;}
div.software .text ul li strong{color: #00aeef;}
div.software .more span{color: #00aeef;}
div.design .text ul li strong{color: #ec008c;}
div.design .more span{color: #ec008c;}
div.beratung .text ul li strong{color: #339900;}
div.beratung .more span{color: #339900;}

div#content_dark { position: absolute; top:30%; left:50px; z-index: 500; width: 450px; }
div#content_dark .text{ background: url(../images/80transparent.png) repeat; padding: 25px;}
div#content_dark h2{color: #fff;}
div#content_dark p{line-height: 1.7em; font-size: 12px; color: #ccc; padding: 0 0 15px 0; }
div#content_dark p a{color: #ccc;}
div#content_dark ul{padding: 0 0 0 25px; font-size: 12px; color: #ccc;}
div#content_dark li{ color: #fff; line-height: 1.6em; }
div#content_dark .big{font-size: 30px; font-weight: normal;}
div#content_dark .more{display: block; background: url(../images/10transparent.png) repeat; color: #00aeef; width: 50%; float: right; font-size:12px; height: 30px; line-height: 30px; text-decoration: none; text-align: right; position: relative; }
div#content_dark .more .more_text{padding: 0 25px 0 0;}
div#content_dark .more:hover .more_text{text-decoration: underline;}
div#content_dark .arrow{background: url(../images/arrow_gray.gif) no-repeat; width: 15px; height: 8px; display: block; position: absolute; top:-8px; left: 25px;}
div#content_dark table{ font-size: 12px; color: #ccc; padding: 0 0 15px 0; }
div#content_dark table tr td{line-height: 1.6em; vertical-align: top;}
div#content_dark table tr td strong{margin: 0; padding: 0;}
div#content_dark table tr td a{color: #fff;}
#service_table tr td{ padding-bottom:  25px;}
div#content_dark #service_table{margin: 15px 0 0 0; padding: 0; }

div#subcontent { position: absolute; top:30%; left:525px; z-index: 500; padding: 33px 0 0 0; }

.box75{width: 75px; display: block; float: left; margin: 0 25px 25px 0; position: relative; background: url(../images/80transparent.png) repeat; height: 75px;}
.box75.transparent{width: 75px; display: block; float: left; margin: 0 25px 25px 0; position: relative; background: none; height: 75px;}
.box75 img{border: 0;}
.box75 a{display: block; width: 75px; height: 75px; border-bottom: 0 solid transparent; text-decoration: none;}
.box75 p{color: #fff; padding: 10px; font-size: 11px; line-height: 1.4em;}
.box75_text{display: none; padding: 10px 15px 10px 15px; position: absolute; top: 75px; left: 0; width: 245px; background: url(../images/80transparent.png) repeat; font-size: 11px; color: #fff; line-height: 1.6em; color: #999; text-decoration: none; z-index: 900;}
.box75_text  strong{color: #00aeef;}
.box75 a:hover .box75_text{ display: block; }
.box75_text .arrow{background: url(../images/arrow_black.gif) no-repeat; width: 15px; height: 8px; display: block; position: absolute; top:-8px; left: 30px;}
.design .box75 a{color: #ec008c;}
.software .box75 a{color: #00aeef;}
.beratung .box75 a{color: #339900;}


.box75_text_left{display: none; padding: 10px 15px 10px 15px; position: absolute; top: 75px; left: -200px; width: 245px; background: url(../images/80transparent.png) repeat; font-size: 11px; color: #fff; line-height: 1.6em; color: #999; text-decoration: none; z-index: 900;}
.box75_text_left strong{color: #00aeef;}
.box75 a:hover .box75_text_left{ display: block; }
.box75_text_left .arrow{background: url(../images/arrow_black.gif) no-repeat; width: 15px; height: 8px; display: block; position: absolute; top:-8px; right: 30px;}

.box175{width: 175px; height: 175px; display: block; float: left; margin: 0 25px 25px 0; position: relative; background: url(../images/80transparent.png) repeat; }
.box175 img{border: 0;}
.box175 p{color: #999; font-size: 11px; padding: 10px 15px 0 15px; line-height: 1.4em;}
.box175 p strong{color: #fff;}
.box175 p a{text-decoration: none;}
.box175 .open_project{display: block; background: #fff; color: #00aeef; width: 160px; float: right; font-size:11px; height: 30px; line-height: 30px; text-decoration: none; text-align: right; position: absolute; bottom: 0;  padding: 0 15px 0 0;}
.pager{list-style: none; font-size: 11px; color: #fff; padding: 0; width: 175px; float: left;}
.pager li{ float: left; }
.pager li a{ color: #999; text-decoration: none; display: block; float: left; width: 25px; height: 25px; line-height: 25px; text-align: center;background: #fff; }
.pager li a:hover{ background: #ec008c; color: #fff;}
.pager li a.active{ background: #00aeef; color: #fff;}

.design .box175 .open_project{color: #ec008c;}
.design .box175 a{color: #ec008c;}
.software .box175 .open_project{color: #00aeef;}
.beratung .box175 .open_project{color: #339900;}
.FBConnectButton{margin: 6px 0 0 0;}

.box175 .open_project .arrow{background: url(../images/arrow_white.gif) no-repeat; width: 15px; height: 8px; display: block; position: absolute; top:-8px; left: 25px; text-indent: -999em;}
.box175 .label_new{background: #cc0000; position: absolute; top: -10px; right: 15px; height: 20px; line-height: 20px; width: 35px; display: block; color: #fff; font-size: 11px; font-weight: bold; text-align: center; }

.udid#content ol li { padding: 5px 0; }

/* specials */
#wappen{width: 280px; height: 300px; background: url(../images/wappen_curve.png) no-repeat; text-indent: -9999px; position: fixed; top: 50%; left: 50%; margin: -120px 0 0 -140px; }
#wappen_dark{width: 280px; height: 300px; background: url(../images/em_wappen_transparent.png) no-repeat; text-indent: -9999px; position: fixed; top: 50%; left: 50%; margin: -120px 0 0 -140px; }
img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 1; }
@media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } }

/* switch colors */
.cyanBG { background-color: #00aeef; }
.greenBG { background-color: #339900; }
.magentaBG { background-color: #ec008c; }
.cyanTXT { color: #00aeef; }
.greenTXT { color: #339900; }
.magentaTXT { color: #ec008c; }
.magenta{ color: #ec008c; }
.cyan{color: #00aeef;}
.green{color: #339900;}

#footer{position: fixed; bottom: 25px; right: 25px; z-index: 99999; list-style: none;}
#footer li{float: left; font-size: 12px; color: #fff; margin: 0 25px 0 0;}
#footer li a{color: #fff; text-decoration: none;}
#footer li a:hover{color: #ccc;}

iframe{z-index: 0; display: block; position: absolute;}

/* alert  */ 
.alert{background-color:#00aeef; display: block; padding: 15px 25px 15px 25px;}
#content .alert p{margin: 0; padding-bottom: 0; color: #fff; font-weight: bold;}
#content .alert p a{color: #fff;}

code { font: 12px "Courier New", Courier; }

/* Erwin */
.erwinContainer{ width:800px; height:800px; display:block; position:fixed; top:50%; left:50%; margin:-400px 0 0 -400px;}
#erwin01{background:url(../images/scans/01.jpg);} #erwin02{background:url(../images/scans/02.jpg);} 
#erwin03{background:url(../images/scans/03.jpg);} #erwin04{background:url(../images/scans/04.jpg);}

/* +request */
#overlay { background: url(../images/requestOverlay.png); background: rgba(0,0,0,.4); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; display: none; }
#request { padding: 35px 40px; width: 790px; margin: 60px auto 0; background: #000; position: relative; z-index: 999999; color: #999; font-size: 12px; -moz-box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; box-shadow: 0 0 20px #000; display: none; }
#request * { line-height: 1.6em; }
#request p { padding: 0 0 10px; }
#request h2, #request h3 { font-family: "Century Gothic", Helvetica, Arial, Verdana, sans-serif; color: #fff; text-indent: 0000; height: auto; width: auto; margin: 0; font-weight: normal; font-weight: lighter; }
#request h2 { font-size: 20px; margin: 0 0 10px; }
#request h3 { font-size: 16px; margin: 0 0 8px; }
#request input[type="text"], #request textarea { font: 12px Helvetica, Arial, Verdana, sans-serif; color: #999; padding: 5px 4px; border: 1px solid #fff; }
#request input.validation-failed, #request textarea.validation-failed { border-color: #EC008C; }
#request input[type="text"] { width: 230px; }
#request label { display: block; }
#request label:hover { color: #EC008C; cursor: pointer; }
#request .container.input { width: 240px; float: left; margin: 0 10px 10px 0; }
#request .container.input.last { margin-right: 0; }
#request .container.submit input { background: #000 url(../images/requestSubmit.png) left center no-repeat; color: #fff; font: bold 15px "Century Gothic", Helvetica, Arial, Verdana, sans-serif; border: none; cursor: pointer; padding: 0 0 0 25px; }
#request .container.submit input:hover { color: #00AEEF; }
#request textarea { width: 730px; height: 80px; }
#request ol { counter-reset: li; margin-left: 50px; }
#request ol li { position: relative; list-style: none; padding: 10px 0; clear: both; width: 740px; }
#request ol li:before { content:counter(li); counter-increment: li; position: absolute; left: -50px; background: #999; -moz-border-radius: 20px; -webkit-border-radius: 20px; -k-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; width: 30px; height: 30px; color: #fff; text-align: center; font: 16px/30px "Century Gothic", Helvetica, Arial, Verdana, sans-serif; font-weight: bold; }
#request ol li.checkbox h3 { width: 370px; float: left; }
#request ol li.checkbox .container { width: 370px; float: right; }
#request ol li.checkbox .container div { width: 120px; float: left; padding: 5px 0 0; }
#request ol li.checkbox .container div label { padding: 0 0 0 2px; display: inline; }
#request ol li.kommunikation p { position: absolute; left: 0; top: 40px; }
#request .container.submit { clear: both;  text-align: right; padding: 30px 0 0; }
body.js #overlay { cursor: pointer; }
body.js #request { position: absolute; left: 50%; top: 50%; margin: 0 0 0 -435px; }
body.js #request .container.hideLabel { position: relative; }
body.js #request .container.hideLabel label { position: absolute; left: 8px; top: 3px; cursor: text; }
#request a#closeRequest { position: absolute; top: 20px; right: 20px; color: #999; display: block; width: 28px; height: 28px; text-indent: -9999px; background: url(../images/requestClose.png) no-repeat; }
#request .submit input { padding-left: .5em; padding-right: .5em; width: auto; overflow: visible; }

.button { display: block; width: 137px; height: 137px; text-indent: -9999px;  position: absolute; }
.button1 { background: url(../images/button1.png) no-repeat; right: 200px; top: 300px; }
.button2 { background: url(../images/button2.png) no-repeat; left: 100px; top: 100px; }
.button3 { background: url(../images/button3.png) no-repeat; right: 100px; top: 100px; }