/* variables */ /**/ /**/ /* buttons */ .btn-default { background: #ececec; border-color: #ececec; font-weight: 400; color: #000; } .btn-default:hover, .btn-default:active { background: #ececec; border-color: #ececec; } .btn-ghost { background: #fff; border: 2px solid #000; padding: 5px 10px; font-weight: 400; font-size: 15px; line-height: 21px; color: #000; } .btn-ghost.btn-lg { font-size: 18px; line-height: 36px; } .btn-ghost:hover, .btn-ghost:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-primary { background: #0080b4; border-color: #0080b4; font-weight: 400; color: #fff; } .btn-primary:hover, .btn-primary:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-success { background: #4caf50; border-color: #4caf50; font-weight: 400; color: #fff; } .btn-success:hover, .btn-success:active { background: #4caf50; border-color: #4caf50; color: #fff; } .btn-black { background: #212121; border-color: #212121; font-weight: 400; font-size: 15px; color: #fff; } .btn-black:hover, .btn-black:active { background: #212121; border-color: #212121; color: #fff; } /* form elements */ .form-control { color: #000; background: #f6f6f6; border-color: #d9d9d9; font-size: 15px; line-height: 28px; height: 42px; /* placeholder input styles */ } .form-control input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #bdbdbd; } .form-control input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bdbdbd; } .form-control input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bdbdbd; opacity: 1; } .form-control input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bdbdbd; } /* sprite */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) { .playlists-dropdown .item_playlist .playlist-thumb .date-time, .playlists-dropdown .playlist-header .close-playlists, .headerIcon.active.playlist-icon a, .headerIcon.active.channels-icon a, .headerIcon.active.video-icon a, .headerIcon.playlist-icon a, .headerIcon.channels-icon a, .headerIcon.video-icon a, .navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting, .navbar-default .right-menu.navbar-nav > li > a.btn-upload, .ch-playlists .playlist-thumb .date-time, .rating .like-dislike a.btn-dislike i, .rating .like-dislike a.btn-like i { background-image: url("../images/sprite@2x.png") !important; /* Translate the @2x sprite's dimensions back to 1x */ background-size: 60px 4400px !important; } } * { max-height: 1000000px; } html, body { height: 100%; } html { font-size: 62.5%; } body { min-width: 320px; margin: 0; color: #000; font: 14px/16px "Source Sans Pro", sans-serif; background: #eee; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; } img { border-style: none; display: block; } a { text-decoration: none; color: #000; } a:hover { text-decoration: underline; } a:active { background-color: transparent; outline: none !important; text-decoration: none; } a:focus { outline: none !important; text-decoration: none; } button:focus, button:active { outline: none !important; } input, textarea, select { font: 100% "Source Sans Pro", sans-serif; vertical-align: middle; color: #000; } form, fieldset { margin: 0; padding: 0; border-style: none; } input[type=file], input[type=search] { -webkit-appearance: none; -webkit-border-radius: 0 !important; -ms-border-radius: 0 !important; border-radius: 0 !important; border: 0 !important; } input[type=text], input[type=password], textarea, input[type=submit], input[type="email"], input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; } input[type="submit"]:hover { cursor: pointer; } iframe { border: 0; display: block; } /* end of reset */ /* to hide bg-body */ .bg-body { display: none; } /* ad style */ .leaderboard-ad, .box-ad { margin: 0 0 20px; } .ad:after { clear: both; display: block; content: ""; } .ad img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .cb-rounded { border-radius: 4px; } /**/ #container { min-height: 100%; position: relative; overflow: hidden; } #header:after { display: block; clear: both; content: ""; } /**/ #main { position: relative; padding: 20px 0; } #content { width: 73%; float: left; } h1 { font-size: 23px; line-height: 23px; font-weight: 600; margin: 0 0 20px; color: #000; } .banner-popular { padding: 0 0 5px; border-bottom: 1px solid #d9d9d9; margin: 0 0 15px; } /**/ .editorpick-holder { padding: 0 16px 0 0; float: left; width: 65.3%; position: relative; } .absolute-div { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; padding: 0 16px 0 0; } .editorpick-videos { padding: 6px 6px 6px 0; float: right; width: 34.7%; } .editorpick-videos .scrollable-area { height: 293px; overflow-y: auto; padding: 0 4px 0 0; } .editorpick { background: #fff; margin: 0 0 20px; } .playerRatio { width: 100%; height: auto; } .popular-vids { padding: 0 0 0 15px; } .featured-video { cursor: pointer; background: #fff; font-size: 13px; line-height: 15px; font-weight: 300; color: #757575; padding: 14px 0; border-bottom: 1px solid #d9d9d9; } .featured-video:first-child { padding: 10px 0 14px; } .featured-video:last-child { border: none; } .featured-video .video_thumb { position: relative; float: left; width: 112px; margin: 0 10px 0 0; } .featured-video .duration { position: absolute; font-size: 12px; line-height: 16px; font-weight: 400; color: #fff; text-align: center; height: 16px; width: 34px; bottom: 5px; right: 5px; z-index: 2; background: #000; border-radius: 2px; } .featured-video .details_block { overflow: hidden; } .featured-video .title, .featured-video .author { display: block; } .featured-video .title { color: #000; font-size: 16px; line-height: 18px; font-weight: 400; margin: 0 0 4px; } .featured-video .title a { color: #000; text-decoration: none; } .featured-video .title a:hover { color: #0080b4; } .featured-video .author { margin: 0 0 2px; color: #0080b4; } .featured-video .author a { color: #0080b4; text-decoration: none; } .featured-video .views-date .date, .featured-video .views-date span { display: inline-block; vertical-align: middle; } .featured-video .views-date .date { margin: 0 0 0 4px; padding: 0 0 0 8px; position: relative; } .featured-video .views-date .date:after { content: ""; position: absolute; width: 4px; height: 4px; left: 0; top: 50%; margin: -2px 0 0; z-index: 2; background: #757575; border-radius: 2px; } .item-video .thumb-holder { position: relative; z-index: 2; } .item-video .thumb-holder .video-link { display: block; position: relative; z-index: 1; text-decoration: none; color: #fff; font-size: 12px; list-style: 14px; } .item-video .thumb-holder .video-link .title { position: absolute; z-index: 2; font-size: 18px; line-height: 20px; font-weight: 400; left: 0; top: 0; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0.59+43,0.55+49,0.26+70,0.12+82,0.05+90,0.01+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.59) 43%, rgba(0, 0, 0, 0.55) 49%, rgba(0, 0, 0, 0.26) 70%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.05) 90%, rgba(0, 0, 0, 0.01) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.59) 43%, rgba(0, 0, 0, 0.55) 49%, rgba(0, 0, 0, 0.26) 70%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.05) 90%, rgba(0, 0, 0, 0.01) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.59) 43%, rgba(0, 0, 0, 0.55) 49%, rgba(0, 0, 0, 0.26) 70%, rgba(0, 0, 0, 0.12) 82%, rgba(0, 0, 0, 0.05) 90%, rgba(0, 0, 0, 0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#03000000',GradientType=0 ); /* IE6-9 */ padding: 10px 94px 15px 10px; margin: 0; } .item-video .thumb-holder .item-footer { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; padding: 10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.01+0,0.02+8,0.09+18,0.23+28,0.43+41,0.57+58,0.69+78,0.76+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 8%, rgba(0, 0, 0, 0.09) 18%, rgba(0, 0, 0, 0.23) 28%, rgba(0, 0, 0, 0.43) 41%, rgba(0, 0, 0, 0.57) 58%, rgba(0, 0, 0, 0.69) 78%, rgba(0, 0, 0, 0.76) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 8%, rgba(0, 0, 0, 0.09) 18%, rgba(0, 0, 0, 0.23) 28%, rgba(0, 0, 0, 0.43) 41%, rgba(0, 0, 0, 0.57) 58%, rgba(0, 0, 0, 0.69) 78%, rgba(0, 0, 0, 0.76) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 8%, rgba(0, 0, 0, 0.09) 18%, rgba(0, 0, 0, 0.23) 28%, rgba(0, 0, 0, 0.43) 41%, rgba(0, 0, 0, 0.57) 58%, rgba(0, 0, 0, 0.69) 78%, rgba(0, 0, 0, 0.76) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#c2000000',GradientType=0 ); /* IE6-9 */ overflow: hidden; color: #fff; } .item-video .thumb-holder .duration { font-size: 14px; line-height: 20px; font-weight: 300; text-align: center; height: 20px; width: 44px; padding: 0 4px; background: #000; border-radius: 2px; float: right; } .item-video .thumb-holder .cb_quickie { float: left; width: 24px; height: 20px; padding: 0; font-size: 12px; line-height: 18px; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 2px; background: none; cursor: pointer; } .item-video .thumb-holder .cb_quickie.icon-tick { background: #0080b4; border-color: #0080b4; } .item-video .thumb-holder .vid-type { position: absolute; top: 10px; right: 10px; background: #ffa000; height: 24px; padding: 2px 8px 2px 5px; color: #fff; font-size: 12px; text-align: center; line-height: 20px; z-index: 2; border-radius: 2px; } .background-masker { -webkit-animation: placeHolderLoading 2s linear infinite; -moz-animation: placeHolderLoading 2s linear infinite; -ms-animation: placeHolderLoading 2s linear infinite; -o-animation: placeHolderLoading 2s linear infinite; animation: placeHolderLoading 2s linear infinite; background: #fff; background: -webkit-gradient(-45deg, color-stop(25%, #fff), color-stop(25%, #f6f6f6), color-stop(50%, #fff)); background: -webkit-linear-gradient(-45deg, #fff 25%, #f6f6f6 25%, #fff 50%); background: linear-gradient(133deg, #fff 25%, #f6f6f6 25%, #fff 50%); background-size: 800px 400px; position: 0 0; position: relative; } @-webkit-keyframes placeHolderLoading { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @-moz-keyframes placeHolderLoading { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @-o-keyframes placeHolderLoading { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes placeHolderLoading { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* thumb placeholder */ .thumb-video { background-color: transparent; } .loadingInfo { padding: 18px; position: relative; } .loadingInfo .views-date, .loadingInfo .paragraph, .loadingInfo .heading { background-color: #eee; height: 10px; margin-bottom: 20px; } .loadingInfo .paragraph { height: 7px; margin-bottom: 10px; margin-right: 20%; } .loadingInfo .views-date { height: 5px; margin-right: 50%; margin-bottom: 0; } /* end of thumb placeholder*/ .videos, .featured-videos { margin: 0 0 4px; } .videos .row, .featured-videos .row { margin: 0 -8px; } .videos .item-video, .featured-videos .item-video { padding: 0 8px; margin: 0 0 16px; } .featured-videos .item-video .thumb-holder .video-link .title { padding: 10px 94px 15px 10px; } .featured-videos .item-video .thumb-holder .video-link .item-footer { padding: 20px; } .featured-videos .item-video .thumb-holder .cb_quickie { bottom: 20px; left: 20px; } .featured-videos .item-video .thumb-holder .vid-type { top: 14px; right: 20px; } .videos .video-info { font-size: 14px; line-height: 16px; font-weight: 300; color: #757575; padding: 8px; background: #fff; height: 100px; position: relative; } .videos .video-info .title { max-height: 40px; overflow: hidden; color: #000; font-size: 18px; line-height: 20px; font-weight: 400; margin: 0 0 5px; } .videos .video-info .title a { color: #000; text-decoration: none; } .videos .video-info .title a:hover { color: #0080b4; } .videos .video-info .author { display: block; margin: 0 0 5px; color: #0080b4; } .videos .video-info .author a { color: #0080b4; text-decoration: none; } .videos .video-info .views-date { position: absolute; z-index: 2; left: 0; bottom: 8px; width: 100%; padding: 0 8px; } .videos .video-info .views-date .date, .videos .video-info .views-date span { display: inline-block; vertical-align: middle; } .videos .video-info .views-date .date { margin: 0 0 0 4px; padding: 0 0 0 8px; position: relative; } .videos .video-info .views-date .date:after { content: ""; position: absolute; width: 4px; height: 4px; left: 0; top: 50%; margin: -2px 0 0; z-index: 2; background: #757575; border-radius: 2px; } .btn-loadmore { background: #eee; font-size: 14px; line-height: 22px; font-weight: 600; border: 2px solid #000; border-radius: 4px; padding: 4px 12px; min-width: 200px; } /* quick list */ .quick_container { width: 1000px; margin: 0px auto; padding: 0px; position: relative; } /**/ .quicklist_box { bottom: 0; right: 0; background-color: #f1f1f1; width: 350px; color: #fff; position: fixed; z-index: 1000; border: 1px solid #d5d5d5; font-size: 13px; line-height: 15px; } .quicklist_box_head { line-height: 30px; color: #000; font-weight: 500; font-size: 16px; line-height: 30px; padding: 5px; text-align: right; } .quicklist_box_head .quick_title { float: left; text-align: center; } .ql_show-hide { float: left; } .ql_rem { float: right; } .quicklist_box_head h1 { color: #333; font-size: 14px; font-weight: bold; margin: 10px 0px; width: 100%; float: left; } .cross_icon { cursor: pointer; } .cross_icon { background-image: url(../images/icons/cross.png); position: relative; z-index: 10; } .quicklist_cont { float: left; width: 100%; display: none; } .my_quicklist { max-height: 325px; overflow: auto; } .qlist_item { background-color: #fff; padding: 10px 5px; border-top: 1px solid #d5d5d5; position: relative; } .pl_thumb { width: 144px; height: 64px; float: left; margin-right: 10px; position: relative; } .pl_thumb .pl_duration { position: absolute; bottom: 5px; right: 5px; background: rgba(0, 0, 0, 0.6); } .pl_details { overflow: hidden; padding: 0 36px 0 0; color: #212121; } .pl_details a { color: #212121; } .pl_thumb a { width: 100%; height: 100%; display: block; } .pl_thumb a img { width: 100%; height: 100%; } .ql_delete { position: absolute; right: 5px; top: 5px; } .private_video { background-image: url(../images/private.png); width: 110px; height: 66px; position: absolute; top: 2px; left: 2px; border: 0px; } /**/ /* collections grid */ .collections-grid .row { margin: 0 -8px; } .collections-grid .collection-item { padding: 0 8px; margin: 0 0 16px; font-size: 16px; line-height: 16px; } .collections-grid .collection-holder { position: relative; z-index: 1; } .collections-grid .photo-bg { width: 100%; height: auto; } .collections-grid .photo-block { position: absolute; z-index: 2; padding: 7% 0 0; top: 0; left: 0; width: 100%; height: 100%; } .collections-grid .photo-block a { display: block; position: relative; z-index: 3; width: 100%; height: 100%; color: #fff; } .collections-grid .photo-block img { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; } .collections-grid .photo-block .collection-info { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 4; border-radius: 30px; overflow: hidden; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; line-height: 14px; font-weight: 300; text-align: center; padding: 12px 4px; } .collections-grid .photo-block .collection-info span { display: block; font-size: 16px; line-height: 16px; font-weight: 600; margin: 0 0 6px; } .collections-grid .title { display: block; background: #fff; padding: 10px 0 0; } .collections { padding: 16px 0; margin: 0 0 20px; } .collections .row { margin: 0 -8px; } .collections .collection-item { padding: 0 8px; margin: 0 0 16px; font-size: 18px; line-height: 18px; } .collections .collection-holder { position: relative; z-index: 1; } .collections .photo-bg { width: 100%; height: auto; } .collections .photo-block { position: absolute; z-index: 2; padding: 7% 0 0; top: 0; left: 0; width: 100%; height: 100%; } .collections .photo-block a { display: block; position: relative; z-index: 3; width: 100%; height: 100%; color: #fff; } .collections .photo-block img { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; } .collections .photo-block .collection-info { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 4; border-radius: 30px; overflow: hidden; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; line-height: 14px; font-weight: 300; text-align: center; padding: 12px 4px; } .collections .photo-block .collection-info span { display: block; font-size: 16px; line-height: 16px; font-weight: 600; margin: 0 0 6px; } .collections .title { display: block; background: #fff; padding: 9px 10px; } /* end of sidebar collection */ /* sidebar playlists */ .sidebar-playlists { margin: 0 0 20px; } .sidebar-playlists .playlist { background: #fff; padding: 10px 16px; margin: 0 0 20px; } .sidebar-playlists .playlist h3 { font-size: 16px; line-height: 16px; font-weight: 400; margin: 0 0 10px; } .sidebar-playlists .playlist .row { margin: 0 -3px; } .sidebar-playlists .playlist .video { padding: 0 3px; margin: 0 0 10px; } .sidebar-playlists .playlist .videos-count { display: block; font-size: 14px; line-height: 14px; font-weight: 300; color: #757575; } /* end of sidebar playlists */ .cat-videos { border-bottom: 1px solid #d9d9d9; margin: 0 0 20px; } .cat-videos .heading { margin: 0 0 10px; } .cat-videos .heading h1 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #333; } .cat-videos .heading h1 img { display: inline-block; vertical-align: top; margin: -2px 5px 0 0; background: rgba(0, 0, 0, 0.8); border-radius: 12px; width: 24px; height: 24px; padding: 2px; } .cat-videos .heading h1 a { color: #666; font-size: 15px; display: inline-block; vertical-align: top; } .cat-videos .heading h1 a i { color: #0080b4; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; } .cat-videos .heading h1 a:hover { color: #0080b4; text-decoration: none; } .cat-videos .heading h1 a:hover i { margin: 0 0 0 5px; } .cat-videos .video-block { width: 20%; float: none; display: inline-block; vertical-align: top; } .cat-videos .video_row { height: 240px; width: 100% !important; overflow: hidden !important; white-space: nowrap; } .cat-videos .video_row, .cat-videos .scrollable-area-wrapper { width: 100% !important; height: auto !important; } /* videos page */ .photos .heading h2, .photos .heading h1 { margin: 0; position: relative; display: inline-block; vertical-align: top; padding: 0 10px 0 0; } .filter-dropdowns .dropdown-menu > li > a, .filter-dropdowns .dropdown-menu > li > div > a { display: block; text-decoration: none; font-weight: 400; position: relative; z-index: 2; padding: 6px 20px 6px 12px; color: #fff; border-bottom: 1px solid #515151; } .filter-dropdowns .dropdown-menu > li > a:hover, .filter-dropdowns .dropdown-menu > li > div > a:hover, .filter-dropdowns .dropdown-menu > li > a.selected, .filter-dropdowns .dropdown-menu > li > div > a.selected, .filter-dropdowns .dropdown-menu > li > a.selected:hover, .filter-dropdowns .dropdown-menu > li > div > a.selected:hover { color: #fff; background: #17181a; } .filter-dropdowns { margin: 0 0 16px; font-size: 15px; line-height: 20px; text-transform: capitalize; font-weight: 600; } .filter-dropdowns .cat-col { text-align: left; padding: 0 10px 0 0; } .filter-dropdowns .cat-col .dropdown { margin: 0; } .filter-dropdowns .cat-col .btn-default { background: #eee; border: 2px solid #000; padding: 5px 10px; font-weight: 400; font-size: 15px; line-height: 21px; color: #000; margin: 0 0 0 10px; } .filter-dropdowns .cat-col .btn-default:hover, .filter-dropdowns .cat-col .btn-default:active { background: #0080b4; border-color: #0080b4; color: #fff; } .filter-dropdowns .sorting-col { text-align: right; padding: 0 0 0 10px; } .filter-dropdowns .sorting-col .dropdown-menu { left: auto; right: 0; } .filter-dropdowns .dropdown { display: inline-block; vertical-align: top; background: #212121; padding: 6px 10px; height: 34px; border-radius: 4px; margin: 0 0 0 5px; } .filter-dropdowns .dropdown.open { border-radius: 4px 4px 0 0; } .filter-dropdowns .dropdown > a { color: #fff; display: block; } .filter-dropdowns .dropdown > a span { display: inline-block; vertical-align: top; line-height: 20px; margin: 0 0 0 10px; } .filter-dropdowns .dropdown > a:hover { text-decoration: none; } .filter-dropdowns .icon-arrow-down { font-size: 8px; display: inline-block; vertical-align: middle; margin: 0 0 0 3px; } .filter-dropdowns .dropdown-menu { background: #424242; box-shadow: none; padding: 0; margin: 0; border-radius: 0 0 4px 4px; border: none; z-index: 10; } .filter-dropdowns .dropdown-menu > li { position: relative; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; cursor: pointer; } .filter-dropdowns .dropdown-menu > li:last-child > a, .filter-dropdowns .dropdown-menu > li:last-child > div > a { border-radius: 0 0 4px 4px; border: none; } .filter-dropdowns .dropdown-menu > li > div { position: relative; z-index: 2; } .filter-dropdowns .dropdown-menu > li > div i { font-size: 10px; line-height: 20px; position: absolute; z-index: 3; top: 50%; right: 10px; margin: -10px 0 0; color: #fff; } .filter-dropdowns .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; display: none; border-radius: 0 4px 4px 0; background: #616161; z-index: 4; } .filter-dropdowns .dropdown-menu .sub-menu > li:first-child > div > a { border-radius: 4px 4px 0 0; } .filter-dropdowns .dropdown-menu .sub-menu > li > div > a { border-color: #686868; } .filter-dropdowns .dropdown-menu .sub-menu .sub-menu { background: #757575; } .filter-dropdowns .dropdown-menu .sub-menu .sub-menu > li > div > a { border-color: #7f7f7f; } .filter-dropdowns .dropdown-menu .sub-menu .sub-menu .sub-menu { background: #898989; } .filter-dropdowns .dropdown-menu .sub-menu .sub-menu .sub-menu > li > div > a { border-color: #949494; } /* watch video */ .player-holder { margin: 0 0 18px; position: relative; } #cb_player #link_v { display: inline-block; vertical-align: top; } .video_player { height: inherit; } /* player having sidebar items relation */ .player-items { margin: 0 0 18px; position: relative; } .player-items .player-holder { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; } .view-details, .video-details { background: #fff; padding: 16px; margin: 0 0 16px; } .view-details header.details, .video-details header.details { margin: 0 0 20px; } .view-details header.details h1, .video-details header.details h1 { font-size: 25px; line-height: 25 px; margin: 0 0 16px; font-weight: 600; color: #333; } .view-details header.details .user-video-info, .video-details header.details .user-video-info { margin: 0 0 12px; display: table; width: 100%; } .view-details header.details .user-video-info .views-counter, .view-details header.details .user-video-info .avatar, .view-details header.details .user-video-info .user-title, .video-details header.details .user-video-info .views-counter, .video-details header.details .user-video-info .avatar, .video-details header.details .user-video-info .user-title { display: table-cell; vertical-align: middle; } .view-details header.details .user-video-info .avatar, .video-details header.details .user-video-info .avatar { width: 58px; } .view-details header.details .user-video-info .avatar img, .video-details header.details .user-video-info .avatar img { width: 58px; height: 58px; border-radius: 29px; } .view-details header.details .user-video-info .user-title, .video-details header.details .user-video-info .user-title { font-size: 18px; line-height: 20px; font-weight: 400; margin: 0; padding: 0 0 0 16px; } .view-details header.details .user-video-info .user-title a, .video-details header.details .user-video-info .user-title a { color: #000; } .view-details header.details .user-video-info .views-counter, .video-details header.details .user-video-info .views-counter { text-align: right; width: 166px; font-size: 25px; line-height: 25px; padding: 12px 0 11px 16px; } .view-details header.details .user-video-info .views-counter span, .video-details header.details .user-video-info .views-counter span { display: inline-block; vertical-align: top; border-bottom: 3px solid #e7e7e7; width: 100%; height: 34px; } .view-details .user-likes-sub, .video-details .user-likes-sub { margin: 0 -15px; } .view-details .user-likes-sub .like-rating .rating, .video-details .user-likes-sub .like-rating .rating { padding: 3px 0 2px; } .view-details .user-likes-sub .subscribe-col, .video-details .user-likes-sub .subscribe-col { text-align: right; } .view-details .user-likes-sub .btn-subscribe, .video-details .user-likes-sub .btn-subscribe { font-size: 14px; line-height: 14px; } /* rating */ .rating { color: silver; font-size: 16px; line-height: 20px; } .rating .like-dislike { display: inline-block; vertical-align: middle; margin: 0 16px 0 0; } .rating .like-dislike a { color: silver; } .rating .like-dislike a span { font-size: 18px; line-height: 20px; display: inline-block; vertical-align: middle; margin: 0 10px 0 0; } .rating .like-dislike.likes { color: #0080b4; } .rating .like-dislike.likes a { color: #0080b4; } .rating .like-error { display: block; } .rating .like-error span { display: block; } .error { display: block; padding: 10px; background: #f97373; color: #fff; } /* view-tabs */ .cat-tabs { margin: 0 0 20px; border: 1px solid #d9d9d9; padding: 0 20px; } .cat-tabs .panel-body { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 20px; } .cat-tabs .panel-body li { display: inline-block; vertical-align: top; } .cat-tabs .panel-body li a { color: #010101; display: block; padding: 15px 20px; border-bottom: 3px solid transparent; } .cat-tabs .panel-body li a:hover { text-decoration: none; border-color: #0080b4; } .cat-tabs .panel-body li.selected a { border-color: #0080b4; font-weight: 700; } .flat-tabs h2 { font-size: 20px; line-height: 20px; font-weight: 600; margin: 0 0 10px; } .flat-tabs .alert-info { background: none; font-size: 13px; line-height: 18px; border: none; padding: 0; } .flat-tabs .nav-tabs.nav { font-size: 14px; border-bottom: 1px solid #d9d9d9; } .flat-tabs .nav-tabs.nav > li { margin: 0; } .flat-tabs .nav-tabs.nav > li > a { border-width: 0 0 3px; border-color: #fff; margin: 0; padding: 8px 15px; color: #000; } .flat-tabs .nav-tabs.nav > li > a:hover { border-width: 0 0 3px; border-color: #0080b4; background: none; color: #000; } .flat-tabs .nav-tabs.nav > li.active > a, .flat-tabs .nav-tabs.nav > li.active > a:hover, .flat-tabs .nav-tabs.nav > li.active > a:active { border-color: #0080b4; color: black; font-weight: 700; } .flat-tabs .tab-content > .tab-pane { padding: 16px 0 0; } .flat-tabs .tab-content .infotable table td { width: 50%; } .flat-tabs .tab-content .infotable table td img { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; } .flat-tabs .item-photo .photo-info, .flat-tabs .videos .video-info { background: #f6f6f6; } .flat-tabs .playlist-item { margin: 0 0 10px; } .view-tabs h2 { font-size: 16px; line-height: 18px; margin: 0 0 10px; } .view-tabs .alert-info { background: none; color: #000; font-size: 13px; line-height: 18px; border: none; padding: 0; } .view-tabs .nav-tabs.nav { font-size: 16px; border: 1px solid #d9d9d9; border-width: 1px 0; } .view-tabs .nav-tabs.nav > li { margin: 0; } .view-tabs .nav-tabs.nav > li > a { border: none; margin: 0; padding: 10px 16px 10px 0; color: #7c7c7c; } .view-tabs .nav-tabs.nav > li > a:hover { border-color: #0080b4; background: none; color: #000; } .view-tabs .nav-tabs.nav > li > a span { display: inline-block; vertical-align: top; margin: 0 10px 0 0; font-size: 18px; line-height: 22px; } .view-tabs .nav-tabs.nav > li.active > a, .view-tabs .nav-tabs.nav > li.active > a:hover, .view-tabs .nav-tabs.nav > li.active > a:focus { color: #0080b4; background: none; } .view-tabs .tab-content > .tab-pane { padding: 16px 0 0; } .view-tabs .tab-content .infotable table td { width: 50%; } .view-tabs .tab-content .infotable table td img { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; } .fav-repo .desc-list, .watch-vid-details .desc-list { list-style: none; padding: 0; margin: 0; color: #000; font-size: 14px; } .fav-repo .desc-list li, .watch-vid-details .desc-list li { margin: 0 0 10px; } .fav-repo .desc-list li img, .watch-vid-details .desc-list li img { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; } .fav-repo .desc-list li a, .watch-vid-details .desc-list li a { color: #0080b4; } .fav-repo .desc-list li a:hover, .watch-vid-details .desc-list li a:hover { text-decoration: none; color: #005c81; } .social-share { list-style: none; padding: 0; margin: 0; margin: 0 0 16px; font-size: 44px; line-height: 44px; } .social-share li { display: inline-block; vertical-align: top; margin: 0 10px 0 0; } .social-share li a { display: block; background: #fff; width: 44px; height: 44px; } .social-share li a:hover { text-decoration: none; } .social-share li a.btn-fb { color: #2b4b90; } .social-share li a.btn-tw { color: #1c95d0; } .social-share li a.btn-gplus { color: #d34332; } .social-share li a span { font-size: 0; line-height: 0; } .share_form .form-group label.block-label { font-size: 18px; line-height: 18px; font-weight: 600; margin: 0 0 16px; display: block; } .share_form .form-group label.block-label span { font-size: 14px; color: #757575; } .share_form .form-group .radio-inline { margin: 0 16px 10px 0; padding: 0; line-height: 22px; } .share_form .form-group .radio-inline input[type="radio"] { margin-top: 2px; } .share_form textarea { resize: none; } .share_form .btn-submit { font-size: 15px; line-height: 15px; font-weight: 600; } /* end of watch video */ /* photos page */ .photos .row { margin: 0 -8px; } .item-photo { padding: 0 8px; margin: 0 0 16px; } .item-photo .photo-holder { display: block; position: relative; text-decoration: none; color: #fff; z-index: 1; } .item-photo .photo-holder img { width: 100%; } .item-photo .photo-holder:after { background: rgba(0, 0, 0, 0.8); content: ""; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: -9999px; } .item-photo .photo-holder i { position: absolute; z-index: 3; width: 40px; height: 40px; font-size: 40px; line-height: 40px; top: 50%; left: -9999px; margin: -20px 0 0 -20px; } .item-photo .photo-holder:hover:after { left: 0; } .item-photo .photo-holder:hover i { left: 50%; } .item-photo .photo-info { overflow: hidden; background: #fff; padding: 10px; font-size: 14px; line-height: 14px; font-weight: 300; position: relative; z-index: 1; height: 82px; } .item-photo .photo-info strong, .item-photo .photo-info span { display: block; } .item-photo .photo-info strong { font-size: 18px; line-height: 20px; font-weight: 400; margin: 0 0 8px; } .item-photo .photo-info strong a { color: #000; } .item-photo .photo-info span { position: absolute; z-index: 2; left: 10px; bottom: 10px; color: #0080b4; } .item-photo .photo-info span a { color: #0080b4; } /**/ .photos .heading { margin: 0 0 10px; } /* view photo */ .photo-view { position: relative; background: #fff; margin: 0 0 16px; } .photo-view img { margin: 0 auto; } .photo-view .btn-holder { position: absolute; bottom: 20px; right: 20px; z-index: 4; width: 112px; } .photo-view .view-photo-nxt, .photo-view .view-photo-pre { border: none; width: 48px; height: 48px; padding: 12px; font-size: 24px; line-height: 24px; background: #f3f3f3; border-radius: 50%; text-align: center; float: left; } .photo-view .view-photo-nxt i, .photo-view .view-photo-pre i { font-size: 0; line-height: 0; } .photo-view .view-photo-nxt:focus, .photo-view .view-photo-nxt:hover, .photo-view .view-photo-pre:focus, .photo-view .view-photo-pre:hover { background: #f3f3f3; box-shadow: none; color: #0080b4; } .photo-view .view-photo-nxt { float: right; } /**/ #messageFav.channel-alert { position: fixed; width: 100%; top: 0; left: 0; z-index: 10; } /* end of watch video */ /* pagination */ .pagination { background: #fff; font-size: 18px; } .pagination > li a { background: #fff; border-color: #fff; color: #000; } .pagination > li a:hover { background: #fff; border-color: #fff; color: #0080b4; } .pagination > li a i { display: inline-block; vertical-align: top; font-size: 14px; line-height: 26px; } .pagination > li.active > a, .pagination > li.active > a:focus, .pagination > li.active > a:hover, .pagination > li.active > span, .pagination > li.active > span:focus, .pagination > li.active > span:hover { background: #fff; border-color: #fff; color: #0080b4; } .breadcrumb { text-transform: capitalize; font-weight: 600; font-size: 24px; line-height: 26px; padding: 5px 0 10px; border-bottom: 1px solid #d9d9d9; border-radius: 0; background: #f8f8f8; } .breadcrumb > li + li:before { color: #555; } .breadcrumb > .active { color: #17181a; } .breadcrumb a { color: #555; } /* add to playlist */ #cb-item-addto .btn-fav, #cb-item-addto .btn-holder { margin: 0 0 15px; } /* playlist form */ #new_playlist_form .form-group > div, #add_playlist_form .form-group > div { padding: 0 0 0 15px; } #new_playlist_form .form-group > div:first-child, #add_playlist_form .form-group > div:first-child { padding: 0 15px 0 0; } #flag_form .label-block { display: block; margin: 0 0 10px; } .fav-repo { background: #fff; padding: 16px; margin: 0 0 20px; } .fav-repo .photoStats { margin: 0 0 10px; } .fav-repo .photoStats .btn:first-child { margin: 0 10px 0 0; } .fav-repo input[type="button"] { margin: 0 0 16px; } /* comments */ .comments-block { background: #fff; padding: 16px; } .addComment { color: #2d2d2d; } .addComment h2 { font-size: 25px; line-height: 25px; font-weight: 400; margin: 0 0 11px; padding: 0 0 16px; border-bottom: 1px solid #d9d9d9; color: #000; } .addComment .com-txtarea { margin: 0 0 16px; } .addComment .block-label { display: block; margin: 0 0 10px; } .addComment .btn-submit { font-size: 15px; line-height: 15px; font-weight: 600; } textarea#comment_box { height: 58px; resize: none; width: 100%; } .avatar_comment_as { width: 58px; height: 58px; border-radius: 50%; float: left; margin: 0 16px 0 0; } .avatar_comment_as img { display: block; width: 100%; height: 100%; } .comment_txt_area { overflow: hidden; } .comment_txt_area .form-control { box-shadow: none; } .comments > ul { list-style: none; padding: 0; margin: 0; } .comments > ul > li { padding: 0 0 10px; position: relative; } .comments > ul > li:last-child { padding: 0; } .comments > ul > li .comment-avatar { float: left; width: 58px; margin: 0 16px 0 0; } .comments > ul > li .comment-avatar img { width: 58px; height: 58px; border-radius: 50%; } .comments > ul > li > ul { padding: 0 0 0 74px; } .comments > ul > li .comment-info { overflow: hidden; padding: 0 0 10px; font-size: 15px; } .comments > ul > li .comment-info .commenter { display: block; font-size: 16px; line-height: 16px; font-weight: 600; margin: 0 0 10px; } .comments > ul > li .comment-info .commenter span { display: inline-block; vertical-align: top; margin: 0 0 0 10px; color: #9e9e9e; } .comments > ul > li:first-child { border-bottom: none; } .comments > ul > li .btn-info { padding: 8px 15px !important; border-radius: 4px; font-size: 16px; margin-top: 15px; } .comments > ul > li .users img { border-radius: 50%; width: 33px; height: 33px; vertical-align: middle; display: inline-block; margin-right: 10px; border: 1px solid #ecf0f1; } .comments > ul > li .users span { vertical-align: middle; display: inline-block; font-size: 16px; } .comments > ul > li .reply > ul { list-style-type: none; } .comments > ul > li .reply > ul > li { display: inline-block; position: relative; padding: 0 6px; } .comments > ul > li .reply > ul > li:after { content: ''; display: block; clear: both; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background-color: #777; margin-top: -7px; } .comments > ul > li .reply > ul > li:first-child:after { content: ''; display: block; clear: both; display: none; } .comments > ul > li .reply > ul > li > a { color: #777; font-size: 12px; } .comments > ul > li .reply > ul > li > a:hover { color: #0099cc; } .comments > ul > li .commented-txt { font-size: 15px; line-height: 17px; margin: 0 0 8px; } .comments > ul > li .commented-txt p { margin: 0; } .comments > ul > li .com-info-actions { color: #9e9e9e; font-size: 15px; list-style: 15px; font-weight: 600; overflow: hidden; } .comments > ul > li .com-info-actions span { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; } .comments > ul > li .com-info-actions .reply { display: inline-block; vertical-align: middle; } .comments > ul > li .com-info-actions .reply a { color: #9e9e9e; } .comments > ul > li .view-date { padding: 5px 0 0 4px; } .comments > ul > li .view-date span { padding: 0 10px; font-weight: 300; color: #6d6d6d; font-size: 13px; } .comments > ul > li .view-date span:first-child { padding-left: 0px; } .comments > ul > li .view-date span:last-child { padding-right: 0px; border-right: none; } .comments > ul > li .view-date span i { margin-right: 10px; display: inline-block; } .comments > ul > li .view-date span i:first-child { margin-left: 0px; } .comments > ul > li .view-date span i.view { width: 19px; height: 11px; } .comments > ul > li .view-date span i.date { width: 17px; height: 16px; } .comments > ul > li .reply-holder .comment-avatar { float: left; width: 46px; height: 46px; margin: 0 16px 0 0; } .comments > ul > li .reply-holder .comment-avatar img { width: 46px; height: 46px; border-radius: 50%; } /* end of comments */ /* channels page */ .channels .row { margin: 0 -8px; } .item-channel { padding: 0 8px; margin: 0 0 20px; } .item-channel .channel-holder { background: #fff; border: 1px solid #d9d9d9; color: #000; font-size: 13px; line-height: 13px; text-align: center; } .item-channel .user-block { display: block; background: #fff; color: #000; padding: 22px 0 0; border-bottom: 1px solid #d9d9d9; } .item-channel .user-block:hover { text-decoration: none; } .item-channel .avatar { display: block; width: 66px; height: 66px; border-radius: 50%; background: #fff; margin: 0 auto 14px; } .item-channel h2 { font-size: 18px; line-height: 20px; font-weight: 600; margin: 0 0 12px; height: 40px; overflow: hidden; } .item-channel .info { padding: 10px 0; background: #f6f6f6; } .item-channel .info .col { width: 50%; float: left; padding: 0 10px; border-left: 1px solid #d9d9d9; } .item-channel .info .col:first-child { border: none; } .item-channel .info strong { display: block; padding: 10px 0 0; margin: 0 0 10px; border-top: 1px solid #d9d9d9; font-size: 13px; line-height: 13px; font-weight: 300; color: #a3a3a3; } .item-channel .info strong:first-child { border: none; padding: 0; } .item-channel .info strong span { display: block; margin: 10px 0 0; font-weight: 600; font-size: 14px; line-height: 14px; color: #000; } .item-channel .btn-subscribe { display: inline-block; vertical-align: top; font-style: normal; color: #010101; background: #f0f0f0; border-color: #f0f0f0; font-size: 15px; font-weight: 400; padding: 5px 10px; margin: 0 0 10px; } .item-channel .btn-subscribe.unsub { background: #0066cd; border-color: #0066cd; color: #fff; } /* end of channels block */ /* view channel page */ .cover { position: relative; z-index: 1; margin: 0 0 16px; } .cover .cover-holder { position: relative; z-index: 2; } .cover .cover-holder > img { width: 100%; max-height: 222px; } .cover .changeCover { display: none; background: #0080b4; border-radius: 4px; color: #fff; position: absolute; top: 10px; left: 10px; } .cover .changeCover span { display: inline-block; vertical-align: top; font-size: 18px; line-height: 18px; margin: 0 0 0 5px; } .cover .friend-block { position: absolute; top: 10px; right: 10px; } .cover .ratting-counts { position: absolute; bottom: 0; left: 0; z-index: 3; width: 100%; height: 40px; padding: 10px 0 10px 190px; background: rgba(0, 0, 0, 0.55); font-size: 14px; line-height: 20px; color: #bbbbbb; } .cover .ratting-counts .user-ratting { float: left; width: 210px; } .cover .counters { overflow: hidden; list-style: none; padding: 0; margin: 0; text-align: right; } .cover .counters li { display: inline-block; vertical-align: middle; margin: 0 16px 0 0; } .cover .counters li i { font-size: 20px; line-height: 20px; display: inline-block; vertical-align: middle; margin: 0 6px 0 0; } .cover .avatar { position: absolute; left: 50px; bottom: 16px; z-index: 2; background: #fff; border-radius: 50%; width: 122px; height: 122px; padding: 3px; } .cover .avatar img { width: 100%; height: 100%; } .cover .profile-buttons { padding: 20px 20px 20px 190px; background: #fff; color: #000; } .cover .profile-buttons h2 { font-size: 18px; line-height: 32px; font-weight: 600; margin: 0 5px 0 0; float: left; } .cover .profile-buttons .btn-holder { overflow: hidden; text-align: right; } .cover .profile-buttons .btn-default { font-size: 14px; line-height: 22px; min-width: 110px; font-weight: 600; border: 2px solid #000; color: #000; border-radius: 4px; padding: 4px 6px; margin: 0 0 0 16px; } .cover .profile-buttons .btn-default:hover, .cover .profile-buttons .btn-default:active { color: #fff; background: #0080b4; border-color: #0080b4; } .channel-tabs { background: #fff; padding: 10px 16px; } /* recent activities */ .user-activities { overflow-y: auto; } .user-activities .feed { font-size: 13px; line-height: 16px; padding: 14px 0; border-top: 1px solid #d9d9d9; } .user-activities .feed:first-child { border: none; padding: 0 0 14px; } .user-activities .avatar { float: left; width: 44px; height: 44px; border-radius: 50%; margin: 0 10px 0 0; } .user-activities .avatar img { width: 100%; height: 100%; border-radius: 50%; } .user-activities .text { overflow: hidden; } .user-activities .text span { display: block; margin: 0 0 10px; font-weight: 300; } .user-activities .text span a { font-weight: 600; color: #0080b4; } .ch-playlists .playlist-block { margin: 0 0 20px; } .ch-playlists .playlist-thumb { color: #333; } .ch-playlists .playlist-thumb h2 { font-size: 12px; line-height: 12px; margin: 0 0 5px; font-weight: 500; } .ch-playlists .playlist-thumb h2 a { color: #333; } .ch-playlists .playlist-thumb h2 a:hover { text-decoration: none; } .ch-playlists .playlist-thumb .playlist-box { display: block; position: relative; color: #fff; margin: 0 0 5px; } .ch-playlists .playlist-thumb .playlist-box span { background: rgba(0, 0, 0, 0.8); height: 100%; padding: 15px 20px; position: absolute; right: 0; text-align: center; top: 0; width: 80px; font-size: 12px; line-height: 18px; } .ch-playlists .playlist-thumb .playlist-box span img { display: block; height: auto; margin: 10px auto 0; max-width: 20px; } .ch-playlists .playlist-thumb .playlist-box > img { max-height: 100px; width: 100%; } .ch-playlists .playlist-thumb .date-time { display: block; background: url(../images/sprite.png) no-repeat -23px -1323px; color: #a3a3a3; font-size: 10px; line-height: 14px; margin: 5px 0 0; padding: 2px 0 2px 25px; } /* end view channel page */ /* playlist */ .item_playlist { margin: 0 0 20px; } .item_playlist .playlist-thumb { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; width: 100px; height: 100px; } .item_playlist .playlist-thumb img { width: 100%; height: 100%; } .item_playlist .playlist-thumb a { display: block; height: 100%; color: #fff; position: relative; } .item_playlist .playlist-thumb a:hover { text-decoration: none; } .item_playlist .playlist-thumb a:hover:after { content: ""; background: rgba(0, 0, 0, 0.6); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .item_playlist .playlist-thumb a:hover i { left: 50%; } .item_playlist .playlist-thumb a i { font-size: 12px; line-height: 12px; position: absolute; z-index: 2; top: 50%; left: -9999px; width: 24px; height: 24px; border-radius: 50%; padding: 4px 3px 4px 5px; margin: -10px 0 0 -10px; text-align: center; border: 2px solid #fff; } .item_playlist h3 { margin: 0 0 5px; font-size: 14px; line-height: 24px; font-weight: 700; } .item_playlist h3 span { float: right; font-size: 12px; line-height: 14px; font-weight: 400; margin: 0 0 0 5px; padding: 5px 10px; min-width: 50px; border-radius: 12px; background: #0080b4; color: #fff; } .item_playlist h3 span i { vertical-align: middle; font-size: 8px; line-height: 8px; background: #fff; padding: 2px 5px 1px; color: #0080b4; margin: 0 5px 0 0; } .item_playlist .date-time { float: right; font-size: 18px; padding: 25px 10px; line-height: 30px; font-weight: 300; } /**/ .buy-premium { left: auto !important; right: 20px; text-indent: 0 !important; font-size: 0; line-height: 0; z-index: 4 !important; } .buy-premium i ~ span { opacity: 0; } .buy-premium:hover { font-size: 14px; line-height: 44px; } .buy-premium:hover i ~ span { opacity: 1; } /* signin signup area */ .account-container { display: table; width: 100%; height: 100%; text-align: center; font-size: 18px; line-height: 20px; overflow-y: auto; color: #8f8f8f; } .account-container a { color: #8f8f8f; } .account-container .forgot-block, .account-container .signin-block, .account-container .signup-block { display: table-cell; vertical-align: middle; } .account-container .account-holder { max-width: 1170px; margin: 0 auto; padding: 20px 0; } .account-container .signup-block .account-holder, .account-container .forgot-block .account-holder { max-width: 630px; } .account-container .signup-block .account-holder .user-form, .account-container .forgot-block .account-holder .user-form { width: 100%; margin: 0; } .signup-block, .forgot-block, .signin-block { text-align: left; } .signup-block h2, .forgot-block h2, .signin-block h2 { font-size: 34px; line-height: 34px; font-weight: 300; margin: 0 0 20px; color: #000; } .signup-block .text-box, .forgot-block .text-box, .signin-block .text-box { margin: 0 0 20px; } .signup-block .side-box, .signup-block .user-form, .forgot-block .side-box, .forgot-block .user-form, .signin-block .side-box, .signin-block .user-form { display: inline-block; vertical-align: middle; width: 46%; margin: 0 0 0 -4px; padding: 100px 60px; } .signup-block .user-form, .forgot-block .user-form, .signin-block .user-form { background: #fff; width: 54%; padding: 50px 90px; } .signup-block .user-form h2, .forgot-block .user-form h2, .signin-block .user-form h2 { margin: 0 0 40px; } .signup-block .side-box, .forgot-block .side-box, .signin-block .side-box { background: #0080b4; color: #fff; font-size: 15px; line-height: 24px; } .signup-block .side-box h2, .forgot-block .side-box h2, .signin-block .side-box h2 { color: #fff; } .signup-block .side-box .btn-default, .forgot-block .side-box .btn-default, .signin-block .side-box .btn-default { font-size: 25px; line-height: 28px; font-weight: 400; background: #0080b4; border: 2px solid #fff; color: #fff; } .signup-block .form-group, .forgot-block .form-group, .signin-block .form-group { margin: 0 0 20px; position: relative; } .signup-block .form-control, .forgot-block .form-control, .signin-block .form-control { height: 50px; font-size: 18px; line-height: 26px; font-weight: 300; padding: 13px 20px; background: #fff; box-shadow: none; } .signup-block input[type="submit"], .forgot-block input[type="submit"], .signin-block input[type="submit"] { margin: 0 0 10px; font-size: 25px; line-height: 28px; } .signup-block input[type="submit"].btn-success, .forgot-block input[type="submit"].btn-success, .signin-block input[type="submit"].btn-success { margin: 0; } .signup-block .links, .forgot-block .links, .signin-block .links { margin: 0 0 10px; font-size: 15px; } .signup-block .links a, .forgot-block .links a, .signin-block .links a { float: right; } .signup-block .links a:first-child, .forgot-block .links a:first-child, .signin-block .links a:first-child { float: left; } .signup-block .social-links, .forgot-block .social-links, .signin-block .social-links { text-align: center; } .signup-block .social-links span, .forgot-block .social-links span, .signin-block .social-links span { color: #000; display: inline-block; vertical-align: middle; margin: 0 20px 0 0; } .signup-block .social-links #social_buttons, .forgot-block .social-links #social_buttons, .signin-block .social-links #social_buttons { display: inline-block; vertical-align: middle; width: 240px; overflow: hidden; } .signup-block .social-links #social_buttons a, .forgot-block .social-links #social_buttons a, .signin-block .social-links #social_buttons a { width: 48px; height: 48px; overflow: hidden; float: left; margin: 0 10px 0 0; border-radius: 50%; font: 48px/48px "icomoon"; text-align: center; } .signup-block .social-links #social_buttons a img, .forgot-block .social-links #social_buttons a img, .signin-block .social-links #social_buttons a img { display: none; } .signup-block .social-links #social_buttons a:after, .forgot-block .social-links #social_buttons a:after, .signin-block .social-links #social_buttons a:after { background: #fff; } .signup-block .social-links #social_buttons a.google-btn, .forgot-block .social-links #social_buttons a.google-btn, .signin-block .social-links #social_buttons a.google-btn { background: #d34332; color: #d34332; } .signup-block .social-links #social_buttons a.google-btn:after, .forgot-block .social-links #social_buttons a.google-btn:after, .signin-block .social-links #social_buttons a.google-btn:after { content: "\e904"; } .signup-block .social-links #social_buttons a.facebook-btn, .forgot-block .social-links #social_buttons a.facebook-btn, .signin-block .social-links #social_buttons a.facebook-btn { background: #2b4b90; color: #2b4b90; } .signup-block .social-links #social_buttons a.facebook-btn:after, .forgot-block .social-links #social_buttons a.facebook-btn:after, .signin-block .social-links #social_buttons a.facebook-btn:after { content: "\e902"; } .signup-block .social-links #social_buttons a.twitter-btn, .forgot-block .social-links #social_buttons a.twitter-btn, .signin-block .social-links #social_buttons a.twitter-btn { background: #1c95d0; color: #1c95d0; } .signup-block .social-links #social_buttons a.twitter-btn:after, .forgot-block .social-links #social_buttons a.twitter-btn:after, .signin-block .social-links #social_buttons a.twitter-btn:after { content: "\e911"; } .signup-block .social-links #social_buttons a.linkedin-btn, .forgot-block .social-links #social_buttons a.linkedin-btn, .signin-block .social-links #social_buttons a.linkedin-btn { background: #007bb5; color: #007bb5; } .signup-block .social-links #social_buttons a.linkedin-btn:after, .forgot-block .social-links #social_buttons a.linkedin-btn:after, .signin-block .social-links #social_buttons a.linkedin-btn:after { content: "\e915"; } .signup-block .g-recaptcha, .forgot-block .g-recaptcha, .signin-block .g-recaptcha { margin: 0 0 20px; } .signup-block .invalid-error .form-control, .forgot-block .invalid-error .form-control, .signin-block .invalid-error .form-control { border-color: #f44336; } .signup-block .invalid-error:after, .forgot-block .invalid-error:after, .signin-block .invalid-error:after { color: #f44336; position: absolute; content: "\e914"; z-index: 4; width: 22px; height: 22px; font: 22px/22px "icomoon"; top: 16px; right: 10px; } .signup-block .invalid-error .error-txt, .signup-block .invalid-error .help-block, .forgot-block .invalid-error .error-txt, .forgot-block .invalid-error .help-block, .signin-block .invalid-error .error-txt, .signin-block .invalid-error .help-block { color: #f44336; } .signup-block .success-ind .form-control, .forgot-block .success-ind .form-control, .signin-block .success-ind .form-control { border-color: #4caf50; } .signup-block .success-ind:after, .forgot-block .success-ind:after, .signin-block .success-ind:after { color: #4caf50; position: absolute; content: "\e910"; z-index: 4; width: 22px; height: 22px; font: 22px/22px "icomoon"; top: 14px; right: 10px; } .signup-block .success-ind .help-block, .forgot-block .success-ind .help-block, .signin-block .success-ind .help-block { color: #4caf50; } .signup-block .warning-ind .form-control, .forgot-block .warning-ind .form-control, .signin-block .warning-ind .form-control { border-color: #ffa000; } .signup-block .warning-ind:after, .forgot-block .warning-ind:after, .signin-block .warning-ind:after { color: #ffa000; position: absolute; content: "\e910"; z-index: 4; width: 22px; height: 22px; font: 22px/22px "icomoon"; top: 14px; right: 10px; } .signup-block .warning-ind .help-block, .forgot-block .warning-ind .help-block, .signin-block .warning-ind .help-block { color: #ffa000; } .forgot-block .user-form h2 { margin: 0 0 20px; } /* cutomization ended */ /**/ .manageVid_thumb { display: block; position: relative; } .manageVid_thumb .duration { position: absolute; bottom: 5px; right: 5px; padding: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; } .manageVid_thumb img { width: 100%; } /**/ .account_box, .manage-page { margin-top: 20px; color: #333; } .account_box h3, .account_box h2, .manage-page h3, .manage-page h2 { margin: 0 0 10px; font-size: 24px; line-height: 24px; font-weight: 500; } .account_box h3, .manage-page h3 { font-size: 14px; line-height: 16px; } .account_box .nav-pills > li, .manage-page .nav-pills > li { border: solid #dadada; border-width: 0 1px 1px; } .account_box .nav-pills > li:first-child, .manage-page .nav-pills > li:first-child { border-width: 1px; } .account_box .nav-pills > li > a, .manage-page .nav-pills > li > a { color: #000; } .account_box .nav-pills > li.active > a, .account_box .nav-pills > li.active > a:hover, .account_box .nav-pills > li.active > a:focus, .manage-page .nav-pills > li.active > a, .manage-page .nav-pills > li.active > a:hover, .manage-page .nav-pills > li.active > a:focus { background: #f7f7f7; color: #333; font-weight: 700; } .account_box .account_form label.label-heading, .manage-page .account_form label.label-heading { display: block; } .account_box .account_form .radio input[type="radio"], .account_box .account_form .radio-inline input[type="radio"], .account_box .account_form .checkbox input[type="checkbox"], .account_box .account_form .checkbox-inline input[type="checkbox"], .manage-page .account_form .radio input[type="radio"], .manage-page .account_form .radio-inline input[type="radio"], .manage-page .account_form .checkbox input[type="checkbox"], .manage-page .account_form .checkbox-inline input[type="checkbox"] { margin: 0 10px 0 0; position: static; } .account_box .manage-tab-header, .manage-page .manage-tab-header { margin: 0 0 20px; } .account_box .manage-tab-header > div:first-child, .manage-page .manage-tab-header > div:first-child { padding: 20px 0 0; } /* upload page */ .photoupload-block { padding: 20px 0 0; } .uploadFormSidebarDiv .categoriesContainer { overflow-y: auto; height: 408px; } .uploadFormSidebarDiv .categoriesContainer .radio, .uploadFormSidebarDiv .categoriesContainer .checkbox { padding: 0 0 0 20px; } .upload_info .upload_form .field { overflow-y: auto; height: 200px; } /* allProgress */ .upload-area { padding: 0; } .upload-area .dragDropContainer { min-height: 100px; text-align: center; border: 2px dashed #ccc; padding: 20px; margin: 0 0 20px; } .upload-area .dragDropContainer .upload-logo { width: 100px; height: 100px; display: block; margin: 0 auto 20px; background: url(../images/upload-icon.png) no-repeat; } .upload-area .dragDropContainer .block-title { display: block; margin: 0 0 10px; } .uploadDataContainer #uploadMore { margin: 10px 0; } .uploadDataContainer .nav-tabs { margin: 0 0 20px; } .uploadingProgressContainer .alert p { font-weight: 700; } .uploadingProgressContainer .alert p small { color: #000 !important; } .upload_form .input-group { margin: 0 0 15px; } .upload_form .radio input[type="radio"], .upload_form .radio-inline input[type="radio"], .upload_form .checkbox input[type="checkbox"], .upload_form .checkbox-inline input[type="checkbox"] { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; position: static; } #updateVideoInfo .formSection { margin: 0 0 10px; } #updateVideoInfo .formSection h4 { background: #f5f5f5; margin: 0; padding: 10px; } .form_result, #flag_form_result { margin: 0 0 10px; } .msg, .result_cont { padding: 10px; background: #dff0d8; } .msg:after, .result_cont:after { display: block; clear: both; content: ""; } .searchBox { margin-top: 20px; } /* 404 page css start */ .error-pix-sec { width: 100%; margin-top: 100px; } .error-pix-403 { width: 312px; height: 157px; margin: 0px auto; background-image: url(../../images/403.png); background-repeat: no-repeat; display: block; } .error-pix-404 { width: 312px; height: 157px; margin: 0px auto; background-image: url(../../images/404.png); background-repeat: no-repeat; display: block; } .error-text-sec { width: 720px; margin: 0 auto 20px; } .error-text-sec2 { width: 290px; margin: 0px auto; } .error-text { width: 100%; color: #908f8f; font-size: 33px; line-height: 36px; margin-top: 20px; } .error-text span { width: 32px; height: 32px; display: inline-block; vertical-align: middle; background-image: url(../../images/eror_colin.png); background-repeat: no-repeat; } /* animate-spin */ .form_result { padding: 5px 0; line-height: 22px; } .form_result i.glyphicon { line-height: 22px; margin: 0 10px 0 0; top: auto; } .animate-spin { display: inline-block; vertical-align: top; -webkit-animation: rotate 0.5s infinite linear; -moz-animation: rotate 0.5s infinite linear; -ms-animation: rotate 0.5s infinite linear; -o-animation: rotate 0.5s infinite linear; animation: rotate 0.5s infinite linear; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-o-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } .btn-group.show .btn i { margin: 0 5px 0 0; } /* view collection */ .collections-heading { padding: 0 5px; } .collection-header { margin: 0 0 20px; } .collection-header h3 { margin: 0; line-height: 20px; } .collection-header h3 span { color: #777; display: block; font-size: 16px; margin: 5px 0 0; } .user_block .avatar { width: 60px; height: 60px; } .user_block .prof_title { overflow: hidden; padding: 0 0 0 10px; } .cb-box { background: #fff; padding: 16px; } /* groups */ .creat_group .checkbox { margin: 0 0 10px; padding: 0 0 0 20px; } .creat_group .radio input[type="radio"], .creat_group .radio-inline input[type="radio"], .creat_group .checkbox input[type="checkbox"], .creat_group .checkbox-inline input[type="checkbox"] { margin: 0 0 0 -20px; } .group-item { margin: 0 0 20px; } .group-item h2 { font-size: 20px; line-height: 20px; font-weight: 300; margin: 0 0 10px; } .group-item .avatar { width: 140px; height: 140px; float: left; margin: 0 10px 0 0; } .group-item .avatar img { width: 100%; height: 100%; } .group-item .text { overflow: hidden; } .viewGroupTabs .btn { height: 36px; } .viewGroupTabs .btn img { display: block; } /**/ /* variables */ /**/ /**/ /* buttons */ .btn-default { background: #ececec; border-color: #ececec; font-weight: 400; color: #000; } .btn-default:hover, .btn-default:active { background: #ececec; border-color: #ececec; } .btn-ghost { background: #fff; border: 2px solid #000; padding: 5px 10px; font-weight: 400; font-size: 15px; line-height: 21px; color: #000; } .btn-ghost.btn-lg { font-size: 18px; line-height: 36px; } .btn-ghost:hover, .btn-ghost:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-primary { background: #0080b4; border-color: #0080b4; font-weight: 400; color: #fff; } .btn-primary:hover, .btn-primary:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-success { background: #4caf50; border-color: #4caf50; font-weight: 400; color: #fff; } .btn-success:hover, .btn-success:active { background: #4caf50; border-color: #4caf50; color: #fff; } .btn-black { background: #212121; border-color: #212121; font-weight: 400; font-size: 15px; color: #fff; } .btn-black:hover, .btn-black:active { background: #212121; border-color: #212121; color: #fff; } /* form elements */ .form-control { color: #000; background: #f6f6f6; border-color: #d9d9d9; font-size: 15px; line-height: 28px; height: 42px; /* placeholder input styles */ } .form-control input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #bdbdbd; } .form-control input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bdbdbd; } .form-control input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bdbdbd; opacity: 1; } .form-control input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bdbdbd; } /* sprite */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) { .playlists-dropdown .item_playlist .playlist-thumb .date-time, .playlists-dropdown .playlist-header .close-playlists, .headerIcon.active.playlist-icon a, .headerIcon.active.channels-icon a, .headerIcon.active.video-icon a, .headerIcon.playlist-icon a, .headerIcon.channels-icon a, .headerIcon.video-icon a, .navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting, .navbar-default .right-menu.navbar-nav > li > a.btn-upload, .ch-playlists .playlist-thumb .date-time, .rating .like-dislike a.btn-dislike i, .rating .like-dislike a.btn-like i { background-image: url("../images/sprite@2x.png") !important; /* Translate the @2x sprite's dimensions back to 1x */ background-size: 60px 4400px !important; } } /* placeholder input styles */ .search input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #a8a8a8; } .search input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a8a8a8; } .search input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #a8a8a8; opacity: 1; } .search input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #a8a8a8; } /**/ #header { padding: 0 10px; font-size: 14px; line-height: 16px; color: #000; position: fixed; width: 100%; top: 0; left: 0; z-index: 5; background: #fff; } #header .icon-down-arrow { font-size: 11px; line-height: 34px; display: inline-block; vertical-align: bottom; margin: 0 0 0 6px; } #header .navbar-toggle .icon-down-arrow { line-height: 20px; } #header .search-drop .icon-down-arrow { line-height: 22px; } #header .btn-upload .icon-down-arrow { line-height: 20px; } #header .menu-holder { display: table; width: 100%; } #header .menu-holder .col { display: table-cell; vertical-align: middle; padding: 0 0 0 10px; text-align: left; } #header .menu-holder .col.search { width: 320px; } #header .menu-holder .col.user_menu { text-align: right; width: 740px; } #header .menu-holder .col.user_menu .search { width: 320px; display: inline-block; vertical-align: middle; } #header .menu-holder .col.user_menu.logged-out { width: 600px; } #header .main-links { display: inline-block; vertical-align: middle; } #header .main-links > ul { font-size: 16px; line-height: 36px; list-style: none; padding: 0; margin: 0; } #header .main-links > ul > li { display: inline-block; vertical-align: top; } #header .main-links > ul > li > a { color: #000; display: block; padding: 12px 5px; } #header .main-links > ul > li > a:focus, #header .main-links > ul > li > a:hover { color: #000; text-decoration: none; position: relative; } #header .main-links > ul > li > a:focus:after, #header .main-links > ul > li > a:hover:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #0080b4; } #header .main-links > ul > li.active a { font-weight: 600; text-decoration: none; position: relative; } #header .main-links > ul > li.active a:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #0080b4; } #header .navbar { min-height: inherit; margin: 0; background: none; border: none; padding: 0; } #header .container-fluid { padding: 0; } #header .navbar-collapse { padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #header .navbar-collapse .search { padding: 0; } #header .search form.search-form { border-radius: 4px; } #header .search .cbsearchtype { background: #f9f9f9; width: 100%; padding: 0 40px 0 94px; text-align: left; border-radius: 4px; position: relative; } #header .search .cbsearchtype:after { display: block; clear: both; content: ""; } #header .search .cbsearchtype .btn-default { height: 34px; padding: 0; font-weight: 400; font-size: 14px; line-height: 34px; border: none; background: none; box-shadow: none; color: #000; } #header .search .cbsearchtype .btn-default.btn-search { background: #0080b4; color: #fff; font-size: 20px; width: 40px; border-radius: 0 4px 4px 0; position: absolute; right: 0; top: 0; } #header .search .cbsearchtype .search-drop { width: 94px; position: absolute; left: 0; top: 0; color: #000; background: #ececec; border-radius: 4px 0 0 4px; } #header .search .cbsearchtype .search-drop .btn-default { padding: 6px; line-height: 20px; width: 100%; } #header .search .cbsearchtype .search-drop .btn-default .search-type { display: inline-block; vertical-align: middle; } #header .search input[type="text"] { padding: 3px 10px; height: 34px; color: #a8a8a8; font-size: 14px; line-height: 20px; background: none; box-shadow: none; border: none !important; } #header .dropdown-menu { margin: 0; padding: 0; box-shadow: none; border: none; border-radius: 0 0 4px 4px; overflow: hidden; } #header .dropdown-menu > li > a { line-height: 24px; color: #404040; border-top: 1px solid #d9d9d9; } #header .dropdown-menu > li > a i.glyphicon { color: #ffa000; } #header .dropdown-menu > li > a:hover { color: #fff; background: #0080b4; } #header .dropdown-menu > li:first-child > a { border: none; } #header .dropdown-menu .divider { margin: 0; } #header .dropdown-menu > .active > a, #header .dropdown-menu > .active > a:hover, #header .dropdown-menu > .active > a:focus { background: #0080b4; color: #fff; } #header .right-menu .dropdown-menu, #header .search-drop .dropdown-menu { padding: 13px 0 0; } .search-icon { font: 17px/20px "icomoon"; } .navbar-header { padding: 10px 0; float: none; display: table-cell; vertical-align: middle; width: 200px; } .btn-search-toggle { width: 30px; height: 30px; font-size: 20px; line-height: 20px; font-weight: 400; padding: 5px 4px 9px; color: #000; } .btn-search-toggle:active, .btn-search-toggle:focus, .btn-search-toggle:hover { color: #000; } .logo { width: 200px; height: 40px; margin: 0; font-size: 0; line-height: 0; } .logo a { display: block; height: 100%; height: 100%; position: relative; color: #fff; font-size: 0; line-height: 0; } .logo a:hover { text-decoration: none; } .logo a span { text-indent: -9999px; overflow: hidden; font-size: 0; line-height: 0; } .logo a img { width: 100%; } /**/ /**/ .header-holder { position: relative; display: table; width: 100%; } .header-holder .navbar-collapse { display: table-cell !important; vertical-align: middle; } .navbar-nav { float: none !important; } .navbar-default .navbar-toggle { padding: 0; margin: 0 0 0 16px; width: 70px; height: 34px; font-size: 16px; line-height: 22px; padding: 6px 0; font-weight: 600; border: none; background: none; box-shadow: none; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: none; box-shadow: none; } .navbar-default .navbar-nav > .open > a.user-area, .navbar-default .navbar-nav > .open > a.user-area:focus, .navbar-default .navbar-nav > .open > a.user-area:hover { background: none; } .navbar-default .navbar-right { float: none !important; display: inline-block; vertical-align: middle; } .navbar-default .right-menu { margin: 0 0 0 10px; font-size: 14px; /**/ } .navbar-default .right-menu.navbar-nav > li { padding: 0 0 0 10px; } .navbar-default .right-menu.navbar-nav > li > a { padding: 0; color: #000; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload { font-size: 14px; line-height: 22px; font-weight: 600; border: 2px solid #000; border-radius: 4px; padding: 4px 12px; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload .icon-upload { display: inline-block; vertical-align: top; line-height: 20px; margin: 0 10px 0 0; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload:hover, .navbar-default .right-menu.navbar-nav > li > a.btn-upload:focus { color: #fff; background: #000; } .navbar-default .right-menu.navbar-nav > li > a.user-area { display: block; font-weight: 600; } .navbar-default .right-menu.navbar-nav > li > a.user-area:focus { background: none; box-shadow: none; } .navbar-default .right-menu.navbar-nav > li > a.user-area img { display: inline-block; vertical-align: middle; margin: 0 10px; width: 36px; height: 36px; border-radius: 50%; } .navbar-default .right-menu.navbar-nav > li > a.user-area span { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; } .navbar-default .right-menu .btn-default { border: none; text-transform: capitalize; background: none; height: 34px; line-height: 34px; font-size: 14px; line-height: 34px; font-weight: 400; padding: 0; border: none; color: #000; box-shadow: none; } .navbar-default .right-menu .btn-default:hover, .navbar-default .right-menu .btn-default:focus, .navbar-default .right-menu .btn-default:active, .navbar-default .right-menu .btn-default.active { background: none; color: #000; } .navbar-default .right-menu .upload_link .btn-default, .navbar-default .right-menu .navbar-sm-login-links .btn-default { font-size: 14px; line-height: 22px; font-weight: 600; border: 2px solid #fff; border-radius: 4px; padding: 4px 6px; } .navbar-default .right-menu .upload_link .btn-default:hover, .navbar-default .right-menu .upload_link .btn-default:active, .navbar-default .right-menu .navbar-sm-login-links .btn-default:hover, .navbar-default .right-menu .navbar-sm-login-links .btn-default:active { color: #fff; } .navbar-default .right-menu .upload_link .btn-default.btn-newacc, .navbar-default .right-menu .navbar-sm-login-links .btn-default.btn-newacc { border-color: #000; } .navbar-default .right-menu .upload_link .btn-default.btn-newacc:hover, .navbar-default .right-menu .upload_link .btn-default.btn-newacc:active, .navbar-default .right-menu .navbar-sm-login-links .btn-default.btn-newacc:hover, .navbar-default .right-menu .navbar-sm-login-links .btn-default.btn-newacc:active { background: #000; } .navbar-default .right-menu .upload_link .btn-default.btn-login:hover, .navbar-default .right-menu .upload_link .btn-default.btn-login:active, .navbar-default .right-menu .navbar-sm-login-links .btn-default.btn-login:hover, .navbar-default .right-menu .navbar-sm-login-links .btn-default.btn-login:active { background: #4caf50; } .navbar-default .right-menu .open > .dropdown-toggle.btn-default { background: none; color: #fff; } .navbar-default .right-menu .btn-success:hover { background: #4caf50; } /**/ @media only screen and (max-width: 1280px) { #header .main-links > ul { font-size: 15px; line-height: 36px; } #header .main-links > ul > li > a { padding: 12px 5px; } #header .menu-holder .col.user_menu { width: 600px; } #header .menu-holder .col.user_menu .search { width: 286px; } #header .menu-holder .col.user_menu.logged-out { width: 430px; } #header .btn-upload .icon-down-arrow { display: none; } .navbar-default .right-menu { margin: 0 0 0 10px; } .navbar-default .right-menu.navbar-nav > li { padding: 0; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload { padding: 4px 8px; border-radius: 50%; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload span { display: none; } .navbar-default .right-menu.navbar-nav > li > a.btn-upload .icon-upload { margin: 0; } } @media only screen and (max-width: 1100px) { #header .main-links > ul { font-size: 14px; line-height: 36px; } #header .main-links > ul > li > a { padding: 12px 5px; } #header .menu-holder .col.user_menu { width: 410px; } #header .menu-holder .col.logged-out { width: 440px; } .navbar-default .right-menu.navbar-nav > li { padding: 0 0 0 10px; } .navbar-default .right-menu.navbar-nav > li:first-child { padding: 0; } .navbar-default .right-menu.navbar-nav > li > a.user-area img { margin: 0; } .navbar-default .right-menu.navbar-nav > li > a.user-area span { font-size: 0; line-height: 0; margin: 0; } } @media only screen and (max-width: 991px) { .logo { float: left; } /**/ .header-holder { display: block; } .header-holder .navbar-collapse { display: block !important; } .navbar-header { float: none !important; display: block !important; width: 100%; } .navbar-header .search { width: 300px; display: inline-block; vertical-align: middle; } .user_menu { float: right; width: 450px; } #header .menu-holder { display: block; } #header .menu-holder .col { display: block; padding: 0; } #header .menu-holder .col .main-links { display: block; } #header .menu-holder .col .main-links ul { font-size: 16px; line-height: 24px; } #header .menu-holder .col .main-links ul li { display: block; } #header .menu-holder .col .main-links ul li a { padding: 5px; } #header .menu-holder .col .main-links ul li a:after { display: none; } #header .menu-holder .col .main-links ul li a:hover { background: #0080b4; color: #fff; } #header .menu-holder .col .main-links ul li.active a { background: #0080b4; color: #fff; } /**/ .btn-search-toggle { float: right; } .navbar-header .collapse, .navbar-toggle { display: block !important; } .navbar-toggle { float: left; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } } @media only screen and (max-width: 767px) { .navbar-header { padding: 10px; } .user_menu { width: 100%; float: none; position: absolute; top: 0; left: -999px; background: #fff; padding: 0 10px 10px; } .show-search .user_menu { left: 0; top: 100%; } .navbar-header .search { width: 100%; } .newuser-links { list-style: none; padding: 0; margin: 0; font-size: 16px; line-height: 24px; } .newuser-links:after { content: ""; display: block; clear: both; } .newuser-links > li { float: right; width: 50%; } .newuser-links > li > a { display: block; width: 100%; padding: 5px; background: #fff; border-radius: 0; border: none; text-decoration: #000; } .newuser-links > li > a a:hover { background: #fff; color: #000; } .newuser-links > li > a.btn-default { font-size: 16px; line-height: 24px; text-align: left; } .newuser-links > li > a.btn-default .icon-upload { margin: 0 10px 0 0; } .newuser-links > li > a.btn-default:active, .newuser-links > li > a.btn-default:focus, .newuser-links > li > a.btn-default:hover { background: #fff; color: #000; box-shadow: none; } .newuser-links > li > a img { display: inline-block; vertical-align: middle; margin: 0 -2px 0 0; } .newuser-links > li.myaccount-dd a { padding: 0; } .newuser-links > li.myaccount-dd a span { font-size: 0; line-height: 0; } .newuser-links > li.navbar-sm-login-links a:hover { background: #0080b4; color: #fff; } .newuser-links .open > .btn-default.dropdown-toggle:hover, .newuser-links .open > .btn-default.dropdown-toggle:focus, .newuser-links .open > .btn-default.dropdown-toggle:active { background: #fff; color: #000; } .navbar-default .navbar-collapse { border: none; } #header { padding: 0; } #header .menu-holder { padding: 0 10px; } #header .dropdown-menu { border-radius: 0; width: 100%; min-width: 320px; } #header .dropdown-menu > li > a { border: none; border-radius: 0; padding: 3px 5px; } #header.myaccount-dd .dropdown-menu { min-width: 100%; } #header .btn-upload .icon-down-arrow { display: inline-block; } #header .navbar-default .navbar-toggle { margin: 0 0 0 14px; width: 40px; height: 40px; font-size: 0; line-height: 0; padding: 3px; } #header .navbar-default .navbar-toggle:after, #header .navbar-default .navbar-toggle:before, #header .navbar-default .navbar-toggle .icon-down-arrow { content: ""; font-size: 0; line-height: 0; height: 3px; width: 34px; margin: 0; background: #000; position: absolute; left: 3px; top: 8px; } #header .navbar-default .navbar-toggle:after { top: 18px; } #header .navbar-default .navbar-toggle:before { top: 29px; } } /* variables */ /**/ /**/ /* buttons */ .btn-default { background: #ececec; border-color: #ececec; font-weight: 400; color: #000; } .btn-default:hover, .btn-default:active { background: #ececec; border-color: #ececec; } .btn-ghost { background: #fff; border: 2px solid #000; padding: 5px 10px; font-weight: 400; font-size: 15px; line-height: 21px; color: #000; } .btn-ghost.btn-lg { font-size: 18px; line-height: 36px; } .btn-ghost:hover, .btn-ghost:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-primary { background: #0080b4; border-color: #0080b4; font-weight: 400; color: #fff; } .btn-primary:hover, .btn-primary:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-success { background: #4caf50; border-color: #4caf50; font-weight: 400; color: #fff; } .btn-success:hover, .btn-success:active { background: #4caf50; border-color: #4caf50; color: #fff; } .btn-black { background: #212121; border-color: #212121; font-weight: 400; font-size: 15px; color: #fff; } .btn-black:hover, .btn-black:active { background: #212121; border-color: #212121; color: #fff; } /* form elements */ .form-control { color: #000; background: #f6f6f6; border-color: #d9d9d9; font-size: 15px; line-height: 28px; height: 42px; /* placeholder input styles */ } .form-control input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #bdbdbd; } .form-control input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bdbdbd; } .form-control input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bdbdbd; opacity: 1; } .form-control input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bdbdbd; } /* sprite */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) { .playlists-dropdown .item_playlist .playlist-thumb .date-time, .playlists-dropdown .playlist-header .close-playlists, .headerIcon.active.playlist-icon a, .headerIcon.active.channels-icon a, .headerIcon.active.video-icon a, .headerIcon.playlist-icon a, .headerIcon.channels-icon a, .headerIcon.video-icon a, .navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting, .navbar-default .right-menu.navbar-nav > li > a.btn-upload, .ch-playlists .playlist-thumb .date-time, .rating .like-dislike a.btn-dislike i, .rating .like-dislike a.btn-like i { background-image: url("../images/sprite@2x.png") !important; /* Translate the @2x sprite's dimensions back to 1x */ background-size: 60px 4400px !important; } } #sidebar { float: right; width: 25.6%; } #sidebar h2 { font-size: 23px; line-height: 23px; font-weight: 600; margin: 0 0 20px; } .sidebar-channels { background: #fff; padding: 0 16px; margin: 0 0 20px; } .sidebar-channels .channel-item { background: #fff; padding: 16px 0; border-bottom: 1px solid #d9d9d9; } .sidebar-channels .channel-item:last-child { border: none; } .sidebar-channels .channel-item .avatar { width: 50px; height: 50px; float: left; margin: 0 10px 0 0; } .sidebar-channels .channel-item .avatar img { width: 100%; height: 100%; } .sidebar-channels .channel-item .channel-info { overflow: hidden; padding: 10px 0 0; color: #757575; } .sidebar-channels .channel-item .channel-info h3 { font-size: 15px; line-height: 15px; font-weight: 600; margin: 0 0 10px; color: #000; } .sidebar-channels .channel-item .channel-info h3 a { color: #000; } .sidebar-channels .channel-item .channel-info .views-videos span { display: inline-block; vertical-align: middle; padding: 0 0 0 10px; position: relative; } .sidebar-channels .channel-item .channel-info .views-videos span:after { content: ""; position: absolute; top: 50%; left: 0; margin: -2px 0 0; width: 4px; height: 4px; border-radius: 2px; background: #757575; } .sidebar-channels .channel-item .channel-info .views-videos span:first-child { margin: 0 5px 0 0; padding: 0; } .sidebar-channels .channel-item .channel-info .views-videos span:first-child:after { display: none; } .sidebar-items { background: #fff; padding: 16px 16px 0; margin: 0 0 16px; } .sidebar-items .featured-video { font-size: 14px; line-height: 14px; } .sidebar-items .featured-video:first-child { padding: 0 0 14px; } .sidebar-items .featured-video .title { font-size: 15px; line-height: 17px; font-weight: 600; margin: 0 0 6px; } .sidebar-items .featured-video .author { font-size: 13px; line-height: 13px; } .sidebar-items .row { margin: 0 -8px; } .sidebar-items .item-photo .photo-holder i { width: 30px; height: 30px; font-size: 30px; line-height: 30px; margin: -15px 0 0 -15px; } @media only screen and (max-width: 991px) { .sidebar-items .featured-video { width: 100%; display: block; padding: 0; margin: 0 0 16px; font-size: 14px; line-height: 14px; } .sidebar-items .featured-video:first-child { padding: 0; } } @media only screen and (max-width: 767px) { #sidebar { display: none; } } /* variables */ /**/ /**/ /* buttons */ .btn-default { background: #ececec; border-color: #ececec; font-weight: 400; color: #000; } .btn-default:hover, .btn-default:active { background: #ececec; border-color: #ececec; } .btn-ghost { background: #fff; border: 2px solid #000; padding: 5px 10px; font-weight: 400; font-size: 15px; line-height: 21px; color: #000; } .btn-ghost.btn-lg { font-size: 18px; line-height: 36px; } .btn-ghost:hover, .btn-ghost:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-primary { background: #0080b4; border-color: #0080b4; font-weight: 400; color: #fff; } .btn-primary:hover, .btn-primary:active { background: #0080b4; border-color: #0080b4; color: #fff; } .btn-success { background: #4caf50; border-color: #4caf50; font-weight: 400; color: #fff; } .btn-success:hover, .btn-success:active { background: #4caf50; border-color: #4caf50; color: #fff; } .btn-black { background: #212121; border-color: #212121; font-weight: 400; font-size: 15px; color: #fff; } .btn-black:hover, .btn-black:active { background: #212121; border-color: #212121; color: #fff; } /* form elements */ .form-control { color: #000; background: #f6f6f6; border-color: #d9d9d9; font-size: 15px; line-height: 28px; height: 42px; /* placeholder input styles */ } .form-control input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #bdbdbd; } .form-control input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bdbdbd; } .form-control input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bdbdbd; opacity: 1; } .form-control input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bdbdbd; } /* sprite */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) { .playlists-dropdown .item_playlist .playlist-thumb .date-time, .playlists-dropdown .playlist-header .close-playlists, .headerIcon.active.playlist-icon a, .headerIcon.active.channels-icon a, .headerIcon.active.video-icon a, .headerIcon.playlist-icon a, .headerIcon.channels-icon a, .headerIcon.video-icon a, .navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting, .navbar-default .right-menu.navbar-nav > li > a.btn-upload, .ch-playlists .playlist-thumb .date-time, .rating .like-dislike a.btn-dislike i, .rating .like-dislike a.btn-like i { background-image: url("../images/sprite@2x.png") !important; /* Translate the @2x sprite's dimensions back to 1x */ background-size: 60px 4400px !important; } } #footer { position: absolute; width: 100%; bottom: 0; background: #0080b4; padding: 18px 0; font-size: 16px; line-height: 20px; color: #fff; z-index: 5; } #footer .container { padding: 0; } #footer a { color: #fff; } #footer a:hover { text-decoration: none; } #footer .icon-holder { display: table-cell; vertical-align: middle; width: 50px; height: 50px; background: #000; border-radius: 50%; } #footer .icon-holder span { display: block; width: 50px; height: 50px; padding: 11px; } #footer ul { list-style: none; padding: 0; margin: 0; text-transform: capitalize; width: 440px; } #footer ul li { margin: 0 0 0 25px; float: left; } #footer ul li:first-child { margin: 0; } #footer .footer-holder { display: table; width: 100%; } #footer .column { padding: 0 5px; display: table-cell; vertical-align: middle; } #footer .column.copyright-poweredby { text-align: right; } #footer .column.copyright-poweredby p { font-weight: 700; } #footer .column.copyright-poweredby p span { font-weight: 400; } #footer .column.copyright-poweredby p ~ span { font-size: 12px; } /**/ @media only screen and (max-width: 991px) { #footer ul { width: 400px; } #footer ul li { float: none; display: inline-block; vertical-align: top; width: 33%; margin: 0 0 10px -4px; padding: 0 5px; } #footer ul li:first-child { margin: 0 0 10px -4px; } } @media only screen and (max-width: 767px) { #footer .footer-holder { display: block; } #footer .column { display: block; width: 100%; } #footer .column.lang_wrapper, #footer .column.copyright-poweredby { text-align: center; } #footer .column.lang_wrapper { margin: 0 0 10px; } #footer .column.lang_wrapper form { text-align: center; } #footer ul { width: 100%; } #footer ul li { float: none; display: inline-block; vertical-align: top; width: 50%; margin: 0 0 10px -4px; padding: 0 5px; } #footer ul li:first-child { margin: 0 0 10px -4px; } } @media only screen and (max-width: 1200px) { .featured-video .video_thumb { width: 100%; margin: 0 0 5px; float: none; } .featured-video .video_thumb img { width: 100%; } .item-photo .photo-info strong { font-size: 16px; } } @media only screen and (max-width: 991px) { .editorpick-holder { float: none; width: 100%; margin: 0 0 16px; padding: 0; } .absolute-div { padding: 0; } .editorpick-videos { float: none; width: 100%; padding: 0; } .editorpick-videos .scrollable-area { height: auto !important; width: 100% !important; padding: 0 0 0 8px; } .editorpick-videos .scrollable-area:after { content: ""; display: block; clear: both; } .featured-video { width: 50%; display: inline-block; vertical-align: top; margin: 0 0 16px -4px; padding: 0 8px; border: none; } .featured-video:first-child { padding: 0 8px; } .item-video .thumb-holder .video-link .title { font-size: 16px; } .sidebar-channels .channel-item .channel-info { font-size: 13px; line-height: 13px; padding: 0; } .sidebar-channels .channel-item .channel-info h3 { font-size: 13px; line-height: 13px; margin: 0 0 3px; } .sidebar-channels .channel-item .channel-info .views-videos span { display: block; padding: 0; } .sidebar-channels .channel-item .channel-info .views-videos span:after { display: none; } .sidebar-channels .channel-item .channel-info .views-videos span:first-child { margin: 0 0 3px; } .videos .video-info .title { font-size: 16px; } .video-details header.details h1, .view-details header.details h1 { font-size: 18px; margin: 0 0 10px; } .video-details .user-video-info .views-counter, .view-details .user-video-info .views-counter { font-size: 18px; } .cover .counters li span { display: none; } .signin-block .user-form { padding: 30px 40px; } .signin-block .side-box { padding: 80px 40px; } } @media only screen and (max-width: 767px) { #content { width: 100%; float: none; padding: 0 10px; } .featured-video .title { font-size: 14px; } .featured-video .views-date .date, .featured-video .views-date span { display: block; } .featured-video .views-date .date { padding: 0; margin: 0; } .featured-video .views-date .date:after { display: none; } .videos .video-info { height: 80px; } .videos .video-info .title { font-size: 14px; } .filter-dropdowns .cat-col { display: none; } .filter-dropdowns .sorting-col { padding: 0; } .item-photo .photo-info strong { font-size: 14px; line-height: 18px; } .view-tabs .nav-tabs.nav { font-size: 0; line-height: 0; } #add_playlist_form .form-group > div:first-child, #add_playlist_form .form-group > div, #new_playlist_form .form-group > div:first-child, #new_playlist_form .form-group > div { padding: 0; } #add_playlist_form .form-group > div:first-child, #new_playlist_form .form-group > div:first-child { margin: 0 0 16px; } .flat-tabs .nav-tabs.nav > li > a { padding: 8px; } .cover .avatar { width: 60px; height: 60px; left: 20px; bottom: 100px; } .cover .ratting-counts { padding: 10px 0 10px 90px; height: 80px; } .cover .ratting-counts .user-ratting { float: none; width: 100%; margin: 0 0 10px; } .cover .counters { text-align: left; } .cover .counters li { margin: 0 5px 0 0; } .cover .profile-buttons { padding: 10px 20px; text-align: center; } .cover .profile-buttons h2 { float: none; margin: 0 0 5px; } .cover .profile-buttons .btn-holder { text-align: center; } .cover .profile-buttons .btn-default { margin: 0 5px; } .signin-block .user-form, .signin-block .side-box { display: block; margin: 0; width: 100%; } .signin-block .user-form h2, .signin-block .side-box h2 { margin: 0 0 20px; font-size: 30px; } .signin-block .user-form { padding: 20px; } .signin-block .side-box { padding: 20px; height: auto !important; } .signup-block .user-form, .forgot-block .user-form { padding: 20px; } .signup-block .user-form h2, .forgot-block .user-form h2 { margin: 0 0 20px; font-size: 30px; } } /*# sourceMappingURL=all.css.map */