/* Title : VICE CSS Author : Heath Beckett @ Ashe Avenue Development Author URI : http://www.asheavenue.com */ /* ----------------------------------------- Reset Styles ----------------------------------------- */ /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;} img:focus,a:focus {outline-style:none} /* ----------------------------------------- FONTS @font-face delcarations ----------------------------------------- */ @font-face { font-family: 'GothicBoldCond'; src: url('/themes/noisey/statics/font/vgothicboldcond.eot'); src: url('/themes/noisey/statics/font/vgothicboldcond.eot?#iefix') format('embedded-opentype'), url('/themes/noisey/statics/font/vgothicboldcond.woff') format('woff'), url('/themes/noisey/statics/font/vgothicboldcond.ttf') format('truetype'), url('/themes/noisey/statics/font/vgothicboldcond.svg#GothicBoldCond') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothicLight'; src: url('/themes/noisey/statics/font/vgothiclight.eot'); src: url('/themes/noisey/statics/font/vgothiclight.eot?#iefix') format('embedded-opentype'), url('/themes/noisey/statics/font/vgothiclight.woff') format('woff'), url('/themes/noisey/statics/font/vgothiclight.ttf') format('truetype'), url('/themes/noisey/statics/font/vgothiclight.svg#GothicLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothicBold'; src: url('/themes/noisey/statics/font/vgothicbold.eot'); src: url('/themes/noisey/statics/font/vgothicbold.eot?#iefix') format('embedded-opentype'), url('/themes/noisey/statics/font/vgothicbold.woff') format('woff'), url('/themes/noisey/statics/font/vgothicbold.ttf') format('truetype'), url('/themes/noisey/statics/font/vgothicbold.svg#GothicBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TradeGothic'; src: url('/themes/noisey/statics/font/TradeGothic.eot'); src: url('/themes/noisey/statics/font/TradeGothic.eot?#iefix') format('embedded-opentype'), url('/themes/noisey/statics/font/TradeGothic.ttf') format('truetype'), url('/themes/noisey/statics/font/TradeGothic.svg#TradeGothic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Mono Social Icons Font'; src: url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.eot'); src: url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.eot?#iefix') format('embedded-opentype'), url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.woff') format('woff'), url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.ttf') format('truetype'), url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.svg#MonoSocialIconsFont') format('svg'); src: url('/themes/noisey/statics/font/MonoSocialIconsFont-Custom.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face{ font-family: 'DroidSans'; font-style: normal; font-weight: 300; src: url('/themes/noisey/statics/font/DroidSans/DroidSans.eot'); /* IE9 Compat Modes */ src: local('DroidSans'), local('DroidSans'), url('/themes/noisey/statics/font/DroidSans/DroidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/themes/noisey/statics/font/DroidSans/DroidSans.woff') format('woff'), /* Modern Browsers */ url('/themes/noisey/statics/font/DroidSans/DroidSans.ttf') format('truetype'), /* Safari, Android, iOS */ url('/themes/noisey/statics/font/DroidSans/DroidSans.svg#DroidSans') format('svg'); /* Legacy iOS */ } @font-face{ font-family: 'RobotoLight'; font-style: normal; font-weight: 300; src: url('/themes/noisey/statics/font/RobotoLight/RobotoLight.eot'); /* IE9 Compat Modes */ src: local('RobotoLight'), local('RobotoLight'), url('/themes/noisey/statics/font/RobotoLight/RobotoLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/themes/noisey/statics/font/RobotoLight/RobotoLight.woff') format('woff'), /* Modern Browsers */ url('/themes/noisey/statics/font/RobotoLight/RobotoLight.ttf') format('truetype'), /* Safari, Android, iOS */ url('/themes/noisey/statics/font/RobotoLight/RobotoLight.svg#RobotoLight') format('svg'); /* Legacy iOS */ } @font-face{ font-family: 'IcoMoon'; src:url('/themes/noisey/statics/font/IcoMoon/IcoMoon.eot?-tn0vt8'); src:url('/themes/noisey/statics/font/IcoMoon/IcoMoon.eot?#iefix-tn0vt8') format('embedded-opentype'), url('/themes/noisey/statics/font/IcoMoon/IcoMoon.ttf?-tn0vt8') format('truetype'), url('/themes/noisey/statics/font/IcoMoon/IcoMoon.woff?-tn0vt8') format('woff'), url('/themes/noisey/statics/font/IcoMoon/IcoMoon.svg?-tn0vt8#IcoMoon') format('svg'); font-weight: normal; font-style: normal; } /* ----------------------------------------- BASE STYLES Typography, general tags ----------------------------------------- */ html, body { height: 100%; } body { background-color: #231f20; color: #42423b; font: 11px/17px arial,helvetica,sans-serif; } a { color: #263b69; cursor: pointer !important; text-decoration: none; } a:hover { text-decoration: underline; } em { font-style: italic; } strong { font-weight: bold; } h1,h2,h3,h4,h5,h6,p,.section_block ul { margin: 0 0 14px; } h2 { color: #000; font-size: 22px; line-height: 22px; font-weight: bold; text-transform: uppercase; } .fontface h2 { font-family: 'GothicBold', Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .cF, .fontface h2.cF { font-family: 'GothicBoldCond', Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg h2, .fontface .bg .cF, .fontface .bg h2.cF, .fontface .cs h2, .fontface .cs .cF, .fontface .cs h2.cF, .fontface .pl h2, .fontface .pl .cF, .fontface .pl h2.cF, .fontface .ru h2, .fontface .ru .cF, .fontface .ru h2.cF, .fontface .ro h2, .fontface .ro .cF, .fontface .ro h2.cF { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } h3, h1.vice_today { color: #000; font-size: 11px; font-weight: bold; line-height: 14px; letter-spacing: 2px; text-transform: uppercase; } .fontface h3, .fontface h1.vice_today { font-family: "GothicBold", Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg h3, .fontface .cs h3, .fontface .pl h3, .fontface .ru h3, .fontface .ro h3, .fontface .bg h1.vice_today, .fontface .cs h1.vice_today, .fontface .pl h1.vice_today, .fontface .ru h1.vice_today, .fontface .ro h1.vice_today { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } h4 { font-size: 14px; font-weight: bold; line-height: 17px; } h5 { font-size: 12px; font-weight: bold; } .cF:hover { text-decoration: none !important; } .section_block ul { } .section_block ul li { list-style: disc; margin-left: 14px; } .clr { clear: both; } /* ----------------------------------------- OUTER STRUCTURE Affects all views / layouts This should be EXTENDED and NOT MODIFIED ----------------------------------------- */ #window { min-height: 100%; width: 100%; /* background: #ccc;*/ } #doc { /* border: 2px solid #E5E6E7;*/ /* border-width: 0 2px;*/ /* margin: 0 auto;*/ /* position: relative;*/ /* width: 1000px;*/ /* box-shadow: 0 0 5px #E5E6E7;*/ /* -moz-box-shadow: 0 0 5px #E5E6E7;*/ /* -webkit-box-shadow: 0 0 5px #E5E6E7;*/ /* -o-box-shadow: 0 0 5px #E5E6E7;*/ } .counter_outer_wrap { background: #231f20; position: relative; z-index: 10000; /* float: left;*/ /* width: 100%;*/ } .wrap { /* border: 2px solid #E5E6E7;*/ /* border-width: 0 2px;*/ /* background: #fff;*/ clear: both; margin: 0 auto; position: relative; width: 1000px; /* width: 972px;*/ } .inner_wrap { float: left; width: 100%; } #masthead { background: #231f20 url("/themes/noisey/statics/img/bg_nav.png") repeat-x 0 27px; /* border-bottom: 2px solid #E5E6E7;*/ /* float: left;*/ height: 84px; /* width: 100%;*/ } .container { /* float: left;*/ /* width: 100%;*/ } #main { background-color: #fff; position: relative; top: -16px; float: left; width: 100%; } .container { /* float: left;*/ /* width: 100%;*/ } #main { position: relative; top: -16px; float: left; width: 100%; } /* top area */ #main #top { } #main .top .top_content { float: left; height: 350px; width: 100%; margin-bottom: 40px; } #main .top .sidebar { display: none; } /* top area with sidebar */ #main .top_ws .top_content, #main .top_vertical .top_content { /* border-right: 2px solid #E5E6E7;*/ margin-right: 2px; float: left; overflow: hidden; width: 640px; } #main .top_ws .sidebar, #main .top_vertical .sidebar { display: inline; float: left; width: 329px; } /* general column layout */ #main .columns { float: left; width: 100%; } #main .columns .column { float: left; position: relative; } #main .columns .a_column { z-index: 2; } #main .columns .b_column { width: 330px; z-index: 1; } #main .columns .b_column .right-rail-wrapper { position: absolute; width: inherit; } /* three column layout */ #main .abc_columns { /* background: url("/themes/noisey/statics/img/bg_columns_abc.png") no-repeat 0 14px;*/ margin: 0 0 14px; } #main .abc_columns .ab_column_wrap { float: right; width: 810px; } #main .abc_columns .a_column { padding: 14px 14px 0 0; width: 452px; } #main .abc_columns .c_column { width: 190px; } .main_index .abc_columns .c_columns { width: 160px !important; } .main_index .abc_columns .b_column { padding-top: 14px; } /* two column layout */ #main .ab_columns { /* border-top: 2px solid #E5E6E7;*/ /* background: url("/themes/noisey/statics/img/bg_columns_ab.png") no-repeat 0 14px;*/ margin: 0 0 14px; } #main .ab_columns .ab_column_wrap { width: 100%; } #main .ab_columns .a_column { width: 670px; } #main .ab_columns .c_column { display: none !important; } /* more from vice */ #more { background: #efefec; border: 1px solid #cbcdce; border-width: 1px 0; clear: both; min-width: 1000px; width: 100%; } #more .wrap .inner_wrap { clear: both; } #footer { } #footer > .wrap { padding: 24px 0 0; } #tracker { position: absolute; top: 0; left: -9999em; } /* top hero */ /* slick carousel styles */ /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } #main .top_vertical { /* padding-top: 14px;*/ } #main .top_hero_carousel { } #main .top.top_hero_carousel .top_content { position: relative; height: auto; float: none; } #main .top_hero_carousel .top_content .scrollable { height: auto; width: 640px; } #main .top_hero_carousel .top_content .item { position: relative; width: 640px; } #main .top_hero_carousel .top_content .item.hide { display: none; } #main .top_hero_carousel .top_content .item .media { overflow: hidden; width: 640px; } #main .top_hero_carousel .top_content .item .media img { width: 640px; margin: 0; } #main .top_hero_carousel .top_content div.items div.item .media .overlay_video { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat 0 -470px; bottom: 21px; display: block; height: 106px; left: 21px; position: absolute; width: 97px; } #main .top_hero_carousel .top_content div.items div.item .media:hover .overlay_video { background-position: 0px -576px; } #main .top_hero_carousel .top_content .item .title_bar { background: #000; padding: 14px; width: 612px; } #main .top_hero_carousel .top_content .item h1 #main .top_hero_carousel .top_content .item h2, #main .top_hero_carousel .top_content .item p { text-shadow: 0 1px 0 #000; } #main .top_hero_carousel .top_content .item h3, #main .top_hero_carousel .top_content .item h3 a { color: #fff; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: 0; margin: 0; text-transform: uppercase; } .fontface #main .top_hero_carousel .top_content .item h3, .fontface #main .top_hero_carousel .top_content .item h3 a { font-family:"GothicBoldCond", Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg #main .top_hero_carousel .top_content .item h3, .fontface .bg #main .top_hero_carousel .top_content .item h3 a, .fontface .cs #main .top_hero_carousel .top_content .item h3, .fontface .cs #main .top_hero_carousel .top_content .item h3 a, .fontface .ru #main .top_hero_carousel .top_content .item h3, .fontface .ru #main .top_hero_carousel .top_content .item h3 a, .fontface .ro #main .top_hero_carousel .top_content .item h3, .fontface .ro #main .top_hero_carousel .top_content .item h3 a { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #main .top_hero_carousel .top_content .item h3 { margin: 0 0 7px; } #main .top_hero_carousel .top_content .item h2, #main .top_hero_carousel .top_content .item h2 a { color: #fff; font-size: 15px; font-weight: normal; line-height: 18px; margin: 0; } #main .top_hero_carousel .top_content .item p.author, #main .top_hero_carousel .top_content .item p.author a { color: #fff; font-size: 12px; line-height: 17px; margin: 0; } #main .top_hero_carousel .browse_left_right { } #main .top_hero_carousel .browse_left_right a.left, #main .top_hero_carousel .browse_left_right a.right { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -64px -230px; cursor: pointer; height: 70px; left: 0; margin-top: -10px; position: absolute; text-indent: -9999em; top: 50%; width: 26px; z-index: 3; } #main .top_hero_carousel .browse_left_right a.right { background-position: -91px -230px; left: auto; right: 10px; } #main .top_hero_carousel .browse_left_right a.right:hover { background-position: -147px -230px; } #main .top_hero_carousel .browse_left_right a.left:hover { background-position: -120px -230px; } /* sidebar */ #main .top_hero_carousel .vice_feed_controls { height: 23px; } #main .top_hero_carousel .vice_feed_controls #vf_scroll { position: relative; top: 2px; } #main .top_hero_carousel .vice_feed_controls #vf_embed { top: 11px; } /* ----------------------------------------- INNER STRUCTURE Affects all views / layouts Defaults are FRONT PAGE This should be EXTENDED and NOT MODIFIED ----------------------------------------- */ /* Masthead */ #masthead { height: 93px; position: relative; z-index: 10000; } #masthead #ribbon { background: #000; color: #fff; float: left; font-size: 11px; font-weight: bold; height: 40px; min-width: 1000px; width: 100%; } #masthead #ribbon a { color: #807f74; } #masthead #ribbon ul { float: left; width: 100%; } #masthead #ribbon li { float: left; font-weight: bold; line-height: 24px; margin: 0 9px 0 0; width: auto; } #masthead #ribbon li:first-child { } #masthead #ribbon li.stumblethru { position: absolute; float: right; margin: 0; top: 4px; right: 125px; } /* VICE Family Site Links #3329 */ div#vicefamily_nav { /* float: left; margin-top: 10px; */ position: absolute; left: 10px; top: 10px; height: 45px; /* margin-left: -90px; */ width: 544px; z-index: 10000; } #vicefamily_nav li { border-right: 1px solid #333; float: left; } #vicefamily_nav li:last-child { border-right: 0px; } #vicefamily_nav li a { display: block; height: 22px; opacity: .4; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; -khtml-opacity: .5; -moz-opacity: .5; padding: 0 4px 0 12px; margin: 0 0px 0 6px; text-indent: -9999px; } #vicefamily_nav li a:hover { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; } #vicefamily_nav a.active { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; } #vicefamily_nav a { background-image: url("/themes/noisey/statics/img/global_nav_sprite.png?v=0.1"); background-repeat: no-repeat; } #vicefamily_nav a.site_vice { background-position: 0px 1px; width: 50px; } #vicefamily_nav a.site_noisey { background-position: 0px -20px; width: 56px; } #vicefamily_nav a.site_tcp { background-position: 0px -50px; width: 100px; } #vicefamily_nav a.site_mobo { background-position: 0px -70px; width: 100px; } #vicefamily_nav a.site_fightland { background-position: 0px -101px; width: 40px; } /*for retina display*/ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { #vicefamily_nav a { background-image: url("/themes/noisey/statics/img/global-nav-retina.png?01"); background-size: 130px 171px; } } /* Social Icons in Top Ribbon #3329 */ #masthead #ribbon ul.top_social_icons { float: right; /* margin-right: -170px; */ width: 400px; } #masthead #ribbon .top_social_icons li.top_social { float: right; margin-top: 10px; } #masthead #ribbon .top_social_icons li.top_social a { background: url("/themes/noisey/statics/img/global_nav_sprite.png?v=0.1") no-repeat -51px -233px; display: block; float: right; height: 20px; margin: 0 1px; text-indent: -9999px; width: 20px; } /*for retina display*/ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { #masthead #ribbon .top_social_icons li.top_social a { background-image: url("/themes/noisey/statics/img/global-nav-retina.png?01"); background-size: 130px 171px; } } #masthead #ribbon .top_social_icons li a:hover { } #masthead #ribbon .top_social_icons li.link_rss a { background-position: -109px -127px; } #masthead #ribbon .top_social_icons li.link_rss a:hover { background-position: -109px -149px; } #masthead #ribbon .top_social_icons li.link_tumblr a { background-position: -88px -127px; } #masthead #ribbon .top_social_icons li.link_tumblr a:hover { background-position: -88px -149px; } #masthead #ribbon .top_social_icons li.link_twitter a { background-position: -66px -127px; } #masthead #ribbon .top_social_icons li.link_twitter a:hover { background-position: -66px -149px; } #masthead #ribbon .top_social_icons li.link_fb a { background-position: -44px -127px; } #masthead #ribbon .top_social_icons li.link_fb a:hover { background-position: -44px -149px; } #masthead #ribbon .top_social_icons li.link_youtube a { background-position: -23px -127px; } #masthead #ribbon .top_social_icons li.link_youtube a:hover { background-position: -23px -149px; } #masthead #ribbon .top_social_icons li.link_email a { background-position: -2px -127px; } #masthead #ribbon .top_social_icons li.link_email a:hover { background-position: -2px -149px; } .jp .top_social_icons .link_tumblr { display: none; } #masthead #ribbon li.stumblethru a { background: url("/themes/noisey/statics/img/vice_assets.png?2") no-repeat -280px -470px; color: #fff; display: block; border-right: 1px solid #8d8d8d; padding: 0 17px 0 23px; line-height: 16px; width: auto; } #masthead #ribbon li.region_select { float: right; margin: 7px 14px 0 0; text-align: left; width: 145px; } #masthead #ribbon li.region_select p { border: 1px solid #000; border-width: 0 1px; color: #fff; margin: 0; padding-right: 9px; text-align: right; /* width: 125px;*/ } #masthead #ribbon li.region_select p:hover, #masthead #ribbon li.region_select:hover p { /* border-color: #333;*/ cursor: pointer; } #masthead #ribbon li.region_select p span { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat 100% -143px; display: block; padding-right: 12px; } #masthead #ribbon li.region_select ul { display: none; border: 1px solid #333; border-width: 0 1px 1px; background: #000; float: none; width: auto; } #masthead #ribbon li.region_select:hover ul { display: block; } #masthead #ribbon li.region_select ul li { border-top: 1px solid #333; display: block; margin: 0; float: none; text-align: right; } #masthead #ribbon li.region_select ul li a { color: #fff; display: block; padding: 0 21px; } #masthead #ribbon li.region_select ul li a:hover { background: #333; } #masthead #logo { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat 0 -188px; height: 38px; left: 16px; position: absolute; text-indent: -9999em; top: 12px; width: 138px; } #masthead #logo a { display: block; height: 34px; width: 100%; } /* #masthead #ad_leaderboard { height: 90px; overflow: hidden; position: absolute; right: 6px; top: 30px; width: 728px; } #ad_leaderboard .ad_wrap { height: 90px; overflow: hidden; width: 728px; } */ #masthead #search { height: 21px; position: absolute; right: 6px; top: 131px; width: 170px; } #masthead #search input.text { float: left; margin-right: 4px; padding: 3px 7px 2px; width: 123px; border: 1px solid #cbcdce; } /* navigation */ #masthead #navigation { left: 175px; position: absolute; top: 0px; z-index: 9999; } #masthead #navigation ul { float: left; } #masthead #navigation li { float: left; position: relative; width: auto; } #masthead #navigation li a { color: #fff; cursor: pointer; display: block; font-size: 11px; line-height: 56px; font-weight: bold; letter-spacing: 2px; margin-right: 1px; /* padding: 0 8px;*/ padding: 0 9px; text-transform: uppercase; } .en_ca #masthead #navigation li a { width: 100px; } .en_ca #masthead #navigation li:nth-child(2) a { width: 110px; } .en_ca #masthead #navigation li:nth-child(4) a, .en_ca #masthead #navigation li:nth-child(5) a, .en_ca #masthead #navigation li:nth-child(6) a { width: 80px; } /* for noisey */ #masthead #navigation li a { background: transparent url("/themes/noisey/statics/img/divider_nav.png") no-repeat 0 0; text-align: center; text-shadow: 2px 0px 0 #000; -moz-text-shadow: 2px 0px 0 #000; -webkit-text-shadow: 2px 0px 0 #000; -o-text-shadow: 2px 0px 0 #000; -ms-text-shadow: 2px 0px 0 #000; width: 110px; } #masthead #navigation.navigation_pl li a { width: auto; padding: 0 20px 0 26px; } #masthead #navigation li a span { padding-bottom: 2px; } .fontface #masthead #navigation li a { font-family: 'GothicBold', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; } .fontface .bg #masthead #navigation li a, .fontface .cs #masthead #navigation li a, .fontface .pl #masthead #navigation li a, .fontface .ru #masthead #navigation li a, .fontface .ro #masthead #navigation li a { font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } @media screen and (-webkit-min-device-pixel-ratio:0) { #masthead #navigation li a { padding-top: 2px; } } #masthead #navigation.navigation_en_us > ul > li > a { background: none; padding: 0 15px; width: auto; } #masthead #navigation li.active > a, #masthead #navigation li > a:hover, #masthead #navigation li:hover > a { /* background: #fff; border: 0 !important; color: #231f20; */ text-decoration: none !important; } #masthead #navigation li.active > a span, #masthead #navigation li > a:hover span, #masthead #navigation li:hover > a span { /* background: #fff; border: 0 !important; color: #231f20; */ border-bottom: 2px solid #fff; text-decoration: none !important; } #masthead #navigation ul ul { background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.5); -moz-box-shadow: 0 0 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.5); -o-box-shadow: 0 0 3px rgba(0,0,0,.5); border-top: 5px solid #000; display: none; position: absolute; top: 20px; left: 50%; margin-left: -38px; width: 76px; } #masthead #navigation.navigation_alps ul ul { margin-left: -58px; width: 116px; } #masthead #navigation.navigation_fr ul ul { margin-left: -47px; width: 94px; } #masthead #navigation ul li:hover > ul { display: block; } #masthead #navigation ul ul li { float: none; width: 100%; } #masthead #navigation ul ul li a { border-top: 1px dotted #E5E6E7; padding-top: 7px; font-size: 11px; padding: 0; text-align: center; width: 100%; z-index: 9999; } #masthead #navigation ul ul li:first-child a { border-top: 0; padding-top: 0; } #masthead #navigation.navigation_pt_br li a { width: auto; padding: 0 8px 0 14px; } /* masthead search */ #masthead #masthead_search { position: absolute; right: 14px; top: 19px; width: auto; } #masthead #masthead_search input.text { border-right: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-bottomleft: 2px; color: #000; float: left; height: 14px; outline: none; width: 86px; } #masthead #masthead_search input.text:focus { border-color: #666; } #masthead #masthead_search input.text:focus + input.submit.vbutton { border-color: #666 !important; } #masthead #masthead_search input.submit { cursor: pointer; float: left; width: auto; } #masthead #masthead_search input.submit.vbutton { border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomleft: 0; line-height: 15px !important; padding: 2px 7px; *padding: 1px 3.5px 0; } /* masthead newsletter */ #masthead #masthead_newsletter { position: absolute; right: 17px; top: 44px; } .sbutton, .get_newsletter a { background: #f6f7f5; border: 1px solid #cbcdce; color: #000; display: block; font-size: 11px; /* font-weight: 600;*/ line-height: 19px; letter-spacing: .1em; text-align: center; text-transform: uppercase; width: 119px; } .sbutton { cursor: pointer; display: inline-block; padding: 0 5px; *padding: 0; width: auto; } /* social buttons */ #masthead .social_buttons { position: absolute; right: 17px; top: 41px; width: auto; } #masthead .social_buttons ul, .promo_bar .social_buttons ul { float: left; width: auto; } #masthead .social_buttons li, .promo_bar .social_buttons li { float: left; margin-left: 6px; width: auto; } #masthead .social_buttons a, .promo_bar .social_buttons a { /* icons by WPZOOM Social Networking Icon Set by David Ferreira - http://www.wpzoom.com */ background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat; display: block; height: 20px; text-indent: -9999em; width: 20px; } #masthead .social_buttons a:hover { opacity: 0.75; } #masthead .social_buttons li.rss a, .promo_bar .social_buttons li.rss a { background-position: 0 -60px; } #masthead .social_buttons li.facebook a, .promo_bar .social_buttons li.facebook a { background-position: 0 0; } #masthead .social_buttons li.twitter a, .promo_bar .social_buttons li.twitter a { background-position: 0 -30px; } #masthead .social_buttons li.tumblr a, .promo_bar .social_buttons li.tumblr a { background-position: 0 -90px; } /* promo bar */ #promo_bar { border: 1px solid #e5e6e7; border-width: 1px 0; padding: 6px 0; float: left; width: 100%; } .promo_bar .story { float: left; height: 18px; margin-left: 20px; max-width: 650px; overflow: hidden; } .promo_bar .story a { color: #6a6a69; font-size: 10px; } .promo_bar .story a.see-more { font-weight: bold; text-decoration: underline; } .promo_bar .email_signup { float: right; margin: 0 11px 0 0; width: auto; } .promo_bar .email_signup input.text { float: left; margin-right: 4px; padding: 2px 7px; width: 120px; } .promo_bar .email_signup input.image { float: left; width: auto; } /* top */ .top { } .sidebar_top { } .top_content .facebook_like, .sidebar_top .facebook_like, .b_column .facebook_like { margin: 0 14px 14px 14px; } .facebook_like { clear: both; position: relative; } .main_index .facebook_like { border-top: 1px solid #cccecd; clear: both; margin-top: 15px; padding-top: 15px; } .facebook_like .facebook_like_wrap { padding: 5px 0 0px 0; margin: 0 0 6px 0; } .main_index .facebook_like .facebook_like_wrap { padding: 5px 0 8px 0; margin: 0 0 6px 0; } .main_index h3.social-header { padding: 15px 0 0 0; } .b_column h3.social-header { padding: 15px 0 0 0; margin: 20px 0 15px 0; } .b_column .facebook_like { border-bottom: 1px solid #cccecd; padding: 0 0 20px 0; } .b_column .facebook_like:first-child .facebook_like_wrap { border-top: 0; } .sidebar_top .facebook_like_wrap { padding: 14px 0; } .facebook_like .spotify_button { float: left; height: 20px; } .facebook_like .spotify_button a { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -280px -510px; color: #42423B; float: left; font-weight: bold; line-height: 20px; padding-left: 24px; } .sidebar_top .tumblr_button, .facebook_like .tumblr_button { float: left; height: 20px; margin: 0 0 0 5px; width: 20px; } .sidebar_top .tumblr_button a, .facebook_like .tumblr_button a { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -280px -603px; display: block; height: 20px; width: 20px; text-indent: -9999px; } .sidebar_top .youtube_button, .facebook_like .youtube_button { clear: left; margin: 0 8px 0 0; padding: 10px 0 0; height: 20px; } .facebook_like .twitter_button { float: left; height: 20px; overflow: hidden; width: 60px; } .facebook_like .newsletter { float: left; margin: 0 0 0 8px; width: auto; } .top_stories_wrap .top_stories { border-right: 2px solid #E5E6E7; padding: 17px; float: left; height: 285px; width: 159px; } .top_stories_wrap h3 { } .top_stories_wrap .top_stories li.story { font-weight: bold; font-size: 12px; line-height: 14px; margin: 0 0 14px; } .top_stories_wrap .top_stories li.story img { margin: 0; } .top_stories_wrap .top_stories li.story p { font-size: 11px; line-height: 13px; margin: 0 0 0 48px; } .sidebar_top .more_stories { float: left; font-size: 11px; line-height: 13px; padding: 17px; width: 100px; } .sidebar_top .more_stories li.story { font-weight: bold; margin: 0 0 13px; } .sidebar_top .current_issue { margin: 0 0 14px; overflow: hidden; width: 100px; } .sidebar_top .current_issue img { box-shadow: 1px 1px 3px #94908b; -moz-box-shadow: 1px 1px 3px #94908b; -webkit-box-shadow: 1px 1px 3px #94908b; display: block; height: 130px; width: 100px; } .sidebar_top .current_issue p { color: #263B69; font-weight: bold; margin: 0; } .sidebar_top .in_the_magazine { clear: both; } /* more from vice */ #more { position: relative; } #more h3 { margin: 14px; } #more ul.more_from_vice { float: left; padding: 0 0 14px 14px; width: 986px; } #more ul.more_from_vice li { float: left; line-height: 14px; margin-left: 21.6px; width: 144px; } #more ul.more_from_vice li:first-child { margin-left: 0; } @media screen and (-webkit-min-device-pixel-ratio:0) { /* webkit is incapable of sub-pixel margining, so do this instead */ #more ul.more_from_vice li { margin-left: 22px; } #more ul.more_from_vice li:last-child { margin-left: 20px; } } #more ul.more_from_vice li strong { color: #263b69; display: block; } #more ul.more_from_vice li img { display: block; margin-bottom: 10px; } #more ul.more_from_vice li a { color: #42423b; } #more ul.more_from_vice li a:hover { text-decoration: none; } #more ul.more_from_vice li a:hover strong { text-decoration: underline; } /* facebook recommendations sidebar */ .facebook_recommendations_wrap { height: 300px; } /* footer */ #footer { } .footer .about { float: right; font-size: 11px; line-height: 18px; margin-right: 14px; width: 85px; } .footer .about h4 { color: #000; font-size: 16px; margin-top: 7px; } .related_sites { float: left; margin-bottom: 34px; overflow: hidden; width: 1000px; } .related_site { float: left; margin-left: 14px; width: 183px; } .related_site img { display: block; margin-bottom: 17px; } .related_site .rs_title { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat 0 -372px; display: block; margin: 0 0 17px; height: 30px; text-indent: -9999em; width: 59px; } .related_site .rs_creators { background-position: 0 -403px; width: 135px; } .related_site .rs_noisey { background-position: -280px -372px; width: 64px; } .related_site .rs_motherboard { background-position: -280px -403px; width: 79px; } .related_site .rs_advice { background-position: 0px -434px; width: 76px; } .related_site ul { overflow: hidden; width: 166px; } .related_site li { background: url("/themes/noisey/statics/img/i_bull.png") no-repeat; color: #263B69; height: 18px; line-height: 18px; padding-left: 8px; position: relative; overflow: hidden; /* width: 300px;*/ /* *width: 173px; /* lte IE 7 */ } .related_site li a { font-size: 11px; } .related_site li a:hover { text-decoration: underline; } .related_site li span.overlay { display: none; background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -480px 0; *display: none; /* lte IE 7 */ height: 30px; left: 146px; position: absolute; top: 0; width: 20px; } .footer .banner { background-color: #231f20; clear: both; color: #fff; font-size: 11px; height: 24px; padding: 0 14px; } .footer .banner-es, .footer .banner-es_mx { font-size: 10px; } .footer .banner .legal { float: left; font-weight: bold; line-height: 24px; width: auto; } .footer .banner ul { float: left; display: inline; padding: 7px 0 0; width: auto; } .footer .banner ul li { border-left: 1px solid #fff; display: inline; float: left; line-height: 10px; margin: 0 0 0 6px; padding: 0 0 0 7px; width: auto; } .footer .banner ul li a, .footer .banner .colophon a { color: #fff; font-weight: bold; } .footer .banner .colophon { float: right; padding: 7px 0 0; line-height: 10px; width: auto; } .footer #partner-sites{ padding:24px 0 0; } /* ----------------------------------------- FORMS General form styles ----------------------------------------- */ .hidden { display: none !important; } div.input { float: left; width: 100%; } .text input, input.text, textarea, .dinp { border: 1px solid #cbcdce; color: #807f74; padding: 3px 3px 2px; } .dinp { background: #F6F7F5; } .clb { clear: both; height: 0; line-height: 0; margin: 0; padding: 0; } div.input { margin: 0 0 14px; *margin: 0; *padding: 0 0 14px; } div.text { } div.text label, div.text .dinp { display: block; } .a_column div.text input, .a_column div.text .dinp { color: #000; width: 300px; } .a_column div.text .dinp { color: #807F74; } .ccols2 .ccol div.text input { } div.checkbox { } div.checkbox label { margin: 0 0 0 7px; } div.submit { } div.submit input { background: #F6F7F5; border: 1px solid #CBCDCE; color: #fff; cursor: pointer; display: block; font-size: 11px; font-weight: bold; line-height: 11px; padding: 3px 5px; text-transform: uppercase; } /* errors */ .errorSummary { color: #f00; margin: 0 0 14px; } .errorSummary ul { margin: 0; padding: 0 0 0 30px; } .errorSummary li { list-style: disc; } /* misc buttons */ .fbb { background: #eceef5 url("/themes/noisey/statics/img/vice_assets.png") no-repeat -481px 5px; border: 1px solid #c9d5e6; border-radius: 2px; color: #335c95; display: inline-block; /* font-size: 10px;*/ line-height: 12px; padding: 5px 7px 5px 25px; } .fbb:hover { border-color: #9dacce; text-decoration: none !important; } /* ----------------------------------------- GENERAL CLASSES Classes built for any location ----------------------------------------- */ .clear { clear: both; } /* more links */ .more { clear: both; font-size: 11px; margin: 0; } .more a { display: block; } .ab_column_wrap p.l_more { border-top: 1px solid #CBCDCE; clear: both; margin: 0 14px 17px; padding: 17px 0 0; } .ab_column_wrap p.l_more a { font-size: 14px; font-weight: bold; line-height: 20px; } /* cufon */ .cufon-loading { visibility: hidden !important; } /* buttons */ .vbutton { background-color: #e3e8ed !important; /* fallback */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#bac4d4)) !important; /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #ffffff, #bac4d4) !important; /* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #ffffff, #bac4d4) !important; /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #ffffff, #bac4d4) !important; /* IE 10 */ background: -o-linear-gradient(top, #ffffff, #bac4d4) !important; /* Opera 11.10+ */ border: 1px solid #CBCDCE !important; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; color: #253c69 !important; display: inline-block; font-size: 11px; font-weight: bold; letter-spacing: 1px; line-height: 18px !important; outline: none !important; padding: 0 9px; text-shadow: 0 1px 0 #fff; -moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; -o-text-shadow: 0 1px 0 #fff; -ms-text-shadow: 0 1px 0 #fff; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; } .vbutton:hover { border-color: #465a80 !important; text-decoration: none !important; } .vbutton.disabled { background: #EFEFEC; color: #CBCDCE; cursor: default !important; } .vbutton.disabled:hover { border-color: #CBCDCE; } /* vbutton override for noisey dark style, since the submit button is outside of the white box */ #masthead .search .vbutton { background-color: #363435 !important; /* fallback */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#535355), to(#282425)) !important; /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #535355, #282425) !important; /* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #535355, #282425) !important; /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #535355, #282425) !important; /* IE 10 */ background: -o-linear-gradient(top, #535355, #282425) !important; /* Opera 11.10+ */ border: 1px solid #6d6e70 !important; color: #fff !important; text-shadow: 0 1px 0 #000; -moz-text-shadow: 0 1px 0 #000; -webkit-text-shadow: 0 1px 0 #000; -o-text-shadow: 0 1px 0 #000; -ms-text-shadow: 0 1px 0 #000; } /* story list */ ul.story_list { margin: 0; width: 100%; } ul.story_list li.story { clear: both; list-style: none; margin: 0 0 14px; padding: 0; } ul.story_list li.story .story_meta span { display: block; float: left; } ul.story_list li.story .story_meta span.view { border-right: 1px solid #C7C8CA; margin-right: 6px; padding-right: 6px; } ul.story_list li.story h2 { font-family: Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 22px; text-transform: none; } ul.story_list li.story a:hover p { text-decoration: underline; } ul.story_list li.story p { font-size: 13px; } ul.story_list li.story img { float: left; margin: 0; width: auto; } ul.story_list li.right-bar { float: left; } ul.story_list li.right-bar img { height: 70px; width: 120px; } ul.story_list li.story .story_thumbnail { display: block; left: 0; position: absolute; } .vice_today ul.story_list li.story .story_thumbnail img { width: 220px; height: 124px; } ul.story_list li.story .story_thumbnail span.overlay { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -97px -470px; height: 20px; left: 5px; position: absolute; top: 70px; width: 18px; } .b_column ul.story_list li.story .story_thumbnail span.overlay, ul.story_list li.story .story_thumbnail_sm span.overlay { top: 35px; } #vice_feed_tabs ul.story_list li.story .story_thumbnail span.overlay { top: 31px; } ul.story_list li.story .story_thumbnail:hover span.overlay { background-position: -97px -491px; } ul.story_list li.story_lg .story_thumbnail span.overlay { background-position: -115px -470px; height: 50px; left: 8px; top: 114px; width: 45px; } ul.story_list li.story_lg .story_thumbnail:hover span.overlay { background-position: -115px -520px; } .a_column ul.story_list li.story h4 a { color: #9c9c9a; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; } .vice_today ul.story_list li.story.small .story_thumbnail span.overlay { top: 99px; } .vice_today ul.story_list li.story.large .story_thumbnail span.overlay { top: 166px; } /* story facebook like / comment counter */ ul.story_list li.story div.comment_like_count_wrap { float: left; width: auto; } ul.story_list li.story div.comment_count, ul.story_list li.story div.like_count { float: left; width: auto; } ul.story_list li.story div.comment_count a, ul.story_list li.story div.like_count a { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -280px -188px; color: #3b5998; display: block; margin: 0px 5px 0px 0; opacity: .6; padding: 0 0 0 18px; height: 15px; transition: opacity 0.300s ease 0s; -moz-transition: opacity 0.300s ease 0s; -webkit-transition: opacity 0.300s ease 0s; -o-transition: opacity 0.300s ease 0s; } ul.story_list li.story div.comment_count a:hover, ul.story_list li.story div.like_count a:hover { opacity: 1; } ul.story_list li.story div.like_count a { background-position: -310px -190px; } /* story meta */ ul.story_list li.story .story_meta { color: #9b9da0; font-size: 11px; line-height: 13px; } li.story .story_meta .author { } li.story .story_meta .author a { } li.story .story_meta .category { text-transform: capitalize; } li.story .story_meta .author, li.story .story_meta .category, li.story .story_meta .comment_like_count_wrap { border-left: 1px solid #c7c8ca; margin-left: 6px; padding-left: 6px; } /* temporarily hiding this */ li.story .story_meta .comment_like_count_wrap { display: none; } li.story .story_meta .comment_like_count_wrap_solo { border-left: 0; margin-left: 0; padding-left: 0; } li.story .title { font-size: 11px; font-weight: bold; line-height: 14px; margin: 0; } li.story .episode { color: #42423b; font-size: 10px; margin: 0; } li.story a:hover .episode { text-decoration: none !important; } /* story list column defaults */ .a_column ul.story_list li.story, .a_column .more_vice_today, .ab_column_wrap .a_column ul.story_list_bt li.story:first-child { /* border-top: 1px solid #cbcdce;*/ border-top: 1px solid #cccecd; margin-top: 14px; padding-top: 14px; } .ab_column_wrap .a_column ul.story_list_bt li.story:first-child { margin-top: 0; } .a_column .more_vice_today { padding-bottom: 34px; } .a_column .vice_today ul.story_list li.story { padding-left: 235px; min-height: 124px; } .a_column ul.story_list li.story { padding: 15px 0 15px 108px; position: relative; margin: 0; min-height: 95px; } .a_column ul.story_list li.story:first-child { border: 0; margin-top: 0; padding-top: 0; } .a_column ul.story_list li.story h2, .a_column ul.story_list li.story .subtitle, .a_column ul.story_list li.story p, .a_column ul.story_list li.story .story_meta { } /* temporarily changing from 105px to 0 while thumbs are hidden */ .a_column ul.article_search_results li.story h2, .a_column ul.article_search_results li.story .subtitle, .a_column ul.article_search_results li.story p, .a_column ul.article_search_results li.story .story_meta { /* margin-left: 0px;*/ } .a_column ul.story_list li.story .subtitle { line-height: 15px; word-wrap: break-word; } .a_column ul.story_list li.story .story_meta { min-height: 13px; } .a_column ul.story_list li.story h2, .a_column ul.story_list li.story p { margin-bottom: 11px; } .a_column ul.story_list li.story span.tflag { position: absolute; top: 91px; left: -4px; } .a_column ul.story_list li.story:first-child span.tflag { top: 77px; } .a_column .more_vice_today { clear: both; float: left; font-size: 14px; font-weight: bold; margin-top: 0; width: 100%; } /* photo story item */ .a_column ul.story_list li.story_lg { height: 183px; padding-left: 0; } .a_column ul.story_list li.story_lg h2, .a_column ul.story_list li.story_lg .subtitle, .a_column ul.story_list li.story_lg p, .a_column ul.story_list li.story_lg .story_meta { margin-left: 225px; } .a_column ul.story_list li.story_lg span.tflag, .a_column ul.story_list li.story_lg:first-child span.tflag { position: absolute; top: 162px; left: -4px; } .a_column ul.story_list li.story_lg:first-child span.tflag { top: 148px; } .b_column ul.story_list { } .b_column .story_list p { margin-left: 130px; } .b_column .story_list a p.author { color: #42423B; } .c_column ul.story_list { } .c_column ul.story_list li.story { } .c_column ul.story_list li.story p { margin-left: 70px; } /* pager - pagination */ #main .pager { border-top: 1px solid #cccecd;; clear: both; height: 22px; margin-top: 14px; padding: 14px 0; position: relative; text-align: left; text-indent: -9999em; } #main .inline_pager { /* border-bottom: 1px solid #CBCDCE;*/ /* margin-bottom: 14px;*/ } #main ul.yiiPager { left: 0; line-height: 20px; position: absolute; text-align: center; text-indent: 0; top: 14px; width: 642px; } #main ul.yiiPager li { display: inline; margin: 0; } #main ul.yiiPager li.previous { position: absolute; top: 0; left: 0; } #main ul.yiiPager li.next { position: absolute; right: 0; top: 0; } #main ul.yiiPager li { } #main ul.yiiPager a { border: 1px solid #CBCDCE; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; background: none; color: #263B69; display: inline-block; font-size: 11px; font-weight: bold; line-height: 17px; padding: 0 7px; text-align: center; text-shadow: 0 1px 0 #fff; text-transform: uppercase; } #main ul.yiiPager a:hover, #main ul.yiiPager .selected a { background-color: #e3e8ed; /* fallback */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#bac4d4)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #ffffff, #bac4d4); /* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #ffffff, #bac4d4); /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #ffffff, #bac4d4); /* IE 10 */ background: -o-linear-gradient(top, #ffffff, #bac4d4); /* Opera 11.10+ */ border-color: #465a80; text-decoration: none !important; } /* tabs */ /* DEPRECATED - Currently not in use. Consider removal. .tabs { } .tabs ul.ui-tabs-nav { background: #efefec; border-bottom: 1px solid #cbcdce; float: left; height: 50px; width: 100%; } .b_column .tabs ul.ui-tabs-nav { margin-left: 1px; } .tabs ul.ui-tabs-nav li { float: left; height: 50px; width: auto; } .tabs ul.ui-tabs-nav li.ui-tabs-selected { background: #fff; border: 1px solid #cbcdce; border-width: 0 1px; border-bottom: 1px solid #fff; height: 50px; } .tabs ul.ui-tabs-nav li.ui-tabs-selected:first-child { border-left: 0; } .tabs ul.ui-tabs-nav a { color: #000; float: left; padding: 17px; width: auto; } .tabs ul.ui-tabs-nav a:hover { text-decoration: none; } .tabs .ui-tabs-panel { clear: both; padding: 17px; } .tabs .ui-tabs-hide { display: none; } */ /* text flags */ span.tflag { background: #07485a; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #fff; display: inline-block; font-size: 8px; /* font-weight: 600;*/ font-weight: bold; letter-spacing: -0.015em; line-height: 10px; padding: 0 3px; /* padding: 1px 4px 2px 2px\9; /* lte IE 8 */*/ /* *padding: 1px 4px 1px 2px; /* lte IE 7 */*/ position: relative; text-transform: uppercase; left: -1px; top: 0; top: -2px\9; *top: 0; } @media screen and (-webkit-min-device-pixel-ratio:0) { span.tflag { line-height: 9px; padding: 1px 3px; top: -2px; } } a:hover span.tflag, span.tflag:hover { text-decoration: none !important; } span.tflag_popular { background: #ac4e35; } span.tflag_article { background: #a27c4f; } span.tflag_video { background: #da9d58; } span.tflag_new { background: #005a6d; } span.tflag_photo { background: #7d9185; } /* scrollable */ .scrollable { position: relative; overflow: hidden; width: 669px; height: 160px; } .scrollable .items { } .items div.section { } .items div.section .item { float: left; margin-left: 21px; width: 144px; } .items div.section .item:first-child { margin-left: 0; } .items div.section .item strong { color: #263b69; display: block; font-size: 14px; } .items div.section .item img { display: block; margin-bottom: 10px; } .items div.section .item a { font-size: 12px; color: #42423b; } .items div.section .item a:hover { text-decoration: none; } .items div.section .item a:hover strong { text-decoration: underline; } /* section headers */ /* this whole thing needs to be refactored - lots of these styles aren't being used anymore and are leftover from all of the design tweaks */ .section_header_wrap { border: 1px solid #cccecd; border-width: 1px 0; clear: both; margin-bottom: 14px; *padding-bottom: 14px; padding: 14px 0; position: relative; } .comments .section_header_wrap { margin-left: 0; padding-top: 10px; } .page_header { border-top: 0; margin-left: 14px; margin-right: 14px; } .section_header_wrap_nb { border: 0; padding-bottom: 0; } .section_block + .section_header_wrap { top: -14px; margin-bottom: 3px; } .section_header_wrap h2, .section_header_wrap h3 { margin: 0; } .section_header { background: #000; color: #fff; font-size: 43px; font-weight: bold; height: 70px; line-height: 40px; letter-spacing: 0.2em; margin: 0 0 17px; padding: 29px 14px 0; width: 641px; text-transform: uppercase; } .fontface .section_header { font-family: 'GothicBoldCond', Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg .section_header, .fontface .cs .section_header, .fontface .pl .section_header, .fontface .ru .section_header, .fontface .ro .section_header { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .section_header a, .section_header a:hover { color: #fff !important; text-decoration: none !important; } .section_header_sm { padding: 17px 0 0 14px; width: 49.9%; } .section_header_more_episodes h3 { margin-bottom: 0; } .section_header_filter { padding: 15px 14px 0 0; } .page_header .magazine_pdf { float: right; font-weight: bold; height: 24px; line-height: 24px; width: auto; *text-align: right; *width: 250px; } .page_header .magazine_pdf .ico { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -280px -550px; float: right; height: 24px; margin-left: 7px; width: 23px; } /* top area feature scrollable */ .top_content { position: relative; } /* section filters */ .section_filter { float: right; width: auto; } .section_filter div.filter { float: right; margin-left: 14px; width: auto; } .section_filter div.filter select { width: 100px; } /* comments */ .comments { /* border-bottom: 2px solid #E5E6E7;*/ clear: both; /* padding: 17px 14px 0;*/ padding: 0 14px; position: relative; } .comments .section_header_wrap { border-bottom: 0; padding-bottom: 0; } .comments h3 { /* margin-bottom: 17px;*/ } .inline_socials { float: left; height: 21px; height: 40px; width: auto; z-index: 9999; } .inline_socials div.like, .inline_socials div.tweet, .inline_socials div.share, .inline_socials div.plusone, .inline_socials div.stumblebadge, .inline_socials div.reddit-badge, .inline_socials div.fb-share { float: right; margin-right: 8px; width: auto; } .inline_socials div.reddit-badge.offset { margin: 2px 0 0 0; } .inline_socials div.like { position: relative; height: 21px; width: 75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .inline_socials div.like { background-position: 51px 1px; } } .inline_socials div.tweet { position: relative; zoom: 1; } .inline_socials div.plusone { overflow: hidden; /* width: 60px;*/ } .inline_socials div.stumblebadge { position: relative; top: 1px; } .inline_socials div.share { margin-right: 8px; position: relative; top: 1px; width: auto; } /*Custom Share Button*/ .inline_socials div.fb-share.custom-fb-share { width: 97px; } .inline_socials div.fb-share.custom-fb-share a { display: block; float: left; } .inline_socials div.fb-share.custom-fb-share img { } .vmp-fb-share-count-wrapper { float: right; width: 30px; text-align: center; position: relative; border: 1px solid #ccc; background: #fff; height: 16px; } .pluginCountButtonNub { height: 0; left: -5px; position: relative; top: -14px; width: 5px; z-index: 2; } .pluginCountButtonNub s, .pluginCountButtonNub i { border-color: transparent #D7D7D7 transparent; border-style: solid; border-width: 4px 5px 4px 0; display: block; position: relative; top: 1px; } .pluginCountButtonNub i { border-right-color: #fff; left: 2px; top: -7px; } .comments .inline_socials { right: 14px; top: 11px; } .post_footer_social .inline_socials { float: left; height: auto; margin: 15px 0 15px 0; position: static; } .video_footer_social .inline_socials { margin: 0 0 15px 0; } .comments .comment_form { margin: 0 0 14px; padding: 0 0 0 89px; position: relative; } .comments .comment_form .comment_form_wrap { background: #ebebe9; border: 2px solid #c7c8ca; padding: 10px; } .comments .comment_form .comment_form_wrap p { margin: 3px 0 10px; } .comments .comment_form .comment_form_wrap input.text, .comments .comment_form .comment_form_wrap textarea { display: block; margin: 0 10px 10px 0; width: 521px; } .comments .comment_form .comment_form_wrap textarea { height: 42px; min-height: 42px; min-width: 521px; max-width: 521px; } .comments .comment_form .comment_form_wrap input.text:focus, .comments .comment_form .comment_form_wrap textarea:focus { color: #000; } .comments .comment_form .comment_form_wrap input.submit { background: #263B69; border: 1px solid #fff; color: #fff; cursor: pointer; font-weight: bold; float: left; margin-right: 14px; padding: 2px 0 1px; width: 40px; } .comments .comment_form .comment_form_wrap .post-to-facebook { float: left; padding-top: 2px; *padding-top: 1px; } .comments .comment_form .comment_form_wrap .post-to-facebook input { display: inline; margin-right: 3px; position: relative; top: 1px\9; /* oh IE, when will you behave */ } .comments .comment_form .comment_form_wrap .post-to-facebook label { display: inline; font-weight: bold; position: relative; top: -1px\9; } .comments .comment_form .avatar { position: absolute; top: 0; left: 0; } .captcha_containa{ margin-top:3px; } #comment_captcha_refresh{ display:block; } .comments .comments_list { margin: 0 0 14px; } .comments .comments_list .comment { margin: 0 0 17px; min-height: 75px; padding: 0 0 0 89px; position: relative; } .comments .comments_list .comment .comment_wrap { } .comments .comments_list .comment .comment_wrap .comment_meta { display: block; margin: 0 0 5px; } .comments .comments_list .comment .comment_wrap .comment_meta .date { color: #A0A2A5; font-style: italic; } .comments .comments_list .comment .comment_wrap p { margin: 0 0 5px; } .comments .comments_list .comment .avatar { left: 0; position: absolute; top: 0; } /* recommended stories */ .recommended_stories { padding: 17px 14px; } /* most popular list (text - no images) */ ul.most_popular_list { } ul.most_popular_list li { line-height: 17px; } ul.most_popular_list .tflag { margin-right: 4px; } ul.most_popular_list a:hover { text-decoration: none !important; } ul.most_popular_list a:hover .txt { text-decoration: underline !important; } /* stacked forms (registration page, etc) */ .stacked_form { position: relative; border-top: 1px solid #cccecd; margin-top: -2px; } .stacked_form .errorSummary { color: red; padding: 15px 0 0; } .stacked_form input, .stacked_form select, .stacked_form textarea { font-family: Arial, 'Helvetica', sans-serif; width: 130px; } .stacked_form input.fb_replaced { background: #ebebeb; color: #666; } .stacked_form select { padding: 1px 0; width: 160px; } .stacked_form input[type=checkbox] { border: 0 !important; padding: 0 !important; margin-right: 0 !important; width: auto; } .stacked_form .row { border-bottom: 1px solid #cccecd; clear: both; line-height: 18px; margin: 0; padding: 15px 0; } .stacked_form .row .row_label { display: block; float: left; margin-right: 20px; min-height: 18px; padding: 5px 0; width: 150px; } .stacked_form .row .row_label label { font-weight: bold; display: block; min-height: 18px; } .stacked_form .row .row_fields { display: block; margin-left: 180px; position: relative; zoom: 1; } .stacked_form .row .row_fields .field_wrap { display: inline-block; position: relative; } .stacked_form .row .row_fields .field_wrap input { border: 1px solid #ccc; margin-right: 20px; padding: 5px; vertical-align: middle; } .stacked_form .row .row_fields .field_wrap label { display: inline; word-wrap: break-word; } .stacked_form .row .row_fields .field_wrap label.error, .stacked_form .row .row_fields .field_wrap .errorMessage { display: block; color: red; margin-top: 15px; } .stacked_form .row .row_fields .field_wrap_checkbox label.error { display: inline; } .stacked_form .row .row_fields .field_wrap a { color: #000; text-decoration: underline; } .stacked_form .row .row_fields .field_wrap_submit input { padding: 3px 9px; width: auto; /* border: 0; background: #606060; color: #fff; cursor: pointer; letter-spacing: 1px; font-size: 10px; font-weight: normal; text-transform: uppercase;*/ } .stacked_form .row .row_fields .field_wrap_submit input:hover { border-color: #465a80; } .stacked_form .row .row_fields_password { } .stacked_form .row .row_fields_password .field_hint { padding-top: 15px; display: block; } .stacked_form .row .row_fields_captcha { } .stacked_form .row .row_fields_captcha .field_wrap, .stacked_form .row .row_fields_captcha .field_hint { display: block; } .stacked_form .row .row_fields_captcha .field_wrap { margin-bottom: 15px; } .stacked_form .row .row_fields_captcha .field_wrap img { border: 1px solid #ccc; display: block; } .stacked_form .row .row_fields_captcha .field_wrap a { background: #ccc; color: #000; display: inline-block; font-size: 10px; letter-spacing: 1px; line-height: 14px; padding: 3px; text-align: center; text-decoration: none; text-transform: uppercase; width: 116px; } /* content columns */ .ccols { float: left; width: 100%; } .ccols4 { } .ccols4 .ccol { float: left; width: 24.9%; } .ccols 2 { } .ccols2 .ccol { float: left; width: 49.9%; } /* ----------------------------------------- PAGE STYLES Extensions of basic structure for individual pages ----------------------------------------- */ /* front page */ /* homepage a column */ /* homepage b column */ .sidebar_block { padding: 14px 14px 0; width: 302px; } .ab_columns .sidebar_block.facebook_like:first-child { padding-top: 0; } .sidebar_block:last-child { /* padding-bottom: 14px;*/ } .sidebar_block > h3, .events_updates > h3 { border-top: 1px solid #cccecd; padding-top: 14px; } .sidebar_block:first-child > h3 { border-top: 0; padding-top: 0; } .ad_medium_rect + .sidebar_block > h3, .ad_half_page + .sidebar_block > h3 { border-top: 0; padding-top: 0; } .sidebar_block h3 a { color: #000; } .ad_three_by_three, .ad_medium_rect, .ad_half_page, .ad_skyscraper { padding: 15px 15px 0 15px; position: relative; width: 300px; } .ab_column_wrap .ad_medium_rect { /* top: -1px;*/ } .c_column .ad_skyscraper { margin: 0 1px 0 0; padding: 15px 14px 15px 15px; width: 160px !important; } .ad_medium_rect .ad_wrap { width: 300px; } .ad_medium_rect .ad_wrap object, .ad_medium_rect .ad_wrap embed, .ad_medium_rect .ad_wrap img { display: block; } .ad_half_page .ad_wrap { width: 300px; } .ad_skyscraper .ad_wrap { height: 600px; width: 160px; } .pixel { position: absolute; top: 0; left: -9999em; } .ad_top { background: #000; overflow: hidden; height: 106px; /* width: 999px;*/ /* padding-left: 1px;*/ } .ad_top .ad_wrap { height: 90px; left: 50%; margin-left: -364px; position: absolute; top: 8px; width: 728px; border: 1px solid #fff; } .ad_top .ad_wrap img { } .ad_masthead, .static_masthead { float: left; line-height: 0; width: 100%; } .ad_masthead img, .static_masthead img { margin: 0 auto; } .ad_leaderboard img, .ad_masthead img, .static_masthead img { display: block; line-height: 0; } .ad_masthead .ad_wrap { } .ad_masthead .ad_wrap img { display: block; } .ad_leaderboard { position: relative; min-width: 1000px; width: 100%; } .ad_leaderboard .wrap { left: 50%; margin-left: -364px; position: relative; top: 1px; width: 728px; } .sidebar_magazine { } .sidebar_magazine .story_wrap { position: relative; min-height: 212px; padding-left: 179px; } .sidebar_magazine .story_wrap ul.story_list li.story p { margin-left: 0; } .sidebar_magazine .media { border: 1px solid #CBCDCE; left: 0; position: absolute; top: 0; } .sidebar_magazine .media img { display: block; } .sidebar_events { } .sidebar_events ul.event_list { clear: both; } .sidebar_events ul.event_list li.story { border-top: 1px solid #cccecd; clear: both; margin: 0 0 14px; padding: 14px 0 0 ; } .sidebar_events ul.event_list li.story:first-child { padding-top: 0; border-top: 0; } .sidebar_events ul.event_list li.story p.date, .sidebar_events ul.event_list li.story h4.title, .sidebar_events ul.event_list li.story p { clear: both; margin: 0; line-height: 17px; } .sidebar_events ul.event_list p.date { font-weight: bold; } .sidebar_events .events_updates { clear: both; } .sidebar_events .events_updates h4 { font-weight: normal; font-size: 12px; margin: 0 0 6px; text-transform: uppercase; } .sidebar_events .events_updates div.input { margin: 0 0 6px; } .sidebar_events .events_updates div.text input { width: 222px; } .sidebar_events .events_updates div.select { margin-right: 6px; width: 238px; } .sidebar_events .events_updates div.select select { width: 238px; } .sidebar_events .events_updates div.submit { width: 54px; } .sidebar_more_from_author{ min-height: 67px; } .sidebar_spotify_widget { overflow: hidden; } .main_index .sidebar_spotify_widget { margin: 15px 0 0 0; } .b_column .sidebar_spotify_widget { clear: both; /* border-bottom: 1px solid #cccecd; padding: 0 0 15px 0; margin: 15px 0 15px 14px; */ } .b_column .sidebar_spotify_widget h3 { display: none; } .main_index .b_column .sidebar_spotify_widget h3 { display: block; } /* homepage c_column */ .main_index .c_column .sidebar_block { padding-left: 0; } .c_column .sidebar_block { width: 161px; } .sidebar_dos_donts { } .sidebar_dos_donts ul.story_list { } .sidebar_dos_donts ul.story_list li.story { margin-left: 12px; width: 75px; } .sidebar_dos_donts ul.story_list li.story:first-child, .c_column .sidebar_dos_donts ul.story_list li.story:first-child { margin-left: 0; } .b_column .sidebar_dos_donts { } .b_column .sidebar_dos_donts ul.story_list li.story { width: 145px; } .b_column .sidebar_related_shows { } .sidebar_related_shows ul.related_show_list li.story p { margin-left: 105px; } .c_column .sidebar_dos_donts { } .c_column .sidebar_dos_donts ul.story_list li.story { margin-left: 11px; } /* login */ .section_block { border-bottom: 1px solid #cccecd;; margin: 0 14px 14px; } .section_block_header { margin-top: 14px; } .a_column .section_block { float: left; width: 642px; } .a_column .section_block:last-child { border-bottom: 0; margin-bottom: 0; } /* user profile */ ul.active_sites_list { margin: 0 0 14px; } /* ad gutters */ #ad_gutter_left, #ad_gutter_right, #static_gutter_left, #static_gutter_right { display: none; position: absolute; top: 116px; z-index: 500; } #static_gutter_left, #static_gutter_right { top: 111px; display: block; height: 2400px; } #static_gutter_left, #static_gutter_right { width: 419px; } #ad_gutter_left, #static_gutter_left { text-align: right; } #ad_gutter_right, #static_gutter_right { text-align: left; } #ad_gutter_left a, #ad_gutter_right a, #ad_gutter_left img, #ad_gutter_right img, #static_gutter_left img, #static_gutter_right img { display: block; } /* vice feed */ .vice_feed { position: relative; width: 300px; margin: 0 14px; } .sidebar_top .vice_feed { margin: 0 14px; } .sidebar_block.vice_feed { margin: 0 14px; padding-left: 0; padding-right: 0; } .main_article_index .sidebar_block:first-child, .main_index .sidebar_block:first-child { padding-top: 1px; } .main_article_index .c_column .sidebar_block:first-child, .main_index .c_column .sidebar_block:first-child { padding-top: 14px; } #vice_feed, .vice_feed_tabs { width: 100%; } .vice_feed_tabs ul.tabs_nav { float: left; margin: 0 0 14px; width: 100%; } .vice_feed_tabs ul.tabs_nav li { float: left; width: auto; } .vice_feed_tabs ul.tabs_nav li a { background: #fff; color: #000; float: left; font-size: 11px; font-weight: bold; line-height: 11px; letter-spacing: 2px; margin: 0 0 0 -1px; text-align: left; text-transform: uppercase; width: auto; } .fontface .vice_feed_tabs ul.tabs_nav li a { font-family: "GothicBold", Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg .vice_feed_tabs ul.tabs_nav li a, .fontface .cs .vice_feed_tabs ul.tabs_nav li a, .fontface .pl .vice_feed_tabs ul.tabs_nav li a, .fontface .ru .vice_feed_tabs ul.tabs_nav li a, .fontface .ro .vice_feed_tabs ul.tabs_nav li a, .fontface .pt .vice_feed_tabs ul.tabs_nav li a { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } body.ro .vice_feed_tabs ul.tabs_nav li a { font-size: 10px; } body.bg .vice_feed_tabs ul.tabs_nav li a, body.pt .vice_feed_tabs ul.tabs_nav li a { font-size: 9px; } /* PT has some extra styles here to make it so that a button can be two lines, and the others are still centered. */ body.pt .vice_feed_tabs ul.tabs_nav li a { height: 28px; padding: 7px 0; } body.pt .vice_feed_tabs ul.tabs_nav li.latest a { line-height: 14px; } .vice_feed_tabs ul.tabs_nav li:first-child a { margin: 0; } .vice_feed_tabs ul.tabs_nav li.ui-tabs-selected a { background: #fff; } .vice_feed_tabs ul.tabs_nav li.top_stories a { width: 103px; } .vice_feed_tabs ul.tabs_nav li.latest a { width: 73px; } .vice_feed_tabs ul.tabs_nav li.most_popular a { width: 122px; } .vice_feed_tabs ul.tabs_nav li.ui-tabs-selected.most_popular a { /* border-right-color: #fff;*/ } .vice_feed_tabs .ui-tabs-hide { display: none !important; } .vice_feed_tabs .story_list_wrap { float: left; height: 200px; overflow: hidden; position: relative; width: 100%; } #feed_embed .vice_feed_tabs .story_list_wrap { height: 269px; } .vice_feed_tabs ul.story_list { } .vice_feed_tabs ul.story_list li.story { height: 60px; line-height: 14px; margin: 0 0 9px; overflow: hidden; width: 301px; } .vice_feed_tabs ul.story_list li.story a { display: block; max-height: 55px; overflow: hidden; } .vice_feed_tabs ul.story_list li.story p { margin: 0 0 0 74px; } .vice_feed_tabs ul.story_list li.story p.title { position: relative; top: -2px; } .vice_feed_tabs ul.story_list li.story p.excerpt { color: #42423B; } .vice_feed_tabs ul.story_list li.story a:hover p.excerpt { text-decoration: none !important; } .vice_feed_tabs .vf_scroll { background: url("/themes/noisey/statics/img/vice_assets.png") no-repeat -280px -440px; bottom: 15px; height: 20px; /* left: 14px;*/ left: 0; position: absolute; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; width: 60px; z-index: 9999; } .sidebar_block .vice_feed_tabs .vf_scroll { bottom: 1px; } .vice_feed_controls { clear: both; height: 20px; padding: 9px 0 14px; position: relative; } .sidebar_block .vice_feed_controls { padding-bottom: 0; } .vice_feed_controls #vf_embed { position: absolute; top: 9px; right: 0; } .vf_embed_overlay { display: none; background: url("/themes/noisey/statics/img/bg_vf_embed_overlay.png") repeat; position: absolute; top: 0; height: 289px; min-height: 289px; left: 0; width: 302px; z-index: 10000; } .vf_embed_overlay .vf_embed_wrap { background: #fff; border: 1px solid #CBCDCE; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,.15); -moz-box-shadow: 0 0 3px rgba(0,0,0,.15); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15); -o-box-shadow: 0 0 3px rgba(0,0,0,.15); -ms-box-shadow: 0 0 3px rgba(0,0,0,.15); display: none; left: 50%; padding: 14px; position: absolute; top: 50%; width: 200px; } .vf_embed_overlay .vf_embed_wrap input { background: #fff; border: 1px solid #CBCDCE; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; color: #42423B; display: block; margin: 0 0 14px !important; position: relative; outline: none; font-size: 14px; padding: 4px; width: 190px; } .vf_embed_overlay .vf_embed_wrap .close { } /* Noisey video overlay styles: Now Playing, Part x etc */ .related_videos .related_videos_list .related_video a { text-transform: uppercase; } .related_videos .related_videos_list .related_video a span.overlay, .related_videos .related_videos_list .related_video a span.overlay-current-video { background: #000 url("/themes/noisey/statics/img/bg_grid_overlay.png") repeat; color: #eeee00; font-size: 8px; /* letter-spacing: 1.5px;*/ font-weight: bold; height: auto; left: 0; line-height: 10px; padding: 2px 6px; position: absolute; top: 0; width: auto; /* calculated height is 14px*/ } .related_videos .related_videos_list .related_video a span.overlay-current-video { top: 14px; } /* age gate */ #agegate-wrap { } #agegate { background: #fff; color: #42423B; font: 11px/14px arial,helvetica,sans-serif; } #video-agegate{ background: #fff; color: #42423B; font: 11px/14px arial,helvetica,sans-serif; width:500px; height:203px; margin: 100px auto 0; } #agegate h2,#video-agegate h2 { background: #EFEFEC; border-bottom: 1px solid #CBCDCE; color: #42423B; font-weight: bold; margin: 0 0 14px 0; padding: 14px; } .fontface #agegate h2,.fontface #video-agegate h2 { font-family:'GothicBold', Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg #agegate h2, .fontface .cs #agegate h2, .fontface .pl #agegate h2, .fontface .ru #agegate h2, .fontface .ro #agegate h2 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #agegate h2 em,#video-agegate h2 em { background: url("/themes/noisey/statics/img/error_warning.png") no-repeat scroll 2px 0 #EFEFEC; display: block; font-weight: bold; font-style: normal; font-size: 36px; line-height: 30px; height: 48px; padding: 15px 0 0 75px; } .fontface #agegate h2 em,.fontface #video-agegate h2 em { font-family: 'GothicBoldCond', Arial, Helvetica, sans-serif; font-weight: normal; } .fontface .bg #agegate h2 em, .fontface .cs #agegate h2 em, .fontface .pl #agegate h2 em, .fontface .ru #agegate h2 em, .fontface .ro #agegate h2 em { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #agegate form,#video-agegate form { display: block; margin: 0 0 5px 0; padding: 0 10px 10px 90px; } #agegate span.birthdate,#video-agegate span.birthdate { float: left; font-weight: bold; line-height: 21px; margin-right: 7px; width: auto; } #agegate div.input,#video-agegate div.input { margin: 0; line-height: 21px; width: auto; } #agegate div.input label,#video-agegate div.input label { display: inline; width: auto; } #agegate div.text input,#video-agegate div.text input { background: #fff; border: 1px solid #CBCDCE; color: #807F74; margin: 0 6px 0 2px; padding: 3px 3px 2px; width: 16px; } #agegate div.text input.year { width: 30px; } #agegate div.submit,#video-agegate div.submit { display: block; padding: 0 0 10px 0; width: 100%; } #agegate div.submit input,#video-agegate div.submit input { cursor: pointer; display: inline-block; margin-right: 7px; padding-bottom: 2px; padding-top: 2px; } #agegate .error { color: red; clear: both; display: none; padding-top: 14px; } /* Facebook Social Bar */ .fb-recommendations-bar { position: fixed !important; bottom: 0; left: 0; z-index: 10001; } .fb-recommendations-bar > span:first-child { bottom: -2px !important; } /* Author Profile Pages */ .author_bio_area { border-bottom: 1px solid #cccecd; margin-bottom: 14px; position: relative; } .author_bio_area_has_image { min-height: 180px; padding-left: 225px; } .author_bio_area .thumbnail { display: block; left: 0; position: absolute; top: 0; } .author_bio_area h2 { margin-bottom: 7px; } .author_bio_area .author_title { color: #000; font-size: 15px; line-height: 17px; margin: 0 0 7px; } .author_bio_area .author_email_twitter { color: #263B69; font-weight: bold; } .author_email_twitter .author_email, .author_email_twitter .author_twitter { border-left: 1px solid #263B69; margin-left: 7px; padding-left: 11px; } .author_email_twitter .author_email:first-child, .author_email_twitter .author_twitter:first-child { border-left: 0; margin-left: 0; padding-left: 0; } /* About Pages: 3 Col Lists */ #main .about-3col { margin: 15px 0; text-align: left; } #main .about-3col ul { float: left; list-style-type: none !important; padding: 2px 10px; width: 190px; } .noisey-footer-ad-wrap { background: #f1f2f2; clear: both; margin: 0 auto; padding-bottom: 20px; width: 1000px; } .noisey-footer-ad-wrap .inner { width: 728px; margin: 0 auto; } /* @masthead vice network bar */ .vice-bar .wrap { margin: 0 auto; padding: 0 15px; position: relative; width: 970px; } .vice-bar { height: 30px; background: #000; z-index: 10001; } .vice-bar .logo { left: 0; position: absolute; top: 0; } .vice-bar .logo > a { display: block; filter: alpha(opacity=60); height: 30px; opacity: 0.6; position: relative; width: 130px; } .vice-bar .logo > a:hover { filter: alpha(opacity=100); opacity: 1; } .vice-bar .logo > a > span { background: url('/themes/thump/statics/img/sprite.png?103') no-repeat 0 0; background-size: 173% !important; display: block; height: 17px; position: relative; left: 15px; text-indent: -9999em; top: 7px; width: 50px; } .vice-bar .logo > a > b { background: url('/themes/thump/statics/img/sprite.png?103') no-repeat -95px 0; display: block; height: 8px; position: absolute; top: 12px; right: 48px; width: 8px; opacity: 0.6; -moz-opacity: 0.6; filter:alpha(opacity=60); } .vice-bar .logo > a:hover > b, .vice-bar .logo:hover > a > b .vice-bar .logo:hover > a { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); } .vice-bar .vice-family { background: #000; display: none; position: absolute; left: -6px; top: 30px; width: 111px; z-index: 10001; } .vice-bar .logo:hover .vice-family { display: block; } .vice-bar .vice-family a { border-top: 1px solid #585858; display: block; height: 52px; position: relative; width: 100%; } .vice-bar .vice-family a span { background: url('/themes/noisey/statics/img/sprite.png?103') no-repeat 0 -27px; display: block; height: 33px; left: 50%; margin: -16px 0 0 -35px; position: absolute; top: 50%; text-indent: -9999em; width: 71px; opacity: 0.35; -moz-opacity: 0.35; filter:alpha(opacity=35); } .vice-bar .vice-family a.selected span { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); } .vice-bar .vice-family a:hover span { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); } .vice-bar .vice-family .vf-vice-news a span { background-position: 0px -394px; height: 26px; margin: -13px 0 0 -44px; width: 89px; } .vice-bar .vice-family .vf-thump a span { background-position: 0 -80px; height: 21px; margin: -10px 0 0 -38px; width: 77px; } .vice-bar .vice-family .vf-noisey a span { background-position: 0 -104px; height: 19px; margin: -9px 0 0 -37px; width: 75px; } .vice-bar .vice-family .vf-creators a span { background-position: 0 -63px; height: 14px; margin: -7px 0 0 -39px; width: 79px; } .vice-bar .vice-family .vf-motherboard a span { background-position: 0 -126px; height: 8px; margin: -4px 0 0 -40px; width: 79px; } .vice-bar .vice-family .vf-munchies a span { background-position: 0 -424px; height: 10px; margin: -4px 0 0 -42px; width: 84px; } .vice-bar .vice-family .vf-vice-sports a span { background-position: 0 -434px; height: 22px; margin: -13px 0 0 -46px; width: 90px; } .vice-bar .vice-family .vf-i-d a span { background-position: 20px -361px; } .vice-bar .vice-family .vf-hbo a span { background-position: 0 -137px; height: 15px; margin: -7px 0 0 -38px; width: 76px; } .vice-bar .socials { float: right; position: relative; top: 7px; } .vice-bar .socials li { float: right; margin: 0 0 0 2px; } .vice-bar .socials li.link-youtube { margin-left: 7px; margin-right: 17px; } .vice-bar .socials li.link-fb { margin-top: -1px; } .vice-bar .socials li a { color: #fff; display: block; filter: alpha(opacity=35); float: right; font-family: 'Mono Social Icons Font'; font-size: 25px; margin: 0 1px; opacity: 0.6; position: relative; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .vice-bar .socials li a:hover { filter: alpha(opacity=100); opacity: 1; text-decoration: none !important; } .vice-bar .socials li a.selected { filter: alpha(opacity=100); opacity: 1; } .vice-bar .language-select { float: right; position: relative; top: 8px; z-index: 10001; } .vice-bar .language-select p { color: #fff; filter: alpha(opacity=60); margin: 0; opacity: 0.6; text-align: right; } .vice-bar .language-select p:hover { filter: alpha(opacity=100); opacity: 1; } .vice-bar .language-select p:hover, .vice-bar .language-select:hover p { cursor: pointer; } .vice-bar .language-select p span { display: block; font-weight: bold; padding-right: 15px; } .vice-bar .language-select p > b { background: url('/themes/thump/statics/img/sprite.png?103') no-repeat -95px 0; display: block; height: 8px; position: absolute; top: 5px; right: 0; width: 8px; opacity: 0.60; -moz-opacity: 0.60; filter:alpha(opacity=60); } .vice-bar .language-select p:hover > b, .vice-bar .language-select:hover p > b { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); } .vice-bar .language-select ul { background: #000; display: none; padding-top: 2px; position: absolute; right: 0; top: 16px; float: none; width: 145px; } .vice-bar .language-select:hover ul { display: block; } .touch .vice-bar .language-select:hover ul { display: none; } .vice-bar .language-select ul li { border-top: 1px solid #333; display: block; margin: 0; float: none; text-align: right; } .vice-bar .language-select ul li a { color: #fff; display: block; line-height: 20px; padding: 0 21px; } .vice-bar .language-select ul li a:hover { background: #333; } /*for retina display*/ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .vice-bar .logo > a > span, .vice-bar .logo > a > b, .vice-bar .vice-family a span { background-image: url('/themes/noisey/statics/img/sprite-retina.png?103'); background-size: 128px 465px; } } /* PL Font Fallback */ /* vice.css */ body.pl .fontface h2 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface .cF, body.pl .fontface h2.cF { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface h3, body.pl .fontface h1.vice_today { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface #main .top_hero_carousel .top_content .item h3, body.pl .fontface #main .top_hero_carousel .top_content .item h3 a { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface #masthead #navigation li a { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface .section_header { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface .vice_feed_tabs ul.tabs_nav li a { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface #agegate h2,.fontface #video-agegate h2 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .fontface #agegate h2 em,.fontface #video-agegate h2 em { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } /* vice.article.css */ body.pl .article_title h1 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl #main .article_feature_carousel .top_feature h1 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl #main .article_feature_carousel .top_feature h2 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } body.pl .recommended-articles-wrap h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }