*,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; }

@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: 360px; 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{line-height: 1.7em; font-size: 12px; color: #666; padding: 0 0 15px 0; }
div#content p 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: #555;}
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 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; }

/* 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: 400; 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;}