body { background:url(hintergrund.gif) no-repeat center 5px; }

#container { padding-bottom:20px; }
#main #contentfooter .bottom { margin-bottom:-20px; }

/* hero */
#main #hero { margin:5px 10px 0; padding-top:1px; height:70px; }

#main #hero img.right { position:absolute; top:0; right:-5px; margin:0; z-index:3; }
#main #hero div.intro { position:relative; width:300px; height:93px; margin-bottom:2.1em; }
#main #hero div.intro p.mac { width: 286px;}

#main #hero div.intro div#popupbutton { position:absolute; display:block; left: 212px; right:1px; top:72px; width:105px; height:13px; }
#main #hero div.intro div#popupbutton.mac { position:absolute; display:block; left: 148px; right:1px; top:72px; width:105px; height:13px; }
#main #hero div.intro div#popupbutton a.watch { display:block; width:105px; height:13px;  }
#main #hero div.intro div#popupbutton .description { display:none; }
#main #hero a.downloadbtn { display:block; width:209px; padding-top:24px; margin-left:-6px; text-indent:-9999px; background:url(hero_downloadbtn.gif) no-repeat; position:relative; }
#main #hero a.downloadbtn span { display:block; height:14px; text-indent:-9999px; background:url(hero_downloadbtn_gratis.gif) no-repeat; }
#main #hero a.bluearrow { padding-right:-10px; background:url(pfeilblau.gif) no-repeat 100% .45em; position: relative;}


#main #intro { position:relative; width:915px; margin-left:10px; margin-bottom:20px; z-index:5; }
#main #intro div.column { width:446px; }

/***** box *****/
#main h3.love { width:249px; height:38px; margin:0 0 1em 13px; text-indent:-9999px; background:url(h3_cherif.gif) no-repeat; }

#main .box { margin-right:-20px; margin-left:-20px; z-index:100; position:relative; }
#main .box .grid2colc .column.first { width:316px; background:url(swapnav_bg.gif) repeat-y left; }
#main .box .grid2colc .column.last { width:590px; }
#main .box .grid2colc .column.last .swapcontent { margin-top:32px; }
#main .box .grid2colc .grid2col .column.first, #main .box .grid2colc .grid3col .column.first { background:none; }
#main .box .grid2colc .grid2col .column { width:47.8%; }
#main .box .grid2colc .grid3col .column { width:31%; }

#main .box div.bottomleft { min-height:20em; _height:20em; }

/* swapper */
#main ol.swapper { padding:0 0 .1em; margin:0; color:#4b4c4f; font-size:14px; line-height:1.4em; position:relative; }
#main ol.swapper li { margin:0 0 -.2em 0; padding:.4em 10px .4em 19px; cursor:pointer; list-style:none; background:url(swapnav.gif) no-repeat left bottom; *margin-top:-1px; }
#main ol.swapper li:hover { color:#222; }
#main ol.swapper li.last { background:none; }
#main ol.swapper li.active { color:#3783bc; cursor:default; background:url(swapnav_active.gif) no-repeat left center; }
#main ol.swapper li.twodigit { padding-left:10px; }

#main img.watch { margin-left:1px; cursor:pointer; }

#main .swapcontent { display:none; }
#main .swapcontent img { position:relative; }
#main .swapcontent.active, #main.hasjs .swapcontent { display:block; }

#main .swapcontent p.cherif, #main .swapcontent ol.cherif { margin-bottom:0; }

/* performance graphs */
#main .performancegraph { display:none; }
#main .performancegraph.active { display:block; }
#main ul.performancenav { clear:both; padding:8px 0 0; }
#main ul.performancenav li { float:left; width:180px; text-align:center; color:#00a0e2; font-size:11px; cursor:pointer; font-weight:normal; padding-top:8px; }
#main ul.performancenav li.column.first { margin-left:25px; }
#main ul.performancenav li.column.last { margin-right:5px; width:180px !important; float:right !important; }
#main ul.performancenav li.active { color:#000; background:url(performance_pfeil001.gif) no-repeat center top !important; }

