/* ------------------------------------------------------------ There are 3 page styles: - single-column home page (.single) - two-column informational page (.info) - three-column search results page (.results) These classes get assigned to the element, triggering the appropriate layouts. In addition, there is an "alt" class that is shared between the .info and .results pages for common layout rules. - e.g. ----------------------------------------------------------- */ body { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; text-align: center; color: #333; background: #fff; } /* links */ a:link, a:visited { color: #c00; text-decoration: none; border-bottom: 1px dotted #ccc; } a:hover { color: #900; text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } /* ------------------------------------------------------------ shared components for all pages ------------------------------------------------------------ */ #wrap { width: 770px; margin: 0 auto; padding: 0 0 30px 0; text-align: left; background: #af0000 url(../img/body-bg-home.gif) no-repeat bottom left; } /* login dashboard */ #dashboard { margin: 0; padding: 8px 21px; font-size: 85%; background: #000; } #dashboard:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #dashboard p { float: right; margin: 0; padding: 0; color: #444; } #dashboard p#dash-nav { float: left; } #dashboard a { color: #999; border-bottom-color: #444; } #dashboard a:hover { color: #ccc; border-bottom-color: #999; } #dashboard strong { color: #ccc; } #dashboard strong a { color: #ccc; } /* message row */ .message { margin: 0 0 10px 0; padding: 6px; font-size: 85%; line-height: 1.4em; text-align: center; border-bottom: 1px solid #ccc; color: #666; background: #eee; } /* ------------------------------------------------------------ shared "alt" styles for flexible results and info pages ------------------------------------------------------------- */ body.alt { background: #af0000 url(../img/body-bg.gif) repeat-x top left; } body.alt #wrap { width: auto; max-width: 1200px; min-width: 740px; margin: 0 15px; padding: 0 0 0 4px; background: #fff url(../img/wrap-bg-left.gif) repeat-y top left; } body.alt #wrap-inner { padding: 0 4px 0 0; background: url(../img/wrap-bg-right.gif) repeat-y top right; } body.alt #wrap:after, body.alt #wrap-inner:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } body.alt #content { padding-bottom: 30px; } body.alt #content h3 span { cursor: help; border-bottom: 1px dotted #D24646; } /* footer */ body.alt #footer { clear: both; width: auto; max-width: 1200px; min-width: 740px; margin: 0 15px 30px 15px; padding: 0 0 0 4px; background: #fff url(../img/footer-bg-left.gif) no-repeat bottom left; } body.alt #footer div { margin: 0; padding: 0; background: url(../img/footer-bg-right.gif) no-repeat bottom right; } body.alt #footer p { margin: 0 19px 0 15px; padding: 10px 0 20px 0; color: #ccc; border-top: 1px solid #ddd; } body.alt #footer p a { font-weight: bold; } body.alt #footer p em { display: block; margin-top: 6px; font-style: normal; font-size: 85%; } body.alt #footer p em a { font-weight: normal; } /* ------------------------------------------------------------ unreg home styles --------------------------------------------------------------*/ /* home content box */ #content-home { position: relative; margin: 0; padding: 0 0 18px 0; background: #fff url(../img/home-box-bottom.gif) no-repeat bottom left; } #content-home:after { /* self-clearing float */ content: "."; display: block; height: 0; clear: left; visibility: hidden; } #ch-inner { padding: 45px 45px 0 45px; background: url(../img/home-box-top.gif) no-repeat top left; } /* logo and get rolling button */ h1#unreg-logo { float: left; margin: 0; padding: 0; } #get-rolling { position: absolute; top: 55px; right: 40px; display: block; padding: 40px 0 0 0; border: none; } /* tagline */ #tagline { margin: 0 180px 10px 195px; padding: 0; font-size: 95%; list-style: none; color: #444; } #tagline h2 { margin: 0 0 6px 0; padding: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1px; font-size: 170%; color: #600; } #tagline h3 { margin: 0 0 12px 0; padding: 0; font-size: 138%; font-weight: normal; } #tagline ul { margin: 0; padding: 0; list-style: none; } #tagline li { margin: 0; padding: 0 0 0 11px; font-weight: bold; background: url(../img/bullet-sm.gif) no-repeat 0 4px; } /* high rollers */ #hrollers { margin: 30px -4px 0 -4px; padding: 0 21px; font-size: 100%; } #hrollers:after { /* self-clearing float */ content: "."; display: block; height: 0; clear: left; visibility: hidden; } #hrollers h4 { margin: 0 0 0 4px; padding: 0; height: 12px; text-indent: -5000px; background: url(../img/high-rollers.gif) no-repeat top left; } #hrollers-desc { margin: 8px 0 8px 0; padding: 0; font-size: 90%; color: #f29999; text-align: center; } #hrollers-desc span { cursor: help; border-bottom: 1px dotted #D24646; } #hrollers-desc-exp { margin: 8px 0 8px 0; padding: 0; font-size: 90%; color: #000000; text-align: center; } #hrollers-desc-exp span { cursor: help; border-bottom: 1px dotted #D24646; color: #f29999; } div.hroller { float: left; position: relative; width: 228px; margin: 10px 26px 0 0; padding: 0 0 16px 0; background: url(../img/hroll-bg-bottom.gif) no-repeat bottom left; } div.last { margin-right: 0; } div.hroller dl { margin: 0; padding: 12px 15px 0 15px; background: #eee url(../img/hroll-bg-top.gif) no-repeat top left; } div.hroller dl dt { float: left; margin: 0 8px 0 0; } div.hroller dl dt a:link, div.hroller dl dt a:visited { border-bottom: none; } div.hroller dl dt a:hover img { border-color: #999; background: #999; } div.hroller dl dt img { border: 1px solid #ccc; padding: 2px; background: #fff; } div.hroller dl dd.hr-title { clear: none; margin: 0 0 8px 46px; font-size: 110%; font-weight: bold; } div.hroller dl dd.hr-title a { color: #222; } div.hroller dl dd { clear: left; margin: 0; padding: 0; font-size: 100%; } div.hroller dl dd a { font-weight: bold; } div.hroller dl dd img.hr-drop-btn { float: right; margin: 0 0 0 4px; border: none; } div.hroller dl dd.hr-form { clear: left; margin-left: 0; } div.hroller dl dd.hr-form form { margin: 0; padding: 6px 0 0 0; } div.hroller dl dd.hr-form form fieldset { margin: 0; padding: 0; border: none; } div.hroller dl dd.hr-form form input { vertical-align: middle; } div.hroller dl dd input.text { width: 160px; } div.hroller dl dd.add { text-align: center; margin: 4px 0 0 0; padding: 0; font-size: 85%; line-height: 1.5em; font-weight: normal; } div.hroller dl dd.add a { padding: 0 0 0 18px; font-weight: normal; background: url(../img/icn-add.gif) no-repeat 0 1px; } /* high roller drop-down */ .hr-drop-menu ul, .hr-drop-menu li { list-style: none; margin: 0; padding: 0; text-align: left; } .hr-drop-menu { position: absolute; top: 12px; right: 15px; margin: 0; padding: 0 0 8px 0; background: #F6E5B7 url(../img/hroll-list-bg.gif) repeat-x top left; border: 1px solid #EBD085; padding-top: 10px; z-index: 999; width: 198px; height: 150px; } .hr-drop-menu a:link, .hr-drop-menu a:visited { border: none; } .hr-drop-up { position: absolute; top: -1px; right: -1px; } .hr-drop-menu h3 { margin: 0 10px 4px 10px; padding: 0; font-size: 75%; } div.hroller dl dd.hr-title .hr-drop-menu h3 a { float: right; margin-right: 18px; font-weight: normal; color: #c00; } .hr-drop-menu ul { overflow: auto; height: 130px; } .hr-drop-menu ul li { width: 140px; margin: 2px 14px; padding: 2px 0 2px 15px; font-weight: normal; font-size: 75%; line-height: 1.4em; background: url(../img/bullet-sm.gif) no-repeat 4px 5px; overflow: hidden; } /* ------------------------------------------------------------ get rolling styles ------------------------------------------------------------ */ body#grolling #ch-inner:after { /* self-clearing float */ content: "."; display: block; height: 0; clear: left; visibility: hidden; } body#grolling h2 { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1px; font-size: 190%; color: #600; } body#grolling .box { margin: 0 0 15px 223px; font-size: 110%; color: #555; border: 1px solid #ccc; background: #eee url(../img/box-gradient.gif) repeat-x top left; } body#grolling .box h3 { margin: 0; padding: 10px 10px 10px 22px; background: url(../img/bullet-sm.gif) no-repeat 10px 16px; } body#grolling .box p { margin: 0; padding: 0 10px 10px 10px; line-height: 1.4em; } body#grolling p#grolling-or { margin: 10px 0 10px 223px; padding: 0; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 140%; text-align: center; } /* ------------------------------------------------------------ registered home styles ------------------------------------------------------------ */ /* search bar */ #content-home div.reg-search { position: relative; padding: 75px 45px 40px 45px; } #content-home div.bulb { position: relative; padding: 75px 45px 12px 45px; } .reg-search h1 { margin: 0; padding: 0; } .reg-search img#logo { margin: 0 0 5px 0; } .reg-search form { position: absolute; width: 500px; top: 80px; left: 243px; height: 57px; margin: 0; padding: 0; } .reg-search form fieldset { margin: 0; padding: 0; border: none; } .reg-search form input, .reg-search form select { float: left; } .reg-search form em { float: left; display: block; margin: 5px; padding: 0; font-style: normal; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 140%; } .reg-search form input#search-box { width: 206px; margin: 2px 12px 0 0; padding: 0; font-size: 20px; color: #666; } /* search engine static pages */ #content-home div.own-search { position: relative; padding: 45px 45px 50px 45px; } .own-search h1 { margin: 0; padding: 0; } .own-search h2 { margin: 0 0 25px 0; padding: 0; font-size: 30px; font-weight: bold; } #tagtext { margin: 0; padding: 0; background: #af0000; color: #FFF; } .own-search div#rollname { text-align: center; } .own-search img#logo { margin: 0 0 5px 80px; } .own-search form { position: absolute; width: 500px; top: 111px; left: 220px; height: 57px; margin: 0; padding: 0; } .own-search form fieldset { margin: 0; padding: 0; border: none; } .own-search form input, .reg-search form select { float: left; } .own-search form em { float: left; display: block; margin: 5px; padding: 0; font-style: normal; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 140%; } .own-search form input#search-box { width: 330px; margin: 3px 7px 15px 0; padding: 0; font-size: 30px; color: #666; } div.own-bottom { float: left; width: 740px; margin: 10px 0 0 0; padding: 0 0 16px 0; background: url(../img/ownroll-bg-bottom.gif) no-repeat bottom left; } div.own-bottom-inside { margin: 0; width: 740px; padding: 12px 0 0 0; background: url(../img/ownroll-bg-top.gif) no-repeat top left; } #postcreate { font-size: 120%; } .own-bottom-tag { margin: 0 20px; padding: 0; font-size: 12px; font-weight: bold; } /* tagline */ h2#reg-tag { height: 18px; margin: 0 35px 0 0; padding: 0; text-indent: -5000px; background: url(../img/reg-home-tag.gif) no-repeat 100% 0; } /* customize boxes */ #customize { margin: 30px -4px 20px -4px; padding: 0 21px; font-size: 85%; } #customize:after { /* self-clearing float */ content: "."; display: block; height: 0; clear: left; visibility: hidden; } div.module { float: left; width: 228px; margin: 10px 26px 0 0; padding: 0 0 16px 0; background: url(../img/hroll-bg-bottom.gif) no-repeat bottom left; } div.last { margin-right: 0; } div.module dl { margin: 0; padding: 12px 15px 0 15px; background: #eee url(../img/hroll-bg-top.gif) no-repeat top left; } div.module dl dt { margin: 0 0 5px 0; font-family: Helvetica, Arial, sans-serif; font-size: 110%; font-weight: bold; text-transform: uppercase; } div.module dl dd { margin: 0 0 0 10px; padding: 4px 0 4px 12px; background: url(../img/bullet-sm.gif) no-repeat 0 6px; } div.module dl dd.empty { color: #eee; background: none; } div.module dl dt img.mod-btn { float: right; margin: 0 0 0 4px; border: none; } div.module h3 { margin: 10px 0 0 5px; padding: 4px 0 0 12px; font-family: Helvetica, Arial, sans-serif; font-size: 120%; font-weight: bold; } .module-note { font-size: 100%; padding: 3px 0 0 17px; } /* footer links */ body.single #footer p { margin: 0; padding: 20px 0 0 0; text-align: center; color: #800; } body.single #footer p a { font-weight: bold; color: #fff; border-color: #D42727; } /* ------------------------------------------------------------ info page styles ------------------------------------------------------------ */ body.info #wrap, body.info #footer { width: 774px; margin: 0 auto; } body.info #wrap-inner { width: 770px; } body.info #footer { margin-bottom: 20px; } /* two-column structure */ body.info #main-body { width: 740px; margin: 10px 15px; } body.info #content { float: left; margin: 0 20px 0 0; padding: 0 0 30px 0; width: 490px; } body.info #content-text { /* for skinnier text-only column */ margin-right: 60px; } body.info #sidebar { float: left; width: 230px; margin: 0 0 20px 0; font-size: 85%; } body.info #content-blog { margin-right: 60px; } /* if no sidebar is desired */ body.noside #content { width: 700px; } /* header */ body.info #header { margin: 10px 15px 15px 15px; padding: 0; } body.info #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } body.info #header h1 { margin: 0; padding: 0; } body.info #header img#logo { float: left; } body.info #header h2 { float: left; margin: 10px 0 0 10px; padding: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1px; font-size: 190%; color: #600; } body.info #header h2 em { display: block; font-family: Verdana, sans-serif; font-style: normal; font-weight: normal; font-size: 60%; letter-spacing: 0; } body.info #header h2.with-subhead { margin-top: 0; } body.info p#btn-ryo { margin: 0; padding: 0; float: right; } body.info p#btn-ryo a { border: none; } /* sub navigation */ body.info ul#subnav { margin: 10px 0; padding: 5px; list-style: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #eee; } body.info ul#subnav li { margin: 0 8px 0 0; padding: 0 8px 0 0; display: inline; font-size: 110%; font-weight: bold; border-right: 1px solid #ccc; } body.info ul#subnav li.last { border-right: none; } body.info ul#subnav li.active a { color: #444; border: none; } /* content */ body.info #content h3 { margin: 0; padding: 0 0 4px 0; font-size: 110%; color: #600; border-bottom: 1px dotted #ccc; } body.info #content ul { margin: 1em 0 1.5em 20px; padding: 0; list-style: none; } body.info #content ul li { margin: 0 0 2px 0; padding: 0 0 0 16px; line-height: 1.4em; background: url(../img/bullet-sm.gif) no-repeat 4px 5px; } /* two-color side-by-side */ div.explore:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } div.explore div.column { float: left; width: 46%; margin: 0 4% 1em 0; } div.explore div.last { width: 50%; margin-right: 0; } div.explore h4 { margin: 1em 0 0 10px; padding: 0; } div.explore dl { margin: 1em 0 1.5em 20px; padding: 0; } div.explore dl dt { margin: 0 0 2px 0; padding: 0 0 0 16px; line-height: 1.4em; background: url(../img/bullet-sm.gif) no-repeat 4px 5px; } div.explore dl dd { margin: 0; padding: 0; } .explore dl dd.show { display: block; position: relative; } .explore dl dd div iframe { width: 300px; height: 270px; border: none; background: none; } /* featured searchrolls */ .explore dl.explore-featured { margin: 1em 0; padding: 15px 50px 15px 15px; border: 1px solid #ccc; background: url(../img/featured-burst.gif) no-repeat top right; } .explore dl.explore-featured dt { margin: 0; padding: 0; background: none; } .explore dl.explore-featured dt img { float: left; padding: 5px; background: #fff; } .explore dl.alt dt img { /* for wide logos */ float: none; } .explore dl.explore-featured dd { margin-left: 105px; } body.info #content .explore dl.explore-featured dd ul { margin: 0; } /* sidebar */ body.info #sidebar div.hroller { float: none; margin: 0 0 20px 0; font-size: 120%; border: 1px solid #ccc; background: #eee url(../img/box-gradient.gif) repeat-x top left; } body.info #sidebar div.hroller dl { background: none; } body.info div.module { float: none; width: auto; margin: 0 0 10px 0; border: 1px solid #ccc; background: #eee url(../img/box-gradient.gif) repeat-x top left; z-index: 888; } body.info div.module dl { margin: 0; padding: 12px 15px 0 15px; background: none; } div.module dl dt { margin: 0 0 5px 0; font-family: Helvetica, Arial, sans-serif; font-size: 110%; font-weight: bold; text-transform: uppercase; } div.module dl dd { /* position: relative; */ margin: 0 0 0 10px; padding: 4px 0 4px 12px; background: url(../img/bullet-sm.gif) no-repeat 0 6px; } div.module dl dd.empty { color: #eee; background: none; } div.module dl dt img.mod-btn { float: right; margin: 0 0 0 4px; border: none; } /* profile boxes */ body.info .box { margin: 0 0 10px 0; color: #333; border: 1px solid #ccc; background: #eee url(../img/box-gradient.gif) repeat-x top left; } body.info #content .box h3 { margin: 0; padding: 6px; font-family: Helvetica, Arial, sans-serif; font-size: 110%; text-transform: uppercase; color: #333; border-bottom: 1px solid #ccc; background: #ddd; } body.info .box dl.profile dd { margin: 0 25px 0 130px; padding: 2px 0; background: none; } body.info .box dl.profile dd.profile-username { color: #600; } body.info .box dl.profile dt { margin: 0 0 10px 20px; font-weight: normal; } body.info .box dl.profile dt.favicon { float: left; margin: 0 0 0 20px; text-align: center; } body.info .box dl.profile dt.favicon p { margin: 2px 0 0 0; padding: 0; font-size: 85%; } body.info .box dl.profile dt.favicon img { padding: 10px; border: 1px solid #ccc; background: #fff; } body.info .box img.mod-btn { float: right; margin: 0 0 0 4px; border: none; } body.info .box h4 { margin: 1em 20px 0 20px; padding: 0; font-size: 110%; } body.info .box p { margin: 0 20px 1em 20px; padding: 0; } /* skip this button */ a#skipthis { display: block; margin: 4em 0 0 0; border: none; } /* tools list */ dl.tools { margin: 1.5em 40px; padding: 0; } dl.tools dt { margin: 0; padding: 0 0 0 13px; font-weight: bold; background: url(../img/bullet-sm.gif) no-repeat 0 3px; } dl.tools dd { margin: 4px 0 1.5em 13px; padding: 0; } /* ------------------------------------------------------------ search results styles ------------------------------------------------------------ */ /* three-column structure */ body.results #main-body { float: left; margin: 0 15px; border-top: 1px solid #ccc; } body.results #sources { float: left; width: 160px; } body.results #content { margin: 0 180px; } body.results #sidebar { float: right; width: 160px; margin: -1px 0 0 0; } /* search bar */ #search { position: relative; margin: 0 15px 0 15px; padding: 0; } #search h1 { margin: 0; padding: 0; } #search h1 a { border: none; } #search img#logo { margin: 0 0 0 0; } #search form { position: absolute; top: 5px; left: 198px; margin: 0; padding: 0; } #search form a:link, #search form a:visited { border: none; } #search form fieldset { margin: 0; padding: 0; border: none; } #search form input, #search form select { float: left; z-index: 1000; } #search form em { float: left; display: block; margin: 5px; font-style: normal; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 140%; } #search form input#search-box { width: 206px; margin: 2px 12px 0 0; font-size: 20px; color: #666; } #search form select { margin: 7px 5px 0 0; } #search-filter-link { display: block; float: left; height: 1%; border: none; } #search-filter { position: absolute; left: 423px; top: 15px; margin: 0; padding: 0; } #search-filter li { width: 85px; font-size: 85%; background: #eee; color: #555; list-style: none; margin: 0 0 0 4px; padding: 0; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; } #search-filter li a { display: block; padding: 4px 20px 4px 10px; color: #555; border: none; } #search-filter li a:hover { color: #000; background: #fff url(../img/drop-check.gif) no-repeat 97% 50%; } #yahoo { position: absolute; top: 5px; right: 0; } /* select menu replacement styles */ select.replaced { display: none; } ul.selectReplacement { float: left; background: url(../img/dropdown-bg.gif) no-repeat top left; margin: 0 5px 0 0; padding: 5px 0 0 0; height: 31px; width: 158px; } ul.selectReplacement li { font-size: 85%; background: #eee; color: #555; cursor: pointer; display: none; list-style: none; margin: 0 0 0 4px; padding: 4px 6px; width: 136px; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; } ul.selectReplacement li strong { font-weight: bold; } ul.selectOpen li { display: block; padding: 6px 13px 6px 6px; width: 129px; } ul.selectOpen li.last { border-bottom: 3px solid; } ul.selectReplacement li.selected { background: none; color: #333; font-weight: bold; display: block; border: none; } ul.selectOpen li.selected { background: #f7f7f7 url(../img/drop-check.gif) no-repeat 130px 50%; color: #000; display: block; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ddd; } ul.selectOpen li:hover, ul.selectOpen li.hover { background: #f7f7f7; color: #000; } ul.selectOpen li.selected:hover { background: #f7f7f7 url(../img/drop-check.gif) no-repeat 130px 50%; color: #000; } /* content */ body.results #content p { margin: 0; padding: 1em 0; } body.results #content ul { margin: 10px; padding: 0; list-style: none; } body.results #content ul li { margin: 0 0 5px 0; padding: 0 0 0 13px; background: url(../img/bullet-sm.gif) no-repeat 0 4px; } #results { margin: 1em 0; padding: 0; } #results dt { margin: 0 0 4px 0; } #results dd { margin: 0; padding: 0; font-size: 85%; line-height: 1.4em; } #results dd.info { margin: 3px 0 20px 0; color: #885; text-indent: 0px; } h2#results-title { margin: 15px 0 4px 0; padding: 0 0 5px 0; font-size: 9px; font-weight: normal; color: #000; border-bottom: 1px dotted #ccc; } h2#results-title em { font-weight: bold; font-style: normal; } body.results #content p#save-this { margin: 0 0 0 10px; padding: 0; float: right; padding: 0; font-size: 85%; } body.results #content p#save-this a { padding-left: 15px; border: none; background: url(../img/icn-save.gif) no-repeat 0 2px; } body.results #content p#edit-this { margin: 10px 0 0 10px; padding: 0; text-align: right; padding: 0; font-size: 85%; } body.results #content p#edit-this a { padding-left: 13px; border: none; background: url(../img/bullet-sm.gif) no-repeat 0 3px; } body.results #content p#share-this { margin: 10px 0 0 10px; padding: 0; text-align: right; padding: 0; font-size: 85%; } body.results #content p#share-this a { padding-left: 18px; border: none; background: url(../img/icn-mail.gif) no-repeat 0 3px; } body.results #content div#share-this { margin: 10px 0 0 10px; padding: 0; text-align: right; padding: 0; font-size: 85%; } body.results #content div#share-this a { padding-left: 18px; border: none; background: url(../img/icn-mail.gif) no-repeat 0 2px; } body.results #content div#permalink { float: left; padding: 0; font-size: 85%; } body.results #content div#permalink a { border: none; padding-left: 18px; background: url(../img/icn-link.gif) no-repeat 0 3px; } /*