/*******
HOMEPAGE
*******/

.index .block {
    margin-bottom: 20px;
}

.index .form {
    margin-bottom: 20px;
}

.index .form form {
    /*padding-bottom: 20px;*/
}

.index .form .divider {
    border-top: 1px solid #b7b6b6;
    border-bottom: 1px solid #e9e8e8;
    margin: 20px 0 15px;
}

.index .form p {
    margin: 0;
    /*padding-top: 15px;*/
}

#slideshow {
    position: relative;
    width: 600px;
    height: 287px;
    margin-bottom: 7px;
}

#slideshow > div:first-child {
    display: block;
}

#slideshow > div {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    height: 287px;
    background-color: #000;
}

.slide-text {
    height: 115px;
    width: 600px;
    bottom: 0;
    left: 0;
    position: absolute;
    background: url('../images/screen.png') repeat;
    color: #FFF;
    font-size: 14px;
    display: none;
}

.slide-text > div {
    height: 85px;
    width: 560px;
    padding: 15px 20px;
    overflow: hidden;
}

.slide-text .large {
    color: #FFF;
}

#slideshow p {
    padding: 3px;
    float: left;
    width: 425px;
    margin: 0;
}

#slideshow .button {
    float: right;
    padding: 0 10px;
}

#slideshow_nav {
    width: 600px;
    text-align: center;
}

#slideshow_nav a {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    display: inline-block;
    text-indent: -9999px;
    background-color: #023e7b;
    margin: 0 2px;
    line-height: 16px;
}

#slideshow_nav .activeSlide {
    border: 3px solid #023e7b;
    background-color: #FFF;
    height: 6px;
    width: 6px;
    border-radius: 6px;
    line-height: 10px;
}





/************
BROWSE VIDEOS
************/

.videos h1, .videos h1 + .large  {
    margin: 5px 0;
}

.videos .large + div {
    margin: 15px 0 25px;
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
    padding: 15px 0;
    overflow: hidden;
}

.videos .large + div p {
    margin-top: 0;
}

#sort_options, #category_options {
    float: left;
}

#category_options {
    width: 455px;
    margin-left: 35px;
}

#category_options li {
    float: left;
    margin-right: 10px;
    width: 100px;
}





/**********************
LOGIN & FORGOT PASSWORD
**********************/

#login_login_form form {
    border-bottom: 1px solid #b7b6b6;
    padding-bottom: 20px;
}

#login_login_form form + p {
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid #e9e8e8;
}

#login_forgot_form {
    display: none;
    margin-top: 20px;
    width: 250px;
}

#login_forgot_form h2 {
    margin-top: 0;
}

#login_forgot_form p {
    margin-bottom: 15px
}





/*******
REGISTER
*******/

.register .form {
    margin-top: 15px;
}

.register input[name="username"] {
    margin-bottom: 0;
}

.register .status {
    display: none;
}

.register .hint {
    margin-top: 3px;
}

.register .available {
    background: url('../images/icon_check.png') no-repeat 0 0;
    padding-left: 19px;
    color: #006600;
}

.register .unavailable {
    background: url('../images/icon_ban.png') no-repeat 0 0;
    padding-left: 19px;
    padding-top: 1px;
    color: #c20202;
}

.register .unavailable,
.register .loading,
.register .available {
    font-weight: bold;
    display: block;
    margin: 7px 0 5px;
}




/******
PROFILE
******/

#profile_avatar, #profile_info {
    float: left;
    margin-bottom: 15px;
}

#profile_avatar {
    width: 100px;
    margin-right: 15px;
    text-align: center;
}

#profile_avatar .button_small {
    margin-top: 5px;
}

#profile_info {
    width: 485px;
}

.profile .videos_list {
    clear: both;
}

.profile .large {
    margin: 0 0 15px;
}

#member-videos .videos_list + p,
#member-playlists .playlist-list + p {
    text-align: center;
    margin-top: 20px;
}





/*********
CONTACT US
**********/

.contact .form {
    margin-top: 15px;
}





/*************
SEARCH RESULTS
*************/

.search h1 {
    margin-bottom: 0;
}

.search h1 + p {
    margin-bottom: 15px;
}

.search .video {
    width: auto;
    float: none;
    margin-right: 0;
    overflow: hidden;
}

.search .video > div {
    float: left;
}