#main .performancegraph { margin-bottom:0; }
#main .performancegraph .bar { clear:both; height:42px; }
#main .performancegraph .bar1, 
#main .performancegraph .bar2, 
#main .performancegraph .bar3, 
#main .performancegraph .bar4 { display:block; position:relative; float:right; padding:0 10px; height:2.4em; line-height:2.4em; text-align:right; color:#fff; font-size:14px; font-weight:normal; }
#main .performancegraph .bar1 { background:#4893cd url(sidegraph_bar1bg.gif) repeat-x; }
#main .performancegraph .bar2 { background:#e68829 url(sidegraph_bar2bg.gif) repeat-x; }
#main .performancegraph .bar3 { background:#b1b319 url(sidegraph_bar3bg.gif) repeat-x; }
#main .performancegraph .bar4 { background:#932e28 url(sidegraph_bar4bg.gif) repeat-x; }
#main .performancegraph .bar1 span,
#main .performancegraph .bar2 span,
#main .performancegraph .bar3 span,
#main .performancegraph .bar4 span { float:left; }
#main .performancegraph span.bar1.cherif { font-size:1em !important; line-height:3em; color:#4893cd; background:#fff; }
#main .performancegraph img.right { margin:0 -10px 0 10px; position:relative; }

/* contentfooter */
#main #contentfooter { margin:0 -20px; padding:0; color:#4b4c4f; font-size:11px; line-height:1.3em; background:url(contentfooter_bg.gif) repeat-y; position:relative; }
#main #contentfooter .top { padding-top:8px; background:url(contentfooter_bgtop.gif) no-repeat center top; }
#main #contentfooter .gradient { background:url(contentfooter_bggradient.gif) no-repeat center bottom; }
#main #contentfooter .bottom { padding:1.2em 20px 3px; background:url(contentfooter_bgbottom.gif) no-repeat 50% 100%; }

#main #contentfooter .grid3col .column { width:30%; margin-left:5.8%; }

#main #contentfooter div h3 { margin-bottom:.3em; }
#main #contentfooter div p { margin-bottom:0; }
#main #contentfooter div img.right { margin-top:-1em; margin-bottom:0; position:relative; }

#main #contentfooter div.leopard h3 a { display:block; width:94px; height:16px; text-indent:-9999px; background:url(contentfooter_h3_bild01.gif) no-repeat; }
#main #contentfooter div.leopard h3.mac a { display:block; width:130px; height:16px; text-indent:-9999px; background:url(contentfooter_h3cherif_bild01.gif) no-repeat; }
#main #contentfooter div.iphone h3 a { display:block; width:137px; height:16px; text-indent:-9999px; background:url(contentfooter_h3_iphone.gif) no-repeat; }
#main #contentfooter div.webdev h3 a { display:block; width:110px; height:16px; text-indent:-9999px; background:url(contentfooter_h3_bild02.gif) no-repeat; }

/* popup */
#popup { position:absolute; width:980px; height:613px; top:0; left:-1122px; padding:65px 71px; margin:-94px -71px; cursor:pointer; z-index:-10; }

#popup.isanim .top, #popup.isanim .topleft, #popup.isanim .topright, #popup.isanim .left, #popup.isanim .right, #popup.isanim .bottom, #popup.isanim .bottomleft, #popup.isanim .bottomright { *background:none; }
#popup .top, #popup .topleft, #popup .topright { float:left; height:65px; margin-top:-65px; }
#popup .topleft { clear:both; width:71px; margin-left:-71px; background:url(popup_bgtopleft.png) no-repeat right bottom; }
#popup .topright { float:right; width:71px; margin-right:-71px; background:url(popup_bgtopright.png) no-repeat left bottom; }
#popup .top { width:100%; background:url(popup_bgtop.png) repeat-x center bottom; }

#popup .left, #popup .right { width:71px; height:100%; }
#popup .left { clear:both; float:left; margin-left:-71px; background:url(popup_bgleft.png) repeat-y right 0; }
#popup .right { float:right; margin-right:-71px; background:url(popup_bgright.png) repeat-y left 0; }

