/* ************************************************* THE SUPEREST General Screen Styles Created by the ridiculous Dan Mall http://www.danielmall.com/ ************************************************* */ /*------------------------------------------- General Selectors -------------------------------------------*/ * { margin: 0; padding: 0; line-height: 1.5; } body { font: normal 62.5% Georgia, 'Times New Roman', serif; color: #000; background: #c00; } /* block level */ h1 { font: bold 64px Helvetica, Arial, sans-serif; color: #000; margin: 0 0 0.8em; } h2 { font: bold 22px Helvetica, Arial, sans-serif; color: #c00; margin: 0 0 0.8em; } h3 { font-size: 14px; font-weight: bold; margin: 0 0 0.8em; } h4 { font-size: 13px; font-weight: bold; margin: 0 0 0.5em; } h5 { } h6 { } p, ul, dl, ol { font-size: 12px; margin: 0 0 1.5em; } dd { /*margin: 0 0 0 15px;*/ } blockquote { margin: 0 0 1.2em; } table { } tr { } th, td { } /* inline */ em { font-style: italic; } strong { font-weight: bold; } a { color: #c00; font-weight: bold; text-decoration: none; } a:hover, a:focus { color: #000; } img { display: block; margin: 0 0 10px; } a img { border: none; } input, textarea { font: 12px Georgia, 'Times New Roman', serif; color: #222; } code { /*font: 12px/1 'Courier New', Courier, monospace;*/ } sub, sup { line-height: 0; } /*------------------------------------------- Global combinations -------------------------------------------*/ /* Phark Image Replacement - http://phark.typepad.com/phark/2003/08/accessible_imag.html */ #header h1 a, #nav a, #rss, #vanquished a, #defeated-by a, #the-aftermath, #relive-the-epic-battle, #purchase-mementos, #audience, #aftermath-exhibits, #available-mementos, #store-process h3, #and-furthermore h3, #search h3 label, #random h3, #random h4#randomheroimage, #aftermath .double-header h2, #search-results .double-header h2, .switch_detail, .defeated_by, .vanquished { display: block; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } /* Trimming Outline in Firefox - http://snook.ca/archives/html_and_css/trimming_long_o */ /*\*/ #header h1 a, #nav a, #rss, #vanquished a, #defeated-by a, .vanquished, .defeated_by, .switch_detail { overflow: hidden; } /**/ /* Easy Clearing - http://www.positioniseverything.net/easyclearing.html */ #header-wrap:after, .section:after, #header ol:after, #nav ul:after, .star-header:after, .divided-thirds:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #hide { position: absolute; left: -9999px; } .real-hide { display: none; } /*------------------------------------------- Reusable Elements -------------------------------------------*/ .more { font-style: italic; white-space: nowrap; text-transform: lowercase; font-weight: normal; } .more:before { content: "[ "; } .more:after { content: " ]"; } .divided { background: transparent url(/_img/_structure/divided.gif) repeat-y 0 0; } body#home .divided:first-child { background: transparent url(/_img/_structure/divided.gif) repeat-y 0 0; } .divided-thirds { background: transparent url(/_img/_structure/divided-thirds.gif) repeat-y 0 0; } .divided-thirds .col img { margin: 0 0 0 20px; } /* .star-header - headers set in Block Berthold, separated by the star graphic */ .star-header { border-bottom: 1px solid #e0e0e0; no-repeat 0 bottom; padding: 0 0 0 0; margin: 0 0 0 0; } .section .star-header { background-position: -210px bottom; } .section .star-header h2 { float: left; margin-right: 10px; } .section .star-header p { font-weight: bold; font-style: italic; font-size: 10px; } /* .double-header - headers set in Block Berthold, separated by the star graphic, with thick bottom border */ .double-header { background: transparent url(/_img/_structure/weathered-border.gif) no-repeat 0 bottom; padding: 0 0 20px 0; margin: 0 0 0 0; } .section .double-header { background-position: -210px bottom; } .section .double-header h2 { float: left; margin-right: 10px; } .section .double-header p { font-weight: bold; font-style: italic; font-size: 10px; } /* .split-header - plain-text headers, separated by a small rule */ .split-header { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 1em 0 1em 0; margin: 1.95em 0 1.5em 0; overflow: hidden; } .split-header h3 { float: left; margin: 0 0 0 0; padding: 0 1.2em 0 0; overflow: hidden; } .split-header p { font-style: italic; font-size: 11px; border-left: 1px solid #e5e5e5; padding: 0 0 0 1.2em; } .split-header .description { margin-bottom: 0; padding: 0; overflow: hidden; } .split-header .description p:last-child { margin: .2em 0 0 0; } .thirds .col { float: left; width: 217px; } .thirds img { margin: 0; } .main { width: 415px; float: left; margin: 0 20px 0 0; } .sub { width: 220px; margin: 0 0 0 415px; padding: 0 0 0 20px; } .subnav { padding-bottom: 1px; background: transparent url(/_img/_structure/weathered-border.gif) no-repeat -100px bottom; margin: 0 0 14px 19px; } .subnav ul { list-style: none; background: transparent url(/_img/_structure/weathered-border.gif) no-repeat 0 0; padding-top: 17px; } .subnav li { border-top: 1px solid #e0e0e0; } .subnav li:first-child { border-top: none; } .subnav a, .subnav strong { display: block; text-decoration: none; color: #000; font-size: 11px; font-style: italic; font-weight: normal; padding: 0.75em 0; margin: 1px 0; } .subnav strong { background: transparent url(/_img/_structure/_subnav/subnav-current.jpg) no-repeat 0 center; padding-left: 17px; font-weight: bold; } .subnav a:hover, .subnav a:focus { background: #fff; color: #000; padding-left: 5px; padding-right: 5px; font-weight: bold; } #superest-nav { background: transparent url(/_img/_structure/weathered-border.gif) no-repeat 0 bottom; list-style: none; height: 49px; position: relative; } #vanquished a { background-image: url(/_img/_structure/_buttons/vanquished.jpg); width: 161px; height: 14px; } #vanquished a:hover, #vanquished a:focus { background-position: 0 -14px; } #defeated-by { position: absolute; right: 0; top: 0; } #defeated-by a { background-image: url(/_img/_structure/_buttons/defeated-by.jpg); width: 162px; height: 14px; } #defeated-by a:hover, #defeated-by a:focus { background-position: 0 -14px; } .comments { list-style: none; margin: 30px 0 0 0; } .comments li { border-top: 1px solid #d1d1d1; padding: 1.5em 0 1em 60px; background: transparent url(/_img/_structure/open-quote.gif) no-repeat 0 1.5em; } .comments li:first-child { border-top: none; padding-top: 0; background-position: 0 0; } * html .comments li.first { border-top: none; padding-top: 0; background-position: 0 0; } /* IE6 rule */ .comments cite { font-weight: bold; font-style: normal; } .comments cite:before { content: " \2014 "; } /* dynamically insert an em dash before the name of the commenter */ /*------------------------------------------- Modules -------------------------------------------*/ .module { padding: 0 0 0 0; background: transparent url(/_img/_structure/_modules/module-bg.gif) repeat-y 19px 0; position: relative; margin: 0 0 18px; } #store-process p { padding: 0 15px 13px 34px ; margin: 0 0 0 0; font-size: 12px; font-style: italic; } #store-process h3 { position: relative; top: 0; left: 19px; background-image: url(/_img/_structure/_modules/store-process.gif); width: 206px; height: 35px; background-position: 0 -19px; } #and-furthermore p { padding: 0 15px 13px 34px ; margin: 0 0 0 0; font-size: 12px; font-style: italic; } #and-furthermore h3 { position: relative; top: 0; left: 19px; background-image: url(/_img/_structure/_modules/and-furthermore.gif); width: 206px; height: 31px; background-position: 0 -13px; } #search h3 label { position: relative; top: 0; left: 19px; background-image: url(/_img/_structure/_modules/search-battlefield.gif); width: 206px; height: 30px; background-position: 0 -24px; } #search-box { background-color: #eaeaea; border: none; width: 157px; padding: 0.5em 4px; margin: 0 0 10px 38px; font-size: 10px; font-style: italic; text-align: center; } #find-hero { margin: 0 0 12px 32px; } #random h3 { position: relative; top: 0; left: 19px; background-image: url(/_img/_structure/_modules/todays-random-hero.gif); width: 206px; height: 30px; background-position: 0 -24px; } #random p { padding: 0 15px 13px 34px; text-align: center; } #random h4#randomheroimage { margin: 0 1px 12px 38px; width: 162px; height: 170px; background-image: url(/_img/_heroes/k187_hurkthrillcox.jpg); background-position: 50% 50%; } #random h5 { padding: 0 15px 4px 34px; text-align: center; font-size: 14px; font-weight; bold; font-style: italic; } /*------------------------------------------- Reused Structure -------------------------------------------*/ #header-wrap { background: #c00 url(/_img/_structure/_navigation/header-tile.jpg) repeat-x center bottom; padding: 70px 0 0; margin-bottom: 20px; } #header h1 { margin-bottom: 30px; } #header h1 a { background-image: url(/_img/_structure/_navigation/logo.gif); width: 644px; height: 59px; } #header h2 { width: 340px; float: left; color: #fff; font: 15px Georgia, 'Times New Roman', serif; margin: 0 10px 0 0; display: block; } #header h2 a { font-weight: bold; font-style: normal; color: #fff; } #header ol { float: left; width: 261px; background: transparent url(/_img/_structure/_navigation/header-brackets.gif) no-repeat 0 center; margin: 0; padding: 9px 20px 0 25px; list-style: none; min-height: 68px; font: 11px Georgia, 'Times New Roman', serif; position: relative; top: -4px; } #header ol li { display: inline; color: #fff; font-style: italic; line-height: 1.9; } #nav { clear: both; padding: 0 0 0 0; } #nav ul { list-style: none; border-top: 1px solid #e95c55; margin: 0; } #nav li { float: left; } #nav a { width: 189px; height: 80px; background-position: 0 0; } #nav a:hover, #nav a:focus { background-position: 0 -110px; } #nav-aftermath a { background-image: url(/_img/_structure/_navigation/condensed-nav-aftermath.gif); } #nav-battle a { background-image: url(/_img/_structure/_navigation/condensed-nav-battle.gif); } #nav-mementos a { background-image: url(/_img/_structure/_navigation/condensed-nav-mementos.gif); } #aftermath #nav-aftermath a, #battle #nav-battle a, #condensed #nav-battle a, #mementos #nav-battle a { background-position: 0 -221px; } #wrap, #header, #footer, #nav { width: 568px; margin: 0 auto; } #footer { position: relative; padding: 30px 0; } #footer p { font-size: 10px; padding: 0 217px 100px 0; } #rss { background-image: url(/_img/_structure/rss.gif); width: 62px; height: 38px; position: absolute; right: 0; top: 30px; } #rss:hover, #rss:focus { background-position: 0 -38px; } /*------------------------------------------- Home -------------------------------------------*/ #the-aftermath { background-image: url(/_img/_structure/_headers/the-aftermath.gif); background-position: 0 2px; width: 222px; height: 30px; } #relive-the-epic-battle { background-image: url(/_img/_structure/_headers/relive-the-epic-battle.gif); background-position: 0 1px; width: 308px; height: 30px; } #purchase-mementos { background-image: url(/_img/_structure/_headers/purchase-mementos.gif); background-position: 0 1px; width: 291px; height: 30px; } #home .section { background: transparent url(/_img/_structure/weathered-border2.gif) no-repeat 0 top; padding-top: 31px; } #home .section:first-child { background: none; padding-top: 0; } #home .section:first-child .star-header { border-bottom: none; background: transparent url(/_img/_structure/weathered-border.gif) no-repeat 0 bottom; padding: 0 0 15px 0; margin: 0 0 15px 0; } /*------------------------------------------- Explore the Aftermath -------------------------------------------*/ #aftermath-exhibits { background-image: url(/_img/_structure/_subnav/aftermath-exhibits.gif); width: 196px; height: 14px; margin-bottom: 10px; } #aftermath .double-header h2 { background-image: url(/_img/_structure/_headers/comments.gif); background-position: 0 2px; width: 164px; height: 30px; } #article { background: transparent url(/_img/_structure/weathered-border.gif) no-repeat 0 bottom; padding: 0 0 16px 0; margin: 0 0 15px 0 } .aftermath-comments { list-style: numbered; } .aftermath-comments li {margin: 15px 0 0 18px; padding: 0 0 0 10px;} .aftermath-comments p { font-size: 11px; border-bottom: 1px solid #e0e0e0; padding: 0 0 15px 0; } .aftermath-comments cite:before { content: " \2014 "; } /* dynamically insert an em dash before the name of the commenter */ /* comment form styling, pulled from old Superest site */ .commentformcontainer { width: 387px; margin: 0 0 0 28px; padding: 0 0 0 0; float: left; } .commentformcontainer p { width: 100%; padding: 0 0 0 0; margin: 0 0 5px 0; font-size: 11px; font-style: italic; } #comment_left { float: left; overflow: hidden; width: 149px; margin: 0 30px 0 0; padding: 0; } #comment_right { overflow: hidden; margin: 0; padding: 0; } .commentformcontainer p strong { font-size: 80%; color: #c00; } .commentformcontainer p em { font-size: 80%; color: #999; } .field { width: 100%; border: none; background-color: #EBEBEB; font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 90%; color: #666; font-style: italic; padding: 7px; line-height: 150%; margin: 0 0 20px 0; } .commentformcontainer form textarea { width: 181px; border: none; height: 74px; background-color: #EBEBEB; font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 90%; color: #666; font-style: italic; padding: 10px 15px 15px 15px; line-height: 170%; margin: 0 0 20px 0;} * html #comment_right { width: 230px; } /*------------------------------------------- Re-Live the Epic Battle -------------------------------------------*/ #hero-area { background: transparent url(/_img/_structure/weathered-border2.gif) no-repeat 0 bottom; padding-bottom: 25px; margin-bottom: 14px; } #hero-area .main { width: 315px; } #hero-area .sub { width: 300px; margin-left: 327px; } #hero-area h2 { color: #000; } #audience { background-image: url(/_img/_structure/_headers/audience.gif); background-position: 0 2px; width: 150px; height: 30px; } .herotitle { font: bold 24px Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: -1px; color: #000; padding: .4em 0 0 0; margin: 0 0 0 0; line-height: 1em; } /*------------------------------------------- Purchase Mementos -------------------------------------------*/ #available-mementos { background-image: url(/_img/_structure/_subnav/available-mementos.gif); width: 196px; height: 14px; margin-bottom: 10px; } .store-info { margin: 0 0 20px 20px; } #product-thumbs { height: 89px; margin: 16px 0 0 0; border-top: 1px solid #e0e0e0; padding: 15px 0 0 0 } #product-thumbs #thumb1 {float: left; margin: 0 12px 0 0;} #product-thumbs #thumb2 {float: left; margin: 0 12px 0 0;} #product-thumbs #thumb3 {float: left;} .purchase-area { background-color: #e0e0e0; padding: 0 0 0 0; margin: 0 0 0 0;} .purchase-area #purchase-info {position: absolute; margin: 14px 0 0 97px; width: 290px;} .purchase-area #price {padding: 0 0 10px 0; margin: 0 0 15px 10px; font-size: 10px; font-style: italic; border-bottom: 1px solid #a6a6a6;} .purchase-area #price span {font-weight: bold; font-size: 14px;} .purchase-area #dropdown {border-bottom: 1px solid #a6a6a6; font-size: 10px; font-style: italic; padding: 0 0 14px 0; margin: 0 0 15px 10px;} .purchase-area #radiobuttons {font-style: italic; font-size: 10px; margin: 0 0 0 10px;} .purchase-area #purchase {float: left; margin: 16px} .purchase-area .additional-information {clear: both; margin: 16px 0 80px 0; padding: 16px; font-style: italic; color: #505050; font-size: 12px; line-height: 1.5em; background-color: #ededed; } .purchase-area .additional-information span {text-transform: uppercase; font-style: normal; font-size: 9px; padding: 0 6px 0 0;} /*------------------------------------------- Search Results -------------------------------------------*/ #search-results .double-header h2 { background-image: url(/_img/_structure/_headers/search.gif); background-position: 0 2px; width: 120px; height: 30px; } #search-results .double-header { margin: 0 0 15px 0; } /*#search-results blockquote { padding: 10px 10px 10px 10px; margin: 0 0 15px 0; background-color: #e0e0e0; font-style: italic; }*/ #instructions p { margin: 0; padding: 0; } #instructions blockquote { font-size: 17px; margin: 0; padding: 5px 0 5px 15px; font-style: italic; color: #a6a6a6; } #search-results #hero-area { background: transparent url(/_img/_structure/weathered-border2.gif) no-repeat 0 top; padding: 31px 0 0 0; margin: 0 0 0 0; } #search-results #hero-area .main { width: 170px; } #search-results #hero-area .sub { width: 420px; margin-left: 190px; } #search-results #hero-area img { width: 170px;} .results-display { clear:both; border-top: 1px solid #e5e5e5; margin: 24px 0 24px 0; padding: 24px 0 4px 0; } .results-display:first-child { clear:both; border-top: none; margin: 0 0 24px 0; padding: 24px 0 4px 0; } #results { font-size: 12px; padding: 0 15px 60px 35px; background: transparent url(/_img/_structure/_modules/module-arrow.gif) no-repeat 19px bottom; position: relative; margin: 0 0 18px; text-align: center; } #results span {display: block; font-size: 45px; color: #fff; padding: 0 0 0 0; margin: 25px 0 16px 0; line-height: 12px;} .kevin_hero, .kevin_sutter_hero { width: 348px; background: transparent url(/_img/_structure/_condensed/hero_bg.gif) repeat-y 0 0; margin: 65px auto 200px auto; } .sutter_hero { width: 348px; background: transparent url(/_img/_structure/_condensed/hero_bg.gif) repeat-y 0 245px; margin: 65px auto 200px auto; } .guest_illustrator_hero { width: 348px; background: transparent url(/_img/_structure/_condensed/hero_bg.gif) repeat-y 0 315px; margin: 65px auto 200px auto; } .hero_image { position: relative; top: 0; left: 0; background: transparent url(/_img/_structure/_condensed/hero_bg_top.gif) no-repeat 0 0; } .kevin_hero img, .kevin_sutter_hero img {margin: 0 0 50px 7px; padding: 25px 0 0 0;} .sutter_hero img {margin: 0 0 50px 19px; padding: 25px 0 0 0;} .guest_illustrator_hero img {margin: 0 0 50px 8px; padding: 25px 0 0 0;} .full_detail {background: transparent url(/_img/_structure/_condensed/hero_bg_bottom.gif) no-repeat 0 top; padding: 30px 0 0 0; background-color: #c00; } .switch_detail { background-image: url(/_img/_structure/_condensed/full_details_button.gif); background-position: 0 0; width: 31px; height: 23px; margin: 0 0 0 319px; } .notes { background: transparent url(/_img/_structure/_condensed/tx_additional_notes.gif) no-repeat 50% 0; padding: 21px 0 0 0; margin: 0 0 25px 0; } .notes p {text-align: center; padding: 0 35px 0 35px; font-size: 13px;} .defeated_by {float: right; background-image: url(/_img/_structure/_condensed/defeated_by_button.gif); background-position: 0 0; width: 63px; height: 185px; margin: 160px 0 0 0;} .vanquished {float: left; background-image: url(/_img/_structure/_condensed/vanquished_button.gif); background-position: 0 0; width: 63px; height: 185px; margin: 160px 0 0 0;} /*------------------------------------------- End -------------------------------------------*/