/* ======================== CSS VARIABLES ======================== */
/* Read more about how to create and use CSS variables at http://www.23video.com/help/design/css-variables */











/* ======================== GENERAL TAGS ======================== */

body { font-size: 0.8125em; line-height: 1.5em; }
html, body, button, input, select, textarea { font-family: ; color: #333333;}

h1, h2, h3, h4, h5, .headline { font-family: ; margin: 0 0 0.5em;}
h1 { font-size: 1.75em; }
h2 { font-size: 1.5em; }
h3, .headline { font-size: 1.25em; margin: 0 0 0.4em; font-weight: normal;}
.sidebar .headline, #header .headline {text-transform: uppercase;}
#content .headline, #content h3 {font-weight: bold;}
#content h2 {font-size: 1.5em;}

a {text-decoration: none; color: #000000; }
a:hover, a.selected { color: #4c4c4c; }

form {position: relative; display: block;}
.text {
  border: 1px solid #999999;
  border-radius: 2px;
  background-color: #FFFFFF;
  padding: 7px 10px;
}
.button {
  border: 1px solid #010101;
  border-radius: 2px;
  background-color: #444444;
  line-height: 100%;
  padding: 8px 10px;
  color: #ffffff;
}
.button:hover {
  background-color: #333333;
  box-shadow: inset 0px 1px 1px #222;
}
form fieldset {border: none; padding: 0; margin: 0 0 20px;}
form legend {font-weight: bold; clear: both;}
form input[type='text'], form textarea {
  border: 1px solid #999999;
  border-radius: 2px;
  background-color: #FFFFFF;
  padding: 7px 10px;
  resize: none;
  width: 80%;
  clear: left;
}
.form-field-comment, .form-label {margin: 10px 0 6px;}

#header, #main, #footer { padding-top: 2%; padding-bottom: 1%;}

.show-on-tablet {display: none;}

/* Tables */
.pretty {text-align: left;}
.pretty td, .pretty th {padding: 0 24px 0 0;}

/* ======================== HEADER ======================== */

#header { background-color: #000000; }
#header a { color: #FFFFFF; }

#sitelogo {margin-bottom:.83em;}
#sitelogo img { max-width: 100%; *width: 100%; }
#sitename {margin-top:-1px;}

#header .sidebar-link-list-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* Padding for layout blocks with and without nested grids */
.layout-block {	padding-left: 10px; padding-right: 10px;}
.block-tube-thumbnails, .block-tube-channel-thumbnails, #header .layout-block {padding-left: 0; padding-right: 0;}

/* ======================== SIDEBAR ======================== */

.sidebar { overflow: hidden; }
.sidebar .layout-block, #content .layout-block, #content .static-content { margin-bottom: 40px; }

.subscribe-link-mail a {padding-top: 3px; padding-bottom: 3px; line-height: 1em; display: block; background: transparent url('/files/subscribe-mail.png') left center no-repeat; padding-left: 25px; height: 12px;}
.subscribe-link-podcast a {padding-top: 3px; padding-bottom: 3px; line-height: 1em; display: block; background: transparent url('/files/subscribe-podcast.png') left center no-repeat; padding-left: 25px; height: 12px;}
.subscribe-link-rss a {padding-top: 3px; padding-bottom: 3px; line-height: 1em; display: block; background: transparent url('/files/subscribe-rss.png') left center no-repeat; padding-left: 25px; height: 12px;}

.share-box, #sidebar-subscribe div {margin-bottom: 10px;}
.share-box-title {margin-bottom: 4px;}

.share-box-fb a { padding-top: 3px; padding-bottom: 3px; line-height: 1em; display: block; background: transparent url('/files/facebook-square.png') left center no-repeat; padding-left: 25px; height: 12px;}
.share-box-twitter a { padding-top: 3px; padding-bottom: 3px; line-height: 1em; display: block; background: transparent url('/files/twitter-square.png') left center no-repeat; padding-left: 25px; height: 12px;}

#sidebar-channels a { display: block; }

.search-box { height: 33px; }
.share-box-mail { height: 68px; }
.search-box .text, .share-box-mail .text { width: 100%; }
.search-box span, .share-box-mail span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 87px;
}
.search-box, .share-box-mail, .something {position: relative;}
.search-box .button, .share-box-mail .button {
  float: right;
  width: 61px;
  box-shadow: inset 0px 1px 1px #666;
  position: relative;
}
.share-box-embed {margin-right: 22px; position: relative;}
.sidebar-share-embed {width: 100%;}

/* ======================== BREADCRUMBS ======================== */

.block-breadcrumbs { margin-bottom: 4px !important; }
.breadcrumbs { list-style-type: none; padding: 0; margin: 0; font-size: 1.125em; font-style: italic;}
.breadcrumbs li { float: left; padding-right: 6px; }
.breadcrumbs li.breadcrumb-end {clear: both; float: none;}
.breadcrumbs li a, .breadcrumbs li { color: #999; }
.breadcrumbs li a:hover { color: #4c4c4c; }

/* ======================== THUMBNAILS ======================== */

.video-thumbnail { position: relative; display: block;}
.video .video-title { margin: 1em 0 0; overflow: hidden;}
.video .video-title a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.video .video-content {	margin: 0 0 2em; }
.video-thumbnail img {max-width: 100%; *width: 100%; display: block;}

.video-thumbnail-duration, .video-thumbnail-icon {
  position: absolute;
  transition: background 0.1s linear;
  opacity: 0.9;
  border-radius: 3px;
}
.video-thumbnail-icon {
  width: 28px;
  height: 28px;
  bottom: 5px;
  left: 5px;
  background: #000000 url('/files/small-play-button.png') center center no-repeat;
}
.video-thumbnail-duration {
  background: #000000 url('/files/clock-icon.png') 10px center no-repeat;
  right: 5px;
  bottom: 5px;
  color: #FFFFFF;
  padding: 2px 10px 2px 32px;
  height: 24px;
  line-height: 24px;
}
.portrait-video .video-thumbnail:hover .video-thumbnail-duration, .portrait-video .video-thumbnail:hover .video-thumbnail-icon {
  background-color: #000000;
}

#pagination {text-align: center; clear: both;}
.pagination-next, .pagination-previous { font-weight: bold; }
.pagination-pages span { text-decoration: underline; }

/* === Frontpage thumbnail === */
.frontpage-video .video-thumbnail-icon { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: transparent url('/files/big-play-button.png') center center no-repeat;}
.frontpage-video .video-duration {
 color: #000000; font-weight: normal; font-size: 0.7em;
}
.frontpage-video .video-title a {display: inline;}

/* ======================== VIDEO ONE ======================== */

#video-one .border {clear: both; padding-bottom: 20px; border-bottom: 1px solid #999999;}
.video-embed {height: 0; width: 100%; position: relative;}
.video-embed iframe {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.video-tags a, .video-date {font-style: italic;}
.sharing {float: right; width: 250px;}
.sharing .facebook, .sharing .twitter, .sharing .google {float: right; width: 65px; height: 20px; margin-left: 10px; text-indent: -9999px;}

.sharing .facebook {background: transparent url('/files/facebook.png') center center no-repeat;}
.sharing .twitter {background: transparent url('/files/twitter.png') center center no-repeat;}
.sharing .google {background: transparent url('/files/google.png') center center no-repeat;}

/* Spinning indicator */
.indicator {display:none; background:url('/resources/um/graphics/indicator.gif') center left no-repeat white; line-height:20px; padding:2px 0 2px 20px; color:#666; font-weight:bold; font-size:.9em;} 


/* COMMENTS */
ol.comments {margin:0; border-bottom:1px solid #dedede;}
li.comment {border-top:1px solid #dedede; padding:10px; list-style:none;}
li.comment .comment-buddy {float:left;}
li.comment .comment-content {margin-left:70px;}
li.comment .comment-body {margin-bottom:15px;}
li.comment .comment-author {font-size:1.05em; font-style:italic;}
li.comment .comment-date {color:#999; font-style:italic; font-size:0.9em; }

.comment-recaptcha {margin:15px 0;}

.comment-screening {border-color:#dedede; border-style:solid; border-width:1px 0; padding:10px; margin:15px 0; font-size:1.1em;}
.comment-form h3 {margin-top:15px;}
.comment-form input.text, .comment-form textarea {border:1px solid #dedede; font-size:11px;}
.comment-form input.text {width:250px; height:20px; line-height:20px; padding:0 3px;}
.comment-form textarea {line-height:16px; padding:3px;}
.comment-input {margin-bottom:10px;}

.comment-input-label {font-size:10px; line-height:20px; width:70px; font-weight:bold; float:left;}
.comment-input-widget {margin-left:80px;}
.comment-input-content .comment-input-label, .comment-input-notify .comment-input-label {display:none;}
.comment-input-content .comment-input-widget, .comment-input-notify .comment-input-widget {margin-left:0;}
.comment-input-notify {font-size:11px;}
.comment-input textarea {width:90%; height:120px;}

.comment-facebook, .comment-facebook-image, .comment-facebook-body {height:42px;}
.comment-facebook-image {float:left; }
.comment-facebook-body {margin-left:45px; line-height:54px;}
.comment-facebook a {font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; padding-left:3px; color:#3B5998!important; font-weight:bold;}
.comment-facebook img {height:40px; width:40px;}

.comment-error {font-weight:bold; color:#c00; font-size:1.05em;}

/* ======================== RESPONSIVE ADJUSTMENTS ======================== */

@media screen and (max-width: 540px) {
  .video, p {margin: 0.5em 0;}
  #content, #header .sidebar-channels {padding-left: 0; padding-right: 0;}
  .sidebar {text-align: center;}
  .search-box span, .share-box-mail span {right: 22px;}
  .search-box .button, .share-box-mail .button {display: none;}
  h3, .headline, #title {font-size: 1em;}
}

@media screen and (min-width: 541px) and (max-width: 799px) {
  .video-thumbnail-duration { display: none; }
  .search-box .button, .share-box-mail .button {display: none;}
  .search-box span, .share-box-mail span {right: 22px;}
  h3, .headline, #title {font-size: 1em;}
  .hide-on-tablet {display: none;}
  .show-on-tablet {display: inline;}
}

/* ======================== RETINA GRAPHICS ======================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  .sharing .facebook {background-image:url('/files/facebook@2x.png'); background-size:65px;}
  .sharing .twitter {background-image:url('/files/twitter@2x.png'); background-size:65px;}
  .sharing .google {background-image:url('/files/google@2x.png'); background-size:65px;}
  .share-box-fb a {background-image:url('/files/facebook-square@2x.png'); background-size: 18px; display: inline;}
  .share-box-twitter a {background-image:url('/files/twitter-square@2x.png'); background-size: 18px; display: inline;}
  .subscribe-link-mail a {background-image:url('/files/subscribe-mail@2x.png'); background-size: 18px; display: inline;}
  .subscribe-link-podcast a {background-image:url('/files/subscribe-podcast@2x.png'); background-size: 18px; display: inline;}
  .subscribe-link-rss a {background-image:url('/files/subscribe-rss@2x.png'); background-size: 18px; display: inline;}
}

.lt-ie8 .clearfix {
	clear: both;
}