/* ------------------------------------------ project: Zegar Śmierci author: Michał Stempień date: 2006/07/07 ------------------------------------------ */ html { height: 100%; margin-bottom: 1px; } body { margin: 0; padding: 0 0 10px; background: #000; color: #c4b48a; } body, input, textarea, select, option { font: 11px/18px Georgia,Arial,Helvetica,sans-serif; } /* ELEMENTS -------------------------------------*/ form { display: inline; } img { border: 0; } p { margin: 0 0 10px; padding: 0; } p:hover a { text-decoration: underline; } p strong { color: #b94; } blockquote { margin: 0 0 10px; padding: 0 0 0 15px; border-left: 3px solid #4d2f17; } .b { font-weight: bold; } /* CONSTANTS -------------------------------------*/ .fl { float: left; } .fr { float: right; } .cc { margin: 0 auto; text-align: center; } .clear { clear: both; margin: -1px 0 0 !important; height: 1px; margin: 0; } /* ANCHORS -------------------------------------*/ a { color: #753; text-decoration: none; } a:hover { color: #975; text-decoration: underline; } /* HEADERS -------------------------------------*/ h1 { margin: 0 0 10px; padding: 0; font: normal 18px Georgia,Arial,Helvetica,sans-serif; } h2 { margin: 0 0 10px; padding: 0; font: bold 14px Georgia,Arial,Helvetica,sans-serif; } /* LAYOUT -------------------------------------*/ #root { position: relative; width: 736px; margin: 0 auto; } #logo { position: absolute; top: 60px; left: 1px; width: 243px; height: 245px; background: url(../img/zs_logo.jpg) no-repeat; } #logo a { display: block; overflow: hidden; width: 243px; height: 245px; text-indent: -10001px; } #skip-links { position: absolute; list-style: none; margin: 0; padding: 0; } #skip-links li { } #skip-links li a { display: block; position: absolute; left: 0; top: -10001px; width: 245px; text-align: center; color: #C4B48A; } #skip-links li a:focus, #skip-links li a:active { top: 39px; } #nav { list-style: none; overflow: hidden; min-height: 34px; margin: 0 0 35px; padding: 0; } #nav li { display: inline; float: left; width: 97px; margin: 0 0 0 1px; } #nav li.first { margin: 0 72px 0 74px; } #nav li a { display: block; width: 97px; height: 20px; padding: 4px 0 0; background: url(../img/zs_nav.jpg) no-repeat; color: #c4b48a; font-size: 10px; text-align: center; text-transform: uppercase; } #nav li.current a { height: 22px; padding-top: 12px; background-position: 0 -200px; color: #38200b; } #nav li.first a { background-image: url(../img/zs_nav-s.jpg); color: #a9a9a9; } #nav li a:hover, #nav li a:focus, #nav li a:active { background-position: 0 -100px; text-decoration: none; } #nav li.current a:hover, #nav li.current a:focus, #nav li.current a:active { background-position: 0 -200px; } #wrapper { overflow: hidden; } #content { float: right; width: 440px; padding: 0 20px 20px 30px; } #content h1 { margin: 0 -20px 10px -30px; padding: 0 20px 8px 30px; background: url(../img/zs_undrl.gif) 0 100% repeat-x; } #mode { position: relative; list-style: none; margin: -38px 0 21px 387px; padding: 0; width: 54px; height: 17px; background: url(../img/zs_mode.jpg) repeat-x; } #mode li { display: inline; } #mode li.m0 { position: absolute; text-indent: -10001px; background: url(../img/zs_mode.jpg) 0 -17px repeat-x; } #mode li.c1 { width: 33%; } #mode li.c2 { width: 66%; } #mode li.c3 { width: 100%; } #mode li a { overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 0; height: 17px; background: url(../img/zs_mode.jpg) 0 34px repeat-x; text-indent: -10001px; z-index: 10; } #mode li.m1 a { width: 33%; z-index: 13; } #mode li.m2 a { width: 66%; z-index: 12; } #mode li.m3 a { width: 100%; z-index: 11; } #mode li a:hover, #mode li a:focus, #mode li a:active { background-position: 0 -34px; } #dates { list-style: none; margin: 0 0 10px; padding: 0; } #dates li { position: relative; line-height: 22px; } #dates li strong { position: absolute; right: 0; top: 0; font-size: 18px; font-weight: normal; color: #d5d69f; } #dates li.time strong { font-size: 14px; } #dates li.seconds strong { font-size: 30px; height: 30px; line-height: 30px; } #dates li.way_a strong { display: block; position: static; height: 18px; margin: 15px 0; background: url(../img/zs_pro_a.png) 6px 0 no-repeat; } #dates li.way_a strong span { display: block; height: 18px; background: url(../img/zs_pro_a.png) 6px -36px no-repeat; text-indent: -10001px; } #dates li.way_b strong { display: block; position: static; height: 18px; margin: 15px 0; background: url(../img/zs_pro_b.png) 6px 0 no-repeat; } #dates li.way_b strong span { display: block; height: 18px; background: url(../img/zs_pro_b.png) 6px -36px no-repeat; text-indent: -10001px; } #sound { display: block; position: absolute; top: 254px; left: 720px; } #side { float: left; width: 245px; padding: 260px 0 20px; text-align: center; } #footer { overflow: hidden; margin-left: 245px; padding: 10px 20px 5px 30px; background: url(../img/zs_undrl.gif) repeat-x; } #footer div { float: right; margin: 0; } #footer div.first { float: left; } #footer div span { padding: 0 2px; color: #000; } #footer a img { vertical-align: middle; } #footer a.author { margin: 0 2px 0 -23px; } /* ELEMENTS -------------------------------------*/ .hr { padding-top: 30px !important; background: url(../img/zs_hr.jpg) 50% 0 no-repeat; } /* HOME */ ul.news { list-style: none; margin: 0 0 15px; padding: 0 0 0 20px; } ul.news li { position: relative; padding: 2px 5px 2px 85px; background: url(../img/zs_clock.png) 0 6px no-repeat; } ul.news li a { color: #b94; text-decoration: none; } ul.news li a span { position: absolute; left: 20px; color: #555; font-size: 10px; } ul.news li a:hover { color: #b94; text-decoration: underline; } ul.news li a:hover span { color: #555; text-decoration: none; } /* NEWS */ p.news_date { margin: 30px 0 15px; padding: 5px 0 0; border-top: 1px solid #222; font-size: 11px; } p.news_date strong { padding: 0 0 0 2px; font-weight: normal; } /* STARS */ ul.stars { list-style: none; margin: 0 0 15px; padding: 0; } ul.stars li { padding: 0 0 0 35px; background: url(../img/zs_star.gif) 20px 50% no-repeat; line-height: 20px; } /* CLOCK FORM */ #x_form { display: block; position: relative; } #form-ad { position: absolute; width: 125px; height: 240px; right: 25px; top: 120px; z-index: 10; } #x_form ol { list-style: none; margin: 0 0 15px; padding: 0; } #x_form ol li { overflow: hidden; padding: 7px 0; } #x_form > ol li.name input, #x_form > ol li.sizes input, #x_form > ol li.date select { background: #1b1109; border: 1px solid #2f2925; color: #827554; padding: 2px; } #x_form > ol li.name input:focus, #x_form > ol li.sizes input:focus, #x_form > ol li.date select:focus { border: 1px solid #625e5b; } #x_form ol li.name label { float: left; width: 150px; } #x_form ol li.name input { width: 260px; line-height: 11px; } #x_form ol li.date { margin-top: -4px; padding-top: 0; padding-bottom: 12px; } #x_form ol li.date span.label { float: left; width: 150px; padding-top: 18px; font-style: normal; } #x_form ol li.date span { float: left; } #x_form ol li.date span label { display: block; float: none; width: auto; padding: 0 20px 0 0; color: #333; font-size: 9px; text-align: center; } #x_form ol li.ticks { position: relative; padding-left: 153px; padding-bottom: 0; } #x_form ol li.ticks span { position: absolute; left: 0; } #x_form ol li.ticks label { float: none; display: block; margin: 0 0 10px; } #x_form ol li.ticks label input { vertical-align: -3px; margin: 0 10px 0 0; } #x_form ol li.sizes { padding-bottom: 15px; } #x_form ol li.sizes label { float: left; width: 150px; } #x_form ol li.sizes input { width: 30px; margin: 0 5px 0 0; } #x_form ol li.subsize { margin-top: -13px; } #x_form ol li.subsize label { color: #827554; } #x_form ol li.check { margin-top: 10px; padding-top: 20px; padding-left: 150px; } #x_form ol li.check input { width: 88px; height: 21px; border: none; background: url(../img/zs_btn_a.jpg) no-repeat; color: #c4b48a; line-height: 21px; text-align: center; cursor: pointer; } #x_form ol li.error { padding: 10px 0 10px 63px; background: url(../img/zs_error.png) 40px 45% no-repeat; color: #a11; font-weight: bold; } #symbols { text-align: center; } #symbols strong { padding: 0 5px; font-size: 14px; text-transform: uppercase; } /* SHOUTBOX */ #shoutbox { margin: 0 0 15px; padding: 0; } #shoutbox dt { color: #bb9944; } #shoutbox dt em { color: #555; font-style: normal; font-size: 10px; } #shoutbox dd { margin: 0 0 3px; font-size: 10px; line-height: 15px; } /* GADGETS */ ul.gadget { list-style: none; position: relative; margin: 20px 0; padding: 0 0 0 150px; } ul.gadget li.img { position: absolute; left: 7px; top: 2px; } ul.gadget li { } ul.gadget li.info { margin: 5px 0 0 -150px; } ul.gadget li strong { color: #b94; } ul.gadget li span { padding: 0 3px; color: #333; } /* HELP */ dl.faq { } dl.faq dt { margin: 0; padding: 0; color: #b94; font-weight: bold; } dl.faq dd { margin: 0 0 10px; padding: 0; } /* CONTACT FORM */ #x_contact { display: block; } #x_contact ol { list-style: none; margin: 0 0 15px; padding: 0; } #x_contact ol li { overflow: hidden; padding: 5px 0; } #x_contact ol li.submit { padding-top: 20px; padding-left: 130px; } #x_contact ol li label { float: left; width: 130px; padding: 2px 0 0; } #x_contact ol li input { width: 220px; background: #1b1109; border: 1px solid #2f2925; color: #827554; padding: 2px; } #x_contact ol li.subject input { width: 300px; } #x_contact ol li.ip input { width: 120px; background: none; border: none; } #x_contact ol li.submit input { width: 88px; padding: 0; height: 21px; border: none; background: url(../img/zs_btn_a.jpg) no-repeat; color: #c4b48a; line-height: 21px; text-align: center; } #x_contact ol li textarea { overflow: auto; width: 300px; height: 100px; background: #1b1109; border: 1px solid #2f2925; color: #827554; padding: 2px; } #x_contact ol li input:focus, #x_contact ol li textarea:focus { border: 1px solid #625e5b; } #x_contact ol li.error { margin: 25px 0 0; padding: 0 0 0 53px; background: url(../img/zs_error.png) 30px 45% no-repeat; color: #a11; font-weight: bold; } /* ADS */ .ad_subclock { position: relative; height: 80px; } .ad_subclock a, .ad_subclock object { position: absolute; left: -14px; top: 0; } .ad_subclock span { display: block; width: 100%; position: absolute; top: 60px; text-align: center; } .ad_subclock span a { position: static; color: #222; font-size: 9px; } .ad_subclock span a:hover { text-decoration: none; color: #888; } .ad_content_a { position: relative; height: 70px; } .ad_content_a span { position: absolute; left: -4px; } /* LINKS */ dl.links { } dl.links dt { margin: 0; padding: 0 0 0 20px; background: url(../img/zs_arrow.gif) 0 50% no-repeat; } dl.links dd { margin: -2px 0 3px; padding: 0 0 0 20px; font-size: 10px; } /* SEND CLOCK */ #sendclock { margin: 0 0 30px; } #sendclock #x_email { width: 143px; margin: 0 5px; padding: 3px 23px 3px 10px; background: #1b1109 url(../img/zs_mail.gif) 155px 50% no-repeat; border: 1px solid #2f2925; -moz-border-radius: 5px; color: #827554; font: 9px Tahoma,sans-serif; } input.submit { width: 118px; height: 20px; padding: 0; border: none; background: url(../img/zs_btn_b.jpg) no-repeat; color: #c4b48a; font-size: 10px; text-align: center; cursor: pointer; } /* SOCIAL BOOKMARKS */ #social-bookmarks { margin: 0 0 20px; } #social-bookmarks h2 { margin: 0 0 5px; color: #4c3d15; font: 9px Tahoma,sans-serif; text-transform: lowercase; } #social-bookmarks:hover h2 { color: #a18d57; } #social-bookmarks ul { list-style: none; margin: 0 0 15px; padding: 0; } #social-bookmarks li { display: inline; padding: 0 3px; } #social-bookmarks li img { opacity: 0.5; } #social-bookmarks li img:hover { opacity: 1; } /* OTHER */ div.featured { margin: 0 0 15px; padding: 7px 5px; border: 1px solid #272727; } div.featured h2 { margin: 0 0 1px; color: #b94; font-size: 18px; font-weight: normal; text-transform: uppercase; } div.featured h2 a { color: #b94; } div.featured h2 a:hover { color: #b94; } div.featured p { margin: 0; font-size: 10px; } div.featured p a { color: #c4b48a; } div.featured p a:hover { color: #c4b48a; } .textlink { margin: 0 0 15px; padding: 0 0 3px; border: 1px solid #373226; } .textlink p { color: #c4b48a; font: bold 20px Georgia,sans-serif; letter-spacing: -1px; text-align: center; } .textlink p.label { margin: -6px 0 6px; font: normal 10px Tahoma,sans-serif; letter-spacing: 0; text-transform: uppercase; } .textlink p span { padding: 0 10px; background: #000; } .textlink p a { display: block; color: #967e42; } .textlink p a:hover { color: #c3ac73; text-decoration: none; }