/* 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