.search .video > div:last-child {
    height: auto;
    width: 420px;
    margin-left: 15px;
}

.search .video .big {
    margin: 0;
}





/*********
PLAY VIDEO
*********/

.play #main .right {
    overflow: hidden;
    float: none;
}

.play #main .right > p:first-child {
    margin-top: 0;
}

.play h1 {
    width: 600px;
    float: left;
    padding-right: 330px;
}

#player {
    background-color: #000;
    width: 600px;
    height: 337px;
}

#player-gated {
    position: relative;
}

#player-gated div {
    top: 130px;
    left: 35px;
    padding: 15px;
    position: absolute;
    width: 500px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    color: #FFF;
    font-weight: bold;
}

#player-gated p {
    margin: 0;
}

#player-gated .button_small {
    margin: 10px 10px 0;
}

.play .actions {
    overflow: hidden;
    margin-bottom: 4px;
}

.play .actions .left {
    float: left;
    width: 300px;
}

.play .actions .right {
    float: right;
    width: 300px;
    margin-top: 15px;
    text-align: right;
}

.play .actions .large {
    margin-bottom: 3px;
}

.like, .dislike {
    padding: 3px 0 3px 18px;
    font-weight: bold;
    display: inline-block;
}

.like {
    background: url('../images/icon_like.png') no-repeat 0 2px;
    color: #006600;
}

.dislike {
    background: url('../images/icon_dislike.png') no-repeat 0 5px;
    color: #660000;
    margin-left: 7px;
}

.rating {
    color: #023e7b;
}


/** TAB BLOCKS **/

.play .tab_block {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #CCC;
}

#about img {
    float: left;
}

#about > div {
    float: left;
    width: 525px;
    margin-left: 10px;
    font-size: 10px;
    overflow: hidden;
}

#about > div a:first-child + p {
    margin-top: 0;
}

#about > p {
    padding: 10px 0 0;
    clear: both;
}

#about .button_small {
    float: right;
}

#share {
    overflow: hidden;
}

#share div:first-child {
    width: 185px;
    float: left;
}

#share > div p:first-child {
    margin-top: 0;
}

#share a {
    width: 40px;
    height: 34px;
    background-repeat: no-repeat;
    display: inline-block;
    text-indent: -9999px;
    margin-right: 12px;
}

#share .facebook {
    background-image:url('../images/icon_facebook.png');
}

#share .twitter {
    background-image:url('../images/icon_twitter.png');
}

#share .google {
    background-image:url('../images/icon_googleplus.png');
}

#share div:last-child {
    width: 380px;
    float: right;;
}

#share div:last-child textarea {
    width: 368px;
    height: 75px;
    padding: 5px;
}

#addToPlaylist {
    overflow: hidden;
}

#addToPlaylist > div:first-child {
    width: 225px;
    float: left;
}

#addToPlaylist > div:first-child > div {
    border: 1px solid #CCC;
    width: 213px;
    padding-left: 10px;
    height: 150px;
}

#addToPlaylist .jspVerticalBar {
    width: 12px;
}

#addToPlaylist .jspTrack {
    background-color: #D2D2D2;
}

#addToPlaylist .jspDrag {
    background-color: #555;
    border-radius: 10px;
}

#addToPlaylist li {
    line-height: 24px;
}

#addToPlaylist li strong {
    padding-left: 20px;
}

#addToPlaylist li a {
    color: #555;
    padding-left: 20px;
    font-weight: normal;
    background: url('../images/icon_add.png') no-repeat 0 2px;
}

#addToPlaylist li a:hover {
    text-decoration: none;
}

#addToPlaylist .added {
    background-image: url('../images/icon_added.png');
}

#addToPlaylist > div:last-child {
    float: right;
    width: 270px;
}

#addToPlaylist .form {
    width: 250px;
    padding: 10px;
}

#addToPlaylist select, #addToPlaylist input[type="text"] {
    height: 30px;
    margin-bottom: 20px;
}


/** COMMENTS FORM **/

.commentForm {
    width: 550px;
    overflow: hidden;
    clear: both;
}

.commentForm .cancel {
    display: block;
    margin-top: 10px;
    float: left;
}

.commentForm textarea {
    font-family: arial, helvetica, sans-serif;
    color: #555;
    width: 530px;
    height: 100px;
    padding: 10px;
}

