/* http://meyerweb.com/eric/tools/css/reset/   v2.0 | 20110126   License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1; font-size:62.5%}
ol, ul {list-style: none;}

/* For IE6 + IE7. */
li {display: list-item;}
em, i{font-style:italic;}

/* Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder. */
b, strong {font-weight: bold;}

/* For IE. http://css-tricks.com/ie-fix-bicubic-scaling-for-images */
img {color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
th, td, caption {font-weight: normal; vertical-align: top; text-align: left;}

input.hint { color: #888!important }

/* For IE9.*/
svg {overflow: hidden;}

.left {float: left;}
.right {float: right}
.center {margin:0 auto}

.clear-left {clear: left;}
.clear-right {clear: right;}
.clear {clear:both}

.margin-left-5 {margin-left:5px}
.margin-left-10 {margin-left:10px}
.margin-left-15 {margin-left:15px}
.margin-left-20 {margin-left:20px}
.margin-left-30 {margin-left:30px}
.margin-right-5 {margin-right:5px}
.margin-right-10 {margin-right:10px}
.margin-right-15 {margin-right:15px}
.margin-right-20 {margin-right:20px}
.margin-right-30 {margin-right:30px}
.margin-top-5 {margin-top:5px}
.margin-top-10 {margin-top:10px}
.margin-top-15 {margin-top:15px}
.margin-top-20 {margin-top:20px}
.margin-top-25 {margin-top:25px}
.margin-bottom-5 {margin-bottom:5px}
.margin-bottom-10 {margin-bottom:10px}
.margin-bottom-15 {margin-bottom:15px}
.margin-bottom-20 {margin-bottom:20px}



/*------------------------------------------------------------------------------
OVERALL LAYOUT
------------------------------------------------------------------------------*/
html {margin-bottom:0.1pt;}
body {font-size: 0.625em; line-height:1.125em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, Arial, sans-serif; color: #3166d6; background: #f6fbff;}

#container {width:962px; margin:35px auto;}

/*------------------------------------------------------------------------------
HEADER
------------------------------------------------------------------------------*/
#header {width:100%; height:44px; position: relative; background: #efede1}
#header div#header-left {float:left; width:50%; height:44px; background: #336699}
#header div#header-center {background: url('../images/header.jpg') center center no-repeat #336699; width:1020px; height: 44px; margin: 0 auto; z-index: 2; position: relative;}

#header div#header-center-cms {background: url('../images/cms-header.jpg') center center no-repeat #336699; width:1020px; height: 44px; margin: 0 auto; z-index: 2; position: relative;}

/*------------------------------------------------------------------------------
FOOTER
------------------------------------------------------------------------------*/
#footer {clear:both; width:100%; height:44px;  background: url('../images/footer.jpg') center center no-repeat #374395;}

/*------------------------------------------------------------------------------
MAIN CONTENT
------------------------------------------------------------------------------*/
#container div {}
#container a {text-decoration: none}
#container a:hover {text-decoration: underline}

/*------------------------------------------------------------------------------
RECOMMENDED
------------------------------------------------------------------------------*/
#recommended {background-color: #fff; width:215px; height:412px; position:relative; margin-top:12px; border:1px solid #dadada; border-right: 0px; -moz-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px; float:left;}
#recommended-header {width:176px; height:36px; position: absolute; top:-20px; left:20px; background: url('../images/recommended.png') no-repeat;}

#recommended-container { height:380px; width:210px; margin-top:20px; position: relative; }
#recommended-fade {position: absolute; bottom: 0px; background: url('../images/fade.png') bottom center; background-color: transparent!important; width:215px; height:45px}
#recommended-fade-top {position: absolute; top: 0px; background: url('../images/fade.png') bottom center; background-color: transparent!important; width:215px; height:45px}
#recommended-container .archive-video {width:165px; float: left; padding-bottom:15px; border-bottom:1px solid #c2c2c2; margin:0px 20px 0 20px; word-wrap: break-word;}
#recommended-container .archive-video a {display:block; font-size: 1.4em; line-height:1.2em; color:#3166d6; margin:10px 0; cursor: pointer;}
#recommended-container .archive-video h2 {font-size: 1.4em; line-height:1.4em; color:#8f8f8f; background: url('../images/icons/clock.png') left center no-repeat; padding-left:25px; font-weight: normal}

/*------------------------------------------------------------------------------
VIDEO PLAYER
------------------------------------------------------------------------------*/
#video {position: relative;}
#player {background-color: #fff; width:743px; height:433px; border:1px solid #dadada; -moz-border-radius:5px; border-radius:5px; float:left;}
#player-preview {background-color: #fff; width:743px; height:425px; border:1px solid #dadada; -moz-border-radius:5px; border-radius:5px; float:left; padding-top:0px}
#embed {margin:15px 11px}

/*------------------------------------------------------------------------------
ARCHIVE
------------------------------------------------------------------------------*/
#archive {background-color: #fff; margin-top:60px; margin-bottom:35px; clear: both; width:960px; position:relative; border:1px solid #dadada;  -moz-border-radius:5px; border-radius:5px; float:left}
#archive-header {display:block; width:222px; height:52px; position: absolute; top:-52px; left:369px; background: url('../images/all-videos.png') no-repeat;}

#archive div#archive-body {}

#archive-body .archive-video {width:414px; float: left; padding-bottom:15px; border-bottom:1px solid #c2c2c2; margin:33px 33px 0 33px}
#archive-body .archive-video a {font-size: 1.8em; line-height:1.2em; color:#3166d6; cursor: pointer; margin-bottom:10px}
#archive-body .archive-video a:hover {}
#archive-body .archive-video span {font-size: 1.6em; line-height:1em; color:#8f8f8f; font-weight: normal}
#archive-body .archive-video span.clock {font-size: 1.1em; line-height:1em; color:#8f8f8f;  background: url('../images/icons/clock.png') left 3px no-repeat; padding-left:25px; font-weight: normal}

#archive div#archive-nav {clear:both; height:37px; padding-top:20px}

#archive-nav a#nav-left {float:left; width:51px; height:40px; background: url('../images/buttons/more-left.png') no-repeat; cursor: pointer;}
#archive-nav a#nav-right {float:left; width:51px; height:40px; background: url('../images/buttons/more-right.png') no-repeat; cursor: pointer;}
#archive-nav #nav-bar {float:left; width:858px; height:40px; background: url('../images/nav-bar.png') no-repeat;}

#nav-buttons {margin:10px auto; float:left; overflow: hidden}
.nav-button {display:block; float:left; margin:3px 15px 0; width:16px; height:15px; cursor: pointer; background: url('../images/icons/dot.png') no-repeat;}
.nav-button.selected {background-position: 0 -15px}

/*------------------------------------------------------------------------------
BUTTONS
------------------------------------------------------------------------------*/
a.create-folder {display: block; width: 165px; height:37px; background: url('/images/buttons/create-folder.png') no-repeat; cursor: pointer;}
a.upload-files {display: block; width: 165px; height:37px; background: url('/images/buttons/upload-files.png') no-repeat; cursor: pointer;}

input.save {display: block; width: 99px!important; height:37px; background: url('/images/buttons/save.png') no-repeat; cursor: pointer; border:0px!important}
input.login {display: block; width: 102px!important; height:37px; background: url('/images/buttons/login.png') no-repeat; cursor: pointer; border:0px!important}

a.cc {display: block; width: 131px; height:27px; background: url('/images/buttons/sub-off.png') no-repeat; cursor: pointer; position: absolute; top:-26px; right:14px; background-position: 0 -27px}
a.cc-preview {top:9px; right:18px}
a.cc:hover {background-position: 0 0px}

a.cc.selected {background: url('/images/buttons/sub-on.png') no-repeat; background-position: 0 -27px;}
a.cc.selected:hover {background-position: 0 0px}

/*------------------------------------------------------------------------------
ICONS
------------------------------------------------------------------------------*/
a.folder {display: block; background: url('/images/icons/folder2.png') left center no-repeat; padding-left: 45px; line-height: 1.4em}
a.up {display: block; background: url('/images/icons/up.png') 6px center no-repeat; padding-left: 45px; line-height: 1.4em}