#popup .middle { float:left; position:relative; width:100%; height:100%; margin:0; background:transparent url(popup_movie_bg.png) no-repeat; cursor:default; }
#popup .middle .description { display:none; position:absolute; width:230px; left:25px; top:75px; font-size:12px !important; }
#popup .middle .description img { width:auto !important; height:auto !important; }
#popup .middle .description p { margin-top:.6em; color:#4b4c4f; } 
#popup .middle .description p.cherif { line-height: 1.4em; color: #a1a5a9; } 
#popup .middle .description p.cherif a { color: #a1a5a9; font-weight: normal; text-decoration: underline; color: #a1a5a9; cursor: pointer; } 
#popup .middle .description p.cherif a:hover { color: #76797c; } 
#popup .middle .description a.downloadbtn { display:block; width:209px; padding-top:24px; margin-top:2em; margin-left:-6px; text-indent:-9999px; background:url(hero_downloadbtn.gif) no-repeat; cursor:pointer; }
#popup .middle .description a.downloadbtn span { display:block; height:14px; text-indent:-9999px; background:url(hero_downloadbtn_gratis.gif) no-repeat; margin-bottom: 3em; }

#popup .middle .movie { display:none; width:672px; height:416px; padding-top:25px; margin-left:283px; }
#popup .middle .movie img.getquicktime { height:auto !important; width:auto !important; cursor:pointer; }
#popup .middle .moviecontroller { display:none; position:relative; width:672px; padding:0; margin:10px 0 0 283px; }
#popup .middle .moviecontroller div.control { width:10px; height:10px; margin-top:1px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(popup_filmknopf.gif) left top no-repeat; }
#popup .middle .moviecontroller div.control.pause { background-position:left -10px; }
#popup .middle .moviecontroller div.sliderPanel { position:absolute; top:0; left:16px; height:12px; width:656px; background:url(popup_filmleiste.gif) no-repeat; }
#popup .middle .moviecontroller div.sliderPanel div.track { position:absolute; left:0; width:656px; height:12px; text-align:left; }
#popup .middle .moviecontroller div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:12px; }
#popup .middle .moviecontroller div.sliderPanel div.track div.trackProgress { position:absolute; height:12px; }
#popup .middle .moviecontroller div.sliderPanel div.track div.playHead { position:absolute; top:0; margin-left:0; width:13px; height:12px; background:url(popup_filmzeiger.gif) no-repeat; cursor:pointer; }
#popup.popped .middle .description, #popup.popped .middle .description .description, #popup.popped .middle .movie, #popup.popped .middle .moviecontroller { display:block; }

#popup .bottom, #popup .bottomleft, #popup .bottomright { float:left; height:65px; margin-bottom:-65px; }
#popup .bottomleft { clear:both; width:71px; margin-left:-71px; background:url(popup_bgbottomleft.png) no-repeat right top; }
#popup .bottomright { float:right; width:71px; margin-right:-71px; background:url(popup_bgbottomright.png) no-repeat left top; }
#popup .bottom { width:100%; background:url(popup_bgbottom.png) repeat-x center top; }

#popup .top, #popup .topleft, #popup .topright, #popup .left, #popup .right, #popup .bottom, #popup .bottomleft, #popup .bottomright { _background:none; }

#popup a { color:#707070; font-size:11px; font-weight:bold; text-decoration:none; outline:none; }
#popup a:hover { text-decoration:underline; }
#popup a.close { position:relative; display:block; width:28px; height:28px; margin:53px 0 -53px -14px; text-indent:-9999px; background:url(fensterzu.png) no-repeat; z-index:999; behavior:url(/global/scripts/lib/iepngfix.htc); }
#popup.isanim a.close { display:none; }
#popup a.previous { float:left; padding:3px 0 0 27px; }
#popup a.next { float:right; padding:3px 27px 0 0; }


@media print {
	.sidegraph .bar1 { border:1px solid #4893cd; }
	.sidegraph .bar2 { border:1px solid #e68829; }
	.sidegraph .bar3 { border:1px solid #b1b319; }
	.sidegraph .bar4 { border:1px solid #932e28; }
}