2017-05-19 20:38:28 +05:00
@ font-face {
font-family : 'source_sans_probold' ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-bold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prolight' ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-light-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-light-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-light-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_proregular' ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-regular-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prosemibold' ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-semibold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
/* variables */
/**/
/**/
/* buttons */
. btn-default {
background : # ececec ;
border-color : # ececec ;
font-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-primary : hover , . btn-primary : active {
background : # 0080b4 ;
border-color : # 0080b4 ;
color : # fff ; }
. btn-success {
background : # 4caf50 ;
border-color : # 4caf50 ;
font-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-success : hover , . btn-success : active {
background : # 4caf50 ;
border-color : # 4caf50 ;
color : # fff ; }
. btn-black {
background : # 212121 ;
border-color : # 212121 ;
font-family : "source_sans_proregular" , sans-serif ;
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 ; }
/* error messages */
/* error animations */
@ -webkit-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -moz-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -o-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
. alert-msg-holder {
margin : 0 auto ;
text-align : center ;
max-width : 1170px ! important ; }
. alert-ajax {
-webkit-animation : bounce 800ms ease-out ;
-moz-animation : bounce 800ms ease-out ;
-ms-animation : bounce 800ms ease-out ;
-o-animation : bounce 800ms ease-out ;
animation : bounce 800ms ease-out ; }
* {
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_proregular" , 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_proregular" , 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-family : "source_sans_prosemibold" , sans-serif ;
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 ; }
# ep_video_container {
width : 100 % ;
height : 100 % ; }
# ep_video_container > div {
width : 100 % ;
height : 100 % ; }
# ep_video_container iframe {
width : 100 % ;
height : 100 % ; }
. editorpick {
background : # fff ;
margin : 0 0 20px ; }
. playerRatio {
width : 100 % ;
height : auto ; }
. popular-vids {
padding : 0 0 0 15px ; }
. featured-video {
background : # fff ;
font-size : 13px ;
line-height : 15px ;
font-family : "source_sans_prolight" , sans-serif ;
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 {
cursor : pointer ;
position : relative ;
float : left ;
width : 112px ;
margin : 0 10px 0 0 ; }
. featured-video . video_thumb . img-responsive {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ;
z-index : 1 ; }
. featured-video . video_thumb a {
display : block ;
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ;
z-index : 1 ; }
. featured-video . video_thumb a . img-responsive {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ;
z-index : 1 ; }
. featured-video . duration {
position : absolute ;
font-size : 12px ;
line-height : 16px ;
font-family : "source_sans_proregular" , sans-serif ;
color : # fff ;
text-align : center ;
height : 16px ;
padding : 0 3px ;
min-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 : 400 16px / 18px "source_sans_proregular" , sans-serif ;
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 ; }
. thumb-ratio {
width : 100 % ;
height : auto ; }
. item-video . thumb-holder {
position : relative ;
z-index : 2 ;
color : # fff ; }
. item-video . thumb-holder . video-link {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ;
display : block ;
z-index : 1 ;
text-decoration : none ;
color : # fff ;
font-size : 12px ;
list-style : 14px ; }
. item-video . thumb-holder . video-link . img-responsive {
width : 100 % ;
height : 100 % ;
position : absolute ;
top : 0 ;
left : 0 ; }
. item-video . thumb-holder . video-link . title {
position : absolute ;
z-index : 2 ;
font : 400 18px / 20px "source_sans_proregular" , sans-serif ;
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 . video-link : after {
content : "" ;
position : absolute ;
bottom : 0 ;
left : 0 ;
width : 100 % ;
height : 100px ;
z-index : 2 ;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.01+9,0.07+21,0.24+36,0.53+55,0.78+76,0.8+81,0.8+100 */
background : -moz-linear-gradient ( top , transparent 0 % , rgba ( 0 , 0 , 0 , 0 . 01 ) 9 % , rgba ( 0 , 0 , 0 , 0 . 07 ) 21 % , rgba ( 0 , 0 , 0 , 0 . 24 ) 36 % , rgba ( 0 , 0 , 0 , 0 . 53 ) 55 % , rgba ( 0 , 0 , 0 , 0 . 78 ) 76 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 81 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 100 % ) ;
/* FF3.6-15 */
background : -webkit-linear-gradient ( top , transparent 0 % , rgba ( 0 , 0 , 0 , 0 . 01 ) 9 % , rgba ( 0 , 0 , 0 , 0 . 07 ) 21 % , rgba ( 0 , 0 , 0 , 0 . 24 ) 36 % , rgba ( 0 , 0 , 0 , 0 . 53 ) 55 % , rgba ( 0 , 0 , 0 , 0 . 78 ) 76 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 81 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 100 % ) ;
/* Chrome10-25,Safari5.1-6 */
background : linear-gradient ( to bottom , transparent 0 % , rgba ( 0 , 0 , 0 , 0 . 01 ) 9 % , rgba ( 0 , 0 , 0 , 0 . 07 ) 21 % , rgba ( 0 , 0 , 0 , 0 . 24 ) 36 % , rgba ( 0 , 0 , 0 , 0 . 53 ) 55 % , rgba ( 0 , 0 , 0 , 0 . 78 ) 76 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 81 % , rgba ( 0 , 0 , 0 , 0 . 8 ) 100 % ) ;
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter : progid : DXImageTransform . Microsoft . gradient ( startColorstr = '#00000000' , endColorstr = '#cc000000' , GradientType = 0 ) ;
/* IE6-9 */ }
. item-video . thumb-holder . duration ,
. item-video . thumb-holder . cb_quickie {
position : absolute ;
z-index : 3 ;
bottom : 10px ;
left : 10px ; }
. item-video . thumb-holder . duration {
font-size : 14px ;
line-height : 20px ;
font-family : "source_sans_prolight" , sans-serif ;
text-align : center ;
height : 20px ;
min-width : 44px ;
padding : 0 4px ;
background : # 000 ;
border-radius : 2px ;
left : auto ;
right : 10px ; }
. item-video . thumb-holder . cb_quickie {
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 . vid-type {
top : 14px ;
right : 20px ; }
. videos . video-info {
font-size : 14px ;
line-height : 16px ;
font-family : "source_sans_prolight" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_probold" , sans-serif ;
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 {
width : 100 % ;
height : 100 % ;
max-height : 334px ;
overflow-y : auto ;
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 ;
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 ;
position : relative ; }
. pl_thumb a . img-responsive {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
z-index : 1 ; }
. 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-family : "source_sans_prolight" , sans-serif ;
text-align : center ;
padding : 12px 4px ; }
. collections-grid . photo-block . collection-info span {
display : block ;
font-size : 16px ;
line-height : 16px ;
font-family : "source_sans_prosemibold" , sans-serif ;
margin : 0 0 6px ; }
. collections-grid . title {
display : block ;
background : # fff ;
padding : 10px 0 0 ;
overflow : hidden ;
height : 28px ; }
. 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-family : "source_sans_prolight" , sans-serif ;
text-align : center ;
padding : 12px 4px ; }
. collections . photo-block . collection-info span {
display : block ;
font-size : 16px ;
line-height : 16px ;
font-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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 . playlist-video {
display : block ;
position : relative ; }
. sidebar-playlists . playlist . playlist-video . img-responsive {
position : absolute ;
width : 100 % ;
height : 100 % ;
z-index : 1 ;
top : 0 ;
left : 0 ; }
. sidebar-playlists . playlist . videos-count {
display : block ;
font-size : 14px ;
line-height : 14px ;
font-family : "source_sans_prolight" , sans-serif ;
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-family : "source_sans_probold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
padding : 6px 20px 6px 12px ;
color : # fff ; }
. filter-dropdowns {
margin : 0 0 16px ;
font-size : 15px ;
line-height : 20px ;
text-transform : capitalize ;
font-family : "source_sans_prosemibold" , sans-serif ; }
. 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-family : "source_sans_proregular" , sans-serif ;
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 . sorting-col . dropdown-menu > li {
position : relative ; }
. filter-dropdowns . sorting-col . dropdown-menu > li a i {
position : absolute ;
z-index : 1 ;
width : 16px ;
height : 16px ;
text-align : center ;
top : 50 % ;
right : 5px ;
margin : -8px 0 0 ; }
. filter-dropdowns . sorting-col . dropdown-menu > li a . selected ,
. filter-dropdowns . sorting-col . dropdown-menu > li a : hover {
background : # 17181a ; }
. 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 ; }
. 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 ;
padding : 0 30px 0 0 ;
border-bottom : 1px solid # 515151 ; }
. filter-dropdowns . dropdown-menu > li > div : hover {
background : # 17181a ; }
. filter-dropdowns . dropdown-menu > li > div i {
font-size : 10px ;
line-height : 22px ;
width : 22px ;
height : 22px ;
padding : 0 7px ;
border-radius : 50 % ;
position : absolute ;
z-index : 3 ;
top : 50 % ;
right : 5px ;
margin : -11px 0 0 ;
background : # 212121 ;
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 {
height : 100 % ; }
# cb_player # link_v {
display : inline-block ;
vertical-align : top ; }
# cb_player iframe {
width : 100 % ;
height : 100 % ;
position : absolute ;
top : 0 ;
left : 0 ; }
. 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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 . subscribe-col . dropdown ,
. video-details . user-likes-sub . subscribe-col . dropdown {
display : inline-block ;
vertical-align : middle ; }
. view-details . user-likes-sub . dropdown-toggle ,
. view-details . user-likes-sub . btn-subscribe ,
. video-details . user-likes-sub . dropdown-toggle ,
. 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 a : hover {
color : # 0080b4 ; }
. rating . like-dislike . rated 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-family : "source_sans_probold" , sans-serif ; }
. flat-tabs h2 {
font-size : 20px ;
line-height : 20px ;
font-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_probold" , sans-serif ; }
. 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ; }
/* 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-family : "source_sans_prolight" , sans-serif ;
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 : 18px / 20px "source_sans_proregular" , sans-serif ;
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 ;
height : 474px ; }
. 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 ; }
. photo-view . overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height : 100 % ;
width : 0 ;
position : fixed ;
/* Stay in place */
z-index : 6 ;
/* Sit on top */
left : 0 ;
right : 100 % ;
top : 0 ;
background : rgba ( 0 , 0 , 0 , 0 . 98 ) ;
/* Black w/opacity */
overflow-y : hidden ;
transition : 0 . 3s ;
/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ }
. photo-view . overlay . maximized {
display : table ; }
. photo-view . overlay img {
position : relative ; }
. photo-view . overlay . photo-view . btn-holder {
z-index : 7 ; }
. photo-view . overlay . img-close {
z-index : 7 ;
cursor : pointer ;
padding : 5px ;
position : absolute ;
right : 20px ;
top : 20px ;
border : none ;
width : 30px ;
height : 30px ;
font-size : 20px ;
line-height : 20px ;
background : # f3f3f3 ;
border-radius : 50 % ;
text-align : center ; }
. photo-view . overlay a {
padding : 8px ;
text-decoration : none ;
font-size : 36px ;
color : # 818181 ;
display : block ;
/* Display block instead of inline */
transition : 0 . 3s ;
/* Transition effects on hover (color) */ }
. photo-view . overlay a : hover , . photo-view . overlay a : focus {
color : # f1f1f1 ; }
. photo-view . overlay . closebtn {
position : absolute ;
top : 20px ;
right : 45px ;
font-size : 60px ! important ;
/* Override the font-size specified earlier (36px) for all navigation links */ }
. photo-view . overlay . overlay-content {
position : relative ;
height : auto ;
max-height : 100 % ;
width : 100 % ;
/* 100% width */
text-align : center ;
/* Centered text/links */
display : table-cell ;
vertical-align : middle ; }
. photo-view . overlay . overlay-content img {
height : auto ; }
. photo-view . overlay . overlay-content img . tallest {
height : 100 % ;
height : 100vh ; }
. photo-view . overlay . overlay-content . btn-holder {
position : fixed ;
right : -112px ; }
/* The Overlay (background) */
# gallery {
background : # fff none repeat scroll 0 0 ;
height : 474px ;
margin : 0 0 16px ;
position : relative ;
overflow : hidden ; }
# gallery # enlarge {
cursor : pointer ;
padding : 5px ;
position : absolute ;
right : 20px ;
top : 20px ;
border : none ;
width : 30px ;
height : 30px ;
font-size : 20px ;
line-height : 20px ;
background : # f3f3f3 ;
border-radius : 50 % ;
text-align : center ; }
# gallery . image-holder {
display : table ;
width : 100 % ;
height : 100 % ; }
# gallery . image-holder . inner-holder {
display : table-cell ;
vertical-align : middle ; }
# gallery . image-holder . inner-holder img {
height : auto ; }
# gallery . image-holder . inner-holder img . tall_img {
max-height : 100 % ; }
@ media all and ( -ms-high-contrast : none ) , ( -ms-high-contrast : active ) {
/* IE10+ CSS styles go here */
# gallery . image-holder . inner-holder img . tall_img {
height : 100 % ; }
. photo-view . overlay . overlay-content img . tallest {
height : 100 % ;
max-height : 100 % ; } }
. image-zoom {
overflow : hidden ; }
. image-zoom . photo-view . overlay . overlay-content . btn-holder {
right : 20px ; }
/**/
# 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ; }
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 ; }
. comment_txt_area textarea {
resize : none ; }
. comment_txt_area textarea ,
. textarea-comment textarea {
resize : none ! important ; }
. textarea-comment textarea . form-control {
padding : 6px 24px 6px 12px ; }
. 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 : 16px / 16px "source_sans_prosemibold" , sans-serif ;
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 . textarea-comment {
position : relative ; }
. 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prolight" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prolight" , sans-serif ;
color : # a3a3a3 ; }
. item-channel . info strong : first-child {
border : none ;
padding : 0 ; }
. item-channel . info strong span {
display : block ;
margin : 10px 0 0 ;
font : 14px / 14px "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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 ; }
. report-block {
padding : 16px ;
background : # fff ;
margin : 0 0 16px ; }
. 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-family : "source_sans_prolight" , sans-serif ; }
. user-activities . text span a {
font-family : "source_sans_prosemibold" , sans-serif ;
color : # 0080b4 ; }
/* end view channel page */
/* playlist */
. playlist-item {
margin : 0 0 20px ; }
. playlist-item . playlist-thumb {
color : # 333 ; }
. playlist-item . playlist-thumb h2 {
font-size : 12px ;
line-height : 12px ;
margin : 0 0 5px ;
font-family : "source_sans_prosemibold" , sans-serif ; }
. playlist-item . playlist-thumb h2 a {
color : # 333 ; }
. playlist-item . playlist-thumb h2 a : hover {
text-decoration : none ; }
. playlist-item . playlist-thumb . playlist-box {
display : block ;
position : relative ;
color : # fff ; }
. playlist-item . playlist-thumb . playlist-box . img-responsive {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ;
z-index : 1 ; }
. playlist-item . playlist-thumb . playlist-box . playlist-count {
background : rgba ( 0 , 0 , 0 , 0 . 8 ) ;
width : 80px ;
height : 80px ;
border-radius : 50 % ;
padding : 18px 10px ;
position : absolute ;
top : 50 % ;
left : 50 % ;
margin : -40px 0 0 -40px ;
text-align : center ;
font-size : 12px ;
line-height : 18px ;
z-index : 2 ; }
. playlist-item . playlist-thumb . playlist-box . playlist-count span {
display : block ;
margin : 0 0 5px ; }
. playlist-item . playlist-thumb . playlist-box > img {
width : 100 % ; }
. playlist-item . playlist-thumb . playlist-info {
font-size : 14px ;
line-height : 16px ;
font-family : "source_sans_prolight" , sans-serif ;
color : # 757575 ;
padding : 8px ;
background : # f6f6f6 ;
position : relative ; }
. playlist-item . playlist-thumb . playlist-info h2 {
max-height : 20px ;
overflow : hidden ;
color : # 000 ;
font-size : 18px ;
line-height : 20px ;
font-family : "source_sans_proregular" , sans-serif ;
margin : 0 0 5px ; }
. playlist-item . playlist-thumb . playlist-info h2 a {
color : # 000 ;
text-decoration : none ; }
. playlist-item . playlist-thumb . playlist-info h2 a : hover {
color : # 0080b4 ; }
/**/
. 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-family : "source_sans_prolight" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_prolight" , sans-serif ;
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 : 250px ;
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 : "\e90f" ; }
. 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 : "\e90d" ; }
. 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 : "\e920" ; }
. 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 : "\e912" ; }
. 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 : "\e90b" ;
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 : "\e91f" ;
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 */
/**/
. acc_usr_video_thumb {
width : 160px ;
height : 100px ; }
. 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-family : "source_sans_prosemibold" , sans-serif ; }
. 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-family : "source_sans_probold" , sans-serif ; }
. 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 ; }
. sectionContent . radio ,
. sectionContent . radio-inline ,
. sectionContent . checkbox ,
. sectionContent . checkbox-inline {
padding : 0 0 0 20px ; }
. sectionContent . radio input [ type = "radio" ] ,
. sectionContent . radio input [ type = "checkbox" ] ,
. sectionContent . radio-inline input [ type = "radio" ] ,
. sectionContent . radio-inline input [ type = "checkbox" ] ,
. sectionContent . checkbox input [ type = "radio" ] ,
. sectionContent . checkbox input [ type = "checkbox" ] ,
. sectionContent . checkbox-inline input [ type = "radio" ] ,
. sectionContent . checkbox-inline input [ type = "checkbox" ] {
margin : -6px 0 0 ;
left : 0 ;
top : 50 % ; }
/* 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-family : "source_sans_probold" , sans-serif ; }
. uploadingProgressContainer . alert p small {
color : # 000 ! important ; }
# updateVideoInfoForm . input-group ,
. upload_form . input-group {
margin : 0 0 15px ; }
# updateVideoInfoForm . radio input [ type = "radio" ] ,
# updateVideoInfoForm . radio-inline input [ type = "radio" ] ,
# updateVideoInfoForm . checkbox input [ type = "checkbox" ] ,
# updateVideoInfoForm . checkbox-inline input [ type = "checkbox" ] ,
. 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 ; }
. page-error {
background : # f7f9fb ;
position : relative ;
z-index : 1 ;
overflow : hidden ; }
. page-error . base-bg {
position : absolute ;
z-index : 1 ;
width : 100 % ;
left : 0 ;
bottom : 0 ;
height : auto ; }
. page-error . monster {
position : absolute ;
bottom : 10 % ;
left : 10 % ;
width : 20 % ;
max-width : 373px ;
z-index : 4 ; }
. page-error . fog {
position : absolute ;
width : 31 % ;
max-width : 592px ;
top : 10 % ;
right : 11 % ;
z-index : 3 ; }
. page-error . error-holder {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
z-index : 2 ; }
. page-error . content-txt {
position : absolute ;
z-index : 2 ;
width : 100 % ;
max-width : 420px ;
padding : 0 10px ;
right : 13 % ;
top : 10 % ; }
. page-error . alert-text {
font : 20px / 30px "source_sans_prolight" , sans-serif ;
margin : 0 0 20px ;
color : # 6b6b6b ; }
. page-error . alert-text p {
margin : 0 0 60px ; }
. page-error . alert-text strong {
font : 40px / 42px "source_sans_proregular" , sans-serif ;
display : block ;
color : # 000 ;
margin : 0 0 16px ; }
. page-error . alert-text a {
font : 20px / 22px "source_sans_prosemibold" , sans-serif ;
color : # 0080b4 ; }
. page-error . error-img {
max-width : 390px ;
margin : 0 auto 70px ; }
. page-error . error-img img {
width : 100 % ;
margin : 0 auto ; }
. page-error . search-form {
padding : 0 8px ;
max-width : 600px ;
margin : 0 auto 20px ; }
. page-error . search-form > div {
border : 1px solid # d9d9d9 ; }
. page-error . search-form . form-control {
box-shadow : none ;
border : none ; }
. page-error . search-form . form-control : focus {
box-shadow : none ; }
. error-pix-403 {
width : 312px ;
height : 157px ;
margin : 0 auto ;
background : url ( . . / . . / images / 403 . png ) no-repeat ;
background-size : 100 % ;
display : block ; }
. error-pix-404 {
width : 312px ;
height : 157px ;
margin : 0 auto ;
background : url ( . . / . . / images / 404 . png ) no-repeat ;
background-size : 100 % ;
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 ; }
/**/
. fog {
-webkit-animation : lefttoright 6s infinite linear ;
-moz-animation : lefttoright 6s infinite linear ;
-ms-animation : lefttoright 6s infinite linear ;
-o-animation : lefttoright 6s infinite linear ;
animation : lefttoright 6s infinite linear ; }
@ -webkit-keyframes lefttoright {
0 % {
-webkit-transform : translate ( -200 % , 0 ) ;
-moz-transform : translate ( -200 % , 0 ) ;
-ms-transform : translate ( -200 % , 0 ) ;
-o-transform : translate ( -200 % , 0 ) ; }
100 % {
-webkit-transform : translate ( 150 % , 0 ) ;
-moz-transform : translate ( 150 % , 0 ) ;
-ms-transform : translate ( 150 % , 0 ) ;
-o-transform : translate ( 150 % , 0 ) ; } }
@ -moz-keyframes lefttoright {
0 % {
-webkit-transform : translate ( -200 % , 0 ) ;
-moz-transform : translate ( -200 % , 0 ) ;
-ms-transform : translate ( -200 % , 0 ) ;
-o-transform : translate ( -200 % , 0 ) ; }
100 % {
-webkit-transform : translate ( 150 % , 0 ) ;
-moz-transform : translate ( 150 % , 0 ) ;
-ms-transform : translate ( 150 % , 0 ) ;
-o-transform : translate ( 150 % , 0 ) ; } }
@ -o-keyframes lefttoright {
0 % {
-webkit-transform : translate ( -200 % , 0 ) ;
-moz-transform : translate ( -200 % , 0 ) ;
-ms-transform : translate ( -200 % , 0 ) ;
-o-transform : translate ( -200 % , 0 ) ; }
100 % {
-webkit-transform : translate ( 150 % , 0 ) ;
-moz-transform : translate ( 150 % , 0 ) ;
-ms-transform : translate ( 150 % , 0 ) ;
-o-transform : translate ( 150 % , 0 ) ; } }
@ keyframes lefttoright {
0 % {
-webkit-transform : translate ( -200 % , 0 ) ;
-moz-transform : translate ( -200 % , 0 ) ;
-ms-transform : translate ( -200 % , 0 ) ;
-o-transform : translate ( -200 % , 0 ) ; }
100 % {
-webkit-transform : translate ( 150 % , 0 ) ;
-moz-transform : translate ( 150 % , 0 ) ;
-ms-transform : translate ( 150 % , 0 ) ;
-o-transform : translate ( 150 % , 0 ) ; } }
/**/
. 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-family : "source_sans_prolight" , sans-serif ;
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 ; }
. well {
border-radius : 0 ; }
. alert-msg-holder . alert {
position : fixed ;
width : 100 % ;
left : 0 ;
z-index : 5 ;
padding : 10px 40px 10px 10px ; }
. alert_messages_holder {
position : fixed ;
top : 70px ;
right : 10px ;
z-index : 1050 ; }
. alert_messages_holder . alert-messages {
position : relative ;
width : 300px ;
margin : 0 0 10px ; }
. alert_messages_holder . close_message {
position : absolute ;
top : 8px ;
right : 8px ;
z-index : 5 ;
border : none ;
background : none ;
font-size : 21px ;
font-weight : 700 ;
line-height : 1 ;
text-shadow : 0 1px 0 # FFF ; }
/**/
@ font-face {
font-family : 'source_sans_probold' ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-bold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prolight' ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-light-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-light-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-light-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_proregular' ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-regular-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prosemibold' ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-semibold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
/* variables */
/**/
/**/
/* buttons */
. btn-default {
background : # ececec ;
border-color : # ececec ;
font-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-primary : hover , . btn-primary : active {
background : # 0080b4 ;
border-color : # 0080b4 ;
color : # fff ; }
. btn-success {
background : # 4caf50 ;
border-color : # 4caf50 ;
font-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-success : hover , . btn-success : active {
background : # 4caf50 ;
border-color : # 4caf50 ;
color : # fff ; }
. btn-black {
background : # 212121 ;
border-color : # 212121 ;
font-family : "source_sans_proregular" , sans-serif ;
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 ; }
/* error messages */
/* error animations */
@ -webkit-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -moz-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -o-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
. alert-msg-holder {
margin : 0 auto ;
text-align : center ;
max-width : 1170px ! important ; }
. alert-ajax {
-webkit-animation : bounce 800ms ease-out ;
-moz-animation : bounce 800ms ease-out ;
-ms-animation : bounce 800ms ease-out ;
-o-animation : bounce 800ms ease-out ;
animation : bounce 800ms ease-out ; }
/* 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 : 655px ; }
# 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 15px ; }
# 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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 . cbsearchtype . search-drop . open . icon-down-arrow {
-webkit-transform : rotate ( -180deg ) ;
-moz-transform : rotate ( -180deg ) ;
-ms-transform : rotate ( -180deg ) ;
-o-transform : rotate ( -180deg ) ; }
# 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-family : "source_sans_proregular" , sans-serif ;
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 ;
position : relative ;
color : # fff ;
font-size : 0 ;
line-height : 0 ;
width : 100 % ;
height : 100 % ; }
. 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 % ;
height : 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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ; }
. 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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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 ; }
. cd-popup {
position : fixed ;
visibility : hidden ;
height : 100 % ;
width : 100 % ;
opacity : 0 ;
background : rgba ( 0 , 0 , 0 , 0 . 78 ) ;
top : 0 ; }
. cd-popup . cb-popup-container {
position : relative ;
width : 50 % ;
max-width : 680 ;
margin : 8em auto ;
text-align : center ;
background : # 000 ;
z-index : 1000 ;
padding : 0 ; }
. cd-popup . cb-popup-container . modal-inset . col {
padding : 0 ; }
. cd-popup . cd-popup-close {
position : absolute ;
top : 8px ;
right : 8px ;
width : 30px ;
height : 30px ;
font-size : 0 ; }
. cd-popup . cd-popup-close : before , . cd-popup . cd-popup-close : after {
content : '' ;
position : absolute ;
top : 12px ;
width : 14px ;
height : 3px ;
background-color : # fff ; }
. cd-popup . cd-popup-close : before {
-webkit-transform : rotate ( 45deg ) ;
left : 8px ; }
. cd-popup . cd-popup-close : after {
-webkit-transform : rotate ( -45deg ) ;
right : 8px ; }
. is-visible {
visibility : visible ;
opacity : 1 ;
transition : opacity 0 . 3s 0s , visibility 0s 0s ;
z-index : 100 ; }
. is-visible . cb-popup-container {
-webkit-animation : horizontal 0 . 6s ease ;
-moz-animation : horizontal 0 . 6s ease ;
-ms-animation : horizontal 0 . 6s ease ;
-o-animation : horizontal 0 . 6s ease ;
animation : horizontal 0 . 6s ease ; }
@ media all and ( -ms-high-contrast : none ) , ( -ms-high-contrast : active ) {
/* IE10+ CSS styles go here */
# header {
padding : 0 25px 0 10px ; } }
/**/
@ media only screen and ( max-width : 1280px ) {
# header . main-links > ul {
font-size : 15px ;
line-height : 36px ; }
# header . menu-holder . col . user_menu {
width : 510px ;
padding : 0 ; }
# header . menu-holder . col . user_menu . search {
width : 280px ; }
# header . menu-holder . col . user_menu . logged-out {
width : 542px ; }
# 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 : 1130px ) {
# header . menu-holder . col . user_menu . logged-out {
width : 515px ; } }
@ 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 10px ; }
# header . menu-holder . col . user_menu {
width : 410px ; }
# header . menu-holder . col . user_menu . logged-out {
width : 460px ; }
. 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 : 273px ;
display : inline-block ;
vertical-align : middle ; }
. user_menu {
float : right ;
width : 450px ; }
# header . search . cbsearchtype {
padding : 0 40px 0 86px ; }
# header . search . cbsearchtype . search-drop {
width : 86px ; }
# 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 ; }
. cd-popup . cb-popup-container {
width : 90 % ; } }
@ media only screen and ( max-width : 767px ) {
. navbar-header {
padding : 10px 20px 10px 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 % ;
z-index : 3 ; }
. navbar-header . search {
width : 100 % ; }
. newuser-links {
list-style : none ;
padding : 0 ;
margin : 0 ;
font-size : 16px ;
line-height : 24px ;
margin : 0 0 10px ;
position : relative ;
z-index : 1 ;
text-align : center ; }
. newuser-links : after {
content : "" ;
display : block ;
clear : both ; }
. newuser-links > li {
float : none ; }
. newuser-links > li . dropdown . myaccount-dd {
width : 140px ;
display : block ;
margin : 0 auto ; }
. newuser-links > li . dropdown . upload_link {
width : 40px ;
float : right ; }
. newuser-links > li > a {
display : block ;
width : 100 % ;
padding : 5px ;
background : # fff ;
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 ;
padding : 5px ;
border : none ;
border-radius : 0 ; }
. newuser-links > li > a . btn-default . icon-upload {
margin : 0 ; }
. newuser-links > li > a . btn-default b ,
. newuser-links > li > a . btn-default span {
display : none ! important ; }
. 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 ;
width : 100px ;
height : 100px ;
border-radius : 50 % ; }
. newuser-links > li . myaccount-dd {
z-index : 1 ;
word-wrap : break-word ; }
. newuser-links > li . myaccount-dd > a {
margin : 0 auto ; }
. newuser-links > li . upload_link {
width : 40px ;
height : 40px ;
top : 0 ;
z-index : 2 ;
right : 10px ; }
. newuser-links > li . upload_link a . btn-default {
text-align : center ;
padding : 4px 6px ;
border : 2px solid # 000 ;
border-radius : 50 % ;
line-height : 28px ;
width : 40px ;
height : 40px ; }
. newuser-links > li . upload_link a . btn-default : active : hover , . newuser-links > li . upload_link a . btn-default : active : focus , . newuser-links > li . upload_link a . btn-default . focus : active , . newuser-links > li . upload_link a . btn-default . active : hover , . newuser-links > li . upload_link a . btn-default . active : focus , . newuser-links > li . upload_link a . btn-default . active . focus , . newuser-links > li . upload_link a . btn-default . focus , . newuser-links > li . upload_link a . btn-default : active , . newuser-links > li . upload_link a . btn-default . active {
border : 2px solid # 000 ; }
. newuser-links > li . upload_link . open > a . btn-default . dropdown-toggle : hover , . newuser-links > li . upload_link . open > a . btn-default . dropdown-toggle : focus , . newuser-links > li . upload_link . open > a . btn-default . dropdown-toggle . focus , . newuser-links > li . upload_link . open > a . btn-default . dropdown-toggle {
border-color : # 000 ; }
. newuser-links > li . myaccount-dd a > {
margin : 0 auto ; }
. newuser-links > li . myaccount-dd a {
padding : 0 ; }
. newuser-links > li . myaccount-dd a span {
display : block ; }
. 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 . upload_link . dropdown-menu {
min-width : 40px ;
width : 40px ;
margin : 0 ;
background : none ;
-webkit-transition : all 0 . 3s ease-in-out ;
-moz-transition : all 0 . 3s ease-in-out ;
-ms-transition : all 0 . 3s ease-in-out ;
-o-transition : all 0 . 3s ease-in-out ;
transition : all 0 . 3s ease-in-out ; }
# header . upload_link . dropdown-menu > li {
margin : 4px 0 0 ;
-webkit-transition : all 0 . 3s ease-in-out ;
-moz-transition : all 0 . 3s ease-in-out ;
-ms-transition : all 0 . 3s ease-in-out ;
-o-transition : all 0 . 3s ease-in-out ;
transition : all 0 . 3s ease-in-out ; }
# header . upload_link . dropdown-menu > li > a {
text-align : center ;
padding : 4px 6px ;
border : 2px solid # 000 ;
border-radius : 50 % ;
width : 40px ;
height : 40px ;
font-size : 0 ;
line-height : 0 ;
color : # 000 ;
background : # fff ;
position : relative ; }
# header . upload_link . dropdown-menu > li > a i {
font-size : 12px ;
line-height : 28px ; }
# header . upload_link . dropdown-menu > li > a : hover {
background : # fff ; }
# header . upload_link . dropdown-menu > li : nth-child ( 3 ) > a : after {
position : absolute ;
content : "\e924" ;
font : 16px / 28px "icomoon" ;
padding : 4px 6px ;
width : 100 % ;
height : 100 % ;
top : 0 ;
left : 0 ; }
# 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 % ;
text-align : center ;
box-shadow : 0 2px 3px # 666666 ; }
# 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 8px ; }
# 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 : 24px ;
margin : 0 ;
background : # 000 ;
position : absolute ;
left : 8px ;
top : 8px ; }
# header . navbar-default . navbar-toggle : after {
top : 18px ; }
# header . navbar-default . navbar-toggle : before {
top : 29px ; }
. cd-popup . cb-popup-container {
margin : 4em auto ;
padding : 0 ;
width : 87 % ; } }
@ media only screen and ( max-width : 640px ) {
. cd-popup . cb-popup-container {
margin : 1em auto ;
padding : 0 ;
width : 86 % ; } }
@ media only screen and ( max-width : 480px ) {
. cd-popup . cb-popup-container {
width : 90 % ;
margin : 3em auto ; } }
@ media only screen and ( max-width : 360px ) {
. cd-popup . cb-popup-container {
width : 90 % ; } }
@ media only screen and ( max-width : 320px ) {
. cd-popup . cb-popup-container {
width : 90 % ;
margin : 3em auto ! important ; } }
@ -webkit-keyframes horizontal {
0 % {
transform : scale ( 0 . 1 ) ;
opacity : 0 ; }
100 % {
transform : scale ( 1 ) ;
opacity : 1 ; } }
@ font-face {
font-family : 'source_sans_probold' ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-bold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prolight' ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-light-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-light-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-light-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_proregular' ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-regular-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prosemibold' ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-semibold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
/* variables */
/**/
/**/
/* buttons */
. btn-default {
background : # ececec ;
border-color : # ececec ;
font-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-primary : hover , . btn-primary : active {
background : # 0080b4 ;
border-color : # 0080b4 ;
color : # fff ; }
. btn-success {
background : # 4caf50 ;
border-color : # 4caf50 ;
font-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-success : hover , . btn-success : active {
background : # 4caf50 ;
border-color : # 4caf50 ;
color : # fff ; }
. btn-black {
background : # 212121 ;
border-color : # 212121 ;
font-family : "source_sans_proregular" , sans-serif ;
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 ; }
/* error messages */
/* error animations */
@ -webkit-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -moz-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -o-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
. alert-msg-holder {
margin : 0 auto ;
text-align : center ;
max-width : 1170px ! important ; }
. alert-ajax {
-webkit-animation : bounce 800ms ease-out ;
-moz-animation : bounce 800ms ease-out ;
-ms-animation : bounce 800ms ease-out ;
-o-animation : bounce 800ms ease-out ;
animation : bounce 800ms ease-out ; }
# sidebar {
float : right ;
width : 25 . 6 % ; }
# sidebar h2 {
font-size : 23px ;
line-height : 23px ;
font-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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-family : "source_sans_prosemibold" , sans-serif ;
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 ; } }
@ font-face {
font-family : 'source_sans_probold' ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-bold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-bold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-bold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prolight' ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-light-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-light-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-light-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-light-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_proregular' ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-regular-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-regular-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-regular-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
@ font-face {
font-family : 'source_sans_prosemibold' ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot" ) ;
src : url ( "../fonts/sourcesanspro-semibold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff2" ) format ( "woff2" ) , url ( "../fonts/sourcesanspro-semibold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/sourcesanspro-semibold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ; }
/* variables */
/**/
/**/
/* buttons */
. btn-default {
background : # ececec ;
border-color : # ececec ;
font-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
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-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-primary : hover , . btn-primary : active {
background : # 0080b4 ;
border-color : # 0080b4 ;
color : # fff ; }
. btn-success {
background : # 4caf50 ;
border-color : # 4caf50 ;
font-family : "source_sans_proregular" , sans-serif ;
color : # fff ; }
. btn-success : hover , . btn-success : active {
background : # 4caf50 ;
border-color : # 4caf50 ;
color : # fff ; }
. btn-black {
background : # 212121 ;
border-color : # 212121 ;
font-family : "source_sans_proregular" , sans-serif ;
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 ; }
/* error messages */
/* error animations */
@ -webkit-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -moz-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ -o-keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
@ keyframes bounce {
0 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
5 % {
transform : translateY ( -100 % ) ;
opacity : 0 ; }
15 % {
transform : translateY ( 0 ) ;
padding-bottom : 5px ; }
30 % {
transform : translateY ( -50 % ) ; }
40 % {
transform : translateY ( 0 % ) ;
padding-bottom : 6px ; }
50 % {
transform : translateY ( -30 % ) ; }
70 % {
transform : translateY ( 0 % ) ;
padding-bottom : 7px ; }
80 % {
transform : translateY ( -15 % ) ; }
90 % {
transform : translateY ( 0 % ) ;
padding-bottom : 8px ; }
95 % {
transform : translateY ( -7 % ) ; }
97 % {
transform : translateY ( 0 % ) ;
padding-bottom : 9px ; }
99 % {
transform : translateY ( -3 % ) ; }
100 % {
transform : translateY ( 0 ) ;
padding-bottom : 9px ;
opacity : 1 ; } }
. alert-msg-holder {
margin : 0 auto ;
text-align : center ;
max-width : 1170px ! important ; }
. alert-ajax {
-webkit-animation : bounce 800ms ease-out ;
-moz-animation : bounce 800ms ease-out ;
-ms-animation : bounce 800ms ease-out ;
-o-animation : bounce 800ms ease-out ;
animation : bounce 800ms ease-out ; }
# 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 . langdrop {
width : 160px ; }
# footer . langdrop . dropdown-menu {
padding : 0 ;
border : none ;
box-shadow : none ;
overflow : hidden ; }
# footer . langdrop . dropdown-menu li a {
color : # 000 ;
padding : 3px 10px ; }
# footer . langdrop . dropdown-menu li a : hover {
color : # fff ;
background : # 0080b4 ; }
# footer . langdrop . dropdown-menu li : first-child a {
border-radius : 2px 2px 0 0 ; }
# footer . langdrop . dropdown-menu li : last-child a {
border-radius : 0 0 2px 2px ; }
# footer . langdrop . dropdown-menu li . selected a {
color : # fff ;
background : # 0080b4 ; }
# footer . langdrop button {
font-size : 16px ;
line-height : 18px ;
padding : 4px 30px 6px 10px ;
border : none ;
height : 28px ;
width : 100 % ;
text-align : left ;
background : # c8efff ;
overflow : hidden ;
position : relative ; }
# footer . langdrop button span {
display : inline-block ;
vertical-align : middle ; }
# footer . langdrop button i {
position : absolute ;
font-size : 16px ;
line-height : 16px ;
width : 16px ;
height : 16px ;
top : 50 % ;
right : 10px ;
margin : -8px 0 0 ;
z-index : 2 ;
-webkit-transform : rotate ( -180deg ) ;
-moz-transform : rotate ( -180deg ) ;
-ms-transform : rotate ( -180deg ) ;
-o-transform : rotate ( -180deg ) ; }
# footer . langdrop . open button i {
-webkit-transform : rotate ( -90deg ) ;
-moz-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
-o-transform : rotate ( -90deg ) ; }
# 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 . footer-holder {
display : table ;
width : 100 % ; }
# footer . footer-holder > ul {
list-style : none ;
padding : 0 ;
margin : 0 ;
text-transform : capitalize ;
width : 440px ; }
# footer . footer-holder > ul li {
margin : 0 0 0 25px ;
float : left ; }
# footer . footer-holder > ul li : first-child {
margin : 0 ; }
# footer . column {
padding : 0 5px ;
display : table-cell ;
vertical-align : middle ; }
# footer . column . copyright-poweredby {
text-align : right ; }
# footer . column . copyright-poweredby p {
font-family : "source_sans_probold" , sans-serif ; }
# footer . column . copyright-poweredby p span {
font-family : "source_sans_proregular" , sans-serif ; }
# footer . column . copyright-poweredby p ~ span {
font-size : 12px ; }
/**/
@ media only screen and ( max-width : 991px ) {
# footer . footer-holder > ul {
width : 400px ; }
# footer . footer-holder > ul li {
float : none ;
display : inline-block ;
vertical-align : top ;
width : 33 % ;
margin : 0 0 10px -4px ;
padding : 0 5px ; }
# footer . footer-holder > ul li : first-child {
margin : 0 0 10px -4px ; } }
@ media only screen and ( max-width : 767px ) {
# footer . footer-holder {
display : block ; }
# footer . footer-holder > ul {
width : 100 % ;
padding : 0 0 0 8px ; }
# footer . footer-holder > ul li {
float : none ;
display : inline-block ;
vertical-align : top ;
width : 50 % ;
margin : 0 0 10px -4px ;
padding : 0 5px ; }
# footer . footer-holder > ul li : first-child {
margin : 0 0 10px -4px ; }
# 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 . langdrop {
margin : 0 auto ; } }
@ 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 ; }
. page-error . content-txt {
max-width : 300px ;
right : 40px ; }
. page-error . error-img {
margin : 0 0 20px ; }
. page-error . alert-text p {
margin : 0 0 20px ; }
. page-error . alert-text strong {
font : 30px / 40px "source_sans_proregular" , sans-serif ; } }
@ media only screen and ( max-width : 991px ) {
# ep_video_container > div . featured_video_details {
overflow : hidden ;
height : auto ; }
. 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 ; }
. scrollable-area-wrapper . hscrollbar ,
. scrollable-area-wrapper . vscrollbar {
display : none ! important ; }
. 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 ; }
. featured-video : nth-child ( n + 9 ) {
display : none ; }
. 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 ; }
. photo-view {
height : 300px ; }
. filter-dropdowns . sorting-col . dropdown-menu {
display : block ;
right : -9999px ; }
. filter-dropdowns . sorting-col . open > . dropdown-menu {
right : 0 ; }
# gallery {
height : 300px ; }
. signup-block . social-links span ,
. forgot-block . social-links span ,
. signin-block . social-links span {
display : block ;
margin : 0 0 10px ; }
. signup-block . social-links # social_buttons ,
. forgot-block . social-links # social_buttons ,
. signin-block . social-links # social_buttons {
display : block ;
margin : 0 auto ;
text-align : center ;
width : 260px ; }
. signup-block . social-links # social_buttons a ,
. forgot-block . social-links # social_buttons a ,
. signin-block . social-links # social_buttons a {
float : none ;
display : inline-block ;
vertical-align : top ;
margin : 0 5px ; } }
@ media only screen and ( max-width : 767px ) {
# content {
width : 100 % ;
float : none ;
padding : 0 10px ; }
. item-video . thumb-holder . cb_quickie {
display : none ; }
. 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 {
padding : 8px 8px 26px ;
height : auto ; }
. videos . video-info . title {
font-size : 14px ; }
. filter-dropdowns . dropdown {
display : block ;
margin : 0 0 2px ;
background : none ;
border-radius : 0 ;
border-bottom : 1px solid # d9d9d9 ;
line-height : 36px ;
height : 48px ; }
. filter-dropdowns . dropdown > a {
color : # 212121 ; }
. filter-dropdowns . dropdown > a span {
float : right ;
line-height : 36px ; }
. filter-dropdowns . sorting-col . dropdown-menu > li a . selected , . filter-dropdowns . sorting-col . dropdown-menu > li a : hover {
background : none ; }
. filter-dropdowns . dropdown-menu {
width : 100 % ;
background : # fff ;
font-size : 15px ;
line-height : 36px ; }
. filter-dropdowns . dropdown-menu . sub-menu {
position : static ;
left : 0 ;
border-radius : 0 ;
background : # f2f2f2 ; }
. filter-dropdowns . dropdown-menu . sub-menu . sub-menu {
background : # cccccc ; }
. filter-dropdowns . dropdown-menu . sub-menu . sub-menu . sub-menu {
background : # b3b3b3 ; }
. filter-dropdowns . dropdown-menu > li {
overflow : hidden ; }
. filter-dropdowns . dropdown-menu > li > div > a ,
. filter-dropdowns . dropdown-menu > li > a {
color : # 212121 ; }
. filter-dropdowns . dropdown-menu > li > div {
padding : 0 40px 0 0 ;
border-color : # d9d9d9 ; }
. filter-dropdowns . dropdown-menu > li > div i {
-webkit-transform : rotate ( 90deg ) ;
-moz-transform : rotate ( 90deg ) ;
-ms-transform : rotate ( 90deg ) ;
-o-transform : rotate ( 90deg ) ;
color : # 000 ;
background : none ;
margin : 0 ;
top : 0 ;
width : 48px ;
right : 0 ;
height : 48px ;
padding : 12px 16px 14px 20px ;
border-radius : 0 ; }
. filter-dropdowns . dropdown-menu > li > div : hover {
background : none ; }
. filter-dropdowns . cat-col ,
. filter-dropdowns . sorting-col {
padding : 0 ;
text-align : left ; }
. 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 . cover-holder {
height : 130px ; }
. cover . cover-holder > img {
max-height : 100 % ;
height : 100 % ; }
. cover . changeCover {
left : auto ;
right : 10px ; }
. cover . avatar {
width : 60px ;
height : 60px ;
left : 10px ;
bottom : auto ;
top : 62px ; }
. cover . ratting-counts {
padding : 10px 0 10px 90px ;
height : 74px ; }
. 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 {
display : block ;
margin : 0 auto 5px ;
width : 200px ; }
. report-block {
margin : 0 10px 16px ; }
. report-block . alert {
position : static ; }
. 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 ; }
. photo-view {
height : 200px ; }
. photo-view . btn-holder {
bottom : 10px ;
right : 10px ; }
. user-video-info . views-counter {
font-size : 14px ; }
. video-details . user-likes-sub ,
. view-details . user-likes-sub {
text-align : center ; }
. video-details . user-likes-sub . like-rating ,
. view-details . user-likes-sub . like-rating {
margin : 0 0 10px ; }
. video-details . user-likes-sub . subscribe-col ,
. view-details . user-likes-sub . subscribe-col {
text-align : center ; }
. collections . title a {
display : block ;
overflow : hidden ;
height : 20px ; }
# gallery {
height : 200px ; }
. page-error {
overflow-y : auto ; }
. page-error . content-txt {
max-width : 280px ;
right : 50 % ;
margin : 0 -140px 0 0 ;
top : 5px ; }
. page-error . error-img {
width : 90px ;
margin : 0 auto 10px ; }
. page-error . alert-text {
text-align : center ; }
. page-error . alert-text p {
margin : 0 0 5px ; }
. page-error . alert-text strong {
font : 24px / 24px "source_sans_proregular" , sans-serif ;
margin : 0 ; }
. page-error . monster {
bottom : auto ;
top : 100 % ;
left : 20px ; }
. page-error . base-bg {
bottom : auto ;
top : 100 % ; } }
@ media only screen and ( max-width : 400px ) {
. page-error {
overflow : hidden ; }
. page-error . monster {
bottom : 10px ;
top : auto ;
left : 20px ; }
. page-error . base-bg {
bottom : 10px ;
top : auto ; } }
@ media only screen and ( max-width : 360 ) {
. cd-popup . cb-popup-container {
width : 90 % ; } }
. heighlightacomment : target {
animation : heighlight_comment 5s ;
border-radius : 10px ; }
@ -webkit-keyframes heighlight_comment {
0 % {
background : # e0e0e0 ; }
100 % {
background : none ; } }
@ -moz-keyframes heighlight_comment {
0 % {
background : # e0e0e0 ; }
100 % {
background : none ; } }
@ -o-keyframes heighlight_comment {
0 % {
background : # e0e0e0 ; }
100 % {
background : none ; } }
@ keyframes heighlight_comment {
0 % {
background : # e0e0e0 ; }
100 % {
background : none ; } }
/*# sourceMappingURL=all.css.map */