/* temporary */.content #swap .hero { position:absolute; }

#content { clear:both; position:relative; padding:0; width:980px; }
.content .tutorial h2 { display: none; }

/* lists */
.content ul,
.content ul li { margin:0; padding:0; }
.content dl dt { display:inline; float:left; font-weight:bold; }
.content dl dd { margin:0 0 18px 30px; }

/* swapper styles
------------------------*/
.content #swap { position:relative; width:980px; height:480px; background:#898c8d url(/euro/logicstudio/how-to/images/swapbg20090721.png) repeat-x; }

.content #swap .tutorial { position:absolute; width:880px; height:460px; padding:20px 50px 0; background:#898c8d url(/euro/logicstudio/how-to/images/swapbg20090721.png) repeat-x;
	border-radius: 4px 4px 0 0; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0;
}

.content #swap .featured { float:right; width:225px; margin:5px 0 0 0; display:inline; font-size:11px; line-height:1.4em; }
.content #swap .featured h2 { margin:0 0 5px 8px; font-weight:normal; font-size:13px; color:#fff; }
.content #swap .featured ul { margin-top: 5px; padding-bottom:.3em; }
.content #swap .featured ul li { padding:0 0 3px; }
.content #swap .featured ul li a { display:block; height:52px; padding:8px 10px 5px 14px; color:#fff; text-decoration:none; cursor:pointer; background:url(/euro/logicstudio/how-to/images/featured_bg20090721.png) no-repeat; _background-image:url(/euro/logicstudio/how-to/images/featured_bg20080206.gif); }
.content #swap .featured ul li a img { float:right; margin:2px 3px 5px 10px; background:#fff; }
.content #swap .featured ul li a strong { display:block; min-height:2.8em; _height:2.8em; margin-bottom:.2em; color:#fff; }
.content #swap .featured ul li a i { font-style:normal; color:#ccc; }
.content #swap .featured ul li a i.app { float:right; }
.content #swap .featured ul li a span { display:none; margin:.2em 0 0 -1px; padding-left:18px; color:#ccc; background:url(/euro/logicstudio/how-to/images/featured_nowplaying20090721.gif) no-repeat 0 50%; }
.content #swap .featured ul li a:hover { background-position:0 -65px; }
.content #swap .featured ul li a.active,
.content #swap .featured ul li a.active:hover { text-decoration:none; outline:none; cursor:default; background-position:0 -130px; }
.content #swap .featured ul li a.active i { display:none; }
.content #swap .featured ul li a.active span { display:block; }

.content #swap .movie { float:left; position:relative; width:640px; height:450px; margin:10px 0 0 0; padding-bottom:0; display:inline; }
.content #swap .movie img { position:absolute; top:0; left:0; }

.content #swap .movie .moviePanel,
.content #swap .movie .movie-loading,
.content #swap .movie .endState { width:640px; height:400px; }
.content #swap .movie .movie-loading { background-image:url(/euro/global/elements/quicktime/qt_loading640x400.gif); }
.content #swap .movie .endState { height:210px; padding-top:190px; text-align:center; }

.content #swap .movie a.controllerPanel { text-decoration:none; }
.content #swap .movie .controllerPanel { bottom:21px; }

/* click to play state */
.content #swap .clicktoplay .movie p { padding-top:175px; text-align:center; }

.content #swap .clicktoplay .featured ul li a.active { cursor:pointer; }
.content #swap .clicktoplay .featured ul li a.active i { display:block; }
.content #swap .clicktoplay .featured ul li a.active span { display:none; }

/* bottom nav
------------------------*/
.content #subnav { padding-bottom:1em; _zoom:1; }
.content #subnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.content #subnav h2 { height:36px; line-height:36px; text-indent:51px; color:#595959; font-size:15px; font-weight:normal; background:#fff url(/euro/logicstudio/how-to/images/subnav_header_bg20090721.gif) repeat-x; }
.content #subnav h3 { margin:.6em 0 .5em 26px; color:#555; font-size:17px; line-height:1.3em; }

.content #subnav .category { font-size:11px; line-height:1.3em; }
.content #subnav .category h3 { padding:10px 0 5px; margin-left:21px; }

.content #subnav .category h3.title-logicpro { padding-left:32px; background:url(/euro/logicstudio/how-to/images/logicpro_icon20090721.gif) no-repeat; }
.content #subnav .category h3.title-plugins { padding-left:54px; background:url(/euro/logicstudio/how-to/images/plugins_icon20090721.gif) no-repeat; }
.content #subnav .category h3.title-mainstage { padding-left:32px; background:url(/euro/logicstudio/how-to/images/mainstage_icon20090721.gif) no-repeat; }
.content #subnav .category h3.title-utilities { padding-left:36px; background:url(/euro/logicstudio/how-to/images/utilities_icon20090721.gif) no-repeat; }

.content #subnav .category ul { padding-bottom:1em; padding-top:0; }

.content #subnav .category ul li a { display:block; padding:1px 0 0; text-decoration:none; color:#333; }
.content #subnav .category ul li a span { padding:3px 10px 3px 22px; margin-bottom: 4px; }
.content #subnav .category ul li a,
.content #subnav .category ul li a span { display:block; border-radius:11px; -o-border-radius:11px; -khtml-border-radius:11px; -moz-border-radius:11px; -webkit-border-radius:9px; }

.content #subnav .category ul li a:hover { color:#08c; }
.content #subnav .category ul li a.visited { background:url(/euro/logicstudio/how-to/images/subnav_item_check20080206.gif) no-repeat 5px 4px; }

.content #subnav .category ul li a.active { background:#d4d4d4; }
.content #subnav .category ul li a.active span { text-decoration:none; outline:none; cursor:default; color:#000; background:#e5e5e5 url(/euro/logicstudio/how-to/images/subnav_item_play20090721.gif) no-repeat 3px 2px; }

.content #subnav .grid3col .column { margin-left:20px; }
.content #subnav .grid3col .column.first { padding-left: 30px; margin-left: 0; }
.content #subnav .grid3col .column.last { width: 29%; }