.commentForm input[type="text"] {
    width: 300px;
}

.commentForm.collapsed label,
.commentForm.collapsed .cancel,
.commentForm.collapsed input[type="text"] {
    display: none;
}

.commentForm.collapsed textarea {
    color: #999;
    font-style: italic;
    float: left;
    width: 380px;
    line-height: 33px;
    height: 35px;
    margin: 0;
    padding: 0 10px;
}

.commentReplyForm {
    margin-top: 15px;
}


/** COMMENTS **/

#comments .large {
    float: left;
    margin: 0 0 8px;
}

#comments .totals {
    overflow: hidden;
    float: right;
    margin: 5px 0 10px;
}

#comments .commentMessage {
    clear: both;
    margin-top: 8px;
}

.commentList {
    margin-top: 20px;
}

.commentList > p:first-child {
    margin-top: 10px;
}

.commentList > div:first-child {
    margin-top: 0;
}

.comment {
    overflow: hidden;
    margin: 40px 0 0;
}

.comment > div {
    margin-left: 10px;
    width: 530px;
    float: left;
}

.commentList .commentIndent {
    margin-left: 70px;
}

.commentList .commentIndent > div {
    width: 460px;
}

.commentList .commentIndentDouble {
    margin-left: 140px;
}

.commentList .commentIndentDouble > div {
    width: 390px;
}

.commentList .commentIndentTriple {
    margin-left: 210px;
}

.commentList .commentIndentTriple > div {
    width: 320px;
}

.comment img {
    float: left;
}

.comment > div p:first-child {
    margin-top: 0;
    overflow: hidden;
}

.comment .commentAuthor,
.comment .commentReply,
.comment .commentDate,
.comment .commentAction {
    font-size: 10px;
}

.comment .commentReply {
    margin-left: 15px;
}

.comment .commentDate {
    margin-left: 10px;
}

.comment .commentAction {
    float: right;
}

.comment .flag {
    margin-left: 10px;
    color: #900;
}

#comments .loadMoreComments {
    margin-top: 20px;
    text-align: center;
}


/** PLAYLIST VIDEOS **/

#playlistVideos {
    background-color: #222;
    width: 300px;
    color: #FFF;
    margin-bottom: 20px;
    height: 337px;
}

#playlistVideos .jspVerticalBar {
    width: 11px;
}

#playlistVideos .jspTrack {
    background-color: #555;
}

#playlistVideos .jspDrag {
    background-color: #333;
    border-radius: 10px;
}

#playlistVideos .jspPane {
    width: 290px !important;
}

#playlistVideos header {
    padding: 10px 15px;
    height: 35px;
    background-color: #1a1a1a;
}

#playlistVideos .big {
    margin-top: 0;
    color: #FFF;
}

#playlistVideos .big + p {
    font-size: 10px;
    margin-bottom: 0;
}

#playlistVideos .videos_list {
    overflow: auto;
    height: 282px;
}

#playlistVideos a {
    color: #0066cc;
}

#playlistVideos .thumbnail a {
    color: #2f94fa;
}

#playlistVideos .video_small {
    overflow: hidden;
    margin-right: 0;
    float: none;
    width: 270px;
    padding: 10px 15px;
    cursor: pointer;
}

#playlistVideos .video_small:hover,
#playlistVideos .active {
    background-color: #444;
}

#playlistVideos .video_small div:first-child {
    float: left;
    margin-right: 10px;
}

#playlistVideos .video_small div:first-child + div {
    float: left;
    width: 154px;
}

#playlistVideos .video_small p:first-child {
    margin-top: 0;
}

#playlistVideos .video_small p:first-child + p,
#playlistVideos .video_small p:first-child + p + p {
    font-size: 10px;
}


/** RELATED VIDEOS **/

.related_videos .large {
    margin-top: 20px;
}

.related_videos .video_list {
    margin-bottom: -20px;
}

.related_videos .video {
    overflow: hidden;
    margin-right: 0;
    margin-bottom: 20px;
    float: none;
    width: 300px;
}

.related_videos .thumbnail {
    float: left;
    margin-right: 10px;
}

.related_videos .thumbnail + div {
    float: left;
    width: 165px;
}

.related_videos .video p:first-child {
    margin-top: 0;
}

.related_videos .video p:first-child + p,
.related_videos .video p:last-child {
    font-size: 10px;
}
