/* coded by bob rudderow for newgrounds.com */ * {margin: 0; padding: 0; border: 0;} body { position: relative; /* added only so the blackout class will go to 100% */ background: #000 url(//cssimg.ngfiles.com/bg-skins/gold2-body.gif) top center repeat-y; } div.passport_head_links { display: inline-block; line-height: 46px; font-size:2em; padding-left:20px; font-weight:bold; /* background: url('//cssimg.ngfiles.com/icons/passport-header-icons.png') 14px 9px no-repeat; */ } div.passport_head_links a { left: -76px; position: relative; padding-left: 76px; color: #fc0; } div.passport_head_links a:hover, div.passport_head_links strong { color: #fff; } div.passport_container { display: none; width:100%; height:100%; background-color: rgba(0,0,0,0.85); position: absolute; z-index: 9100; } iframe.passport_frame { height: 100%; width: 100%; overflow: hidden; margin: 0px; padding: 0px; border: 0px; position: relative; } /* upload button in header */ div.header_upload_position { /* used when not logged in */ position:absolute; top: 10px; left: 164px; line-height: 21px; } div.header_upload_button { display:inline-block; border-left: 2px solid #363232; margin-left: 10px; padding-left: 10px; } div.header_upload_button a, div.header_upload_button a:visited { color:#fda238; font-weight:bold; font-size: 1.2em; background-color: #464D54; border: 2px solid #34393E; display:inline-block; padding-left: 4px; padding-right: 4px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#34393e+0,34393e+50,464d54+51,464d54+100 */ background: #34393e; /* Old browsers */ background: -moz-linear-gradient(top, #34393e 0%, #34393e 50%, #464d54 51%, #464d54 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34393e), color-stop(50%,#34393e), color-stop(51%,#464d54), color-stop(100%,#464d54)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #34393e 0%,#34393e 50%,#464d54 51%,#464d54 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #34393e 0%,#34393e 50%,#464d54 51%,#464d54 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #34393e 0%,#34393e 50%,#464d54 51%,#464d54 100%); /* IE10+ */ background: linear-gradient(to bottom, #34393e 0%,#34393e 50%,#464d54 51%,#464d54 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34393e', endColorstr='#464d54',GradientType=0 ); /* IE6-9 */ } div.header_upload_button a:hover { color:#FFFFFF; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5e6770+0,5e6770+50,7e8b98+51,7e8b98+100 */ background: #5e6770; /* Old browsers */ background: -moz-linear-gradient(top, #5e6770 0%, #5e6770 50%, #7e8b98 51%, #7e8b98 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e6770), color-stop(50%,#5e6770), color-stop(51%,#7e8b98), color-stop(100%,#7e8b98)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5e6770 0%,#5e6770 50%,#7e8b98 51%,#7e8b98 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5e6770 0%,#5e6770 50%,#7e8b98 51%,#7e8b98 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5e6770 0%,#5e6770 50%,#7e8b98 51%,#7e8b98 100%); /* IE10+ */ background: linear-gradient(to bottom, #5e6770 0%,#5e6770 50%,#7e8b98 51%,#7e8b98 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e6770', endColorstr='#7e8b98',GradientType=0 ); /* IE6-9 */ } div.uploads_page_links { text-align:center; font-size: 1.5em; } p.uploads_page_comment { margin: 12px; } div.uploads_page_links a.upload_button { color: #FFFFFF; display: inline-block; width: 429px; text-align: center; margin: 5px 200px 5px 200px; padding: 0px; font-weight: bold; } div.uploads_page_links a.upload_button:active { color: #FFFFFF; } div.uploads_page_links a.upload_button:visited { color: #FFFFFF; } div.uploads_page_links a.upload_button:hover { color: #FFFFFF; } span.upload_button_type { display:block; margin: 8px 0px 4px 0px; padding: 0px; color: #FFFFFF; font-size: 1.4em; } span.upload_button_supported { display:block; margin: 4px 0px 8px 0px; padding: 0px; color: #FFFFFF; font-size: 0.8em; } div.uploads_page_links a.upload_games { background-color: #392AFF; } div.uploads_page_links a.upload_games:hover { background-color: #5346FE; } div.uploads_page_links a.upload_movies { background-color: #981E33; } div.uploads_page_links a.upload_movies:hover { background-color: #AA3045; } div.uploads_page_links a.upload_audio { background-color: #4B8440; } div.uploads_page_links a.upload_audio:hover { background-color: #659D5B; } div.uploads_page_links a.upload_art { background-color: #CD58C3; } div.uploads_page_links a.upload_art:hover { background-color: #E17DD8; } div.uploads_page_links a.upload_projects { background-color: #524F7C; padding: 12px 0px 12px 0px; } div.uploads_page_links a.upload_projects:hover { background-color: #64618A; } #blackout { display: none; } #blackout.blackout-on { display: block; } #blackout_bg { width: 100%; height: 100%; background: black; position: absolute; z-index: 9006; opacity: .85; } .pagecentered { width: 100%; position: absolute; z-index: 9007; } .pagecentered > * { display: block; margin: 0 auto; } /* For moderator based popins */ .bbsmodraised { position: absolute; z-index: 9900; } /* in-progress swirl - i80 big swirly tank guy to be centred in page, see bbs index edit */ #progressi80 { width: 80px; height: 80px; margin: 0 auto; padding: 0; display: none; } #progressi80 > div { margin: 0; padding: 0; width: 80px; height: 80px; background: url("//cssimg.ngfiles.com/icons/in-progress/i80.gif") 0 0 no-repeat; } .skipto { display: none; } #outer { min-width: 976px; background-position: top center; background-repeat: no-repeat; } #pageerror, #welcome { min-height: 450px; } #pageerror .podcontent, #welcome .podcontent { padding: 125px 60px 100px 400px; font-size: 1.5em; line-height: 1.5em; } #pageerror img { position: absolute; left: 125px; top: 150px; } #pageerror ul { margin-left: 5px; } #welcome img { position: absolute; left: 30px; top: 90px; } #welcome p + p { margin-top: 20px; font-size: 14px; line-height: 20px; } div.validation_ticker { background-color: #34393e; border-top: 2px solid #000000; border-bottom: 2px solid #000000; padding: 6px; -webkit-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.79); -moz-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.79); box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.79); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b4f58+2,667175+3,4b4f58+4,353a3e+49,292e32+50,1d2124+96,292a2e+98,1d2124+98,1d2124+99 */ background: #4b4f58; /* Old browsers */ background: -moz-linear-gradient(top, #4b4f58 2%, #667175 3%, #4b4f58 4%, #353a3e 49%, #292e32 50%, #1d2124 96%, #292a2e 98%, #1d2124 98%, #1d2124 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#4b4f58), color-stop(3%,#667175), color-stop(4%,#4b4f58), color-stop(49%,#353a3e), color-stop(50%,#292e32), color-stop(96%,#1d2124), color-stop(98%,#292a2e), color-stop(98%,#1d2124), color-stop(99%,#1d2124)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4b4f58 2%,#667175 3%,#4b4f58 4%,#353a3e 49%,#292e32 50%,#1d2124 96%,#292a2e 98%,#1d2124 98%,#1d2124 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4b4f58 2%,#667175 3%,#4b4f58 4%,#353a3e 49%,#292e32 50%,#1d2124 96%,#292a2e 98%,#1d2124 98%,#1d2124 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4b4f58 2%,#667175 3%,#4b4f58 4%,#353a3e 49%,#292e32 50%,#1d2124 96%,#292a2e 98%,#1d2124 98%,#1d2124 99%); /* IE10+ */ background: linear-gradient(to bottom, #4b4f58 2%,#667175 3%,#4b4f58 4%,#353a3e 49%,#292e32 50%,#1d2124 96%,#292a2e 98%,#1d2124 98%,#1d2124 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4f58', endColorstr='#1d2124',GradientType=0 ); /* IE6-9 */ } div.validation_ticker_align { width: 970px; height: 40px; margin: auto; vertical-align: middle; } div.validation_ticker_icon { width: 31px; height: 31px; float: left; margin: 4px 0px 0px 6px; background:rgba(0,0,0,0.25); background-image: url(//cssimg.ngfiles.com//icons/h2-all.png); background-repeat: no-repeat; background-position: 0 -31px; } div.validation_ticker_msg { float: right; height: 32px; margin-right: 18px; background-color: #ff530d; font-size: 1.5em; color: #FFFFFF; text-align: center; padding: 3px; width: 900px; line-height: 32px; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border: 1px solid #000000; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc450c+5,cc450c+6,ff530d+48,ff530d+100 */ background: #cc450c; /* Old browsers */ background: -moz-linear-gradient(top, #cc450c 5%, #cc450c 6%, #ff530d 48%, #ff530d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#cc450c), color-stop(6%,#cc450c), color-stop(48%,#ff530d), color-stop(100%,#ff530d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cc450c 5%,#cc450c 6%,#ff530d 48%,#ff530d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cc450c 5%,#cc450c 6%,#ff530d 48%,#ff530d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cc450c 5%,#cc450c 6%,#ff530d 48%,#ff530d 100%); /* IE10+ */ background: linear-gradient(to bottom, #cc450c 5%,#cc450c 6%,#ff530d 48%,#ff530d 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc450c', endColorstr='#ff530d',GradientType=0 ); /* IE6-9 */ } .validation_ticker a, .validation_ticker a:visited, .validation_ticker a:hover { color: #ffff00; text-decoration: none; } /* HEADER */ .header { position: relative; width: 976px; height: 170px; margin: 0 auto; } .sitelinks { position: relative; top: 0; width: 976px; height: 48px; background: url(//cssimg.ngfiles.com/bg-header/sitelinks.png) top center no-repeat; } .sitelinks .search { position: absolute; top: 10px; right: 12px; height: 25px; padding-left: 20px; background: url(//cssimg.ngfiles.com/bg-header/search.png) 0 0 no-repeat; } .sitelinks .search input { float: left; margin-right: 5px; width: 145px; border: 0; } .sitelinks .search div.select { float: left; width: 100px; border: 0; } .sitelinks button { float: right; width: 66px; height: 25px; margin-left: 5px; border: 0; background-position: right 0; } .sitelinks button:hover { background-position: right -25px; } .sitelinks button[disabled] { background-position: right -50px; } .sitelinks .quicklinks { position: absolute; display: block; height: 25px; margin: 10px 15px; } .quicklinks strong a { float: left; height: 25px; padding-right: 10px; padding-left: 33px; margin-right: 10px; border-right: 2px solid #363232; background-position: left top; background-repeat: no-repeat; line-height: 25px; } .quicklinks > a, .quicklinks button.logout { position: relative; float: left; height: 21px; min-width: 21px; margin-right: 5px; border: solid 2px #4f280e; background: #6b3613; } .quicklinks > a > span, .quicklinks button.logout span { position: absolute; z-index: 2; display: block; left: 0; top: 0; width: 15px; height: 15px; margin: 3px; text-indent: -9999em; overflow: hidden; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; } .quicklinks em { display: block; height: 10px; line-height: 21px; padding-left: 21px; padding-right: 3px; font-style: normal; background: #4f280e; } .quicklinks em:empty { padding-right: 0; } .quicklinks > a:hover, .quicklinks button.logout:hover { background-color: #eb7522; border: solid 2px #9d4f18; } .quicklinks > a:hover em, .quicklinks button.logout:hover em { background: #9d4f18; } .quicklinks > form { /* these two styles just for the login button */ float: left; width: 25px; height: 25px; } .quicklinks button.logout { width: 100%; height: 100%; margin: 0; } .quicklinks button.logout em { position: absolute; z-index: 1; top: 0; left: 0; } div.eventlist ul, div.eventlist p { /* user notifications */ display: block; position: absolute; z-index: 9997; top: 25px; right: -167px; width: 220px; font-size: 11px; color: #fff; line-height: 30px; background-color: #000; border: solid 3px #0b0909; border-bottom-width: 2px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } div.eventlist li { overflow: hidden; /* wrap long usernames */ position: relative; height: 31px; } div.eventlist span, div.eventlist a { position: absolute; z-index: 9998; display: block; width: 220px; height: 30px; background: url(//cssimg.ngfiles.com/bg-header/activityfeed.jpg) 0 0 no-repeat; opacity: .8; } div.eventlist a { overflow: scroll; /* wrap long usernames */ height: 60px; /* wrap long usernames */ width: 500px; /* wrap long usernames */ z-index: 9999; line-height: 30px; border-bottom: solid 1px #000; background: none; opacity: 1; cursor: pointer; } div.eventlist a:hover { background: url(//cssimg.ngfiles.com/bg-header/activityfeed.jpg) 0 0 no-repeat; } div.eventlist img { float: left; height: 20px !important; width: 20px !important; margin: 3px 7px 3px 3px; border-left: solid 3px #eb7522; padding-left: 5px; padding-top: 2px; padding-bottom: 2px; } div.eventlist a strong { font-size: 11px; font-weight: bold; color: #fda238; } div.eventlist p { text-align: center; cursor: default; } div.eventlist li.game span, div.eventlist li.game a:hover { background-position: 0 -31px; } div.eventlist li.game img { border-left: solid 3px #3a94e0; } div.eventlist li.movie span, div.eventlist li.movie a:hover { background-position: 0 -62px; } div.eventlist li.movie img { border-left: solid 3px #f74040; } div.eventlist li.audio span, div.eventlist li.audio a:hover { background-position: 0 -93px; } div.eventlist li.audio img { border-left: solid 3px #60b136; } div.eventlist li.art span, div.eventlist li.art a:hover { background-position: 0 -124px; } div.eventlist li.art img { border-left: solid 3px #eb4fa2; } div.eventlist li.lit span, div.eventlist li.lit a:hover { background-position: 0 -155px; } div.eventlist li.lit img { border-left: solid 3px #26b28c; } .sitelinks .loginbox { position: absolute; display: block; width: 550px; height: 25px; margin: 10px 15px; } .loginbox > input { width: 155px; float: left; margin-right: 5px; border: none !important; } .loginbox > label { position: absolute; left: 3px; font-size: 1.2em; font-weight: bold; color: #000; opacity: .4; line-height: 26px; } .loginbox #password { width: 55px; } .loginbox #header_label_password { left: 173px; } .loginbox .checkboxes { margin: 0 !important; padding: 5px 0 !important; float: left; line-height: 1.2em; } .loginbox button { float: left; } .loginbox .loginlinks { float: left; padding-left: 10px; margin-left: 10px; border-left: 2px solid #5a5454; } .pagecentered > .two3 { float: none; width: 622px; position: relative; border: solid 3px #000; } .wide_popin { width: 948px; } .wide_popin > div { position: relative; border: solid 3px #000; } .formhelp { position: absolute; width: 285px; right: 10px; } .formhelp hr { margin: 10px 0; } .gatewaylogin > .podcontent { padding: 50px 150px !important; } .gatewaylogin .formhelp { right: 160px; top: 91px; } .gatewaylogin div > label { width: 70px; margin-right: 0 !important; } .gatewaylogin div > span { display: block; font-size: 1.2em; margin: 5px 0; } .header h1 a, .header h6 a { display: block; text-indent: -9999em; overflow: hidden; outline: none; } .header h1 a { position: absolute; bottom: 54px; margin: 0; width: 256px; height: 63px; background: url(//cssimg.ngfiles.com/bg-header/logo.png) bottom right no-repeat; } .header h6 a { float: right; margin-top: -69px; width: 68px; height: 15px; background: url(//cssimg.ngfiles.com/bg-header/wallartist.png) top left no-repeat; } .header h6:before, .header h6:after { content: ""; } /* undoes h6 styling in ng_type */ .header .siteinfo { position: absolute; bottom: 0; width: 976px; } /* navbar start */ .header .navigation { display: block; width: 976px; height: 54px; padding-top: 1px; background: url(//cssimg.ngfiles.com/bg-header/navigationTop.png) top left no-repeat; } .header .navigation .navbar { position: relative; display: block; width: 960px; height: 40px; margin: 7px 8px 0 8px; } .header .navigation dl { position: absolute; z-index: 9005; list-style: none; width: 136px; background-position: 0 41px; background-repeat: no-repeat; } #games { left: 0; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-games.jpg) } #movies { left: 136px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-movies.jpg) } #audio { left: 272px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-audio.jpg) } #art { left: 408px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-art.jpg) } #channels { width: 143px; left: 544px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-channels.jpg) } #community { width: 143px; left: 687px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-community.jpg) } #shop { width: 130px; left: 830px; background-image: url(//cssimg.ngfiles.com/bg-header/subnav-shop.jpg) } .header .navigation dt a { display: block; float: left; width: 100%; height: 40px; border-bottom: solid 1px #1b1717; text-indent: -4040em; overflow: hidden; background: url(//cssimg.ngfiles.com/bg-header/navbar2016.jpg) top left no-repeat; } #games dt a { background-position: 0 0; } #movies dt a { background-position: -136px 0; } #audio dt a { background-position: -272px 0; } #art dt a { background-position: -408px 0; } #channels dt a { background-position: -544px 0; } #community dt a { background-position: -687px 0; } #shop dt a { background-position: -830px 0; } #games:hover dt a { background-position: 0 -40px !important; } #movies:hover dt a { background-position: -136px -40px !important; } #audio:hover dt a { background-position: -272px -40px !important; } #art:hover dt a { background-position: -408px -40px !important; } #channels:hover dt a { background-position: -544px -40px !important; } #community:hover dt a { background-position: -687px -40px !important; } #shop:hover dt a { background-position: -830px -40px !important; } #games dt a:active { background-position: 0 -80px !important; } #movies dt a:active { background-position: -136px -80px !important; } #audio dt a:active { background-position: -272px -80px !important; } #art dt a:active { background-position: -408px -80px !important; } /* this now has 'portal' as the header, but I'm keeping the id as channels so as not to break functionality elsewhere - JH */ #channels dt a:active { background-position: -544px -80px !important; } #community dt a:active { background-position: -687px -80px !important; } #shop dt a:active { background-position: -830px -80px !important; } .header .navigation dd { float: left; height: 30px; width: 133px; margin-bottom: 1px; margin-left: 1px; } #channels dd, #community dd { width: 140px; } #shop dd { width: 128px; } .header .navigation dd:hover { background: url(//cssimg.ngfiles.com/bg-header/subnav-hover.jpg) 0 0 repeat-x; } #movies dd:hover { background-position: 0 -30px; } #audio dd:hover { background-position: 0 -60px; } #art dd:hover { background-position: 0 -90px; } #channels dd:hover { background-position: 0 -120px; } #community dd:hover { background-position: 0 -150px; } #shop dd:hover { background-position: 0 -180px; } .header .navigation dd a { display: block; width: 100%; height: 100%; padding-left: 9px; background: url(//cssimg.ngfiles.com/bg-footer/nav-corners.gif) 119px 11px no-repeat; } #channels dd a, #community dd a { background-position: 126px 11px; } #shop dd a { background-position: 113px 11px; } .header .navigation dd a:hover { background-position: 119px -214px; } #channels dd a:hover, #community dd a:hover { background-position: 126px -214px; } #shop dd a:hover { background-position: 113px -214px; } /* navbar end */ /* HEADER/FOOTER ADS */ .GAR_header_topbar, .header-enrollment { position: relative; width: 976px; height: 100px; margin: -2px auto 0 auto; background: url(//cssimg.ngfiles.com/bg-header/topbar.jpg) top center no-repeat; } .header-enrollment > div { margin: 0; padding: 10px 0 0 13px; } .GAR_header_topbar > div { float: left; } .GAR_header_topbar > div { margin: 10px 0 0 13px; } .GAR_header_topbar > div ~ div { margin: 10px 0 0 10px; } /* for anything wider - first use for Nintendo campaign */ .GAR_header_topbar . { margin: 10px 3px; } .footerads, .supporter-userpage-footer { display: block; width: 976px; height: 106px; } .footerads, .supporter-userpage-footer > div { float: left; } .footerads, .supporter-userpage-footer > div { margin-left: 13px; } .footerads, .supporter-userpage-footer > div ~ div { margin-left: 10px; } body.adskin .header { height: 335px; } body.adskin .GAR_header_topbar { display: none; } /* FOOTER */ #footer { position: relative; width: 976px; height: 685px; margin: 0 auto; color: #c9bebe; background: url(//cssimg.ngfiles.com/bg-footer/footer.jpg) top left repeat-y; } .featuredcontent { height: 194px; background: url(//cssimg.ngfiles.com/bg-footer/featuredcontent.jpg) top left no-repeat; } .featurebar { position: absolute; top: 12px; left: 3px; display: block; width: 970px; height: 40px; } .featurebar dt { float: left; width: 258px; height: 40px; margin-left: 10px; text-indent: -9999em; overflow: hidden; background: url(//cssimg.ngfiles.com/bg-footer/featuretitle.jpg) 0 0 no-repeat; } .featurebar dd { display: inline; } .featurebar dd a { float: left; width: 116px; height: 30px; margin-top: 5px; text-indent: -9999em; overflow: hidden; background: url(//cssimg.ngfiles.com/bg-footer/featurebar.jpg) top left no-repeat; } #featgames a { background-position: 0 0; } #featmovies a { background-position: -116px 0; } #feataudio a { background-position: -232px 0; } #featart a { background-position: -348px 0; } #featchannels a { background-position: -464px 0; width: 118px;} #featusers a { background-position: -582px 0; width: 115px; } #featgames a:hover { background-position: 0 -30px; } #featmovies a:hover { background-position: -116px -30px; } #feataudio a:hover { background-position: -232px -30px; } #featart a:hover { background-position: -348px -30px; } #featchannels a:hover { background-position: -464px -30px; } #featusers a:hover { background-position: -582px -30px; } #featgames a:active { background-position: 0 -60px; } #featmovies a:active { background-position: -116px -60px; } #feataudio a:active { background-position: -232px -60px; } #featart a:active { background-position: -348px -60px; } #featchannels a:active { background-position: -464px -60px; } #featusers a:active { background-position: -582px -60px; } .footerfeatures { position: relative; top: 62px; left: 13px; width: 950px; } .footerfeatures > a { position: absolute; width: 25px; height: 110px; text-indent: -9999em; overflow: hidden; background: url(//cssimg.ngfiles.com/bg-footer/a-stripes.png) top left repeat; } .footerfeatures a.fprev { left: 0; } .footerfeatures a.fnext { right: 0; } .footerfeatures > a span { display: block; width: 4px; height: 8px; margin-top: 47px; margin-left: 10px; background-image: url(//cssimg.ngfiles.com/bg-footer/featurearrow.gif); background-repeat: no-repeat; } .footerfeatures a.fprev span { background-position: 0 0; } .footerfeatures a.fnext span { background-position: -4px 0; } .footerfeatures a.fprev:hover span { background-position: 0 -8px; } .footerfeatures a.fnext:hover span { background-position: -4px -8px; } .footerfeatures > div { position: absolute; top: 0; left: 30px; } .footerfeatures > div > div { position: relative; float: left; width: 290px; height: 110px; margin-right: 1px; padding-right: 6px; background: url(//cssimg.ngfiles.com/bg-footer/footerfeature.png) top left repeat; } .footerfeatures h4 { padding: 0; margin: 12px 0px 8px 10px; font-style: normal; } .footerfeatures div > h4 + a { /* when FF has a title, image gets spaced differently */ position: relative; float: left; margin: -3px 5px; padding: 5px; } .footerfeatures div.game > span, .footerfeatures div.movie > span { /* Flash */ position: absolute; right: 10px; bottom: 0; display: block; width: 176px; height: 25px; padding-top: 8px; text-align: right; border-top: solid 1px #c9bebe; } .footerfeatures span[class|="star"] { float: left; font-size: 1.2em; text-align: left; } .footerfeatures div.art { /* Art */ position: relative; float: left; width: 90px; height: 90px; padding: 10px 10px 10px 9px; } .footerfeatures div.art:first-child { margin-left: 5px; } .footerfeatures div.art > a > span { top: 10px; left: 9px; } .footerfeatures div.audio { /* Audio */ width: 216px; } .footerfeatures div.audio h4 { white-space: nowrap; overflow: hidden; } .footerfeatures div.audio > span { display: block; float: left; min-width: 100px; margin: 3px 0; } .footerfeatures div.user { /* Users */ width: 282px; height: 41px; margin-bottom: 1px; padding: 7px; font-size: 10px; background-position: -10px -45px; } .footerfeatures div.user:nth-child(3) ~ div.user { height: 40px; } #footer .siteinfo { position: absolute; bottom: 0; width: 976px; height: 400px; background: url(//cssimg.ngfiles.com/bg-skins/gold-footer.jpg) 3px bottom no-repeat; } #footer .copyright { position: absolute; top: 56px; left: 23px; display: block; width: 644px; height: 45px; padding-left: 50px; background: url(//cssimg.ngfiles.com/bg-footer/logo-tiny.png) top left no-repeat; } #footer .navigation { position: absolute; top: 111px; left: 23px; } #footer .navigation dl { float: left; width: 150px; margin-right: 10px; } #footer .navigation dt { display: block; height: 30px; } #footer .navigation dd a { position: relative; display: block; width: 150px; height: 25px; margin-bottom: 1px; color: #fda238; background: url(//cssimg.ngfiles.com/misc/link_stripes2.png) 0 0 no-repeat; } #footer .navigation dd a:hover { background-position: -300px 0; } #footer .navigation dd:nth-of-type(even) a { background-position: -9px 0; } #footer .navigation dd:nth-of-type(even) a:hover { background-position: -309px 0; } #footer .navigation dd span { position: absolute; top: 6px; display: block; width: 129px; height: 13px; line-height: 14px; margin-left: 8px; padding-left: 5px; border-left: solid 2px #e15f20; background: url(//cssimg.ngfiles.com/bg-footer/nav-corners.gif) right -21px no-repeat; } #footer .navigation a:hover span { border-color: #1b1717 !important; color: #000; background-position: right 4px !important; } /* nudges for supporters and no ad showing */ body.supporter .footerads, body.noads .footerads { height: 0px; /* 106px */ } body.supporter #footer, body.noads #footer { height: 579px; } body.supporter span#frontpagemessage, body.noads span#frontpagemessage { bottom: -560px; } /* GLOBAL FORM ELEMENTS */ /* (includes type styles) */ /* for changing or removing that firefox border around active buttons, */ /* found @ http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links */ button::-moz-focus-inner { border: 0; } input::-moz-focus-inner { border: 0; } button { height: 27px; width: 68px; color: #fda238; font-size: 12px; /* necessary for when buttons are in a table */ line-height: 2.0em; font-weight: bold; border-color: #000; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 2px; border-style: solid; background: url(//cssimg.ngfiles.com/bg-skins/buttons/button-gold.gif) left 0 no-repeat; } button:hover { color: #fff; cursor: pointer; background-position: left -25px; } button[disabled] { color: #956a32; cursor: default; background-position: left -50px; } a.fakebutton, a.fakebutton:visited { /* implemented for store where links need to look like buttons... */ display: block; height: 25px; width: 66px; color: #fda238; text-align: center; font-size: 12px; line-height: 2.1em; font-weight: bold; border-color: #000; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 2px; border-style: solid; background: url(//cssimg.ngfiles.com/bg-skins/buttons/button-gray.gif) left 0 no-repeat; } a.fakebutton:hover { color: #fff; cursor: pointer; background-position: left -25px; } a.fakebutton.inline { float: none; margin: 0; display: inline-block } .buttonlink { /* ... and vice versa where buttons need to look like links ( also created for store) */ background: none; border: none; width: auto; height: auto; font-size: 1em; font-weight: inherit; line-height: inherit; color: #fda238; cursor: pointer; } p .buttonlink { font-size: 12px; font-weight: bold; height: 14px; } .buttonlink:hover { color: #fff; } button ~ a.fakebutton { /* for store checkout 'cancel' buttons (fake) */ float: right; margin: 5px; } input[type="text"], input[type="password"] { font-size: 1.2em; font-weight: bold; height: 19px; padding: 3px 5px; border-color: #000; border-style: solid; border-width: 0 1px 2px 1px; background: #ea8d42 url(//cssimg.ngfiles.com/bg-skins/inputs/input-gold.jpg) top left repeat-x; } input[type="password"] { width: 50px; } input[disabled] { opacity: .5; } input[type="reset"] { display: inline; background: none; color: #fda238; font-weight: bold; font-size: 10px; } input[type="reset"]:hover { color: #fff; cursor: pointer; } button ~ input[type="reset"] { /* affects inline forms (reviews) and ignores page forms (BBS post) */ float: right; margin: 5px; } div.upload { position: relative; margin: 5px; height: 27px; width: 220px; overflow: hidden; } div.upload div { float: right; height: 25px; width: 66px; color: #fda238; font-size: 1.2em; line-height: 2.0em; font-weight: bold; text-align: center; border-color: #000; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 2px; border-style: solid; background: url(//cssimg.ngfiles.com/bg-skins/buttons/button-gold.gif) left 0 no-repeat; } div.upload input[type="file"], div.upload div.flashupload { position: absolute; z-index: 99; opacity: 0; right: 0; top: 0; height: 100%; width: 100%; } div.upload input:hover + div, div.upload div.flashupload:hover + div { background-position: 0 -25px; color: #fff; cursor: pointer; } /* doesn't do shit except trigger a hover for safari, srsly */ div.upload input[type="text"] { width: 140px; opacity: 1; color: #000 !important; } div.upload input[disabled] + div { background-position: 0 -50px; color: #956a32 !important; } div.upload input[disabled] ~ input { opacity: .5 } textarea { margin: 5px; padding: 5px 3px 5px 5px; font-size: 1.2em; font-weight: bold; border-color: #000; border-style: solid; border-width: 0 1px 2px 1px; background: #f19e52 url(//cssimg.ngfiles.com/bg-skins/textareas/textarea-gold.jpg) repeat-x; } textarea[cols="35"] { width: 260px; } /* one-third */ textarea[cols="55"] { width: 505px; } /* two-thirds floating mod forms */ textarea[cols="85"] { width: 580px; } /* two-thirds */ textarea[cols="100"] { width: 710px; } /* three-thirds in fieldset */ .two3 textarea[cols="55"] {width: 376px; } /* two-thirds in fieldset */ textarea[cols="130"] { width: 900px; } /* three-thirds */ textarea[rows="2"] { height: 45px; } textarea[rows="5"] { height: 90px; } textarea[rows="10"] { height: 170px; } textarea[disabled] { opacity: .5; } textarea + ul { height: 15px; } textarea + ul li { /* notes following textareas */ float: left; color: #7d7575; margin: 0 5px; } textarea + ul li + li { float: right; } textarea + ul a { /* "clear form" buttons */ margin: 0 5px; color: #fda238 !important; } ul.checkboxes, div.checkboxes { display: inline-block !important; padding: 5px; } ul.checkboxes li, div.checkboxes, dl.checkboxes dd, dl.checkboxes dt { position: relative; display: block; margin-right: 10px; margin-bottom: 5px; height: 17px; font-size: 1.2em; overflow: hidden; color: #c9bebe; } ul[class~="horz"] li, dl[class~="horz"] dd, dl[class~="horz"] dt { float: left; padding-right: 25px; } dl[class="horz"] { font-size: 1.2em; color: #c9bebe; } dl[class~="horz"] dd + dt { clear: left; } ul.checkboxes li:only-child { margin-bottom: 0; } .checkboxes input { /* this is the actual checkbox */ position: absolute; z-index: -1; /* was hiding with opacity, but hovers didn't work */ left: -1000em; /* was inconsequential, but broken in 'nodimming' pods */ width: 10px; height: 10px; margin: 2px; } .checkboxes span { /* contains checkbox background */ float: left; background: url(//cssimg.ngfiles.com/formstuff/input-checkboxes.jpg) 0 0 no-repeat; } .checkboxes label { /* contains checks */ float: left; height: 17px; line-height: 16px; padding-left: 20px; background: url(//cssimg.ngfiles.com/formstuff/input-tick.png) 0 0 no-repeat; } .checkboxes input:checked ~ span label { /* activates check mark */ background-position: 0 -17px; } .checkboxes span:hover, /* hover and focus backgrounds */ .checkboxes input:focus ~ span { background-position: 0 -17px; } .checkboxes input[disabled] ~ span:hover { /* keeps disabled bg from shifting to hover */ background-position: 0 0; } .checkboxes input[disabled] ~ span label { /* moves check to disabled */ background-position: 0 -34px; } .checkboxes input[disabled]:checked ~ span label { /* moves check to disabled & checked */ background-position: 0 -51px; } .checkboxes input[type="radio"] ~ span { /* radio button image swap */ background-image: url(//cssimg.ngfiles.com/formstuff/input-radiobuttons.png); } .checkboxes input[type="radio"] ~ span label { background-image: url(//cssimg.ngfiles.com/formstuff/input-radio.png); } .checkboxes li input[type="text"] { /* for when a radio button comes with an attribute to change */ position: relative; left: auto; z-index: 1; height: 12px; width: 65px; padding: 2px; font-size: 12px; } /* specific checkbox stuff for email subscriptions examples can be found in /account/subscriptions and the unsubscribe pages */ ul.simple-ul.ng-subscriptions { display: inline-block !important; padding: 10px; } ul.simple-ul.ng-subscriptions li { position: relative; display: block; margin-right: 10px; margin-bottom: 5px; height: 17px; overflow: hidden; color: #c9bebe; font-size: 1.1em; } ul.simple-ul.ng-subscriptions li span span { font-weight: normal; font-size: 11px; color: #7d7575; font-style: italic; line-height: 12px; padding-left: 10px; } ul.simple-ul.ng-subscriptions input[type="checkbox"] { position: absolute; z-index: -1; left: -1000em; width: 10px; height: 10px; margin: 2px; } ul.simple-ul.ng-subscriptions input[type="checkbox"]:checked ~ span label { background-position: 0 -17px; } ul.simple-ul.ng-subscriptions li > span { float: left; background: url(//cssimg.ngfiles.com/formstuff/input-checkboxes.jpg) 0 0 no-repeat; } ul.simple-ul.ng-subscriptions label { float: left; height: 17px; line-height: 16px; padding-left: 20px; background: url(//cssimg.ngfiles.com/formstuff/input-tick.png) 0 0 no-repeat; } div.select { /* all pull-down menus */ color: #1b1717; position: relative; height: 25px; width: 135px; cursor: default; border-left: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 2px #000; background: url(//cssimg.ngfiles.com/bg-skins/inputs/input-gold.jpg) top left repeat-x; } div.select > select { opacity: 0; position: absolute; width: 100%; height: 100%; background: #ea8d42; } option { padding: 1px 2px; color: #1b1717; font-size: 1.1em; font-weight: bold; line-height: 2.2em; } option[disabled] { color: #000; text-align: center; font-style: italic; } div.select > span { position: absolute; top: 0; left: 0; padding-left: 5px; font-size: 1.2em; font-weight: bold; line-height: 2.2em; } div.select > div { position: absolute; top: 0; right: 0; width: 26px; height: 25px; background: url(//cssimg.ngfiles.com/formstuff/select-fakearrow.gif) top left no-repeat; } div.select > ul { /* link lists made to look like pull-down menus */ position: absolute; z-index: 9003; min-width: 100%; height: 25px; overflow: hidden; } div.select > ul:hover { z-index: 9004; /* important to keep selects from undercutting each other */ height: auto; } div.select > ul > li:first-child { margin-top: 25px; border-top: solid 1px #000; } div.select > ul > li:last-child { border-bottom: solid 1px #000; } div.select > ul > li { color: #1b1717; font-weight: bold; border-left: solid 1px #000; border-right: solid 1px #000; background: #ea8d42; } div.select li a, div.select li strong { display: block; white-space: nowrap; padding: 1px 3px; font-size: 12px; line-height: 14px; color: #1b1717; } div.select li a:hover { background: #9d4f18; color: #fff; } div.select li > strong { padding: 0; line-height: 16px; color: #000; text-align: center; font-style: italic; cursor: default; } fieldset.starselect { position: relative; display: inline-block; margin: 10px 5px 5px 45px; width: 150px; height: 30px; background: url(//cssimg.ngfiles.com/misc/vp-StarSelect.png) top left repeat-x; } fieldset.starselect input { position: absolute; left: -999em; } fieldset.starselect label { position: absolute; left: 0; height: 30px; text-indent: -50em; overflow: hidden; font-size: 1.2em; } fieldset.starselect label:hover { background-image: url(//cssimg.ngfiles.com/misc/vp-StarSelect.png); background-position: left -30px; } fieldset.starselect input:checked + label { background-image: url(//cssimg.ngfiles.com/misc/vp-StarSelect.png); background-position: left -60px; } fieldset.starselect input:checked + label:hover { background-position: left -90px; } .starselect label[for$="_0"] { width: 30px; z-index: 16; left: -40px; background: url(//cssimg.ngfiles.com/misc/vp-StarSelect.png) 0 -120px no-repeat; } .starselect label[for$="_0"]:hover { background-position: 0 -150px; } .starselect input:checked + label[for$="_0"] { background-position: left -180px; } .starselect input:checked + label[for$="_0"]:hover { background-position: left -210px; } .starselect label[for$="1"] { width: 15px; z-index: 15; } .starselect label[for$="2"] { width: 30px; z-index: 14; } .starselect label[for$="3"] { width: 45px; z-index: 13; } .starselect label[for$="4"] { width: 60px; z-index: 12; } .starselect label[for$="5"] { width: 75px; z-index: 11; } .starselect label[for$="6"] { width: 90px; z-index: 10; } .starselect label[for$="7"] { width: 105px; z-index: 9; } .starselect label[for$="8"] { width: 120px; z-index: 8; } .starselect label[for$="9"] { width: 135px; z-index: 7; } .starselect label[for$="10"] { width: 150px; z-index: 6; } fieldset.starselect input:checked + label { overflow: visible; } fieldset.starselect label > span { position: absolute; z-index: 1; display: block; width: 250px; top: 0; left: 160px; text-indent: 0; font-size: 1.1em; line-height: 2em; font-style: italic; font-weight: bold; color: #fff; } fieldset.starselect label span:before { content: "Your Rating: "; color: #7d7575; } fieldset.starselect label[for$="_0"] > span { left: 200px; } ul.smileyselect { display: inline-block; margin-bottom: -5px; } ul.smileyselect li { position: relative; float: left; width: 25px; height: 25px; margin-right: 6px; margin-bottom: 5px; background: url(//cssimg.ngfiles.com/formstuff/li-emoteselectTEMP.gif) top left no-repeat; } ul.smileyselect input { position: absolute; z-index: -1; } ul.smileyselect label { display: block; width: 100%; height: 100%; text-indent: -99em; overflow: hidden; /* background-image: url(//cssimg.ngfiles.com/icons/emotes.png);*/ background-repeat: no-repeat; background-color: #0f0b0c; } ul.smileyselect li:hover { background-position: 0 -25px; } ul.smileyselect li label:hover { background-color: transparent !important; } ul.smileyselect li input:checked ~ label { background-color: transparent !important; } /* This had been wrapping in fieldset before, but now it's not in fieldset so... */ ul.smileyselect li:nth-child(21) { clear: both; } .formfields fieldset, .formfields > div { padding: 12px 5px 0 190px; margin-top: 8px; color: #7d7575; background: url(//cssimg.ngfiles.com/bg-main/podstripe.gif) center 0px no-repeat; } .formfields span { line-height: 12px; } .formfields fieldset:first-child, .formfields > div:first-child, .formfields input[type="hidden"]:first-child + div, .formfields input[type="hidden"] + fieldset { margin-top: -5px; background: none; } .formfields legend, .formfields > div > label, .formfields > div > strong { float: left; margin-left: -180px; margin-bottom: -47px; font-size: 1.4em; font-weight: bold; line-height: 1.6em; font-style: italic; color: #c9bebe; } .formfields > div > p, fieldset > p { /* intro paragraph(s) */ font-size: 1.2em; margin: 5px 0 5px -180px; padding-bottom: 10px; color: #c9bebe; } div.three3 .formfields > div > a { /* to (PMs) */ display: inline-block; padding-left: 40px; font-size: 1.4em; line-height: 1.8em; font-weight: bold; background-position: 5px center; background-repeat: no-repeat; } div.three3 .formfields div > span.printusername { display: inline-block; font-size: 1.4em; line-height: 1.8em; font-weight: bold; } div.field > input[type="text"], .formfields > div > input[type="text"] { /* subject */ width: 375px; margin: 0 5px 0 0; } .formfields > div > input[name="email"] { width: 275px; } .formfields > div > input[maxlength="20"], .formfields > div > input[type="password"] { /* names, password */ width: 175px; margin: 0 5px 0 0; } .formfields > div > input[size="3"] { /* flash width/height */ width: 50px; } .formfields > div > input.number { /* needed a class finally for store item form */ width: 85px; } fieldset ul.smileyselect li:nth-child(21) { /* thread mood */ clear: left; } .formfields textarea, .formfields textarea + ul li { /* message */ margin-left: 0; } fieldset span.optionlinks { float: left; margin-right: 10px; margin-left: -5px; } fieldset div.htmltips { position: absolute; left: 20px; margin-top: 30px; width: 170px; } fieldset div.htmltips dl { font-size: 1.1em; line-height: 1.5em; } fieldset div.htmltips dl, fieldset div.htmltips dt { border-bottom: solid 1px #7d7575; padding-bottom: 8px; margin-bottom: 8px; } fieldset div.upload, .formfields > div div.upload { /* include image */ display: inline-block; vertical-align: middle; margin: 0 10px 0 0px; } fieldset span > strong, .formfields > div span > strong { font-weight: normal; } div.upload + span { display: inline-block; vertical-align: middle; } .formfields > div div.upload ~ div { /* file upload preview */ display: block; clear: both; margin: 10px 1px; min-height: 25px; } .formfields > div div.upload ~ div div { float: left; margin-right: 10px; width: 150px; height: 100px; overflow: hidden; position: relative; display: block; } .formfields > div div.upload ~ div img { position: absolute; } .formfields > div div.upload ~ div > strong { display: inline-block; padding: 0 0 5px 2px; font-size: 1.4em; color: #fff; } .formfields > div div.upload ~ div > span { display: block; margin-bottom: 5px; } .formfields > div div.upload ~ div > strong + span { display: inline-block; } .formfields > div div.upload ~ div > button { margin-left: -1px; } .formfields > div div.upload ~ div > strong[class] { padding-left: 25px; line-height: 2em; background-image: url(//cssimg.ngfiles.com/icons/td-dumpfiles.png); background-repeat: no-repeat; } .formfields > div div.upload ~ div dl.space { margin: 0; overflow: hidden !important; text-indent: -1000em !important; } .formfields > div div.upload ~ div dl.space dd { text-indent: -1000em !important; } .formfields > div div.upload ~ div > strong[class] ~ button { display: block; margin-bottom: -15px; } #file_target { /* hides target for file uploads */ height: 0; } .formfields > div > button { /* submit */ margin-bottom: 5px; } fieldset.dates > div.select { /* dates (calendar) */ display: inline-block; } fieldset.dates > label { display: inline-block; margin-left: 5px; font-size: 1.3em; line-height: 2em; vertical-align: top; font-weight: bold; font-style: italic; } fieldset.dates > label:nth-of-type(3) { border-left: solid 1px #5a5454; padding-left: 10px; } .formfields > div > div.select { /* display name (edit profile) */ display: inline-block; vertical-align: middle; margin: 0 10px 0 0px; } .formfields > div > span.optionlinks + input { /* password strength test */ float: left; } .formfields > div > span.optionlinks { display: inline-block; } .formfields > div span[class|="star"] { display: inline-block; margin: 5px 10px; font-size: 1.2em; text-align: left; } .formfields > div table { /* ratings */ width: 350px; color: #c9bebe; font-weight: bold; } fieldset table th { color: #c9bebe; } fieldset table td span { margin-left: 5px; } .formfields > div table input[type="text"] { /* apparel sizing table */ width: 35px; } .formfields > div table td:first-child input[type="text"] { width: 125px; } .formfields > div input[id^="tag"] { /* tags */ width: 125px; margin-right: 5px; } .formfields > div .checkboxes, .formfields fieldset .checkboxes { color: #c9bebe; padding-bottom: 0; padding-left: 0; } fieldset dl.checkboxes { /* creative commons */ display: inline-block; margin: 0 5px; } fieldset dl[class~="horz"] dt { width: 150px; } fieldset div.cc { display: none; margin: 5px 5px 0 5px; padding-left: 10px; border-left: solid 2px; color: #c9bebe; } fieldset div.cc strong { display: block; font-size: 1.3em; line-height: 2.2em; border-left: solid 2px #100c0d; margin-left: -12px; text-indent: -3px; } fieldset div.cc p { font-size: 1.2em; } fieldset div.cc p em { display: block; text-align: right; padding-right: 50px; } fieldset div.cc dl { width: 550px; } fieldset div.cc dt:first-child, fieldset div.cc dt:first-child + dd, fieldset div.cc dl[class*="-nd"] dd:last-of-type, /* this matches something VERY different than .nd */ fieldset div.cc dl[class*="-nd"] dt:last-of-type { line-height: 28px; } .formfields > div > input[maxlength="90"] { /* audio description < MISLEADING - it's used in a number of places */ width: 503px; } #detailsform.formfields > div > input[maxlength="90"] { width: 375px; } /* fix maxlength width on project management ^ counter the above */ .formfields > div > div.optionlinks { /* "cancel" button at bottom of form, next to submit */ float: right; margin-top: -3px; } .formfields > div > input[id*="state"], .formfields > div > input[id*="city"], .formfields > div > input[id*="address"] { width: 250px; } /** For the smileys in BBS, news and Private messages (the selection) **/ .formfields div.emote-selection { padding: 10px; margin: 8px 0 0 0; min-height: 50px; } .formfields div.emote-selection span { font-size: 1.4em; font-weight: bold; line-height: 1.6em; font-style: italic; color: #c9bebe; display: block; padding-bottom: 10px; } .formfields div.emote-selection div.set-selection { width: 180px; float: left; } .formfields div.emote-selection div.choices { width: 710px; float: left; } .formfields div.emote-selection select { font-size: 11px; } /* jquery-ui.autocomplete styles */ ul.ui-autocomplete { color: #1b1717; position: absolute; border-left: solid 1px #000; border-right: solid 1px #000; border-bottom: solid 1px #000; background-color: #ea8d42; } ul.ui-autocomplete a { display: block; color: #1b1717; font-size: 12px; font-weight: bold; background-width:200px; padding: 4px; padding-left: 6px; } ul.ui-autocomplete a:hover, ul.ui-autocomplete a.ui-state-focus { color: #fff; background-color:#9D4F18; } /* end autocomplete styles */ div.required > label:after, div.required > strong:after, fieldset.required > legend:after, div.required:first-child > p:last-child > strong:before { content: "*"; color: #fda238; font-size: 20px; line-height: 18px; padding: 0 5px; vertical-align: bottom; } div.required > p > strong { font-weight: normal; } div.error, fieldset.error { padding-bottom: 18px; } div.error > span:first-child, fieldset.error > span:first-child { position: absolute; /* no relatively positioned element to use top/left because fieldsets act funny */ margin-left: -180px; margin-top: 32px; font-size: 1.2em; color: #f74040; } div.error > p:only-child { margin: 30px 0; color: #f74040; text-align: center; font-size: 13px; } div.error > ul { margin: 15px; font-size: 13px; color: #f74040; } div[class$="miniform"] > strong, div[class$="miniform"] > form > label, *[class$="miniform"] > label { display: inline-block; margin-left: 5px; font-size: 1.3em; line-height: 2.7em; vertical-align: top; color: #7d7575; font-style: italic; font-weight: bold; } *[class$="miniform"] div.select { display: inline-block; margin: 5px 5px 0px 5px; } *[class*="miniform"] > button { float: left; margin: 3px !important; } *[class*="miniform"] > input[type="text"] { display: inline-block; vertical-align: top; margin: 5px 5px 0px 5px; width: 200px; } .htmlhelper input[type="text"] { width: 500px; margin: 5px; } .htmlhelper button { position: absolute; right: 10px; top: 56px; } .htmlhelper label { display: inline-block; clear: left; height: 30px; padding: 5px; font-size: 1.2em; font-weight: bold; line-height: 2.2em; } .htmlhelper label + input[type="text"] { display: inline-block; left: 50px; width: 400px; } .htmlhelper input[type="text"] ~ input[type="text"] { width: 300px; margin-bottom: 15px; } div.termsblock { height: 300px; margin: 10px 5px; padding: 10px; overflow-y: scroll; border: solid 1px #363232; color: #c9bebe; font-size: 12px; background: none; } div.termsblock * { font-size: inherit !important; margin: auto !important; } /* CONTENT AND PANELS: Layout */ #main { position: relative; /* added solely to position #portalbanner */ display: block; width: 950px; margin: 0 auto; padding: 10px 13px 0 13px; background: url(//cssimg.ngfiles.com/bg-main/bg-main.gif) top center repeat-y; } /* move body up 2px */ body.supporter #main { padding: 8px 13px 0; } /* shadow */ body.supporter #main:before { content: ""; display: block; position: absolute; background: url(//cssimg.ngfiles.com/bg-header/supporter-main-shadow.jpg) no-repeat; height: 10px; width: 970px; margin: -10px 0 0 -10px; } #main > div[class*="3"], #main > div.thincol > div, #main > div.fatcol > div, #main > div[class|="maincontent"] > div, #main > form > div[class*="3"] { margin-bottom: 10px; position: relative; display: block; border: solid 4px #000; -moz-border-radius: 2px; -khtml-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0 5px 10px #000; -khtml-box-shadow: 0 5px 10px #000; -webkit-box-shadow: 0 5px 10px #000; } div.thincol { float: left; width: 310px; } div.fatcol { float: right; display: inline; width: 630px; } div.maincontent { /* For main flash pod on content-view pages. */ float: right; width: 630px; } div.fatcol > div.middle { /* These styles are for one-third columns on the right side of the page. */ float: left; } div.thincol + div.thincol { margin-left: 10px; } div.podtop { position: relative; display: block; height: 41px; background: #4f280e url(//cssimg.ngfiles.com/bg-skins/podtops/podtop-gold.jpg) left 0 no-repeat; } div.podtop > div { position: absolute; padding-right: 3px; height: 100%; right: 0; background: inherit; background-position: right 0; } .podcontent { /* changed from div.podcontent to include review form.podcontent */ padding: 21px 11px 11px 11px; background-position: 0 0; background-repeat: no-repeat; } .podtop ~ .podcontent { /* changed to ~ from + for view page review form */ padding-top: 15px; background-position: 0 -6px; } .podcontent ~ .podcontent { padding-top: 21px; background-position: 0 0; margin-top: -6px; } /* this was formerly .comments .podcontent + div[id] > .podcontent:first-child but had to be changed because there are a zillion wrappers around reviews */ .comments .podtop ~ div[id] .podcontent:first-child { background-position: 0 0; padding-top: 21px; margin-top: -6px; } #main > div[class*="3"] > div.minimized ~ [class*="pod"] { /* for the view page min button */ display: none; } div.podbot { position: absolute; bottom: 0; display: block; height: 6px; right: 0px; left: 0px; border: solid 1px #28242c; border-top: 0; background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33.jpg) -1px 1px no-repeat; } div.one3, div.thincol > div { float: left; width: 302px !important; background-image: url(//cssimg.ngfiles.com/bg-main/pod-13.jpg) !important; } div.one3 .podcontent, div.thincol > div > .podcontent { background-image: url(//cssimg.ngfiles.com/bg-main/podbreaker-13.jpg); } div.two3, div.fatcol > div, div.maincontent > div { float: right; width: 622px; background-image: url(//cssimg.ngfiles.com/bg-main/pod-23.jpg); } div.two3 .podcontent, div.fatcol > div > .podcontent, div.maincontent > div > .podcontent { background-image: url(//cssimg.ngfiles.com/bg-main/podbreaker-23.jpg); } div.three3, div.maincontent-wide > div { width: 942px; background-image: url(//cssimg.ngfiles.com/bg-main/pod-33.jpg); } div.three3 .podcontent, div.maincontent-wide > div > .podcontent { background-image: url(//cssimg.ngfiles.com/bg-main/podbreaker-33.jpg); } div.pop3 { min-width: 600px; /* Pop-up pods */ max-width: 1000px; margin: 0 auto; } div.pop3 div.podtop div { /* Pop-up pod top endcap */ width: 10%; } div.thincol iframe { border: solid 1px #191919; } .featurebox embed { margin-top: -5px; margin-right: -5px; float: right; } /* EMBEDDED VIDEO */ div[class^="blog-embed-"] { padding-top: 10px; } .blog-embed-left { padding-left: .3em; display: block; } .blog-embed-center { text-align: center; } .blog-embed-right { text-align: right; } /* BLOG ORDERED LISTS OVERRIDES */ .blog > ol { color: rgb(201, 190, 190); font-size: 1.2em; padding: .5em 4em; list-style-position: inside; list-style: decimal; } .blog > ol li {padding-bottom: .3em;} .blog > ul { color: rgb(201, 190, 190); font-size: 1.2em; padding: .5em 4em; list-style-position: inside; list-style: disc; } .blog > ul li {padding-bottom: .3em;} /* BLOG BLOCKQUOTE */ .podcontent.blog blockquote {border-left: 5px solid #332628; padding: 0 1em; font-style: italic; margin-left: 2.9em;} /* BLOG IMAGE WITH URL */ .podcontent.blog a > img{background: #fda238; padding: 1px; margin: 2px 3px -2px 3px; } .podcontent.blog a[id^='exlink'] {padding: 0; background: 0;} .podcontent.blog a:hover > img{background: #fff;} /* Trash icons for blogs... may need tweaking -JH */ span.blog_img_delete { z-index: 2; position: absolute; margin-top: 8px; margin-left: 8px; text-indent: -9999em; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; background-position: 0 -15px; width: 15px; height: 15px; } span.blog_img_delete:hover { background-position: -75px -15px; } .podcontent:first-child { /* This is for pods without a header */ padding-top: 12px; background-position: 0 -10px; } #main > div.three3 + br { /* Hides
for all-full-width pod pages (like BBS) */ display: block; height: 0px; } #main > div.three3:last-of-type + script { /* Removes extra space inserted by inline javascript, notably in PM area */ display: block; height: 0; margin-bottom: -10px; visibility: hidden; } /* SUMO SUPER WIDE PAGE */ /* for flash */ #flash_pod.sumo { left: 50%; background: url(//cssimg.ngfiles.com/bg-main/pod-33-sumo-left.jpg); } #flash_pod.sumo #flash_embed_pod { background: url(//cssimg.ngfiles.com/bg-main/pod-33-sumo-right.jpg) repeat-y top right; } #flash_embed_podbot.podbot { background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33-sumo.jpg); } #flash_pod.sumo #flash_header.podtop:after { display: block; height: 10px; background: #f0f; width: 100%; content: ""; background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33-sumo.jpg) center -6px no-repeat; position: absolute; top: 41px; } /* for html5 */ #html5_maincontent.sumo #html5_podcontent { left: 50%; background: url(//cssimg.ngfiles.com/bg-main/pod-33-sumo-left.jpg); } #html5_podcontent { z-index: 8999; } #html5_maincontent.sumo #html5embed { background: url(//cssimg.ngfiles.com/bg-main/pod-33-sumo-right.jpg) repeat-y top right; } #html5_maincontent.sumo #html5_data_pod.podcontent { background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33-sumo.jpg) no-repeat; } #html5_maincontent.sumo div.podbot { background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33-sumo.jpg) no-repeat; } /* fix data pod right border */ #html5_maincontent.sumo #html5_data_pod.podcontent:after { display: block; height: 44px; background: #f0f; width: 6px; content: ""; background: url(//cssimg.ngfiles.com/bg-main/pod-33-sumo-right.jpg); position: absolute; right: 0px; bottom: 7px; } /* header */ #html5_maincontent.sumo #html5_header.podtop:after { display: block; height: 10px; background: #f0f; width: 100%; content: ""; background: url(//cssimg.ngfiles.com/bg-main/podbreaker-33-sumo.jpg) center -6px no-repeat; position: absolute; top: 41px; } /* separate headers for sumo so we don't break stuff elsewhere */ body.red #flash_pod.sumo #flash_header.podtop, body.red #html5_maincontent.sumo #html5_header.podtop { background: url(//cssimg.ngfiles.com/bg-skins/podtops/podtop-red-sumo.jpg); } body.blue #flash_pod.sumo #flash_header.podtop, body.blue #html5_maincontent.sumo #html5_header.podtop { background: url(//cssimg.ngfiles.com/bg-skins/podtops/podtop-blue-sumo.jpg); } /* separate headers for sumo so we don't break stuff elsewhere */ body.red #flash_pod.sumo #flash_header.podtop { background: url(//cssimg.ngfiles.com/bg-skins/podtops/podtop-red-sumo.jpg); } /* PANEL TOPS */ div.podtop div a { position: relative; display: inline-block; margin: 8px 5px 0 0; vertical-align: top; padding: 0 10px; color: #1b1717; cursor: default; background: url(//cssimg.ngfiles.com/misc/link_stripes2.png) -300px 0 no-repeat; } /* puts hover background by default */ div.podtop div a[href], div.podtop div a.close { color: #fda238; background-position: 0 0; } /* gray bg only used when link is real (not a tab) (or to close pod) */ div.podtop div a[href]:hover { color: #1b1717; cursor: pointer; background: url(//cssimg.ngfiles.com/misc/link_stripes2.png) -300px 0 no-repeat; } div.podtop div a strong { color: #c9bebe; } div.podtop div a:hover strong { color: #1b1717; } div.podtop div a[class] { height: 15px; width: 15px; padding: 5px; } div.podtop div a[class] > span:first-child { display: block; height: 15px; width: 15px; text-indent: -9999em; overflow: hidden; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; } div.podtop div a[class]:hover span.hovertext { display: block; } div.podtop div a[class] span.hovertext { display: none; } div.podtop span.hovertext { position: absolute; z-index: 9001; right: -5px; padding-left: 10px; background: url(//cssimg.ngfiles.com/icons/hovers/hovertip.png) bottom left no-repeat !important; } div.podtop span.hovertext span { float: right; height: 34px; max-width: 185px; margin-right: -2px; padding-right: 10px; white-space: nowrap; background: url(//cssimg.ngfiles.com/icons/hovers/hovertip.png) bottom right no-repeat !important; } div.podtop div form { /* form element used for just adding to favorites for now */ position: relative; display: inline-block; margin: 8px 5px 0 10px; vertical-align: top; background: url(//cssimg.ngfiles.com/misc/link_stripes2.png) 0 0 no-repeat; } /* The margin above is wrong, but I don't want to rock the boat on any place that's using this where it's "right", so... (-JH) */ div.podtop div form.fave { margin: 8px 5px 0 0; } /* Favorites for bbs thread **/ div.podtop div.favorite-thread { display: inline-block; } div.podtop div.favorite-thread a { width: 15px; height: 15px; padding: 5px; position: relative; display: inline-block; background: url("//cssimg.ngfiles.com/misc/link_stripes2.png") 0 0 no-repeat; } div.podtop div.favorite-thread a:hover { background-position: -300px 0; } div.podtop div.favorite-thread a span { display: inline-block; width: 15px; height: 15px; padding: 0; margin: 0; background: url("//cssimg.ngfiles.com/icons/a-15yellows-forum.png") -255px 0 no-repeat; } div.podtop div.favorite-thread:hover a span { background-position: -255px -15px; } div.podtop div.favorite-thread-remove { display: inline-block; margin: 8px 5px 0 0; } div.podtop div.favorite-thread-remove a { position: relative; display: inline-block; margin: 0; width: 15px; height: 15px; padding: 5px; } div.podtop div.favorite-thread-remove a span:first-child { width: 15px; height: 15px; margin: 0; padding: 0; display: inline-block; background: url("//cssimg.ngfiles.com/icons/a-15yellows-forum.png") -240px 0 no-repeat; } div.podtop div.favorite-thread-remove a span.hovertext { top: 20px; display: none; } div.podtop div.favorite-thread-remove a:hover span:first-child { display: inline-block; } div.podtop div.favorite-thread-remove a:hover span:first-child { background-position: -240px -15px; } /* new favefollow versions */ span.favefollow-buttons a.fave span, span.favefollow-buttons a.unfave span { position: absolute; height: 15px!important; width: 15px!important; top: 5px; left: 5px; text-indent: -9999em; overflow: hidden; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; } span.favefollow-buttons a.fave span { background-position: -255px 0px!important; } span.favefollow-buttons a.fave:hover span { background-position: -255px -15px!important; } span.favefollow-buttons a.unfave span { background-position: -240px 0px!important; } span.favefollow-buttons a.unfave:hover span { background-position: -240px -15px!important; } span.favefollow-buttons.active a.fave { display: none; } span.favefollow-buttons:not(.active) a.unfave { display: none; } span.favefollow-buttons a.follow span, span.favefollow-buttons a.unfollow span { position: absolute; height: 15px!important; width: 15px!important; top: 5px; left: 5px; text-indent: -9999em; overflow: hidden; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; } span.favefollow-buttons a.follow span { background-position: -255px 0px!important; } span.favefollow-buttons a.follow:hover span { background-position: -255px -15px!important; } span.favefollow-buttons a.unfollow span { background-position: -240px 0px!important; } span.favefollow-buttons a.unfollow:hover span { background-position: -240px -15px!important; } span.favefollow-buttons.active a.follow { display: none; } span.favefollow-buttons:not(.active) a.unfollow { display: none; } .authorlinks li ul li [title][data-action] { background: none; } .authorlinks li ul li [title][data-action] span { top:0px; left:0px; } /* turns the heart white */ div.podcontent span.favefollow-buttons a:hover span { filter: invert(100%); } div.podtop div a[href="/fans/"] ~ form#follow_user { /* Fix for people who don't have any fans */ margin-left: -6px; } div.podtop div form:hover { cursor: pointer; background-position: -300px 0; } div.podtop div button { height: 25px; width: 25px; border: 0; background: none; } div.podtop div button span { position: absolute; height: 15px; width: 15px; top: 5px; left: 5px; text-indent: -9999em; overflow: hidden; background-image: url(//cssimg.ngfiles.com/icons/a-15yellows.png); background-repeat: no-repeat; } button:focus::-moz-focus-inner { border: 0; } div.podtop div form:hover span.hovertext { display: block; top: 20px } div.podtop div form span.hovertext { display: none; } div.podtop h2 > img { width: 25px; height: 25px; position: absolute; top: 8px; left: 8px; } /* FIXME plz Bob */ div.rewards-nominees { list-style: none; display: block; height: 475px; } div.rewards-nominees li { height: 84px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; position: relative; float: left; } div.rewards-nominees li img { float: left; width: 130px; height: 84px; } div.rewards-nominees li:hover img { opacity: 0; } div.rewards-nominees li a span { display: none; } div.rewards-nominees li:hover span.sub-info { position: absolute; display: block; z-index: 5; top: 5px; left: 5px; right: 5px; padding: 3px 5px; margin-top: 2px; overflow: hidden; font-size: 11px; font-weight: normal; line-height: 11px; color: #fff } div.rewards-nominees li:hover span.nom-pos { position: absolute; display: block; z-index: 5; bottom: 5px; left: 105px; right: 5px; padding: 3px 5px; margin-top: 2px; overflow: hidden; font-size: 11px; font-weight: normal; line-height: 11px; margin: 10 10px; color: #fff } div.rewards-nominees li button { position: absolute; left: 2px; top: 72px; z-index: -1; width: 15px; height: 15px; text-indent: -1500em; margin-top: -2px; margin-left: 5px; border: none; text-overflow: hidden; background: url(//cssimg.ngfiles.com/icons/a-15yellows.png) -420px 0 no-repeat; } div.rewards-nominees li:hover button { z-index: 99; } div.rewards-nominees li:hover button:hover { background-position: -75px -15px; } /* PANEL ICON ARRAYS */ div.iconarray { /* no more need for br clears in html */ display: inline-block; } .two3 div.iconarray, div.fatcol div.iconarray { /* needed when icons don't fill the box, 100% messes up non-iconarray stuff like
s */ /* 2015-06-14 - fix for this bug in Chrome on Mac/Android: * * https://code.google.com/p/chromium/issues/detail?id=478014 * * For reason the child div iconarray computes to 150.016 causing them to * overflow into another row. Setting a fixed width of 150px on * "div.iconarray > a img" worked, but it broke the art portal layout * since those icons are smaller. */ width: 601px; } .one3 div.iconarray, div.thincol div.iconarray { width:280px; } div.iconarray > a { position: relative; float: left; } div.iconarray > a img { margin: 0; padding: 5px; } div.tinyicon img { width: 30px; height: 30px; } div.iconarray > a:hover { background: #4f280e url(//cssimg.ngfiles.com/icons/hovers/hoverticks-R.png) center center no-repeat; } div.iconarray > a:hover img { background: url(//cssimg.ngfiles.com/icons/hovers/hoverticks-L.png) center center no-repeat; } div.iconarray > a[href*="portal"]:hover { /* makes sure the hover ticks are rect and not square */ background-position: -10px bottom; } div.iconarray > a[href*="portal"]:hover img { background-position: -10px top; } div.tinyicon > a:hover, div.tinyicon > a:hover img { /* reverts hover ticks to center for p-bot's "other users" links */ background-position: center center !important; } *[class*="art"] > a > img, a.art > img { width: 90px; height: 90px; } .thincol *[class*="art"] > a > img { width: 60px; height: 60px; } /* BEGIN TEMP FIX this is a stop-gap for transparent 90x90 and 60x60 art icons. new icons should be created asap and these styles should be removed. */ div.iconarray.art > a:hover, a.art:hover { background-image: none !important; } div.iconarray.art > a:hover > img, a.art:hover > img { background-image: url(//cssimg.ngfiles.com/icons/hovers/TEMPORARYforarticons-90.png) !important; } .thincol div.iconarray.art > a:hover > img { background-image: url(//cssimg.ngfiles.com/icons/hovers/TEMPORARYforarticons-60.png) !important; } div.iconarray.art h4.more a { color: #d36c36; font-style: italic; font-weight: bold; } /* END TEMP FIX */ /* BEGIN NEW GAME/MOVIE THUMBNAILS */ div.iconarray > a > span:first-child { /* dim image */ display: none; position: absolute; top: 5px; right: 5px; left: 5px; height: 90px; background: #000; opacity: .85; } div.iconarray > a:hover > span:first-child { display: block; } div.iconarray > a img + span { /* title & artist */ display: block; position: absolute; left: 5px; bottom: 5px; right: 5px; height: 33px; line-height: 17px; overflow: hidden; padding-top: 5px; color: #7d7575; text-align: center; background: url(//cssimg.ngfiles.com/icons/a-portalicons.png) -18px top no-repeat; } div.iconarray > a > span > strong { display: block; padding: 0 3px; height: 13px; white-space: nowrap; line-height: 12px; overflow: hidden; text-overflow: ellipsis; color: #fff; } div.iconarray > a:visited > span > strong { color: #7d7575; } div.iconarray > a > span + span { /* hover: description, tags, rating */ position: absolute; display: none; left: 5px; top: 5px; right: 5px; padding: 5px; color: #fff; font-size: 11px; line-height: 12px; height: 75px; } div.iconarray > a:hover > span + span { display: block; } div.iconarray > a > span > span:first-child { display: block; height: 68px; overflow: hidden; } div.iconarray > a > span > span + span { position: absolute; display: block; bottom: 0px; left: 5px; right: 5px; height: 18px; line-height: 25px; overflow: hidden; vertical-align: bottom; font-size: 10px; color: #c9bebe; background: url(//cssimg.ngfiles.com/icons/a-portalicons.png) 112px 0px no-repeat; } div.iconarray > a.rated-t > span > span { background-position: 112px -18px } div.iconarray > a.rated-m > span > span { background-position: 112px -36px } div.iconarray > a.rated-a > span > span { background-position: 112px -54px } div.iconarray > a em, div.iconarray > a em span { /* score */ display: inline-block; width: 64px; height: 12px; margin-top: 3px; text-indent: -5810em; overflow: hidden; background: url(//cssimg.ngfiles.com/icons/a-portalicons.png) -40px -52px no-repeat } div.iconarray > a em span { float: left; margin: 0; background-position: -40px -40px; } /* specific sizes */ *[class*="games"] > a > img, a.game > img, *[class*="movies"] > a > img, a.movie > img { width: 140px; height: 90px; } div.iconarray.games > a, div.iconarray.movies > a { height: 138px; } div.iconarray.generic > a { width: 100px; } /* LEGACY ICONS (art thumbs) (oops, and apparently userpage store icons) */ div.iconarray.art > a strong, div.iconarray.generic > a strong { /* hover titles */ display: none; position: absolute; z-index: 5; bottom: 5px; left: 5px; right: 5px; padding: 3px 5px; margin-top: 2px; overflow: hidden; font-size: 11px; font-weight: normal; line-height: 11px; color: #fff; } div.iconarray.art > a:hover strong, div.iconarray.generic > a:hover strong { display: block; } div.iconarray.art > a span, div.iconarray.generic > a span { /* blocks behind hover titles */ display: none; position: absolute; z-index: -1; width: 100%; height: 100%; margin-left: -5px; margin-right: -5px; bottom: 0; opacity: .85; background-color: #1b1717; } div.iconarray.art > a:hover strong span, div.iconarray.generic > a:hover strong span { display: block; } /* Rating & Ranking Hover Squares */ .iconarray.art > a:hover > span, .centeredblocks li > a:first-child > span, /* also for pbot list */ .footerfeatures div > a > span { /* also for footer */ display: block; position: absolute; z-index: 1; width: 20px; bottom: auto; top: 5px; left: 5px; margin: 0; height: 20px; text-indent: -999em; overflow: hidden; opacity: .85; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -khtml-border-radius-bottomright: 7px; background-color: #1b1717; background-image: url(//cssimg.ngfiles.com/icons/hovers/rankandrate.png); } ol.centeredblocks li span { background-position: 0 0; } ol.centeredblocks li + li span { background-position: 0 -20px; } ol.centeredblocks li + li + li span { background-position: 0 -40px; } ol.centeredblocks li + li + li + li span { background-position: 0 -60px; } ol.centeredblocks li + li + li + li + li span { background-position: 0 -80px; } .iconarray.art > a.rated-e span, .footerfeatures a.rated-e span { background-position: -40px 0; } .iconarray.art > a.rated-t span, .footerfeatures a.rated-t span { background-position: -40px -20px; } .iconarray.art > a.rated-m span, .footerfeatures a.rated-m span { background-position: -40px -40px; } .iconarray.art > a.rated-a span, .footerfeatures a.rated-a span { background-position: -40px -60px; } div.generic > a:hover, div.generic > a:hover img { background: none !important; } div.generic > a strong { /* userpage gear pod */ text-align: center; } /* FEATURE BLOCKS and other CENTERED INFO */ [class^="centered"] > li { /* currently captures 'centeredblocks' and 'centeredinfo' */ position: relative; width: 100%; height: 70px; overflow: hidden; color: #7d7575; } [class^="centered"] li > div { /* outer vertical centering */ position: absolute; /* z-index: 10; very necessary for webkit browsers? removed because of Project Roles 'centeredselect' */ line-height: 10px; display: table; top: 0; height: 90%; /* changed from 10px less than the containing li to be more generic (b/c of rich content) */ margin: 5px; overflow: hidden; background-repeat: no-repeat; } [class^="centered"] li > div > div { /* middle vertical centering */ position: static; display: table-cell; vertical-align: middle; padding-right: 0; } .centeredinfo > li > a { /* this is for the first empty link, overlaid on the ICON for clicking */ position: absolute; z-index: 15; display: block; top: 5px; left: 5px; width: 60px; height: 60px; } /* Rich Content Links, Site News, Download Links */ .centeredblocks { list-style-position: outside; } .centeredblocks li { padding: 0 !important; /* important to override simple wiki lists */ background: none !important; font-size: 1.1em; font-weight: normal; } .centeredblocks > li:hover { /* these add the yellow corners and background color */ cursor: pointer; background: #3d1d0d url(//cssimg.ngfiles.com/icons/hovers/hoverticks-R.png) -160px -20px no-repeat !important; } .centeredblocks > li:hover > a { background: url(//cssimg.ngfiles.com/icons/hovers/hoverticks-L.png) 582px -20px no-repeat; } .thincol .centeredblocks > li:hover { background-position: 272px -25px !important; } .thincol .centeredblocks li:hover > a { background-position: -160px -25px; } .centeredblocks > li:hover a { cursor: pointer; color: #fff !important; } .centeredblocks img { margin: 5px; } .thincol .centeredblocks img { margin: 0; } .centeredblocks > li img { /* defaults to portal image */ padding: 5px; width: 93px; height: 60px; } .centeredblocks > li > div { padding: 0 110px 0 108px; } div.thincol .centeredblocks li > div { padding: 0 0 0 101px; } .centeredblocks > li.audio img, .centeredblocks > li.art img, .centeredblocks > li.user img { /* audio & art image corrections */ width: 60px; } .centeredblocks > li.audio > div, .centeredblocks > li.art > div, .centeredblocks > li.user > div { padding-left: 75px; } .centeredblocks > li.audio dd.star-variable + dt + dd:after { content: ":"; } /* for "Song: Rock" */ .centeredblocks > li:nth-child(odd) > span:empty { /* underlaid for alternating bg colors */ display: block; position: absolute; top: 0; width: 100%; height: 100%; opacity: .2; background-color: #9d4f18; } .centeredblocks > li:hover > span:empty, .thincol .centeredblocks > li > span { display: none; } .centeredblocks li > a { /* this is the first link, it gets overlaid for clicking */ position: absolute; z-index: 15; display: block; padding: 0; top: 0; left: 0; width: 100%; height: 100%; border: none !important; } .centeredblocks li > a:hover { cursor: pointer; } .centeredblocks li a { /* any link text */ font-weight: bold; font-size: 1.1em; } div.fatcol ul.centeredblocks { /* search results only */ margin: 5px; } div.three3 .centeredblocks > li, div.fatcol .centeredblocks > li { height: 80px; } div.three3 .centeredblocks > li { /* bbs only */ width: 590px; } .thincol .centeredblocks li div a { display: inline-block; width: 100%; padding-bottom: 5px; line-height: 12px; } div.thincol .centeredblocks ul { display: block; width: 169px; margin-top: 3px; padding-top: 2px; border-top: solid 1px #363232; line-height: 1.1em; font-size: 10px; } div.thincol .centeredblocks ul li + li { display: inline; margin-left: 3px; padding-left: 4px !important; background: url(//cssimg.ngfiles.com/icons/tinyicons-vert.png) 0 -98px no-repeat !important; } div.thincol .centeredblocks ul li:first-child { display: inline; } .centeredblocks li p { /* rich content links only */ width: 360px; margin-top: 7px; padding-top: 5px; line-height: 1em; color: #c9bebe; border-top-style: solid; border-top-width: 1px; } .centeredblocks li.audio p, .centeredblocks li.art p, .centeredblocks li.user p { width: 394px; } div.three3 .centeredblocks, div.fatcol .centeredblocks { font-size: 1.1em; } .centeredblocks dl { position: absolute; z-index: 5; top: 5px; right: 5px; bottom: 5px; width: 90px; padding-top: 5px; padding-left: 10px; font-size: 11px; color: #c9bebe; border-left-style: solid; border-left-width: 1px; } .centeredblocks dl dt { display: none; } .centeredblocks dl dd.star-variable { margin-bottom: 5px; } .centeredblocks dl dt[class] { display: block; float: left; text-indent: -9999em; overflow: hidden; background: url(//cssimg.ngfiles.com/icons/tinyicons-vert.png) 0 -623px no-repeat; width: 17px; height: 15px; } .centeredblocks dl dt.art { background-position: 0 -648px; } .centeredblocks dl dt.games { background-position: 0 -673px; } .centeredblocks dl dt.audio { background-position: 0 -698px; } .centeredblocks dl dt[class] + dd { line-height: 15px; } .centeredblocks > li dl, .centeredblocks > li p { /* border patrol */ border-color: #363232; } .centeredblocks > li:nth-child(odd) dl, .centeredblocks > li:nth-child(odd) p { border-color: #4f280e; } .centeredblocks > li:hover *, .thincol .centeredblocks > li:hover * { border-color: #5a5454 !important; } div.thincol .centeredblocks > li * { border-color: #363232 !important; } dl dd[title*="Suitable"] { /* ratings */ width: 75px !important; height: 20px; padding-left: 15px; font-size: 11px; line-height: 16px; font-weight: normal; background-image: url(//cssimg.ngfiles.com/icons/hovers/rankandrate.png); background-repeat: no-repeat; } dl dd[title*="Everyone"] { background-position: -44px -3px; } dl dd[title*="13+"] { background-position: -44px -23px; } dl dd[title*="17+"] { background-position: -44px -43px; } dl dd[title*="Adult"] { background-position: -44px -63px; } .detailedhovers dd[title]:before, .centeredblocks dd[title]:before { content: "("; } .detailedhovers dd[title]:after, .centeredblocks dd[title]:after { content: ")"; } /* news in feeds - from smulse */ div.podcontent ul.centeredblocks li.news div { padding: 0 0 0 70px; margin: 10px; } div.podcontent ul.centeredblocks li.news div:first-child { padding: 0; width: 500px; margin: -11px 0 0 0; } div.podcontent ul.centeredblocks li.news hr { background-image: none; background-color: #363232; height: 1px; } /* Special Downloads */ .downloadlinks li span { display: block; width: 202px; margin-top: 3px; padding-top: 2px; border-top: solid 1px #363232; line-height: 1.1em; font-size: 10px; color: #c9bebe; } .downloadlinks li img { width: 60px; height: 60px; } .downloadlinks li > div { padding-left: 68px !important; } .downloadlinks li div a { padding-bottom: 3px !important; } /* Collection Pages */ .subcollection { margin: 0 !important; } .subcollection li { display: inline-block; width: 298px; } .subcollection li span { display: block; width: 175px; margin-top: 5px; padding-top: 4px; border-top: solid 1px #363232 !important; line-height: 1.1em; font-size: 12px; color: #c9bebe; } .subcollection > li:hover > a { background-position: 290px -20px !important; } div.thincol .centeredblocks strong + span, div.thincol .centeredblocks a + span { /* careful, might hit future stuff */ min-width: 169px; display: block; padding-top: 5px; border-top: solid 1px #363232; } .thincol .centeredblocks li div span { /* related collections on portal view pages */ color: #c9bebe; line-height: 11px; } /* Featured Web Content Ads */ .webfeature { margin: 0 !important; } .webfeature li { display: inline-block; width: 298px; } .webfeature > li img { width: 70px; height: 70px; padding: 0; } .webfeature > li > div { padding-left: 80px; } .webfeature li span { display: block; width: 203px; margin-top: 5px; padding-top: 4px; border-top: solid 1px #363232 !important; line-height: 1.1em; font-size: 12px; color: #c9bebe; } .webfeature > li:hover > a { background-position: 290px -20px !important; } /* Author Info */ .authorlinks > li { position: relative; display: block; height: 35px; padding: 5px 5px 5px 50px; /* pushes text right to uncover background icon */ font-size: 1.2em; line-height: 16px; font-weight: bold; background-repeat: no-repeat; background-position: 5px 5px; } .authorlinks > li > a:first-child img { /* this is for the first empty link, overlaid on the ICON for clicking */ position: absolute; z-index: 15; display: block; top: 5px; left: 5px; width: 35px; height: 35px; } .authorlinks li:nth-child(even) { background-color: #2e1a0e; } .authorlinks li em { display: block; padding-top: 2px; } .authorlinks li em > a { display: block; width: 165px; /* don't interfere with email/fave links */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold; font-style: normal; } .authorlinks li span { color: #c9bebe; font-size: 11px; } .authorlinks li ul li [title] { /* styled this way so both and