/* reset */
html,body,div,applet,object,h1,h2,h3,h4,h5,h6,p,a,em,img,ol,ul,li{margin:0;padding:0;border:0;outline:0;font-size:100%;font-family:inherit;vertical-align:baseline;}ol,ul{list-style:none;}

/* basics */
html, body { background:#000; color:#ccc; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:16px; }
a:link, a:visited { text-decoration:none; color:#999; }
a:hover, a:active { color:#fff; text-decoration:underline; }
a:focus { text-decoration:underline; color:#ccc; }
p { margin-bottom:12px; }

/* wrapper+ */
#page { width:960px; margin:0 auto; background:url(../img/background-8.png) no-repeat right top; position:relative; }
#overlay { position:absolute; z-index:0; top:0; left:0; width:960px; height:387px; background:#000; display:none; }

/* left side */
#main { width:660px; float:left; padding-left:20px; background:url(../img/gradient-8.png) no-repeat 20px 387px; z-index:1; position:relative; }
#player-wrapper { margin-top:193px; margin-bottom:12px; padding:10px; background:url(../img/on-8.png) no-repeat left top; width:640px; height:504px; text-align:center; overflow:hidden; }
body.playing #player-wrapper { background-image:url(../img/off-8.png) }
#video { display:block; background:#333; color:#666; width:640px; height:504px; }
#playlist { margin:0 0 12px 0; *height:1%; }
#playlist:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
#playlist li { float:left; width:156px; margin:0 12px 0 0; }
#playlist li.last { margin-right:0; }
#playlist h3,
#playlist p { margin-bottom:14px; }
#playlist li a.video { display:block; width:156px; height:110px; position:relative; cursor:pointer; }
#playlist li a img { filter:alpha(opacity=60); opacity:0.6; }
#playlist li a em { display:block; height:110px; width:156px; background:url(../img/thumb-32.png) no-repeat left top; text-indent:-999em; overflow:hidden; position:absolute; top:0; left:0; _background-image:url(../img/thumb-8.png); }

#playlist li.default a img,
#playlist li.hover a img,
#playlist li.loading a img,
#playlist li.playing a img { filter:alpha(opacity=100); opacity:1; }
#playlist li.hover{ color:#FFFFFF; cursor:pointer; }

#playlist li.default,
#playlist li.playing,
#playlist li.paused { color:#F78428; }

#playlist li.default a em,
#playlist li.playing a em,
#playlist li.paused a em { background-image:none; border:5px solid #F78428; height:100px; width:146px; }
#playlist li.paused a img { filter:alpha(opacity=100); opacity:1; }
#playlist li a.embed { display:block; padding-left:32px; height:14px; background:url(../img/social.gif) no-repeat; line-height:14px; }
#playlist li a.embed:link, #playlist li a.embed:visited { background-position: -4px -208px; }
#playlist li a.embed:hover, #playlist li a.embed:active { background-position: -4px -236px; }

/* right side */
#side { width:235px; float:right; padding-right:20px; z-index:1; position:relative; *padding-top:240px; }
#side h1, #side h2 { position:absolute; left:-999em; top:0; }
#side ul { padding: 12px 0; } 
#side ul.nav { border-top:0; padding:0; margin:230px 0 102px 0; height:67px; position:relative; }
#side ul.nav a { display:block; width:254px; height:29px; overflow:hidden; text-indent:-99em; position:absolute; left:-12px; background:url(../img/buttons-8.png) }
#side ul.nav a.download { background-position:left -0px; top:0; }
#side ul.nav a.download:hover { background-position:left -29px; }
#side ul.nav a.calendar { background-position:left -58px; top:37px; }
#side ul.nav a.calendar:hover { background-position:left -87px; }
#side ul.nav a.library { background-position:left -116px; top:74px; height:46px; }
#side ul.nav a.library:hover { background-position:left -162px; }

body.playing #side ul.nav a.download { background-position:left -208px; top:0; }
body.playing #side ul.nav a.download:hover { background-position:left -29px; }
body.playing #side ul.nav a.calendar { background-position:left -266px; top:37px; }
body.playing #side ul.nav a.calendar:hover { background-position:left -87px; }
body.playing #side ul.nav a.library { background-position:left -324px; top:74px; height:46px; }
body.playing #side ul.nav a.library:hover { background-position:left -162px; }

ul.links { line-height:22px; }
ul.social { line-height:34px; line-height:25px; border-top:1px dotted #4A4A4A; }
ul.social li a { display:block; padding-left:36px; height:25px; margin-bottom:10px; background:url(../img/social.gif) no-repeat; }
a.twitter:link, a.twitter:visited { background-position: 0 0; }
a.twitter:hover, a.twitter:active { background-position: 0 -105px; }
a.facebook:link, a.facebook:visited { background-position: 0 -35px; }
a.facebook:hover, a.facebook:active { background-position: 0 -140px; }
a.email:link, a.email:visited { background-position: 0 -70px; }
a.email:hover, a.email:active { background-position: 0 -175px; }
a.email span { display:none!important; }

/* footer */
#foot { clear:both; width:920px; border-top:1px solid #626262; margin-top:16px; padding:16px 20px; *height:1%; color:#7A7A7A; }
#foot:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
#foot p.links { width:40%; float:left; }
#foot p.copyright { width:60%; float:right; text-align:right; }
#foot a:link, #foot a:visited { font-weight:bold; color:#A2B4BB; }
#foot a:hover, #foot a:active { font-weight:bold; color:#fff; }






div.code { display:none; }

code { display:block; padding:1em 0;}







/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; }
#TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; }
#TB_window a:link { color: #666666; }
#TB_window a:visited { color: #666666; }
#TB_window a:hover { color: #000; }
#TB_window a:active { color: #666666; }
#TB_window a:focus { color: #666666; }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; }
.TB_overlayMacFFBGHack { background: url(../img/macFFBgHack.png) repeat; }
.TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
* html #TB_overlay { /* ie6 hack */ position: absolute;  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; }
* html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; }
#TB_caption { height:25px; padding:7px 30px 10px 25px; float:left; }
#TB_closeWindow { height:25px; padding:11px 25px 10px 0; float:right; }
#TB_closeAjaxWindow { padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; }
#TB_ajaxWindowTitle { float:left; padding:7px 0 5px 10px; margin-bottom:1px; }
#TB_title { background-color:#e8e8e8; height:27px; }
#TB_ajaxContent { clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; }
#TB_ajaxContent.TB_modal { padding:15px; }
#TB_ajaxContent p { padding:5px 0px 5px 0px; }
#TB_load { position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ }
* html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_HideSelect { z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; }
* html #TB_HideSelect { /* ie6 hack */ position: absolute;  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_iframeContent { clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; }