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

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

#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; *left:100px; right:1px; top:72px; width:105px; height:13px; overflow:visible; }
#main #hero div.intro div#popupbutton.mac { position:absolute; display:block; left: 123px; 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(../images/hero_downloadbtn20080318.gif) no-repeat; position:relative; }
#main #hero a.downloadbtn span { display:block; height:14px; text-indent:-9999px; background:url(../images/hero_downloadbtn_free20080318.gif) no-repeat; }
#main #hero a.bluearrow { padding-right:-10px; background:url(../images/arrow20070611.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:17px; margin:0 0 1em 13px; text-indent:-9999px; background:url(../images/h3_love20080318.gif) no-repeat; }

#main .box { margin-right:-20px; margin-left:-20px; z-index:100; position:relative; }
#main .box .grid2colc .column.first { width:260px; background:url(../images/swapnav_bg20070611.gif) repeat-y left; }
#main .box .grid2colc .column.last { width:580px; }
#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:40em; _height:40em; }

/* swapper */
#main ol.swapper { padding:0 0 .1em; margin:0; color:#4b4c4f; font-size:11px; line-height:23px;; position:relative; font-family:Arial, Helvetica, sans-serif;}
#main ol.swapper li { height:23px; margin:0 0 -.2em 0; padding:.4em 10px .4em 19px; cursor:pointer; list-style:none; background:url(../images/swapnav20070611.gif) no-repeat left bottom; *margin-top:-1px; font-family:Arial, Helvetica, sans-serif; }
#main ol.swapper li:hover { color:#222; font-family:Arial, Helvetica, sans-serif; }
#main ol.swapper li.last { background:none; font-family:Arial, Helvetica, sans-serif; }
#main ol.swapper li.active { color:#3783bc; cursor:default; background:url(../images/swapnav_active20070611.gif) no-repeat left center; font-family:Arial, Helvetica, sans-serif; }
#main ol.swapper li.twodigit { padding-left:10px; font-family:Arial, Helvetica, sans-serif; }

#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.sosumi, #main .swapcontent ol.sosumi { 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(../images/performance_arrow20070611.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(../images/sidegraph_bar1bg20070611.gif) repeat-x; }
#main .performancegraph .bar2 { background:#e68829 url(../images/sidegraph_bar2bg20070611.gif) repeat-x; }
#main .performancegraph .bar3 { background:#b1b319 url(../images/sidegraph_bar3bg20070611.gif) repeat-x; }
#main .performancegraph .bar4 { background:#932e28 url(../images/sidegraph_bar4bg20070611.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.sosumi { 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(../images/contentfooter_bg20070611.gif) repeat-y; position:relative; }
#main #contentfooter .top { padding-top:8px; background:url(../images/contentfooter_bgtop20070611.gif) no-repeat center top; }
#main #contentfooter .gradient { background:url(../images/contentfooter_bggradient20070611.gif) no-repeat center bottom; }
#main #contentfooter .bottom { padding:1.2em 20px 3px; background:url(../images/contentfooter_bgbottom20070611.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(../images/contentfooter_h3_leopard20080318.gif) no-repeat; }
#main #contentfooter div.leopard h3.mac a { display:block; width:130px; height:16px; text-indent:-9999px; background:url(../images/contentfooter_h3mac_leopard20080318.gif) no-repeat; }
#main #contentfooter div.iphone h3 a { display:block; width:137px; height:16px; text-indent:-9999px; background:url(../images/contentfooter_h3_webdev20070611.gif) no-repeat; }
#main #contentfooter div.webdev h3 a { display:block; width:110px; height:16px; text-indent:-9999px; background:url(../images/contentfooter_h3_iphone20070611.gif) no-repeat; }

/* overlay */

.overlaydescription h3 { margin-top: -90px; }

.overlaydescription p { margin-top:.6em; margin-right:10px; 	color:#4b4c4f; } 
.overlaydescription p.sosumi { line-height: 1.4em; color: #a1a5a9; } 
.overlaydescription p.sosumi a { color: #a1a5a9; font-weight: normal; text-decoration: underline; color: #a1a5a9; cursor: pointer; } 
.overlaydescription p.sosumi a:hover { color: #76797c; } 
.overlaydescription a.downloadbtn { display:block; width:209px; padding-top:24px; margin-top:2em; margin-left:-6px; text-indent:-9999px; background:url(../images/hero_downloadbtn20080318.gif) no-repeat; cursor:pointer; }
.overlaydescription a.downloadbtn span { display:block; height:14px; text-indent:-9999px; background:url(../images/hero_downloadbtn_free20080318.gif) no-repeat; margin-bottom: 3em; }

@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; }
}