/* css Zen Garden default style - 'Tranquille' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: May 7th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* The Zen Garden default was the first I put together, and almost didn't make the cut. I briefly flirted with using 'Salmon Cream Cheese' as the main style for the Garden, but switched back to this one before launch. All graphics in this design were illustrated by me in Photoshop. Google Image Search provided inspiration for some of the elements. I did a bit of research on Kanji to come up with the characters on the top left. Anyone who can read that will most likely tell you it makes no sense, but the best I could do was putting together the characters for 'beginning' 'complete' and 'skill' to roughly say something like 'we're breaking fresh ground.' It's a stretch. */ /* basic elements */ html { margin: 0; padding: 0; } body { font: 75% georgia, sans-serif; line-height: 1.88889; color: #555753; background: #fff url(/001/blossoms.jpg) no-repeat bottom right; margin: 0; padding: 0; } p { margin-top: 0; text-align: justify; } h3 { font: italic normal 1.4em georgia, sans-serif; letter-spacing: 1px; margin-bottom: 0; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; } a:visited { font-weight: bold; text-decoration: none; color: #D4CDDC; } a:hover, a:active { text-decoration: underline; color: #9685BA; } acronym { border-bottom: none; } /* specific divs */ #container { background: url(/001/zen-bg.jpg) no-repeat top left; padding: 0 175px 0 110px; margin: 0; position: relative; } #intro { min-width: 470px; width: 100%; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(/001/h1.gif) no-repeat top left; margin-top: 10px; display: block; width: 219px; height: 87px; float: left; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(/001/h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right; } #pageHeader h2 span { display:none } #pageHeader { padding-top: 20px; height: 87px; } #quickSummary { clear: both; margin: 20px 20px 20px 10px; width: 160px; float: left; } #quickSummary p { font: italic 1.1em/2.2 georgia; text-align: center; } #preamble { clear: right; padding: 0px 10px 0 10px; } #supportingText { padding-left: 10px; margin-bottom: 40px; } #footer { text-align: center; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList { margin-left: 600px; position: absolute; top: 0; right: 0; } #linkList2 { font: 10px verdana, sans-serif; background: transparent url(/001/paper-bg.jpg) top left repeat-y; padding: 10px; margin-top: 150px; width: 130px; } #linkList h3.select { background: transparent url(/001/h3.gif) no-repeat top left; margin: 10px 0 5px 0; width: 97px; height: 16px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(/001/h4.gif) no-repeat top left; margin: 25px 0 5px 0; width: 60px; height: 18px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(/001/h5.gif) no-repeat top left; margin: 25px 0 5px 0; width:57px; height: 14px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(/001/h6.gif) no-repeat top left; margin: 25px 0 5px 0; width:63px; height: 10px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0; padding: 0; } #linkList li { line-height: 1.3em; background: transparent url(/001/cr1.gif) no-repeat top center; display: block; padding-top: 5px; margin-bottom: 5px; list-style-type: none; } #linkList li a:link { color: #988F5E; } #linkList li a:visited { color: #B3AE94; } #extraDiv1 { background: transparent url(/001/cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0; width: 148px; height: 110px; } .accesskey { text-decoration: underline; }/* css Zen Garden submission 002 - 'Salmon Cream Cheese' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: May 7th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* If you're familiar with the life cycle of salmon, you'll know that at the end of their lives they fight their way upstream to the rivers where they were born, to spawn and then die. Growing up close to one of these so-called 'salmon runs', I once had a class field trip to the river for the afternoon to learn about the process. The funny thing about a bunch of dead salmon is that they stink. Quite bad. The second worst memory of that day was the smell of the fish. The worst memory of the day was opening my lunch to find my considerate mother had packed bagels. With, as you have guessed by now, salmon cream cheese. I rarely hear the word 'salmon' anymore without the 'cream cheese' playing in my head as an afterthought. Hence, this style is Salmon Cream Cheese. */ /* basic elements */ body { font: 11px/14px verdana, sans-serif; color: #AD7C77; background: #FFD7C4 url(/002/bg1.gif) top left repeat-x; padding: 65px 0px 0px 224px; margin: 0px; } p { font: 11px/14px verdana, sans-serif; text-align: justify; margin-top: 0px; } h3 { font: bold 16px 'arial narrow', sans-serif; text-transform: lowercase; margin-bottom: 0px; } acronym { border-bottom: dotted 1px #B27F66; } a:link { font-weight: bold; text-decoration: none; color: #E98376; } a:visited { font-weight: bold; text-decoration: none; color: #AD7C77; } a:active, a:hover { text-decoration: underline; } /* specific divs */ /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader { position: absolute; top: 0px; left: 0px; width: 770px; } #pageHeader h1 { background: transparent url(/002/h1.gif) no-repeat top left; width: 258px; height: 61px; float: left; margin: 1px 0px 0px 3px; } #pageHeader h1 span { display: none; } #pageHeader h2 { background: transparent url(/002/h2.gif) no-repeat top left; width: 206px; height: 28px; float: right; margin: 22px 15px 0px 0px; } #pageHeader h2 span { display: none; } /* sets up our floating area on the right. Kind of a hack, since there's a physical separation between two divs, filled in by tricky margins and compensated for with tricky padding, but it seems to hold up okay. */ #intro { background: #FFC5A9 url(/002/bg2.gif) top left repeat-x; } #preamble { padding: 0px 40px 0px 40px; } #preamble .p3 { margin-bottom: 0px; } #supportingText { background-color: #FFC5A9; margin: 0px; padding: 0px 40px 0px 40px; } #supportingText #explanation h3 { margin-top: 0px; padding-top: 20px; } #quickSummary { padding-top: 47px; } #quickSummary .p1 { width: 430px; height: 195px; background: transparent url(/002/splash.jpg) top left no-repeat; padding: 182px 0px 0px 10px; position: absolute; top: 93px; left: 244px; } #quickSummary .p1 span { display: none; } #quickSummary .p2 { font-size: 9px; line-height: 22px; text-align: left; color: #B27F66; background-color: #FFD7C4; display: block; border: solid 1px #FFBEA1; padding: 40px 15px 0px 419px; margin: 0px 10px 0px 40px; height: 140px; } #quickSummary .p2 a:link { color: #B27F66; } #footer { text-align: right; border-top: solid 1px #FFCDB5; padding-top: 10px; } #footer a:link, #footer a:visited { padding: 2px 6px 2px 6px; } #footer a:hover { background-color: #FFD7BF; text-decoration: none; } #linkList { background: transparent url(/002/cr1.gif) bottom right no-repeat; padding-bottom: 76px; position: absolute; top: 65px; left: 0px; } #linkList2 { padding: 40px 0px 10px 0px; width: 200px; } #linkList2 h3 span { display: none; } #linkList2 h3.select { background: transparent url(/002/h3.gif) no-repeat top left; width: 195px; height: 21px; } #linkList2 h3.favorites{ background: transparent url(/002/h4.gif) no-repeat top left; width: 195px; height: 21px; } #linkList2 h3.archives{ background: transparent url(/002/h5.gif) no-repeat top left; width: 195px; height: 21px; } #linkList2 h3.resources{ background: transparent url(/002/h6.gif) no-repeat top left; width: 195px; height: 21px; } #linkList .iL, #linkList li { font-size: 10px; line-height: 2.5ex; display: block; padding: 2px 0px 0px 25px; margin-bottom: 5px; } #linkList #lresources li { margin-bottom: 0px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; } /* css Zen Garden submission 003 - 'Stormweather' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: May 7th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Credit to Phillipe Wittenbergh at http://www.l-c-n.com/ for Mac testing */ /* The photos in this design come from my digital library. All were taken in Vancouver, BC. The car is on the Granville St. Bridge, the leaves are West 6th Ave, and the snow/tree is West 10th Ave. Guess which part of town I live in... I'm still rather fond of this design. I'm glad Phillipe was able to iron out the various CSS bugs */ /* basic elements */ body { font: 11px/15px georgia, serif; text-align: center; color: #fff; background: #748A9B url(bg2.gif) 0 0 repeat-y; margin: 0px; } p { /*font: 11px/15px georgia, serif;*/ text-align: justify; margin-top: 0; } h3 { font: bold 14px georgia, serif; text-transform: lowercase; margin-bottom: 0; } acronym { border-bottom: dotted 1px #fff; } a:link { font-weight: bold; text-decoration: underline; color: #A7D3F6; } a:visited { font-weight: bold; text-decoration: underline; color: #D1E9FC; } a:active, a:hover { text-decoration: underline; color: #fff; } /* specific divs */ #container { background: #849AA9 url(bg1.gif) top left repeat-y; text-align: left; width: 750px; margin: 0px auto; position: relative; } #supportingText { /*position: relative; top: -120px;*/ padding: 0px 40px 0px 0; /*clear:right;*/ float:right; width:430px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(h1.jpg) no-repeat top left; width: 750px; height: 152px; margin: 0px; } #pageHeader h1 span { display: none; } #pageHeader h2 span { display: none; } #quickSummary { width: 685px; margin: 0px auto; position: relative; top: -50px; } html>body #quickSummary { margin-top:-50px; top: 0; } #quickSummary .p1 { font-size: 1px; color: white; background: transparent url(panel1-2.jpg) no-repeat top left; width: 449px; padding: 10px 0px 0px 5px; float: left; height: 268px; voice-family: "\"}\""; voice-family:inherit; height: 258px; } #quickSummary .p1 span { display: none; } #quickSummary .p2 { color: #7593A7; background: transparent url(panel3.jpg) no-repeat 0 0; padding: 90px 45px 0px 45px; float: right; width: 214px; height: 338px; voice-family: "\"}\""; voice-family:inherit; width: 124px; height: 178px; } #quickSummary .p2 span { letter-spacing: -1px; line-height: 26px; display: block; } #quickSummary .p2 a:link, #quickSummary .p2 a:visited { color: #7593A7; } #quickSummary .p2 a:hover { color: #85ABC5; } #preamble { /*position: relative; top: -120px; */ padding: 0px 0px 70px 33px; margin: 0px 0 20px 0px; width: 210px; float: left; background: transparent url(tag.gif) 50% 100% no-repeat; } #preamble h2 { font: bold 14px georgia, serif; margin-top: 0px; padding: 0px; } #preamble p { font: italic 12px/20px georgia, serif; } #footer { text-align: right; clear: both; } #footer a { font-weight: normal; text-decoration: none; margin-right: 10px; border: solid 1px #859BAA; padding: 6px; } #footer a:hover { color: #7E868D; background-color: #fff; border-right: solid 1px #6F818D; border-bottom: solid 1px #6F818D; } #lselect { position: absolute; top: 15px; left: 0px; padding-left: 350px; margin: 0px auto; width: 730px; voice-family: "\"}\""; voice-family:inherit; width: 380px; } #linkList h3 { display: inline; margin-right: 5px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { font-size: 10px; margin-right: 5px; list-style-type: none; display: inline; } #linkList li a { font-weight: normal; } #lselect h3 { font: bold 11px georgia; letter-spacing: -1px; } #lselect li { font: 11px/12px georgia; letter-spacing: -1px; color: #758C9B; } #lselect li a:link, #lselect li a:visited { font-weight: normal; color: #fff; text-decoration: none; } #lselect li a:hover { color: #D1E9FC; text-decoration: underline; } #lresources, #larchives, #lfavorites { padding: 0px 40px 0px 266px; clear: both; /*position: relative; top: -20px;*/ }/* css Zen Garden submission 004 - 'arch4.20' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: May 7th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* The photo was taken inside the Vancouver Public Library. It has been mentioned the colours have a vaguely MetaFilter-like feel. I suppose they do... Unintentional. */ /* basic elements */ body { font: 11px tahoma, verdana, sans-serif; color: #fff; background: #005D87 url(bg1.gif) top left repeat-x; margin: 0px; } p { font: 11px/14px verdana, sans-serif; text-align: justify; margin-top: 0px; } h3 { font: bold 13px verdana, sans-serif; margin-bottom: 0px; } acronym { border-bottom: dotted 1px #fff; } a:link { font-weight: bold; text-decoration: none; color: #8AF44F; } a:visited { font-weight: bold; text-decoration: none; color: #55AB26; } a:active, a:hover { color: #8AF44F; text-decoration: underline; } /* specific divs */ #preamble { padding: 0px 180px 0px 25px; } #supportingText { padding: 0px 180px 0px 25px; } #pageHeader { width: 100%; height: 217px; background: #fff url(cr1.jpg) top left no-repeat; margin-top: 47px; } #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; width: 296px; height: 46px; position: absolute; top: 185px; right: 10px; } #pageHeader h1 span { display: none; } #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; width: 229px; height: 16px; position: absolute; top: 230px; right: 12px; } #pageHeader h2 span { display: none; } #quickSummary .p1 { font: 11px tahoma, verdana, sans-serif; line-height: 18px; color: #7799AC; background-color: #fff; padding: 2px; position: absolute; top: 65px; right: 10px; width: 150px; } #quickSummary .p2 { font: 10px tahoma, verdana, sans-serif; color: #7799AC; position: absolute; top: 32px; right: 5px; } #quickSummary .p2 a:link, #quickSummary .p2 a:visited { color: #7799AC; text-decoration: underline; } #quickSummary .p2 a:active, #quickSummary .p2 a:hover { color: #8AF44F; } #linkList{ font: 11px tahoma, verdana, sans-serif; line-height: 18px; color: #7799AC; position: absolute; top: 285px; right: 0px; width: 150px; } #linkList2 h3 span { display: none; } #linkList2 h3.select { background: transparent url(h3.gif) no-repeat top left; width: 157px; height: 14px; } #linkList2 h3.favorites{ background: transparent url(h5.gif) no-repeat top left; width: 157px; height: 14px; } #linkList2 h3.archives{ background: transparent url(h6.gif) no-repeat top left; width: 157px; height: 14px; } #linkList2 h3.resources{ background: transparent url(h4.gif) no-repeat top left; width: 157px; height: 14px; } #linkList li { font-size: 10px; line-height: 2.5ex; display: block; padding: 2px 10px 0px 0px; margin-bottom: 5px; } #linkList #lresources li { margin-bottom: 0px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; } #footer { text-align: right; border-top: solid 1px #1E5E82; padding-top: 10px; } #footer a:link, #footer a:visited { padding: 2px 6px 2px 6px; } #footer a:hover { background: transparent url(bg2.gif) top left repeat-x; text-decoration: none; }/* css Zen Garden submission 005 - 'Blood Lust' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: May 7th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* love it or hate it. This one is one of my favourites because I don't generally design this way. It reaches into the past for a vaguely Futurist style, complete with duotone for that screenprint feel, combined with modern GIF patterned-dithering to really mess with tradition. You may find it challenging, silly, visually stimulating, or a mess. I didn't do it for you, I did it for me. */ /* basic elements */ body { font: 12px/13px courier, monospace; color: #000; background-color: #fff; margin: 0px; } p { font: 12px/13px courier, monospace; text-align: justify; } h3 { font:bold 14px courier, monospace; letter-spacing: 1px; margin-bottom: 0px; color: #000; } a:link { font-weight: bold; text-decoration: underline; color: #FF4F3E; } a:visited { font-weight: bold; text-decoration: underline; color: #FF4F3E; } a:hover, a:active { text-decoration: underline; color: #000; } acronym { border-bottom: none; } /* specific divs */ #container { background: #fff url(bloodlust.gif) no-repeat top left; margin: 50px 0px 0px 0px; padding: 150px 0px 0px 200px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 461px; height: 116px; position: absolute; top: 20px; left: 305px; } #pageHeader h1 span { display: none; } #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; width: 253px; height: 34px; position: absolute; top: 150px; left: 216px; } #pageHeader h2 span { display: none; } #quickSummary .p1 { font: 400 18px/16px 'arial black', sans-serif; text-align: right; width: 340px; float: left; margin: 40px 20px 20px 0px; } #quickSummary .p2 { font: 9px verdana, sans-serif; text-align: left; line-height: 24px; width: 295px; position: absolute; top: 20px; left: 25px; } #preamble { width: 170px; float: right; margin-top: 50px; clear: left; position: relative; top: -270px; } #preamble h3 { font: bold 12pt/10pt 'trebuchet ms', sans-serif; text-align: right; } #preamble p { font: bold 10pt/11pt arial, sans-serif; text-align: right; } #supportingText { clear: left; } #explanation h3 { font: bold 18px courier, monospace; } #explanation .p1 { font: 18px courier, monospace; line-height: 5ex; } #explanation .p2 { font: 11px/16px courier, monospace; width: 220px; float: left; margin-right: 10px; } #explanation .p3 { font: 14px/14px courier, monospace; margin-top: 30px; } #participation h3 { background: transparent url(h3.gif) no-repeat top left; width: 174px; height: 66px; margin: 0px; float: left; } #participation h3 span { display: none; } #participation .p1:first-line { font: 16px 'arial black', sans-serif; } #participation .p2 { line-height: 16px; text-align: right; float: left; width: 200px; margin: 0px 5px 15px 0px; } #participation .p3 { font-family: arial, sans-serif; } #benefits h3 { background: transparent url(h4.gif) no-repeat top left; width: 107px; height: 26px; margin: 0px; float: left; } #benefits h3 span { display: none; } #requirements h3 { font: bold 18px 'arial black', sans-serif; clear: left; float: right; } #requirements .p1 { font: bold 11px/16px trebuchet ms, sans-serif; float: left; width: 300px; margin-right: 10px; } #requirements .p3 { font: 12px/11px arial, sans-serif; } #linkList { position: absolute; top: 0px; left: 20px; } #linkList2 { font: 12px courier, monospace; padding: 10px; margin-top: 115px; width: 130px; } #linkList li { line-height: 2.5ex; display: block; padding-top: 5px; margin-bottom: 5px; list-style-type: none; } #linkList ul { margin: 0px; padding: 0px; }/* css Zen Garden submission 006 - 'Wicked Grove' by D. Keith Robinson, http://www.7nights.com/asterisk/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, D. Keith Robinson */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { font: 10pt/14pt "Trebuchet MS", sans-serif; color: #000033; background: #69f; margin: 0px; } p { font: 10pt/16pt "Trebuchet MS", sans-serif; margin-top: 0px; text-align: justify; } h3 { font: bold normal 12pt "Trebuchet MS", sans-serif; letter-spacing: 3px; margin-bottom: 2px; color: #333333; text-align: left; } a:link { font-weight: bold; text-decoration: none; color: #FF6600; } a:visited { font-weight: bold; text-decoration: none; color: #CC0000; } a:hover, a:active { text-decoration: underline; color: #FF6600; } /* specific divs */ #container { background: #9cf url(trees.jpg) no-repeat left top; padding: 200px 0px 0px 0px; margin: 0px auto; width:800px; border-left: 2px dashed #fff; border-right: 2px dashed #fff; } #pageHeader { margin-bottom: 10px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent; margin-top: -180px; width: 500px; height: 87px; float: left; color:#fff; } #pageHeader h1 span { display:none; } #pageHeader h2 { background: transparent url(tag.gif) no-repeat top left; width: 300px; margin-top:-60px; margin-left:-190px; height: 100px; float: right; } #pageHeader h2 span { display:none; } #quickSummary { width: 130px; float: left; padding:5px; margin-right:15px; background:#0099FF; } #quickSummary p { font: bold 8pt/12pt verdana, sans-serif; text-align:right; color:#fff; } #quickSummary a:link { font-weight: bold; text-decoration: none; color: #003; } #quickSummary a:visited { font-weight: bold; text-decoration: none; color: #006; } #quickSummary a:hover, #quickSummary a:active { text-decoration: underline; color: #FF6600; } #preamble, #supporting text, #explanation, #participation, #benefits, #requirements { padding: 0px 170px 0px 30px; } #footer { text-align: center; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList { background: transparent url(menu.gif) top left no-repeat; position: absolute; top: 0px; padding: 15px; margin-top: 200px; margin-left: 650px; width: 130px; } #linkList2 { font: 10px verdana, sans-serif; padding-top:35px; } #linkList h3.select { background: transparent url(select.gif) top left no-repeat; width: 130px; height: 25px; margin-left:-8px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(favorites.gif) top left no-repeat; width: 130px; height: 25px; margin-left:-8px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.gif) top left no-repeat; width: 130px; height: 25px; margin-left:-8px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.gif) top left no-repeat; width: 130px; height: 25px; margin-left:-8px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; background: transparent; display: block; padding-top: 5px; margin-bottom: 5px; list-style-type: none; } #linkList li a:link { color: #FF3300; } #linkList li a:visited { color: #FF0000; } #extraDiv1 { background: transparent; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; } /* css Zen Garden submission 007 - 'deep thought' by Jason Estes, http://www.bewb.org/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jason Estes */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body#css-zen-garden { background-color:#424242; font-size:75%; font-family:arial, verdana, sans-serif; margin:0; padding:0; color:#fff; background-image:url(background.jpg); background-repeat:no-repeat; background-position:150px 50px; } a:link { color:#FF9638; background-color:transparent; } a:visited { color:#FF9638; background-color:transparent; } a:hover, a:active { color:#FF9638; background-color:transparent; } /* specific divs */ /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { margin:10px 15px; background-image:url(logo.gif); height:83px; background-color:transparent; width:480px; background-repeat:no-repeat; background-position:top right; color:#000; } #pageHeader h1 span { display:none } #pageHeader h2 { display:none; } #pageHeader h2 span { display:none; } #quickSummary { display:block; } #quickSummary .p1 { display:none; } #quickSummary .p2 { position:absolute; top:0px; left:300px; padding:0;margin:0; } #preamble { border-top:1px solid #fff; background-image:url(halfscreen-gray.gif); width:250px; margin-left:30px; position:absolute; top:18px; right:10px; } #preamble p{ margin:10px; } #preamble h3{ font-style:oblique; margin:10px; } #supportingText { margin:350px auto 0 auto; width:90%; } #supportingText div { /*background-image:url(halfscreen-gray.gif);*/ border-top:1px solid #fff; clear:both; } #supportingText h3 span{ display:none; } #supportingText p { padding:5px 10px; line-height:150%; } #explanation h3{ Float:left; background-image:url(about.gif); width:46px; height:234px; padding:0; margin:0 10px 0px 0px; border-right:1px solid white; } #explanation p{ margin:0px 0px 0px 43px; } #supportingText div#explanation { margin:20px 10px 0 200px; background:url(about_background.gif) no-repeat 100% 100%; min-height:234px; height:234px; clear:none; } #supportingText #explanation[id] { height:auto; } #participation h3{ Float:right; background-image:url(participation.gif); width:46px; height:234px; padding:0; margin:0 0px 0px 10px; border-left:1px solid white; } #supportingText #participation { margin:20px 200px 0 10px; min-height:234px; height:234px; background:url(participation_back.gif) no-repeat 0 100%; } #participation p{ margin:0px 43px 0px 0px; } #supportingText #participation[id] { height:auto; } #benefits h3{ Float:left; background-image:url(benefits.gif); width:46px; height:133px; padding:0; margin:0 10px 0px 0px; border-right:1px solid white; } #benefits p{ margin:0px 0px 0px 43px; } #supportingText #benefits { margin:20px 10px 0 200px; min-height:133px; height:133px; background:url(benefits_back.gif) no-repeat 100% 100%; } #supportingText #benefits[id] { height:auto; } #requirements h3{ Float:right; background-image:url(Requirements.gif); width:46px; height:234px; padding:0; margin:0 0px 0px 10px; border-left:1px solid white; } #requirements p{ margin:0px 43px 0px 0px; } #supportingText #requirements { margin:20px 200px 30px 10px; min-height:234px; height:234px ; background:url(requirements_back.gif) no-repeat 0 100%; } #supportingText #requirements[id] { height:auto; } #supportingText #footer { text-align:center; padding-top:3px; } #footer a:link, #footer a:visited { font-weight:bold; text-decoration:none; } #linkList { position:absolute; top:98px; left:30px; width:198px; } #linkList h3.select { height:53px; background-image:url(select.gif); margin:0px; padding:0px; } #linkList h3.select span { display:none } #linkList h3.favorites { height:53px; background-image:url(favorites.gif); margin:0px; padding:0px; } #linkList h3.favorites span { display:none } #linkList h3.archives { height:53px; background-image:url(archives.gif); margin:0px; padding:0px; } #linkList h3.archives span { display:none } #linkList h3.resources { height:53px; background-image:url(resources.gif); margin:0px; padding:0px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { display:block; background-image:url(halfscreen-gray.gif); padding:3px; margin:1px 0; list-style-type: none; } #linkList li a:link, #linkList li a:visited { color:#fff; background-color:transparent; } #extraDiv1 { clear:both; } acronym { color:#FF9638; background-color:transparent; border:0; cursor:help; }/* css Zen Garden submission 008 - 'RPM' by Bruno Cunha, http://www.kaosboy.net/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* Main image from http://www.karborn.com/FinalV6Old/Series/RPM/RPMImages.htm */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { background-image:url(bg.jpg); background-color:#fff; font-family:arial, sans serif; font-size:11px; line-height:15px; color:#fff; margin:0px; } #container { margin-left:0px; margin-top:0px; padding:0px; width:684px; z-index:1; } #intro { width:275px; position:absolute; left:88px; top:902px; z-index:2; } #supportingText { width:450px; position:absolute; left:411px; top:535px; z-index:2; } #explanation, #participation, #requirements, #benefits, #footer, #quickSummary, #preamble, #lselect, #lfavorites, #lresources, #larchives { padding:7px; margin:5px; border-left:1px solid #aaa; border-top:1px solid #aaa; border-right:1px solid #333; border-bottom:1px solid #333; background-image:url(transparent.gif); } #linkList2 { width:275px; position:absolute; left:88px; top:1244px; z-index:2; } #extraDiv1 { background-image:url(tunami2.jpg); position:absolute; left:0px; top:0px; width:684px; height:1515px; z-index:1; } #pageHeader { display:none; } h3 { font-family:arial, sans serif; color:#fff; font-size:11px; font-weight:bold; margin-top:3px; margin-bottom:0px; } p { margin:6px; } a { color:#e2e2e2; text-decoration:underline; } a:link { color:#e2e2e2; text-decoration:underline; } a:hover { color:#fff; font-weight:bold; text-decoration:underline; } a:visited { color:#e2e2e2; text-decoration:underline; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; display: inline; } /* css Zen Garden submission 009 - 'Dead or Alive' by Michael Pick, http://www.mikepick.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Michael Pick */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { color: #000; background: #fff url(body-bg.png); margin: 0px auto; } p { font: 12px/15px georgia, serif; text-align: justify; margin-top: 0; } a:link { font-weight: bold; text-decoration: none; color: #000; } a:visited { font-weight: bold; text-decoration: none; color: #333; } a:hover, a:active { text-decoration: underline; } /* specific divs */ #container { background: url(frill-bg.png) repeat-x; border-right: 1px solid #333; width: 800px; margin: 0px; } #intro { min-width: 470px; } #pageHeader { width: 280px; float: left; margin-top: 40px; } #pageHeader h1 { background: transparent url(pageheader-bg.png) no-repeat; margin-left: 40px; width: 240px; height: 220px; } #pageHeader h1 span { display:none } #pageHeader h2 span { display:none; } #quickSummary { clear:both; width: 280px; float: left; margin-bottom: 20px; } #quickSummary p { font-family: georgia, times, serif; font-size: 10px; text-transform: uppercase; text-align:center; padding-left: 60px; padding-right: 20px; } #preamble { margin-left: 280px; width: 460px; padding-top: 90px; } #preamble h3 { background: transparent url(preamble.png) no-repeat; width: 460px; height: 70px; } #preamble h3 span { display: none; } #preamble a:link { color: #600; } #preamble p { line-height: 150%; } #supportingText { margin-left: 0px; } #supportingText a:link { color: #600; } #explanation { margin-left: 280px; width: 460px; } #explanation h3 { background: transparent url(sowhat.png) no-repeat; width: 460px; height: 50px; margin-bottom: 20px; } #explanation h3 span { display: none; } #explanation p { line-height: 150%; } #participation { width: 460px; } #participation h3 { background: transparent url(participation.png) no-repeat; width: 460px; height: 50px; margin-bottom: 20px; } #participation h3 span { display: none; } #participation p { line-height: 150%; } #benefits { width: 460px; } #benefits h3 { background: transparent url(benefits.png) no-repeat; width: 460px; height: 50px; margin-bottom: 20px; } #benefits h3 span { display: none; } #benefits p { line-height: 140%; } #requirements { width: 460px; } #requirements h3 { background: transparent url(requirements.png) no-repeat; width: 460px; height: 50px; margin-bottom: 20px; } #requirements h3 span { display: none; } #requirements p { line-height: 140%; } #footer { margin-top: 40px; background: transparent url(footer.png) repeat-x; height: 58px; width: 800px; text-align: center; margin-left: -280px; } #linkList { position: absolute; top: 28em; left: 40px; width: 240px; } #linkList2 { font: 10px georgia, times, serif; text-transform: uppercase; } #linkList h3.select { background: transparent url(select.png) no-repeat top left; margin: 10px 0px 5px 0px; width: 240px; height: 50px; margin-bottom: 10px; } #lselect { padding-bottom: 20px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(favorites.png) no-repeat top left; width: 240px; height: 50px; margin-bottom: 10px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.png) no-repeat top left; width: 240px; height: 50px; margin-bottom: 10px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.png) no-repeat top left; width: 250px; height: 50px; margin-bottom: 10px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; display: block; text-align: center; padding-top: 5px; padding-left: 20px; padding-right: 20px; margin-bottom: 5px; list-style-type: none; } #linkList li a:link { color: #000; } #linkList li a:visited { color: #333; } #extraDiv1 { background: transparent url(certified.png) top left no-repeat; position: absolute; top: 160px; left: 0px; width: 100px; height: 110px; z-index: 0; } /* hidden from IE 5 mac */ @media all { #explanation { margin-left: 280px; } #participation { margin-left: 280px; } #benefits { margin-left: 280px; } #requirements { margin-left: 280px; } #footer { margin-left: 0px; } }/* css Zen Garden submission 010 - 'A Garden Apart' by Dan Cederholm, http://www.simplebits.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dan Cederholm */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font-family: trebuchet ms, verdana, sans-serif; font-size: 12px; line-height: 1.5em; color: #333; background: #cccc99; margin: 0; padding: 0; text-align: center; } p { margin-top: 0px; } h3 { font: bold 140% trebuchet ms; letter-spacing: -1px; margin-bottom: 0; color: #c96; } a:link { text-decoration: none; border-bottom: 1px dotted #369; color: #369; } a:visited { text-decoration: none; border-bottom: 1px dotted #369; color: #369; } a:hover, a:active { text-decoration: none; border-bottom: 1px solid #036; color: #036; } /* ---( specific divs )----------------------------- */ #container { position: relative; background: #FFFBDF url(fade.gif) no-repeat 0 92px; margin: 0 auto 10px auto; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; text-align: left; width: 800px; } #pageHeader { height: 92px; background: url(top.gif) no-repeat top left; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1, #pageHeader h2 span { margin: 0; padding: 0; display: none; } #pageHeader h2 { position: absolute; top: 110px; left: 20px; padding: 0; margin: 0; background: url(tagline.gif) no-repeat top left; width: 528px; height: 74px; } /* ---( quick summary)---------------------------- */ #quickSummary { position: absolute; top: 92px; right: 0; left: auto; z-index: 2; width: 298px; voice-family: "\"}\""; voice-family:inherit; width: 300px; } html>body #quickSummary { width: 300px; } #quickSummary p { margin: 15px 15px 15px 15px; font-style: italic; font-size: 140%; font-family: "trebuchet ms"; font-weight: bold; line-height: 1.5em; color: #444; } #quickSummary p.p2 { font-style: normal; font-weight: normal; font-size: 100%; margin-top: 0; } #preamble { margin: 104px 340px 0px 20px; } #supportingText { padding-left: 20px; margin: 0 350px 40px 0; } #footer { border-top: 1px dotted #CDC4AC; padding-top: 6px; text-align: center; } #footer a:link, #footer a:visited { margin-right: 6px; } /* ---( right side nav)----------------------------- */ #linkList { position: absolute; top: 92px; right: 0; left: auto; width: 300px; padding: 0; border-left: 1px solid #CDC4AC; border-bottom: 1px solid #CDC4AC; background: #E5E0D4 url(zen.gif) no-repeat; z-index: 1; } #linkList2 { margin: 190px 15px 15px 15px; } #linkList h3 { color: #635F57; font-family: trebuchet ms; font-size: 120%; margin: 0 0 6px 0; padding: 0; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { display: block; margin-bottom: 2px; padding-left: 14px; background: url(arrow.gif) no-repeat 0 5px; list-style-type: none; } #linkList li a:link { color: #c96; border-bottom: none; } #linkList li a:visited { color: #c96; border-bottom: none; } #linkList li a:hover { color: #963; } #lselect { padding: 12px 0 12px 0; border-top: 1px dashed #CDC4AC; border-bottom: 1px dashed #CDC4AC; } #lresources { margin-top: 12px; }/* css Zen Garden submission 011 - 'meliorism' by Brett J. Gilbert - www.paragraphic.co.uk */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* 'tree' graphic adapted from 'Bending Tree' by Robert Priseman, used with permission */ /* All other graphics copyright 2003, Brett J. Gilbert */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /*----------------------------------------* ** Global **----------------------------------------*/ body { margin: 0; padding: 0; text-align: center; color: #000; background: #f1f8f3 url(gradSky.jpg) repeat-x; } div,p,h1,h2,h3,ul,li { margin: 0; padding: 0; } h1 span,h2 span,h3 span { display: none; } /*----------------------------------------* ** Layout **----------------------------------------*/ #container { position: relative; width: 760px; margin: 0 auto; text-align: left; } #intro { position: absolute; top: 28px; left: 0; width: 310px; } #supportingText { width: 690px; } #linkList { position: absolute; top: 40px; left: 585px; width: 235px; } /*----------------------------------------* ** Links **----------------------------------------*/ a:link, a:visited { color: #49f; background-color: transparent; text-decoration: none; } a:hover { color: #f00; background-color: transparent; text-decoration: none; } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited { color: #348633; background-color: transparent; } #quickSummary p.p2 a:hover { color: #f00; background-color: transparent; } #footer a:link, #footer a:visited { color: #348633; background-color: transparent; } #footer a:hover { color: #f00; background-color: transparent; } #linkList a.c:link, #linkList a.c:visited { color: #fa5; background-color: transparent; } #linkList a.c:hover { color: #f00; background-color: transparent; } /*----------------------------------------* ** #intro **----------------------------------------*/ #intro { font: italic 11px/150% Georgia, Times, "Times New Roman", serif; color: #888; background-color: transparent; } #pageHeader h1 { margin-left: 4px; background: transparent url(introGarden.gif) no-repeat 0 0; width: 115px; height: 12px; } #pageHeader h2 { margin-top: 80px; background: transparent url(introBeauty.gif) no-repeat 0 0; width: 195px; height: 73px; } #quickSummary p.p1 { margin: 5px 0 55px 4px; color: #fa0; background-color: transparent; line-height: 160%; } #quickSummary p.p2 { margin: 0 150px 0 4px; padding: 5px 25px 5px 10px; background: transparent url(gradGreen.jpg) repeat-y; border-left: 1px solid #a7d9a8; color: #888; line-height: 130%; } #preamble { margin-left: 4px; padding: 20px 0 0 15px; border-left: 1px solid #a7d9a8; } #preamble h3 { background: transparent url(introEnlightenment.gif) no-repeat 0 0; width: 138px; height: 37px; } #preamble p { margin: 10px 140px 0 0; } /*----------------------------------------* ** #supportingText **----------------------------------------*/ #supportingText { padding: 430px 0 40px 0; font: 13px/140% Georgia, Times, "Times New Roman", serif; color: #888; background: transparent url(textBack.jpg) no-repeat 0 40px; } #supportingText p { margin: 0 125px 10px 221px; } #supportingText h3 { margin: 25px 0 6px 220px; width: 206px; height: 21px; } #explanation h3 { background: transparent url(textAbout.gif) no-repeat 0 0; margin-top: 0; } #participation h3 { background: transparent url(textParticipation.gif) no-repeat 0 0; } #benefits h3 { background: transparent url(textBenefits.gif) no-repeat 0 0; } /*----------------------------------------* ** #supportingText > #requirements **----------------------------------------*/ #requirements { margin: 30px 0 0 221px; padding: 0 0 15px 0; border-left: 1px solid #a7d9a8; font: italic 11px/150% Georgia, Times, "Times New Roman", serif; color: #888; background-color: transparent; } #requirements h3 { margin: 0 0 13px 0; background: transparent url(textRequirements.jpg) no-repeat 0 0; width: 175px; height: 25px; } #requirements p { margin: 9px 0 0 15px; } /*----------------------------------------* ** #supportingText > #footer **----------------------------------------*/ #footer { margin: 0 0 0 221px; padding: 4px 0 5px 15px; background: transparent url(gradGreen.jpg) repeat-y; border-left: 1px solid #a7d9a8; font: italic 11px/140% Georgia, Times, "Times New Roman", serif; } /*----------------------------------------* ** #linkList **----------------------------------------*/ #linkList { border-left: 1px solid #8bf; font: italic 11px/130% Georgia, Times, "Times New Roman", serif; color: #999; background: transparent url(linksBack.jpg) no-repeat; } #lselect h3 { background: transparent url(linksSelect.gif) no-repeat 0 0; margin: 240px 0 10px 14px; width: 118px; height: 73px; } div#lselect { margin-bottom: 50px; } #linkList ul { margin-left: 15px; } #linkList li { list-style-type: none; margin-top: 5px; } #lresources h3, #lfavorites h3, #larchives h3 { margin: 25px 0 8px 0; width: 175px; height: 25px; } #lresources h3 { background: transparent url(linksResources.jpg) no-repeat 0 0; } #lfavorites h3 { background: transparent url(linksFavorites.jpg) no-repeat 0 0; } #larchives h3 { background: transparent url(linksArchives.jpg) no-repeat 0 0; } /* css Zen Garden submission 012 - 'TechnOhm' by Joshua Ambrutis - http://www.visualcss.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Joshua Ambrutis */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* I've tried to keep the CSS in the sequence which I built it in... just to give another perspective of how others tackle this, you'll see in some spots I'll define an elements main box just to get it in the right place etc.. then refine it with specifics later in the stylesheet. I'm not saying this is right, just the way I usually go about it. There are also comments thrown in here and there to hopefully explain some of the strangeness */ body { margin: 0px; padding: 0px; background: url(to_pageback.gif) repeat fixed; color: #CCCCCC; font: 76% Arial, Helvetica, sans-serif; text-align: center; } div, p, ul, li, h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; } /* Why do I do that? ...hmm.. since switching from Tables to CSS, I've learned it is easier for MY feeble brain to lay out the design first with just colored boxes THEN paint it in photoshop, this just helps me to get the layout of the elements first. Then I refine theses values with more specifics through IDs and Classes when the graphics call for it, in my case the barebones basic layout comes first with designs in my head BEFORE I open PhotoShop... but that's just me */ h1, h2, h3, h4, h5, h6 { color: #FFAE00; } #container { margin: 0px auto 60px; width: 760px; border-top: 0px solid #000000; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-left: 2px solid #000000; padding: 0px 0px 150px; background: #404040 url(bandwidthkiller.jpg) no-repeat center bottom; text-align: left; position: relative; } #pageHeader h1 { margin-bottom: 12px; background: url(to_header_01.jpg) no-repeat; height: 186px; } #pageHeader h1 span { display: none; } /* Above: That's just for dumping the text allowing the backround image in it's containing element to show through*/ #pageHeader h2 { width: 261px; background: url(to_beauty.gif) no-repeat; position: absolute; height: 17px; top: 2px; right: 5px; cursor: text; /* just goofing off */ } #pageHeader h2 span { display: none; } #pageHeader { position: relative; } #quickSummary { margin: 0px; border: 0px none; padding: 0px; width: 220px; background: url(to_sumarytop_02.jpg) no-repeat; position: absolute; z-index: 1; left: 0px; height: 266px; } #preamble { margin: 10px 0px 30px 235px; width: 510px; border: 2px solid #000000; padding: 10px 0px; background: #60676F url(zen-image.jpg) repeat center top; text-align: center; position: relative; top: 0px; left: 0px; z-index: 3; } #preamble p { padding: 0px 0px 1.3em; margin: 0px auto; width: 320px; color: #F2F2F2; font: bold 1.2em/1em "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing: 0.08em; text-align: left; } #preamble p.p3 { padding-bottom: 0px; } div#preamble h3 { width: 400px; margin: 0px; padding: 0px 0px 0px 34px; background: url(to_h3back_04.gif) no-repeat left top; font-size: 16px; line-height: 24px; text-align: left; position: absolute; top: -24px; z-index: 1; left: -3px; height: 23px; } #supportingText { margin: 0px 0px 0px 235px; width: 510px; padding: 0px; position: relative; } #linkList { margin: 7em 10px 0px 12px; padding: 0px; width: 200px; background: url(ani2.gif) no-repeat; /* this is just here as a preloader for the nav mouseover to kill the delay when it's first hit.. it can't be seen in this position because of an overlaying background image*/ position: absolute; left: 0px; top: 360px; z-index: 2; } #supportingText p { padding: 5px 12px 1em; } #supportingText div { border: 1px solid #000000; padding: 0px; margin: 22px 0px 40px; width: 510px; background: #61605F; position: relative; z-index: 2; } #supportingText h3 { width: 400px; margin: 0px; padding: 0px 0px 0px 34px; background: url(to_h3back_04.gif) no-repeat left top; font-size: 16px; line-height: 24px; position: absolute; top: -24px; z-index: 1; height: 23px; left: -2px; } #intro a { color: #FFCC00; font-weight: bold; text-decoration: none; } #supportingText a { color: #FFAE00; font-weight: bold; text-decoration: none; } #supportingText a:hover { border-bottom: 2px dashed #FFAE00; color: #CCCCCC; } #supportingText a:active { border-bottom: 2px dashed #333333; background: #5A6269; } div#supportingText div#requirements { margin-bottom: 0px; background: #61605F url(bandwidthkiller-alpha.jpg) no-repeat center bottom; } /* the background image above is what gives the transparency effect, it's just a carefully cut out chunk of the #container divs background image with a semi-transparent overlay on it. Oh... I can't wait for true PNG surrport*/ div#supportingText div#footer { width: 200px; border-top: 0px none #000000; border-right: 0px none #000000; border-bottom: 1px solid #000000; border-left: 0px none #000000; padding-top: 36px; padding-bottom: 12px; margin: 0px; background: transparent url(to_footerback_07.gif) no-repeat left top; text-align: center; position: relative; left: -220px; top: -64px; } #quickSummary p { margin: 0px 20px 10px 25px; color: #A3A3A3; font: bolder small-caps 1.1em/1em "Trebuchet MS", Arial, Helvetica, sans-serif; } #quickSummary p.p1 { margin-top: 20px; border: 1px solid #23282C; padding: 10px; color: #FFAE00; } #quickSummary p.p2 { color: #999999; font-weight: normal; text-align: center; } #quickSummary p a { color: #CCCCCC; font-weight: normal; text-decoration: none; } #lselect, #lfavorites, #larchives, #lresources { border: 1px solid #000000; padding: 0px; margin: 0px 0px 60px; background: #60676F; font-size: .9em; position: relative; } #linkList h3 { width: 200px; border-top: 0px #000000; border-right: 1px solid #000000; border-bottom: 0px #000000; border-left: 0px #000000; margin: 0px; padding: 0px; background: url(to_h3back_04.gif) no-repeat left top; font-size: 16px; line-height: 24px; position: absolute; top: -24px; z-index: 1; left: -2px; height: 23px; } #linkList h3 span { margin: 0px; padding: 0px 0px 0px 34px; } /*#linkList span { margin: 0px; padding: 0px; display: block; }*/ div#lselect a.c { margin: 0px 0px -15px; /* seemed to have to do that because of the extra   in each li item */ padding: 0px 15px 0px 0px; display: inline; background-image: none; color: #FFCC00; font-weight: normal; font-variant: normal; font-size: 1em; text-decoration: none; text-transform: capitalize; text-align: center; } /* The following 4 divs all use the same background file... it's larger than it needs to be to allow the text to resize PLUS you can use the background-position to offset it in different divs for the illusion of more than one file without the bandwith loss*/ div#lselect { background: url(to_leftcol_02.jpg) repeat-y -50px -60px; color: #999999; } div#lresources { background: url(to_leftcol_02.jpg) no-repeat -5px -20px; text-align: left; } div#larchives { background: url(to_leftcol_02.jpg) no-repeat -40px -220px; } div#lfavorites { background: url(to_leftcol_02.jpg) no-repeat -60px -20px; } /* Bahaaa! Somebody switched the menus to an unordered list structure, good bye spans! I have to jump back a few steps here and do the lists, I'll try to reorder the css later to make incremental sense */ #linkList ul { list-style: none; text-align: center; } #linkList li { margin: 0px; padding: 6px 0px; } #linkList a { padding-left: 32px; margin-left: 6px; display: block; background: url(ani1.gif) no-repeat left center; color: #BBBBBB; font-weight: bold; font-size: 1.1em; text-transform: uppercase; text-decoration: none; text-align: left; } #linkList a:hover { background: url(ani2.gif) no-repeat left center; color: #EBEBEB; } div#lselect a.c:hover { background: none; color: #CCCCCC; font-style: italic; text-decoration: none; } div#linkList div#lresources a { margin: 0px 0px -10px; padding: 0px; display: inline; background: url(none); text-transform: capitalize; } div#linkList div#lresources ul { margin: 0px; padding-left: 15px; text-align: left; } /* Stupid IE5, almost made it without a hack, but don't have time figure out how to get rid of extra pixels from the border or even if I can without resorting to a hack. By the way, this is called the SBMH short for Simple Box Model Hack, just Google it for more info if you need*/ #linkList h3 { \left: -1px; lef\t: -2px; \width: 201px; w\idth: 200px; } /* css Zen Garden submission 013 - 'Coastal Breeze' by Dave Shea, http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea*/ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* These illustrations were done by hand in Photoshop. No photos harmed in the making of this design. They were put together about two years ago for a former portfolio site, and luckily I still had the .PSD on hand. It felt like a good idea to convert this into a Zen Garden design. It has been said that this particular combination of objects has a west-coast British Columbia feel to it. I'm inclined to agree. */ /* basic elements */ body { font: 8pt/16pt georgia, serif; text-align: center; color: #464128; background: #fff url(coastal2.jpg) bottom center no-repeat; margin: 0px; } p { font: 8pt/16pt georgia, serif; color: #464128; background-color: transparent; margin-top: 0px; text-align: right; } h3 { font: bold 8pt/16pt georgia, serif; text-align: right; margin-bottom: 0px; background: transparent url(futz.gif) center right no-repeat; padding-right: 14px; } a { color: #464128; background-color: transparent; } a:visited { color: #000; background-color: transparent; } a:hover { color: #A29D66; background-color: transparent; } acronym { border-bottom: none; } /* specific elements */ #intro { background: transparent url(coastal.jpg) top left no-repeat; width: 700px; margin-left: auto; margin-right: auto; } #pageHeader { text-align: right; padding: 70px 60px 0px 0px; } #pageHeader h1 { background: transparent url(papier.jpg) top left no-repeat; width: 192px; height: 70px; margin: 0px 0px 0px 448px;; } #pageHeader h1 span { display: none; } #pageHeader h2 { background: transparent url(beauty.gif) top left no-repeat; width: 83px; height: 14px; margin: 0px 90px 0px 477px; position: relative; top: -17px; } #pageHeader h2 span { display: none; } #preamble { position: relative; top: -80px; padding-right: 250px; padding-left: 140px; } #quickSummary { float: right; text-align: left; padding-right: 70px; width: 230px; voice-family: "\"}\""; voice-family: inherit; width: 160px; } /* over-clarified to fix IE5/Win */ #quickSummary p, #quickSummary .p1, #quickSummary .p2 { font: italic 13pt/18pt garamond, serif; text-align: left; color: #A29D66; background-color: transparent; } #supportingText { margin-left: auto; margin-right: auto; padding-right: 250px; padding-left: 140px; position: relative; top: -70px; width: 700px; voice-family: "\"}\""; voice-family: inherit; width: 310px; } #linkList { font: italic 9pt/14pt garamond, georgia, serif; text-transform: lowercase; text-align: left; color: #A29D66; background-color: transparent; position: absolute; top: 33em; /*380px;*/ left: 0px; width: 100%; } #linkList2 { padding-left: 470px; padding-right: 70px; margin-left: auto; margin-right: auto; width: 700px; voice-family: "\"}\""; voice-family: inherit; width: 160px; } #linkList h3 { font: italic 12pt/15pt garamond, georgia, serif; text-transform: capitalize; color: #464128; background-color: transparent; text-align: left; background-image: none; } #linkList a { font: italic 11pt/14pt garamond, georgia, serif; color: #A29D66; background-color: transparent; text-decoration: none; } #linkList a:hover { color: #464128; background-color: transparent; text-decoration: underline; } #linkList a.c { font: italic 9pt/14pt garamond, georgia, serif; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { text-align: left; list-style-type: none; } #linkList h3 { margin-right: auto; margin-left: 0px; margin-top: 25px; } #linkList h3 span { display: none; } #linkList h3.select { width: 113px; height: 19px; background: transparent url(h-select.gif) top left no-repeat; } #linkList h3.archives { width: 134px; height: 17px; background: transparent url(h-archives.gif) top left no-repeat; } #linkList h3.favorites { width: 76px; height: 23px; background: transparent url(h-favorites.gif) top left no-repeat; position: relative; left: -10px; } #linkList h3.resources { width: 125px; height: 13px; background: transparent url(h-resources.gif) top left no-repeat; position: relative; left: -10px; } #footer a { font: italic 11pt/14pt garamond, georgia, serif; color: #A29D66; background-color: transparent; text-decoration: none; padding-left: 15px; } #footer a:hover { color: #464128; background: transparent url(fleurdelis.gif) center left no-repeat; text-decoration: none; border-bottom: dotted 1px #464128; } .accesskey { font-weight: bold; text-decoration: underline; } /* extra bits on the last paragraph in each text block */ #preamble .p3, #explanation .p2, #participation .p3, #benefits .p1, #requirements .p4 { background: transparent url(filler.gif) bottom center no-repeat; padding-bottom: 25px; } #extraDiv1 { text-align: center; position: absolute; top: 0px; left: 0px; width: 100%; } #extraDiv1 span { display: block; width: 600px; height: 82px; margin-left: auto; margin-right: auto; background: transparent url(fleur.gif) top right no-repeat; }/* css Zen Garden submission 014 - 'Samuraai' by Minz Meyer, http://www.minzweb.de/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Minz Meyer */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { background-image: url(background_body.jpg); background-color: #000; color: #D8E0BC; margin-top: 10px; margin-left: 50px; margin-right: 50px; margin-bottom: 10px; padding: 0; font: 12px/1.5 Verdana, sans-serif; } /* Basic styles */ h3 { background-color: #B1AD72; color: inherit; margin-top: 0; border-right: 4px solid #818343; border-bottom: 1px solid #818343; height: 25px; } h3 span { display: none; } div#preamble p.p3 { padding-bottom: 15px; } /* Main div styling */ div#container { background-color: #2F2F13; color: inherit; background-image: url(container_background.jpg); background-position: right; background-repeat: repeat-y; border-left: 1px solid #8F8C4E; border-bottom: 1px solid #8F8C4E; } div#intro { position: relative; overflow: hidden; } div#pageHeader { background-color: #000; color: inherit; background-image: url(umbrella.jpg); background-repeat: no-repeat; border-top: 1px solid #8F8C4E; border-bottom: 1px solid #8F8C4E; border-right: 1px solid #8F8C4E; height: 50px; margin-bottom: 15px; overflow: hidden; } div#pageHeader h1 { margin-top: 0px; margin-bottom: 0px; width: 500px; height: 46px; float: left; } div#pageHeader h1 span { visibility: hidden; } div#pageHeader h2 { background-image: url(beauty_background.gif); background-repeat: no-repeat; margin-top: 5px; margin-left: 0px; width: 348px; height: 39px; float: right; } div#pageHeader h2 span { display: none; } div#quickSummary { position: relative; float:left; width: 150px; margin-top: -10px; padding: 8px; background-color: transparent; color: inherit; } div#quickSummary p { margin-top: 0px; font: italic 14px Verdana, sans-serif; text-align: center; } div#quickSummary p.p2 { font: italic 11px Verdana, sans-serif; } div#preamble { border-bottom: 1px solid #8F8C4E; margin-top: -16px; margin-right: 222px; background-image: url(background-preamble.jpg); background-repeat: no-repeat; background-color: #000; color: inherit; } div#preamble h3 { background-image: url(preamble_h3_background.jpg); background-repeat: no-repeat; margin-top: 0px; margin-left: 170px; } div#preamble p { padding-right: 30px; margin-left: 200px; color: inherit; background-color: transparent; font: 14px/1.6 Verdana, sans-serif; text-align: justify; width: auto; } div#supportingText { margin-top: 0px; } div#explanation, div#participation, div#benefits, div#requirements { margin-right: 222px; margin-bottom: 30px; } div#supportingText p { padding-left: 30px; padding-right: 30px; } div#explanation h3 { background-image: url(explanation_h3_background.jpg); background-repeat: no-repeat; } div#participation h3 { background-image: url(participation_h3_background.jpg); background-repeat: no-repeat; } div#benefits h3 { background-image: url(benefits_h3_background.jpg); background-repeat: no-repeat; } div#requirements h3 { background-image: url(requirements_h3_background.jpg); background-repeat: no-repeat; } div#linkList { position: absolute; top: 62px; right: 50px; width: 220px; background-color: transparent; color: inherit; font: 10px/1.5 Verdana, sans-serif; } div#linkList h3.select { background-color: #2F2F13; background-image: url(select_h3_background.jpg); background-repeat: no-repeat; color: inherit; margin-top: 0; border-right: 4px solid #818343; border-bottom: 1px solid #818343; height: 25px; } div#linkList h3.resources { background-image: url(resource_h3_background.jpg); background-repeat: no-repeat; } div#linkList h3.archives { background-image: url(archives_h3_background.jpg); background-repeat: no-repeat; } div#linkList h3.favorites { background-image: url(favorites_h3_background.jpg); background-repeat: no-repeat; } div#linkList h3 { background-color: #2F2F13; color: inherit; margin-top: 20px; border-right: 4px solid #818343; border-bottom: 1px solid #818343; height: 25px; } span.iL { display: block; padding-left: 20px; padding-right: 20px; margin-bottom: 10px; line-height: 2; } div#linkList ul { list-style: none; } div#linkList li { margin-left: -15px; margin-bottom: 10px; line-height: 1.5; } a:link { color: #9BB574; background-color: transparent; text-decoration: none; font-weight: bold; padding: 2px; border-bottom: 1px solid; line-height: 1.5; } a:visited { color: #C6D2B3; background-color: transparent; text-decoration: line-through; font-weight: bold; padding: 2px; border-bottom: 1px solid; line-height: 1.5; } a:hover, a:focus { color: #D8E2C7; background-color: #828330; text-decoration: none; font-weight: bold; padding: 2px; border-bottom: 1px solid; line-height: 1.5; } div#footer { clear: both; background-color: #000; color: inherit; background-image: url(umbrella2.jpg); background-repeat: no-repeat; background-position: right; border-top: 1px solid #8F8C4E; border-right: 1px solid #8F8C4E; height: 50px; padding-left: 30px; vertical-align: bottom; overflow: hidden; } div#supportingText div#footer a { line-height: 40px; } acronym { border-bottom: none; cursor: help; }/* css Zen Garden submission 015 - 'boddhidarma' by Michael Angeles - http://studioid.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Michael Angeles */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* body and type */ html { background: rgb(93, 105, 40) url(bg_boddhidarma2.gif) no-repeat top left; } /* basic elements */ body { font: 9pt/16pt verdana, helvetica, sans-serif; color: #ffc; margin: 0 0 30px 0; } p { font: 9pt/16pt verdana, helvetica, sans-serif; padding-bottom: 5px; } h3 { font-size: 16pt; letter-spacing: 1px; margin: 0; padding: 0; color: #cc9; } a:link { font-weight: bold; text-decoration: none; color: #fe9201; } a:visited { font-weight: bold; text-decoration: none; color: #fe9201; border: none; } a:hover, a:active { color: #fe9201; } /* layout */ #container { text-align: left; background: url(sig.gif) no-repeat bottom right; } #intro { min-width: 400px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { margin: 10px 0 0 410px; padding: 0 0 0 0; width: 257px; height: 18px; background: transparent url(hd_zengarden.gif) no-repeat 0 0; } #pageHeader h1 span { display:none } #pageHeader h2 { padding: 0; margin: 210px 0 0 410px; width: 289px; height: 70px; background: transparent url(hd_beauty.gif) no-repeat 0 0; } #pageHeader h2 span { display:none; } #quickSummary p.p1 { position: absolute; top: 30px; left: 410px; margin: 0; padding: 0 50px 0 0; font: 14pt/18pt verdana, helvetica, sans-serif; text-transform: lowercase; color: #869152; } #quickSummary p.p2 { position: absolute; top: 850px; left: 0; width: 320px; margin: 0; padding: 15px 20px 15px 20px; text-align: left; font-size: 1.1em; font-weight: bold; background: #677235; } #preamble { margin: 10px 50px 40px 410px; padding: 20px 0 40px 0; border-top: 1px dotted #869152; background: url(koi.gif) no-repeat bottom center; } #preamble h3 { background: url(hd_enlighten.gif) no-repeat 0 0; width: 301px; height: 23px; } #preamble h3 span { display:none; } #supportingText { margin: 0 50px 0 410px; } #explanation { padding-bottom: 40px; background: url(koi.gif) no-repeat bottom center; } #explanation h3 { background: url(hd_about.gif) no-repeat 0 0; width: 302px; height: 19px; } #explanation h3 span { display:none; } #participation { margin-top: 20px; padding-bottom: 40px; background: url(koi.gif) no-repeat bottom center; } #participation h3 { background: transparent url(hd_participation.gif) no-repeat 0 0; width: 140px; height: 23px; } #participation h3 span { display:none; } #benefits { margin-top: 20px; padding-bottom: 40px; background: url(koi.gif) no-repeat bottom center; } #benefits h3 { background: transparent url(hd_benefits.gif) no-repeat 0 0; width: 106px; height: 24px; } #benefits h3 span { display:none; } #requirements { margin-top: 20px; padding-bottom: 40px; } #requirements h3 { background: transparent url(hd_requirements.gif) no-repeat 0 0; width: 155px; height: 23px; } #requirements h3 span { display:none; } #footer { margin-top: 20px; } #footer a:link, #footer a:visited { margin-right: 20px; } /* navigation / links */ #linkList { position: absolute; top: 940px; left: 0; width: 360px; text-align: left; padding: 0; margin: 0; font-size: .9em; } /* linklist WITHOUT favorites */ /* NOTE: keep this linklist CSS if favorites remains hidden */ #lselect { clear: none; float: left; width: 180px; padding: 0 19px 0 20px; margin: 0 0 30px 0; border-right: 1px solid #677235; voice-family: "\"}\""; voice-family: inherit; width: 140px; } html>body #lselect { width: 140px; } #larchives { float: right; width: 180px; padding: 0 0 0 20px; margin: 0 0 30px 0; voice-family: "\"}\""; voice-family: inherit; width: 160px; } html>body #larchives { width: 160px; } #lresources { float: left; width: 170px; padding: 0 0 0 20px; margin: 0 0 30px 0; voice-family: "\"}\""; voice-family: inherit; width: 160px; } html>body #lresources { width: 160px; } /* /end linklist WITHOUT favorites */ /* linklist WITH #lfavorites */ /* NOTE: in case you decide to uncomment #lfavorites div, comment the above link list CSS and uncomment the below #lselect { float: left; width: 150px; padding: 0 19px 0 20px; margin: 0 0 30px 0; border-right: 1px solid #677235; } #lfavorites { float: left; width: 150px; padding: 0 0 0 20px; margin: 0 0 30px 0; } #larchives { float: left; width: 150px; padding: 0 19px 0 20px; margin: 0 0 30px 0; border-right: 1px solid #677235; } #lresources { float: left; width: 150px; padding: 0 0 0 20px; margin: 0 0 30px 0; } end linklist WITH #lfavorites */ #linkList h3.select { background: url(hd_select.gif); margin: 0; width: 96px; height: 12px; border: 0; } #linkList h3.select span { display:none } #linkList h3.favorites { background: url(hd_favorites.gif); margin: 0; width: 58px; height: 10px; border: 0; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: url(hd_archives.gif); margin: 0; width: 53px; height: 10px; border: 0; } #linkList h3.archives span { display:none } #linkList h3.resources { background: url(hd_resources.gif); margin: 0; width: 66px; border: 0; height: 10px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; display: block; padding-top: 2px; margin-bottom: 2px; } #linkList li a:link { text-decoration: none; border: none; } #linkList li a:visited { text-decoration: none; border: none; } #linkList li a.c { text-decoration: none; border: none; } /* extra divs */ #extraDiv1 { margin: 10px 0 0 410px; background: url(sig.gif) no-repeat bottom right; } /* css Zen Garden submission 016 - 'The Garden Beneath' by Minz Meyer - www.minzweb.de */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Minz Meyer */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { background-image: url(deepblue.jpg); background-position: top right; background-color: #172E52; background-repeat: no-repeat; margin-top: 20px; padding: 0px; color: #88A3C9; font: 0.8em/1.6 Tahoma, sans-serif; letter-spacing: 0.1em; } #container { background-color: transparent; background-position: bottom left; background-image: url(manta.jpg); background-repeat: no-repeat; width: 99%; height: 100%; margin: 0; padding: 0; } #pageHeader h1 { background-image: url(zengarden.gif); background-repeat: no-repeat; width: 306px; height: 36px; margin: 0; } #pageHeader h1 span { display: none; } #pageHeader h2 { background-image: url(thebeauty.gif); background-repeat: no-repeat; width: 306px; height: 24px; margin: 0px; } #pageHeader h2 span { display: none; } #pageHeader { position: absolute; right: 28px; top: 195px; width: 306px; } #extraDiv3 { position: absolute; right: 30px; top: 280px; background-image: url(preamble.gif); background-repeat: no-repeat; height: 156px; width: 300px; padding-bottom: 20px; overflow: hidden; } #preamble { margin-right: 420px; margin-left: 25px; padding: 5px; border-top: 1px solid; border-right: 1px solid; } #preamble h3 { width: 190px; height: 190px; margin-top: 0; display: inline; float: left; background-image: url(theroad.jpg); } #preamble h3 span { display: none; } #preamble p { margin-left: 25px; margin-right: 15px; font-style: italic; text-align: justify; } #explanation { margin-left: 10px; margin-top: 30px; margin-bottom: 100px; margin-right: 370px; padding: 5px; border-top: 1px solid; border-left: 1px solid; } #explanation h3 { width: 150px; height: 140px; display: inline; float: left; background-image: url(whatabout.jpg); } #explanation h3 span { display: none; } #explanation p { margin-left: 25px; margin-right: 15px; text-align: justify; } #benefits { margin-left: 150px; margin-top: 30px; margin-bottom: 100px; margin-right: 340px; padding: 5px; border-top: 1px solid; border-left: 1px solid; } #benefits h3 { width: 150px; height: 150px; display: inline; float: right; background-image: url(benefits.jpg); } #benefits h3 span { display: none; } #benefits p { margin-left: 15px; margin-right: 25px; text-align: justify; } #participation { margin-top: 30px; margin-bottom: 110px; margin-left: 50px; margin-right: 335px; padding: 5px; border-top: 1px solid; border-right: 1px solid; } #participation h3 { width: 160px; height: 155px; margin-top: 15px; display: inline; float: left; background-image: url(participate.jpg); background-repeat: no-repeat; } #participation h3 span { display: none; } #participation p { margin-left: 25px; margin-right: 15px; text-align: justify; } #requirements { margin-top: 30px; margin-bottom: 100px; margin-left: 130px; margin-right: 150px; padding: 5px; border-top: 1px solid; border-right: 1px solid; } #requirements h3 { margin-top: 15px; width: 160px; height: 160px; display: inline; float: left; background-image: url(requirements.jpg); background-repeat: no-repeat; } #requirements h3 span { display: none; } #requirements p { margin-left: 25px; margin-right: 15px; text-align: justify; } #supportingText { margin-top: 100px; } #linkList { position: absolute; color: #425162; background-color: transparent; top: 437px; right: 30px; width: 300px; height: 450px; background-image: url(navigation.gif); background-repeat: no-repeat; background-position: right; } #linkList2 { margin-top: 30px; margin-left: 20px; margin-right: 25px; width: 260px; height: 350px; overflow: auto; font: 11px "Courier New", monospace; color: #95A5BB; background-color: transparent; } h3.select { font: bold 12px "Courier New", monospace; border: 1px solid; margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 0; padding-left: 5px; padding-right: 5px; color: #1D2139; background-color: #555764; } h3.archives { font: bold 12px "Courier New", monospace; border: 1px solid; margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 0; padding-left: 5px; padding-right: 5px; color: #1D2139; background-color: #555764; } h3.resources { font: bold 12px "Courier New", monospace; border: 1px solid; margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 0; padding-left: 5px; padding-right: 5px; color: #1D2139; background-color: #555764; } #linkList ul { list-style: none; margin-top: 0; } li { margin-left: -15px; margin-right: 15px; margin-bottom: 0px; } li:hover { margin-left: -15px; margin-right: 15px; background-color: #555764; color: #1D2139; } a:link { color: #C6B768; background-color: transparent; text-decoration: none; } a:visited { color: #867833; background-color: transparent; text-decoration: line-through; } a:hover, a:focus { color: #EBD678; background-color: transparent; text-decoration: underline; } #extraDiv1 { position: absolute; background-image: url(validation.gif); background-repeat: no-repeat; top: 887px; right: 30px; width: 300px; height: 100px; z-index: 1; } * html #footer { width: 260px; w\idth: 228px; } #footer { font: 11px "Courier New", monospace; position: absolute; top: 922px; right: 50px; z-index: 2; padding: 8px 15px; height: 20px; overflow: auto; width: 228px; } #extraDiv2 { position: absolute; background-image: url(download.gif); background-repeat: no-repeat; top: 987px; right: 30px; width: 300px; height: 100px; z-index: 1; } * html #quickSummary { width: 260px; w\idth: 228px; } #quickSummary { width: 228px; position: absolute; top: 1022px; right: 50px; z-index: 2; padding: 0 15px; height: 40px; overflow: auto; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { margin-top: 4px; color: #95A5BB; background-color: transparent; font: 11px "Courier New", monospace; }/* css Zen Garden submission 017 - 'Golden Mean' by Douglas Bowman, http://www.stopdesign.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Douglas Bowman*/ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Design and CSS created by Douglas Bowman */ /* www.stopdesign.com */ /* structure --------------------------------- */ body { margin:0; padding:0; background:#EBE8D0 url("bg_body.gif") repeat-x left top; color:#333; text-align:center; font:x-small Georgia,Serif; voice-family: "\"}\""; voice-family:inherit; font-size:small; } html>body {font-size:small;} #container { position:relative; width:732px; margin:0 auto; text-align:left; } #intro { border:1px solid #A79355; border-width:0 1px; } /* hidden text --------------------------------- */ h1, h2, h3 { margin:0; background-repeat:no-repeat; background-position:left top; } h1 span, h2 span, h3 span, #quickSummary p.p1 span {display:none;} /* header and summary --------------------------------- */ #pageHeader h1 { height:71px; background:url("bg_zengarden.gif") no-repeat 35px 42px; } #pageHeader h2 { height:115px; background:url("bg_beautyof.jpg") no-repeat left top; } #quickSummary p.p1 { height:76px; margin:0; background:url("bg_quicksum.gif") no-repeat 35px 18px; } #quickSummary p.p2 { position:absolute; top:78px; right:35px; width:200px; margin:0; font-size:93%; line-height:1.3em; text-align:right; color:#A79355; background-color:transparent; } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited { white-space:nowrap; font:bold 92%/1.3em Verdana,Arial,Sans-serif; text-transform:uppercase; } /* preamble --------------------------------- */ #preamble { position:absolute; top:304px; right:0; width:180px; } #preamble h3 { height:44px; background-image:url("bg_road.gif"); } #preamble p { margin:.5em 0; font-size:93%; font-style:italic; line-height:1.7em; color:#66472E; background-color:transparent; } /* supporting text --------------------------------- */ #supportingText { margin:0 200px; border:1px solid #A79355; border-width:0 1px; padding-bottom:8px; border-bottom:8px solid #BDAF83; } #supportingText p { margin:.75em 0; line-height:1.5em; padding:0 20px; } #supportingText h3 { height:40px; border:1px solid #A79355; border-width:1px 0; margin:1em 0 .5em; background-color:#D9D98B; } #explanation h3 { height:80px; background-image:url("bg_what.jpg"); border-top-width:0; margin:0 0 10px; } #participation h3 {background-image:url("bg_participation.jpg");} #benefits h3 {background-image:url("bg_benefits.jpg");} #requirements h3 {background-image:url("bg_requirements.jpg");} /* link list --------------------------------- */ #linkList { position:absolute; top:306px; left:0; width:180px; } #linkList h3 {height:23px;} #lselect h3 { height:41px; background-image:url("bg_select.gif"); } #larchives h3 {background-image:url("bg_archives.gif");} #lresources h3 {background-image:url("bg_resources.gif");} #linkList ul { margin:1em 0 1.5em; padding:0; font-size:93%; list-style:none; } #larchives li, #lresources li {text-transform:lowercase;} #linkList ul li { background:url("icon_diamond.gif") no-repeat 2px 50%; margin:0 0 .5em; padding:0 0 0 14px; line-height:1.5em; } #linkList li a:link, #linkList li a:visited { font-family:Verdana,Arial,Sans-serif; font-weight:bold; } #linkList #lselect li { background:url("icon_pg.gif") no-repeat 0 15%; color:#A79355; } #linkList #lselect a:link, #linkList #lselect a:visited {display:block;} #linkList #lselect a.c:link, #linkList #lselect a.c:visited { display:inline; font-family:Georgia,Serif; font-weight:normal; color:#616623; background-color:transparent; text-transform:lowercase; } /* footer --------------------------------- */ #footer { background:#D9D98B url("bg_pattern.gif"); color:#fff; margin:1.75em 0 0; padding:10px 20px; border:1px solid #A79355; border-width:1px 0; font:85% Verdana,Arial,Sans-serif; text-align:center; } #footer a:link, #footer a:visited { padding:0 5px; font-weight:normal; } /* links --------------------------------- */ a:link, a:visited { color:#703F0E; background-color:transparent; font-weight:bold; text-decoration:none; } a:hover { color:#616623; background-color:transparent; text-decoration:underline; } /* misc --------------------------------- */ acronym {border-width:0;}/* css Zen Garden submission 018 - 'Wrapped in Burlap' by John Simons, http://www.royalbarrel.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, John Simons*/ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Top-level stuff ------------------------------*/ body { margin:10px 0 0 0; padding:0; font-family:verdana; font-size:85%; background-color:#fff; } p { margin-top:0; } #container { width:745px; margin-left:30px; position:relative; background-color:#F7F0E9; } /* Intro section ------------------------------*/ #intro { position:relative; background-color:white; } #pageHeader { background-image:url("title.gif"); background-repeat:no-repeat; height:181px; } #pageHeader h1, #pageHeader h2 span { display:none; } #pageHeader h2 { width:75px; height:84px; background-image:url("small_tree.gif"); background-repeat:no-repeat; position:absolute; top:-10px; left:690px; margin:0;padding:0; } #quickSummary { text-align:right; position:absolute; top:75px; left:500px; width:245px; font-size:100%; font-style:italic; font-family:times new roman, serif; } #quickSummary p { margin-bottom:0px; } #quickSummary a { color:#C52E00; } /* Left-hand column ------------------------*/ #supportingText, #preamble { width:505px; background-image:url("burlap.jpg"); color:white; line-height:140%; } #supportingText p, #preamble p { margin:0; padding:4px 10px 10px 10px; } #supportingText a, #preamble a { color:#FFAF7F; } #preamble h3, #supportingText h3 { height:44px; margin:0; padding:0; border-top:1px solid #F7F0E9; border-bottom:1px solid #F7F0E9; border-left:1px solid #735B5A; } #preamble h3 { border-top-width:0px; } #preamble h3 span, #supportingText h3 span { display: none; } #preamble h3 { background-image:url("enlightenment.gif"); } #explanation h3 { background-image:url("whatabout.gif"); } #participation h3 { background-image:url("participation.gif"); } #benefits h3 { background-image:url("benefits.gif"); } #requirements h3 { background-image:url("requirements.gif"); } /* Footer -----------------------------*/ #footer { text-align:center; background:#F7F0E9 url("footer_bg.jpg"); padding:8px 0px; font-size:120%; font-weight:bold; } #footer a { color:#583C3B; text-decoration:none; } #footer a:hover { color:#D17B00; } /* Link List ------------------------------------*/ #linkList { position:absolute; top:181px; left:505px; width:240px; background-image:url("right_bg.jpg"); background-repeat:no-repeat; color:#774747; border-top:1px solid #E0D5CA; font-weight:bold; padding-bottom:200px; line-height:140%; } #linkList ul { padding-left:30px; margin-left:0px; } #linkList li { margin-bottom:15px; } #linkList a { color:#686057; text-decoration:none; } #linkList a:hover { text-decoration:underline; } #linkList a:visited { color:#999189; } /* To get a linebreak between title and author */ #linkList #lselect a { display:block; } #linkList #lselect a:hover {color:#C52E00; } #linkList #lselect a.c { display:inline; } #linkList #lselect a.c:hover {color:#686057; } #linkList h3 { margin:0; padding:0; background-repeat:no-repeat; height:46px; } #linkList h3 span { display:none; } #linkList h3.select { background-image:url("select.gif"); } #linkList h3.archives { background-image:url("archives.gif"); } #linkList h3.resources { background-image:url("resources.gif"); } /* css Zen Garden submission 019 - 'What Lies Beneath' v1.01 by Michael Pick, http://www.mikepick.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Mike Pick */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { font: 11px/18px verdana; color: #ffffff; background: #000000 url(body-background.jpg) repeat-x; margin: 0px; margin-bottom: 20px; width: 2300px; } p { font: 11px/18px verdana; margin-top: 0px; text-align: left; } h3 { font: 12pt georgia; margin-top: 0px; margin-bottom: 5px; color: #ffffff; } a:link { font-weight: bold; text-decoration: none; color: #E8AD62; } a:visited { font-weight: bold; text-decoration: none; color: #E0922F; } a:hover, a:active { text-decoration: underline; color: #FFCC00; } /* specific divs */ #pageheader { } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(title.jpg) no-repeat top left; width: 2300px; height: 85px; margin-top: 70px; } #pageHeader h1 span { display:none } #pageHeader h2 span { display:none; } #quickSummary { position: absolute; left: 55px; top: 170px; width: 250px; z-index: 2; } #quickSummary p { font: italic 10px/16px georgia; text-align: right; } #preamble { position: absolute; background: transparent url(femur.jpg) no-repeat bottom left; top: 170px; left: 545px; width: 300px; height: 431px; z-index: 2; } #preamble h3 { background: transparent url(the_road.jpg) no-repeat top left; width: 300px; height: 25px; } #preamble h3 span { display: none; } #supportingText { } #explanation { position: absolute; top: 170px; left: 865px; width: 300px; z-index: 2; } #explanation h3 { background: transparent url(so_what.jpg) no-repeat top left; width: 300px; height: 25px; } #explanation h3 span { display: none; } #participation { position: absolute; background: transparent url(tin_can.jpg) no-repeat top left; top: 170px; left: 1185px; width: 300px; z-index: 2; padding-bottom: 40px; } #participation h3 { background: transparent url(participation.jpg) no-repeat top left; width: 300px; height: 25px; } #participation h3 span { display: none; } #benefits { background: transparent url(ants.jpg) no-repeat top left; position: absolute; top: 170px; height: 450px; left: 1505px; width: 300px; z-index: 2; } #benefits h3 { background: transparent url(benefits.jpg) no-repeat top left; width: 300px; height: 25px; } #benefits h3 span { display: none; } #requirements { position: absolute; top: 170px; left: 1825px; width: 300px; z-index: 2; padding-bottom: 40px; } #requirements h3 { background: transparent url(requirements.jpg) no-repeat top left; width: 300px; height: 25px; } #requirements h3 span { display: none; } #requirements p { font: 9px/15px verdana; } #footer { position: absolute; background: transparent url(worm.jpg) no-repeat; text-align: right; top: 170px; left: 2145px; width: 100px; height: 325px; z-index: 2; } #footer a:link, #footer a:visited { display: block; } #linkList { position: absolute; left: 325px; top: 170px; width: 200px; z-index: 2; } #linkList2 { font: 9px verdana, sans-serif; } #linkList h3.select { background: transparent url(select.jpg) no-repeat top left; width: 200px; height: 25px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(favorites.jpg) no-repeat top left; margin-top: 15px; width: 200px; height: 25px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.jpg) no-repeat top left; margin-top: 15px; width: 200px; height: 25px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.jpg) no-repeat top left; margin-top: 15px; width: 200px; height: 25px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #E8AD62; } #linkList li a:visited { color: #E0922F; } #linklist li a:hover, a:active { color: #00CCFF; } #extraDiv1 { background: transparent url(mole.jpg) bottom left no-repeat; position: absolute; top: 0px; left: 0px; width: 2300px; height: 630px; z-index: 1; }/* css Zen Garden submission 020 - 'Friendly Beaches' by Sophie G - www.sophie-g.net */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Sophie G */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { background-color: #FFF; margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 90%; } p { line-height: 180%; } #container { background-color: #EDEEF0; border: 1px solid #DAD5D9; padding: 0px; margin: 0px; } acronym { border-bottom: 1px #6BA0D2 dashed; } #pageHeader { font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; background-color: #A4ACB3; } #pageHeader h1 { height: 190px; margin: 0px; background-image: url(headerh1.jpg); background-repeat: no-repeat; } #pageHeader h1 span, #pageHeader h2 span { display: none; } #pageHeader h2 { background-color: #EDEEF0; margin: 0px; height: 24px; padding: 0px 14px 2px 14px; background-image: url(headerh2.gif); background-repeat: no-repeat; } #pageHeader h2 acronym { color: #FFF; border-bottom: 1px #FFF dashed; } #quickSummary p.p1 { position: absolute; right: 21px; top: 21px; width: 12em; height: 168px; padding: 0px; margin: 0px; border: 1px solid #0C2953; text-align: center; font-size: 90%; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; line-height: 110%; color: #FFF; background-image: url(summary.jpg); background-repeat: no-repeat; background-position: 50% 100%; background-color: #0C2953; } #quickSummary p.p1 span { display: block; padding: 3px; } #preamble { padding: 0px 15em 0px 3em; } #preamble h3 { margin: 15px 0px 0px 0px; padding: 6px 20px 2px 6px; text-align: left; font-size: 180%; font-variant: small-caps; color: #6BA0D2; background-image: url(bordDroitPreambleh3.gif); background-repeat: no-repeat; background-position: 100% 0px; background-color: #F6F7F7; } #preamble h3 span { display: block; padding: 20px 0px 15px 48px; background-image: url(preambleShell.jpg); background-repeat: no-repeat; background-position: 0px 50%; } #preamble p { text-align: justify; } #preamble p.p1, #preamble p.p2 { margin: 0px; padding: 10px 20px 2px 6px; background-image: url(bordDroitPreamble.gif); background-repeat: repeat-y; background-position: 100% 0px; background-color: #F6F7F7; } #preamble p.p3 { margin: 0px; padding: 0px; background-image: url(bordBasPreamble.gif); background-repeat: no-repeat; background-position: 100% 100%; background-color: #F6F7F7; } #preamble p.p1 span, #preamble p.p2 span, #preamble p.p3 span { display: block; } #preamble p.p3 span { margin: 0px; padding: 10px 20px 20px 6px; background-image: url(bordBasPreambleGauche.gif); background-repeat: no-repeat; background-position: 0% 100%; } #preamble p:first-letter, #preamble p span:first-letter { color: #6BA0D2; font-size: 140%; font-weight: bold; margin: 0px 2px 0px 0px; } #supportingText { margin: 0px; padding: 10px 16em 0px 1em; font-size: 90%; } #explanation, #participation, #benefits, #requirements { border: 2px solid #FFF; padding: 0px; } #explanation { margin: 0px 0px 10px 0px; } #participation { margin: 0px 0px 10px 0px; float: left; width: 30%; } #benefits { margin: 0px 0px 10px 32%; } #requirements { margin: 0px 0px 10px 32%; } #supportingText h3 { margin: 0px; padding: 5px 30px 1px 2px; text-align: left; font-size: 120%; font-variant: small-caps; color: #6BA0D2; border-bottom: 1px solid #6BA0D2; background-color: #F6F7F7; background-repeat: no-repeat; background-position: 100% 50%; } #explanation h3 { background-image: url(explanationShell.jpg); } #participation h3 { background-image: url(participationShell.jpg); } #benefits h3 { background-image: url(benefitsShell.jpg); } #requirements h3 { background-image: url(requirementsRock.jpg); } #supportingText p { text-align: justify; margin: 10px 0px 0px 0px; padding: 1px 3px 2px 3px; } #supportingText p:first-letter, #supportingText p span:first-letter { font-weight: bold; } #supportingText a:link { color: #0083FF; font-weight: bold; } #supportingText a:visited { color: #204160; font-weight: bold; } #supportingText a:hover, #supportingText a:active { color: #8C0000; font-weight: bold; text-decoration: none; } #linkList, #quickSummary p.p2 { font-size: 90%; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; position: absolute; right: 21px; width: 12em; border: 1px solid #0C2953; padding: 0px; margin: 0px; background-color: #A4ACB3; } #quickSummary p.p2 { height: 50px; text-align: center; top: 217px; } #quickSummary p.p2 span { font-size: 90%; display: block; padding: 3px; color: #FFF; } #linkList { top: 266px; } #linkList h3 { background-color: #0C2953; color: #FFF; margin: 0px; padding: 30px 1px 1px 1px; background-repeat: no-repeat; } #linkList h3.select { background-image: url(selecth3.jpg); background-position: 50% 0%; } #linkList h3.favorites { border-top: 1px solid #0C2953; background-image: url(favoritesh3.jpg); background-position: 40% 100%; } #linkList h3.archives { border-top: 1px solid #0C2953; background-image: url(archivesh3.jpg); background-position: 40% 100%; } #linkList h3.resources { border-top: 1px solid #0C2953; background-image: url(resourcesh3.jpg); background-position: 50% 30%; } #linkList h3:first-letter, #linkList h3 span:first-letter { color: #FFF; font-size: 160%; } #linkList ul { list-style-type: none; font-size: 90%; color: #FFF; margin: 0px; padding: 0px; background-color: #A4ACB3; } #linkList li { padding: 3px 2px 3px 2px; margin-bottom: 4px; } #linkList li:hover { padding: 2px 1px 2px 1px; border: 1px dotted #0C2953; background-color: #6BA0D2; } #quickSummary p.p2 span a:link { color: #FFF; font-weight: bold; } #quickSummary p.p2 span a:visited { color: #204160; } #quickSummary p.p2 span a:hover, #quickSummary p.p2 span a:active { color: #FFD800; font-weight: bold; text-decoration: none; } #linkList a:link, #linkList a:visited { border-left: 6px solid #FFF; padding-left: 2px; font-weight: bold; color: #FFF; } #linkList a:visited { color: #204160; } #linkList a:hover, #linkList a:active { border-left: 6px solid #FFD800; padding-left: 2px; color: #FFD800; text-decoration: none; font-weight: bold; } #linkList a.c:link, #linkList a.c:visited { border-left: none; padding-left: 0px; font-weight: normal; color: #FFF; } #linkList a.c:hover, #linkList a.c:active { border-left: none; padding-left: 0px; color: #FFD800; text-decoration: none; } #linkList acronym { border-bottom: 1px #FFF dashed; } #footer { clear: both; text-align: right; margin: 0px -16em 0px 0px; padding: 25px 0px 0px 0px; background-repeat: no-repeat; background-image: url(signSoph.gif); background-position: 0% 95%; } #footer a { font-size: 70%; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; }/* css Zen Garden submission 021 - 'Calm & Smooth' by Cornelia Lange - http://www.clkm.de/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Cornelia Lange */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* elements */ body { color: #000; background: #F1ECE3 url(topbg.gif) repeat-x; font: 90% Verdana, Arial, Helvetica, sans-serif; } body, html, h1, h2, h3, p, ul, li, div { margin: 0; padding: 0; } p { font-size: .82em; line-height: 140% } a { color: #069; font-weight: bold; text-decoration: none; background: transparent; } a:visited { color: #000; background: transparent; } a:hover { text-decoration: underline; color: #900; background: transparent; } ul, li { display: block; list-style: none; } acronym { border: 0 none; } /* divs and related classes */ #pageHeader h1 { font: bold 3.2em Arial, Helvetica, sans-serif; color: #8ab; background: transparent; position: absolute; top: 340px; left: 256px; z-index: 5; text-transform: lowercase; } #pageHeader h2 { position: absolute; left: 20px; top: 68px; display: block; width: 138px; height: 88px; font: bold 1em Arial, Helvetica, sans-serif; color: #449498; background: transparent url(cssdesign.gif) top left no-repeat; } #pageHeader h2 span { display: none; } #quickSummary { width: 200px; margin: 235px 0 20px 15px; padding: 20px 0 0 0; font-size: 0.92em; } #quickSummary .p2 { padding-top: 10px; } #preamble { margin: 0 0 0 13.5em; color: #000; background: transparent url(enlightenment.gif) top left no-repeat; height: 6em; clear: both; padding: 5.8em 0 0 4.7em; } #preamble h3 span { display: none; } #preamble .p1, #preamble .p2, #preamble .p3 { display: block; float: left; } #preamble .p1 { margin: 10px 20px 15px 0; width: 160px; } #preamble .p2 { margin: 10px 20px 15px 0; width: 230px; } #preamble .p3 { margin: 10px 15px 15px 0; width: 270px; } #preamble p:first-letter { font: bold 1.2em Tahoma, 'Trebuchet MS', Arial, Helvetica, sans-serif; color: #900; background: transparent; } /* supportingText */ #supportingText { margin: 0 0 0 13.5em; clear: both; } #supportingText .p1, #supportingText .p2, #supportingText .p3, #supportingText .p4, #supportingText .p5 { display: block; float: left; } #supportingText p:first-letter { font: bold 1.2em Tahoma, 'Trebuchet MS', Arial, Helvetica, sans-serif; color: #900; background: transparent; text-transform: capitalize; } #explanation { display: block; color: #000; background: transparent url(buddha.gif) top left no-repeat; height: 4em; clear: both; padding: 6.5em 0 0 4.7em; } #explanation h3 span { display: none; } #explanation .p1 { width: 320px; margin: 10px 20px 15px 0; } #explanation .p2 { width: 360px; margin: 10px 20px 15px 0; } #participation { display: block; height: 4em; color: #000; background: transparent url(participation.gif) top left no-repeat; clear: both; padding: 6em 0 0 4.7em; } #participation h3 span, #benefits h3 span { display: none; } #participation .p1 { width: 390px; margin: 10px 20px 15px 0; } #participation .p2 { width: 290px; margin: 10px 20px 15px 0; } #participation .p3 { width: 390px; margin: 10px 20px 15px 0; clear: left; } #participation .p4 { width: 290px; margin: 10px 20px 15px 0; } #benefits { display: block; height: 4em; margin: 30px 0 0 0; color: #000; background: transparent url(benefits.gif) top left no-repeat; clear: both; padding: 6.2em 0 0 4.7em; } #benefits p { width: 460px; margin: 10px 20px 15px 0; } #requirements { display: block; height: 4em; margin: 30px 0 0 0; color: #000; background: transparent url(requirements.gif) top left no-repeat; clear: both; padding: 7.3em 0 0 4.7em; } #requirements h3 span { display: none; } #requirements .p1 { width: 230px; margin: 10px 20px 15px 0; } #requirements .p2 { width: 450px; margin: 10px 20px 15px 0; } #requirements .p3 { width: 230px; margin: 10px 20px 15px 0; clear: left; } #requirements .p4 { width: 450px; margin: 10px 20px 15px 0; } #requirements .p5 { width: 450px; margin: 10px 20px 15px 0; clear: left; } #footer { border-top: 1px dashed #999; padding-top: 5px; margin: 20px 30px 20px 5em; clear: both; font-size: .82em; padding-left: 0.7em; } #footer a { padding: 0 10px 0 15px; color: #069; background: transparent url(link.gif) left no-repeat; } #footer a:link, #footer a:visited { color: #069; background: transparent url(link.gif) left no-repeat; } #footer a:hover, #footer a:active { color: #900; background: transparent url(linkhover.gif) left no-repeat; } /* left Menu */ #linkList { font-size: .82em; position: absolute; top: 33.6em; left: 15px; float: left; width: 18em; } #linkList h3 { color: #900; background: transparent; font-size: 1.2em; padding: 1em 0 0.4em 0; margin: 10px 0 0 0; } #linkList ul { margin-top: 0.5em; } #lselect li { display: block; height: 2.5em; margin-top: 0.5em; padding: 0 0 3px 20px; background: transparent url(css.gif) 0 3px no-repeat; } #lselect a { display: block; } #lselect a.c { display: inline; font-weight: normal; } #lselect a:hover.c { display: inline; font-weight: normal; } #larchives li { padding: 0 0 10px 0; text-transform: lowercase; color: #069; background: transparent url(linkhover.gif) 0 3px no-repeat; /* preload hoverimage */ } #larchives a { padding: 0 0 10px 20px; } #larchives a:link { color: #069; background: #F1ECE3 url(link.gif) 0 3px no-repeat; } #larchives a:visited { color: #000; background: #F1ECE3 url(link.gif) 0 3px no-repeat; } #larchives a:hover, #larchives a:active { color: #900; background: #F1ECE3 url(linkhover.gif) 0 3px no-repeat; text-decoration: none; } #lresources li { padding: 0 0 10px 0; text-transform: lowercase; color: #069; background: transparent url(linkhover.gif) 0 3px no-repeat; /* preload hoverimage */ } #lresources a { padding: 0 0 10px 20px; } #lresources a:link { color: #069; background: #F1ECE3 url(link.gif) 0 3px no-repeat; } #lresources a:visited { color: #000; background: #F1ECE3 url(link.gif) 0 3px no-repeat; } #lresources a:hover, #lresources a:active { color: #900; background: #F1ECE3 url(linkhover.gif) 0 3px no-repeat; text-decoration: none; } /* images */ #extraDiv1 { position: absolute; top: 0; left: 150px; width: 412px; height: 218px; color: #000; background: transparent url(beauty.gif) top left no-repeat; z-index: 5; } #extraDiv2 { position: absolute; top: 218px; left: 139px; width: 582px; height: 17px; color: #fff; background: transparent url(streifen.gif) top left no-repeat; } #extraDiv3 { position: absolute; top: 0; right: 0; width: 199px; height: 218px; color: #000; background: transparent url(graeser.gif) top right no-repeat; z-index: 2; } #extraDiv4 { position: absolute; top: 235px; left: 244px; width: 350px; height: 175px; color: #000; background: transparent url(seerosen.gif) top left no-repeat; } /* css Zen Garden submission 022 - 'viridity' by Laura MacArthur - http://www.tunnel-vision.org/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Laura MacArthur */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* based once upon a time on the css Zen Garden default style v1.01 Dave Shea*/ /* basic stuff */ html>body, html>body td, html>body th { font-size: small; } body { font: 10px/16px Arial, Helvetica, sans-serif; color: #330033; background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px; margin: 0px; } /*rinse and repeat*/ div, p, th, td, li, dd, dl, dt { font-family: Arial, Helvetica, sans-serif; } p { font: 10px/18px Arial, Helvetica, sans-serif; margin-right: 15px; margin-left: 20px; margin-top: 5px; margin-bottom: 5px; padding-right: 15px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; letter-spacing: 1px; text-align: justify; } h3 { color: #336666; background-color: transparent; font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing: 4px; text-transform: lowercase; } a:link { color: #CCFFFF; background-color: transparent; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; } a:visited { color: #003333; background-color: #669999; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; } a:hover, a:active { color: #006666; background-color: #CCFFFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; } /* specific divs */ /*outermost div*/ #container { position: absolute; margin-top: 0px; top: 0px; left: 0px; width: 75%; height: auto; z-index: 2; padding-left: 130px; } /* where the logos are */ #pageHeader { width: 575px; height: 65px; position: absolute; left: 0px; top: 0px; padding-top: 31px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ /*and this trick totally rocks*/ #pageHeader h1 { background: transparent url(zh1_combo.gif) no-repeat 0px 0px; width: 575px; height: 65px; float: left; top: 0px; margin-top: 0px; } #pageHeader h1 span { display:none; } #pageHeader h2 span { display:none; } #preamble h3 { background: #CCFFFF url(h3_preamble.gif) no-repeat left top; color: #003333; margin-top:0px; margin-bottom:0px; height: 25px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #003333; } #preamble h3 span{ display:none; } #explanation h3 { background: #CCFFFF url(h3_support1.gif) no-repeat left top; color: #003333; margin-top:0px; margin-bottom:0px; height: 25px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #003333; border-top-width: 1px; border-top-style: solid; border-top-color: #003333; } #explanation h3 span{ display:none; } #participation h3 { background: #CCFFFF url(h3_support2.gif) no-repeat left top; color: #003333; margin-top:0px; margin-bottom:0px; height: 25px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #003333; border-top-width: 1px; border-top-style: solid; border-top-color: #003333; } #participation h3 span{ display:none; } #benefits h3 { background: #CCFFFF url(h3_support3.gif) no-repeat left top; color: #003333; margin-top:0px; margin-bottom:0px; height: 25px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #003333; border-top-width: 1px; border-top-style: solid; border-top-color: #003333; } #benefits h3 span{ display:none; } #requirements h3 { background: #CCFFFF url(h3_support4.gif) no-repeat left top; color: #003333; margin-top:0px; margin-bottom:0px; height: 25px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #003333; border-top-width: 1px; border-top-style: solid; border-top-color: #003333; } #requirements h3 span{ display:none; } /* blurb */ #quickSummary { color: #CCCCCC; background-color: transparent; width: 75%; height: auto; display: block; padding-top: 125px; } #quickSummary p { font: italic normal 10px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left; padding-top: 5px; } /* written intro - first paragraph */ #preamble { color: #333333; background-color: #99CCCC; width: 70%; clear: right; margin-bottom: 10px; padding-bottom: 10px; border: 1px solid #003333; } #preamble a:link { color: #CCFFFF; background-color: #669999; } #preamble a:hover, a:active { color: #006666; background-color: #CCFFFF; } /* the rest */ #supportingText { color: #333333; background-color: #99CCCC; width: 70%; clear: right; height: auto; border: 1px solid #003333; background-image: url(z_twig.gif); background-repeat: no-repeat; background-position: right bottom; } #supportingText a:link { color: #CCFFFF; background-color: #669999; } #supportingText a:hover, a:active { color: #006666; background-color: #CCFFFF; } #footer { color: #CCCCCC; background-color: #006666; text-align: center; border: 1px solid #003333; background-image: url(z_trim.png); background-repeat: repeat-x; background-position: 0px 0px; height: 32px; } /* link-tastic */ #linkList { position: absolute; top: 114px; left: 0px; z-index: auto; } #linkList2 { color: #333333; background-color: transparent; font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif; width: 130px; height: auto; padding: 0px 0px 10px; margin-top: 0px; text-align: right; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: #003333; } #linkList h3.select { background: transparent url(zh3_select.gif) no-repeat 0px 0px; margin: 0px 0px 5px; width: 130px; height: 100px; } #linkList h3.select span { display:none; } #linkList h3.favorites { background: transparent url(zh3_favs.gif) no-repeat left top; margin: 25px 0px 5px; width: 130px; height: 50px; } #linkList h3.favorites span { display:none; } #linkList h3.archives { background: transparent url(zh3_arch.gif) no-repeat left top; margin: 25px 0px 5px; width:130px; height: 50px; } #linkList h3.archives span { display:none; } #linkList h3.resources { background: transparent url(zh3_res.gif) no-repeat left top; margin: 25px 0px 5px; width:130px; height: 50px; } #linkList h3.resources span { display:none; } #linkList ul { margin: 0px 5px; padding: 0px 5px; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } /* leaf */ #extraDiv1 { background-image: url(z_cont.gif); background-repeat: no-repeat; position: absolute; z-index: 1; left: 315px; top: 114px; height: 299px; width: 330px; } /* css Zen Garden submission 023 - 'fleur de l'avant-garde' by Michael Switzer, http://propagandabydesign.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Michael Switzer */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { margin: 0; padding: 0; border: 0; text-align: center; vertical-align: top; overflow: visible; background: #fff url(bg.gif) repeat-x; font: x-small Verdana,sans-serif; color: #333; } p, h3 { margin: 0; padding: 0 0px 5px 0; } ul { margin: 0; padding: 2px 0 5px 0; } acronym { border-bottom: 1px dashed #4C83AE; } a acronym { border-bottom: 0; } a:link { font-weight: 900; color: #4C83AE; text-decoration: none; } a:visited { font-weight: 900; color: #999; text-decoration: none; } a:hover, a:active { font-weight: 900; color: #9B3F17; } #container { position: relative; top: 0; margin: 0 auto; text-align: left; border-left: 1px dashed #666; border-right: 1px dashed #666; background: #FFF url(mainbg.jpg) no-repeat; width: 770px; height: 720px; padding: 0; display: block; } /* page intro and subsections */ #pageHeader { position: absolute; top: 30px; left: 520px; display: block; margin: 0; padding: 0; width: 245px; height: 30px; background: transparent url(logo.gif) no-repeat; border: 0; } #quickSummary p.p1 { position: absolute; top: 293px; left:640px; width: 122px; margin: 0; padding: 0; display: block; text-align: right; font: italic 14px/12px Garamond, Times, serif; color: #9B3F17; line-height: 1.2; } #quickSummary p.p2 { position: absolute; top: 72px; left: 0px; width:760px; text-align: right; font: 9px Verdana, sans-serif; color: #999999; z-index: 2; } #preamble { position: absolute; top: 97px; left: 230px; width: 540px; height: 173px; padding: 0; margin: 0 10 0 0; display: block; overflow: auto; } #preamble h3 { background: transparent url(roadtoenlightenment.gif) no-repeat top left; width: 257px; height: 27px; margin: 5px 0px 0px 5px; } #preamble p { margin: -2px 88px 7px 18px; font: 11px/7px Tahoma,sans-serif; line-height: 1.2; color: #fff; } /* main text and subsections */ #supportingText { position: absolute; top: 290px; left: 180px; width: 440px; margin: 0; padding: 0; display: block; } #supportingText p { font: x-small Verdana,sans-serif; color: #333; text-align: justify; } #explanation { position: relative; top: 0; left: 0; display: block; width: 440px; } #explanation h3 { width: 258px; height: 21px; margin: 0; padding: 0; display: block; background: transparent url(sowhatisthisabout.gif) no-repeat; } #participation { float: left; width: 210px; padding: 0; margin: 10px 0; } #participation h3 { width: 210px; height: 21px; margin: 0; padding: 0; display: block; background: transparent url(participation.gif) no-repeat; } #benefits { float: right; width: 210px; padding: 0; margin: 10px 0; } #benefits h3 { width: 210px; height: 21px; margin: 0; padding: 0; display: block; background: transparent url(benefits_old.gif) no-repeat; } #requirements { float: right; width: 210px; padding:0; margin: 10px 0; } #requirements h3 { width: 210px; height: 21px; margin: 0; padding: 0; display: block; background: transparent url(requirements.gif) no-repeat; } #footer { width: 210px; display: block; text-align: right; } #footer a { display: block; font: 9px Verdana, sans-serif; font-weight: 900; } /* links and subsections */ #linkList { position: absolute; top: 321px; left: 6px; width: 150px; height: 66%; } #linkList div { padding-bottom: 10px; } #linkList ul { margin-left: 5px; list-style: none; color: #fff; } #linkList ul li a { display: block; } #linkList ul li a:link { font-weight: 900; color: #4C83AE; } #linkList ul li a:visited { font-weight: 900; color: #999999; } #linkList ul li a:hover, #linkList ul li a:active { font-weight: 900; color: #9B3F17; } #linkList ul li a.c { display: inline; } #linkList ul li a.c:link { font-weight: 500; color: #4C83AE; } #linkList ul li a.c:visited { font-weight: 500; color: #999; } #linkList ul li a.c:hover, #linkList ul li a.c:active { font-weight: 500; color: #9B3F17; } #lselect h3 { width: 139px; height: 19px; background: transparent url(selectdesign.gif) no-repeat; } #larchives h3 { width: 75px; height: 16px; background: transparent url(archives.gif) no-repeat; } #lfavorites h3 { width: 89px; height: 19px; background: transparent url(favorites.gif) no-repeat; } #lresources h3 { width: 91px; height: 19px; background: transparent url(resources.gif) no-repeat; } #pageHeader h1, #pageHeader h2, #preamble h3 span, #supportingText h3 span, #linkList h3 span { display: none; }/* css Zen Garden submission 024 - 'Not So Minimal' by Daniel Rubin, http://www.superfluousbanter.org// */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Daniel Rubin */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* global ----------------------------------------------- */ body { background: #fff url(bg.gif) no-repeat fixed top left; font-family: verdana, helvetica, arial, sans-serif; margin: 0 20px 0 20px; color: #333; } /* layout ----------------------------------------------- */ #container { position: relative; background: url(header.jpg) no-repeat top left; margin: 0 auto -1px auto; padding-top: 144px; width: 710px; border-bottom: 5px solid #09345f; } #pageHeader { display: none; } #quickSummary { width: 100%; text-align: right; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { margin-top: 0; padding-right: 5px; } #preamble { margin: 22px 0 0 176px; width: 529px; } #explanation, #participation, #benefits, #requirements { margin: 25px 0 0 176px; width: 529px; } #footer { margin: 0 0 5px 0; padding: 10px 0 0 0; width: 100%; text-align: center; } #linkList { position: absolute; width: 150px; top: 166px; left: 5px; } /* text ----------------------------------------------- */ p { font-size: 12px; } #preamble p.p1, #supportingText p.p1 { margin-top: 10px; } #preamble p, #supportingText p { line-height: 18px; } #quickSummary p.p2 { font-size: 9px; color: #999; } #footer { font-size: 9px; } /* lists ----------------------------------------------- */ #linkList ul { font-size: 10px; list-style:none; margin: 5px 0 0 0; padding: 0 0 0 0; } #linkList ul li { background: url(bullet_single.gif) no-repeat 7px 4px; margin: 0; padding: 0 0 0 17px; line-height: 14px; color: #ccc; } #linkList #lselect li { background: url(bullet_double.gif) no-repeat 5px 2px; font-size: 9px; } #linkList #lselect a:link, #linkList #lselect a:visited { display: block; } #linkList #lselect a.c:link, #linkList #lselect a.c:visited { display:inline; } #larchives li, #lresources li { text-transform: lowercase; } /* links ----------------------------------------------- */ a, a:link, a:visited { color: #999; } a:hover { color: #333; } #quickSummary a, #quickSummary a:link, #quickSummary a:visited { font-weight: bold; text-transform: uppercase; text-decoration: none; } #quickSummary a:hover { text-decoration: underline; } #linkList a, #linkList a:link, #linkList a:visited { color: #666; text-decoration: none; } #linkList a:hover { text-decoration: underline; color: #333; } #linkList a.c, #linkList a.c:link, #linkList a.c:visited { color: #999; text-decoration: none; } #linkList a.c:hover { text-decoration: underline; color: #333; } #linkList #lselect a { font-size: 10px; } #linkList #lselect a.c { font-size: 9px; text-transform: lowercase; } #footer a, #footer a:link, #footer a:visited { font-weight: bold; text-transform: uppercase; text-decoration: none; } #footer a:hover { text-decoration: underline; } /* headings ----------------------------------------------- */ h3 { margin-bottom: 0px; } h3 span { display: none; } #supportingText h3 { width: 529px; height: 15px; } #linkList h3 { width: 150px; height: 20px; margin-top: 20px; } #preamble h3 { background: transparent url(h3_theroadtoenlightenment.gif) no-repeat top left; width: 529px; height: 26px; } #explanation h3 { background: transparent url(h3_sowhatisthisabout.gif) no-repeat top left; } #participation h3 { background: transparent url(h3_participation.gif) no-repeat top left; } #benefits h3 { background: transparent url(h3_benefits.gif) no-repeat top left; } #requirements h3 { background: transparent url(h3_requirements.gif) no-repeat top left; } #lselect h3 { background: transparent url(h3_selectadesign.gif) no-repeat top left; margin-top: 10px; } #lfavorites h3 { background: transparent url(h3_favorites.gif) no-repeat top left; } #larchives h3 { background: transparent url(h3_archives.gif) no-repeat top left; } #lresources h3 { background: transparent url(h3_resources.gif) no-repeat top left; } /* misc --------------------------------- */ acronym { border-width: 0; }/* css Zen Garden submission 025 - 'mnemonic', by Dave Shea, http://www.mezzoblue.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: July, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Built in Nick Bradbury's wonderful TopStyle Pro - http://www.bradsoft.com/topstyle/ */ /* See http://www.csszengarden.com/025/025-comments.css for the fully commented version of this file. */ /* See the last section, MOS Enhancements, on why some things look different between IE and the rest */ /* Basic HTML Elements */ html { margin: 0px; padding: 0px; } body { font-size: small; font-family: arial, sans-serif; background: #B0A40B url(bg-1.gif) top left repeat-x; margin: 0px; padding: 0px; } acronym { border-bottom: none; } ul { list-style-type: none; margin: 0px; padding: 0px; } a:link { color: #DF0245; font-weight: bold; text-decoration: none; } a:visited { color: #6F4600; font-weight: normal; text-decoration: underline; } a:hover, a:active { text-decoration: underline; } /*Structural Elements */ #container { background: transparent url(bg-2.gif) top right repeat-y; } #intro { padding: 0px; margin: 0px; } #pageHeader { height: 171px; padding: 0px; background: transparent url(bg-4.gif) top left repeat-x; } #pageHeader h1 { padding: 0px; margin: 0px; float: left; width: 396px; height: 171px; background: transparent url(cr-tl.jpg) top right no-repeat; } #pageHeader h1 span { display: none; } #pageHeader h2 { padding: 0px; margin: 0px; position: absolute; top: 0px; right: 0px; width: 350px; height: 171px; background: transparent url(cr-tr.gif) top right no-repeat; } #pageHeader h2 span { display: none; } #quickSummary p.p1 { width: 310px; height: 67px; background: transparent url(cr-r1.png) top right no-repeat; position: absolute; top: 171px; right: 0px; margin: 0px; } #quickSummary p.p1 span { display: none; } #quickSummary p.p2 { position: absolute; top: 154px; left: 25px; margin: 0px; font-size: 10px; color: #CDC667; padding-left: 8px; background: transparent url(glitch.gif) center left no-repeat; } #quickSummary p.p2 a { color: #D9D48C; font-weight: bold; text-decoration: none; } #quickSummary p.p2 a:hover { color: #fff; text-decoration: underline; } #preamble { display: none; } #supportingText { font: 85%/140% arial, sans-serif; color: #302D0A; background-color: #fff; border: solid 1px #997E00; /*height: 350px; overflow: auto;*/ margin-left: 21px; margin-right: 310px; padding: 10px 20px; } #explanation h3 { height: 10px; background: transparent url(h_sowhat.gif) top left no-repeat; } #participation h3 { height: 10px; background: transparent url(h_participation.gif) top left no-repeat; } #benefits h3 { height: 10px; background: transparent url(h_benefits.gif) top left no-repeat; } #requirements h3 { height: 10px; background: transparent url(h_requirements.gif) top left no-repeat; } #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display: none; } #footer { z-index: 1; position: absolute; top: 64px; left: 150px; text-align: center; width: 257px; background: transparent url(bg-6.png) top left no-repeat; height: 45px; padding-top: 13px; voice-family: "\"}\""; voice-family:inherit; height: 32px; } #footer a:link, #footer a:visited { font-size: 10px; font-weight: normal; color: #fff; text-decoration: none; padding: 4px 12px 4px 13px; } #footer a:hover { background: transparent url(bg-6a.png) center center no-repeat; } /*#footer a { color: #fff; text-decoration: none; text-align: center; display: block; float: left; width: 46px; height: 45px; margin: 0px; margin-right: 10px; background: transparent url(bg-5.png) top left no-repeat; } #footer a:hover { background: transparent url(bg-5a.png) top left no-repeat; }*/ /* left hand fooling around */ #lselect { position: absolute; top: 238px; right: 0px; background: transparent url(cr-r2a.png) top right no-repeat; width: 310px; height: 213px; padding: 10px 60px 10px 55px; voice-family: "\"}\""; voice-family:inherit; width: 195px; height: 193px; } #lselect h3 { height: 15px; background: transparent url(h_select.gif) top left no-repeat; margin: 0px 10px 8px 0px; position: relative; left: -20px; } #lselect h3 span { display: none; } #lselect li { font: normal 10px arial, sans-serif; line-height: 170%; text-decoration: none; color: #6D6100; letter-spacing: -1px; } #lselect a { font: bold 10px arial, sans-serif; text-decoration: none; text-transform: uppercase; color: #fff; letter-spacing: normal; } #lselect a.c { font-weight: normal; color: #6D6100; text-transform: lowercase; letter-spacing: -1px; } #lselect a:hover { text-decoration: underline; } #larchives { position: absolute; line-height: 80%; text-align: center; top: 451px; right: 0px; background: transparent url(cr-r3a.png) top right no-repeat; width: 310px; height: 50px; padding: 15px 65px 6px 45px; voice-family: "\"}\""; voice-family:inherit; width: 200px; height: 29px; } #larchives h3 { display: none; } #larchives li { font: normal 10px arial, sans-serif; display: inline; padding-right: 6px; } #larchives li a { color: #443901; text-decoration: none; } #larchives li a:hover { color: #fff; text-decoration: underline; } #lresources { height: 74px; background: transparent url(bg-7.png) top right repeat-x; } #lresources h3 { width: 310px; height: 74px; float: right; background: transparent url(cr-br.png) top right no-repeat; margin: 0px; } #lresources h3 span { display: none; } #lresources ul { padding: 37px 0px 0px 25px; } #lresources li { display: inline; } #lresources li a { color: #fff; font-size: 9px; font-weight: bold; text-decoration: none; text-transform: lowercase; padding-right: 5px; } #lresources li a:hover { text-decoration: underline; } /* Extra elements */ #extraDiv1 { position: absolute; top: 0px; left: 0px; width: 750px; height: 118px; background: transparent url(mnemonic.gif) top left no-repeat; } #extraDiv2 { width: 90px; height: 18px; position: absolute; top: 112px; left: 156px; background: transparent url(ani1.gif) top left no-repeat; } #extraDiv3 span { width: 61px; height: 51px; position: absolute; top: 13px; left: 315px; background: transparent url(ani2.gif) top left no-repeat; } #extraDiv4 { width: 256px; height: 6px; position: absolute; top: 45px; left: 98px; background: transparent url(ani3.gif) top left no-repeat; } #extraDiv5 { width: 100%; position: relative; top: -21px; } #extraDiv5 span { float: right; width: 209px; height: 2px; background: transparent url(ani4.gif) top left no-repeat; margin-right: 40px; } /* **** Beginning of Advanced Effects **** */ #lselect ul>li { width: 100px; line-height: 10px; } #lselect ul>li a {display: block;} #lselect ul>li a.c {display: inline;} #lselect ul>li {position: relative; left: -14px;} #lselect ul>li+li {position: relative; left: -12px;} #lselect ul>li+li+li {position: relative; left: -10px;} #lselect ul>li+li+li+li {position: relative; left: -8px;} #lselect ul>li+li+li+li+li {position: relative; left: 98px; top: -11em;} #lselect ul>li+li+li+li+li+li {position: relative; left: 100px; top: -11em;} #lselect ul>li+li+li+li+li+li+li {position: relative; left: 102px; top: -11em;} #lselect ul>li+li+li+li+li+li+li+li {position: relative; left: 104px; top: -11em;} #larchives ul>li a[accesskey="p"] { display: block; width: 37px; height: 0; overflow: hidden; padding-top: 18px; background: transparent url(archive-b1a.gif) top left no-repeat; position: absolute; top: 16px; left: 70px; color: #958500; } #larchives ul>li a[accesskey="p"]:hover { background: transparent url(archive-b1b.gif) top left no-repeat; } #larchives ul>li a[accesskey="n"] { display: block; width: 31px; height: 0; overflow: hidden; padding-top: 18px; background: transparent url(archive-b2a.gif) top left no-repeat; position: absolute; top: 16px; left: 108px; color: #958500; } #larchives ul>li a[accesskey="n"]:hover { background: transparent url(archive-b2b.gif) top left no-repeat; } #larchives ul>li+li a[accesskey="w"] { display: block; width: 35px; height: 0; overflow: hidden; padding-top: 18px; background: transparent url(archive-b3a.gif) top left no-repeat; position: absolute; top: 16px; left: 170px; color: #958500; } #larchives ul>li+li a[accesskey="w"]:hover { background: transparent url(archive-b3b.gif) top left no-repeat; } #supportingText>div#footer { background: none; } div#footer>a:link, div#footer>a:visited { display: block; width: 46px; height: 45px; padding: 13px 0px 0px 0px; background: transparent url(bg-5.png) top left no-repeat; position: absolute; top: 0px; left: 0px; } div#footer>a:hover { background: transparent url(bg-5a.png) top left no-repeat; } div#footer>a+a:link, div#footer>a+a:visited {left: 53px;} div#footer>a+a+a:link, div#footer>a+a+a:visited {left: 106px;} div#footer>a+a+a+a:link, div#footer>a+a+a+a:visited {left: 159px;} div#footer>a+a+a+a+a:link, div#footer>a+a+a+a+a:visited {left: 212px;} #extraDiv3 { background: transparent url(bg-5a.png) top left no-repeat; }/* css Zen Garden submission 026 - 'Zunflower' by Radu Darvas - http://www.homelesspixel.de/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Radu Darvas */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font: 12px/16px arial, helvetica, verdana, sans-serif; color: #555; background: url(bg_left.gif) repeat-y #fff; margin: 0; padding: 0; } a { text-decoration: none; font-weight: bold; color: #655; } a:hover { text-decoration: none; font-weight: bold; color: #e60; } acronym { border: 0 none; } #container { margin: 0; padding: 0; } #quickSummary p, #preamble p { margin: 0; padding: 8px 30px 4px 18px; } #quickSummary .p1 { font-weight: bold; color: #777; } #intro { margin: 0; padding: 0; width: 303px; } h1 { margin: 0; padding: 0; width: 303px; height: 198px; background: url(h1.jpg) no-repeat transparent; } h1 span { display: none; } h2 { margin: 0 0 9px 0; padding: 0; width: 303px; height: 37px; background: url(h2.gif) no-repeat transparent; } h2 span { display: none; } #preamble h3 { margin: 5px 0 0; padding: 0; width: 303px; height: 36px; background: url(the_road.jpg) no-repeat transparent; } #preamble h3 span { display: none; } #supportingText { position: absolute; top: 70px; left: 303px; width: 320px; margin: 0; padding: 0; background: url(support_bg.gif) repeat-y top right transparent; } #supportingText h3, #supportingText p { margin: 0; padding: 0 40px 10px 0px; } #supportingText h3 span { display: none; } #participation h3 { margin: 0 40px 5px 0px; padding: 0; height: 34px; background: url(parti.gif) no-repeat transparent; border-bottom: 1px solid #ccc; } #benefits h3 { margin: 0 40px 5px 0px; padding: 0; height: 34px; background: url(bene.gif) no-repeat transparent; border-bottom: 1px solid #ccc; } #requirements h3 { margin: 0 40px 5px 0px; padding: 0; height: 34px; background: url(req.gif) no-repeat transparent; border-bottom: 1px solid #ccc; } #requirements p.p5 { border-top: 1px solid #ccc; margin: 10px 40px 5px 0; padding: 10px 0 0; } #preamble h3 span { display: none; } #explanation { background: url(so_what_bg.gif) no-repeat top right transparent; } #explanation h3 { margin: 0 15px 20px 0; padding: 0; height: 36px; background: url(so_what.jpg) no-repeat transparent; } #explanation h3 span { display: none; } #linkList { position: absolute; top: 130px; left: 608px; margin: 0; padding: 0; width: 200px; } #linkList h3.select { margin: 0; padding: 0; background: url(select.jpg) no-repeat transparent; height: 26px; } #linkList h3.archives { margin: 0; padding: 0; background: url(archives.jpg) no-repeat transparent; height: 26px; } #linkList h3.resources { margin: 0; padding: 0; background: url(resources.jpg) no-repeat transparent; height: 26px; } #linkList h3 span { display: none; } #linkList #lselect a { text-decoration: underline; color: #766; display: block; } #linkList #lselect a:visited { text-decoration: underline; color: #aaa; } #linkList #lselect a:hover { text-decoration: underline; color: #e60; } #linkList #lselect a.c { display: inline; text-decoration: none; color: #888; } #linkList #lselect a.c:visited { text-decoration: none; color: #999; } #linkList #lselect a.c:hover { text-decoration: none; color: #e60; } #footer { position: relative; margin: 25px 15px 0 -14px; padding: 3px 0 0 20px; background: url(foot.jpg) no-repeat; height: 23px; } #footer a { color: #fff; vertical-align: middle; } ul { margin: 7px 0 7px 20px; padding: 0; } li { margin: 0 0 5px; padding: 0; list-style-type: none; } /* css Zen Garden submission 027 - 'Gothica' by Patrick H. Lauke aka redux - http://redux.deviantart.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Patrick H. Lauke */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Based on the "Gothica" CSS design example for the SitePoint CSS design contest */ /* decorative icons/patterns adapted from http://www.squidfingers.com/ */ /* basic stuff */ body { font: 0.65em/1.3em Verdana, Arial, Helvetica, sans-serif ; font-style: normal; font-weight: normal; font-variant: normal; background: #eee url(background.png) fixed; color: #000; text-align: center; padding: 0; margin: 0; height: 100%; } h3 { width: 100%; /* needed for IE5+ */ font-family: Times, serif; font-size: 100%; text-transform: uppercase; letter-spacing: 0.3em; word-spacing: 0.3em; border-bottom: #888 1px solid; } html > body h3 { /* redefinition of the border to dotted, hidden from IE - because the dashed line that IE uses instead of dots looks a bit too crude in my opinion */ border-bottom: #000 1px dotted; } acronym { /* in this case, I can live with IE's dashed line */ border-bottom: #000 1px dotted; } a, a:link { color: #900; background: transparent; text-decoration: none; } a:visited { color: #933; background: transparent } a:hover { color: #966; background: transparent } a:active { color: #988; background: transparent } /* let's start with the whole page container */ #container { position: relative; margin: 10px auto; width: 750px; padding: 5px; text-align: left; background: #f5f5f5 url(pattern.png) no-repeat center; border: #000 1px solid; color: inherit; } /* and now the specific divs */ #pageHeader { padding: 5px; height: 160px; margin: 5px; border: #000 solid 1px; text-align: left; background: #fff url(tophead.png) no-repeat top left; color: inherit; } #pageHeader h1, #pageHeader h2 { display: none; } #quickSummary { border: 1px #000 dotted; background: #fff; color: inherit; font-size: 0.85em; } #quickSummary, #preamble, #supportingText { text-align: left; margin: 1em 170px 1em 25px; padding: 5px; } #quickSummary a, #preamble a, #supportingText a { text-decoration: none; font-weight: bold; } #explanation { /* a little inelegant, but gets the job done */ margin-top: -3em; } #linkList { position: absolute; top: 180px; right: 0; padding: 25px 5px 5px 5px; margin: 0; width: 150px; background: url(spikes.png) no-repeat center top; } #lselect ul, #lresources ul, #larchives ul { margin: 0 0 0.5em 0; padding: 0; } #lselect ul li, #lresources ul li, #larchives ul li{ list-style-type: none; border: #000 1px solid; padding: 2px; margin: 2px; text-align: left; background: #fff; color: inherit; } /* there seems to be an issue in Opera with the hover on the lselect... any clues to a solution would be appreciated ;) */ #lselect ul li:hover, #lresources ul li:hover, #larchives ul li:hover { background: #900; color: #fff; } #lselect ul li:hover a, #lresources ul li:hover a, #larchives ul li:hover a { background: inherit; color: #eee; } #lselect ul a:hover, #lresources ul a:hover, #larchives ul a:hover { /* this style is there to make up for IE's inability to apply :hover pseudo to an li. of course, it won't look the same as having the whole li turn red, but it should be an acceptable compromise */ background: #900; color: #eee; } #lresources, #larchives { padding: 25px 5px 5px 5px; background: url(spikes.png) no-repeat center top; } #footer { margin: 0; padding: 5px; /* again, I can live with IE's dashed line */ border: 1px #000 dotted; background: #fff; color: inherit; text-align: center; } #footer a { margin-right: 20px; padding-left: 18px; background: url(bullet.png) no-repeat left center; } /* and now for the big caps for each paragraph in supportingText this is again hidden from IE, as it tends to crash otherwise and I really can't be bothered to work around its flaws...consider it icing on the cake for non-IE users */ body > div#supportingText p:first-letter { font: 2em Times, Helvetica, serif; float: left; text-transform: uppercase; margin: 0 3px 3px 0; padding: 0; } /* the following two rules may be just a minor detail, but i think it's worth it. they add a little download icon in front of the sample CSS and HTML download links. the first one works in all 5+ browsers, whereas the second one is only for CSS2 compliant ones. also, use of the |= selector may be "unorthodox", but it was the best I could come up with since the two download links in the "participation" div are not especially marked up with a class, AND there are other links in that div ("CSS Resource Guide", "Send us a link" and "contact me") that do not need the little icon...hence the rule could not be applied to "#participation a" */ #quickSummary a { padding-left: 15px; background: url(download.png) no-repeat left center; } #participation a[href|=zengarden] { /* CSS2-compliant only */ padding-left: 15px; background: url(download.png) no-repeat left center; } /* no need for extras...they're just not displayed */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }/* css Zen Garden submission 028 - 'Atlantis' by Kevin Davis, http://alazanto.org/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Kevin Davis */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* for more work by the author, see http://alazanto.org */ /* have a great day! :) */ /******************************************************************* primary elements */ body { background-color: #000; color: #ccc; margin: 0px; padding: 0px; text-align: center; } p { font: 11pt/16pt georgia,palatino,times,serif; text-align: left; } /******************************************************************* primary hyperlink styling */ a:link { font-weight: normal; text-decoration: none; background-color: transparent; color: #bcf; } a:visited { font-weight: normal; text-decoration: none; background-color: transparent; color: #bde; } a:hover, a:active { text-decoration: underline; background-color: transparent; color: #fff; } /******************************************************************* body content */ #container { position: relative; margin-top: 0px; margin-left: auto; margin-bottom: 0px; margin-right: auto; padding: 1px; /* messy method of overcoming a rendering bug in mozilla 1.4, maybe others */ font: 8pt/12pt georgia,palatino,times,serif; color: #ddd; background: #000 url(backdrop.title.jpg) no-repeat top left; width: 749px; voice-family: "\"}\""; voice-family:inherit; width: 750px; } #pageHeader { display: none; } #pageHeader h1 { display: none; } #pageHeader h1 span { display: none; } #pageHeader h2 { display: none; } #pageHeader h2 span { display: none; } #intro { position: relative; margin-top: 225px; margin-left: 218px; margin-bottom: 10px; margin-right: 39px; padding-top: 10px; padding-left: 10px; padding-bottom: 0px; padding-right: 10px; border: 1px dashed #fff; } #quickSummary { float: left; clear:both; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 7px; width: 165px; voice-family: "\"}\""; voice-family:inherit; width: 175px; } #quickSummary p { font: italic 10pt/22pt georgia,palatino,times,serif; text-align:center; margin: 4px; padding: 0px; } #preamble { clear: right; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; } #intro h3 { margin-top: 0px; margin-left: 0px; margin-bottom: 15px; margin-right: 0px; padding-top: 1px; padding-left: 0px; padding-bottom: 3px; padding-right: 0px; background-color: transparent; font: 14pt georgia,palatino,times,serif; font-weight: normal; text-align: left; color: #fff; } #supportingText { margin-top: 0px; margin-left: 218px; margin-bottom: 10px; margin-right: 39px; padding: 0px; } #supportingText h3 { margin-top: 15px; margin-left: 0px; margin-bottom: 15px; margin-right: 0px; padding-top: 1px; padding-left: 0px; padding-bottom: 3px; padding-right: 0px; font: 14pt georgia,palatino,times,serif; font-weight: normal; text-align: left; background-color: transparent; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #footer { margin-top: 30px; margin-left: 0px; margin-bottom: 30px; margin-right: 0px; text-align: center; background-color: transparent; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #footer a:link, #footer a:visited { background-color: transparent; margin-left: 10px; margin-right: 10px; } /******************************************************************* link list */ #linkList { position: absolute; margin: 0px; padding: 0px; top: 435px; left: 50px; width: 150px; text-align: left; } #linkList h3.select { background: transparent url(linkhead-select.jpg) no-repeat top left; margin: 0px 0px 0px 0px; width: 150px; height: 21px; } #linkList h3.select span { display: none; } #linkList h3.favorites { background: transparent url(linkhead-favorites.jpg) no-repeat top left; margin: 10px 0px 0px 0px; width: 150px; height: 21px; } #linkList h3.favorites span { display: none; } #linkList h3.archives { background: transparent url(linkhead-archives.jpg) no-repeat top left; margin: 10px 0px 0px 0px; width: 150px; height: 21px; } #linkList h3.archives span { display: none; } #linkList h3.resources { background: transparent url(linkhead-resources.jpg) no-repeat top left; margin: 10px 0px 0px 0px; width: 150px; height: 21px; } #linkList h3.resources span { display: none; } #linkList ul { margin-top: 0px; margin-bottom: 10px; margin-left: 10px; margin-right: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; background: transparent url(cr1.gif) no-repeat top center; display: block; padding-top: 5px; margin-bottom: 5px; } #lselect li, #lfavorites li { background: url(docbullet.gif) no-repeat 0px 7px; padding-left: 11px; } #lselect a, #lfavorites a { display:block; text-transform:lowercase; } #lselect a.c, #lfavorites a.c {display:inline; text-transform: none; }/* css Zen Garden submission 029 - 'Backyard' by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Ray Henry */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { background: #fff url(main_bg.gif) repeat-x top left; margin: 0; padding: 0; text-align:left; height:100%; width:100%; } p { margin-top: 0px; text-align: left; } a:link { font-weight: bold; text-decoration: underline; color: #616157; } a:visited { font-weight: bold; text-decoration: underline; color: #616157; } a:hover, a:active { text-decoration: underline; color: #811610; } /* specific divs */ #container { background:transparent; padding: 0px; margin: 0px; width:770px; } #intro { background: transparent url(quicksum_bg.gif) no-repeat top left; width:770px; margin-top:28px; margin-bottom:0; } #pageHeader { margin: 0; padding:0; width:770px; height:72px; voice-family: "\"}\""; voice-family:inherit; margin-bottom:22px; } #pageHeader h1 { background: transparent url(intro_bg.jpg) no-repeat top left; margin-top: 0; width: 403px; height: 72px; float: left; } #pageHeader h2 { background: transparent url(intro_bg2.jpg) no-repeat top left; margin: 0; width: 367px; height: 72px; float: right; } #pageHeader h1 span, #pageHeader h2 span { display:none } #quickSummary { background:transparent; float:left; clear:both; padding-top:10px; padding: 10px; border-top:1px dashed #999; width: 200px; font-family:georgia, serif; font-size: 12px; line-height:30px; color:#616157; voice-family: "\"}\""; voice-family:inherit; margin-top:-1.8em; width:180px; } #quickSummary p.p1:first-letter { padding-right:5px; font-size: 300%; color:#811610; } #preamble p.p1:first-letter { padding-right:5px; font-size: 300%; color:#811610; } #quickSummary p.p2 { line-height:18px; font-family:verdana, arial, sans serif; font-size:11px; } #preamble { background:transparent; clear:both; padding: 10px; width: 200px; font-family:georgia, serif; font-size: 12px; line-height:30px; color:#616157; z-index:5; voice-family: "\"}\""; voice-family:inherit; width:180px; } #preamble h3{ line-height:16px; font-size:15px; padding-bottom:10px; padding-top:10px; border-top:1px solid #811610; border-bottom:1px solid #811610; } #supportingText { background:#F7F7F2; position:absolute; top:100px; padding: 10px; margin-left:200px; border-top:1px solid #999; border-left:1px solid #999; border-bottom:1px solid #999; border-right:1px solid #999; width:366px; height:auto; font-family:georgia, serif; font-size:13px; line-height:19px; color:#616157; voice-family: "\"}\""; voice-family:inherit; margin-left:200px; width:344px; top:100px; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin-bottom:10px; width:300px; height:15px; border-bottom:1px dashed #999; } #explanation h3 { background: transparent url(sup_h3_a.gif) no-repeat; } #participation h3 { background: transparent url(sup_h3_b.gif) no-repeat; } #benefits h3 { background: transparent url(sup_h3_c.gif) no-repeat; } #requirements h3 { background: transparent url(sup_h3_d.gif) no-repeat; } #supportingText h3 span{ display:none; } #footer { text-align: center; border-top:1px solid #CBCBC2; font-family:verdana, arial, sans serif; font-size:10px; } #footer a:link, #footer a:visited { margin: 5px; font-weight: normal; } #linkList { background: url(linklist_bg.gif) no-repeat top left; margin-left: 566px; position: absolute; top: 100px; height:100%; voice-family: "\"}\""; voice-family:inherit; margin-left:566px; } #linkList2 { font: 10px verdana, sans-serif; padding: 10px; width: 204px; } #linkList h3.select, #linkList h3.archives, #linkList h3.resources{ width:180px; height: 20px; } #linkList h3.select { background: transparent url(linklist_a.gif) no-repeat top left; margin: 25px 0px 5px 0px; } #linkList h3.archives { background: transparent url(linklist_b.gif) no-repeat bottom left; margin: 25px 0px 10px 0px; border-top:1px dashed #ccc; padding-top:5px; } #linkList h3.resources { background: transparent url(linklist_c.gif) no-repeat bottom left; margin: 25px 0px 10px 0px; border-top:1px dashed #ccc; padding-top:5px; } #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; color:#555; } #linkList li { list-style-type: none; background: transparent; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #555; } #linkList li a:visited { color: #555; } #linkList li a:hover, #linkList li a:active { color:#811610; } a.c:link, a.c:visited, a.c:hover, a.c:active { font-weight:normal; } #extraDiv1, #extraDiv2 { display:none; }/* css Zen Garden submission 030 - 'Entomology' by Jon Hicks, http://exp.hicksdesign.co.uk/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jon Hicks */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { background: #B61E3D url(bkgd.jpg); font: 12px/16px Georgia, "Times New Roman", Times, serif; color: #390404; margin: 0px; } p { margin-top: -0.8em; } p+p { text-indent: 15px; } h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.3em; margin-top: 2em; } a:link, a:visited { font-style: italic; text-decoration: none; color: #039; } a:visited { font-style: normal; } a:hover, a:active { background: #ffe699; } /* main text divs */ #container { background: #ffc url(mid.jpg) repeat-y center; position: absolute; left: 50%; width: 760px; margin-left: -380px; } #intro { margin: 0px; background: url(top.jpg) no-repeat center top; padding-top: 186px; } #pageHeader h1 span, #pageHeader h2 span { display:none } #quickSummary p.p1:first-line { text-transform: uppercase; } #quickSummary { margin-top: 30px; } #quickSummary p { font-size: 13px; line-height: 22px; } #quickSummary, #preamble, #supportingText { margin-right: 80px; margin-left: 300px; } #supportingText p.p5{ background: url(line.jpg) no-repeat center bottom; margin-right: -80px; margin-left: -300px; margin-top: 30px; height: 30px; text-align: center; } #footer { background: url(bot.jpg) no-repeat center bottom; margin-right: -80px; margin-left: -300px; height: 110px; text-align: center; } #footer a:link, #footer a:visited { font-size: 15px; color: #390404; } /* sidelinks styles */ #linkList { background: url(b5.jpg) no-repeat center bottom; padding-bottom: 150px; width: 195px; position: absolute; left: 90px; top: 200px; border-right: 1px dotted #930; } #linkList h3 { text-align: center; font-style: italic; text-transform: lowercase; letter-spacing: 0.1em; } #linkList h3.select { background: url(b1.jpg) no-repeat center top; padding-top: 110px; font-style: italic; text-transform: lowercase; margin-top: 0px; } linkList h3.favorites { margin-top: 30px; background: url(b2.jpg) no-repeat center top; padding-top: 110px; } #linkList h3.archives { margin-top: 30px; background: url(b3.jpg) no-repeat center top; padding-top: 110px; } #linkList h3.resources { margin-top: 30px; background: url(b4.jpg) no-repeat center top; padding-top: 105px; } #linkList ul { margin: -0.5em 0 0 0; padding: 0px; list-style-type: none; text-align: center; } #linkList li { background: url(listline.gif) no-repeat center bottom; padding-bottom: 15px; } #linkList #lselect a { display: block; font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; } #linkList #lselect a.c{ display: inline; margin-bottom: -1em; font-style: italic; text-transform: none; letter-spacing: 0em; } #linkList #lselect li{ font-style: italic; } /* CSS 2 pseudo elements - not essential but nice in browsers that support it */ h3:first-letter { font-size: 16px; } #linkList h3 :before { content: "("; } #linkList h3 :after { content: ")"; } #footer a:before { content: "{ "; } #footer a:after { content: " }"; } /* css Zen Garden submission 031 - 'Hedges' by Kev Mears, http://www.mearso.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Kev Mears */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* structure --------------------------------- */ body { margin: 0; padding: 0; background: #FFF url("bg_tree.gif") repeat-x left top; color: #888; text-align: center; } #container { position: relative; padding:0; width: 732px; margin: 0 auto; text-align: left; } /* hidden text --------------------------------- */ h1, h2, h3 { margin: 0; background-repeat: no-repeat; background-position: left top; } h1 span, h2 span,h3 span, #quickSummary p.p span { display: none; } /* header and summary --------------------------------- */ #pageHeader h1 { height: 200px; background: url("nutitle.gif") no-repeat; padding:0; } #quickSummary p.p1 { position: absolute; top: 12em; right: 15px; width: 120px; margin: 75px 0 0 580px; font-size: 80%; text-align: right; } #quickSummary p.p2 { position: absolute; top: 25em; right: 15px; width: 120px; margin: 0; font-size: 93%; text-align: center; padding-bottom: 90px; background: url("barrow.gif") no-repeat bottom; background-repeat: no-repeat; } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited { white-space: nowrap; font: bold 92%/1.3em Verdana,Arial,Sans-serif; text-transform: uppercase; } /* preamble --------------------------------- */ #preamble { position: relative; left: 195px; padding-bottom: 0px; width: 400px; } #preamble h3 { height: 70px; background-image: url("road.gif"); } #preamble p { width: 350px; } /* supporting text --------------------------------- */ #supportingText { position: relative; left: 195px; padding-bottom: 0px; border-bottom: 2px solid #363; width: 400px; } #supportingText p { line-height: 1.5em; } #supportingText h3 { height: 70px; } #explanation h3 { background-image: url("what.gif"); } #participation h3 { background-image: url("participation.gif"); } #benefits h3 { background-image: url("benefits.gif"); } #requirements h3 { background-image: url("requirements.gif"); } /* link list --------------------------------- */ #linkList { position: absolute; top: 200px; left: 0; width: 190px; } #linkList h3 { height: 41px; } #lselect h3 { background-image: url("select.gif"); } #larchives h3 { background-image: url("archives.gif"); } #lresources h3 { background-image: url("resources.gif"); } #linkList ul { margin: 1em 0 1em; padding: 0; font-size: 90%; list-style: none; text-align: left; } #larchives li, #lresources li { text-transform: lowercase; } #linkList ul li { margin: 0 0 .5em; line-height: 1em; } #linkList li a:link, #linkList li a:visited { font-family: Verdana,Arial,Sans-serif; font-size: 90%; } #linkList #lselect a:link, #linkList #lselect a:visited { display: block; } #linkList #lselect a.c:link, #linkList #lselect a.c:visited { display: inline; font-family: Georgia,Serif; font-weight: normal; background-color: transparent; text-transform: lowercase; } /* footer --------------------------------- */ #footer { background: #D9D98B; color: #fff; padding: 10px 20px; border-top: 1px solid #363; font: 85% Verdana,Arial,Sans-serif; text-align: center; } #footer a:link, #footer a:visited { padding: 0 5px; font-weight: normal; } /* links --------------------------------- */ a:link, a:visited { color: #090; background-color: transparent; font-weight: bold; text-decoration: none; } a:hover { color: #663; background-color: transparent; text-decoration: underline; } /* misc --------------------------------- */ acronym { border-width: 0; } /* css Zen Garden submission 032 - 'Crab Apple' by Jai Brinkofski - http://www.jaiandbecky.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jai Brinkofski */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* hide this stuff */ #pageHeader h1 span, #pageHeader h2 span, #pageHeader, #quickSummary p.p1, #preamble h3 span, #explanation h3, #participation h3, #benefits h3, #requirements h3, #lselect h3, #larchives h3, #lresources h3 {display: none} /* show this stuff */ body {background-color: #D0D1D0; background-image: url(banner.jpg); background-repeat: no-repeat; left: 0px; top: 0px; width: 770px} acronym {border-bottom-width: 1px; border-bottom-style: dashed; cursor: help} #container {background-image: url(t.jpg); background-repeat: no-repeat; left: 0px; top: 0px; background-position: 0px 99px; position: absolute; width: 770px; padding-bottom: 5px} #intro {position: relative; left: 133px; top: 207px; padding-bottom: 50px; z-index: 2} #quickSummary {top: -57px; position: absolute; left: 291px; z-index: 2} #quickSummary p.p2 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold} #quickSummary p.p2 a:link {color: maroon; font-weight: bold; font-size: 12px; text-decoration: none} #quickSummary p.p2 a:visited {color: maroon; font-weight: bold; font-size: 12px; text-decoration: none} #quickSummary p.p2 a:hover {color: yellow; font-weight: bold; font-size: 12px; text-decoration: none; background-color: #333333} #quickSummary p.p2 a:active {color: maroon; font-weight: bold; font-size: 12px; text-decoration: none} #preamble {width: 614px; position:relative; left: 7px; top: -40px; overflow: visible; z-index: 1; padding-right: 3px} #preamble p {padding-right: 20px; padding-left: 5px; font-family: Arial, Helvetica, sans-seri; font-size: 10px; color: #333333} #preamble p.p1 {padding-top: 28px} #supportingText {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; width: 614px; position:relative; left:141px; margin-top: 30px; top: 100px; z-index: 1; border-width:1px;border-color:#c2c2c2; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding-right: 3px; margin-bottom: 100px} #supportingText p {padding-right: 20px; padding-left: 5px} #supportingText a:link {color: #FF0000; font-weight: normal; text-decoration: none} #supportingText a:visited {color: #990000; text-decoration: underline;} #supportingText a:hover {color: #FFFFFF; background-color: #666666; text-decoration: none} #supportingText a:active {color: #FF0000; text-decoration: underline overline; background-color: #FFFFFF} #explanation {background-image: url(sowhatisthisabout.jpg); background-repeat: no-repeat; padding-top: 23px; padding-right: 3px} #participation {background-image: url(participation.jpg); background-repeat: no-repeat; left: 0px; top: 153px; z-index: 1; padding-top: 23px} #benefits {background-image: url(benefits.jpg); background-repeat: no-repeat; left: 0px; top: 366px; z-index: 1; padding-top: 23px} #requirements {background-image: url(requirements.jpg); background-repeat: no-repeat; left: 0px; top: 466px; z-index: 1; padding-top: 23px} #footer {padding-left: 10px;} #footer a:link {font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bold; font-size: 12px} #footer a:hover {font-family: Arial, Helvetica, sans-serif; color: yellow; font-weight: bold; font-size: 12px; background-color: #333333} #linkList {position: absolute; left: 9px; top: 0px; width: 121px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; z-index: 2; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-color: #c2c2c2; border-bottom-color: #c2c2c2; border-left-color: #c2c2c2; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; margin-top: 208px; bottom: 5px} #linkList a:link {color: #003366; font-weight: normal; text-decoration: none} #linkList a:visited {color: #000033; font-weight: normal; text-decoration: none} #linkList a:hover {color: #FFFFFF; font-weight: normal; text-decoration: none; background-color: #666666} #linkList a:active {color: #FF0000; text-decoration: underline overline; background-color: #FFFFFF} #lselect {width: 121px; left: 0px; top: -1px; z-index: 1; padding-top: 23px} #larchives {background-image: url(archives.jpg); background-repeat: no-repeat; left: 0px; width: 121px; z-index: 1; padding-top: 23px; background-position: -9px 0px} li {list-style-position: outside; list-style: url(li.jpg); margin: 0px 10px 0px -10px; padding-top: 7px} #lresources {background-image: url(resources.jpg); background-repeat: no-repeat; left: 0px; width: 121px; z-index: 1; padding-top: 23px; background-position: -9px 0px}/* css Zen Garden submission 033 - 'Fleur-de-lys' by Claire Campbell, http://www.tanfa.co.uk/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Claire Campbell */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font: 100% verdana, helvetica, arial, sans-serif; margin: 0; padding: 0; background: #f0e7d7; color: #000; text-align: center; min-width: 760px; } p, ul, #footer {font-size: 0.8em;} h1, h2, h3 { font-family: georgia, serif; letter-spacing: 0.1cm; } a:link, a:visited, a:active { color: #800000; background: transparent; font-weight: bold; font-size: 0.9em; text-decoration: none; } a:hover { color: #aaab9c; background: transparent; text-decoration: underline; } #intro {clear: both;} #container { width: 760px; background: #f0e7d7 url(bodybg.jpg) repeat-y 0% 0%; color: #000; padding: 0; margin: 0 auto; } #pageHeader { position: relative; float: right; width: 230px; padding: 0; margin: 0; margin-left: -3px; background: #f0e7d7; color: #000; } #pageHeader h1 { background: #f0e7d7 url(zenhead.jpg) no-repeat 0% 0%; color: #800000; height: 174px; padding: 0; margin: 0; } #pageHeader h2 { padding: 0; margin: 0; display: none; } #pageHeader h1 span {display: none;} #quickSummary { position: relative; width: 230px; float: right; clear: right; background: transparent url(summarybg.gif) no-repeat bottom left; color: #000; margin: 0; padding: 0 0 20px 0; } #quickSummary p { font-family: georgia, serif; margin: 0; padding: 10px 10px 10px 20px; text-align: right; } #preamble { width: 530px; background: #fff url(lilybg.jpg) no-repeat 0% 0%; color: #000; margin: 0; padding: 50px 0 0 0; } #preamble h3 { width: 350px; height: 40px; padding: 0; margin: 0 0 0 170px; } #preamble h3 span {display: none;} #preamble p { padding: 0; margin: 0; padding: 20px 30px 0px 0px; text-align: justify; } #preamble p.p3 { padding-bottom: 20px; } #preamble p:first-letter { color: #800000; background: transparent; font-size: 16px; font-weight: bold; vertical-align: baseline; } #preamble p.p1 {margin-left: 200px;} #preamble p.p2 {margin-left: 180px;} #preamble p.p3 {margin-left: 80px;} #supportingText { float: left; clear: left; text-align: justify; background: #fff url(supportbg.gif) no-repeat top right; color: #000; padding-bottom: 20px; padding-top: 23px; border-right: 10px solid #800000; width: 530px; \width: 540px; w\idth: 530px; } #supportingText h3 { padding: 5px 30px 6px 0; margin: 10px 0 0 0; border-top: 1px solid #aaab9c; font-size: 0.9em; text-align: right; background: #fff url(suph3bg.jpg) no-repeat bottom right; color: #aaab9c; } #supportingText h3 span {} #supportingText p {padding: 15px 20px 0 50px; margin: 0;} #supportingText p:first-letter { color: #800000; background: transparent; font-size: 16px; font-weight: bold; vertical-align: baseline; } #explanation { background: #fff url(sowhatbg.jpg) no-repeat 0% 0%; color: #000; } #explanation h3 {visibility: hidden;} #explanation h3 span {} #explanation p.p1 {padding-top: 30px;} #requirements p.p5 { text-align: right; padding-bottom: 0; margin-bottom: -180px; } #linkList { margin: 0; padding: 0; margin-left: 530px; padding: 30px 15px 20px 0px; } #linkList h3 { padding: 5px 0 6px 30px; margin: 0; border-top: 1px solid #aaab9c; border-right: 1px solid #aaab9c; font-size: 0.9em; text-align: right; background: #f0e7d7 url(listh3bg.jpg) no-repeat bottom left; color: #aaab9c; text-align: left; } #linkList ul { margin: 0; padding: 0 0 10px 0; color: #aaab9c; background: transparent; border-right: 1px solid #aaab9c; } #linkList li { list-style-type: none; display: block; padding: 0; margin: 0; padding: 0; } #linkList #lselect li {padding: 1px 0; margin: 3px 0;} #linkList #larchives li, #linkList #lresources li { padding: 1px 0; margin: 0; text-align: right; } #larchives, #lresources { margin-top: 30px; text-align: left; } #lselect a, #larchives a, #lresources a { display:block; text-transform: lowercase; font-family: georgia, serif; font-size: 0.9em; font-weight: 700; padding: 10px 0 3px 0; } #lselect a { letter-spacing: 0.1em; background: #f0e7d7 url(linkbg.jpg) no-repeat 50% 0%; color: #800000; } #larchives a, #lresources a { font-family: verdana, helvetica, arial, sans-serif; background: #f0e7d7; padding: 3px 30px 3px 0; margin: 0; background: #f0e7d7 url(link2bg.jpg) no-repeat 100% 50%; color: #800000; } #lselect a.c { display:inline; text-transform: none; border-width: 0px; letter-spacing: 0; font-family: verdana, helvetica, sans-serif; background: #f0e7d7; color: #aaab9c; padding: 0; } #footer { margin: 0; padding: 0; position: relative; top: 0px; left: 630px; width: 6em; text-align: center; padding-bottom: 10px; } #footer a { display: block; width: 100%; background: #f7f2ea url(linkfootbg.jpg) no-repeat 0% 0%; color: #aaab9c; padding: 5px 0; border-width: 1px; border-color: #ffe #aaab9c #ccc #ffe; border-style: solid; text-decoration: none; } #footer a:hover { color: #800000; background: #f0e7d7 url(linkbg.jpg) no-repeat 0% 0%; border-color: #aaab9c #ffe #ffe #ccc; } #extraDiv1 { clear:both; display: block; position: relative; z-index: 10; padding: 0; margin: 0 auto; margin-top: -10px; background: #fff url(bottombg.jpg) no-repeat 109px 0; color: #000; height: 17px; width: 760px; } #extraDiv span #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display: none;} /* css Zen Garden submission 034 - 'zengrounds' by Andrea Piernock, http://www.snooble.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Andrea Piernock */ /* Style based on newgrounds.com, adapted with permission */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { margin: 0; padding: 0; background: #222 url(bg_main.gif) top left repeat-x; color: #fff; font-family: Verdana, Helvetica, Arial, sans-serif; } a { background: transparent; text-decoration: none; } a:link { color: #fc3; } a:visited { color: #f90; } a:active { color: #fff; } a:hover { color: #ff3; } acronym { cursor: help; border-bottom: 1px dotted #fff; } a acronym { cursor: help; border-bottom: 1px dotted #fc3; } #container { position: relative; top: 0; left: 50%; width: 750px; margin: 0 0 0 -375px; padding: 0; background: #222; } #container #intro { margin: 0 215px 0 0; padding: 10px 0 0 0; border-right: 10px solid #4E441B; } #container #intro #pageHeader { width: 500px; height: 105px; margin: 0 10px; padding: 10px 0 0 0; background: url(csszen.gif) top left no-repeat; } #container #intro #pageHeader h1, #container #intro #pageHeader h2 { display: none; } #container #intro #quickSummary { margin: 0 20px; padding: 0 0 10px 0; } #container #intro #quickSummary p.p1 { height: 75px; margin: 0; padding: 0; background: url(demo.gif) top left no-repeat; } #container #intro #quickSummary p.p1 span { display: none; } #container #intro #quickSummary p.p2 { margin: 10 0 0 0; padding: 0; font-size: 0.7em; font-weight: bold; text-align: center; } #container #intro #preamble { width: 500px; margin: 0 10px 15px 10px; padding: 0 0 15px 0; background: url(bottomRoad.gif) bottom left no-repeat; } #container #intro #preamble h3 { height: 15px; margin: 0; padding: 0; background: url(road.gif) top left no-repeat; } #container #intro #preamble h3 span { display: none; } #container #intro #preamble p { margin: 0; padding: 5px 10px; background: url(tileRoad.gif) top left repeat-y; font-size: 0.8em; } #container #supportingText { margin: 0 215px 0 0; padding: 0; border-right: 10px solid #4E441B; } #container #supportingText div { width: 500px; margin: 0 10px 15px 10px; padding: 0; background: url(textBoxBg.gif) bottom left repeat-y; } #container #supportingText h3 { height: 65px; margin: 0; padding: 0; } #container #supportingText h3 span { display: none; } #container #supportingText #explanation h3 { background: url(textBoxHeadExplain.gif) top left no-repeat; } #container #supportingText #participation h3 { background: url(textBoxHeadPart.gif) top left no-repeat; } #container #supportingText #benefits h3 { background: url(textBoxHeadBenefits.gif) top left no-repeat; } #container #supportingText #requirements h3 { background: url(textBoxHeadRequir.gif) top left no-repeat; } #container #supportingText p { margin: 0; padding: 0 10px 10px 15px; font-size: 0.8em; } #container #supportingText p.p1 { margin-top: -35px; padding-right: 75px; } #container #supportingText #explanation p.p2, #container #supportingText #participation p.p4, #container #supportingText #benefits p.p1, #container #supportingText #requirements p.p5 { padding-bottom: 25px; background: url(textBoxBottom.gif) bottom left no-repeat; } #container #supportingText #footer { margin: 0; padding: 0 0 25px 0; background: none; font-size: 0.7em; font-weight: bold; text-align: center; } #container #supportingText #footer a { margin: 0; padding: 0 10px; border-left: 5px solid #666; border-right: 5px solid #666; } #container #supportingText #footer a:hover { background: #444; color: #fff; } #container #linkList { position: absolute; top: 0; right: 0; width: 225px; margin: 0; padding: 5px 0 0 0; background: url(linkTile.gif) top right repeat-y; } #container #linkList #linkList2 div h3 span { display: none; } #container #linkList #linkList2 #lselect a { display: block; width: 100%; } #container #linkList #linkList2 #lselect a.c { display: inline; width: auto; } #container #linkList #linkList2 #lselect { margin: 0 0 10px 0; padding: 0 0 20px 0; background: url(styleBottom.gif) bottom right no-repeat; } #container #linkList #linkList2 #lfavorites, #container #linkList #linkList2 #larchives, #container #linkList #linkList2 #lresources { margin: 0 0 10px 0; padding: 0 0 15px 0; background: url(boxBottom.gif) bottom right no-repeat; } #container #linkList #linkList2 #lselect h3.select, #container #linkList #linkList2 #lfavorites h3.favorites, #container #linkList #linkList2 #larchives h3.archives, #container #linkList #linkList2 #lresources h3.resources { height: 40px; margin: 0; padding: 0; } #container #linkList #linkList2 #lselect h3.select { background: url(headStyle.gif) top right no-repeat; } #container #linkList #linkList2 #lfavorites h3.favorites { background: url(faves.gif) top right no-repeat; } #container #linkList #linkList2 #larchives h3.archives { background: url(arcs.gif) top right no-repeat; } #container #linkList #linkList2 #lresources h3.resources { background: url(res.gif) top right no-repeat; } #container #linkList #linkList2 #lselect ul { list-style: none; margin: 0 10px 0 0; padding: 0 10px 5px 80px; background: url(tileStyle.gif) top right repeat-y; } #container #linkList #linkList2 #lfavorites ul, #container #linkList #linkList2 #larchives ul, #container #linkList #linkList2 #lresources ul { list-style: none; margin: 0 10px 0 0; padding: 0 10px 5px 40px; background: url(tile.gif) top right repeat-y; } #container #linkList #linkList2 #lselect li, #container #linkList #linkList2 #lfavorites li, #container #linkList #linkList2 #larchives li, #container #linkList #linkList2 #lresources li { margin: 0; padding: 0; font-size: 0.7em; }/* css Zen Garden submission 035 - 'Release One' by Didier Hilhorst, http://www.nundroo.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Didier Hilhorst */ /* Added in 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Overall Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ body { background: #d8d8d8 url(bg.gif) repeat-y top left; font-family: 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif; margin: 0; padding: 0; color: #666; } /* Layout Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #container { background: transparent url(bg_rel-one.gif) no-repeat bottom right; margin: 0; padding: 0; } #intro { background: transparent url(bg_pattern.gif) repeat top left; margin: 0; padding: 0; border-bottom: 2px solid #fff } #supportingText { background: transparent url(bg_left.gif) repeat-y top left; margin: 0; padding: 0; } #pageHeader { background: #9bec37 url(bg_header.gif) repeat-y top left; color: #666; height: 180px; margin: 0; border-bottom: 2px solid #fff; } #pageHeader h1 { display: none; } #pageHeader h2 { display: none; } #quickSummary { height: 166px; width: 735px; background: #100b0a url(bg_sub_header.jpg) no-repeat top right; color: #fff; border-bottom: 2px solid #fff; margin: 0; } #quickSummary p.p1 { padding: 14px; margin: 0; width: 188px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 160px; /* Actual value for conformant browsers */ } html>#quickSummary p.p1 { width: 160px; /* Be nice to Opera */ } #quickSummary p.p2 { padding: 0px 14px 14px 14px; margin: 0; width: 158px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 130px; /* Actual value for conformant browsers */ } html>#quickSummary p.p2 { width: 130px; /* Be nice to Opera */ } #preamble { margin-left: 233px; background: #f90 url(bg_preamble.gif) no-repeat top right; color: #fff; border-right: 2px solid #fff; padding-bottom: 16px; width: 502px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 500px; /* Actual value for conformant browsers */ } html>#preamble { width: 500px; /* Be nice to Opera */ } #explanation, #participation, #benefits { margin-left: 233px; border: 1px solid #bbb; background: #f5f5f5; color: #666; margin-bottom: 2px; width: 500px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 498px; /* Actual value for conformant browsers */ } html>#explanation, #participation, #benefits { width: 498px; /* Be nice to Opera */ } #requirements { margin-left: 233px; border: 1px solid #bbb; background: #f5f5f5; color: #666; margin-bottom: 0; padding-bottom: 16px; width: 500px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 498px; /* Actual value for conformant browsers */ } html>#requirements { width: 498px; /* Be nice to Opera */ } #footer { border-top: 2px solid #fff; background: #9bec37 url(bg_footer.gif) no-repeat top left; color: #fff; padding: 14px 0 8px 252px; height: 36px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; height: 12px; /* Actual value for conformant browsers (IE6 needs a height value to display the background correctly. Don't even start...) */ } html>#footer { height: 12px; /* Be nice to Opera */ } #linkList { position: absolute; background: #b5b5b5; color: #666; top: 350px; padding: 12px; border-right: 2px solid #fff; width: 231px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 207px; /* Actual value for conformant browsers */ } html>#linkList { width: 207px; /* Be nice to Opera */ } #larchives, #lfavorites, #lresources { background: #dfdfdf; color: #666; border: 2px solid #fff; padding: 12px; margin: 0 0 12px 0; } #lselect { background: #dfdfdf url(bg_lselect.gif) no-repeat top right; color: #666; border: 2px solid #fff; padding: 12px; margin: 0 0 12px 0; } /* Text Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ p { font-size: 11px; text-align: justify; } #preamble p, #quickSummary p.p2 { line-height: 1.5; color: #fff; background: transparent; } #preamble p { font-size: 10px; width: 250px; text-align: justify; } #preamble p.p1 { margin: 16px 18px 10px 18px; } #preamble p.p2 { margin: 0 18px 10px 18px; } #preamble p.p3 { padding: 0; margin: 0 18px 0 18px; } /* First Paragraphs */ #explanation p.p1, #participation p.p1, #requirements p.p1 { padding: 0; margin: 16px 18px 12px 18px; } /* Intermediate Paragraphs */ #participation p.p2, #participation p.p3, #requirements p.p2, #requirements p.p3, #requirements p.p4 { padding: 0; margin: 12px 18px 12px 18px; } /* Last Paragraphs */ #explanation p.p2, #participation p.p4 { padding: 0; margin: 0px 18px 16px 18px; } #requirements p.p5 { margin: 0px 18px 0px 18px; padding: 0; } /* One Paragraph */ #benefits p.p1 { margin: 16px 18px 16px 18px; } #supportingText p { line-height: 1.5; } #quickSummary p.p1 { font-size: 9px; background: transparent; color: #999; text-align: left; } #quickSummary p.p2 { font-size: 9px; color: #999; text-align: left; } #footer { font-size: 9px; font-family: 'Arial', Helvetica, sans-serif; /* Looks slightly better */ } /* Lists Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #linkList ul { font-size: 10px; list-style:none; margin: 0; padding: 0; } #linkList ul li { background: url(bullet_gen.gif) no-repeat 2px 3px; margin: 0; padding: 0 0 5px 15px; line-height: 12px; color: #999; } #linkList #lselect li { background: url(bullet_design.gif) no-repeat 2px 3px; font-size: 9px; } #linkList #lfavorites li { background: url(bullet_fav.gif) no-repeat; font-size: 9px; } #linkList #lselect a:link, #linkList #lselect a:visited, #linkList #lfavorites a:link, #linkList #lfavorites a:visited { display: block; } #linkList #lselect a.c:link, #linkList #lselect a.c:visited, #linkList #lfavorites a.c:link, #linkList #lfavorites a.c:visited { display:inline; } #larchives li, #lresources li { text-transform: lowercase; } /* Links Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ a, a:link, a:visited { background: transparent; color: #333; text-decoration: underline; } a:hover { background: transparent; color: #333; text-decoration: none; } #quickSummary a, #quickSummary a:link, #quickSummary a:visited { background: transparent url(download.gif) no-repeat 0 4px; color: #fff; text-transform: uppercase; text-decoration: none; padding-left: 8px; } #quickSummary a:hover { text-decoration: underline; } #linkList a, #linkList a:link, #linkList a:visited { background: transparent; color: #444; text-decoration: none; } #linkList a:hover { background: transparent; color: #333; text-decoration: underline; } #linkList a.c, #linkList a.c:link, #linkList a.c:visited { background: transparent; color: #666; text-decoration: none; } #linkList a.c:hover { background: transparent; color: #333; text-decoration: underline; } #linkList #lselect a { font-size: 10px; } #linkList #lselect a.c { font-size: 9px; text-transform: lowercase; } #footer a, #footer a:link, #footer a:visited { background: transparent url(arrow_footer.gif) no-repeat 0 2px; color: #fff; text-decoration: none; text-transform: uppercase; padding-left: 8px; } #footer a:hover { text-decoration: underline; } /* Headings Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ h3 { margin-bottom: 0px; } h3 span { display: none; } #linkList h3 { width: 150px; height: 20px; margin-top: 20px; } #preamble h3 { background: transparent url(title_road.gif) no-repeat top left; width: 500px; height: 34px; border-bottom: 2px solid #fff; margin: 0; height: 36px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; height: 34px; /* Actual value for conformant browsers */ } html>#preamble h3 { height: 34px; /* Be nice to Opera */ } #explanation h3, #participation h3, #benefits h3, #requirements h3 { width: 498px; height: 30px; margin: 0; } #explanation h3 { background: transparent url(title_about.gif) no-repeat top left; } #participation h3 { background: transparent url(title_partici.gif) no-repeat top left; } #benefits h3 { background: transparent url(title_benef.gif) no-repeat top left; } #requirements h3 { background: transparent url(title_req.gif) no-repeat top left; } #lselect h3, #lfavorites h3, #larchives h3, #lresources h3 { height: 28px; width: 100%; margin: 0; } #lselect h3 { background: transparent url(bg_select_des.gif) no-repeat top left; } #lfavorites h3 { background: transparent url(bg_select_fav.gif) no-repeat top left; } #larchives h3 { background: transparent url(bg_select_arc.gif) no-repeat top left; } #lresources h3 { background: transparent url(bg_select_res.gif) no-repeat top left; } /* Other Definitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ acronym { cursor: help; } #preamble acronym { border-bottom: 1px dotted #ffe0b3; } #lresources acronym { border-bottom: 1px dotted #999; } #supportingText acronym { background: transparent url(acro.gif) no-repeat center right; padding-right: 11px; margin-right: 1px; cursor: help; border: 0; } #participation a acronym { background: transparent; padding: 0; margin: 0; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; /* I was tempted at times though... */ } img { display: none; }/* css Zen Garden submission 036 - 'White Lily' by Jens Kristensen, http://j-k.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jens Kristensen */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */ /* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */ /* basic elements */ /*---------------------------------------------------*/ body, html, div { margin: 0; padding: 0; } body { font: 8pt/16pt verdana, geneva, arial, sans serif; color: #000; background: #fff url(lbg.gif) repeat-y; } /* specific divs */ /* container keeps it all together */ /*---------------------------------------------------*/ #container{ border-top:1px solid #230; border-right: 1px solid #230; width:760px; margin: 0px; padding: 0px; background: transparent url(topbg.gif) repeat-x; } /* intro div and its content */ /*---------------------------------------------------*/ #intro { margin:0; padding:0; margin-top:20px; width:760px; background: transparent url(lsh.gif) no-repeat 687px 231px; } #pageHeader { position:absolute; left:0; width: 355px; height:201px } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(centerpiece.jpg) no-repeat; margin-top: 0px; width: 355px; height: 201px; float: left; } #pageHeader h1 span,#pageHeader h2,#pageHeader h2 span { display:none; } #quickSummary{ margin: 0 0 0 355px; width:332px; height: 200px; background: #ABBC47 url(quicksumbg.gif); border-right:1px solid #ABBC47; border-top:1px solid #ABBC47; } #quickSummary p.p1 { font: bold 11px/14px arial,verdana, sans serif; color:#fff; padding:100px 30px 2px 30px; } #quickSummary p.p2{ position:absolute; left:0; top:230px; font: 10px verdana, arial, sans serif; color:#fff; margin:0 30px; } /* visually footer is moved up to be with the intro stuff */ #footer{ position:absolute; left:0; top:230px; font: 10px verdana, arial, sans serif; color:#fff; margin:0 30px 0 400px; width:340px; text-align:right; } #quickSummary p.p2 a, #footer a{ color:#fff; } #quickSummary p.p2 a:hover, #footer a:hover{ color:#230; background-color:#fff; text-decoration:none; } /* visually we now move into the main area of the page /*---------------------------------------------------*/ #preamble{ padding:50px 30px 30px 30px; margin:30px 0 0 355px; border-width:0 0 1px 1px; border-color:#fff #ddd; border-style:solid; text-align:left; background: transparent url(endsection.gif) no-repeat bottom center; width:343px; } #preamble p, #explanation p, #benefits p, #participation p, #requirements p{ text-align:justify; } #preamble h3{ background: transparent url(h3preamble.gif) no-repeat bottom left; margin: 0px; width: 270px; height: 36px; border-bottom:1px solid #ddd; } #preamble h3 span{ display:none } #preamble p.p1{ width: 270px; } #supportingText{ border-width:0 0 1px 1px; border-color:#fff #ddd; border-style:solid; margin:0px 0px 0px 355px; padding:50px 30px 0 30px; width:405px; voice-family: "\"}\""; voice-family: inherit; width:343px; } #explanation, #benefits, #participation, #requirements { padding:0 0 20px 0; margin-bottom:20px; text-align:left; background: transparent url(endsection.gif) no-repeat bottom center; } p{ padding-left: 8px; padding-right: 8px; } .p1{ margin-top:26px; } #quickSummary .p1{ margin-top:0; } /* use images to display headers */ #explanation h3{ background: transparent url(h3explanation.gif) no-repeat bottom left; } #benefits h3{ background: transparent url(h3benefits.gif) no-repeat bottom left; } #participation h3{ background: transparent url(h3participation.gif) no-repeat bottom left; } #requirements h3{ background: transparent url(h3requirements.gif) no-repeat bottom left; } #explanation h3, #benefits h3, #participation h3, #requirements h3 { margin: 0px; min-width: 200px; height: 36px; border-bottom:1px solid #ddd; } #explanation h3 span, #benefits h3 span, #participation h3 span, #requirements h3 span { display:none } /* and finally we place the list of links */ /*---------------------------------------------------*/ #linkList{ position:absolute; left:0px; top:252px; width:355px; padding:50px 30px 0 130px; background: transparent url(lsh.gif) no-repeat top left; voice-family: "\"}\""; voice-family: inherit; width:195px; } #linkList2{ padding:0; } /* use images for headers */ h3.select{ background: transparent url(h3select.gif) no-repeat bottom left; } h3.archives{ background: transparent url(h3archives.gif) no-repeat bottom left; } h3.resources{ background: transparent url(h3resources.gif) no-repeat bottom left; } h3.select, h3.archives, h3.resources { margin: 0px; min-width: 200px; height: 36px; border-bottom:1px solid #ddd; } h3.select span, h3.archives span, h3.resources span{ display:none } /* put some style on the lists */ /* first the list of designs */ #lselect ul { margin: 10px 0 0 0; padding: 10px; } #lselect li { line-height: 2.5ex; list-style-type: none; display: block; padding: 5px 0px 5px 25px; margin: 5px 0; border-bottom:1px solid #eee; background: transparent url(bullet.gif) no-repeat 0px 7px; } #lselect li a{ white-space:nowrap; display:block; font-weight:bold; } #lselect li a.c{ text-decoration:none; display:inline; font-weight:normal; } #lselect li a.c:hover{ text-decoration:underline; } /* then the lists of general info etc */ #larchives ul, #lresources ul { margin: 10px 0 0 0; padding: 10px; } #larchives li, #lresources li { list-style-type: none; display: block; padding: 0px; padding: 0px 0px 0px 25px; margin: 0; background: transparent url(bullet2.gif) no-repeat 2px 7px; } /* some generic stuff */ /*---------------------------------------------------*/ a { color:#230; } a:visited { color:#672; } a:hover { color:#ABBC47; } /* and finally we use one of the extra divs available */ /*---------------------------------------------------*/ #extraDiv1{ width:3px; height:18px; position:absolute; left:354px; top:252px; background: transparent url(ltop.gif) no-repeat; } /* css Zen Garden submission 037 - 'pret-a-porter' by Minz Meyer - www.minzweb.de */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All other graphics copyright 2003, Minz Meyer */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Well, though I know that web is not print, I wanted to try a visual concept that I designed for a printed brochure and see what happens when brought to screen. According to the printed object, which is heavily landscape format, I had to try the horizontal scrolling. (-- Didn't reinvent the wheel, Mike Pick already did this with his "What lies Beneath" design.) All in all I wanted to give it a look of a modern lifestyle and fashion magazine. The Photograph was shot by Thomas Moeller */ body { width: 2048px; margin: 0; padding: 0; color: #888398; background-color: #fff; background-image: url(bg_body.jpg); background-position: right; background-repeat: repeat-y; font: 11px/1.5 Arial, Verdana, sans-serif; } /* Different behaviour of the lady. Just a compromise for IE */ div#extraDiv2 { background-image: url(bg_face_ie.jpg); background-repeat: no-repeat; background-position: left bottom; position: absolute; left: 0; bottom: 0; height: 600px; width: 265px; } /* And now the cool stuff, hiding from IE with child-selectors */ body#css-zen-garden>div#extraDiv2 { background-image: url(bg_face.jpg); background-repeat: no-repeat; background-position: left bottom; position: fixed; left: 0; bottom: 0; height: 594px; width: 205px; z-index: 2; } /* Using Geckos capability of PNG transparency to create the smooth scrolling border, when the screen is scrolled and the content vanishes to the left */ body#css-zen-garden>div#extraDiv3 { position: fixed; left: 0; top: 0; height: 100%; z-index: 1; background-image: url(bg_white.png); width: 225px; } /* The Header, using the "old":)) FIR-method */ div#pageHeader { position: relative; left: 220px; width: 1828px; } div#pageHeader h1 { width: 493px; height: 83px; margin: 20px 0 0; background-image: url(csszengarden.jpg); } div#pageHeader h1 span { display: none; } div#pageHeader h2 { width: 1826px; height: 27px; background-image: url(thebeautyofcssdesign.jpg); background-position: right; background-repeat: no-repeat; margin-top: -10px; } div#pageHeader h2 span { display: none; } div#quickSummary { position: absolute; width: 1300px; left: 228px; top: 98px; letter-spacing: 0.1em; color: #A5A3B5; background-color: transparent; } /* Have the summary displayed in a single line */ div#quickSummary p.p2, div#quickSummary p.p1 { display: inline; margin: 0; } div#extraDiv1 { /*adding a border */ position: absolute; left: 225px; top: 90px; height: 1px; width: 1823px; background-color: #A5A3B5; color: inherit; } /* The main content. All positioned absolutely ----------------------------------------------- The text-links */ a:link, a:visited { color: #A52A2A; background-color: transparent; font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } /* The Preamble */ div#preamble { position: absolute; left: 375px; top: 160px; width: 200px; text-align: justify; } div#preamble h3 { width: 200px; height: 25px; background-image: url(theroad.jpg); margin: 0 0 0.5em; } div#preamble h3 span { display: none; } div#preamble p { margin: 0 0.5em 0.5em; } /* Supporting Text --------------------------------------*/ div#explanation { position: absolute; left: 625px; top: 160px; width: 200px; text-align: justify; } div#explanation h3 { width: 200px; height: 25px; background-image: url(sowhatisthisabout.jpg); margin: 0 0 0.5em; } div#explanation h3 span { display: none; } div#explanation p { margin: 0 0.5em 0.5em; } div#participation { position: absolute; left: 875px; top: 160px; width: 200px; text-align: justify; } div#participation h3 { width: 200px; height: 25px; background-image: url(participation.jpg); margin: 0 0 0.5em; } div#participation h3 span { display: none; } div#participation p { margin: 0 0.5em 0.5em; } div#benefits { position: absolute; left: 1125px; top: 160px; width: 200px; text-align: justify; } div#benefits h3 { width: 200px; height: 25px; background-image: url(benefits.jpg); margin: 0 0 0.5em; } div#benefits h3 span { display: none; } div#benefits p { margin: 0 0.5em 0.5em; } div#requirements { position: absolute; left: 1375px; top: 160px; width: 400px; text-align: justify; } div#requirements h3 { width: 400px; height: 25px; background-image: url(requirements.jpg); margin: 0 0 0.5em; } div#requirements h3 span { display: none; } div#requirements p { margin: 0 0.5em 0.5em; } /* The Navigation ---------------------------------------*/ div#linkList { position: absolute; left: 1828px; top: 160px; width: 220px; background-color: transparent; color: inherit; background-image: url(bg_linklist.jpg); background-repeat: repeat-y; text-transform: lowercase; } div#linkList div#lselect li a:link, div#linkList div#lselect li a:visited { display: block; margin-left: -10px; padding-left: 26px; color: #8B879E; background-color: transparent; border-top: 1px solid #C6C6D2; background-image: url(linklistlink.jpg); background-repeat: no-repeat; } div#linkList li a:link, div#linkList div#lselect li a.c:link, div#linkList li a:visited, div#linkList div#lselect li a.c:visited { display: inline; background-image: none; color: #A52A2A; background-color: transparent; padding-left: 0; margin-left: 0; border: none; } div#linkList ul { list-style: none; margin: 0 0 0 25px; padding-left: 0; } div#linkList li { padding-left: 10px; } div#lselect h3 { float:left; margin-top: 0; width: 25px; height: 200px; background-image: url(selectadesign.jpg); background-repeat: no-repeat; } div#lselect h3 span { display: none; } div#larchives { clear:left; margin-top: 0; border-top: 10px solid #D9D6E7; } div#larchives h3 { float:left; margin-top: 0; width: 25px; height: 81px; background-image: url(archives.jpg); background-repeat: no-repeat; } div#larchives h3 span { display: none; } div#lresources { clear:left; margin-top: 0; border-top: 10px solid #D9D6E7; } div#lresources h3 { float:left; margin-top: 0; width: 25px; height: 95px; background-image: url(ressources.jpg); background-repeat: no-repeat; } div#lresources h3 span { display: none; } /* ...and the footer --------------------------------------*/ div#footer { position: absolute; left: 1828px; top: 3px; width: 220px; height: 20px; text-align: center; word-spacing: 0.1em; overflow: hidden; } div#footer a:link, div#footer a:visited { color: #B2AFC0; background-color: transparent; } /* and extra artwork */ div#extraDiv4 { position: absolute; left: 1828px; top: 20px; width: 214px; height: 65px; color: inherit; background-color: #D9D6E7; background-image: url(transition.jpg); background-repeat: no-repeat; }/* css Zen Garden submission 038 - 'Creepy Crawly' by Luke Redpath - www.sonicdeath.co.uk */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All other graphics copyright 2003, Luke Redpath */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Define main areas */ body { margin: 0; padding: 0; background: #97B661 url(body_bground.gif) repeat-y; } #container { width: 760px; background-color: #6E7F71; } /* Main Headers */ #pageHeader h1 { width: 760px; height: 150px; margin: 0; padding: 0; text-indent: -100em; overflow: hidden; background-image: url(h1_mainheader.jpg); } #pageHeader h2 { width: 760px; height: 123px; margin: 0; padding: 0; text-indent: -100em; overflow: hidden; background-image: url(h2_mainheader.jpg); } /* Main content */ #quickSummary { margin-left: 289px; background-image: url(summary_background.jpg); background-repeat: no-repeat; } #preamble, #supportingText { margin-left: 289px; } #quickSummary p, #preamble p, #supportingText p { margin: 0 30px 20px 20px;; padding: 0; font-family: Georgia, serif; font-size: 12px; line-height: 1.6; color: #DCEBDF; } /* Paragraph headers */ #preamble h3 { height: 36px; padding: 0; margin: 0 0 10px 0; text-indent: -100em; overflow: hidden; background: url(headers/preamble.gif) no-repeat; } #explanation h3 { height: 36px; padding: 0; margin: 0 0 10px 0; text-indent: -100em; overflow: hidden; background: url(headers/explanation.gif) no-repeat; } #participation h3 { height: 36px; padding: 0; margin: 0 0 10px 0; text-indent: -100em; overflow: hidden; background: url(headers/participation.gif) no-repeat; } #benefits h3 { height: 36px; padding: 0; margin: 0 0 10px 0; text-indent: -100em; overflow: hidden; background: url(headers/benefits.gif) no-repeat; } #requirements h3 { height: 36px; padding: 0; margin: 0 0 10px 0; text-indent: -100em; overflow: hidden; background: url(headers/requirements.gif) no-repeat; } /* Links */ #linkList { position: absolute; top: 273px; left: 0; width: 289px; margin: 0; padding: 0 0 0 32px; background-image: url(linklist_background.jpg); background-repeat: no-repeat; } #linkList2 { margin-right: 38px; } #linkList h3 { font-family: Georgia, serif; font-size: 15px; color: #DCEBDF; padding: 0; margin: 0 0 20px 0; } #linkList ul { margin: 0 0 20px 0; padding: 0 32px 0 0; list-style-type: none; font-family: Georgia, serif; font-size: 12px; color: #DCEBDF; } #linkList li { margin: 0 0 5px 0; padding: 0 0 20px 0; background: url(list_divider.gif) no-repeat; background-position: bottom center; text-align: center; } #lselect li a { display: block; text-transform: uppercase; } #lselect li a.c { display: inline; text-transform: none; } /* Link styles */ a:link { color: #E9EEDD; } a:hover { color: #FFF; } a:visited { color: #AAA; } /* Site footer */ #footer { text-align: right; padding: 40px 20px 20px 0; font-size: 11px; }/* css Zen Garden submission 039 - 'Erratic Blue' by Ian Main, http://www.e-lusion.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Ian Main */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Font resizing has been locked down. I didn't want it to come to this but it mangles my layout. */ /* basic elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ body { margin: 0px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; color: #000; background: #ebebeb url(bg-grid.gif); height: 100%; text-align: center; } html { height: 100%; margin: 0px; padding: 0px; } p, h3 { margin: 0; padding: 0 0px 5px 0; } ul { margin: 0; padding: 2px 0 5px 0; } li { line-height: 1.6; } /* Old-School! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ acronym { cursor: help; } a acronym { cursor: help; } /* End Old-School! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ a:link { font-weight: 900; color: #777; text-decoration: none; } a:visited { font-weight: 900; color: #999; text-decoration: none; } a:hover, a:active { font-weight: 900; color: #555; } /* Layout */ #container { position: relative; width: 712px; padding: 0px; margin-left: auto; margin-right: auto; border: 1px solid #000; border-top: 0px; border-bottom: 0px; text-align: left; /* Could not get the right column to stretch heigh: 100% of window view. So I cheated and had to create a background image to fake the 100% column. */ background: #A1D9FC url(bg-full.gif) repeat-y; } html>body #container { width: 712px; /* ie5win fudge ends */ } #pageHeader h1{ left: 209px; width: 712px; height: 163px; background: transparent url(intro_bg.jpg) no-repeat; /* border-bottom: 3px solid #CCEDFF; Added to bevel lower edge. Layer orders were failing causing this to break. */ margin-top: 0; margin-bottom: 25px; } #pageHeader h1 span, #pageHeader h2 span, #extradiv1, #extradiv3, #extradiv4, #extradiv5, #extradiv6 { margin: 0; padding: 0; display: none; } /* Extra Divs - OverView, Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* An overview title for quickSummary. Great idea but couldn't get to work. It would have sat at the top of the right column. Oh well, next time maybe! */ /* #extraDiv1 { position: relative; margin-left: auto; margin-right: auto; background: transparent url(list_4.png) no-repeat; height: 57px; } */ #extraDiv2 { position: relative; margin-left: auto; margin-right: auto; margin-bottom: -20px; width: 712px; height: 25px; background: transparent url(foot-bg.gif); border-left: 1px solid #000; border-right: 1px solid #000; } /* Extra Divs Finish Here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #quickSummary p.p1 { position: relative; margin-left: 465px; width: 235px; font-size: 10px; color: #b9b9b9; line-height: 20px; z-index: 1; padding: 0 5px 5px 5px; } #quickSummary p.p2 { position: absolute; top: 147px; margin-left: 10px; font-size: 11px; font-family: verdana, sans-serif; color: #777; } /* #linkList2 { left: 0px; background: transparent url(list_4.png) no-repeat; height: 57px; } */ #linkList { position: absolute; top: 160px; /*top: 10em; Dave suggested this but if I change the font size through the browser it pulls the whole right coloum up!!*/ margin-left: 458px; margin-top: 3px; background: transparent url(bg-side.gif) repeat-y; width: 254px; padding: 10px; } #linkList h3.select { background: transparent url(list_1.gif) no-repeat; margin-top: 130px; height: 57px; margin-left: 5px; } #linkList h3.archives { background: transparent url(list_2.gif) no-repeat; height: 57px; margin-top: 20px; margin-left: 5px; } #linkList h3.resources { background: transparent url(list_3.gif) no-repeat; height: 57px; margin-top: 20px; margin-left: 5px; } #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span { display:none } #linkList ul { margin: 10px; padding: 0px; } #linkList li { list-style-type: none; background: transparent; display: block; font-size: 10px; font-family: verdana, sans-serif; color: #b9b9b9; } #linkList li a:link, a:visited { color: #b9b9b9; text-decoration: none; } #linkList li a:hover, #linkList li a:active{ color: #777; text-decoration: none; } a.c:link, a.c:visited, a.c:hover, a.c:active { font-weight: normal; } #preamble { padding: 10px; width: 450px; margin-top: -110px; font-family: verdana, sans-serif; font-size: 13px; color: #0F7FD0; background: transparent url(text-bg.gif) top left repeat-y; } #preamble h3 { margin-top: 10px; font-family: verdana, sans-serif; margin-bottom: 20px; padding: 5px; text-align: center; font-weight: bold; color: #fff; background: #86CDF9; border: 1px solid #5FBEF9; width: 428px; font-size: 18px; } #supportingText { padding: 10px; width: 450px; font-family: verdana, sans-serif; font-size: 13px; color: #0F7FD0; voice-family: "\"}\""; voice-family: inherit; width: 440px; } #supportingText a:link, #supportingText a:visited { color: #3B92C9; text-decoration: none; } #supportingText a:hover, #supportingText a:active { color: #fff; border-bottom: 1px solid #fff; text-decoration: none; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin-top: 10px; font-family: verdana, sans-serif; margin-bottom: 20px; padding: 5px; text-align: center; font-weight: bold; color: #fff; background: #86CDF9; border: 1px solid #5FBEF9; width: 428px; font-size: 18px; } #requirements { } #requirements p.p5 { margin-top: 20px; padding: 5px; text-align: center; font-weight: bold; color: #fff; background: #86CDF9; border: 1px solid #5FBEF9; } #footer { position: absolute; top: 146px; color: #777; font-size: 12px; margin-left: 470px; width: 230px; } #footer a:link, #footer a:visited { margin: 5px; font-weight: normal; color: #777; text-decoration: none; } #footer a:hover, #footer a:active { color: #333; text-decoration: none; } #extraDiv1, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }/* css Zen Garden submission 040 - 'The Question Why' by Diane Clayton, http://www.schisma.net/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Diane Clayton */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements ---------------------------------------------------------------*/ body { background: #030409 url(bg_darkblue.gif) repeat; /* stupid browser color shifts */ color: #030409; font-family: Arial, sans-serif; font-size: 12px; margin: 0; } #extraDiv1 { z-index: 0; background: #030409 url(bg_body.jpg) no-repeat top left; position: absolute; top: 0; left: 0; width: 990px; height: 980px; } #preamble p, #supportingText p { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; line-height: 18px; text-align: justify; margin: 0; padding: 0px 20px 10px 20px; } #preamble p, #supportingText p { background: #8B95A8 url(bg_lightblue.gif) repeat; /* stupid browser color shifts */ } h3 { margin: 0; padding: 0; border: 0; } h3 span { display: none; } a:link, a:visited { font-weight: bold; text-decoration: none; color: #FFFF99; } a:hover, a:active { text-decoration: underline; } /* structuring and main content ---------------------------------------------------------------*/ #container { z-index: 1; position: absolute; top: 0; left: 0; width: 975px; margin: 0; } #intro { z-index: 1; position: absolute; left: 710px; width: 235px; margin: 0; padding: 0; } #pageHeader h1 span, #pageHeader h2 span, #quickSummary p.p1 span { display: none; } #quickSummary { position: absolute; top: 150px; right: 20px; width: 175px; color: #DBE0E6; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 1px; text-align: right; } #quickSummary p { padding: 0; margin: 0; border: 0; } #preamble { background: transparent url(bg_preamble.gif) no-repeat left bottom; position: absolute; top: 327px; left: 0px; width: 235px; padding-bottom: 70px; overflow: hidden; } #preamble h3 { background: transparent url(bg_preambleh3.gif) no-repeat left top; height: 60px; } #supportingText, #explanation, #participation, #benefits, #requirements { margin: 0; padding: 0; } #supportingText { z-index: 1; position: absolute; top: 327px; left: 285px; } #explanation { background: transparent url(bg_explanation.gif) no-repeat left bottom; color: #030409; width: 400px; padding-bottom: 25px; margin-bottom: 10px; } #explanation h3 { background: transparent url(bg_explanationh3.gif) no-repeat left top; height: 40px; } #participation { background: transparent url(bg_participation.gif) no-repeat left bottom; color: #030409; width: 400px; padding-bottom: 30px; margin-bottom: 10px; } #participation h3 { background: transparent url(bg_participationh3.gif) no-repeat left top; height: 50px; } #benefits { background: transparent url(bg_benefits.gif) no-repeat left bottom; color: #030409; width: 400px; padding-bottom: 25px; margin-bottom: 20px; } #benefits h3 { background: transparent url(bg_benefitsh3.gif) no-repeat left top; height: 45px; } #requirements { background: transparent url(bg_requirements.gif) no-repeat left bottom; color: #030409; width: 400px; padding-bottom: 20px; margin-bottom: 30px; } #requirements h3 { background: transparent url(bg_requirementsh3.gif) no-repeat left top; height: 35px; } #footer { background: transparent url(bg_footer.gif) no-repeat center top; width: 400px; height: 20px; margin-bottom: 50px; text-align: center; } /* link list ---------------------------------------------------------------*/ #linkList { z-index:1; position: absolute; left: 25px; top: 335px; width: 235px; } #linkList ul { background: #8B95A8 url(bg_lightblue.gif) repeat; margin: 0; padding: 0; border: 0; list-style: none; } #linkList ul li { line-height: 18px; margin: 0; margin-left: 20px; padding: 0; padding-left: 25px; padding-bottom: 10px; } #linkList #lselect ul li, #linkList #lfavorites ul li { background: transparent url(zenbullet.gif) no-repeat top left; } #linkList #larchives ul li, #linkList #lresources ul li { background: url(bullet.gif) no-repeat top left; } #lselect, larchives, #lresources, #lfavorites { padding: 0; margin: 0; } #lselect { background: transparent url(bg_lselect.gif) no-repeat bottom left; color: #030409; width: 235px; padding-bottom: 50px; margin-bottom: 10px; } #lselect h3 { background: transparent url(bg_lselecth3.gif) no-repeat top left; height:45px; } #lselect a:link, #lselect a:visited, #lfavorites a:link, #lfavorites a:visited { display: block; font-size: 13px; letter-spacing: 1px; } #lselect a.c:link, #lselect a.c:visited, #lfavorites a.c:link, #lfavorites a.c:visited { display: inline; font-weight: normal; color: #DBE0E6; text-transform: lowercase; padding-left: 3px; } #larchives { background: transparent url(bg_larchives.gif) no-repeat bottom left; color: #030409; width: 235px; padding-bottom: 20px; margin-bottom: 25px; } #larchives h3 { background: transparent url(bg_larchivesh3.gif) no-repeat top left; height: 40px; } #larchives li, #lresources li { text-transform: lowercase; } #larchives a:link, #larchives a:visited, #lresources a:link, #lresources a:visited { font-size: 13px; letter-spacing: 1px; } #lresources { background: transparent url(bg_lresources.gif) no-repeat bottom left; color: #030409; width: 235px; padding-bottom: 50px; margin-bottom: 10px; } #lresources h3 { background: transparent url(bg_lresourcesh3.gif) no-repeat top left; height: 35px; } /* just in case... ---------------------------------------------------------------*/ #lfavorites { background: transparent url(bg_lfavorites.gif) no-repeat bottom left; color: #030409; width: 235px; padding-bottom: 20px; margin-bottom: 20px; } #lfavorites h3 { background: transparent url(bg_lfavoritesh3.gif) no-repeat top left; height: 35px; } /* extras ---------------------------------------------------------------*/ acronym { border-width:0; }/* css Zen Garden submission 041 - 'door to my garden' by Patrick Lauke, http://redux.deviantart.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Patrick Lauke */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* general stuff */ body { font: 0.7em/1.2em Times, serif ; background: #000 url(background.png) -30px 0px no-repeat fixed; color: #999; padding: 0 0 0 470px; margin: 0; } * { text-transform: lowercase; /* could apply this to the body, but IE seems to ignore it there */ padding:0; margin:0; } p { margin: 1em 0 0 0; padding: 0 0 1em 0; } p.p1:first-line { font-weight: bold; } p.p2, p.p3, p.p4 { /* originally used p + p, but IE doesn't play ball with that...so this is a rather ugly kludge */ text-indent: 1em; margin-top: -0.8em; } h3 { font-size: 1.2em; } ul { list-style: none url(dot.png); padding: 1em 0 0 0; margin-left: 3em } li { margin-bottom: 0.3em; } a { color: #eee; background: transparent; text-decoration: none; } acronym { /* override Mozilla and co.'s standard dotted line under acronyms for a better look (at the detriment of accessibility, unfortunately) */ border: none; } /* more specific rules */ #container { background: #000 url(bottom_corner.png) no-repeat bottom right; color: inherit; width: 300px; } #pageHeader { background: url(header.png) no-repeat top left; width: 300px; height: 170px; } #pageHeader span { display: none; } #preamble, #supportingText div { padding: 0 35px 0 35px; text-align: justify; } /* admittedly graphics intensive, but each of the following divs has its own distincitve bracket (left or right) with its own different texture of dirt */ #preamble { background: url(bracket-l1.png) no-repeat top left; } #participation { background: url(bracket-l2.png) no-repeat top left; } #requirements { background: url(bracket-l3.png) no-repeat top left; } #benefits { background: url(bracket-r1.png) no-repeat top right; } #explanation { background: url(bracket-r2.png) no-repeat top right; } /* old-style borders for the window-frame look of the menu */ #linkList { position: absolute; top: 145px; left: 215px; background: url(menu-top.png) no-repeat top right; width: 248px; height: 50px; } #linkList2 { margin-top: 30px; background: url(menu-body.png) #000; color: inherit; } #lselect, #larchives, #lresources { padding: 0 15px 0 15px; } #linkList2>#lselect { /* slight kludge ? sure...but it adds nice eye candy. hidden from IE through the child selector, and we make up for it later with extraDiv1 */ background: url(flower.png) no-repeat top left; margin-left: -65px; padding-left: 80px; min-height: 150px; } #lresources { background: url(menu-bottom.png) no-repeat bottom right; padding-bottom: 2.5em; } /* static version of what was originally a flyout menu...but didn't work in Netscape 7 */ #container>#linkList { background: url(menu-top.png) no-repeat top right; } #linkList #linkList2{ visibility: visible; } /*just to tidy up the bottom end a bit */ #container { padding-bottom: 50px; margin-bottom: -2em; } /* a bit of useless visual whimsy...*/ p:hover { color: #aaa; background: transparent; } p:hover a { color: #fff; background: transparent; } /* and now...the extras */ #extraDiv1 { /* this one makes up for the screwy handling of the flower background on #lselect in IE */ position: absolute; top: 165px; left: 142px; background: url(flower.png) no-repeat top left; width: 115px; height: 150px; } body>#extraDiv1 { /* and this reverses the previous rule for those browsers (i.e. non IE ones) that already showed the flower background correctly as it was applied to #lselect */ display: none; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }/* css Zen Garden submission 042 - 'Stone Washed' by Andrew Hayward, http://www.mooncalf.me.uk/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Andrew Hayward */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* ---[ General Stuff ]------------------------------ */ body { margin: 0px; padding: 0px; background: #e6e6dc url('outer_shadow.gif') 0px 0px repeat-x; color: #999; font-family: tahoma, arial, helvetica, sans-serif; } h1, h2, h3, h4 { margin: 0; padding: 0; } p { padding-left: 10px; padding-right: 10px; text-align: justify; font-size: 0.8em; } a:link, a:visited { color: #567b9b; text-decoration: none; } a:hover, a:active { background: #ddeeff; } /* ---[ End General Stuff ]-------------------------- */ /* ---[ Container ]---------------------------------- */ #container { background: transparent url('side.gif') 100% 0px repeat-y; } /* ---[ Intro ]---------------------------------- */ #intro { margin: 100px 275px 0px 100px; background: #fff url('inner_shadow.gif') 0px 0px repeat-x; padding: 30px 10px 10px 10px; border-left: solid 1px #ccc; } /* ---[ Page Header ]------------------------ */ #pageHeader { color: #fff; height: 100px; width: 100%; top: 0px; left: 0px; right: 0px; position: absolute; background: transparent url('top.gif') 0px 0px repeat-x; z-index: 10; } #pageHeader h1 { height: 130px; } #pageHeader h1 span { font-size: 1.5em; background-color: transparent; text-decoration: none; text-transform: lowercase; display: none; font-weight: normal; position: absolute; right: 20px; bottom: 3px; color: #fff; } #pageHeader h2 { position: absolute; top: 0px; left: 0px; height: 115px; width: 400px; background: transparent url('top.title.gif') 0px 0px no-repeat; } #pageHeader h2 span { display: none; } /* ---[ End Page Header ]-------------------- */ /* ---[ Quick Summary ]---------------------- */ #quickSummary { width: 270px; float: left; border-top: solid 1px #ddd; border-right: solid 1px #ddd; /* border-bottom: solid 1px #999; */ border-left: solid 1px #ddd; background: #e5e5e5 url('demo.bg.gif') 100% 100% no-repeat; margin: 0px 15px 10px 0px; padding: 0px 0px 3px 0px; font-size: 1em; } #quickSummary p, #quickSummary p:first-letter { text-align: center; color: #666; font-weight: normal; } #quickSummary .p1 { background: #fff url('demo.p1.gif') 0% 0% no-repeat; /* padding-bottom: 60px; */ height: 176px; padding: 0px 0px 0px 0px; margin: 0px; } #quickSummary .p1 span { display: none; } #quickSummary .p2 { position: relative; bottom: 0px; text-align: right; padding-bottom: 15px; } #quickSummary>.p2 { padding-bottom: 0px; } #quickSummary .p2 span { visibility: hidden; font-size: 0px; } #quickSummary .p2 span a { margin-left: 75px; font-size: 10pt; visibility: visible; display: block; position: relative; left: 0px; background: none; background: transparent url('file.gif') 100% 50% no-repeat; padding-right: 18px; color: #aaa; font-variant: small-caps; text-transform: capitalize; } #quickSummary .p2 span a:hover { background: transparent url('file2.gif') 100% 50% no-repeat; color: #819bb2; } /* ---[ End Quick Summary ]------------------ */ /* ---[ Preamble ]--------------------------- */ #preamble h3 { display: none; } #preamble p { font-size: 0.9em; color: #819bb2; padding-left: 300px; } /* ---[ End Preamble ]----------------------- */ /* ---[ End Intro ]------------------------------ */ /* ---[ Supporting Text ]------------------------ */ #supportingText { margin: 0px 275px 0px 100px; background: #fff; padding: 10px 0px 10px 0px; border-left: solid 1px #ccc; } #supportingText div { clear: both; } #supportingText h3 { padding-top: 30px; height: 25px; border-bottom: solid 1px #819bb2; } #supportingText h3 span { display: none; } /* ---[ Explanation ]------------------------ */ #explanation { padding-left: 10px; padding-right: 10px; } #explanation h3 { background: #fff url('h3.explanation.gif') 100% 100% no-repeat; } #explanation p.p1 { width: 45%; float: left; } #explanation p.p2 { width: 45%; float: right; } /* ---[ End Explanation ]-------------------- */ /* ---[ Participation ]---------------------- */ #participation { background: #fff url('stone.circle.jpg') 50% 100% no-repeat; padding-left: 10px; padding-right: 10px; } #participation h3 { background: #fff url('h3.participation.gif') 100% 100% no-repeat; /* border-top: solid 1px #ccc; */ } #participation p.p2 { width: 45%; float: left; } #participation p.p3 { width: 45%; float: right; } #participation p.p4 { clear: both; } /* ---[ End Participation ]------------------ */ /* ---[ Benefits ]--------------------------- */ #benefits { padding-left: 10px; padding-right: 10px; } #benefits h3 { background: #fff url('h3.benefits.gif') 100% 100% no-repeat; /* border-top: solid 1px #ccc; */ } /* ---[ End Benefits ]----------------------- */ /* ---[ Requirements ]----------------------- */ #requirements { background: #fff url('bamboo.leaf.jpg') 100% 100% no-repeat; padding-left: 10px; padding-right: 10px; } #requirements h3 { background: #fff url('h3.requirements.gif') 100% 100% no-repeat; /* border-top: solid 1px #ccc; */ } #requirements p.p2 { width: 45%; float: left; } #requirements p.p3, #requirements p.p4 { width: 45%; float: right; } #requirements p.p5 { clear: both; } /* ---[ End Requirements ]------------------- */ /* ---[ Footer ]----------------------------- */ #footer { margin-top: 15px; padding-top: 40px; padding-bottom: 20px; font-size: 0.8em; clear: both; text-align: center; background: #fff url('bamboo2.gif') 10px 0px repeat-x; } #footer a:link, #footer a:visited { text-decoration: none; color: #999; } #footer a:hover, #footer a:active { background: none; text-decoration: underline; } /* ---[ End Footer ]------------------------- */ /* ---[ End Supporting Text ]-------------------- */ /* ---[ Link List ]------------------------------ */ #linkList { z-index: 2; background: transparent url('pawn.jpg') 50% 100% no-repeat; position: absolute; top: 100px; right: 100px; float: right; width: 175px; } #linkList h3 { border: none; margin-top: 5px; margin-bottom: 10px; height: 30px; } #linkList h3 span { display: none; } /* ---[ Link List 2 ]------------------------ */ #linkList2 { padding-top: 20px; color: #666; } #linkList2 a:link, #linkList2 a:visited { color: #819bb2; text-decoration: none; } #linkList2 a:hover, #linkList2 a:active { background: none; text-decoration: underline; } #linkList2 div { font-size: 0.7em; padding: 8px 8px 10px 8px; background: transparent url('sidesplit.gif') 0px 100% repeat-x; } #linkList2 ul { list-style-type: none; margin: 0px; padding-left: 15px; } #linkList2 ul li { /* background: url('bullet.gif') 0px 3px no-repeat; */ list-style-image: url('bullet.gif'); padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; } /* ---[ L Select ]----------------------- */ #lselect h3 { background: #e5e5e5 url('h3.side.select.gif') 50% 0% no-repeat; } #lselect a { display: block; } #lselect a.c { display: inline; } /* ---[ End L Select ]------------------- */ /* ---[ L Favorites ]-------------------- */ #lfavorites h3 { background: #e5e5e5 url('h3.side.favourites.gif') 50% 0% no-repeat; } #lfavorites a { display: block; } #lfavorites a.c { display: inline; } /* ---[ End L Favorites ]---------------- */ /* ---[ L Archives ]--------------------- */ #larchives h3 { background: #e5e5e5 url('h3.side.archives.gif') 50% 0% no-repeat; } /* ---[ End L Archives ]----------------- */ /* ---[ L Resources ]-------------------- */ #lresources { margin-bottom: 150px; } #lresources h3 { background: #e5e5e5 url('h3.side.resources.gif') 50% 0% no-repeat; } /* ---[ End L Resources ]---------------- */ /* ---[ End Link List 2 ]-------------------- */ /* ---[ End Link List ]-------------------------- */ /* ---[ End Container ]------------------------------ */ /* ---[ Extra Div 1 ]-------------------------------- */ #extraDiv1 { position: absolute; top: 0px; right: 0px; width: 275px; height: 130px; background: transparent url('top.rip.gif') 0% 100% no-repeat; z-index: 20; } /* ---[ End Extra Div 1 ]---------------------------- */ /* ---[ Extra Div 2 ]-------------------------------- */ #extraDiv2 { position: absolute; top: 125px; left: 105px; width: 30px; height: 30px; background: transparent url('corner1.gif') 0% 0% no-repeat; z-index: 20; } /* ---[ End Extra Div 2 ]---------------------------- */ /* ---[ Extra Div 3 ]-------------------------------- */ #extraDiv3 { position: absolute; top: 125px; left: 359px; width: 30px; height: 30px; background: transparent url('corner2.gif') 0% 100% no-repeat; z-index: 20; } /* ---[ End Extra Div 3 ]---------------------------- */ /* css Zen Garden submission 043 - 'Burning' by Kevin & Ethel Davis, http://etheldavisgallery.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Kevin & Ethel Davis */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without both the designer's and artist's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* CSS by Kevin Davis */ /* For more work by the author, see http://alazanto.org */ /* Artwork by Ethel Davis */ /* For more work by the artist, see http://etheldavisgallery.com */ /* have a great day! :) */ /******************************************************************* primary elements */ body { background: #444 url(body.gif) top left repeat-y; margin: 0px; padding: 0px; text-align: left; color: #fff; } /******************************************************************* primary hyperlink styling */ #supportingText a:link { font-weight: normal; text-decoration: none; background: transparent; color: #D1E8CC; border-bottom: 1px solid #D1E8CC; } #supportingText a:visited { font-weight: normal; text-decoration: none; background: transparent; color: #BBD9BA; border-bottom: 1px solid #BBD9BA; } #supportingText a:hover, a:active { text-decoration: none; background: transparent; color: #fff; border-bottom: 1px solid #fff; } /***********************************************/ #linkList a:link { font-weight: normal; text-decoration: none; background: transparent; color: #bcf; } #linkList a:visited { font-weight: normal; text-decoration: none; background: transparent; color: #bde; } #linkList a:hover, a:active { text-decoration: underline; background: transparent; color: #fff; } /***********************************************/ #intro #quickSummary a:link { font-weight: normal; text-decoration: none; background: transparent; color: #ccc; border-bottom: 1px solid #555; } #intro #quickSummary a:visited { font-weight: normal; text-decoration: none; background: transparent; color: #ccc; border-bottom: 1px solid #555; } #intro #quickSummary a:hover, a:active { text-decoration: none; background: transparent; color: #fff; border-bottom: 1px solid #555; } /******************************************************************* body content */ #container { margin-top: 33px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 1px; background: transparent url(container-back.gif) top left no-repeat; width: 751px; voice-family: "\"}\""; voice-family:inherit; width:750px; } html>body #container { width: 750px; } #extraDiv1 { position: absolute; height: 33px; width: 100%; top: 0px; left: 0px; background: transparent url(top-bar.gif) top left repeat-x; } #extraDiv2 { position: relative; height: 33px; width: 100%; bottom: 0px; left: 0px; background: transparent url(bottom-bar.gif) top left repeat-x; } #extraDiv3 { position: absolute; top: 33px; left: 750px; right: 0px; color: #fff; background: #38332F url(back-top2.gif) top left repeat-y; border-bottom: 2px solid #29281C; height: 480px; voice-family: "\"}\""; voice-family:inherit; height:478px; } html>body #extraDiv3 { height: 478px; } #extraDiv3 span { position: absolute; top: 0px; left: 0px; right: 0px; margin-bottom: 471px; color: #fff; background: #38332F url(back-top2-span.gif) top left repeat-x; height: 7px; voice-family: "\"}\""; voice-family:inherit; height:7px; } html>body #extraDiv3 span { height: 7px; } #pageHeader { position: absolute; top: 33px; left: 0px; width: 0px; hegith: 0px; margin: 0px; padding: 0px; overflow: hidden; text-indent: -100em; } /******************************************************************* intro section */ #intro { margin-top: 243px; margin-left: 58px; margin-right: 242px; margin-bottom: 0px; padding: 15px; border-bottom: 1px solid #394A38; } #intro acronym, #linkList acronym { cursor: help; border: 0px; letter-spacing: 0.1em; } #quickSummary p.p2 { position: absolute; top: 255px; left: 5px; margin: 0px; width: 240px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; border: 0px solid #333; font-family: "Verdana", serif; font-size: 9px; font-weight: normal; text-align: right; color: #bbb; background: transparent; } #intro p { margin-top: 0px; margin-bottom: 8px; font-family: "Times", "Times New Roman", Serif; font-size: 14px; font-weight: normal; word-spacing: 0.05em; letter-spacing: 0.05em; line-height: 1.4em; text-align: left; color: #fff; background: transparent; } /* Thanks Mike! http://phark.typepad.com */ #intro h3 { width: 100%; height: 30px; margin-top: 10px; margin-left: -2px; margin-bottom: 5px; margin-right: 0px; padding: 0px; color: #fff; border-bottom: 1px solid #5F705E; background: transparent url(header-enlighten.gif) no-repeat top left; } #intro h3 span {display: none;} /******************************************************************* supportingtext section */ #supportingText { margin-top: 0px; margin-left: 58px; margin-right: 242px; padding: 15px; } #supportingText acronym { cursor: help; background: transparent url(acronym.gif) top left no-repeat; padding-left: 15px; border-bottom: 0px dotted #fff; } #supportingText p { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 8px; font-family: "Times", "Times New Roman", Serif; font-size: 14px; font-weight: normal; word-spacing: 0.05em; letter-spacing: 0.05em; line-height: 1.4em; text-align: left; color: #fff; background: transparent; } #supportingText h3 { width: 100%; height: 30px; margin-top: 10px; margin-left: -2px; margin-bottom: 5px; margin-right: 0px; border-bottom: 1px solid #5F705E; } #supportingText h3 span {display: none;} #explanation h3 { background: transparent url(header-sowhat.gif) no-repeat top left; } #participation h3 { background: transparent url(header-participation.gif) no-repeat top left; } #benefits h3 { background: transparent url(header-benefits.gif) no-repeat top left; } #requirements h3 { background: transparent url(header-requirements.gif) no-repeat top left; } /******************************************************************* footer section */ #footer { margin-top: 30px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding: 6px; font-family: "Verdana", serif; font-size: 11px; font-weight: normal; font-style: italic; color: #fff; text-align: center; background-color: #697A68; border: 1px solid #899A88; } #footer a:link, #footer a:visited { margin-left: 5px; margin-right: 5px; padding-left: 5px; padding-right: 5px; border-bottom: 0px; border-left: 1px solid #899A88; border-right: 1px solid #899A88; } /******************************************************************* link list */ #linkList { position: absolute; top: 0px; left: 0px; margin-top: 276px; margin-left: 509px; padding-top: 251px; padding-left: 20px; padding-right: 0px; text-align: left; background: transparent url(linklist-back.gif) top left no-repeat; width: 242px; voice-family: "\"}\""; voice-family:inherit; width:222px; } html>body #linkList { width: 222px; } #lselect, #lfavorites, #larchives, #lresources { margin-top: 0px; margin-left: 0px; margin-bottom: 10px; margin-right: 10px; padding: 4px; border: double #878BA6; /*background-color: #4A5269;*/ } #linkList h3 { font-family: "Verdana", serif; font-size: 10px; font-weight: normal; margin: 0px; padding: 0px; border-bottom: 1px solid #878BA6; } h3.select { text-align: left; width: 100%; height: 14px; background: transparent url(header-select.gif) no-repeat top left; } #linkList h3.select span {display:none;} h3.favorites { text-align: left; width: 100%; height: 14px; background: transparent url(header-favorites.gif) no-repeat top left; } #linkList h3.favorites span {display:none;} h3.archives { text-align: left; width: 100%; height: 14px; background: transparent url(header-archives.gif) no-repeat top left; } #linkList h3.archives span {display:none;} #larchives ul>li { margin-bottom: 0px; margin-left: -10px; text-align: left; padding-left: 9px; padding-bottom: 0px; border-left: 1px solid #878BA6; border-right: 1px solid #878BA6; border-bottom: 0px solid #878BA6; } #larchives ul>li+li { margin-bottom: 0px; margin-left: -10px; text-align: left; padding-left: 9px; padding-bottom: 5px; border-left: 1px solid #878BA6; border-right: 1px solid #878BA6; border-bottom: 1px solid #878BA6; } #larchives ul>li+li+li { margin-top: 5px; margin-bottom: 0px; margin-left: 0px; text-align: left; padding-left: 0px; padding-bottom: 0px; border-left: 0px; border-right: 0px; border-bottom: 0px; } h3.resources { text-align: left; width: 100%; height: 14px; background: transparent url(header-resources.gif) no-repeat top left; } #linkList h3.resources span {display:none;} #linkList ul { margin-top: 0px; margin-bottom: 20px; margin-left: 10px; margin-right: 0px; padding: 0px; } #linkList li { font-family: "Verdana", serif; font-size: 11px; font-weight: normal; color: #fff; background: transparent; line-height: 13px; list-style-type: none; display: block; padding-top: 4px; margin-bottom: 2px; } #larchives li { padding-top: 4px; margin-bottom: 0px; } #lselect li, #lfavorites li { background: url(docbullet.gif) no-repeat 0px 7px; padding-left: 11px; } #lselect a, #lfavorites a { display:block; text-transform:lowercase; } #lselect a.c, #lfavorites a.c {display:inline; text-transform: none; }/* css Zen Garden submission 044 - 'si6' by Shaun Inman, http://www.shauninman.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Shaun Inman */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Lomo Credit: http://andreas.lunde.info/ | 09.05.03 :: 09.09.03 */ /* Via: http://sxc.hu/ */ body { background: url(bg_top.jpg) no-repeat #FFF; margin: 0px; font: 9px/16px Geneva,Arial,Tahoma,sans-serif; color: #97999C; } p { position: relative; top: 0px; text-align: justify; margin: 0px 0px 0px 35px; padding: 0px 0px 16px 302px; width: 573px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 271px; /* Actual value for conformant browsers */ } html>p { width: 271px; /* Be nice to Opera */ } @media ScReEn { /* HIDE THIS NONSENSE FROM SAFARI */ p span { position: relative; top: -1px; padding-bottom: 2px; } } /* MORE NONSENSE JUST FOR IE */ * html p span { position: relative; top: -1px; } p.p1 { background: url(p1.gif) no-repeat; } p.p2 { background: url(p2.gif) no-repeat; } p.p3 { background: url(p3.gif) no-repeat; } p.p4 { background: url(p4.gif) no-repeat; } p.p5 { background: url(p5.gif) no-repeat; } a, a:visited { color: #717375; text-decoration: none; border-bottom: 2px solid #FFFC00; } a:hover { color: #A1A3A5; text-decoration: none; border-bottom: 2px solid #FFFE66; } h3 { margin: 0px; padding: 0px; } acronym { font-style: normal; text-decoration: none; border-width: 0px; } #container { width: 744px; } #pageHeader { z-index: 5000; } #pageHeader h1 { position: absolute; top: 84px; left: 88px; background: url(css_zen_garden.gif) no-repeat; width: 205px; height: 35px; padding: 0px; margin: 0px; } #pageHeader h2 { position: absolute; top: 132px; left: 91px; background: url(beauty_of.gif) no-repeat; width: 149px; height: 23px; padding: 0px; margin: 0px; } #pageHeader h1 span, #pageHeader h2 span, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #lselect h3 span, #lfavorites h3 span, #larchives h3 span, #lresources h3 span { display: none; } #quickSummary p { color: #828200; } #quickSummary a, #quickSummary a:visited { color: #626200; text-decoration: none; border-bottom: 2px solid #979600; } #quickSummary a:hover { color: #A2A200; border-bottom: 2px solid #C7C600; } #quickSummary { margin-top: 144px; width: 608px; } #quickSummary p.p1 { background: url(p1_on_yellow.gif) no-repeat; } #quickSummary p.p2 { background: url(p2_on_yellow.gif) no-repeat; padding-bottom: 0px; margin-bottom: 16px; } #preamble, #explanation, #participation, #benefits, #requirements, #footer { position: relative; } #preamble h3 { position: absolute; top: -11px; left: 88px; background: url(the_road.gif) no-repeat; width: 169px; height: 22px; } /* TARGETING IE6 PC, KEEP COMMENT OPEN AS FAR AS IE5 MAC IS CONCERNED \*/ * html*#preamble h3 { left: 53px; } /* GOTTA WAKE UP IE5 MAC! */ #preamble p.p1 { background: url(p1_cropped.gif) no-repeat; } #preamble p.p2 { background: url(p2_cropped.gif) no-repeat; } #preamble p.p3 { background: url(p3_unlabeled.gif) no-repeat; padding-bottom: 0px; margin-bottom: 16px; } #explanation h3 { position: absolute; top: -12px; left: 89px; background: url(so_what.gif) no-repeat; width: 131px; height: 23px; } /* TARGETING IE6 PC, KEEP COMMENT OPEN AS FAR AS IE5 MAC IS CONCERNED \*/ * html*#explanation h3 { left: 54px; } /* GOTTA WAKE UP IE5 MAC! */ #explanation p.p1 { background: url(p1_unlabeled.gif) no-repeat; } #explanation p.p2 { padding-bottom: 0px; margin-bottom: 16px; } #participation h3 { position: absolute; top: -11px; left: 86px; background: url(participation.gif) no-repeat; width: 131px; height: 22px; } /* TARGETING IE6 PC, KEEP COMMENT OPEN AS FAR AS IE5 MAC IS CONCERNED \*/ * html*#participation h3 { left: 51px; } /* GOTTA WAKE UP IE5 MAC! */ #participation p.p4 { padding-bottom: 0px; margin-bottom: 16px; } #benefits h3 { position: absolute; top: -11px; left: 88px; background: url(benefits.gif) no-repeat; width: 131px; height: 22px; } /* TARGETING IE6 PC, KEEP COMMENT OPEN AS FAR AS IE5 MAC IS CONCERNED \*/ * html*#benefits h3 { left: 53px; } /* GOTTA WAKE UP IE5 MAC! */ #benefits p.p1 { padding-bottom: 0px; margin-bottom: 16px; } #requirements h3 { position: absolute; top: -11px; left: 89px; background: url(requirements.gif) no-repeat; width: 131px; height: 22px; } /* TARGETING IE6 PC, KEEP COMMENT OPEN AS FAR AS IE5 MAC IS CONCERNED \*/ * html*#requirements h3 { left: 54px; } /* GOTTA WAKE UP IE5 MAC! */ #requirements p.p4 { background: url(p4_on_blue.gif) no-repeat; } #requirements p.p5 { background: url(p5_unlabeled.gif) no-repeat; padding-bottom: 0px; margin-bottom: 16px; } #linkList { position: absolute; top: 63px; left: 626px; width: 116px; } #linkList ul, #linkList li { list-style: none; padding: 0px; margin: 0px; line-height: 12px; } #linkList a, #linkList a:visited { color: #5E5F61; border: none; } #linkList a:hover { color: #C1C3C5; } #lselect li, #lfavorites li { margin-top: 8px; } #lselect li a, #lselect li a:visited, #lfavorites li a, #lfavorites li a:visited { display: block; } #lselect li a.c, #lselect li a.c:visited, #lfavorites li a.c, #lfavorites li a.c:visited { color: #717375; display: inline; } #lselect li a.c:hover, #lfavorites li a.c:hover { color: #C1C3C5; } #lselect h3.select { background: url(select_a_design.gif) no-repeat; width: 112px; height: 44px; } #lselect ul { margin-top: -1px; } @media ScReEn { /* HIDE THIS NONSENSE FROM SAFARI */ #lselect ul { margin-top: -2px; } } /* MORE NONSENSE JUST FOR IE */ * html #lselect ul { margin-top: -2px; } #lfavorites h3.favorites { background: url(favorites.gif) no-repeat; width: 112px; height: 44px; margin-top: 6px; } #lfavorites ul { margin-top: -2px; } #larchives h3.archives { background: url(archives.gif) no-repeat; width: 112px; height: 44px; margin-top: 5px; } #larchives ul { margin-top: 6px; } #lresources h3.resources { background: url(resources.gif) no-repeat; width: 112px; height: 44px; margin-top: 10px; } #lresources ul { margin-top: 6px; } #footer { display: block; text-align: right; padding: 9px 430px 0px 0px; margin: 0px 0px 36px 35px; width: 688px; voice-family: "\"}\""; voice-family:inherit; width: 258px; } html>#footer { width: 258px; } #footer a { padding-bottom: 9px; } @media ScReEn { /* HIDE THIS NONSENSE FROM SAFARI */ #footer a { position: relative; top: -1px; } } /* MORE NONSENSE JUST FOR IE */ * html #footer a { position: relative; top: -1px; } #footer,#requirements { z-index: 2; } #extraDiv1 { position: relative; height: 1px; z-index: 1; } #extraDiv1 span { position: absolute; bottom: -33px; left: 0px; background: url(bg_bottom.jpg) no-repeat; width: 100%; height: 508px; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* * { border: 1px solid #DDD; } *//* css Zen Garden submission 045 - 'I Dream in Colour' by Jeff Bilen - http://www.scribblersclub.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jeff Bilen */ /* Added: September 26th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { background: #ffffff url(bottom_right.jpg) bottom right no-repeat; font: 8pt/11pt "Times New Roman", serif, georgia; color: #555753; margin: 0px; padding: 0px; } p { font: 8pt/11pt "Times New Roman", serif, georgia; margin-top: 0px; text-align: left; margin-left: 10px; } acronym { border: none; } a:link { font-weight: bold; text-decoration: none; color: #333333; } a:visited { font-weight: bold; text-decoration: none; color: #555555; } a:hover, a:active { text-decoration: underline; color: #555555; } /* specific divs */ #container { background: transparent url(top_left.jpg) top left no-repeat; padding: 0px; margin: 0px; width: 760px; padding-bottom: 100px; } #intro { background: transparent url(intro_back.jpg) top left no-repeat; margin-top: 133px; width: 253px; float: left; } #pageHeader h1 span { display:none } #pageHeader h2 span { display:none } #quickSummary { width: 210px; margin-left: 15px; margin-top: 20px; } #quickSummary p { font: bold italic 8pt/11pt "Times New Roman", serif, georgia; color: #000000; text-align: center; } #preamble { width: 210px; margin-left: 15px; margin-top: 25px; } #preamble h3 { background: transparent url(en_hdr.gif) top center no-repeat; width: 210px; height: 19px; margin-left: 5px; } #preamble h3 span { display: none; } #preamble p { padding-left: 5px; font: 8pt/14pt "Times New Roman", serif, georgia; } #supportingText { background: transparent url(main_back.jpg) top left no-repeat; position: relative; margin-left: 258px; top: 58px; width: 376px; padding-left: 25px; padding-top: 25px; } #explanation h3 { background: transparent url(what_hdr.gif) top left no-repeat; height: 11px; text-align: left; } #explanation h3 span { display: none; } #supportingText p { width: 315px; text-align: left; } #explanation h3 { background: transparent url(what_hdr.gif) top left no-repeat; height: 11px; } #explanation { padding-bottom: 10px; } #participation { padding-bottom: 10px; } #benefits { padding-bottom: 10px; } #requirements { padding-bottom: 10px; } #participation h3 { background: transparent url(part_hdr.gif) top left no-repeat; height: 11px; } #participation h3 span { display: none; } #benefits h3 { background: transparent url(ben_hdr.gif) top left no-repeat; height: 11px; } #benefits h3 span { display: none; } #requirements h3 { background: transparent url(req_hdr.gif) top left no-repeat; height: 13px; } #requirements h3 span { display: none; } #footer { text-align: center; border-top: 1px solid #cccccc; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList { margin-left: 645px; width: 125px; position: absolute; top: 110px; } #linkList ul { margin-left: 10px; padding: 0px; } #lselect h3 { background: transparent url(sel_des.gif) top left no-repeat; height: 21px; } #lselect h3 span { display: none; } #larchives h3 { background: transparent url(archives.gif) top left no-repeat; height: 18px; } #larchives h3 span { display: none; } #lresources h3 { background: transparent url(resource.gif) top left no-repeat; height: 11px; } #lresources h3 span { display: none; } #lfavorites h3 { background: transparent url(favorites.gif) top left no-repeat; height: 21px; } #lfavorites h3 span { display: none; } #linkList li { line-height: 2.5ex; list-style-type: none; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #555555; } #linkList li a:visited { color: #777777; } /* css Zen Garden submission 046 - 'sub:lime' by Andy Budd, http://www.andybudd.com/blog/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Andy Budd */ /* Added: September 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* CSS Document */ body{ background: #e3dfdc; margin: 0px; padding: 0px; font: 72%/1.6em Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; } a:link { color: #5a6635; text-decoration: none; } a:visited { color: #5a6635; text-decoration: none; } a:hover { color: #2b351c; } #container { position: relative; width: 715px; margin: 0 auto; background: #FFFFFF url(container.gif) repeat-y; padding-right: 25px; padding-left: 25px; text-align: left; voice-family: "\"}\""; voice-family:inherit; width: 665px; } html>body #container { width: 665px; } /* page header stuff */ #pageHeader { margin-bottom: 5px; } #pageHeader h1 { width: 665px; height: 38px; background: url(logo.gif) no-repeat; margin: 0px; padding: 0px; } #pageHeader span { display: none; } #pageHeader h2 { display: none; } /* quickSummary stuff */ #quickSummary { background: url(limes.gif) no-repeat; width: 665px; } #quickSummary .p1 { background: url(callout.gif) no-repeat right; height: 160px; margin: 0px; padding: 0px; } #quickSummary .p1 span { display: none; } #quickSummary .p2 { height: 27px; background: #97a25e; margin: 5px 0 5px 0; padding: 5px 0 0 10px; vertical-align: bottom; voice-family: "\"}\""; voice-family:inherit; height: 22px; } html>body #quickSummary .p2 { height: 22px; } /* preamble stuff */ #preamble { margin: 0 0 0 225px; background: #a5b77a; padding: 15px; } #preamble h3 { background: url(enlightenment.gif) no-repeat; height: 19px; margin: 0px; padding: 0px; } #preamble h3 span{ display: none; } /* supportingText stuff */ #supportingText { margin: 0 0 0 225px; background: #a5b77a; padding: 0 15px 1px 15px; /* this is wierd. Origionally this div had no bottom padding. When I positioned the footer absolutly, a gap of about 8px appeared at the bottom of the page where the bg image of container wasn't getting displayed. Adding a nominal amount of bottom padding (1px) to supportingText fixed this problem. However I have no idea why the problem exhibited in the first place or why this fixed it. */ } #explanation h3 { background: url(about.gif) no-repeat; height: 19px; margin: 0px; padding: 0px; } #participation h3 { background: url(participation.gif) no-repeat; height: 15px; } #benefits h3 { background: url(benefits.gif) no-repeat; height: 18px; } #requirements h3 { background: url(requirements.gif) no-repeat; height: 15px; } #supportingText h3 span{ display: none; } #footer /*#requirements .p5*/ { position: absolute; margin: 0; padding: 0; top: 213px; right: 35px; text-align: right; } /* bit of a nasty use of an extraDiv and a bg image to produce the bottom yellow bar */ #extraDiv1 { height: 40px; width: 715px; margin: 0 auto; background: #FFFFFF url(bandwidth.gif); text-align: left; } /* bit of a hack topositiuon the bandwidth text */ #requirements .p5 { position: absolute; margin: 0; padding: 0; bottom: -30px; left: 35px; text-align: left; z-index: 10; } /* linkList stuff */ #linkList { width: 220px; position: absolute; top: 240px; left: 25px; background: #c5d19b; } #linkList2 { padding: 15px 10px 10px 10px; } #linkList h3 { margin: 0px; padding: 0px; } #linkList h3 span { display: none; } #linkList ul { margin: 12px 0 15px 15px; padding: 0px; } #linkList li { list-style: none; margin: 0; padding: 0px; } #lselect li { margin: 0 0 10px 0; } #lselect li a { display: block; } #lselect li .c { display: inline; } #lselect h3 { background: url(select.gif) no-repeat; height: 22px; } #larchives h3 { background: url(archive.gif) no-repeat; height: 15px; } #lresources h3 { background: url(resources.gif) no-repeat; height: 14px; } /* css Zen Garden submission 047 - 'dusk' by Jon Hicks, http://exp.hicksdesign.co.uk/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Jon Hicks */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { background: #fff url(border.gif) repeat-y 20px 0px; margin: 0; padding: 0; font: 10px/1.4em Arial, Helvetica, sans-serif; color: #666; letter-spacing: 0.01em; } p { margin: 0 0 0.5em 0; } ul { list-style: none; margin: 0; padding: 0; } a, a:link a:active { color: #690; text-decoration:none; } a:visited { color: #666; } a:hover { background-color: #690; color: #fff; } /* main divs - in order of appearance */ /* ------------------------------------------------------------ */ /* big grey stripe */ #extraDiv1 { background: #666 url(end_block.gif) no-repeat right top; position: absolute; left: 10px; top: 30px; width: 780px; height: 230px; z-index: 1; } /* top left corner image of big grey stripe */ #extraDiv1 span{ display: block; background: url(corner.gif) no-repeat left top; width: 360px; height: 60px; } #container { margin-left: 358px; margin-top: 260px; width: 550px; } #pageHeader { background: transparent url(logo.gif) no-repeat left top; position: absolute; left: 10px; top: 137px; height: 229px; width: 730px; text-indent: -1000em; z-index: 2; } #preamble { color: #eee; position: absolute; height: 190px; width: 380px; left: 357px; top: 70px; padding-right: 20px; z-index: 2; overflow: auto; } #preamble h3 { background: url(road.gif) no-repeat left top; height: 19px; width: 216px; margin: 0 0 8px 0; } #preamble h3 span { display: none; } #quickSummary { position: absolute; left: 52px; top: 365px; height: 200px; width: 230px; color: #666; z-index: 2; line-height: 2em; } #quickSummary p.p2{ padding-top: 10px; } /* This is the bit that screws up in Opera 6 */ #supportingText { width: 375px; height: 150px; overflow: auto; padding: 0 20px 30px 5px; z-index: 10; border-left: solid 1px #999; } #supportingText h3 { font-size: 13px; color: #7fbb09; border-bottom: 1px solid #ccc; margin: 1.6em 0 0.8em 0; } #supportingText h3 span { border-bottom: 5px solid #ccc; } #footer { padding-bottom: 10px; padding-top: 10px; } /* links lists */ #linkList { width: 550px; } #linkList li{ padding-left: 2px; } #linkList h3 { text-indent: -1000em; margin-bottom: 3px; width: 116px; height: 18px; } /* links titles */ h3.select {background: url(select.gif) no-repeat left top;} h3.archives {background: url(archives.gif) no-repeat left top;} h3.favourites {background: url(favourites.gif) no-repeat left top;} h3.resources {background: url(resources.gif) no-repeat left top;} div#lselect, div#lfavorites, div#larchives, div#lresources { float: left; border-left: solid 1px #999; margin-right: 20px; padding-top: 20px; } /* css Zen Garden submission 048 - 'HoriZental' by Clément 'fastclemmy' Hardouin, http://www.fastclemmy.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Clément Hardouin */ /* Added: October 18th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { background-image:url("fond_body.gif"); background-repeat:repeat-x; background-position:top left; background-color:#fff; color:#666; font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; height:550px; width:4000px; } html > body { border-bottom:1px solid black; } h1, h2, h3, h4 { margin:0; padding:0; } div#intro { background-image:url("header.jpg"); background-repeat:no-repeat; background-position:left top; height:550px; } div#intro p { width:350px; } h1 span, h3 span, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none; } #explanation h3 span, #preamble h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display:block; font-family:Century Gothic, AvantGarde, Verdana, Arial, sans-serif; font-weight:normal; font-size:1.5em; color:#c9380b; } h2 { color:#ccc; padding-top:325px; font-size:0.8em; font-weight:normal; letter-spacing:0.4em; padding-left:3em; } div#quickSummary { margin-left:0.8em; } div#quickSummary a, div#footer a, p a { color:#c9380b; text-decoration:none; font-weight:bold; } div#quickSummary a:hover, p a:hover, div#footer a:hover { text-decoration:underline; } div#linkList2, div#lresources { background-image:url("fond_bande_milieu.gif"); background-repeat:repeat-y; width:255px; height:550px; position:absolute; top:0px; left:375px; } div#lresources { background-image:url("fond_bande_droite.gif"); width:298px; left:3200px; } h3.select { background-image:url("selectadesign.gif"); background-repeat:no-repeat; width:255px; height:145px; } h3.resources { background-image:url("browseresources.gif"); background-repeat:no-repeat; width:298px; height:138px; } div#lselect ul, div#larchives ul, div#lresources ul { color:#000; font-size:0.9em; margin:0px; padding:0px; width:90%; padding-left:35px; } div#lresources ul { padding-left:50px; } div#lselect li, div#larchives li, div#lresources li { background-image: url("puce_blanche.gif"); background-repeat: no-repeat; background-position: left center; list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px; width: 90%; font-size:0.8em; } div#lselect a, div#larchives a, div#lresources a { color:#666; text-decoration:none; font-weight:bold; } div#lselect a.c { color:#fff; font-weight:normal; } div#lselect a:hover, div#larchives a:hover, div#lresources a:hover { text-decoration:underline; } h3.archives { margin-top:70px; background-image:url("viewarchives.gif"); background-repeat:no-repeat; width:255px; height:100px; } div#preamble, div#explanation, div#participation, div#benefits, div#requirements { position:absolute; background-repeat:no-repeat; top:0px; font-size:75%; height:550px; } div#preamble { left:628px; background-image:url("theroad.jpg"); width:379px; } div#preamble h3, div#requirements h3, div#participation h3 { padding-top:280px; } div#preamble p, div#requirements p, div#participation p, div#explanation p, div#benefits p, div#preamble h3, div#requirements h3, div#participation h3, div#explanation h3, div#benefits h3, div#requirements p, div#requirements h3 { padding-left:8px; padding-right:8px; text-align:justify; } div#explanation { left:1007px; background-image:url("sowhat.jpg"); width:398px; } div#explanation h3, div#benefits h3 { padding-top:15px; } div#participation { left:1405px; background-image:url("participation.jpg"); width:656px; } div#benefits { left:2061px; background-image:url("benefits.jpg"); width:390px; } div#requirements { left:2451px; width:1050px; } div#footer { position:absolute; top:470px; left:0.8em; } div#footer a:before { content: url("puce_rouge.gif"); } p { font-size:0.9em; } #requirements .p5 { margin-top:15px; color:#ccc; }/* css Zen Garden default style - 'Tranquille' by Dave Shea - http://www.mezzoblue.com/ */ /* css released under Zen Garden License - http://www.mezzoblue.com/zengarden/license/ */ /* All associated graphics copyright 2003, Dave Shea */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* Please view the Zen Garden License for more information. http://www.mezzoblue.com/zengarden/license/ */ /* The Zen Garden default was the first I put together, and almost didn't make the cut. I briefly flirted with using 'Salmon Cream Cheese' as the main style for the Garden, but switched back to this one before launch. All graphics in this design were illustrated by me in Photoshop. Google Image Search provided inspiration for some of the elements. I did a bit of research on Kanji to come up with the characters on the top left. Anyone who can read that will most likely tell you it makes no sense, but the best I could do was putting together the characters for 'beginning' 'complete' and 'skill' to roughly say something like 'we're breaking fresh ground.' It's a stretch. */ /* basic elements */ html { margin: 0px; padding: 0px; } body { font: 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #999; margin: 0px; padding: 0px; text-align: left; background: #fff url(bg.gif) repeat-y; } p { font: 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0px; margin-top: 10px; padding:0px; } a:link { font-weight: bold; text-decoration: none; color: #FFCC00; } a:visited { font-weight: bold; text-decoration: none; color: #666; } a:hover, a:active { text-decoration: none; color: #666; } acronym { border-bottom: none; } /* specific divs */ #container { padding: 0px; margin: 0px; } #intro{ width: 760px; position:absolute; top:0px; left:0px; } #intro{ width: 760px; } #pageHeader { background: transparent url(headerbg2.gif) no-repeat top left; height: 83px; } #pageHeader h1 { background: transparent url(title.gif) no-repeat top left; margin: 0px; width: 760px; height: 43px; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(sub.gif) no-repeat top right; width: 760px; height: 42px; margin: 0px; padding:0px; } #pageHeader h2 span { display:none } #quickSummary p.p1{ margin:0px; margin-left: 199px; padding: 20px; text-align:justify; background: transparent url(hordot.gif) repeat-x bottom; } #quickSummary p.p2{ margin:0px; margin-left: 199px; padding: 20px; width: 520px; background: transparent url(hordot.gif) repeat-x bottom; } #preamble{ margin-left: 199px; padding-left: 20px ; padding-right: 20px; padding-bottom: 4px; width: 520px; background:transparent url(hordot.gif) repeat-x bottom; } #supportingText { position: absolute; top:390px; left: 199px; width: 560px; padding-bottom: 20px; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3{ margin:20px 0px 10px 0px; width:200px; height:19px; } #preamble h3{ background: transparent url(preh3.gif) no-repeat top left; } #explanation h3{ background: transparent url(exph3.gif) no-repeat top left; } #participation h3{ background: transparent url(parth3.gif) no-repeat top left; } #benefits h3, #requirements h3{ background: transparent url(benh3.gif) no-repeat top left; } #requirements h3{ background: transparent url(reqh3.gif) no-repeat top left; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #lselect h3 span, #lfavorites h3 span, #larchives h3 span, #lresources h3 span{ display:none; } #preamble p.p3, #explanation p.p2, #participation p.p4, #benefits p.p1, #requirements p.p5 { padding-bottom: 20px; margin:0px; } #preamble, #explanation, #participation, #benefits, #requirements { padding-left: 20px ; padding-right: 20px; padding-bottom: 4px; background:transparent url(hordot.gif) repeat-x bottom; } #linkList{ position: absolute; top:260px; left: 0px; padding:0px; margin:0px; width: 180px; } #lselect h3{ padding:0px; margin:0px; width:199px; height:21px; } #lfavorites h3, #larchives h3, #lresources h3{ padding:0px; margin:0px; width:199px; height:21px; } #lselect h3{ background: transparent url(select.gif) no-repeat top left; } #lfavorites h3{ background: transparent url(fav.gif) no-repeat top left; } #larchives h3{ background: transparent url(arc.gif) no-repeat top left; } #lresources h3{ background: transparent url(res.gif) no-repeat top left; } #lselect ul, #lfavorites ul, #larchives ul, #lresources ul{ margin: 0; padding: 0; margin-top:20px; margin-bottom: 20px; list-style-type: none; } #lselect li, #lfavorites li, #larchives li, #lresources li { padding-left: 12px; margin-top: 10px; margin-bottom: 10px; } #lselect a, #lfavorites a { background: transparent url(bul2.gif) no-repeat 0px 2px; padding-left:18px; display:block; } #lselect a:hover, #lfavorites a:hover { background: transparent url(bul1.gif) no-repeat 0px 2px; padding-left:18px; display:block; } #lselect a.c, #lfavorites a.c { font: 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #999; font-weight: normal; text-decoration:none; background: transparent; padding-left:0px; display:inline; } #lselect a.c:hover, #lfavorites a.c:hover { background: transparent; padding-left:0px; display:inline; } #footer{ width: 520px; padding-left: 20px ; padding-right: 20px; padding-bottom: 4px; background: #efefef url(hordot.gif) repeat-x bottom;; } #extraDiv1{ width:196px; height:177px; top: 63px; left:1px; position:absolute; background: transparent url(buda.jpg) no-repeat; } /* css Zen Garden submission 050 - 'First Summary' by Cornelia Lange, http://www.clkm.de/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Cornelia Lange */ /* Added: October 17th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* elements */ body { color: #000; background: #545D64; font: 90% Verdana, Arial, Helvetica, sans-serif; text-align: center; } body, html, h1, h2, h3, p, ul, li, div, span { margin: 0; padding: 0; } a { color: #fff; font-weight: normal; background: transparent; } a:visited { color: #000; background: transparent; } a:hover { text-decoration: underline; color: #900; background: transparent; } ul, li { display: block; list-style: none; } a acronym { border: 0 none; } /* divs and related classes */ #container { position: relative; display: block; width: 737px; margin: 30px auto 0 auto; text-align: left; color: #000; background: transparent url(zengarden.jpg) top left no-repeat; border-left: 1px solid #545D64; } #intro { padding-top: 330px; } #pageHeader h1 { display: none; } #pageHeader h2 { display: none; } #quickSummary { position: absolute; top: 0; left: 560px; display: block; width: 180px; height: 330px; color: #000; background: transparent; } #quickSummary p { font-size: .78em; width: 120px; } #quickSummary .p1 { display: none; } #quickSummary .p2 { position: absolute; top: 230px; left: -330px; display: block; width: 90px; font-family: Arial, Helvetica, sans-serif; } #preamble { display: block; width: 626px; margin-left: 110px; color: #fff; background: #B5BB7D url(enlightenment_default.gif) 100% 3em no-repeat; } #preamble h3 { display: none; } #preamble p { font-size: 0.8em; line-height: 140%; width: 440px; color: #000; background: #B5BB7D; } #preamble .p1, #preamble .p2, #preamble .p3 { width: 290px; margin: 0 0 0 110px; padding: 10px 20px 5px 20px; color: #fff; background: #537E53; } #preamble .p1 { padding-top: 4em; } #preamble .p2 { margin-top: -2px; } #preamble .p3 { margin-top: -2px; padding-bottom: 20px; } #supportingText { display: block; width: 736px; color: #000; background: #B5BB7D url(main_bg.gif); border-bottom: 20px solid #B62814; } #explanation, #participation, #benefits, #requirements { margin-left: 110px; width: 626px; } #explanation { color: #000; background: #FFFFCD url(about.gif) 100% 20px no-repeat; } #participation { color: #000; background: #FAC46C url(participation.gif) 100% 20px no-repeat; } #benefits { color: #000; background: #FFFFCD url(benefits.gif) 100% 20px no-repeat; } #requirements { color: #000; background: #FAC46C url(requirements.gif) 100% 20px no-repeat; } #explanation p, #benefits p, #requirements p, #participation p { width: 440px; font-size: 0.8em; line-height: 140%; } #explanation h3 { display: none; } #explanation p { color: #000; background: #FAC46C; } #explanation .p1 { border-top: 4px solid #B52814; width: 340px; padding: 25px 20px 5px 80px; } #explanation .p2 { width: 340px; padding: 10px 20px 20px 80px; margin-top: -2px; } #participation h3 span { display: none; } #participation p { color: #000; background: #B5BB7D; } #participation .p1 { width: 340px; padding: 25px 20px 5px 80px; } #participation .p2 { width: 340px; padding: 10px 20px 5px 80px; margin-top: -2px; } #participation .p3 { width: 340px; padding: 10px 20px 5px 80px; margin-top: -2px; } #participation .p4 { width: 340px; padding: 10px 20px 20px 80px; margin-top: -2px; } #benefits h3 { display: none; } #benefits p { color: #000; background: #FAC46C; } #benefits .p1 { width: 340px; padding: 25px 20px 20px 80px; } #requirements h3 { display: none; } #requirements p { color: #000; background: #B5BB7D; } #requirements .p1 { width: 340px; padding: 25px 20px 5px 80px; } #requirements .p2 { width: 340px; padding: 10px 20px 5px 80px; margin-top: -2px; } #requirements .p3 { width: 340px; padding: 10px 20px 5px 80px; margin-top: -2px; } #requirements .p4 { width: 340px; padding: 10px 20px 5px 80px; margin-top: -2px; } #requirements .p5 { width: 340px; padding: 10px 20px 20px 80px; margin-top: -2px; } /* The Tan-Hack for IE 5.0 */ * html #preamble .p1, * html #preamble .p2, * html #preamble .p3 { width: 330px; w\idth: 290px; } * html #supportingText .p1, * html #supportingText .p2, * html #supportingText .p3, * html #supportingText .p4, * html #supportingText .p5 { width: 440px; w\idth: 340px; } #footer { position: absolute; top: 115px; left: 115px; display: block; height: 110px; width: 110px; margin: 0; padding: 0; } #footer a { font: 0.78em Arial, Helvetica, sans-serif; } #footer a:link, #footer a:visited { color: #fff; background: transparent; } #footer a:hover, #footer a:active { color: #f60; background: transparent; } /* left Menu */ #linkList2 { display: block; position: absolute; top: 330px; left: 0; text-align: left; } #lselect { position: relative; top: 0; left: 0; color: #000; background: #D28B6B; width: 110px; text-align: center; } #lselect h3 { display: none; } #lselect ul { list-style: none; margin: 0; padding: 0 0 10px 0; } #lselect li { display: block; width: 100px; background: transparent; margin: 0 5px; padding: 5px 0 5px 0; font-size: 0.78em; } #lselect a { display: block; width: 100px; color: #fff; background: #D28B6B url(anim.gif) bottom center no-repeat; margin: 0 0 5px 0; padding-bottom: 10px; text-decoration: none; } #lselect a:link, #lselect a:visited { color: #fff; background: #D28B6B url(punkte.gif) bottom center no-repeat; } #lselect a:hover, #lselect a:active { color: #fff; background: #D28B6B url(anim.gif) bottom center no-repeat; text-decoration: underline; } #lselect a.c, #lselect a:link.c , #lselect a:visited.c{ color: #000; background: transparent; display: inline; } #lselect a:hover.c, #lselect a:active.c { display: inline; } #lfavorites { position: relative; top: 10px; left: 0; width: 110px; color: #000; background: #D28B6B url(favorites.gif) top left no-repeat; text-align: center; } #lfavorites h3 { display: none; } #lfavorites ul { list-style: none; margin: 0; padding: 30px 0 10px 0; } #lfavorites li { display: block; width: 100px; background: transparent; margin: 0 5px; padding: 5px 0 5px 0; font-size: 0.78em; } #lfavorites a { color: #fff; background: #D28B6B url(anim.gif) bottom center no-repeat; margin: 0 0 5px 0; display: block; width: 100px; padding-bottom: 10px; text-decoration: none; } #lfavorites a:link, #lfavorites a:visited { color: #fff; background: #D28B6B url(punkte.gif) bottom center no-repeat; } #lfavorites a:hover, #lfavorites a:active { color: #fff; background: #D28B6B url(anim.gif) bottom center no-repeat; text-decoration: underline; } #lfavorites a.c, #lfavorites a:link.c , #lfavorites a:visited.c{ color: #000; background: transparent; display: inline; } #lfavorites a:hover.c, #lfavorites a:active.c { display: inline; } #larchives { position: relative; left: 0; top: 10px; display: block; width: 7.65em; height: 7.65em; color: #fff; background: transparent url(archives3.gif) top left no-repeat; } #larchives h3 { display: none; } #larchives h3 span { display: none; } #larchives ul { list-style: none; margin: 0; padding: 40px 0 0 0; } #larchives li { display: inline; font-size: 0.78em; padding: 0; margin: 0; } #larchives a { display: block; color: #fff; background: transparent url(point.gif) left no-repeat; text-decoration: none; padding-left: 10px; margin-left: 5px; } #larchives a .accesskey { color: #fff; background: transparent; } #lresources { position: absolute; top: 0; left: 110px; color: #fff; background: #B62814; display: block; width: 626px; height: 1.3em; padding: 1px 0; } #lresources h3 { display: none; } #lresources ul { list-style: none; margin: 0 0 0 5px; padding: 0; display: inline; } #lresources li { display: inline; font-size: 0.78em; } #lresources a { font-size: 0.80em; padding: 0 5px 0 8px; color: #fff; background: transparent url(pointanim.gif) left no-repeat; text-decoration: none; } #lresources a:link, #lresources a:visited { color: #fff; background: transparent url(point.gif) left no-repeat; } #lresources a:hover, #lresources a:active { color: #fff; background: transparent url(pointanim.gif) left no-repeat; } /* css Zen Garden submission 051 - 'Commercial Drive' by Wendy Foster, http://www.transgression.ca/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Wendy Foster */ /* Added: October 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Support the Open Source Initiative - http://www.opensource.org/ */ /* basic elements */ body { background: #79000E url("girl.jpg") no-repeat fixed top left; font: 10px verdana, sans-serif; color: #000000; margin: 0px 0px 0px 0px; } p { font: 10px verdana, sans-serif; margin-top: 0px; text-align: justify; } /* font resizing hack. Allows for an absolute value to be specified in the main p tag, as well as resolves resizing and rendering issues cross-browser. For a detailed explanation see: Mark Pilgrim's "Relative Font Sizing HOWTO : http://diveintoaccessibility.org/examples/fontsize.html */ /*/*/a{} body, body p { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body, html>body p { font-size: small; } /* */ h3 { font: 10px verdana, sans-serif; letter-spacing: 1px; margin-bottom: 0px; background: none; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; background:none; color: #79000e; cursor: help; } a:visited { font-weight: bold; text-decoration: none; background: none; color: #7099A6; cursor: help; } a:active { font-weight:bold; text-decoration: none; background: none; color: #5f3a79; cursor: help; } a:hover { font-weight: bold; text-decoration: none; border: 1px solid #000000; background: #c2c4c6; color:#003058; cursor: help; } /* specific divs */ #container { background: #CED41E; color: #000000; padding: 5px 5px 5px 5px; margin: 0px; width:300px; position:absolute; top:0px; left:493px; border-right: 5px solid #000000; border-left: 5px solid #000000; } #intro { min-width: 300px; } #pageHeader { margin-bottom: 20px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url("garden.gif") no-repeat top left; color:#000000; width: 250px; height: 80px; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url("design.gif") no-repeat top left; color:#000000; width: 250px; height: 25px; position:absolute; left:35px; top:82px; } #pageHeader h2 span { display:none; } #quickSummary { clear:both; margin: 20px 20px 10px 10px; padding:20px 5px 5px 5px; width: 250px; background: #d6d894 url("summarybg.gif"); color: #000000; border-right: 5px solid #000000; border-left: 5px solid #000000; border-bottom: 5px solid #000000; } #quickSummary p { font: 10px verdana, sans-serif; text-align:center; } /*/*/a{} body #quickSummary p { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #quickSummary, html>body #quickSummary p { font-size: small; } /* */ #preamble { padding:5px 5px 5px 5px; } #preamble h3 { background: transparent url("enlightenment.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #preamble h3 span { display:none; } #supportingText { padding:5px 5px 5px 5px; margin-bottom: 20px; } #explanation h3 { background: transparent url("about.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #explanation h3 span { display:none; } #participation h3 { background: transparent url("participation.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #participation h3 span { display:none; } #benefits h3 { background: transparent url("benefits.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #benefits h3 span { display:none; } #requirements h3 { background: transparent url("requirements.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #requirements h3 span { display:none; } #favorites h3 { background: transparent url("favorites.gif") no-repeat top left; text-align:center; color:#000000; width: 250px; height: 25px; } #favorites h3 span { display:none; } #footer { text-align: center; padding: 5px 5px 5px 5px; border-left: 5px solid #000000; border-right: 5px solid #000000; border-bottom: 5px solid #000000; background:#D9DE4B url("footerbg.gif"); color:#000000; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList2 { background:#CED41E url("linklistbg.gif"); color:#000000; font: 10px verdana, sans-serif; padding: 5px 5px 5px 5px; border-top: 5px solid #000000; border-bottom: 5px solid #000000; position:absolute; top:27px; left:-230px; height:125px; width:220px; overflow:auto; } /*/*/a{} body #linkList2 { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList2 { font-size: small; } /* */ #linkList h3.select { background: transparent url(select.gif) no-repeat top left; color:#000000; margin: 10px 0px 5px 0px; width: 100px; height: 20px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(favorites.gif) no-repeat top left; color:#000000; margin: 25px 0px 5px 0px; width: 100px; height: 20px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.gif) no-repeat top left; color:#000000; margin: 25px 0px 5px 0px; width:100px; height: 20px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.gif) no-repeat top left; color:#000000; margin: 25px 0px 5px 0px; width:100px; height: 20px; } #linkList h3.resources span { display:none } #linkList ul { font:10px verdana, sans-serif; margin: 0px; padding-left: 15px; list-style-type: circle; list-style-image: url("bullet.gif"); } /*/*/a{} body #linkList ul { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList ul { font-size: small; } /* */ #linkList li { font: 10px verdana, sans-serif; padding-top: 5px; margin-bottom: 5px; } /*/*/a{} body #linkList li { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList li { font-size: small; } /* */ #linkList li a:link { font: 10px verdana, sans-serif; font-weight:bold; background:none; color: #79000e; text-decoration:none; cursor: help; } /*/*/a{} body #linkList li a:link{ font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList li a:link { font-size: small; } /* */ #linkList li a:visited { font: 10px verdana, sans-serif; font-weight:bold; background:none; color: #7099A6; text-decoration:none; cursor: help; } /*/*/a{} body #linkList li a:visited{ font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList li a:visited { font-size: small; } /* */ #linkList li a:active { font: 10px verdana, sans-serif; font-weight:bold; background:none; color: #5f3a79; text-decoration:none; cursor: help; } /*/*/a{} body #linkList li a:active{ font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList li a:active { font-size: small; } /* */ #linkList li a:hover { font: 10px verdana, sans-serif; font-weight:bold; border: 1px solid #000000; background: #c2c4c6; color:#003058; text-decoration:none; cursor: help; } /*/*/a{} body #linkList li a:hover{ font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #linkList li a:hover { font-size: small; } /* */ /* css Zen Garden submission 052 - 'Postage Paid' by Mike Stenhouse, http://www.donotremove.co.uk */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Mike Stenhouse */ /* Added: October 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ html { background-color: #BDB7BD; color: black; } body { margin:0 0 0 0; padding:0 0 0 0; font-family:arial, helvetica, sans-serif; font-size:11px; letter-spacing:0.01em; color:black; /*overflow: hidden;*/ /* hack to stop IE/Mac adding masses of space under the page - caused by IE/Mac rendering space for the invisible content of overflow:auto */ } p { margin:0; padding-top:0; padding-bottom:11px; line-height:130%; } acronym { text-decoration:none; font-style: none; border-bottom:0px dotted black; } /* LINK STYLES */ a, a:link a:active { color:black; background-color:white; text-decoration:none; font-weight:normal; } a:visited { color:#666; } a:hover { background-color:black; color:white; } div#intro a, div#intro a:link div#intro a:active { color:black; text-decoration:none; font-weight:normal; } div#intro a:visited { color:#666; } div#intro a:hover { background-color:#FE7996; color: white; } div#supportingText a, div#supportingText a:link div#supportingText a:active { background-color: white; color: black; text-decoration:none; font-weight:normal; } div#supportingText a:visited { color:#666; } div#supportingText a:hover { background-color: black; color: white; } div#supportingText div#footer a, div#supportingText div#footer a:link div#supportingText div#footer a:active { background-color:transparent; color:black; text-decoration:none; font-weight:bold; } div#supportingText div#footer a:visited { color:black; } div#supportingText div#footer a:hover { background-color: black; color: white; } div#linkList a, div#linkList a:link div#linkList a:active { background-color:white; color:black; text-decoration:none; font-weight:normal; } div#linkList a:visited { color:#666; text-decoration: line-through; } div#linkList div#larchives a:visited, div#linkList div#lresources a:visited { text-decoration: none; } div#linkList a:hover { background-color: #FE7996; color: white; } /* END LINK STYLES */ /* CONTAINER */ div#container { z-index:1; width:780px; padding-bottom:100px; background: url("card_bottom.jpg") no-repeat left bottom; } /* END CONTAINER */ /* INTRO */ div#intro { position:relative; top:0; left:0; width:780px; height:100px; padding-top:0; margin-top:0; padding:167px 0 27px 27px; background: url("card.jpg") repeat-y left top; } html>body div#intro { height:auto; } div#intro h1 { z-index:10; position:absolute; top:50px; left:0; height: 101px; width: 307px; margin:0; padding:0; background: url(logo.jpg) no-repeat left top; } div#intro h1 span { display: none; } div#intro h2 { z-index:10; position:absolute; top:119px; left:174px; width: 205px; height: 32px; margin:0; padding:0; background: url(tagline.jpg) no-repeat left top; } div#intro h2 span { display: none; } div#intro div#pageHeader { z-index:2; position:absolute; top:0; left:0; width:780px; height:150px; background: url("card_top.jpg") no-repeat left top; } div#intro div#quickSummary { z-index:10; position:absolute; top:37px; left:427px; width:301px; background: white url("rounded_top.jpg") no-repeat left top; } div#intro div#quickSummary p { padding-left:100px; padding-right:15px; } div#intro div#quickSummary p.p1 { height:107px; margin-top:26px; margin-bottom:11px; padding-bottom:0; background: url("a_demonstration_of.gif") no-repeat 100px 22px; } div#intro div#quickSummary p.p1 span { display:none; } div#intro div#quickSummary p.p2 { padding-bottom:20px; color:#aaa; background: url("rounded_bottom.jpg") no-repeat bottom left; } div#intro div#preamble { z-index:10; position:relative; width:198px; margin:0; padding:0; color:white; background: #071969 url("blue_top.gif") no-repeat top left; } div#intro div#preamble h3 { position:absolute; top:15px; right:15px; width: 32px; height: 244px; margin:0; padding:0; background: url(the_road_to_enlightenment2.gif) no-repeat left top; } div#intro div#preamble h3 span { display:none; } div#intro div#preamble p { padding-left:15px; padding-right:15px; margin-left:0px; margin-right:30px; } div#intro div#preamble p.p1 { padding-top:65px; margin-top:0; } div#intro div#preamble p.p3 { padding-bottom:30px; margin-bottom:0; background: url("blue_bottom.gif") no-repeat bottom left; } /* END INTRO */ /* SUPPORTINGTEXT */ div#supportingText { position:absolute; z-index:10; left:240px; top:329px; padding:0 0 0 0; width:335px; height:300px; overflow:auto; background-color:#A5D2AA; border-width: 2px 2px 2px 2px; border-style:solid; border-color:white; } div#supportingText p { padding-left:35px; padding-right:15px; /*margin-right:35px;*/ /*to sort ie/mac horiz scrollbar*/ } div#supportingText div#explanation { background: url("do_not_duplicate.gif") no-repeat 5px 14px; } div#supportingText div#explanation h3 { width: 166px; height: 15px; margin:10px 0 6px 34px; display:block; background: url(so_what_is_this_about.gif) no-repeat left top; } div#supportingText div#explanation h3 span { display:none; } div#supportingText div#participation h3 { width: 166px; height: 18px; margin:0px 0 3px 34px; background: url(participation.gif) no-repeat left top; } div#supportingText div#participation h3 span { display:none; } div#supportingText div#benefits h3 { width: 166px; height: 15px; margin:0px 0 6px 34px; background: url(benefits.gif) no-repeat left top; } div#supportingText div#benefits h3 span { display:none; } div#supportingText div#requirements h3 { width: 166px; height: 18px; margin:0px 0 3px 34px; background: url(requirements.gif) no-repeat left top; } div#supportingText div#requirements h3 span { display:none; } div#supportingText div#footer { padding:0 15px 17px 35px; background: url("footer.gif") no-repeat bottom left; } /* END SUPPORTINGTEXT */ /* LINKLIST */ div#linkList { z-index:10; position:absolute; top:247px; left:594px; width:160px; color:#aaa; background: white url("rounded2_top.jpg") no-repeat top left; } div#linkList ul { margin:0; padding:0 15px 6px 15px; list-style:none; } div#linkList ul li { margin:0; padding:0; } div#linkList div#lselect h3 { width:112px; height:12px; margin:40px 0 6px 15px; padding:0; background: url("select_a_design2.gif") no-repeat top left; } div#linkList div#lselect h3 span { display:none; } div#linkList div#lselect li { margin-bottom:2px; } div#linkList div#larchives h3 { margin:0 0 0 0; } div#linkList div#larchives h3 span { display:none; } div#linkList div#larchives a { font-weight:bold; } div#linkList div#lresources h3 { width:81px; height:11px; margin:6px 0 6px 15px; padding:0; background: url("resources2.gif") no-repeat top left; } div#linkList div#lresources h3 span { display:none; } div#linkList div#lresources ul { padding-bottom:20px; background: url("rounded2_bottom.jpg") no-repeat bottom left; } div#linkList div#lresources li { margin-bottom:2px; } /* END LINKLIST */ /* EXTRAS */ div#extraDiv1 { z-index:11; position:absolute; top:68px; left:381px; width:134px; height:119px; background: url("stamp.jpg") no-repeat top left; } div#extraDiv2 { z-index:11; position:absolute; top:260px; left:240px; width:335px; height:69px; background: white url("barcode.gif") no-repeat top left; border-width: 2px 2px 0 2px; border-style:solid; border-color:white; } div#extraDiv3 { z-index:2; position:absolute; top:265px; left:609px; width:171px; height:356px; background: url("bent.jpg") no-repeat top left; } /* END EXTRAS */ /* css Zen Garden submission 053 - 'untitled' by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Ray Henry */ /* Added: October 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { font-family:verdana, arial, sans serif; color:#65625B; background:#fff url(main2_bg.gif); margin:0; padding:0; } #container { width:auto; margin:22px 0 0 0; padding:7px 0 0 0; height:471px; } acronym { cursor: help; } /*-- intro section --*/ #intro { background:#fff url(intro_bg.jpg) no-repeat top left; width:339px; height:471px; padding:0 0 0 201px; margin:0; } #pageHeader { background:#fff url(pageHead_bg.gif) no-repeat top left; width:302px; height:51px; margin:0; padding:0; border-bottom:1px dotted #c8c8c8; } #quickSummary, #preamble { font-size:11px; margin:0 0 0 100px; width:202px; } #quickSummary p, #preamble p { margin-bottom:10px; line-height:16px; } #preamble h3 { background:#fff url(preamble_h3_bg.gif) no-repeat top left; width:142px; height:13px; margin-top:20px; } /*-- supportingText section --*/ #supportingText { background:transparent; font-size:11px; width:auto; } #explanation { position:absolute; top:80px; left:520px; clear:both; background:#fff url(graySec_bg.gif) repeat-x top left; width:344px; margin:0; padding:10px 0 0 0; height:410px; } #explanation h3 { background:#F4F4F3 url(explan_h3_bg.gif) no-repeat top left; width:137px; height:13px; margin:30px 10px 10px 10px; } #explanation p { margin:10px; line-height:16px; } /*-- participation section --*/ #participation { position:absolute; top:80px; left:868px; background:#fff url(explan_bg.gif) no-repeat top left; width:344px; margin:0; padding:10px 0 0 3px; height:410px; } #participation h3 { background:#fff url(part_h3_bg.gif) no-repeat top left; width:73px; height:13px; margin:30px 10px 10px 10px; } #participation p { margin:10px; line-height:16px; } /*-- benefits section --*/ #benefits { position:absolute; top:80px; left:1216px; background:#fff url(graySec_bg.gif) repeat-x top left; width:344px; margin:0; padding:10px 0 0 3px; height:410px; } #benefits h3 { background:#F4F4F3 url(ben_h3_bg.gif) no-repeat top left; width:45px; height:13px; margin:30px 10px 10px 10px; } #benefits p { margin:10px; line-height:16px; } /*-- requirements section --*/ #requirements { position:absolute; top:80px; left:1564px; background:#fff url(explan_bg.gif) repeat-x top left; width:560px; margin:0; padding:10px 0 0 3px; height:410px; } #requirements h3 { background:#fff url(req_h3_bg.gif) no-repeat top left; width:73px; height:13px; margin:30px 10px 10px 10px; } #requirements p { margin:10px; line-height:16px; } /*-- footer section --*/ #footer { position:absolute; top:80px; left:2546px; background:#fff url(graySec_bg.gif) repeat-x top left; width:40px; padding:45px 0 0 10px; height:375px; margin:0px 50px 0 0; line-height:20px; } /*-- lselect section --*/ #lselect { position:absolute; background:#fff url(lselect_arrow_bg.gif) no-repeat top left; top:30px; left:520px; height:51px; width:2100px; margin:0; padding:0; border-left:1px dotted #c8c8c8; border-bottom:1px dotted #c8c8c8; font-size:11px; } #lselect h3 { background:#fff url(lselect_bg.gif) no-repeat top left; width:83px; height:13px; margin:10px 10px 9px 10px; } #lselect ul { margin:0 0 0 80px; padding:0; } #lselect li { font-size:10px; margin-right:8px; padding:6px; display: inline; list-style-type: none; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; } #lselect a:link, #lselect a:visited, #lselect a:active { font-size:10px; color:#65625B; } #lselect li:hover{ background: #f5f5f5 url(tab_bg.gif) repeat-x top left; color:#434039; } /*-- larchives section --*/ #larchives { position:absolute; top:80px; left:2131px; background:#F4F4F3 url(explan_bg.gif) repeat-x top left; width:200px; margin:0; padding:10px 0 0 3px; height:410px; } #larchives h3 { background:#F4F4F3 url(arch_h3_bg.gif) no-repeat top left; width:49px; height:13px; margin:30px 10px 10px 10px; } #larchives ul { list-style-type: none; font-size:11px; margin:0 0 0 20px; padding:0; line-height:20px; } /*-- larchives section --*/ #lresources { position:absolute; top:80px; left:2338px; background:#fff url(explan_bg.gif) repeat-x top left; width:200px; margin:0; padding:10px 0 0 3px; height:410px; } #lresources h3 { background:#fff url(res_h3_bg.gif) no-repeat top left; width:60px; height:13px; margin:30px 10px 10px 10px; } #lresources ul { list-style-type: none; font-size:11px; margin:0 0 0 20px; padding:0; line-height:20px; } /*-- LINKS --*/ #quickSummary a:link, #quickSummary a:visited, #quickSummary a:active, #supportingText a:link, #supportingText a:visited, #supportingText a:active, #larchives a:link, #larchives a:visited, #larchives a:active, #lresources a:link, #lresources a:visited, #lresources a:active { color:#65625B; } #quickSummary a:hover, #supportingText a:hover, #larchives a:hover, #lresources a:hover{ color:#434039; } /*-- hidden --*/ #pageHeader h1, #pageHeader h2, #preamble h3 span, #preamble p.p3, #participation p.p4, #explanation h3 span, #participation h3 span, #benefits h3 span, #supportingText h3 span, #lselect h3 span, #larchives h3 span, #lresources h3 span, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none; }/* css Zen Garden submission 054 - 'Gecko's Eye' by Sandra Greco, http://www.magritte.it/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Sandra Greco */ /* Added: October 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { color: #fff; background: #9E9E9E; margin: 0; background-image: url(bg.gif); background-position: top left; background-repeat:no-repeat; } p { font: 8pt/15pt Verdana, Arial, Helvetica, sans-serif; margin-top: 4px; text-align: left; margin-right:5px; } .p1, .p2 { background-image: url(separator.gif); background-position: left bottom; background-repeat:no-repeat; padding-bottom:15px; margin-left:10px; } .p3 { padding-bottom:12px; margin-left:10px; } .p4 { background-image: url(separator.gif); background-position: left bottom; background-repeat:no-repeat; padding-bottom:10px; } h3 { FONT: 11pt times, Verdana, Arial, Helvetica, sans-serif; COLOR: #EEE9E0; text-decoration: none; font-weight:bold; height:10px; line-height:17px; letter-spacing:0.04em; } a:link { font-weight: bold; text-decoration: underline; color: #ffffff; } a:visited { font-weight: bold; text-decoration: underline; color: #ffffff; } a:hover, a:active { text-decoration: none; color: #ffffff; } #container { background-image: url(geco_garden.gif); background-position: 221px 0px; background-repeat:no-repeat; margin: 0; height:80%; } #explanation { BACKGROUND:#880622 url(eye.gif) 0 10px no-repeat; width:520px; padding-bottom:35px; border-top: solid 1px #5F0116; border-right: solid 1px #5F0116; } #participation, #benefits, #requirements { BACKGROUND:#880622 url(eye.gif) 0 10px no-repeat; width:520px; padding-bottom:35px; margin-top:-35px; border-right: solid 1px #5F0116; } #explanation p, #participation p, #benefits p, #requirements p { width:490px; margin-left:10px; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin-left:55px; padding-top:30px; color: #d3f580; } #footer { font: 11px Verdana, Arial, Helvetica, sans-serif; BACKGROUND:#C6C4C4; width:520px; text-align:center; border-right: solid 1px #880622; border-bottom: solid 1px #880622; border-left: solid 1px #880622; padding-bottom: 2px; } #footer a:link, #footer a:visited { margin-right: 10px; color:#000000; } #footer a:hover { color:#880622; } #intro { min-width: 200px; } #extraDiv1 { background:#9E9E9E url(garden_css.gif) top left no-repeat; position: absolute; top: 145px; left: 520px; width:251px; height: 152px; border-bottom: solid 1px #EEE9E0; border-left: solid 1px #EEE9E0; border-top: solid 1px #EEE9E0; } #extraDiv2 { position: absolute; top: 0; left: 195px; background-position: top left; background-repeat:no-repeat; width:25px; height:220px; } #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none; } #quickSummary { position:absolute; top: 0; left: 520px; background:#0B4D69 url(sfondo_top.gif) no-repeat top left; font: 8pt/12pt Verdana, Arial, Helvetica, sans-serif; border-right: solid 1px #EEE9E0; border-left: solid 1px #EEE9E0; width:250px; z-index:1 } #quickSummary p { font: 8pt/12pt Verdana, Arial, Helvetica, sans-serif; text-align: left; margin-left:5px; width: 240px; } p:first-letter { COLOR: #EEE9E0; font-size: 150%; font-weight: bold; margin: 0px 2px 0px 0px; } #preamble { BACKGROUND:#497c89; width:221px; border-right: solid 1px #EEE9E0; margin-top:0; padding-bottom:1px; padding-top:1px; } #preamble h3 { color: #d3f580; padding-bottom:5px; margin-left:10px; padding-top:10px; } #pageHeader h1, #pageHeader h1 span, #pageHeader h2, #pageHeader h2 span { display:none } #linkList { margin-left: 250px; margin-top:110px; padding-left:7px; position: absolute; top: 40px; left: 270px; border-left: solid 1px #EEE9E0; border-right: solid 1px #EEE9E0; border-bottom: solid 1px #EEE9E0; padding-bottom:30px; width:200px; } #linkList2 { font: 10px Verdana, Arial, Helvetica, sans-serif; padding-left:10px; margin-top: 150px; width: 165px; } #linkList h3.select { text-align: center; } #linkList h3.select span { font: 12px/18px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; letter-spacing:0.03em; margin: 30px 0px 5px 0px; height: 20px; } #linkList h3.favorites, #linkList h3.favorites span { display:none; } #larchives li { margin-bottom:5px; margin-top:6px; } #larchives a { background: url(arrow.gif) no-repeat top left; } #larchives a:hover, #larchives a:active #larchives a:visited{ background-color: #9E9E9E; text-decoration: none; } #lresources li { margin-bottom:5px; margin-top:6px; } #lselect a:link { text-decoration: none; background: url(circle.gif) top left no-repeat; } #lselect a:hover, #lselect a:active { text-decoration: none; } #lresources a { background-color: #9E9E9E; background: url(arrow.gif) no-repeat top left; } #lresources a:link { background-color: #9E9E9E; } #lresources a:hover, #lresources a:active { background-color: #9E9E9E; text-decoration: none; } #lresources a:visited{ background-color: #9E9E9E; text-decoration: none; background: url(arrow.gif) no-repeat top left; } #linkList h3.archives, #linkList h3.resources { font: 12px Verdana, Arial, Helvetica, sans-serif; letter-spacing:0.03em; margin: 15px 0px 5px 0px; height: 60px; width: 140px; background:url(decoration.gif) no-repeat top center; text-align: center; } #linkList h3.archives span, #linkList h3.resources span { letter-spacing:0.03em; font: 12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-align: center; width:140px; margin-top:40px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; } #linkList li a:link { color: #880622; text-decoration: none; padding-right:2px; padding-left:10px; padding-bottom:3px; padding-top:1px; height:18px; } #linkList li a:hover { color: #EEE9E0; text-decoration: none; padding-right:2px; padding-left:10px; padding-bottom:3px; padding-top:1px; } #linkList li a:visited { color: #880622; text-decoration: none; padding-right:2px; padding-left:10px; padding-bottom:3px; padding-top:1px; } #linkList li a:active { color: #880622; text-decoration: none; padding-right:2px; padding-left:10px; padding-bottom:3px; padding-top:1px; } #lselect{ display: block; font-weight: normal; text-decoration: none; } #lselect a.c { font-weight: normal; text-decoration: none; display: block; background: url(arrow1.gif) no-repeat top left; } #lselect a:hover.c { display: block; font-weight: normal; color:#EEE9E0; text-decoration: none; } .c { color: #880622; text-decoration: none; } .c:hover { color: #880622; text-decoration: underline; } /* css Zen Garden submission 056 - 'zenlightenment' by Lance Leonard, http://www.solarfrog.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Lance Leonard */ /* Added: October 29th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ html { text-align: center; } body { background: #369 url(bg.gif) repeat-x top; margin: 0 auto; padding: 0; color: #fff; font-family: verdana, arial, helvetica, sans-serif; width: 760px; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } div#container { float: left; margin: 160px auto 0 auto; padding: 0; background: url(bg_container.gif) repeat-y top center; width: 760px; /* False value for IE4-5.x/Win */ text-align: left; } div#intro { position: relative; background: #369; border: solid 1px #000; margin: 0; padding: 5px; z-index: 1; width: 760px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 748px; /* Actual value for conformant browsers */ } div#pageHeader { position: absolute; top: -151px; left: 41px; background: url(head.jpg) no-repeat top left; width: 676px; height: 150px; } div#pageHeader h1, div#pageHeader h2 { display: none; } div#quickSummary { float: left; clear: both; margin: 0 0 0 5px; padding: 10px 0 0 0 ; width: 169px; /* False value for IE4-5.x/Win */ height: 169px; } div#quickSummary p.p1 { background: url("quickSum.gif") no-repeat top left; width: 159px; height: 139px; } div#quickSummary p.p1 span { display: none; } div#quickSummary p.p2 { position: absolute; top: 165px; font-size: 10px; width: 169px; } div#quickSummary a { color: #fff; font-weight: bold; } div#preamble { margin: 0 0 0 175px; padding: 5px 10px; background: #69c; min-height: 200px; width: 555px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 545px; /* Actual value for conformant browsers */ } div#preamble h3 { margin: 0 0 10px 0; padding: 0; height: 26px; background: url(road.gif) no-repeat top left; } div#preamble h3 span { display: none; } div#preamble p { margin: 8px 0 0 0; line-height: 1.5em; } div#supportingText { float: left; margin: 0; padding: 20px 20px 0 66px; background: url(bg_supportingText.gif) no-repeat top left; width: 496px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 410px; /* Actual value for conformant browsers */ } div#supportingText h3 { margin: 25px 0 0 0; padding: 0; width: 409px; height: 26px; } div#supportingText h3 span { display: none; } div#explanation h3 { margin-top: 0; background: url(what.gif) no-repeat top left; } div#participation h3 { background: url(part.gif) no-repeat top left; } div#benefits h3 { background: url(bene.gif) no-repeat top left; } div#requirements h3 { background: url(requ.gif) no-repeat top left; } div#supportingText p { margin: 15px 0 0 0; letter-spacing: .1em; line-height: 1.2em; } div#supportingText a { color: #036; } div#linkList { margin-left: 496px; padding: 20px; background: url(bg_linkList.gif) no-repeat top left; } div#linkList h3 { margin: 25px 0 0 0; padding: 0; width: 182px; height: 26px; } div#linkList h3 span { display: none; } div#lselect h3 { margin-top: 0px; background: url(selectadesign.gif) no-repeat top left; } div#larchives h3 { background: url(archives.gif) no-repeat top left; } div#lresources h3 { background: url(resources.gif) no-repeat top left; } div#linkList a { color: #369; text-decoration: none; font-size: small; font-weight: normal; } div#linkList a:hover { color: #036; } #linkList ul { margin: 12px 0 15px 15px; padding: 0px; } #linkList li { list-style: none; margin: 0; padding: 0px; } #lselect li { margin: 0 0 10px 0; } div#lselect li a { display: block; } div#lselect li .c { display: inline; } div#footer { border-top: solid 4px #eee; background: #69c; margin: 20px -22px 0 -22px; padding: 10px 20px; width: 450px; /* False value for IE4-5.x/Win */ voice-family: "\"}\""; voice-family:inherit; width: 410px; /* Actual value for conformant browsers */ } div#footer a { color: #fff; } /* --------- standalone --------- */ body { font: 11px/1.3 Tahoma, sans-serif; margin: 0; margin-left: 31px; padding: 0; background: #ddd url(bg.gif) repeat-y left; } #container { text-align: left; background-color: #eee; padding-bottom: 125px; width: 735px; height: 100%; } p { padding: 0 10px 0px 10px; } /* sections */ #intro { text-align: left; height: 223px; padding: 130px 0 0 0; margin: 0; background: #ddd url(top.gif) repeat-x top; voice-family: "\"}\""; voice-family:inherit; height: 97px; } #pageHeader { height: 65px; padding: 0; margin: 0; background: #fff url(mid.gif) no-repeat; } #pageHeader h1 { display: none; } #pageHeader h2 { display: none; } #quickSummary { height: 37px; width: 735px; padding-bottom: 4px; margin: 0; text-align: left; background: #eee url(bottom.gif) no-repeat top; voice-family: "\"}\""; voice-family:inherit; height: 28px; } #quickSummary p { display: none; } #quickSummary p.p2 { padding-left: 5px; color: #555; font: 9px Verdana, Arial, Sans-Serif; font-weight: bold; display: inline; } #quickSummary p.p2 a, a { color: #777; text-decoration: none; } #quickSummary p.p2 a:hover, a:hover { color: #36c; } #preamble { text-align: justify; position: absolute; margin: 0 0 0 0; width: 735px; color: #555; height: 130px; overflow: auto; padding: 0px 0px 0px 234px; background: #ddd url(road.jpg) no-repeat left top; voice-family: "\"}\""; voice-family:inherit; width: 501px; } #preamble h3 { height: 20px; padding: 0; margin: 0; background: #ddd url(1.gif) no-repeat left top; } #preamble p.p3 { padding: 0 10px 10px 10px; } #supportingText { position: absolute; margin-top: 139px; width: 510px; color: #555; voice-family: "\"}\""; voice-family:inherit; width: 510px; } #preamble h3 span, #supportingText h3 span, #explanation h3 span { display: none; } #explanation { text-align: justify; margin: 0 0 0 225px; width: 510px; color: #555; background: #ddd url(r2.jpg) no-repeat left bottom; padding-left: 234px; voice-family: "\"}\""; voice-family:inherit; width: 276px; } #explanation h3 { height: 20px; padding: 0; margin: 0; background: #ddd url(2.gif) no-repeat left top; } #explanation p.p2 { padding: 0 10px 10px 10px; } #participation, #benefits, #requirements { text-align: justify; margin: 0 0 0 225px; width: 510px; color: #555; padding: 10px; voice-family: "\"}\""; voice-family:inherit; width: 490px; } #participation h3, #benefits h3, #requirements h3 { display: block; width: 300px; height: 20px; margin-left: 45px; } #participation h3 { background: transparent url(3.gif) no-repeat; } #benefits h3 { background: transparent url(4.gif) no-repeat; } #requirements h3 { background: transparent url(5.gif) no-repeat; } #requirements, #benefits, #participation { background: #ddd url(corner.gif) no-repeat top left; margin-top: 15px; } /* sidelink items */ #linkList { width: 225px; position: absolute; background-color: #ddd; font: 10px Tahoma, sans-serif; margin-top: 139px; color: #aaa; border-right: 9px solid #eee; text-align: center; voice-family: "\"}\""; voice-family:inherit; width: 216px; } #lselect, #lfavorites, #larchives { border-bottom: 9px solid #eee; background: #ddd url(backc.gif) no-repeat bottom right; } #lresources { border-bottom: 9px solid #eee; background: #ddd url(backc.gif) no-repeat bottom right; } #lselect h3 { background: #ddd url(selectd.gif) no-repeat; padding: 0; margin: 0; height: 20px; } #lselect h3 span, #lfavorites h3 span, #larchives h3 span, #lresources h3 span { display: none; } #lfavorites h3 { background: #ddd url(selectf.gif) no-repeat; padding: 0; margin: 0; height: 20px; } #larchives h3 { background: #ddd url(selecta.gif) no-repeat; padding: 0; margin: 0; height: 20px; } #lresources h3 { background: #ddd url(selectr.gif) no-repeat; padding: 0; margin: 0; height: 20px; } #linkList ul { list-style: none; padding: 5px 0 5px 0; margin: 0; } #linkList li { line-height: 2em; display: block; } #linkList li a { margin: 0 2px 0 2px; font-weight: bold; padding: 3px; border: 1px solid #ddd; } #linkList li a:hover { background: #eee url(llist.gif); border: 1px solid #aaa; } /* Footer */ #footer { padding: 15px; } #footer a { margin: 1px; padding: 5px; } #footer a:hover { background-color: #ddd; } /* And that's the end, let's do it again! */ /* css Zen Garden submission 057 - 'This is Cereal' by Shaun Inman, http://www.shauninman.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Shaun Inman */ /* Added: November 4th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Photography © Bradley Mason http://www.sxc.hu/browse.phtml?f=profile&l=bradleym */ #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* Warning message styles for browsers that don't support CSS attribute selectors... */ #extraDiv1 { position: absolute; top: 112px; left: 292px; width: 340px; height: 166px; background: url(txt_upgrade.gif) no-repeat; z-index: 10; } #container { padding: 296px 0 0 294px; z-index: 99; } /* Clear the warning styles for those that do... */ div[id="extraDiv1"] { display: none; } div[id="container"] { padding: 226px 0 0 294px !important; } /* Spoon graphic and pull-quote */ #extraDiv2 { position: absolute; top: 1200px; left: 0px; width: 229px; height: 580px; background: url(spoon_flake.png) no-repeat; z-index: 0; } div[id="extraDiv2"] { top: 712px !important; } /* Coffee graphic */ #extraDiv3 { display: block !important; position: relative; margin-left: 496px; height: 0; z-index: 0; } #extraDiv3 span { position: absolute; bottom: -33px; width: 100%; height: 596px; background: url(coffee.jpg) no-repeat; } /* Small logo */ div[id="extraDiv4"] { display: block !important; position: relative; margin-left: 64px; width: 168px; height: 0; z-index: 3; } div[id="extraDiv4"]>span { position: absolute; bottom: -33px; width: 100%; height: 98px; background: url(logo_small.gif) no-repeat; } /* div[id="extraDiv4"] span:active { background: url(logo_small_over.gif) no-repeat; } */ /* Photo Credit */ div[id="extraDiv5"] { display: block !important; position: relative; margin-left: 4px; height: 0; z-index: 0; } div[id="extraDiv5"]>span { position: absolute; bottom: -33px; width: 100%; height: 336px; background: url(txt_credit.gif) no-repeat; } /* Quality text and SI logo */ div[id="extraDiv6"] { display: block !important; position: absolute; top: 476px; left: 103px; width: 146px; height: 77px; background: url(txt_quality.gif) no-repeat; z-index: 0; } body { margin: 0; padding: 0; background: url(bg_header.jpg) no-repeat #FFF; } #quickSummary, #preamble, #supportingText { width: 336px; z-index: 1; } p { text-align: justify; font-family: Georgia,"Times New Roman",Times,serif; font-size: 11px; line-height: 17px; margin-top: 0; color: #707070; } p acronym { font-style: italic; } acronym { border-style: none; } p a, #footer a { color: #866F5B; text-decoration: none; border-bottom: 1px dotted #866F5B; } p a:hover, #footer a:hover { color: #A51A0A; border-style: none; } div[id="footer"]>a { border-style: none !important; } #preamble { margin-bottom: 2em; } #preamble p.p2 { background: url(head_enlightenment.gif) no-repeat; padding-top: 2.4em; } div[id="preamble"]>p.p2 { background: url(head_enlightenment.png) no-repeat !important; } #explanation, #participation, #benefits, #requirements { padding-top: 1.8em; margin-bottom: 2em; } @media tty { /* Mid pass to square away some IE 5 PC hinkyness. */ i{content:"\";/*" "*/}} #explanation p.p1,#participation p.p1,#benefits p.p1,#requirements p.p1 { padding-top: 1.8em; } /*";} }/* */ #explanation { background: url(head_explanation.gif) no-repeat; } #participation { background: url(head_participation.gif) no-repeat; } #benefits { background: url(head_benefits.gif) no-repeat; } #requirements { position: relative; background: url(head_requirements.gif) no-repeat; z-index: 1; } #quickSummary { margin-bottom: 2em; } div[id="quickSummary"] { margin-bottom: 0 !important; } #quickSummary>p[class="p1"] { position: absolute; top: 230px; left: 108px; background: url(txt_demo.jpg) no-repeat; width: 143px; height: 0; padding-top: 57px; overflow: hidden; } #quickSummary>p[class="p2"] { position: absolute; top: 328px; left: 105px; background: url(txt_download.gif) 5px 5px; background-repeat: no-repeat; width: 107px; height: 29px; z-index: 15; margin: 0; color: #FFF; font-size: 1px; padding-top: 36px; } #quickSummary>p[class="p2"] a[href="zengarden-sample.html"] { position: absolute; top: 17px; left: 5px; width: 35px; height: 0px; padding-top:9px; overflow: hidden; } #quickSummary>p[class="p2"] a[href="zengarden-sample.html"]:hover { background: url(button_html_over.gif) no-repeat; } #quickSummary>p[class="p2"] a[href="zengarden-sample.css"] { position: absolute; top: 17px; left: 63px; width: 31px; height: 0px; padding-top:9px; overflow: hidden; } #quickSummary>p[class="p2"] a[href="zengarden-sample.css"]:hover { background: url(button_css_over.gif) no-repeat; } div[id="quickSummary"] a { border-style: none; } /**/ /**/ #lselect { position: absolute; top: 324px; left: 105px; } #lresources { position: absolute; top: 714px; left: 105px; } #larchives { position: absolute; top: 902px; left: 105px; } #lfavorites { position: absolute; top: 1030px; left: 105px; } /**/ div[id="lselect"] { top: 292px !important; left: 105px !important; background: url(button_select_design.gif) no-repeat; width: 149px; height: 37px; z-index: 300; } div[id="lresources"] { top: 358px !important; left: 105px !important; background: url(button_resources.gif) no-repeat; width: 149px; height: 37px; z-index: 200; } div[id="lfavorites"] { top: 443px !important; left: 105px !important; background: url(button_favorites.gif) no-repeat; width: 149px; height: 37px; z-index: 150; } /**/ #lselect h3, #lresources h3, #larchives h3, #lfavorites h3 { position: absolute; top: -28px; left: 0px; background: url(bg_menu_thin_top.gif) no-repeat; width: 149px; height: 28px; line-height: 28px; padding-top: 5px; overflow: hidden; margin: 0; padding: 0 18px; color: #333; font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px; } /**/ div[id="lselect"]>h3, div[id="lresources"]>h3, div[id="larchives"]>h3, div[id="lfavorites"]>h3 { top: -1000px !important; left: -1000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } #lselect:hover h3, #lresources:hover h3, #lfavorites:hover h3 { position: absolute; top: 5px !important; left: 5px !important; background: url(bg_menu_top.png) no-repeat; width: 203px !important; height: 0px !important; padding-top: 5px; margin: 0; } /**/ #lselect ul, #lresources ul, #larchives ul, #lfavorites ul { background: url(bg_menu_thin.gif) left bottom no-repeat; margin: 0; padding: 0 0 5px; list-style: none; voice-family: "\"}\""; voice-family:inherit; width: 149px; } /**/ div[id="lselect"]>ul, div[id="lresources"]>ul, div[id="lfavorites"]>ul { position: absolute; top: -1000px; left: -1000px; width: 203px !important; background: url(bg_menu.png) left bottom no-repeat !important; } #lselect:hover ul, #lresources:hover ul, #lfavorites:hover ul { position: absolute; top: 10px; left: 5px; } /**/ #lselect li, #lresources li, #larchives li, #lfavorites li { font-size: 9px; color: #8B8C8C; background: url(bg_menu_separator_thin.gif) no-repeat; padding: 8px 18px; } @media tty { /* Mid pass to square away some IE 5 PC hinkyness. */ i{content:"\";/*" "*/}} #lselect li,#lresources li,#larchives li,#lfavorites li { width: 149px; padding: 6px 18px; } /*";} }/* */ /**/ div[id="lselect"]>ul>li, div[id="lresources"]>ul>li, div[id="lfavorites"]>ul>li { background: url(bg_menu_separator.png) no-repeat !important; } div[id="lselect"]>ul>li:first-child, div[id="lresources"]>ul>li:first-child , div[id="lfavorites"]>ul>li:first-child { padding-top: 5px; background: url(o.gif) no-repeat !important; } #lselect li:hover, #lresources li:hover, #lfavorites li:hover { background: url(bg_menu_over.png) no-repeat !important; } div[id="larchives"] { position: absolute; top: 400px !important; left: 100px !important; background: url(well_design_archives.gif) 5px 0px no-repeat; width: 164px !important; height: 44px; z-index: 100; } div[id="larchives"]>ul, div[id="larchives"]>ul>li { margin: 0; padding: 0; list-style: none; background: url(o.gif) no-repeat !important; } #larchives a[accesskey="n"] { background: url(button_next.gif) no-repeat; position: absolute; top: 14px; left: 50px; width: 45px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 1; } #larchives a[accesskey="p"] { background: url(button_prev.gif) no-repeat; position: absolute; top: 14px; left: 7px; width: 44px; height: 0px; padding-top: 21px; overflow: hidden; z-index: 2; } #larchives a[accesskey="w"] { background: url(button_view_all.gif) no-repeat; position: absolute; top: 14px; left: 99px; width: 53px; height: 0px; padding-top: 21px; overflow: hidden; } #larchives a[accesskey="n"]:hover { background: url(button_next_over.gif) no-repeat; } #larchives a[accesskey="p"]:hover { background: url(button_prev_over.gif) no-repeat; } #larchives a[accesskey="w"]:hover { background: url(button_view_all_over.gif) no-repeat; } /**/ #lselect a, #lfavorites a { display: block; } #lselect a.c, #lfavorites a.c { display:inline; font-size: 9px; text-transform: lowercase; } #linkList { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-size: 9px; } #linkList a, #linkList a:link, #linkList a:visited { font-size: 10px; color: #444; text-decoration: none; } #linkList a:hover { color: #A51A0A; } #linkList a.c, #linkList a.c:link, #linkList a.c:visited { color: #8B8C8C;} #linkList a.c:hover { color: #A51A0A; } /**/ #footer { font-family: geneva,arial,verdana,sans-serif; font-size: 9px; } #footer a { color: #866F5B; text-decoration: none; } #footer a:hover { color: #A51A0A; } /**/ div[id="footer"] { position: relative; top: -5px; left: -5px; width: 327px; height: 48px; background: url(txt_footer.gif) 5px 5px no-repeat; z-index: 1; } /* xhtml */ #footer a[href="http://validator.w3.org/check/referer"] { position: absolute; top: 17px; left: 105px; width: 33px; height: 0px; padding-top:9px; overflow: hidden; } #footer a[href="http://validator.w3.org/check/referer"]:hover { background: url(button_xhtml_over.gif) no-repeat; } /* css */ #footer a[href="http://jigsaw.w3.org/css-validator/check/referer"] { position: absolute; top: 17px; left: 145px; width: 18px; height: 0px; padding-top:9px; overflow: hidden; } #footer a[href="http://jigsaw.w3.org/css-validator/check/referer"]:hover { background: url(button_css_footer_over.gif) no-repeat; } /* cc */ #footer a[href="http://creativecommons.org/licenses/sa/1.0/"] { position: absolute; top: 17px; left: 170px; width: 13px; height: 0px; padding-top:9px; overflow: hidden; } #footer a[href="http://creativecommons.org/licenses/sa/1.0/"]:hover { background: url(button_cc_over.gif) no-repeat; } /* 508 */ #footer a[title="Check the accessibility of this site according to U.S. Section 508"] { position: absolute; top: 17px; left: 189px; width: 15px; height: 0px; padding-top:9px; overflow: hidden; } #footer a[title="Check the accessibility of this site according to U.S. Section 508"]:hover { background: url(button_508_over.gif) no-repeat; } /* aaa */ #footer a[title="Check the accessibility of this site according to WAI Content Accessibility Guidelines 1"] { position: absolute; top: 17px; left: 228px; width: 20px; height: 0px; padding-top:9px; overflow: hidden; } #footer a[title="Check the accessibility of this site according to WAI Content Accessibility Guidelines 1"]:hover { background: url(button_aaa_over.gif) no-repeat; } /* Move this junk out of the way */ #pageHeader, #preamble h3, #supportingText h3 { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } /* css Zen Garden submission 058 - 'Radio Zen' by Marc LA van den Heuvel, http://www.mlavdh.nl/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Marc LA van den Heuvel */ /* Added: November 9th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font-family: georgia, Arial, Helvetica, sans-serif; font-size: 10px; background: url(schaal.jpg); background-color: #F8F8EE; background-repeat: no-repeat; background-position: top; background-attachment: fixed; margin: 0px; text-decoration: none; } acronym { border-bottom: none; } #intro { position: absolute; width: 1590px; font-style: italic; line-height: normal; font-variant: normal; text-transform: capitalize; z-index: 1; } #pageHeader H1 { position: absolute; top: 278px; left: 720px; color: #E8E9CF; font-size: 70px; } #pageHeader H2 { position: absolute; top: 330px; left: 1280px; color: #E8E9CF; font-size: 30px; } #quickSummary { position: absolute; right: 0px; text-align: left; width: 165px; height: 340px; top: 95px; padding-top: 40px;} #quickSummary P { margin-top: 3px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; color: #555F44; } #quickSummary a:link, #quickSummary a:visited { color: #744646; text-decoration: none; border-bottom: 1px dashed #744646; } #quickSummary a:hover, #quickSummary a:active { color: #000000; text-decoration: underline; } #preamble { position: absolute; left: 10px; text-align: right; width: 165px; top: 95px; } #preamble P { margin-top: 3px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; color: #555F44; } #preamble h3 { margin: 0px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #555F44; text-decoration: none; font-style: normal; font-weight: bold; margin-left: 8px; margin-right: 8px; } #supportingText { position: absolute; width: 1230px; padding-left: 185px; padding-top: 95px; text-align: justify; background: url(naald.gif); background-repeat: no-repeat; background-position: top; z-index: 3; } #supportingText a:link, #supportingText a:visited { color: #744646; text-decoration: none; border-bottom: 1px dashed #744646; } #supportingText a:hover, #supportingText a:active { color: #000000; text-decoration: underline; } #supportingText P { margin-top: 3px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; color: #353638; } #supportingText h3 { margin: 0px; font-family: Arial, Helvetica, sans-serif; color: #422222; text-decoration: none; font-size: 8pt; font-style: normal; font-weight: bold; margin-left: 3px; margin-right: 8px; background: url(klein.jpg); } #explanation { float: left; width: 290px; } #participation { float: left; width: 290px; } #benefits { float: left; width: 150px;} #requirements { float: left; width: 500px;} #footer { float: right; padding-right: 50px; top: 0px; } #footer a:link, #footer a:visited { color: #E8E9CF; text-decoration: none; border-bottom: 0px dashed #744646; font-size: 12px; font-style: normal; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } #footer a:hover, #footer a:active { color: #000000; text-decoration: underline; } #linkList{ position: absolute; padding-top: 480px; text-align: justify; z-index: 1;} #lselect{ position: absolute; width: 1590px; top: 46em; text-align: left; padding: 5px; font-family: Arial, Helvetica, sans-serif; background-color: #E8E9CF; } #lselect ul { margin: 0px; padding: 0px; } #lselect h3 { margin: 0px; margin-right: 10px; color: #555F44; font-size: 8pt; float: left; font-weight: bold; } #lselect li { color:#000000; list-style-type: none; float: left; border-left: 4px solid #F8F8EE; padding-left: 5px; padding-right: 5px; } #lselect a:link, #lselect a:visited { color: #744646; text-decoration: none; font-size: 8pt; font-style: normal; font-weight: bold; } #lselect a:hover, #lselect a:active { color: #000000; text-decoration: underline; } #lselect a.c, #lselect a:link.c , #lselect a:visited.c{ color: #422222; font-weight: normal; } #lselect a:hover.c, #lselect a:active.c { display: inline; } #larchives{ position: absolute; padding-top: 490px; text-align: justify; } #larchives{ position: absolute; width: 300px; top: 49em; left: 75px; text-align: left; padding: 5px; font-family: Arial, Helvetica, sans-serif; } #larchives ul { margin: 0px; padding: 0px; } #larchives h3 { margin: 0px; margin-right: 10px; color: #555F44; font-size: 9px; float: left; font-weight: normal; } #larchives li { color:#555F44; list-style-type: none; float: left; padding-left: 10px; padding-right: 10px; } #larchives a:link, #larchives a:visited { color: #555F44; text-decoration: none; font-size: 9px; font-style: normal; font-weight: normal; } #larchives a:hover, #larchives a:active { color: #000000; text-decoration: underline; } #larchives a.c, #larchives a:link.c , #larchivest a:visited.c{ color: #006633; } #larchives a:hover.c, #larchives a:active.c { display: inline; } #lresources{ position: absolute; width: 800px; left: 400px; top: 49em; text-align: left; padding: 5px; font-family: Arial, Helvetica, sans-serif; } #lresources ul { margin: 0px; padding: 0px; } #lresources h3 { margin: 0px; margin-right: 10px; color: #555F44; font-size: 9px; float: left; font-weight: normal; } #lresources li { color:#555F44; list-style-type: none; float: left; padding-left: 10px; padding-right: 10px; } #lresources a:link, #lresources a:visited { color: #555F44; text-decoration: none; font-size: 9px; font-style: normal; font-weight: normal; } #lresources a:hover, #lresources a:active { color: #000000; text-decoration: underline; } #lresources a.c, #lresources a:link.c , #lresources a:visited.c{ color: 422222; } #lresources a:hover.c, #lresources a:active.c { display: inline; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #explanation h3 { background: transparent url(sowhat.gif) no-repeat top left; margin-top: 10px; width: 250px; height: 32px; float: left; } #explanation h3 span { display:none } #participation h3 { background: transparent url(part.gif) no-repeat top left; margin-top: 10px; width: 250px; height: 32px; float: left; } #participation h3 span { display:none } #benefits h3 { background: transparent url(ben.gif) no-repeat top left; margin-top: 10px; width: 120px; height: 32px; float: left; } #benefits h3 span { display:none } #requirements h3 { background: transparent url(rec.gif) no-repeat top left; margin-top: 10px; width: 470px; height: 32px; float: left; } #requirements h3 span { display:none } #preamble h3 { background: transparent url(road.gif) no-repeat top right; margin-top: 10px; width: 140px; height: 32px; float: left; } #preamble h3 span { display:none } #pageHeader h1 { background: transparent url(zen.gif) no-repeat top right; margin-top: 10px; width: 600px; height: 180px; float: left; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(tune.jpg) no-repeat top right; margin: 0px; width: 321px; height: 194px; float: left; } #pageHeader h2 span { display:none } #extraDiv1 { position: absolute; width: 1600px; height: 400px; top: 83px; text-align: justify; background: url(bgrnd.gif); background-position: top; z-index: 0; } #extraDiv2 { position: absolute; width: 321px; height: 194px; left: 160px; top: 330px; text-align: justify; background: url(radio.jpg); background-position: top; z-index: 0; } /* css Zen Garden submission 059 - 'Dune Temple' by Greg Reimer, http://www.drpeterjones.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Greg Reimer */ /* Added: November 9th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* For overview, the method of this sheet is to superimpose textual elements on top of fancy background graphics via CSS positioning. No FIR was used in the making of this sheet. */ body{ margin:0px; padding:0px; background:#d18f00 url(decosides.gif) no-repeat 50% 0%; color:#946500; font-family:arial,helvetica,sans-serif; font-size:12px; text-align:center; /* so the container div centers itself in IE5/win */ } a:link{ color:#EFD396; text-decoration:none; } a:visited{ color:#EFD396; text-decoration:none; } a:hover{ color:#EFD396; text-decoration:underline; } a:active{ color:#EFD396; text-decoration:none; } acronym{ border:none; cursor:help; font-family:georgia,serif; } div#container{ width:732px; margin:auto; /* ignored by IE5/win */ background:url(main_top.png) no-repeat 0% 0%; position:relative; } div#pageHeader{ text-align:center; margin-bottom:156px; height:13px; } div#pageHeader h1,div#pageHeader h2{ text-transform:lowercase; margin:0px; font-family:arial,helvetica,sans-serif; /* being verbose because font shorthand caused IE5/win to botch */ font-size:10px; font-weight:normal; letter-spacing:8px; display:inline; } div#pageHeader h1:after{ content:":"; /* ignored by IE */ } div#quickSummary,div#preamble,div#explanation,div#participation,div#benefits,div#requirements,div#footer{ color:#CFA343; padding:0px 325px 0px 27px; text-align:justify; } div#container p,div#container h3{ margin:10px 0px; } div#container div#intro h3,div#container div#supportingText h3{ color:#EFD396; font:bold 12px verdana,sans-serif; } div#container div#intro h3{ padding:2px 5px 3px 5px; background:url(headerbg.png) no-repeat right top; } html>body div#container div#supportingText h3{ /* IE/win bug workaround */ padding:2px 5px 3px 5px; background:url(headerbg.png) no-repeat right top; } div#quickSummary{ margin:0px 325px 0px 27px; padding:0px 38px; text-align:center; color:#E8B74B; background:url(sides.png) no-repeat 50% 0%; min-height:82px; } div#quickSummary p{ margin: 0px 0px 10px 0px; } div#quickSummary p.p1{ font-weight:bold; } div#quickSummary p.p2{ text-transform:lowercase; margin-bottom:0px; padding-bottom:10px; } div#quickSummary p:before{ content:"::: "; font-family:verdana,sans-serif; color:#B68F3B; font-weight:bold; } div#quickSummary p:after{ content:" :::"; font-family:verdana,sans-serif; color:#B68F3B; font-weight:bold; } div#preamble{ padding:0px; margin:0px 310px 0px 27px; height:259px; overflow:auto; voice-family: "\"}\""; voice-family: inherit; margin-right:325px; } html>body div#preamble{ margin-right:325px; } div#supportingText{ background:url(main_middle.png) repeat-y; } div#footer{ padding-top:50px; padding-bottom:320px; background:#d18f00 url(main_bottom.png) no-repeat; text-align:center; } div#footer a{font:bold 12px verdana,sans-serif;} div#footer a:after,div#footer a:before{color:#b68f3b;content:":";} div#lselect{ position:absolute; left: 424px; top: 155px; width:293px; } div#lselect h3{ position:absolute; left:70px; top:12px; color:#7A5300; background:transparent; font-size:14px; height:14px; margin:0px; } div#lselect ul{ list-style:none; padding: 0px 0px 71px 0px; margin: 59px 0px 0px 0px; background:url(list_bottom.png) no-repeat 100% 100%; voice-family: "\"}\""; voice-family: inherit; padding-bottom:74px; } html>body div#lselect ul{ padding-bottom:74px; } div#lselect ul li{ text-align:right; background:url(listitem.png) no-repeat 100% 0%; color:#fc0; font:normal 9px arial,helvetica,sans-serif; display:block; height:25px; padding: 6px 5px 5px 5px; margin-top:2px; voice-family: "\"}\""; voice-family: inherit; height:14px; padding: 6px 5px 5px 5px; margin-top:5px; } html>body div#lselect ul li{ height:14px; padding: 6px 5px 5px 5px; margin-top:5px; } div#lselect ul a:link{ color:#EFD396; text-decoration:underline; } div#lselect ul a:visited{ color:#C89D40; text-decoration:underline; } div#lselect ul a:hover{ color:#EFD396; text-decoration:none; } div#lselect ul a:active{ color:#ff0; text-decoration:underline; } div#larchives{ text-align:left; position:absolute; left:438px; top:534px; width:279px; } div#lresources{ text-align:left; position:absolute; left:438px; top:658px; width:279px; } div#lfavorites{ text-align:left; position:absolute; left:438px; top:843px; width:279px; z-index:100; } div#larchives h3,div#lresources h3,div#lfavorites h3{ margin:0px; text-align:right; padding:0px 7px 17px 0px; background:url(list_top.png) no-repeat 100% 100%; color:#cfa343; font-size:14px; } div#larchives ul,div#lresources ul,div#lfavorites ul{ list-style:none; padding:0px; margin:0px; padding-bottom:8px; background:url(list_bottom2.png) no-repeat 100% 100%; } div#larchives li,div#lresources li,div#lfavorites li{ display:block; text-align:right; background:url(listitem.png) no-repeat 100% 0%; padding: 5px 9px 5px 5px; margin-bottom:2px; color:#fc0; font:bold 11px arial,helvetica,sans-serif; voice-family: "\"}\""; voice-family: inherit; margin:0px 0px 5px 0px; } html>body div#larchives li,html>body div#lresources li,html>body div#lfavorites li{ height:15px; margin-bottom:5px; margin-top:0px; } div#larchives ul a:link,div#lresources ul a:link,div#lfavorites ul a:link{ color:#EFD396; text-decoration:underline; } div#larchives ul a:visited,div#lresources ul a:visited,div#lfavorites ul a:visited{ color:#C89D40; text-decoration:underline; } div#larchives ul a:hover,div#lresources ul a:hover,div#lfavorites ul a:hover{ color:#EFD396; text-decoration:none; } div#larchives ul a:active,div#lresources ul a:active,div#lfavorites ul a:active{ color:#ff0; text-decoration:underline; } div#lfavorites ul{ padding-bottom:69px; background:url(list_bottom.png) no-repeat 100% 100%; }/* css Zen Garden submission 060 - 'Extreme Limits' by Richard Chatfield, http://www.engagecommerce.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Richard Chatfield */ /* Added: November 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { font: 11px arial, verdana, sans-serif; color: #fff; background: #000 url(contentbg.jpg) repeat-y; margin: 0px; } p { font: 11pxt/16pt arial, verdana, sans-serif ; margin-top: 0px; text-align: justify; } h3 { font: italic 16px arial, verdana, sans-serif; letter-spacing: 1px; margin: 15px 0px 0px 0px; color: #FFFF00; font-weight: bolder; } h5 { font: italic 14px sans-serif, arial, verdana; letter-spacing: 1px; margin: 15px 0px 0px 10px; color: #fff; font-weight: bolder; } a:link { font-weight: bold; text-decoration: none; color: #FFFF00; } a:visited { font-weight: bold; text-decoration: none; color: #FFFF00; } a:hover, a:active { text-decoration: underline; color: #FFFF00; } /* specific divs */ #container { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 780px; } #intro { } #pageHeader { margin-top: 0px; margin-bottom: 0px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: url(topbg.jpg) no-repeat top left; margin-top: 0px; margin-bottom: 0px; width: 780px; height: 255px; } #pageHeader h1 span { display: none; } #pageHeader h2 { background: url(zengardentitle.gif) no-repeat top left; margin-top: -74px; margin-left: 254px; width: 393px; height: 45px; } #pageHeader h2 span { display:none; } #quickSummary { clear:both; margin: -78px 0px 0px 5px; width: 160px; } #quickSummary p { width: 240px; font: 10px; text-align:center; line-height: 12px; } #preamble { background: url(road2enlinghtenbg.jpg) no-repeat; margin: 18px 5px 5px 3px; width: 249px; height: 500px; float: left; } #preamble h3 { margin: 20px 10px 0px 15px; width: 200px; } #preamble p { margin: 10px 10px 0px 15px; width: 210px; } #supportingText { margin: 25px 145px 0px 255px; text-align: left; width: 370px; } #explanation p.p1 { margin-right: 140px; text-align: left; } #explanation p.p2 { margin-right: 20px; text-align: left; } #footer { position: absolute; top: 162px; left: 275px; width: 345px; clear: both; } #footer a:link, #footer a:visited { margin: 0px 40px 0px 0px; } #linkList { background: url(road2enlinghtenbg.jpg) no-repeat; position: absolute; top: 580px; text-align: left; margin: 18px 5px 5px 5px; width: 249px; padding: 5px 0px 0px 10px; } #linkList2 { font: 10px verdana; width: 226px; } #linkList h3.select { height: 30px; } #linkList h3.select span { font: 16px arial, verdana, sans-serif; letter-spacing: 1px; font-weight: bolder; color: #CCD8F8; text-decoration: underline; } #linkList h3.favorites { height: 30px; } #linkList h3.favorites span { font-style: normal; text-decoration : underline; color: #CCD8F8; } #linkList h3.archives { height: 30px; } #linkList h3.archives span { font-style: normal; text-decoration : underline; color: #CCD8F8; } #linkList h3.resources { height: 30px; } #linkList h3.resources span { font-style: normal; text-decoration : underline; color: #CCD8F8; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; background: transparent url(cr1.gif) no-repeat top center; display: block; margin-bottom: 2px; } #linkList li a:link { color: #10184A; } #linkList li a:hover { color: #FFFF00; } #linkList li a:visited { color: #10184A; } #extraDiv1 { position: absolute; top: 10px; left: 490px; background: url(guyflying.gif) no-repeat; width: 285px; height: 483px; } #extraDiv2 { position: absolute; top: 1000px; left: 0px; background: url(flyerdude.jpg) no-repeat; width: 255px; height: 339px; } /* css Zen Garden submission 061 - 'Sky' by Stefan Petre, http://www.eyecon.ro/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Stefan Petre */ /* Added: November 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font: 10px Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; text-align: center; background-position : center; background-image : url(page_fill.jpg) ; background-repeat : repeat-y; } a:link { color: #00f; } a:visited { color: #99f; } a:hover, a:active { text-decoration: none; } acronym { border-bottom: 1px dotted #eee; cursor : help; } #container { width: 700px; margin: 0px auto; text-align : left; background-image : url(right_fill.jpg); background-repeat : repeat-y; clear : both; background-color : #ff; } #intro { width: 700px; height: 246px; overflow: hidden; background-image : url(header_intro.jpg); background-position : bottom; background-repeat : no-repeat; text-align : right; color : #fff; clear : both; } #pageHeader { width: 700px; height : 36px; overflow : hidden; background-image : url(header_title.jpg); } #pageHeader h1 { display : none; } #pageHeader h2 { display : none; } #quickSummary { float: right; width: 400px; margin : 0px 3px; height: 40px; overflow: auto; } #quickSummary p { margin: 0px; } #quickSummary a{ color: #eee; } #preamble { float: left; width: 400px; margin : 0px 3px; text-align : left; height: 142px; overflow: auto; } #preamble p { margin: 0px; } #preamble h3{ margin: 8px 0px; font-size: 18px; } #supportingText { width : 440px; text-align : left; float : right; } #linkList { background-image : url(right_fill.jpg); width : 250px; text-align : left; background-position : left; min-height : 1140px; padding-bottom: 20px; } #linkList2 { background-image : url(right_start.jpg); background-position : top; background-repeat : no-repeat; padding-top: 20px; } #lselect h3{ background-image : url(label_select.jpg); background-repeat : no-repeat; margin : 4px 0px 4px 20px; height : 16px; } #lfavorites h3{ background-image : url(label_favorites.jpg); background-repeat : no-repeat; margin : 4px 0px 4px 20px; height : 16px; } #larchives h3{ background-image : url(label_archives.jpg); background-repeat : no-repeat; margin : 4px 0px 4px 20px; height : 16px; } #lresources h3{ background-image : url(label_resources.jpg); background-repeat : no-repeat; margin : 4px 0px 4px 20px; height : 16px; } #linkList2 h3 span{ display : none; } #linkList2 ul{ list-style-type : none; margin-bottom: 30px; } #linkList2 li{ margin: 4px; } #lselect a{ display : block; color: #ffd; font-size: 13px; } #linkList2 a{ color: #ffd; font-size: 13px; } #linkList2 a.c{ display : inline; font-size: 11px; color: #ddd; } #explanation h3{ background-image : url(label_about.jpg); } #participation h3{ background-image : url(label_participation.jpg); } #benefits h3{ background-image : url(label_benefits.jpg); } #requirements h3{ background-image : url(label_requirements.jpg); } #supportingText h3 span{ display : none; } #supportingText h3 { margin: 0px; background-repeat : no-repeat; height : 37px; width : 237px; background-position : left; } #supportingText p{ margin: 10px 6px 6px 70px; text-align : justify; } #extraDiv1{ clear: both; } #explanation, #participation , #benefits, #requirements { margin-bottom: 20px; padding-bottom: 20px; background-image : url(paragraf_back.jpg); background-position: bottom; background-repeat: no-repeat; } #footer { text-align: center; } #footer a:link, #footer a:visited { margin-right: 20px; }/* css Zen Garden submission 062 - 'Gemination' by Egor Kloos, http://www.dutchcelt.nl/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Egor Kloos */ /* Added: November 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* Internet Explorer */ /* basic elements */ body { margin: 0 0 0 0; text-align: center; background: #600 none; } p { font: normal 11px/12px arial, sans-serif; } ul, li { font: bold 11px/19px arial, sans-serif; list-style-type: none; } h3 { margin: 0; padding: 0; font: bold 10px/10px arial, sans-serif;} a:link { color: #f90; } a:visited { color: #f90; } a:hover, a:active { color: #fff; } /* specific divs */ #container { position: relative; margin: 0 auto 0 auto; border-right: 3px solid #fff; border-left: 3px solid #fff; padding: 0 20px 0 20px; width: 706px; background: url(contentback.gif); voice-family: "\"}\""; voice-family:inherit; width: 666px; } html>body #container { width:666px; } #intro { margin: 0; padding: 0; width: 660px; height: 80px; background: transparent url(introkop.gif) no-repeat right top; } #pageHeader h1 { margin: 0; padding: 0; width: 660px; height: 80px; background: transparent url(ietitle.gif) no-repeat left top; } #pageHeader h1 span { display:none; } #pageHeader h2 span { display:none; } #quickSummary { position: absolute; top: 80px; left: 380px; margin: 0 0 20px 0; padding: 275px 0 0 0; width: 300px; background: transparent url(boxmodel.jpg) no-repeat top left; } #quickSummary p { margin: 0; padding: 0 0 10px 0; color: #D9BC91; font: bold 12px/15px arial; text-align: left; background: transparent; } #preamble { position: absolute; top: 80px; left: 20px; display: block; margin: 0; padding: 0 0 0 0; width: 333px; height: 258px; background: #513125 url(iebulb.jpg) no-repeat top left; } #preamble p { margin: 0; padding: 0 20px 8px 20px; color: #fff; font: normal 11px/15px Georgia, serif; } #preamble h3 { margin: 0; border-top: 5px solid #3D2117; padding: 0; width: 333px; height: 40px; background: transparent url(ietheroad.gif) no-repeat top center; } #preamble h3 span { display:none; } #supportingText { float: left; margin: 245px 0 0 0; border-top: 5px solid #3D2117; padding: 0 0 30px 0; width: 333px; text-align: left; background: #fff; } /* commented backslash hack v2 \*/ #supportingText { float: left; margin: 260px 0 0 0; border-top: 5px solid #3D2117; padding: 0 0 30px 0; width: 333px; text-align: left; background: #fff; } /* end hack */ #supportingText p { clear: right; padding: 0 20px 0 20px; font: normal 12px/15px arial, sans-serif; } #supportingText a:link, #supportingText a:visited { color: #900; } #supportingText a:hover, #supportingText a:active { color: #30c; } #explanation h3 { margin: 0 0 0 20px; padding: 0; width: 280px; height: 40px; background: transparent url(iezentext1.gif) no-repeat bottom left; } #explanation h3 span { display: none; } #explanation p.p1 { font: bold 12px/15px arial, sans-serif; } #participation h3 { margin: 0 0 0 20px; width: 290px; height: 25px; background: transparent url(iezentext2.gif) no-repeat left top; } #participation h3 span { display: none; } #benefits h3 { margin: 0 0 0 20px; width: 290px; height: 25px; background: transparent url(iezentext3.gif) no-repeat left top; } #benefits h3 span { display: none; } #requirements h3 { margin: 0 0 0 20px; width: 290px; height: 25px; background: transparent url(iezentext4.gif) no-repeat left top; } #requirements h3 span { display: none; } #footer { border-top: 1px dotted #444; padding: 15px 0 30px 0; text-align: center; } #footer a:link, #footer a:visited { font: bold 12px/15px Georgia, serif; color: #600; background: transparent; } #linkList { clear: both; } #linkList2 { position: absolute; top: 450px; left: 380px; width: 300px; text-align: left; } #lselect h3.select { padding: 0 0 0 0; width: 280px; height: 40px; background: transparent url(ienavtext1.gif) no-repeat left top; } #lselect h3 span { display: none; } #larchives h3.archives { padding: 0 0 0 0; width: 280px; height: 40px; background: transparent url(ienavtext2.gif) no-repeat left top; } #larchives h3 span { display: none; } #lresources h3.resources { padding: 0 0 0 0; width: 280px; height: 40px; background: transparent url(ienavtext3.gif) no-repeat left top; } #lresources h3 span { display: none; } #lselect ul { margin: 0; padding: 0 0 60px 0; } #larchives { margin: 0; padding: 180px 0 0 0; width: 300px; vertical-align: bottom; background: transparent url(ieboxes.gif) no-repeat right top; } #larchives ul { margin: 0; padding: 0 0 30px 0; } #lresources ul { margin: 0; padding: 0;} #lselect li a { display: inline; } #linkList li a:link { color: #f90; } #linkList li a:visited { color: #f90; } #lselect li a.c { display: inline; } #lselect li a.c:link { color: #fff; } #lselect li a.c:visited { color: #fff; } #linkList li a:hover, #linkList li a:active { color: #6CF; } #lselect li a.c:hover, #linkList li a.c:active { color: #6CF; } #extraDiv1 { } /* Mozilla - Safari - Opera */ /* basic elements */ /* Background pattern design by Travis Beckham. www.squidfingers.com */ body[id=css-zen-garden] { margin: 100px 0 0 0; padding: 0; text-align: center; background: transparent url(squidback.gif); } body[id=css-zen-garden] p { font: normal 11px/12px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] ul, body[id=css-zen-garden] li { font: bold 9px/10px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; list-style-type: none; color: #fff; background: transparent; } body[id=css-zen-garden] h3 { margin: 0; padding: 0; font: bold 13px/15px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] a:link { color: #f90; } body[id=css-zen-garden] a:visited { color: #f90; } body[id=css-zen-garden] a:hover, body[id=css-zen-garden] a:active { color: #fff; } /* specific divs */ body[id=css-zen-garden] #container { position: relative; margin: 0 0 0 0; border-top: 5px solid #fff; border-right: 0; border-bottom: 5px solid #fff; border-left: 0; padding: 0 0 0 0; width: 100%; height: 350px; background: url(longgarden.gif) repeat-x center right; } body[id=css-zen-garden] #intro { position: absolute; top: 0; left: 0; float: none; margin: 0; width: 100%; height: 350px; background: none; } body[id=css-zen-garden] #pageHeader { position: absolute; top: -103px; left: 0; margin: 0;} body[id=css-zen-garden] #pageHeader h1 { background: transparent url(zentitle.png) no-repeat top left; margin-top: 20px; width: 470px; height: 90px; float: left; } body[id=css-zen-garden] #pageHeader h1 span { display: none; } body[id=css-zen-garden] #pageHeader h2 span { display: none; } body[id=css-zen-garden] #quickSummary { position: absolute; top: 370px; left: 0; padding: 0; width: 100%; height: 100px; background: transparent url(starlogo.png) no-repeat bottom center; } body[id=css-zen-garden] #quickSummary p { margin: 0; padding: 0 0 0 20px; color: #D9BC91; font: normal 11px/14px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; text-align: left; background: transparent; } body[id=css-zen-garden] #preamble { position: absolute; top: 30px; left: 20px; display: block; margin: 0; border: 1px dotted #fff; padding: 0;width: 196px; height: 290px; background: transparent url(blk35.png) repeat; overflow: hidden; } body[id=css-zen-garden] #preamble p { margin: 0; padding: 0px 10px 5px 10px; color: #fff; font: normal 10px/13px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] #preamble h3 { border: 0; width: 196px; height: 40px; background: transparent url(theroad.png) no-repeat top left; } body[id=css-zen-garden] #preamble h3 span { display: none; } body[id=css-zen-garden] #supportingText { position: absolute; top: 0; left: 465px; margin: 0; border: 0; padding: 0 20px 30px 20px; width: 325px; height: 320px; text-align: left; background: transparent url(maintext.png) repeat-y left top; overflow: auto; } body[id=css-zen-garden] #supportingText p { padding: 0; font: normal 12px/15px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] #supportingText a:link, body[id=css-zen-garden] #supportingText a:visited { color: #900; } body[id=css-zen-garden] #supportingText a:hover, body[id=css-zen-garden] #supportingText a:active { color: #30c; } body[id=css-zen-garden] #explanation h3 { float: left; margin: 0; padding: 0 0 5px 0; width: 300px; height: 25px; background: transparent url(zentext1.png) no-repeat left top; } body[id=css-zen-garden] #explanation h3 span { display: none; } body[id=css-zen-garden] #explanation p.p1 { font: bold 12px/15px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] #participation h3 { float: left; margin: 0; width: 300px; height: 25px; background: transparent url(zentext2.png) no-repeat top left; } body[id=css-zen-garden] #participation h3 span { display: none; } body[id=css-zen-garden] #benefits h3 { float: left; margin: 0; width: 300px; height: 25px; background: transparent url(zentext3.png) no-repeat top left; } body[id=css-zen-garden] #benefits h3 span { display: none; } body[id=css-zen-garden] #requirements h3 { float: left; margin: 0; width: 300px; height: 25px; background: transparent url(zentext4.png) no-repeat top left; } body[id=css-zen-garden] #requirements h3 span { display:none; } body[id=css-zen-garden] #footer { border-top: 1px dotted #444; padding: 15px 0 30px 0; text-align: center; } body[id=css-zen-garden] #footer a:link, body[id=css-zen-garden] #footer a:visited { margin-right: 20px; } body[id=css-zen-garden] #linkList { position: absolute; top: 0; left: 830px; width: 150px; height: 350px; text-align: left; overflow: hidden; } body[id=css-zen-garden] #linkList2 { position: absolute; top: 0; left: 0px; width: 150px; height: 350px; } body[id=css-zen-garden] #lselect { position: absolute; top: 0; left: 0; width: 150px; height: 126px; z-index: 300; } body[id=css-zen-garden] #lselect ul { position: absolute; top: 0; left: 0px; margin: 0; padding: 10px 0 12px 0; width: 135px; height: 328px; background: transparent url(grass.jpg) left top; } body[id=css-zen-garden] #lselect li { margin: 0; padding: 0 10px 10px 10px; } body[id=css-zen-garden] #larchives { position: absolute; top: 131px; left: 0; padding: 0; width: 150px; height: 72px; background: none; z-index: 200; } body[id=css-zen-garden] #larchives ul { position: absolute; top: -131px; left: 0px; margin: 0; padding: 10px 0 12px 0; width: 135px; height: 328px; background: transparent url(grass.jpg) left top; } body[id=css-zen-garden] #larchives li { margin: 0; padding: 0 10px 8px 10px; } body[id=css-zen-garden] #lresources { position: absolute; top: 208px; left: 0; height: 92px; z-index: 100; } body[id=css-zen-garden] #lresources ul { position: absolute; top: -208px; left: 0px; margin: 0; padding: 10px 0 12px 0; width: 135px; height: 328px; background: transparent url(grass.jpg) left top; } body[id=css-zen-garden] #lresources li { margin: 0; padding: 0 10px 8px 10px; } body[id=css-zen-garden] #lselect h3.select { padding: 0 0 0 0; width: 150px; height: 126px; background: transparent url(zentab1.png) no-repeat 135px 0px; } body[id=css-zen-garden] #lselect h3 span { display: none; } body[id=css-zen-garden] #larchives h3.archives { padding: 0 0 0 0; width: 150px; height: 72px; background: transparent url(zentab2.png) no-repeat 135px 0px; } body[id=css-zen-garden] #larchives h3 span { display: none; } body[id=css-zen-garden] #lresources h3.resources { padding: 0 0 0 0; width: 150px; height: 92px; background: transparent url(zentab3.png) no-repeat 135px 0px; } body[id=css-zen-garden] #lresources h3 span { display: none; } body[id=css-zen-garden] #lselect:hover, body[id=css-zen-garden] #lselect h3:hover { background: transparent url(zentab1.png) no-repeat 135px -126px; z-index: 300; } body[id=css-zen-garden] #larchives:hover, body[id=css-zen-garden] #larchives h3:hover { background: transparent url(zentab2.png) no-repeat 135px -72px; z-index: 300; } body[id=css-zen-garden] #lresources:hover, body[id=css-zen-garden] #lresources h3:hover { background: transparent url(zentab3.png) no-repeat 135px -92px; z-index: 300; } body[id=css-zen-garden] #linkList2 li>a { font: bold 11px/13px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif;} body[id=css-zen-garden] #lselect li>a { display:block; padding: 0 0 2px 0; font: bold 11px/13px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif;} body[id=css-zen-garden] #lselect li>a.c { display:inline; font: bold 9px/10px "Lucida Grande","Lucida Sans Unicode", helvetica, arial, sans-serif; } body[id=css-zen-garden] #lselect li>a.c:link { color: #fff; } body[id=css-zen-garden] #lselect li>a.c:visited { color: #fff; } body[id=css-zen-garden] #lselect li>a.c:hover, body[id=css-zen-garden] #lselect li>a.c:active { color: #6CF; } body[id=css-zen-garden] #linkList li a:link { color: #f90; } body[id=css-zen-garden] #linkList li a:visited { color: #f90; } body[id=css-zen-garden] #linkList li a:hover, body[id=css-zen-garden] #linkList li a:active { color: #6CF; } body[id=css-zen-garden] #extraDiv1 { position: absolute; top: 105px; left: 200px; width: 250px; height: 350px; background: url(intro.png) no-repeat left top; }/* css Zen Garden submission 063 - 'Elastic Lawn' by Patrick Griffiths, http://htmldog.com/ptg/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Patrick Griffiths */ /* Added: December 5th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { font-family: arial, Helvetica, sans-serif; font-size: 77%; /* initially set to percentage so that ems work without producing miniscule text in IE */ text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */ color: #dfd; background: #1b890e url(grass.jpg); /* defines the colour as well as the background image so that an average colour is shown while the image loads */ padding: 0 0 6em 0; margin: 0; } #container { width: 48em; text-align: left; /* resets the text alignment */ margin: 0 auto; /* centers the container */ } p { padding: 0; margin: 0; } p span { display: block; padding: 0 4em 1em 4em; } a { color: #fe6; background: url(underline1light.gif) bottom repeat-x; text-decoration: none; } a:hover { background-image: url(underline2light.gif); } acronym { border: 0; } /*------------Hidden elements------------*/ h1 span, h2, #intro h3 span, #supportingText h3 span, #linkList h3.xselect { /* The equivalent of 'display: none' but leaves the elements readable by some screen readers */ position: absolute; overflow: hidden; clip: rect(0,0,0,0);/* because 'height: 0' doesn't have any fun in IE5.5 */ height: 0;/* because clip doesn't have any fun in IE6 */ } /*------------Main heading and Quick Summary------------*/ #intro #pageHeader { padding: 0; } h1 { position: relative; top: 19px; left: -24px; height: 8em; font-size: 1em; background: url(logo.gif) bottom left no-repeat; padding: 0; margin: 0; } #quickSummary { height: 8.1em; /* ensures that the linkList top fits directly below */ background: #fc3 url(yellowdiagonal.gif); } #quickSummary p span { color: #030; margin: 0; } #quickSummary .p1 span { font-weight: bold; background: url(curve.gif) top right no-repeat; padding: 2.2em 15em 1em 3em; } #quickSummary .p2 span { position: absolute; top: 10.3em; left: 50%; width: 22em; text-align: center; padding: 0 0 0 11em; voice-family: "\"}\""; voice-family: inherit; width: 11em; } html>#quickSummary .p2 { width: 11em; } #quickSummary a { color: #070; background-image: url(underline1dark.gif); } #quickSummary a:hover { background-image: url(underline2dark.gif); } /*------------Preamble, Supprting Text and Footer------------*/ #preamble, #supportingText { width: 32em; background: #0d4407 url(grassdark.jpg); margin-left: 16em; voice-family: "\"}\""; voice-family:inherit; margin: 0 0 0 auto; } html>#preamble, html>#supportingText { margin: 0 0 0 auto; } #benefits p { /* because otherwise IE 6 goes crazy */ voice-family: "\"}\""; voice-family:inherit; position: relative; top: -1.5em; margin: 1.5em 0 -1.5em 0; } #benefits>p { top: 0; margin: 0; } #preamble , #supportingText div { padding: 0 0 2.5em 0; } #explanation, #benefits { color: #030; background: #fc3 url(yellowdiagonal.gif); margin: 0 2em; } #preamble .p1, #participation .p1, #requirements .p1 { position: relative; top: -15px; background: url(corner_yelongreen_br.gif) top right no-repeat; margin: 0 2em -15px 2em; } #preamble .p1 { margin: 0 0 -15px 0; } #participation .p1 span, #requirements .p1 span { display: block; background: url(corner_yelongreen_bl.gif) top left no-repeat; padding-top: 4em; padding-right: 2em; padding-left: 2em; } #preamble .p1 span { display: block; padding-top: 4em; } #explanation .p1, #benefits .p1 { background: url(corner_yelongreen_tl.gif) top left no-repeat; } #explanation .p1 span, #benefits .p1 span { display: block; background: url(corner_yelongreen_tr.gif) top right no-repeat; padding-top: 3em; } #intro h3, #supportingText h3 { position: relative; top: -13px; height: 13px; background: url(enlightenment.gif) bottom center no-repeat; padding: 0; margin: 0 0 -13px 0; } #explanation h3 { background-image: url(about.gif); } #participation h3 { background-image: url(participation.gif); } #benefits h3 { background-image: url(benefits.gif); } #requirements h3 { background-image: url(requirements.gif); } #footer { text-align: center; background: url(corner_grassdarkongrass_bl.gif) bottom left no-repeat; padding: 4em 0; } #extraDiv1 { position: relative; top: -15px; width: 48em; height: 15px; background: url(corner_grassdarkongrass_br.gif) bottom right no-repeat; margin: 0 auto; } /*------------Link List------------*/ #linkList { position: absolute; top: 16.1em; width: 16em; margin: 0; } #linkList2 { background: #5b460b url(grassbrown.jpg); padding: 0; } #linkList h3 { font-family: "Trebuchet MS", arial, Helvetica, sans-serif; font-size: 1.2em; text-transform: uppercase; text-align: center; color: #fc3; margin: 0; } #linkList h3.select { position: relative; top: -15px; width: 13.3333em; background: url(corner_yelonbrown_bl.gif) top left no-repeat; padding: 0; margin-bottom: -15px; } h3.select span { display: block; position: relative; left: 15px; background: url(twirl.gif) top right no-repeat; padding-right: 15px; padding-top: 2.5em; margin-left: -15px; } #linkList a { color: #efe; background-image: url(underline1yellow.gif); } #linkList a:hover { background-image: url(underline2yellow.gif); } ul { list-style: none; padding: 1em 1.5em; margin: 0; } li { padding-left: 1.5em; margin-bottom: 1em; } li/* */ { background: url(bullet.gif) left no-repeat; } #lselect ul a { display: block; font-family: "Trebuchet MS", arial, Helvetica, sans-serif; font-weight: bold; } #lselect ul a.c { display: inline; font-family: arial, Helvetica, sans-serif; font-weight: normal; } #lresources { position: relative; top: 15px; background: url(curvebl2.gif) bottom right no-repeat; padding-bottom: 15px; margin-top: -15px; } #lresources ul { background: url(curvebl.gif) bottom left no-repeat; }/* css Zen Garden submission 064 - 'Night Drive' by Dave Shea, http://www.mezzoblue.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Dave Shea */ /* Added: December 6th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ html { margin: 0; padding: 0; } body { color: #A05B00; background: #000 url(bg1.gif) repeat; text-align: center; font: 11px/18px helvetica, arial, sans-serif; text-transform: lowercase; margin: 0; padding: 0; } a:link { color: #FFC000; text-decoration: none; } a:visited { color: #D79900; text-decoration: underline; } a:hover { color: #FF0; text-decoration: underline; } p { padding: 0 0 0.3em 14px; } h3 { font-size: 12px; color: #CA7400; margin-bottom: 0; padding-left: 14px; background: transparent url(w1.gif) 0 2px no-repeat; } h3 + p { margin-top: 0; } acronym { font-style: normal; border-bottom: none; } /* structure */ #container { background-color: #000; width: 770px; text-align: left; margin-left: auto; margin-right: auto; border-left: double 3px #332511; border-right: double 3px #332511; } /* header */ h1 span, h2 span { display: none; } h1 { width: 770px; height: 166px; margin: 0; background: #000 url(bg2.gif) top left no-repeat; } h2 { width: 244px; height: 42px; background: #000 url(h1.gif) top left no-repeat; position: absolute; top: 120px; margin: 0; margin-left: 495px; } /* content */ #quickSummary, #preamble, #supportingText { margin: 0 0 0 400px; padding: 1px 0; /*1px 10px 1px 10px;*/ background: transparent url(bg4.gif) top left repeat-y; width: 342px; } #quickSummary h3, #preamble h3, #supportingText h3 { margin: 0 10px; } #quickSummary p, #preamble p, #supportingText p { margin: 0 0 10px 10px; } #quickSummary { border-top: solid 1px #332511; padding-top: 10px; } /* sidebar */ #linkList { position: absolute; top: 166px; width: 400px; height: 633px; color: #132F5B; /*#742500;*/ background: transparent url(bg3.gif) top left repeat-x; border-top: solid 1px #332511; line-height: 12px; padding-top: 20px; } #linkList ul { margin: 0; padding: 0; } #linkList li { list-style-type: none; padding: 0; margin-bottom: 0.5em; } #lselect li { padding: 3px 3px 3px 16px; background: transparent url(w2.gif) 3px 3px no-repeat; } #lselect li a:link, #lselect li a:visited { display: block; } #linkList h3 { padding-left: 0; background-image: none; } #linkList h3 span { display: none; } #linkList a, #linkList a:link { color: #AF4F0A; font-weight: bold; } #linkList li a.c:link, #linkList li a.c:visited { color: #742500; font-weight: normal; display: inline; text-decoration: none; } #linkList a.c:hover { text-decoration: underline; } #linkList h3.select { width: 160px; height: 12px; background: transparent url(h-select.gif) top left no-repeat; margin-bottom: 0.5em; } #linkList h3.archives { width: 180px; height: 12px; background: transparent url(h-archives.gif) top left no-repeat; margin-bottom: 0.5em; } #linkList h3.resources { width: 180px; height: 12px; background: transparent url(h-resources.gif) top left no-repeat; margin-bottom: 0.5em; } #lselect { width: 160px; float: left; padding-left: 50px; } /* CSS MOSe hovers */ * > #lselect li { margin-top: -7px; padding: 5px 5px 5px 18px; background-position: 5px 5px; margin-right: 10px; border: solid 1px transparent; } #lselect li:hover { background: #2A1812; border-color: #452310; } #lselect li:hover a { color: #FF9D14; } #lselect li:hover a.c { color: #E84900; } #larchives { padding-top: 1px; } #larchives, #lresources { padding-left: 200px; } #footer { text-align: right; padding: 5px 10px 100px 15px; background: url(skyline.jpg) bottom left repeat-x; position: relative; left: 3px; width: 342px; margin: 0; } /* extra bits */ #extraDiv1 { position: absolute; top: 41px; left: 0; text-align: center; width: 100%; } #extraDiv1 span { width: 400px; height: 123px; background: transparent url(granville.jpg) top left no-repeat; display: block; margin-left: auto; margin-right: auto; padding-right: 370px; width: 770px; voice-family: "\"}\""; voice-family:inherit; width: 400px; } html>body #extraDiv1 span { width: 400px; } #extraDiv2 { position: absolute; top: 41px; left: 0; text-align: center; width: 100%; } #extraDiv2 span { height: 70px; background: transparent url(falsecreek.jpg) top right no-repeat; display: block; margin-left: auto; margin-right: auto; padding-left: 402px; width: 769px; voice-family: "\"}\""; voice-family:inherit; width: 367px; } html>body #extraDiv2 span { width: 367px; } #extraDiv3 { position: absolute; top: 0; left: 0; width: 100%; text-align: center; } #extraDiv3 span { text-align: left; width: 770px; height: 38px; background: transparent url(bg5.gif) top left repeat-x; display: block; margin-left: auto; margin-right: auto; } #extraDiv4 { position: absolute; top: 0; left: 0; width: 100%; text-align: center; } /* IE doesn't support PNG transparency. No soup for you. */ html>body #extraDiv4 span { width: 790px; height: 94px; background: transparent url(seal.png) top right no-repeat; display: block; margin-left: auto; margin-right: auto; }/* css Zen Garden submission 065 - 'New Groove' by Martin Neumann, http://www.rushmedia.de/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Martin Neumann */ /* Added: December 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* ----- General styles ----- */ body { margin:0 0 10px 0; padding:0; background:#EFF4F4 url("stripes_bg.jpg") repeat-y 750px 0px; color:#000000; font-size:76%; line-height:1.3em; text-decoration:none; font-family:"Trebuchet MS",Verdana,Sans-Serif; text-align:justify; } acronym { border:none; } h1, h2, h3 { margin:0; } a, a:visited, a:active, a:visited { font-weight:bold; text-decoration:none; color:#4A3D7C; } a:hover { color:#D84E7B; } /* ----- Structural elements ----- */ #pageHeader { position:relative; margin:0; padding:0; width:100%; height:260px; background:url("arrow.gif") repeat-x 25px 217px; } #pageHeader h1 { height:260px; background:url("csszengarden_logo.gif") no-repeat left bottom; z-index:15; } #pageHeader h1 span, h2 span { display:none; } #quickSummary { position:absolute; top:165px; left:380px; width:300px; font-family:Arial,Sans-Serif; font-size:1.1em; z-index:10; } #quickSummary .p1 { display:none; } #quickSummary p { margin:0; } #preamble { position:relative; float:left; padding-bottom:10px; top:70px; left:15px; width:250px; background:#E4EDDE url("bottom_preamble.gif") no-repeat left bottom; } #preamble p { margin:0; padding:5px 20px; } #preamble h3 { height:70px; background:url("header_preamble.gif") no-repeat left top; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display:none; } #supportingText { position:relative; top:20px; text-align:left; margin:0 0 30px 290px; padding-bottom:5px; width:430px; background:#D5D8E7 url("bottom_supportingText.gif") no-repeat left bottom; z-index:1; } #supportingText p { margin:0; padding:5px 10px; } #supportingText a { font-style:italic; } #explanation h3 { height:80px; background:url("header_supportingText.gif") no-repeat left top; } #explanation p { margin-top:-5px; } #participation h3 { height:19px; margin:15px 0 10px 0; background:url("header_participation.gif") no-repeat 30px 0px; } #benefits h3 { height:16px; margin:15px 0 10px 0; background:url("header_benefits.gif") no-repeat 30px 0px; } #requirements h3 { height:19px; margin:15px 0 10px 0; background:url("header_requirements.gif") no-repeat 30px 0px; } #footer { text-align:center; margin:10px; background:url("grad_line.gif") no-repeat bottom center; } #footer a { font-style:normal; } /* ----- Linklists ----- */ #linkList { position:absolute; top:60em; left:15px; width:250px; padding-bottom:20px; background:#E4EDDE url("bottom_preamble.gif") no-repeat left bottom; } #linkList ul { margin:0; padding:0; list-style:none; } #lselect li, #lfavorites li { padding:0; margin:0 10px; text-align:right; background:url("lselect_seperator.gif") no-repeat bottom center; } #lselect a, #lfavorites a { margin-top:2px; padding:1px 0 0 27px; font-style:normal; font-size:1.1em; font-weight:bold; display:block; text-align:left; height:17px; margin-top:1px; } #lselect a:hover, #lfavorites a:hover { background:#D8EDCA url("lselect_hover.gif") no-repeat left top; } #lselect a.c, #lfavorites a.c { padding:0; margin-right:15px; color:#6150A4; font-style:italic; font-size:1em; font-weight:normal; display:inline; } #lselect a.c:hover, #lfavorites a.c:hover { color:#D84E7B; background:none; } #lselect h3 { height:50px; margin-bottom:10px; background:url("header_select.gif") no-repeat left top; } #lfavorites h3 { height:15px; margin:20px 0 15px 0; background:url("header_favorites.gif") no-repeat 40px 0; } #lselect h3 span, #lfavorites h3 span { display:none; } #larchives h3 { height:15px; margin:30px 0 10px 0; background:url("header_archives.gif") no-repeat 50px 0; } #lresources h3 { height:15px; margin:30px 0 10px 0; background:url("header_resources.gif") no-repeat 30px 0; } #larchives li, #lresources li { text-align:center; } #larchives h3 span, #lresources h3 span { display:none; } #larchives a, #lresources a { font-size:1.1em; line-height:1.5em; } /* ----- Extra images ----- */ #extraDiv1 { position:absolute; top:220px; left:320px; width:446px; height:23px; background:url("new_groove.gif") no-repeat left top; z-index:10; } #extraDiv2 { position:relative; display:block; height:0px; } #extraDiv2 span{ position:absolute; bottom:20px; right:10%; width:253px; height:404px; background:url("listening.gif") no-repeat; z-index:0; } #extraDiv3 { position:absolute; top:0px; left:0px; width:716px; height:193px; background:url("lounge_bg.jpg") no-repeat left top; z-index:0; } #extraDiv4 { position:relative; display:block; height:0px; } #extraDiv4 span { position:absolute; bottom:200px; right:0px; width:54px; height:552px; background:url("garden_lounge_vert.gif") no-repeat left top; z-index:0; }/* css Zen Garden submission 066 - 'Focus & Shoot' by Colectivo YTW (Julio Beamonte, Beatriz Martinez, Gustavo Gavan, Franck Scipion), http://www.yatienesweb.info/corporativo/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, YTW */ /* Main Photo - Copyright 2003, Cristobal Lucas Gomez, cristoballucas@hotmail.com, all rights reserved*/ /* Added: December 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* General*/ body { background-image:url(bg.jpg); background-color:#fff; font-family:arial, sans serif; font-size:11px; line-height:15px; color:#fff; margin:0px; } /* Positioning*/ #container { margin-left:0px; margin-top:0px; padding:0px; width:950px; z-index:1; } #intro { width:275px; position:absolute; left:45px; top:15px; z-index:2; } #supportingText { width:5px; position:absolute; left:45px; top:15px; z-index:2; } #participation { width:325px; position:absolute; left:575px; top:820px; z-index:2; } #benefits { width:435px; position:absolute; left:0px; top:820px; z-index:2; } #footer{ width:250px; position:absolute; left:600px; top:360px; z-index:2; } #requirements { width:900px; position:absolute; left:0px; top:1250px; z-index:2; } #linkList2 { width:275px; position:absolute; left:345px; top:87px; z-index:2; } #explanation { width:305px; position:absolute; left:600px; top:0px; z-index:2; } /* Cosmetics */ #extraDiv1 { background-image:url(background.jpg); background-repeat:no-repeat; position:absolute; left:2px; top:2px; width:1000px; height:1515px; z-index:1; } #explanation, #participation, #requirements, #benefits, #footer, #quickSummary, #preamble, #lselect, #lfavorites, #lresources, #larchives { padding:7px; margin:5px; border-left:1px solid #aaa; border-top:1px solid #aaa; border-right:1px solid #333; border-bottom:1px solid #333; } #requirements { background-image:url(End_Section.gif); background-repeat:no-repeat; background-position:bottom center; } #explanation, #participation, #benefits, #quickSummary, #preamble, #lselect, #lfavorites, #lresources, #larchives { background-image:url(End_Section2.gif); background-repeat:no-repeat; background-position:bottom center; } #pageHeader { display:none; } h3 { font-family:arial, sans serif; text-transform: uppercase; color:#fff; font-size:11px; font-weight:bold; margin-top:3px; margin-bottom:3px; border-bottom: #fff 1px solid } h3 span { border-bottom: #c00 5px solid } #explanation h3, #participation h3, #requirements h3, #benefits h3, #quickSummary h3, #preamble h3, #lselect h3, #lfavorites, #lresources h3, #larchives h3 { background-image:url(h3.gif); background-repeat:no-repeat; background-position:bottom right; } p { margin:6px; } #requirements p.p5 { color:#c00; font-weight:bold; } acronym { border-bottom: dotted 1px #fff; cursor: help; } /* Links */ a { color:#e2e2e2; text-decoration:underline; } a:link { color:#e2e2e2; text-decoration:underline; } a:hover { color:#fff; font-weight:bold; text-decoration:underline; } a:visited { color:#e2e2e2; text-decoration:underline; } #footer a { text-transform: uppercase; color:#fff; text-decoration:underline; background: url(bullet_single.gif) no-repeat 5px 2px; padding-left: 15px; } #footer a:link { text-transform: uppercase; color:#fff; text-decoration:underline; background: url(bullet_single.gif) no-repeat 5px 2px; padding-left: 15px; } #footer a:hover { text-transform: uppercase; color:#fff; font-weight:bold; text-decoration:underline; } #footer a:visited { text-transform: uppercase; color:#c00; text-decoration:underline; } #lselect a { color:#fff; text-decoration:underline; } #lselect a:link { color:#fff; text-decoration:underline; } #lselect a:hover { color:#fff; font-weight:bold; text-decoration:underline; } #lselect a:visited { color:#e2e2e2; text-decoration:underline; } #lselect a.c:hover { color:#c00; background-color:#fff; font-weight:bold; } /* Lists */ #linkList ul { margin: 0px 0px 5px 0px; padding: 0px; } #linkList li { list-style-type: none; } #linkList #lselect li { background: url(bullet_double.gif) no-repeat 5px 2px; padding-left: 15px; } #lselect li a.c{ text-decoration:none; display:inline; font-size:9px; text-transform: uppercase; } #linkList #larchives li, #linkList #lresources li { background: url(arrow.gif) no-repeat 0px 5px; padding-left: 10px; display: inline; } /* css Zen Garden submission 067 - 'A Silent Strength' by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Ray Henry */ /* Added: December 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { background: #ADB58D url(main_bg_pattern.gif); margin:0; padding:0; text-align:center; } p { font: 11px verdana; text-align: left; } h1, h2, h3, h4 { margin:0; padding:0; } a:link { text-decoration:underline; color: #5a682e; } a:visited { text-decoration:underline; color: #38460c; } a:hover, a:active { text-decoration: underline; color: #380000; } acronym { border-bottom:1px dotted #38460c; cursor:help; } a acronym {bottom-border:0;} ul { padding:0; margin:0; } /* header images */ h1, h2 { margin: 0 40px 0 335px; padding:0; width: 395px; } h1 { background:#f4f5f0 url(intro_bg_a.jpg) no-repeat top left; height:110px; } h2 { background:#f4f5f0 url(intro_bg_b.jpg) no-repeat top left; height:106px; } h1 span, h2 span {display:none;} /* specific divs */ #container { background:#fff url(container_bg.jpg) repeat-y top left; width:770px; text-align:left; margin-left:auto; margin-right:auto; } #quickSummary, #preamble, #explanation, #participation, #benefits, #requirements { margin: 0 40px 0 335px; padding:0 15px; width: 365px; border-bottom:1px solid #e3e4e0; } #quickSummary { background:transparent url(quicksum_title.gif) no-repeat top left; padding-top:30px; } #preamble { background:transparent url(theroad_title.gif) no-repeat top left; padding-top:30px; } #explanation { background:transparent url(explain_title.gif) no-repeat top left; padding-top:30px; } #participation { background:transparent url(participate_title.gif) no-repeat top left; padding-top:30px; } #benefits { background:transparent url(benefit_title.gif) no-repeat top left; padding-top:30px; } #requirements { background:transparent url(req_title.gif) no-repeat top left; padding-top:30px; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 {display:none;} #quickSummary p, #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin:10px 5px; line-height:16px; color:#38460c; } /* footer */ #footer { text-align:center; margin: 10px 40px 0 335px; padding-bottom:10px; width: 365px; font: 10px verdana; } /* main navigation */ #linkList { background:#fff url(intro_title.jpg) no-repeat top left; position: absolute; top: 0px; padding:110px 0 0 0; margin:0 0 0 58px; width:277px; height:100%;; } #linkList ul { margin: 0; padding: 0; } #lselect { background:transparent url(select_nav_title.gif) no-repeat top left; padding-top:30px; } #lselect h3 {display:none} #lselect ul { margin:0 0 0 -15px; padding:0; width:235px; voice-family: "\"}\""; voice-family:inherit; margin:0; } #lselect li { font:11px verdana; width:235px; padding:5px 10px 15px 10px; height:auto; list-style-type: none; margin:0 0 -3px 20px; background:#dee1d3 url(li_bg_tab.gif) no-repeat bottom left; voice-family: "\"}\""; voice-family:inherit; width:215px; } div[id="lselect"]>li { margin:0 0 0 20px; !important; } #lselect li a:link, #lselect li a:visited { font-weight:bold; color:#39470D; display: block; margin:0; } #linkList li a.c:link, #linkList li a.c:visited { color: #929B70; padding:0; font-weight: normal; display: inline; text-decoration: underline; } #linkList a.c:hover { text-decoration: underline; } #larchives { background: #fff url(archive_title.gif) no-repeat top left; padding-top:30px; } #larchives h3 {display:none;} #larchives ul, #lresources ul { margin:0; padding:0; width:235px; } #larchives li, #lresources li { font:11px verdana; width:215px; padding: 5px 5px 0 5px; list-style-type: none; margin:0 0 0 20px; } #larchives a:link, #larchives a:visited, #lresources a:link, #lresources a:visited { color:#929B70; text-decoration:underline; } #larchives a:hover, #lresources a:hover { color:#818a60; } #lresources { background:#fff url(res_title.gif) no-repeat top left; padding-top:47px; } #lresources h3 {display:none;} /* extra divs */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none;}/* css Zen Garden submission 068 - 'Ballade' by Charlotte Lambert, http://charlotte.flibuste.net/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Charlotte Lambert */ /* Added: December 14th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ body { margin: 0px; padding: 0px; font-family: geneva, arial, helvetica, sans-serif; color: #000; background: #000; height: 100%; text-align: center; } html { height: 100%; margin: 0px; padding: 0px; } a:link { color: #e5a250; text-decoration: none; } a:visited { color: #b2906d; text-decoration: none; } a:hover, a:active { color:#99d0dd; text-decoration: none; } acronym { cursor: help; } a acronym { cursor: help; } p { font-size: 80%; } #container { position: relative; width: 800px; padding: 0px; margin-left: auto; margin-right: auto; text-align: left; background: #fff url(fond.jpg) top left repeat-y; border: 0px; } html>body #container { width: 800px; /* ie5win fudge ends */ } /* __________CHAPEAU__________ */ /*==CHAPEAU--pageHeader==*/ #pageHeader { margin-bottom: 5px; text-align: right; } #pageHeader h1 { width: 800px; height: 216px; background: transparent url(zen.jpg) top right no-repeat; margin: 0px; padding: 0px; } #pageHeader span, #pageHeader h2 { display: none; } /*==CHAPEAU--quickSummary==*/ #quickSummary { background: transparent; color: #fff; text-align: center; margin: 20px 80px 40px 295px; } #quickSummary a, #quickSummary a:visited { color: #99d0dd; } #quickSummary a:hover, #quickSummary a:active { color: #e5a250; } /*_________________TEXTE____________*/ /*==TEXTE--chapitres==*/ #preamble { margin: 0 29px 0 235px; background: #fff url(fond1.jpg) repeat-y; padding: 0px; width: 536px; padding-bottom: 30px; } #explanation, #benefits, #requirements, #participation { margin: 0px 29px 0px 235px; padding: 0px; border: 0px; width: 536px; } #explanation { background: #FFF url(fond2.jpg) top left repeat-y; } #participation { background: #fff url(fond3.jpg) top left repeat-y; } #benefits { background: #fff url(fond4.jpg) top left repeat-y; padding-bottom: 40px; } #requirements { background: #fff url(fond5.jpg) top left repeat-y; padding-bottom: 20px; } /*==TEXTE--p==*/ #explanation p, #participation p, #benefits p, #requirements p, #preamble p{ text-align: justify; } #preamble p, #participation p, #requirements p{ margin: 5px 120px 0px 20px; } #explanation p, #benefits p{ margin: 5px 20px 0px 120px; } /*==TEXTE--h3==*/ #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 0px; border: 0px; width: 536px; } #supportingText h3 span, #preamble h3 span { display: none; } #preamble h3 { background: url(road.jpg) top left no-repeat; height: 106px; } #explanation h3 { background: url(about.jpg) top left no-repeat; height: 168px; } #participation h3 { background: url(particip.jpg) top left no-repeat; height: 154px; width: 565px; } #benefits h3 { background: url(benef.jpg) top left no-repeat; height: 171px; } #requirements h3 { background: url(req.jpg) top left no-repeat; height: 125px; } /*_____________PIED__________________*/ #footer{ margin: 0 29px 0 235px; padding: 0px; background: transparent url(fin.jpg) top left no-repeat; width: 536px; height: 223px; text-decoration: underline; color: #fff; } #footer a { position: relative; top: 120px; left: 40px; padding: 0px; color: #99d0dd; } #footer a:hover, #footer a:active { color: #e5a250; text-decoration: none; } #extraDiv1 { height: 119px; width: 800px; margin: 0 auto 30px auto; background: #b2906d url(bas.jpg) no-repeat top left; text-align: left; } /*__________________MENU__________________*/ #linkList { position: absolute; top: 0; left: 0; width: 215px; margin: 0px; padding: 150px 0px 0px 0px; background: url(chat.jpg) top left no-repeat; font-size: 80%; color: #e5a250; } /*==MENU--h3==*/ #linkList h3 { margin: 40px 0px 20px 0px; width: 185px; height: 76px; } #linkList h3 span { display:none; } #linkList h3.select{ background: transparent url(select.jpg) no-repeat top left; } #linkList h3.archives { background: transparent url(archiv.jpg) no-repeat top left; } #linkList h3.resources { background: transparent url(resou.jpg) no-repeat top left; } /*==MENU--liste==*/ #linkList ul { margin: 0px 30px 0px 20px; padding: 7px 2px 5px 2px; background: #000; border: 2px solid #b2906d; } #linkList li { list-style: none; margin: 0px; padding: 0px; } #linkList a { color: #e5a250; text-decoration: none; font-size: small; } div#linkList a:hover { color: #99d0dd; } /*==MENU--select==*/ #lselect li { margin: 0 0 10px 0; } #lselect li a { display: block; } #lselect li .c { display: inline; } /*------------------------------------------------------*/ #lselect a { text-transform:uppercase; margin: 0px; padding-left: 30px; border: 0px; background: transparent; color: #b2906d; } #lselect a:hover { background: url(puce.jpg) no-repeat 0px -3px; color: #99d0dd; } #lselect a:visited { color: #964; } /*---------------------------------------------------*/ #lselect a.c { text-transform:none; margin: 0px; padding-left: 10px; border: 0px; background: transparent; color: #e5a250; } #lselect a.c:hover { background: transparent; color: #99d0dd; } /*==MENU--archives==*/ #larchives li, #lresources li { margin: 0 0 15px 0; } #larchives a, #larchives a:visited { margin: 0px; padding: 10px 0px 0px 20px; border: 0px; background: transparent; } #larchives a:hover { background: url(puceherbe.jpg) no-repeat 0 4px; } /*==MENU--ressources--a==*/ #lresources a, #lresources a:visited { margin: 0px; padding: 5px 0px 5px 20px; border: 0px; background: transparent; } #lresources a:hover { background: url(puceparenth.jpg) center left no-repeat; } /* css Zen Garden submission 069 - 'Bonsai Sky' by Mike Davidson - http://www.mdavidson.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Mike Davidson */ /* Added: December 23rd, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body { color: #000; background-color: #fff; background-image: url(bg_garden2.jpg); background-position: top right; background-repeat: no-repeat; font: normal 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; padding: 0; margin: 0; } acronym { border: 0; } h3 { font: bold 16px Georgia, "Times New Roman", Times, serif; color: #003300; background-image: url(bonsai.gif); background-repeat: no-repeat; padding-left: 28px; height: 23px; margin-top: 14px; margin-bottom: -5px; } h3 span { border-bottom: 1px dotted #000000; padding-bottom: 3px; } p { line-height: 165%; } ul { list-style: none; padding: 0 0 0 13px; margin: 10px 0 0 0; } li { line-height: 16px; padding-bottom: 8px; } a:link, a:visited, a:hover, a:active { color: #003300; font-weight: bold; } #linkList a:link, #linkList a:visited { color: #FFFFFF; font-size: 12px; font-style: normal; text-decoration: none; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 0 3px #000000; font-weight: bold; display: block; } #linkList a:hover, #linkList a:active { color: #FFFFFF; font-size: 12px; font-style: normal; text-decoration: underline; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 0 3px #000000; font-weight: bold; } #linkList { position: absolute; width: 200px; top: 300px; right: 7%; color: #FFFFFF; font-style: italic; font-size: 9px; font-family: Georgia, "Times New Roman", Times, serif; text-shadow: 0 0 3px #000000; } #linkList h3 { font: bold 12px Georgia, "Times New Roman", Times, serif; padding: 0; text-align: center; text-transform: lowercase; color: #FFFFFF; background-image: none; height: auto; } #linkList h3 span { background-color: #000000; padding: 4px 20px 4px 20px; position: relative; top: -7px; } #lselect, #larchives, #lresources { background-image: url(bg_black.gif); margin-bottom: 25px; padding-bottom: 3px; } #quickSummary { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; width: 380px; border-left: 1px dotted #000000; padding-left: 8px; } #pageHeader { top: 29px; position: absolute; height: 116px; text-align: center; width: 92%; background-image: url(header.gif); background-position: center; background-repeat: no-repeat; } #pageHeader h1 { font: normal 85px Georgia, "Times New Roman", Times, serif; text-shadow: 0 0 7px #000000; text-transform: lowercase; margin: 0; padding: 0; color: #111133; display: none; } #pageHeader h2 { font: bold 12px Georgia, "Times New Roman", Times, serif; text-transform: lowercase; position: relative; left: -143px; top: -20px; color: #000000; padding-top: 6px; display: none; } #pageHeader h2 span { border-top: 1px dotted #000000; padding-top: 3px; } #container { width: 92%; margin-left: 40px; padding-bottom: 40px; } #intro { padding-top: 162px; } #explanation, #participation, #benefits, #requirements, #preamble { width: 53%; } #lselect a:link.c , #lselect a:visited.c { color:#EBE2A8; text-decoration: none; display: inline; } #lselect a:hover.c, #lselect a:active.c { text-decoration: underline; display: inline; } #extraDiv1 { background-image: url(platform.png); position: fixed; top: 270px; right: 85px; width: 85px; height: 184px; margin: -85px; } #extraDiv2 { background-image: url(edge_bottom_black.gif); background-repeat: repeat-x; position: fixed; bottom: 0; left: 100%; width: 100%; height: 20px; margin-left: -100%; } #extraDiv3 { background-image: url(edge_top_black.gif); background-repeat: repeat-x; position: fixed; top: 0; left: 100%; width: 100%; height: 20px; margin-left: -100%; } #extraDiv4 { background-image: url(edge_left_black.gif); background-repeat: repeat-y; position: fixed; top: 0; left: 0; width: 20px; height: 100%; margin: 0; } #extraDiv5 { background-image: url(edge_right_black.gif); background-repeat: repeat-y; position: fixed; top: 0; right: 0; width: 20px; height: 100%; margin: 0; }/* css Zen Garden submission 070 - 'CS(S) Monk' by Cedric Savarese - http://www.4213miles.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2003, Cedric Savarese */ /* Added: January 2nd, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* basic elements */ body { color: #000000; background: #fff url(BGTile.jpg) repeat left top; margin: 0; padding: 0; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; font-size: small; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; } a:link { padding: 0 0 1px 0; text-decoration: none; color: #CC3300; background-image: url(underline.gif); background-repeat: repeat-x; background-position: bottom left; } a:visited { text-decoration: none; color: #666666; padding: 0 0 2px 0; background-image: url(underline.gif); background-repeat: no-repeat; background-position: bottom left; } a:hover, a:active { text-decoration: none; color: #FF0000; background-image: none; } acronym { border-bottom: none; } /* specific divs */ #container { background: url(ContentBG.gif) repeat-y left top; margin:0px auto; text-align:left; width: 780px; padding: 0px; border-bottom: 1px solid #000; } #intro { position: relative; } #pageHeader { background-image: url(CSZenLogo.gif); background-repeat: no-repeat; background-position: left; height: 444px; z-index:99; } #pageHeader h1 { display: none; } #pageHeader h2 { display: none; } #preamble { background-image: url(RoadToEnlightmentBG_2.gif); background-repeat: no-repeat; background-position: right bottom; width: 405px; position: absolute; left: 410px; top: 15px; margin: 0; padding: 0; font-size: x-small; font-style: italic; letter-spacing: 2px; } #preamble h3 { display: none; } #preamble p { padding: 8px 70px 0px 70px; margin: 0; } #preamble .p1 { background-image: url(RoadToEnlightmentBG_1.gif); background-repeat: no-repeat; background-position: right top; padding-top: 10px; } #preamble .p3 { padding-bottom: 20px; } #quickSummary { position: absolute; font-size: x-small; left: 38px; top: 515px; width: 250px; z-index: 5; text-align: right; letter-spacing: 2px; } #explanation { background-image: url(SoWhatIsThisAbout.gif); background-position: left top; background-repeat: no-repeat; margin: 40px 0px 0px 30px ; } #explanation h3 { display: none; } #explanation p { margin: 0px 50px 0px 280px ; } #participation { background-image: url(Participation.gif); background-position: left top; background-repeat: no-repeat; margin: 20px 0px 0px 150px ; } #participation h3 { display: none; } #participation p { margin: 0px 50px 0px 160px ; } #benefits { background-image: url(Benefits.gif); background-position: left top; background-repeat: no-repeat; margin: 40px 0px 0px 195px ; } #benefits h3 { display: none; } #benefits p { margin: 0px 50px 0px 115px ; } #requirements { background-image: url(Requirements.gif); background-position: left top; background-repeat: no-repeat; margin: 40px 0px 0px 140px ; } #requirements h3 { display: none; } #requirements p { margin: 0px 50px 0px 170px ; } #linkList { margin: 40px auto; padding: 0px; background-image: url(NavBG.gif); background-repeat: no-repeat; background-position: left bottom; width: 729px; font-size: xx-small; } #linkList2 { background-image: url(NavBG_top.gif); background-repeat: no-repeat; background-position: left top; width: 729px; padding: 5px 0px; } #linkList ul { display: block; padding: 0px 60px 0px 120px; margin: 0; line-height: 20px; } #linkList li { display: inline; list-style-image: none; } #linkList li:after {content:url(Bullet.gif); } #lselect { background-image: url(SelectADesign.gif); background-position: left center; background-repeat: no-repeat; margin: 0 0 0 20px; } #lselect h3 { display: none; } #larchives { background-image: url(Archive.gif); background-position: left top; background-repeat: no-repeat; margin: 10px 0 10px 20px; padding: 8px 0; } #larchives h3 { display: none; } #lresources { background-image: url(Resources.gif); background-position: left top; background-repeat: no-repeat; margin: 10px 0 10px 20px; padding: 8px 0; } #lresources h3 { display: none; } #extraDiv1 { position: relative; top: -225px; left: -360px; margin: 0 auto; width: 96px; height: 206px; background-image: url(Dragon.gif); background-position: left top; background-repeat: no-repeat; } .p5 { padding-top: 30px; font-size: 10px; } #footer { padding-left: 160px; font-size: x-small; margin-top: -13px; } /* css Zen Garden submission 071 - 'Garden Party' by Bobby van der Sluis, http://www.bobbyvandersluis.com */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Bobby van der Sluis */ /* Added: January 2nd, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Page layout: positioning and backgrounds */ body { margin: 0; border-top: 15px solid #000; border-bottom: 15px solid #000; padding: 0; background: #fff url(background.gif) center top repeat-y; text-align: center; } #container { position: relative; margin: 0 auto; width: 750px; } #intro { background: #00c2ec url(lines.gif) left top repeat-y; } #pageHeader { padding: 20px 95px 0 395px; } #pageHeader h1 { position: absolute; top: 0; left: 0; background: transparent url(logo.gif) left top no-repeat; width: 375px; height: 270px; } #pageHeader h1 span { display: none; } #pageHeader h2 { padding: 0; } #quickSummary { padding: 0 95px 0 395px; } #preamble { background: transparent url(crossing.gif) left bottom no-repeat; padding: 0 95px 230px 395px; } #supportingText { position: relative; background: #10a2c5 url(lines2.gif) left top repeat-y; width: 750px; } #explanation { padding: 0 395px 0 95px; } #participation { padding: 0 395px 180px 95px; background: transparent url(wave.gif) left bottom no-repeat; } #benefits { position: absolute; top: 0; left: 395px; padding: 0 95px 0 0; } #requirements { position: absolute; top: 18.5%; left: 395px; padding: 0 95px 0 0; } #footer { padding: 0 95px 5px 395px; background: transparent url(lines3.gif) left top repeat-y; } #linkList { position: absolute; top: 270px; left: 0px; margin: 0 95px; width: 260px; } #larchives { padding: 2em 0 1em 0; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* Content styling: fonts & text replacement */ body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; } h1, h2, h3, p { margin: 0; } p { padding: 0 0 1em 0; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: overline; } #container { text-align: left; } #pageHeader h2 { background: transparent url(quickSummary.gif) no-repeat top left; width: 260px; height: 44px; } #preamble h3 { background: transparent url(preamble.gif) no-repeat top left; width: 260px; height: 44px; } #explanation h3 { background: transparent url(explanation.gif) no-repeat top left; width: 260px; height: 44px; } #participation h3 { background: transparent url(participation.gif) no-repeat top left; width: 260px; height: 44px; } #benefits h3 { background: transparent url(benefits.gif) no-repeat top left; width: 260px; height: 44px; } #requirements h3 { background: transparent url(requirements.gif) no-repeat top left; width: 260px; height: 44px; } #pageHeader h2 span, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #linkList h3 { display: none; } #linkList ul { margin: 0; padding: 0; list-style-type: none; } #linkList li { margin: 0; } #linkList a { display: block; font-size: large; voice-family: "\"}\""; voice-family: inherit; font-size: x-large; } html>body #linkList a { font-size: x-large; } #linkList a.c { display: inline; color: #000; font-size: medium; voice-family: "\"}\""; voice-family: inherit; font-size: large; } html>body #linkList a.c { font-size: large; } #larchives a, #lresources a { display: inline; font-size: small; voice-family: "\"}\""; voice-family: inherit; font-size: medium; } html>body #larchives a, html>body #lresources a { font-size: medium; } #lresources li { background: url(bullet.gif) no-repeat 0 0.5em; padding: 0 0 0 12px; } /* css Zen Garden submission 072 - 'Outburst' by Chris Vincent - http://dris.webhop.org/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* Flower illustrations derived from a photograph by Seer of sxc.hu - http://www.sxc.hu/browse.phtml?f=profile&l=seer */ /* Added: January 3rd, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Overall Layout and Formatting */ body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; margin: 0; padding: 0; text-align: justify; } #container { position: absolute; left: 0; top: 0; padding: 0 10px 0 10px; background: url(edgeBorder.gif) top right repeat-y rgb(236,149,3); width: 939px; voice-family: "\"}\""; voice-family: inherit; width: 919px; } #pageHeader { text-indent: -10000px; width: 800px; height: 388px; background: url(header.gif) no-repeat; margin: 10px 0 0 0; padding: 0; } h1, h2 { margin: 0; } /* Content Layout */ #quickSummary { background: white; padding: 10px 35px 10px 335px; margin: 10px 0 0 0; width: 800px; voice-family: "\"}\""; voice-family: inherit; width: 430px; } *>#quickSummary { float: right; width: 155px; padding: 0 20px 10px 17px; margin: 23px 154px 10px 20px; border: 3px double rgb(200,200,200); border-width: 0 0 3px 3px; } #quickSummary .p2 { padding-bottom: 10px; border-bottom: 3px double rgb(200,200,200); } *>#quickSummary .p2 { padding-bottom: 0; border-bottom: 0; } #preamble h3, #supportingText h3 { text-indent: -10000px; height: 38px; } #preamble { background: white; padding: 10px 35px 1px 335px; width: 800px; voice-family: "\"}\""; voice-family: inherit; width: 430px; } *>#preamble { margin-top: 8px; padding-top: 1px; } #preamble h3 { background: url(theRoadToEnlightenmentWide.gif) no-repeat; } *>#preamble h3 { background: url(theRoadToEnlightenmentWide.gif) no-repeat; width: 215px; margin-left: 0; margin-right: 0; clear: left; } #supportingText { background: white url(3dflower.jpg) bottom left no-repeat; margin-bottom: 10px; padding: 1px 35px 0 335px; width: 800px; voice-family: "\"}\""; voice-family: inherit; width: 430px; } #supportingText h3 { margin: 22px 0 10px 0; } #explanation h3 { background: url(soWhatIsThisAbout.gif) no-repeat; margin-top: 22px; } #participation h3 { background: url(participation.gif) no-repeat; } #benefits h3 { background: url(benefits.gif) no-repeat; } #requirements h3 { background: url(requirements.gif) no-repeat; } *>#explanation h3 { margin-top: 10px; } /* Sidebar Layout */ #linkList { position: absolute; left: 10px; top: 408px; width: 325px; padding: 1px 0 0 0; line-height: 14px; } #linkList h3 { color: rgb(255,210,50); padding: 5px 0 0 65px; margin: 10px 0 0 0; font-size: 9px; font-weight: normal; background: url(windowHead.gif) no-repeat rgb(236,149,3); width: 325px; height: 22px; voice-family: "\"}\""; voice-family: inherit; width: 260px; height: 17px; } *>#linkList h3 { padding-top: 6px; margin-bottom: -1px; } #lselect:hover h3, #larchives:hover h3, #lresources:hover h3 { background: url(flashingWindowHead.gif) no-repeat; } #linkList ul { background: url(windowBody.gif) repeat-y; margin: 0; padding: 10px 0 15px 40px; width: 325px; voice-family: "\"}\""; voice-family: inherit; width: 285px; } #linkList li { list-style: none; background: url(bullet.gif) no-repeat 0 3px; margin: 5px 20px 5px -16px; padding-left: 0px; width: 200px; text-indent: 16px; voice-family: "\"}\""; voice-family: inherit; padding-left: 16px; text-indent: 0; margin-left: 0; } #linkList li:hover { background: url(hoverBullet.gif) no-repeat 0 3px; } #lselect, #larchives, #lresources { width: 325px; padding-bottom: 11px; background: url(windowFoot.gif) no-repeat bottom; } #lselect { font-size: 11px; } #footer { text-align: center; padding: 3px 0; border-top: 3px double rgb(200,200,200); } /* Link Formatting */ a:link { color: black; text-decoration: none; border-bottom: 2px rgb(247,202,0) solid; } a:visited { color: black; text-decoration: none; border-bottom: 1px rgb(247,202,0) solid; } a:link:hover { border-bottom-width: 3px; } a:visited:hover { border-bottom-width: 2px; } a:active { border-bottom-width: 1px; } #linkList a:link, #linkList a:visited, #linkList a:hover, #linkList a:active { border: none; font-weight: bold; display: block; font-size: 12px; } #linkList a.c:link, #linkList a.c:visited, #linkList a.c:hover, #linkList a.c:active { font-weight: normal; text-decoration: underline; display: inline; font-size: 11px; } #larchives a:link, #larchives a:visited, #larchives a:hover, #larchives a:active, #lresources a:link, #lresources a:visited, #lresources a:hover, #lresources a:active { display: inline; font-size: 12px; }/* css Zen Garden submission 073 - 'Emmakade' by Alexander Christiaan Jacob (ACJ) - http://acjs.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, ACJ */ /* Added: January 18th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ :link, :visited { background-color: transparent; color: #9296A2; font-weight: bold; text-decoration: underline } [title] { border-bottom: 1px dotted; cursor: help } :link:hover, :visited:hover { background-color: #9296A2; color: #373B46; text-decoration: none } body { font: normal 70% Verdana, Georgia, Times, serif } body { background: #9296A2 url(a_img.gif) repeat; color: #000000; margin: 0em; padding: 0em } h1, h2, h3, h4 { margin: 0em; overflow: hidden; padding: 0em } h1 { background: #9296A2 url(h1_v2.jpg) no-repeat; height: 430px } h2 { background: #9296A2 url(h2.gif) no-repeat; height: 360px; margin-left: -62px; position: absolute; top: 0px; width: 60px } * > h2 { position: fixed } h3 span { margin-left: -2000px } p { color: #9296A2; margin: 0em; padding: 0em 0em 1em 0em } p:hover { color: #E7E7F1 } p * { color: #9296A2 } p:hover * { color: #E7E7F1 } ul { background-color: transparent; color: #9296A2; margin: 0em; padding: 0em; padding-bottom: 20px } ul li { list-style: square; margin: 0em 0em 0em 2em; padding: 0em } ul li a { font-weight: normal } #container { background: #373B46 url(container.jpg) bottom no-repeat; border: 2px solid #000; border-width: 0px 2px; color: #E7E7F1; margin-left: -321px; padding-bottom: 500px; position: absolute; left: 50%; width: 642px } #pageHeader { background-color: #373B46 } #pageHeader h1 span { margin-left: -2000px } #pageHeader h2 span { margin-left: -2000px } #quickSummary { margin-top: -10px } #quickSummary, #preamble { margin-left: 290px; text-align: justify; width: 270px } #preamble h3 { background: #373B46 url(h3_preamble.gif) no-repeat; height: 60px; width: 330px } #supportingText { margin-left: 24px; width: 440px } p { border-left: 1px dotted #9296A2; margin-left: 10px; padding-left: 10px; text-align: justify } #explanation h3 { background: #373B46 url(h3_explanation.gif) no-repeat; height: 60px; width: 330px } #participation h3 { background: #373B46 url(h3_participation.gif) no-repeat; height: 60px; width: 330px } #benefits h3 { background: #373B46 url(h3_benefits.gif) no-repeat; height: 60px; width: 330px } #requirements h3 { background: #373B46 url(h3_requirements.gif) no-repeat; height: 60px; width: 330px } #linkList { left: 12px; position: absolute; top: 400px; width: 256px } #linkList h3 { height: 30px; width: 200px } #linkList h3.select { background: #373B46 url(h3.select.gif) no-repeat } #linkList h3.favorites { background: #373B46 url(h3.favorites.gif) no-repeat } #linkList h3.archives { background: #373B46 url(h3.archives.gif) no-repeat } #linkList h3.resources { background: #373B46 url(h3.resources.gif) no-repeat } #footer { bottom: 400px; position: absolute; right: 36px; text-align: right } #extraDiv1 { background: #9296A2 url(thingy.gif) no-repeat; bottom: 0px; float: right; height: 36px; position: fixed; right: 0px; width: 36px }/* css Zen Garden submission 074 - 'Egyptian Dawn' by James Abbott - http://www.ja-consultancy.co.uk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, James Abbott */ /* Added: January 18th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font-size: 8pt; font-family: verdana, sans-serif; font-style: italic; color: #6B441A; background: #BB8855 url(border.jpg) no-repeat top left; margin: 0px; } p { margin-top: 0px; } a:link { text-decoration: none; color: #995522; font-weight: bold; } a:visited { text-decoration: none; color: #995522; font-weight: bold; } a:hover, a:active { text-decoration: underline; color: #995522; font-weight: bold; } /* specific divs */ #container { position: absolute; top: 40px; left: 40px; height: 1900px; width: 1000px; border: 0px solid #000000; padding: 0px 0px 10px 0px; margin: 0px; background: url(container_bg.jpg) no-repeat top left; } #intro { position: relative; top: 130px; min-width: 400px; border: 0px solid #000000; width: 750px; padding: 0px 0px 0px 0px; margin: 0px; } #intro h3 { font-size: 10pt; font-family: verdana, sans-serif; color: #FFFB88; padding: 0px; margin: 10px 0px 10px 0px; border: 0px solid #000000; display: none; } #pageHeader { position: relative; left: 100px; top: 25px; padding: 0px; border: 0px solid #000000; margin: 0px; } #pageHeader h1 { margin: 0px; padding: 0px; } #pageHeader h1 span { display:none } #pageHeader h2 { width: 340px; height: 40px; padding: 0px; border: 0px solid #000000; margin: 0px; } #pageHeader h2 span { display:none; } #quickSummary { position: relative; top: 0px; left: 105px; width: 300px; border: 0px solid #000000; padding: 5px 5px 5px 5px; font-size: 8pt; font-family: verdana, sans-serif; font-weight: bold; font-style: italic; color: #8D663C; margin: 0px; } #preamble { background: url(preamble.gif) no-repeat top left; padding: 25px 5px 15px 5px; position: relative; top: 20px; left: 105px; width: 370px; margin: 0px 0px 0px 0px; border: 0px solid #000000; } #supportingText { position: relative; min-width: 350px; top: 160px; border: 0px solid #000000; margin: 0px; padding: 0px; } #supportingText h3 { font-size: 10pt; font-family: verdana, sans-serif; color: #FFFB88; padding: 0px; margin: 10px 0px 10px 0px; display: none; } #footer { position: relative; top: 20px; left: 100px; width: 370px; border: 0px solid #000000; margin: 0px; padding: 5px; text-align: center; } #explanation { background: url(explanation.gif) no-repeat top left; padding: 25px 5px 15px 5px; margin: 0px 0px 0px 0px; position: relative; top: 0px; left: 105px; width: 370px; border: 0px solid #000000; } #participation { background: url(participation.gif) no-repeat top left; padding: 25px 5px 15px 5px; position: relative; top: 10px; left: 105px; width: 370px; margin: 0px 0px 0px 0px; border: 0px solid #000000; } #benefits { background: url(benefits.gif) no-repeat top left; padding: 25px 5px 15px 5px; position: relative; top: 20px; left: 105px; width: 370px; margin: 0px 0px 0px 0px; border: 0px solid #000000; } #requirements { background: url(requirements.gif) no-repeat top left; padding: 25px 5px 15px 5px; position: relative; top: 30px; left: 105px; width: 370px; margin: 0px 0px 0px 0px; border: 0px solid #000000; } #footer a:link, #footer a:visited { margin-right: 20px; color: #6B441A; } #linkList { position: absolute; top: 420px; left: 515px; border: 0px solid #000000; width: 180px; margin: 0px; padding: 0px; background: url(listheader.gif) no-repeat top center; } #linkList2 { position: relative; font-size: 7pt; font-family: verdana, sans-serif; padding: 100px 20px 20px 20px; margin: 0px 0px 0px 0px; text-align: center; width: 140px; height: 750px; border: 0px solid #AA7744; } #lselect { border: 0px solid #000000; padding: 5px 5px 5px 5px; margin: 5px; } #lselect h3 { font-size: 9pt; font-family: verdana, sans-serif; color: #6B441A; font-weight: bold; margin: 0px; padding: 0px; } #lfavorites{ border: 0px solid #000000; padding: 5px 5px 5px 5px; margin: 5px; } #lfavorites h3 { font-size: 9pt; font-family: verdana, sans-serif; color: #6B441A; font-weight: bold; margin: 0px; padding: 0px; } #larchives { border: 0px solid #000000; padding: 5px 5px 5px 5px; margin: 5px; } #larchives h3 { font-size: 9pt; font-family: verdana, sans-serif; color: #6B441A; font-weight: bold; margin: 0px; padding: 0px; } #lresources { border: 0px solid #000000; padding: 5px 5px 5px 5px; margin: 5px; } #lresources h3 { font-size: 9pt; font-family: verdana, sans-serif; color: #6B441A; font-weight: bold; padding: 0px; margin: 0px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { font-size: 9pt; font-family: verdana, sans-serif; color: #995522; font-weight: bold; } #linkList li a:visited { font-size: 8pt; font-family: verdana, sans-serif; color: #995522; font-weight: bold; } /* css Zen Garden submission 075 - 'Lost HighWay' by Julien Roumagnac - http://www.j-roumagnac.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2003, Julien Roumagnac */ /* Added: January 18th, 2003 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements ----------------------------------------------------------------------------------------*/ body { background: #1D1D1D url(main_bg_pattern.gif) repeat center; margin: 0; padding: 0; text-align:center; } a:link { text-decoration: none; color: #C6C6C6; } a:visited { text-decoration: none; color: #C6C6C6; } a:hover, a:active { text-decoration: none; color: #FFFFFF; } acronym { border-bottom: 0px dotted; /* Override for netscape that still want to display a dotted underline */ cursor:help; font-weight: bold; } /* Content ----------------------------------------------------------------------------------------*/ /* Main Container */ #container { position: absolute; width: 638px; top: 18px; left: 50%; text-align: left; margin-left: -319px; background: url(container_bg.gif) repeat-y -4px; z-index: 0; } /* Main Container Cap */ #extraDiv2 { position: absolute; width: 638px; height: 18px; top: 0px; left: 50%; margin-left: -319px; background: url(container_top.gif) no-repeat -4px; z-index: 0; } /* Main CSS ZEN GARDEN Title */ #extraDiv1 { position: absolute; width: 50%; height: 301px; bottom: 15px; left: 0px; background: url(main_title.gif) no-repeat right bottom; margin-left: -317px; z-index: 1; } /* Hide titles : css Zen Garden, The Beauty of CSS Design, The Road to Enlightenment */ h1 span, h2 span, h3 span { display: none; } /* Photo Container */ #intro { position: absolute; width: 600px; height: 533px; top: 0px; left: 50%; margin-left: -304px; background: url(main_bg_photo.jpg) no-repeat; } /* A Demonstration ... Summary */ #quickSummary { font-size: 9px; font-family: Verdana; color: #E12525; width: 250px; margin-left: 14px; margin-top: 12px; } /* The Road Enlightenment Title */ #preamble { font-size: 12px; font-family: Verdana; color: #AFAFAF; width: 588px; height: 100px; font-style: italic; text-align: right; background: url(title_preamble.gif) no-repeat top right; padding-top: 35px; margin-top: 245px; } /* the 3 Paragraphs margin */ #preamble p.p1, #preamble p.p2, #preamble p.p3 { position: absolute; right: 10px; } /* "Stairs texte effect */ #preamble p.p1 { width: 370px; } #preamble p.p2 { width: 470px; margin-top: 60px; } #preamble p.p3 { width: 520px; margin-top: 120px; } /* Main 4 sections beginning */ #supportingText p { text-indent: 24px; } /* Links color */ #supportingText a:link, #supportingText a:visited { color: #FF2A2A; } #supportingText a:hover, #supportingText a:active { color: #FF5A5A; } /* Fonts settings */ #explanation , #participation, #benefits, #requirements { margin-left: 15px; width: 600px; font-size: 11px; font-family: Verdana; color: #AFAFAF; font-style: italic; } /* Interval for gif tiltes */ #explanation h3, #participation h3, #benefits h3, #requirements h3 { height: 22px; } /* Paragraphs Settings*/ #explanation p, #participation p, #benefits p, #requirements p { margin-left: 12px; width: 580px; margin-bottom: 12px; } /* Blocks and Titles positioning */ #explanation { margin-top: 533px; background: url(title_explanation.gif) no-repeat; } #participation { background: url(title_participation.gif) no-repeat; } #benefits { background: url(title_benefits.gif) no-repeat; } #requirements { background: url(title_requirements.gif) no-repeat; } #footer { margin-left: 15px; width: 600px; height: 15px; font-size: 9px; font-family: Verdana; text-align: center; word-spacing: 20px; background: #320000; padding-top: 2px; border-bottom: 1px solid #A12727; border-top: 1px solid #730000; } /* LISTS ----------------------------------------------------------------------------------------*/ /* List Select a Design **************************************************/ /* Main positioning and Gif Title */ #lselect { position: absolute; top: 16px; right: 23px; background: url(list_title_design.gif) no-repeat top right; z-index: 2; } /* Hide non Gif Title */ #lselect h3 {display:none} /* Background */ #lselect ul { width: 187px; height: 261px; background: url(list_bg_design.gif) no-repeat top right; margin: 19px 0px; padding-top: 5px; } /* Put a Fake Transparent dot to have the same line height in IE and NS */ /* Use a Background Dot to improve positioning possibility */ #lselect li { font-family: Verdana; font-size: 9px; color: #E12525; padding: 0px 0px 8px 33px; list-style: none url(list_fake_dot.gif); background: url(list_dot.gif) no-repeat 10px; } /* Force carriage return before 'by' */ #lselect li a:link, #lselect li a:visited {display: block;} #linkList li a.c:link, #linkList li a.c:visited {display: inline;} /* List Archives **************************************************/ /* Main positioning and Gif Title */ #larchives { position: absolute; top: 130px; left: 15px; background: url(list_title_archives.gif) no-repeat top left; z-index: 2; } /* Hide non Gif Title */ #larchives h3 {display:none} /* Background */ #larchives ul { width: 169px; height: 79px; background: url(list_bg_archives.gif) no-repeat top left; margin: 19px 0px 0px 0px; padding-top: 5px; padding-left: 0px; } /* Put a Fake Transparent dot to have the same line height in IE and NS */ #larchives li { font-family: Verdana; font-size: 9px; color: #E12525; padding: 0px 0px 6px 10px; list-style: none url(list_fake_dot.gif); } /* List Resources **************************************************/ /* Main positioning and Gif Title */ #lresources { position: absolute; top: 212px; left: 15px; background: url(list_title_resources.gif) no-repeat bottom left; z-index: 2; } /* Hide non Gif Title */ #lresources h3 {display:none} /* Background */ #lresources ul { width: 169px; height: 109px; background: url(list_bg_resources.gif) no-repeat top left; margin: 0px 0px 0px 0px; padding-top: 5px; padding-left: 0px; } /* Put a Fake Transparent dot to have the same line height in IE and NS */ #lresources li { font-family: Verdana; font-size: 9px; color: #E12525; padding: 0px 0px 6px 10px; list-style: none url(list_fake_dot.gif); }/* css Zen Garden submission 076 - 'Lotus' by Chika */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Chika */ /* Added: February 3rd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { margin: 0px; padding: 0px; background-color: #ffffff; font-size: 12px; line-height: 133%; color: #333333; font-family: arial, helvetica, sans-serif; text-align: center; } a { color: #996699; text-decoration: none; } a:hover, a:active { text-decoration: underline; } /* frame */ #container { background: transparent url(body_bg.gif) repeat-y top left; margin: 0px auto; padding: 0px; width: 752px; text-align: left; } /* header */ #pageHeader { margin: 0px 12px; padding: 107px 0px 0px 0px; } #pageHeader h1 { position: relative; background: transparent url(title.gif) no-repeat top left; margin: 0px; padding: 0px; width: 728px; height: 37px; z-index: 2; } #pageHeader h1 span { display: none; } #pageHeader h2 { position: absolute; background: transparent url(catch.gif) no-repeat top left; margin: 5px 0px 0px 9px; padding: 0px; width: 162px; height: 17px; z-index: 2; } #pageHeader h2 span { display: none; } #quickSummary { position: relative; margin: 6px 0px 0px 428px; width: 300px; height: 97px; z-index: 2; } #quickSummary p { margin: 0px; padding: 0px; font-size: 11px; line-height: 125%; } /* contents */ #preamble { position: relative; margin: 0px 0px 25px 262px; padding: 0px; width: 466px; z-index: 1; } #supportingText { background: transparent url(footer_bg.gif) no-repeat bottom left; margin: 0px 12px; padding: 0px; } #explanation, #participation, #benefits, #requirements { position: relative; margin: 0px 0px 0px 250px; padding: 0px 0px 20px 0px; width: 466px; z-index: 1; } #participation, #requirements { padding: 0px 0px 10px 0px; } #benefits { padding: 10px 0px 30px 0px; } #explanation { background: transparent url(contents_txt_bg_02.gif) no-repeat center center; } #participation { background: transparent url(contents_txt_bg_03.gif) no-repeat center center; } #benefits { background: transparent url(contents_txt_bg_04.gif) no-repeat center center; } #requirements { background: transparent url(contents_txt_bg_05.gif) no-repeat center center; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 0px; padding: 0px; } #preamble h3 { background: transparent url(head_preamble.gif) no-repeat top left; width: 202px; height: 35px; } #explanation h3 { background: transparent url(head_explanation.gif) no-repeat top left; width: 173px; height: 35px; } #participation h3 { background: transparent url(head_participation.gif) no-repeat top left; width: 95px; height: 35px; } #benefits h3 { background: transparent url(head_benefits.gif) no-repeat top left; width: 65px; height: 35px; } #requirements h3 { position: relative; background: transparent url(head_requirements.gif) no-repeat top left; width: 106px; height: 35px; bottom:10px; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display: none; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin: 0px; padding: 4px 0px; } #requirements p { position: relative; bottom:10px; } #footer { margin: 0px 0px 0px 250px; padding: 0px 0px 26px 0px; width: 466px; text-align: right; } #footer a { color: #666666; text-decoration: underline; } /* link */ #linkList { background: transparent url(link_bg.gif) no-repeat top left; position: absolute; margin: 0px 0px 0px 20px; top: 247px; width: 242px; z-index: 1; } #linkList2 { padding: 0px 0px 8px 0px; background: transparent url(link_footer_bg.gif) no-repeat bottom left; } #linkList ul { margin: 0px 6px; padding: 0px; list-style-type: none; } #linkList li { margin: 0px; padding: 1px 0px; } #lselect , #larchives , #lresources { margin: 9px 0px 0px 7px; padding: 0px 0px 12px 0px; width: 219px; } #lselect , #larchives { background: transparent url(link_line.gif) no-repeat bottom left; } #lselect h3, #larchives h3, #lresources h3 { margin: 0px 0px 1px 0px; padding: 0px; } #lselect h3 { background: transparent url(head_select.gif) no-repeat top left; width: 219px; height: 21px; } #larchives h3 { background: transparent url(head_archives.gif) no-repeat top left; width: 219px; height: 21px; } #lresources h3 { background: transparent url(head_resources.gif) no-repeat top left; width: 219px; height: 21px; } #lselect h3 span, #larchives h3 span, #lresources h3 span { display: none; } #lselect a { font-size: 11px; font-weight: bold; color: #336666; } #lselect a.c { font-weight: normal; color: #996699; } #larchives a , #lresources a { color: #333333; } /* images */ #extraDiv1 { position: absolute; top: 20px; left: 0px; text-align: center; width: 100%; z-index: 0; } #extraDiv1 span { background: transparent url(header_bg.jpg) no-repeat top left; margin: 0px auto; padding: 0px; width: 728px; height: 207px; display: block; } #extraDiv2 { position: absolute; top: 227px; left: 0px; text-align: center; width: 100%; z-index: 0; } #extraDiv2 span { background: transparent url(contents_bg.gif) no-repeat top left; margin: 0px auto; padding: 0px; width: 728px; height: 273px; display: block; } #sampleextraDiv3, #sampleextraDiv4, #sampleextraDiv5, #sampleextraDiv6 { display: none; }/* css Zen Garden submission 077 - 'Hop' by Guillaume L. */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Guillaume L. */ /* Added: February 3rd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ a:link { text-decoration: none; color: #8B008B; } a:visited { text-decoration: none; color: #2F4F4F; } a:hover, a:active { text-decoration: underline; color: #FF1493; } acronym { border-bottom: 0px dotted; cursor:help; font-weight: bold; } body { background: #F2C9FF url(fond.jpg) repeat-x; margin: 0 0 0 0; padding: 0 0 0; } h3 { font-family: Arial, sans-serif; font-size: 18px;color: #6E66A2; font-style: italic; } h1 span, h2 span{ display: none; } #container { position: absolute; width: 779px; top: 0px; left: 50%; text-align: left; margin-left: -380px; background-image: url(back.jpg); background-repeat: no-repeat; height: 808px; } #pageHeader { display: none; } #quickSummary { position: absolute; top: 12px; width: 500px; margin-left: 245px; margin-right: 0px; line-height: 10px;margin-bottom: 0px; padding-bottom: 0px; margin-top: 0px; padding-top: 0px; } #quickSummary p { margin-bottom: 0px; padding-bottom: 0px; margin-top: 0px; padding-top: 0px; text-align: right; color: #585959; font-size: 12px; line-height: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #preamble { position: absolute; top: 235px; left: 40%; overflow: auto; height: 230px; width: 435px; margin-top: 0px; padding-top: 0px; text-align: justify; } #preamble h3 { margin-top: 18px; } #preamble p.p1 { line-height: 12px; font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #2F4F4F; font-style: italic; margin-bottom: 10px; padding-bottom: 0px; } #preamble p.p2 { font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #2F4F4F; font-style: italic; line-height: 12px; margin-bottom: 10px; margin-top: 0px; } #preamble p.p3 { font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #2F4F4F; font-style: italic; text-align: center; line-height: 12px;margin-top: 0px; } #supportingText { position: absolute; top: 460px; left: 40%; overflow: auto; height: 270px; width: 450px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 0px; padding-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; border: 1px dashed #ECBFF6; } #explanation , #participation, #benefits, #requirements { width: 425px; font: medium; color: #666666; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; margin-right: 0px; } #explanation p, #participation p, #benefits p, #requirements p { margin-left: 15px; margin-right: 15px; margin-top: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; line-height: 16px; padding: 10px 10px 10px 10px; text-align: justify; } #requirements p { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #benefits p{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #explanation {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: left; } #participation {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding-top: 30px; text-align: right; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; } #benefits {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding-top: 30px; text-align: left; } #requirements {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding-top: 30px; margin-bottom: 40px; text-align: right; } #lselect { position: absolute; top: 360px; left: 60px; } #lselect h3 { font-family: sans-serif; font-size: small; color: #2F4F4F; margin: 0; padding-left: 0px; } #lselect ul { width: 200px; display: block; margin-left: 0px; list-style: none;margin-top: 0px; margin-bottom: 0px;padding-left: 0px; } #lselect li { font-family: Verdana; font-size: 10px; color: Black; text-align: left; line-height: 12px; margin: 0 20px 3px 5px; padding-left: 0px; } #lselect li a:link, #lselect li a:visited , #linkList li a.c:link, #linkList li a.c:visited {display: inline;} #larchives { position: absolute; top: 560px; left: 60px; } #larchives h3 { font-family: sans-serif; font-size: small; color: #2F4F4F; text-align: justify; margin: 0; padding-left: 0px; } #larchives ul { width: 220px; display: block; margin-left: 0px; list-style: none; margin-top: 0px; margin-bottom: 0px; padding-left: 0px; } #larchives li { font-family: Verdana; font-size: 10px; color: black; text-align: justify; line-height: 12px; margin: 0 20px 3px 5px; padding-left: 0px; } #lresources { position: absolute; top: 620px; left: 60px; } #lresources h3 { font-family: sans-serif; font-size: small; color: #2F4F4F; text-align: left; margin: 0; padding-left: 0px; } #lresources ul { width: 220px; display: block; margin-left: 0px; list-style: none;margin-top: 0px; margin-bottom: 0px;padding-left: 0px; } #lresources li { font-family: Verdana; font-size: 10px; color: Black; text-align: left; line-height: 12px; margin: 0 20px 3px 5px; padding-left: 0px; } #footer { width: 240px; text-align: center; font-family: Verdana; font-size: small; font-weight: bolder; margin-left: 100px; padding-bottom: 0px; margin-bottom: 0px; margin-top: 0px; background: url(bas-menu.jpg); z-index: 10; padding-top: 210px; } #extraDiv1 { display: none; }/* css Zen Garden submission 078 - 'Muto Verde' by Alex Taylor , http://www.alextaylor.org */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics and photos copyright 2004, Alex Taylor */ /* Added: February 15th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* HTML */ body { margin: 0 auto; padding: 0; font: 12px Arial,Sans-Serif; text-align: center; background: url(bg.jpg); voice-family: "\"}\""; voice-family:inherit; } h1, h2, h3 { margin: 0; } ul { margin: 0px; } li { /*list-style: square outside url(semicolon_bullet.jpg);*/ margin: 3px 0px 6px -20px; } p { line-height: 1.3; } a:link { color: #003300; } a:active{ color: #003300; } a:visited { color: #003300; } a:hover { color: #336633; } /* CLASSES */ /* IDs */ #container { position: relative; width: 760px; margin: 0 auto; text-align: left; } #intro { margin: 0; } #pageHeader { font: normal 12px Georgia,Serif; height: 135px; margin: 0; background: transparent url(csszen_header.jpg) no-repeat top right; } #pageHeader h1, h2 { margin: 0; display: none; } #quickSummary { font: italic 12px Georgia,Serif; padding: 3px; margin: 0; background: url(introbg.jpg) repeat-y 99px; } #quickSummary p.p1 { position: relative; left: 210px; width: 530px; margin: 0; } #quickSummary p.p2 { position: relative; left: 210px; width: 345px; padding: 4px 0px 0px 0px; margin: 0; } #supportingText { position: relative; width: 410px; height: auto; /*background: url(introbg.jpg) repeat-y 99px;*/ } #supportingText h3 { width: 758px; height: 25px; background: transparent url(header_explanation.png) no-repeat; } #supportingText h3 span { display: none; } #supportingText p { padding: 3px; position: relative; left: 210px; width: 345px; margin: 0; } #preamble { position: relative; width: 410px; height: auto; background: url(roadbg.jpg) repeat-y 227px; /* background-repeat: repeat-y;*/ text-align: justify; } #preamble h3 { width: 750px; height: 25px; background: transparent url(header_enlightenment.gif) no-repeat; } #preamble h3 span { display: none; } #preamble p { padding: 3px; position: relative; left: 335px; width: 410px; margin: 0; } #explanation { position: relative; width: 410px; height: auto; background: url(explanationbg.jpg) repeat-y 227px; background-repeat: repeat-y; text-align: justify; } #explanation h3 { width: 758px; height: 25px; background: transparent url(header_sowhatisthisabout.gif) no-repeat; } #explanation h3 span { display: none; } #explanation p { padding: 3px; position: relative; left: 335px; width: 410px; margin: 0; } #participation { position: relative; width: 410px; height: auto; background: url(dockbg.jpg) repeat-y 227px; background-repeat: repeat-y; text-align: justify; } #participation h3 { width: 758px; height: 25px; background: transparent url(header_participation.gif) no-repeat; } #participation h3 span { display: none; } #participation p { padding: 3px; position: relative; left: 335px; width: 410px; margin: 0; } #benefits { position: relative; width: 410px; height: auto; background: url(benefitsbg.jpg) repeat-y 227px; background-repeat: repeat-y; text-align: justify; } #benefits h3 { width: 758px; height: 25px; background: transparent url(header_benefits.gif) no-repeat; } #benefits h3 span { display: none; } #benefits p { padding: 3px; position: relative; left: 335px; width: 410px; margin: 0; } #requirements { position: relative; width: 410px; height: auto; background: url(lockbg.jpg) repeat-y 227px; background-repeat: repeat-y; text-align: justify; } #requirements h3 { width: 758px; height: 25px; background: transparent url(header_requirements.gif) no-repeat; } #requirements h3 span { display: none; } #requirements p { padding: 3px; position: relative; left: 335px; width: 410px; margin: 0; } #linkList { text-align: right; position: absolute; top: 196px; left: -10px; width: 220px; } #lselect h3 { margin: 8px 20px; width: 198px; height: 25px; background: transparent url(selectdesign.jpg) no-repeat; } #lselect h3 span { display: none; } #lselect li { font-size: 10px; padding: 0px 0px 5px 20px; list-style: none; /*background: url(semicolon_bullet.jpg) no-repeat 0px 50%;*/ background-repeat: no-repeat; } #lselect a { font-size: 12px; } #lselect a.c, #lselect a:link.c , #lselect a:visited.c{ font-size: 10px; font-weight: normal; } #larchives h3 { margin: 8px 20px; width: 198px; height: 25px; background: transparent url(archives.jpg) no-repeat; } #larchives h3 span { display: none; } #larchives li { padding: 0px 0px 2px 20px; list-style: none; /*background: url(arrow_bullet.jpg) no-repeat 2px 0%;*/ } #lresources h3 { margin: 8px 20px; width: 198px; height: 25px; background: transparent url(resources.jpg) no-repeat; } #lresources h3 span { display: none; } #lresources li { padding: 0px 0px 2px 20px; list-style: none; /*background: url(arrow_bullet.jpg) no-repeat 2px 0%;*/ } /*Thanks to Douglas Bowman of stopdesign.com for this little trick with the links*/ #linkList #lselect a:link, #linkList #lselect a:visited {display:block;} #linkList #lselect a.c:link, #linkList #lselect a.c:visited { display:inline;} #footer { position: relative; width: 758px; height: 50px; padding: 4px 40px 0px 0px; text-align: right; background: transparent url(header_footer.gif) no-repeat; } #footer a { font-weight: bold; }/* css Zen Garden submission 079 - 'Green Tea' by Amy Rae Som, http://www.avisualmind.com */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics and photos copyright 2004, Amy Rae Som */ /* Added: February 15th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ body {background:#a2c4a3 url(flower_bg.jpg) repeat-x;font-family:"Trebuchet MS", Arial, Geneva, sans-serif;font-size:70%;color:#030;} #pageHeader {position:absolute;left:20px;top:39px;width:222px;height:63px;background:url(cssZenGarden.gif) no-repeat;} #pageHeader span {margin-left:-1000px;} #quickSummary .p1 {position:absolute;left:0;top:114px;width:750px;height:16px;background:url(an_example.gif) no-repeat;} #quickSummary .p1 span {margin-left:-1000em;} #quickSummary .p2 {position:absolute;left:116px;top:528px;width:88px;height:42px;font-weight:bold;} #preamble {position:absolute;left:20px;top:145px;width:222px;height:298px;overflow:auto;} h3 {background:transparent;font:italic normal 1.4em "Times New Roman",Times,serif;margin:0;border-bottom:1px solid #a2c4a3;color:#603;} p {margin:0 0 6px 0; line-height:1.5em;} div {margin:0;} a {background:transparent;color:#060;} #supportingText {position:absolute;left:268px;top:145px;width:63%;height:297px;padding-right:4px;overflow:auto;} #linkList {position:absolute;left:268px;top:459px;width:63%;} #linkList a {color:#030;} #linkList a.c {text-decoration:none;} #linkList a.c:hover {text-decoration:underline;} #linkList h3 {background:transparent;font-size:1.3em;margin:0.6em 0 0;border-bottom:1px solid #82B084;} #linkList ul {margin:0;padding:0.2em 0;} #linkList li {list-style-type:none;display:inline;background:url(greenarrow.gif) 0% 50% no-repeat;margin:0;padding:0 0 0 1.3em;}/* css Zen Garden submission 080 - 'Zen Pool', by Clinton Barth http://www.516media.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Clinton Barth */ /* Added: February 15th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* common styles ----------------------------------------------- */ body { background: #474747; font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, helvetica, sans-serif; margin: 0px; padding: 0px; color: #000; } /* layout ----------------------------------------------- */ #container { position: relative; background: #9cf; margin: 20px auto; padding: 0px; width: 700px; border: 5px solid #fff; } #quickSummary { position: absolute; top: 205px; left: 0px; width: 166px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } #preamble, #explanation, #participation, #benefits, #requirements { margin: 0px 0 0 192px; width: 480px; background: transparent; } #footer { margin: 25px 0 0 0; background: transparent url(footer.jpg) top left no-repeat; height: 1.5em; text-align: right; border-top: 1px solid #fff; } #linkList { position: absolute; width: 166px; top: 26em; left: 0px; border-top: 1px solid #fff; } /* header ----------------------------------------------- */ #pageHeader { background: url(header.jpg) top left no-repeat; height: 200px; margin: 0; border-bottom: 5px solid #fff; } #pageHeader h1 { display: none; } #pageHeader h2 { display: none; } /* text ----------------------------------------------- */ p { font-size: 12px; padding: 5px 5px 10px 5px; margin: 0; line-height: 16px; } #quickSummary p.p1 { margin: 0; padding: 40px 35px 25px 28px; font-size: 11px; } #quickSummary p.p2 { margin-top: 48em; padding: 30px 30px 20px 28px; font-size: 11px; } /* headings ----------------------------------------------- */ #quickSummary { background: transparent url(h3_quickSummary.gif) top left no-repeat; margin: 0px; } #intro h3 { margin: 10px 0 0 0; padding: 0; width: 480px; height: 35px; border: 1px solid #fff; } #supportingText h3 { margin: 10px 0 0 0; padding: 0; width: 480px; height: 25px; border: 1px solid #fff; } #linkList h3 { height: 25px; margin: 0px 0 0 0; padding: 0px; } h3 span { display: none; } #preamble h3 { background: transparent url(h3_preamble.jpg) no-repeat top left; } #explanation h3 { background: transparent url(h3_explanation.jpg) no-repeat top left; } #participation h3 { background: transparent url(h3_participation.jpg) no-repeat top left; } #benefits h3 { background: transparent url(h3_benefits.jpg) no-repeat top left; } #requirements h3 { background: transparent url(h3_requirements.jpg) no-repeat top left; } #lselect h3 { background: transparent url(h3_lselect.gif) no-repeat top left; margin: 15px 0 0 5px; } #lfavorites h3 { background: transparent url(h3_lfavorites.gif) no-repeat top left; margin: 15px 0 0 5px; } #larchives h3 { background: transparent url(h3_larchives.gif) no-repeat top left; margin: 15px 0 0 5px; } #lresources h3 { background: transparent url(h3_lresources.gif) no-repeat top left; margin: 15px 0 0 5px; } /* lists ----------------------------------------------- */ #linkList ul { font-size: 10px; list-style: none; margin: 2px 0 0 0px; padding: 0 0 0 0; } #linkList ul li { background: transparent; margin: 0; padding: 0 0 0 27px; line-height: 14px; color: #369; } #linkList #lselect { border-bottom: 1px solid #fff; padding-bottom: 25px; } #linkList #lfavorites { border-bottom: 1px solid #fff; padding-bottom: 25px; } #linkList #larchives { border-bottom: 1px solid #fff; padding-bottom: 25px; } #linkList #lresources { border-bottom: 1px solid #fff; padding-bottom: 25px; } #linkList #lselect a:link, #linkList #lselect a:visited { display: block; } #linkList #lselect a.c:link, #linkList #lselect a.c:visited { display:inline; } /* links ----------------------------------------------- */ a, a:link, a:visited { color: #369; text-decoration: underline; font-weight: normal; } a:hover { color: #fff; text-decoration: none; font-weight: normal; } #quickSummary a, #quickSummary a:link, #quickSummary a:visited { font-weight: bold; text-decoration: underline; color: #369; } #quickSummary a:hover { font-weight: bold; text-decoration: none; color: #fff; } #linkList a, #linkList a:link, #linkList a:visited { color: #000; text-decoration: none; } #linkList a:hover { text-decoration: none; color: #fff; } #linkList a.c, #linkList a.c:link, #linkList a.c:visited { color: #369; text-decoration: none; } #linkList a.c:hover { text-decoration: none; color: #fff; } #footer a, #footer a:link, #footer a:visited { text-decoration: none; color: #fff; font-size: 12px; padding: 0 20px 0 0; } #footer a:hover { text-decoration: none; color: #9cf; } /* css Zen Garden submission 081 - 'seashore', by Christine Kirchmeier, http://www.sightdesign.de/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Christine Kirchmeier */ /* Added: February 15th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Tag Definitions */ body { margin: 0; padding: 0; border: 0; text-align: left; background: #FFFFFF url(bg.gif); background-attachment:fixed; font: 11px Verdana, Arial,sans-serif; color: #233A54; } h3 { margin: 0; padding: 0; } acronym { border-bottom: 1px dotted #4C83AE; } a acronym { border: 0; } a:link { font-weight: 900; color: #4C83AE; text-decoration: none; } a:visited { font-weight: 900; color: #999999; text-decoration: none; } a:hover,a:active { font-weight: 900; color: #9B3F17; } /* ID Definitions */ #container { position: relative; top: 0; margin: 0 auto; padding: 0; text-align: left; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; border-bottom: 4px solid #000000; background-color: #EBEBEB; width: 750px; } /************** INTRO *************************/ #intro { background:#EBB692 url(summarybg.gif) repeat-x; width:749px; } #pageHeader { position: absolute; margin: 0; padding: 0px; top: 0px; left: 0px; display: block; width: 366px; height: 474px; background: transparent url(csszengarden.jpg) no-repeat; border-right: 1px dashed #000000; } #pageHeader h1,h2{ display:none; } #quickSummary { position: relative; top: 8px; left:378px; width: 364px; height:140px; margin: 0; padding: 30px; overflow: auto; background: transparent url(quicksumbg.gif) no-repeat; } #quickSummary p.p1 { position: relative; padding: 0px; margin: 0px; width: 300px; text-align: left; font: 11px Verdana, Arial, serif; color: #FFFFFF; line-height: 1.2; } #quickSummary p.p1:first-letter { font: bold 18px Verdana, Arial, sans-serif; color: #2F3F56; } #quickSummary p.p2 { position: relative; padding: 0; margin: 10px 0 0 0; width: 300px; text-align: left; font: 11px Verdana,Arial, sans-serif; color: #FFFFFF; } #quickSummary p.p2:first-letter { font: bold 18px Verdana, Arial, sans-serif; color: #2F3F56; } #preamble { position: absolute; top: 152px; left: 367px; width: 382px; height:300px; padding: 0 0 0 0; margin: 0 0 0 0; display: block; overflow: auto; background: transparent url(divbg.gif) repeat-x; color: #233A54; } #preamble h3 { background: transparent url(roadtoenlightenment.gif) no-repeat; width: 340px; height: 29px; padding:0px; margin: 20px 0px 0px 15px; display: block; } #preamble h3 span { display:none; } #preamble p { position: relative; top: 0; left: 15px; width: 340px; font: 11px/7px Verdana, Arial, sans-serif; line-height: 1.2; color: #233A54; text-align: justify; margin:15px 0 0 0; } /************** MAIN ************/ #supportingText { position: relative; top: 258px; left: 366px; width: 383px; margin: 0; padding: 0; padding-bottom:260px; /* opera fix */ } #supportingText p { font: x-small Verdana, Arial, sans-serif; color: #333333; text-align: justify; } #explanation { position: relative; top: 0; left: 0; width: 382px; padding: 0 0 20px 0; margin: 0; display: block; overflow: auto; background: #EBEBEB url(divbg.gif) repeat-x; color: #233A54; border-left:1px dashed #000000; } #explanation p { position: relative; top: 0; left: 15px; width: 340px; font: 11px/7px Verdana, Arial, sans-serif; line-height: 1.2; color: #233A54; margin:15px 0 0 0; } #explanation h3 { background: transparent url(sowhat.gif) no-repeat; width: 340px; height: 29px; padding:0; margin: 20px 0px 0px 15px; display: block; } #explanation h3 span{ display: none; } #participation { position: relative; top: 0; left: 0; width: 382px; padding: 0 0 20px 0; margin: 0; display: block; overflow: auto; background: #EBEBEB url(divbg.gif) repeat-x; color: #233A54; border-left:1px dashed #000000; } #participation p { position: relative; top: 0; left: 15px; width: 340px; font: 11px/7px Verdana, Arial, sans-serif; line-height: 1.2; color: #233A54; margin:15px 0 0 0; } #participation h3 { background: transparent url(participation.gif) no-repeat; width: 340px; height: 29px; padding:0px; margin: 20px 0px 0px 15px; display: block; } #participation h3 span{ display: none; } #benefits { position: relative; top: 0; left: 0; width: 382px; padding: 0 0 20px 0; margin: 0; display: block; overflow: auto; background: #EBEBEB url(divbg.gif) repeat-x; color: #233A54; border-left:1px dashed #000000; } #benefits h3 { background: transparent url(benefits.gif) no-repeat; width: 340px; height: 29px; padding: 0; margin: 20px 0px 0px 15px; display: block; } #benefits h3 span { display: none; } #benefits p { position: relative; top: 0; left: 15px; width: 340px; font: 11px/7px Verdana, Arial, sans-serif; line-height: 1.2; color: #233A54; margin:15px 0 0 0; } #requirements { position: relative; top: 0; left: 0; width: 382px; padding: 0 0 0 0; height: 520px; margin:0; display: block; overflow: auto; background: #EBEBEB url(divbg.gif) repeat-x; color: #233A54; border-left:1px dashed #000000; } #requirements h3 { background: transparent url(requirements.gif) no-repeat; width: 340px; height: 29px; padding: 0; margin: 20px 0px 0px 15px; display:block; } #requirements h3 span { display: none; } #requirements p { position: relative; margin: 0; padding: 0; top: 0; left: 15px; width: 340px; font: 11px/7px Verdana, Arial, sans-serif; line-height: 1.2; color: #233A54; margin:15px 0 0 0; } #footer { position: absolute; left: -360px; top: 550px; text-align: left; width: 350px; border-top: 1px dashed #FFF; border-bottom: 1px dashed #FFF; padding: 2px; text-align: center; } #footer a { font: 9px Verdana, sans-serif; font-weight: 900; color: #72AAD1; } /***************** Links and Subsections ********************/ #linkList { position: absolute; top: 260px; left: 40px; width: 240px; height: 66%; } #linkList div { padding-bottom: 10px; } #linkList ul { margin: 0 0 0 50px; list-style-type: none; color: #FFFFFF; border: 1px solid #FFFFFF; padding: 3px; } #linkList ul li { background: transparent url(listbg1.jpg); border: 1px solid #FFFFFF; margin-bottom: 2px; margin-top: 2px; padding: 2px; width: 176px; } #linkList ul li:hover { background: transparent url(listbg2.jpg); border: 1px solid #FFFFFF; margin-bottom: 2px; margin-top: 2px; padding: 2px; width: 176px; } #linkList ul li a:link { font-weight: 900; color: #FFFFFF; } #linkList ul li a:visited { font-weight: 900; color: #FFFFFF; } #linkList ul li a:hover, #linkList ul li a:active { font-weight: 900; color: #9B3F17; } #linkList ul li a.c { display: block; margin-bottom: -1px; } #linkList ul li a.c:link { font-weight: 900; color: #4C83AE; } #linkList ul li a.c:visited { font-weight: 900; color: #4C83AE; } #linkList ul li a.c:hover, #linkList ul li a.c:active { font-weight: 900; color: #9B3F17; } #lselect h3 { background: transparent url(select.gif) no-repeat; width: 340px; height: 40px; padding:0; margin: 20px 0 0 40px; display: block; } #larchives h3 { background: transparent url(archives.gif) no-repeat; width: 340px; height: 40px; padding: 0; margin: 20px 0 0 40px; } #lfavorites h3 { background: transparent url(archives.gif) no-repeat; } #lresources h3 { background: transparent url(resources.gif) no-repeat; width: 340px; height: 40px; padding: 0; margin: 20px 0 0 40px; } #lresources h3 span, #larchives h3 span, #lselect h3 span { display: none; } #extraDiv1 { position: relative; width: 300px; height: 89px; margin: 0 auto; left: 0; top: 0; background: transparent url(sub.gif) no-repeat; text-align: center; }/* css Zen Garden submission 082 - 'Miracle Cure' by Joseph Pearson, http://www.make-believe.org */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* Some associated graphics and photos copyright 2004, Joseph Pearson */ /* Added: February 15th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /*======================================================================== CSS Stylesheet - Miracle Cure. A MIRACLE CURE? This Zen Garden is based on old, turn of the century swap cards for advertising health potions. Everything from hair restoratives to laudanum. I got the idea when I stumbled across a hobbyist's collection at: http://www.antiquebottles.com/rl/tc/ ========================================================================*/ /*===================== basic elements =====================*/ body { font: 10.5pt Palatino, Georgia, Times New Roman, serif; color:#554; line-height:1.2em; font-weight:500; text-align:left; margin:0; padding:0; background-color:white; } p { padding:0; margin:0; padding-bottom:0.4em; text-indent:1em; text-align:center; } h3 { margin:0; text-align:center; } a:link, a:visited, a:hover, a:active { font-style:italic; color:black; font-weight:300; text-decoration:none; } acronym{ text-decoration:none; border-bottom:none; font-weight:bold; cursor:help; } /*=================== body elements ===================*/ #container { position:absolute; width:790px; left:50%; margin-left:-395px; } #pageHeader { background:url(banner.jpg) no-repeat top center; width:278px; height:185px; } #pageHeader h1, #pageHeader h2 { display:none; } #quickSummary { background:url(bg_header.gif) repeat-y; height:20px; } #quickSummary p{ display:none; } #preamble { width:600px; background:url(bg_repeater.gif) repeat-y; padding:25px 45px 0px 35px; voice-family: "\"}\""; voice-family:inherit; width:520px; } #preamble h3 { display:none; } #preamble h3 span { visibility:hidden; } #preamble p.p1 { padding-left:30px; padding-right:30px; line-height:1.2em; font-style:italic; font-size:14pt; font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif; } #preamble p.p2 { background:url(preamble.gif) no-repeat top center; padding-top:150px; } #supportingText{ width:600px; background:url(bg_repeater.gif) repeat-y; } #supportingText h3 { text-align:center; padding:0; margin:0; background:no-repeat center; height:25px; } #supportingText h3 span { visibility:hidden; } #explanation { padding-left:35px; padding-right:45px; } #explanation h3 { background-image:url(explanation.gif); } #participation { padding-left:35px; padding-right:45px; } #participation h3 { background-image:url(participation.gif); } #benefits { padding-left:35px; padding-right:45px; } #benefits h3 { background-image:url(benefits.gif); } #requirements { padding-left:35px; padding-right:45px; } #requirements h3 { background-image:url(requirements.gif); } #footer { width:600px; background:url(bg_footer.gif) no-repeat bottom; padding-top:12px; padding-bottom:70px; text-align:center; } #footer a:link, #footer a:visited { font-weight:500; font-size:8pt; } /*========================= linkList elements =========================*/ #linkList { position:absolute; top:300px; left:597px; width:180px; background-image:url(linklist_repeater.gif); } #linkList h3 { padding:10px 0 3px; color:#333; font-weight:500; font-size:10pt; font-style:italic; } #linkList2 { font-size: 8pt; } #linkList ul { margin:0; padding:0; text-align:left; line-height:1em; } #linkList li { margin:0; font-style:italic; } #linkList li a:link { color:black; font-style:normal; } #linkList li a:visited { color:gray; font-style:normal; } #linkList li a:hover, #linkList li a:active { color:#B8860B; } #lselect h3 { padding-top:55px; background:url(linklist_top.gif) no-repeat top center; } #lselect li { padding:5px 8px 5px 10px; margin:0; list-style:none; text-align:left; line-height:1.2em; } #lselect a, #lselect a:link, #lselect a:visited { padding-left:16px; background:url(listimg.gif) no-repeat center left; } #lselect a:hover, #lselect a:active { background-image:url(listimg_hvr.gif); } #lselect a:link.c, #lselect a:visited.c, #lselect a:hover.c, #lselect a:active.c { padding:0; background-image:none; } #lresources{ padding-bottom:55px; background:url(linklist_base.gif) no-repeat bottom center; } #lresources li, #larchives li { text-align:center; margin-left:0; list-style:none; } /*======================= Extra elements =======================*/ #extraDiv1 { position:absolute; font-size:10pt; top:0; left:50%; background:url(deco3.jpg) no-repeat; width:400px; height:160px; } #extraDiv2 { position:absolute; top:62em; left:50%; margin-left:161px; background:url(deco2.gif) no-repeat; width:175px; height:236px; }/* css Zen Garden submission 083 - 'Springtime', by BoŽr Attila */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, BoŽr Attila */ /* Added: March 4th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 8pt/16pt georgia; color: #555753; background: #F5F7EC url(bg.jpg); margin: 0px; text-align: center; background-repeat: repeat-x; } p { font: 8pt/14pt verdana; margin-top: 0px; text-align: left; } h3 { font: italic normal 12pt georgia; letter-spacing: 1px; margin-bottom: 10px; color: #7D775C; text-align: left; } a:link { font: 11px verdana; font-weight: bold; text-decoration: underline; color: #8F9E28; } a:visited { font-weight: bold; text-decoration: underline; color: #C0C0C0; } a:hover, a:active { text-decoration: underline; color: #B8C271; } /* specific divs */ #container { background: url(footbg.jpg) no-repeat bottom left; width:650px; padding-bottom:80px; position:relative; margin: 0 auto; } #intro { min-width: 470px; } #pageHeader { margin-bottom: 20px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: url(head.gif) no-repeat top left; width: 678px; height: 213px; margin-top:0px; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(flwr.gif) no-repeat top left; width: 84px; height: 261px; float: right; margin-top:0px; position:absolute; top:163px; left:647px; } #pageHeader h2 span { display:none; } #quickSummary { background: transparent url(green.gif) no-repeat top left; clear:both; overflow:auto; width: 147px; height:201px; padding-top:10px; padding-left:15px; padding-right:15px; position:absolute; top:213px; left:0px; } #quickSummary p { font: 8pt/12pt verdana; color:#EFF2E5; text-align:left; } #quickSummary a { font: bold 8pt/12pt verdana; color:#EFF2E5; text-align:left; text-decoration:underline; } #quickSummary a:hover { font: bold 8pt/12pt verdana; color:#EFF2E5; text-align:left; text-decoration:none; } #preamble { padding-right:40px; padding-top:20px; padding-left:30px; overflow:auto; background: transparent url(whitebg.gif) no-repeat 0 0 !important; position:absolute; top:72px; left:177px; height:333px; width:400px; } #preamble h3 { background: transparent url(pretext.gif) no-repeat top left; font: 0pt/14pt verdana; color:#FFFFFF; text-align:right; height:40px; } #explanation h3, #benefits h3, #participation h3, #requirements h3 { display:none } #supportingText { background: transparent url(whitebg2.gif) repeat-y top left; float:left; padding-left: 10px; padding-right: 30px; padding-top:230px; padding-bottom:0px; margin-bottom: 0px; width:607px; } #explanation { background: transparent url(whatistext.gif) no-repeat top left; float:right; width:410px; padding-top:50px; padding-bottom:30px; } #participation { background: transparent url(parttext.gif) no-repeat top left; float:right; width:410px; padding-top:50px; padding-bottom:30px; } #benefits { background: transparent url(beneftxt.gif) no-repeat top left; float:right; padding-top:50px; padding-bottom:30px; width:580px; } #requirements { background: transparent url(reqtext.gif) no-repeat top left; float:right; padding-top:50px; padding-bottom:30px; width:580px; } #footer { background: transparent url(notext.gif) no-repeat top left; left:0px; text-align: center; padding-top:30px; padding-bottom:0px; float:right; width:580px; } #footer a:link, #footer a:visited { margin-left: 20px; } #linkList { background: transparent url(greenbg.gif) repeat-y top left; float:left; position: absolute; top: 424px; left: 0px; margin: 0px; width: 178px; text-align:left; padding: 0px; } #linkList2 { background: transparent url(fade.gif) no-repeat bottom left; font: 10px verdana, sans-serif; margin:0px; padding: 0px; padding-bottom:100px; width: 178px; float:left; } #linkList li { list-style-type: none; background:#C1C99A; padding: 8px; margin-bottom: 1px; margin-left:-39px; width:160px; } #linkList li:hover { background: #A6AE72; } #linkList li a { display:block; color:#6E7746; font: bold 11px verdana; text-decoration:underline; } #linkList li a:hover { display:block; color:#8F9E28; font: bold 11px verdana; text-decoration:underline; } #linkList li a.c { display:inline; color:#FFFFFF; font: 11px verdana; } #linkList li a.c:hover { display:inline; color:#6E7746; font: 11px verdana; } #lselect { background: transparent url(seltxt.gif) no-repeat top left; padding-top:30px; padding-bottom:0px; margin-bottom:-10px; float:left; } #larchives { background: transparent url(archtxt.gif) no-repeat top left; padding-top:30px; padding-bottom:0px; margin-bottom:-10px; float:left; } #lresources { background: transparent url(restxt.gif) no-repeat top left; padding-top:30px; padding-bottom:0px; margin-bottom:-10px; float:left; } #lselect h3 span, #larchives h3 span, #lresources h3 span {display:none;} #lselect h3, #larchives h3, #lresources h3 {display:none;} #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none;}/* css Zen Garden submission 084 - 'Start Listening!', by Liz Lubowitz, http://hiptobeasquare.com */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Liz Lubowitz */ /* Added: March 4th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* 1950s clip art courtesy of Tack-O-Rama http://anzwers.org/free/tackorama/index.html */ /* Background tile by Squidfingers http://squidfingers.com/patterns/ */ /* Fonts used are Cast Iron (source unkown) and Hot Burrito #3 by Dinc Type http://www.girlswhowearglasses.com */ /* Photoshop brushes by Anti-Brush http://www.jennithepirate.com/brushes/ */ /* BASIC STUFF */ body {margin:0px;padding:0px;font:0.7em verdana, tahoma, sans-serif;line-height:1.3em;color:#000000;background:#3D5464 url(bg.gif);} p {margin:0px;padding-top:2px;padding-bottom:5px;text-align:justify;} h3 {font:bold 0.8em verdana, tahoma, sans-serif;text-transform:uppercase;margin:0px;padding:0px;color:#000000;} a {color:#000000;font-weight:bold;text-decoration:none;} a:hover {color:#D0701A;font-weight:bold;text-decoration:none;text-decoration:none;} acronym {text-decoration:underline;border:0px;} /* DIVS THAT CONTAIN OTHER DIVS */ #container {z-index:0;position:absolute;left:0px;top:0px;margin:0px;padding:0px;width:725px;background:url(containerbg.gif) repeat-y top left;} #intro {width:560px;float:right;} #supportingText {width:560px;float:right;} #linkList {z-index:1;position:absolute;left:0px;top:320px;width:155px;font-size:0.8em;padding-left:10px;float:left;} /* STUFF CONTAINED WITHIN THE INTRO DIV */ #pageHeader {padding-top:0px;} #pageHeader h1 {width:355px;height:100px;} #pageHeader h1 span {display:none;} #pageHeader h2 {width:355px;height:120px;} #pageHeader h2 span {display:none;} #quickSummary {margin-left:100px;text-align:right;margin-right:10px;margin-top:5px;} #quickSummary p {text-align:right;} #preamble {padding:10px;padding-top:0px;margin:0px;clear:left;} #preamble h3 {background:url(enlightenment.gif) top left no-repeat;width:278px;height:36px;} #preamble h3 span {display:none;} /* STUFF CONTAINED WITHIN THE STUPPORTING TEXT DIV */ #explanation {padding:10px;} #explanation h3 {background:url(about.gif) top left no-repeat;width:278px;height:36px;margin-top:5px;} #explanation h3 span {display:none;} #participation {padding:10px;} #participation h3 {background:url(participation.gif) top left no-repeat;width:278px;height:36px;margin-top:5px;} #participation h3 span {display:none;} #benefits {padding:10px;} #benefits h3 {background:url(benefits.gif) top left no-repeat;width:278px;height:36px;margin-top:5px;} #benefits h3 span {display:none;} #requirements {padding:10px;} #requirements h3 {background:url(requirements.gif) top left no-repeat;width:278px;height:36px;margin-top:5px;} #requirements h3 span {display:none;} #footer {text-align:right;text-transform:uppercase;font-size:0.8em;line-height:1em;border-top:5px solid #000000;margin:0px;padding:10px;} /* STUFF CONTAINED WITHIN THE LINKLIST DIV */ #linkList h3.select {background:url(h3.gif) no-repeat bottom left;width:139px;height:39px;} #linkList h3.select span {display:none} #linkList h3.favorites {background:url(h4.gif) no-repeat bottom left;width:139px;height:39px;} #linkList h3.favorites span {display:none} #linkList h3.archives {background:url(h5.gif) no-repeat bottom left;width:139px;height:39px;} #linkList h3.archives span {display:none} #linkList h3.resources {background:url(h6.gif) no-repeat bottom left;width:139px;height:39px;} #linkList h3.resources span {display:none} #linkList ul {margin:0px;padding:0px;} #linkList li {list-style-type:none;display:block;padding:1px;margin:0px;} #linkList li a {color:#000000;} #linkList li a:hover {color:#D0701A;} #lselect a {display:block;} #lselect li a.c {display: inline;} #lselect li {margin-bottom:5px;} /* EXTRA STUFF LIKE IMAGES */ #extraDiv1 {z-index:1;position:absolute;left:0px;top:0px;width:168px;height:370px;background:url(notlistening1.gif) no-repeat top left;} #extraDiv2 {z-index:2;position:absolute;left:168px;top:0px;width:97px;height:312px;background:url(notlistening2.gif) no-repeat top left;} #extraDiv3 {z-index:3;position:absolute;left:265px;top:0px;width:100px;height:197px;background:url(notlistening3.gif) no-repeat top left;} #extraDiv4 {z-index:4;position:absolute;left:365px;top:0px;width:355px;height:133px;background:url(title1.gif) no-repeat top left;} #extraDiv5 {z-index:5;position:absolute;left:365px;top:133px;width:355px;height:118px;background:url(title2.gif) no-repeat top left;}/* css Zen Garden submission 085 - 'Oceans Apart', by Ryan Sims, http://www.justwatchthesky.com */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Ryan Sims */ /* Added: March 4th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Basic Elements */ body { font: 11px trebuchet ms, arial, helvetica, sans-serif; color: #9F927F; background: #E8E0D5 url(flora.gif) repeat-y center; margin: 0px; } p { font: 11px trebuchet ms, arial, helvetica, sans-serif; margin-top: 0px; text-align: left; } p.p5 { font-size: 9px; padding-top: 15px; } a:link { background: #EBEEF2; padding: 0 2px 0 2px; text-decoration: none; color: #4F6B8B; } a:visited { background: #EBEEF2; padding: 0 2px 0 2px; text-decoration: none; color: #4F6B8B; } a:hover, a:active { background: #F1EFE9; padding: 0 2px 0 2px; text-decoration: none; color: #384A5F; } h1, h2, h3 span {display:none} /* specific divs */ #container { display: block; position: relative; border: 11px #B9AA94 solid; margin: 0px; margin-left:auto; margin-right:auto; width: 527px; voice-family: "\"}\""; voice-family:inherit; width: 505px; } #intro { background: url(zensky.jpg) no-repeat top left; padding-top: 340px; } #pageHeader { background: url(cssdemo.gif) no-repeat top left; height: 67px; } #quickSummary { position: relative; left: 199px; padding: 14px 14px 0 14px; } #quickSummary p.p1 { display: none } #quickSummary p.p2 { font-size: 9px; } #preamble, #supportingText { position: relative; left: 199px; width: 306px; text-align: left; padding: 0 14px 0 14px; margin-bottom: 10px; voice-family: "\"}\""; voice-family:inherit; width: 278px; } #footer { text-align: left; padding-top: 15px; } #footer a:link, #footer a:visited { font-size: 9px; margin-right: 15px; } #linkList { position: absolute; top: 407px; } #linkList2 { font: 9px trebuchet ms, arial, helvetica, sans-serif; color: #9F927F; width: 188px; } #linkList h3 { margin: 0; width: 188px; height: 42px; } #linkList h3.select { background: transparent url(selectdesign.gif) top left no-repeat; } #linkList h3.archives { background: transparent url(archives.gif) top left no-repeat; margin-top: 15px; } #linkList h3.resources { background: transparent url(resources.gif) top left no-repeat; margin-top: 15px; } #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { height: 48px; list-style-type: none; background: transparent url(liBG.gif) repeat-x top left; display: block; padding-left: 14px; } #linkList li a { display: block; width: auto; color: #4F6B8B; padding: 9px 0 0 0; background: none; color: #384A5F; font-size: 11px; } #linkList li a:hover { color: #746E50; } #linkList li a.c:link, #linkList li a.c:visited { color: #929B70; font-weight: normal; display: inline; font-size: 9px; padding: 0; } #linkList li a.c:hover { color: #746E50; } #linkList #larchives li, #linkList #lresources li { height: 25px; background: #F3F1EC; list-style-type: none; display: block; padding-left: 14px; border-bottom: 1px #DFDCD1 solid; } #linkList #larchives li a, #linkList #lresources li a { padding-top: 5px; padding-bottom: 3px; } /* header graphics */ #preamble { background:transparent url(road.gif) no-repeat top left; padding-top:30px; } #explanation { background:transparent url(allabout.gif) no-repeat top left; padding-top:30px; } #participation { background:transparent url(participation.gif) no-repeat top left; padding-top:30px; } #benefits { background:transparent url(benefits.gif) no-repeat top left; padding-top:30px; } #requirements { background:transparent url(requirements.gif) no-repeat top left; padding-top:30px; } /* extra divs */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none}/* css Zen Garden submission 086 - 'RedFrog', by Bernd Willenberg, http://www.willenberg.biz */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Bernd Willenberg */ /* Added: March 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* DISCLAIMER */ /*This CSS was tested in windows with IE 6.0, Netscape 7.02, Opera 7.11j, Mozilla Firebird 0.7 and Mozilla Firefox 0.8 - it works. */ /* ------------------------------------------------------------------------------------- */ /* common */ body { font: 12px/14px Arial; color: #612A20; background: #FFCA7F url(bodybg.gif) fixed; margin: 0; padding: 0; } a:link, a:visited { color: #612A20; font-weight: bold; text-decoration: none; } a:hover, a:active { color: #BD5F4E; text-decoration: underline; } acronym { font-style: italic; cursor: help; border-bottom: 0; } /* ------------------------------------------------------------------------------------- */ /* content-area */ #container { position: absolute; top: 0; left: 50%; width: 690px; margin: 0 0 0 -345px; padding: 0; z-index: 1; } #intro { width: 690px; margin: 0; padding: 0; background: url(head.jpg) no-repeat; } #supportingText { width: 690px; margin: 0; padding: 0; background: url(bg.jpg) repeat-y; } #extraDiv1 { position: absolute; top: 0; left: 50%; width: 690px; height: 1100px; margin: 0 0 0 -345px; padding: 0; background: url(bg.jpg) repeat-y; } /* ------------------------------------------------------------------------------------- */ /* hide headlines for image replacement */ #pageHeader { display: none; } /* ------------------------------------------------------------------------------------- */ /* A demonstration of ... */ #quickSummary { padding: 0; margin: 0; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { position: absolute; top: 140px; left: 235px; width: 400px; font: bold 12px Arial; color: #A25344; margin: 0; padding: 0; } #quickSummary a:link, #quickSummary a:visited { color: #64352D; } #quickSummary a:hover, #quickSummary a:active { color: #64352D; } /* ------------------------------------------------------------------------------------- */ /* content */ #preamble, #explanation, #participation, #benefits, #requirements { width: 690px; margin: 0; padding: 0; } #preamble { padding-top: 220px; } #requirements { padding-bottom: 100px; background: url(foot.gif) no-repeat bottom left; } #preamble h3 { font: bold 14px Arial; text-transform: uppercase; letter-spacing: 2px; color: #FFF; margin: 0 60px 20px 235px; padding: 5px 10px; background: #D4C5C2; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { font: bold 14px Arial; text-transform: uppercase; letter-spacing: 2px; color: #FFF; height: 82px; margin: 0; padding: 60px 0 0 235px; background: url(paragraph.gif) no-repeat; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin: 0; padding: 0 60px 15px 235px; } #explanation p.p1, #participation p.p1, #benefits p.p1, #requirements p.p1 { margin-top: -46px; } /* ------------------------------------------------------------------------------------- */ /* quicklinks */ #footer { position: absolute; top: 198px; left: 50%; width: 185px; font: bold 10px Arial; text-align: center; color: #FFC46F; margin: 0 0 0 -345px; padding: 0; } #footer a:link, #footer a:visited { color: #FFE0B4; } #footer a:hover, #footer a:active { color: #FFF; } /* ------------------------------------------------------------------------------------- */ /* lists */ #linkList { position: absolute; top: 250px; left: 13px; width: 140px; margin: 0; padding: 0; } #linkList a:link, #linkList a:visited { color: #FFF2E0; } #linkList a:hover, #linkList a:active { color: #FFF; } #lresources, #larchives, #lselect { margin: 0 0 25px 0; padding: 0; } #larchives h3, #lresources h3, #lselect h3 { font: bold 11px Verdana; text-transform: uppercase; text-align: center; color: #FFF; margin: 0 0 10px 0; padding: 3px; background: #AF908B; } #larchives ul, #lresources ul, #lselect ul { margin: 0; padding: 0; } #lselect li { font: 12px/14px; color: #612A20; margin: 0; padding: 0px 0px 8px 13px; list-style: none; background: url(dot.gif) no-repeat 0px 4px; } #lselect li a:link, #lselect li a:visited { display: block; } #linkList li a.c:link, #linkList li a.c:visited { display: inline; } #larchives li, #lresources li { font: 12px/14px; color: #612A20; margin: 0 0 5px 0; padding: 0; list-style: none; }/* css Zen Garden submission 087 - 'Maya', by Bernd Willenberg, http://www.willenberg.biz */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Bernd Willenberg */ /* Added: March 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* DISCLAIMER */ /*This CSS was tested in windows with IE 6.0, Netscape 7.02, Opera 7.11j, Mozilla Firebird 0.7 and Mozilla Firefox 0.8 - it works. */ /* ------------------------------------------------------------------------------------- */ /* common */ body { background: #686868 url(bg.gif) repeat-y; margin: 0; padding: 0; } a:link, a:visited { color: #FFF; font-weight: bold; text-decoration: none; } a:hover, a:active { color: #FFB855; text-decoration: underline; } acronym { border-bottom: 0px; cursor: help; font-weight: bold; } /* ------------------------------------------------------------------------------------- */ /* content-area */ #container { position: absolute; top: 0; left: 0; width: 800px; margin: 0; padding: 0; background: url(bottom.gif) no-repeat bottom right; z-index: 1; } #intro { width:540px; float:right; margin: 162px 0 0 0; padding: 0; } #supportingText { width:540px; float:right; margin: 0; padding: 0; } /* ------------------------------------------------------------------------------------- */ /* hide headlines for image replacement */ #pageHeader { display: none; } /* ------------------------------------------------------------------------------------- */ /* title: CSS Zengarden - the beauty of ... */ #extraDiv1 { position: absolute; top: 0; left: 265px; width: 499px; height: 158px; margin: 0; padding: 0; background: url(top.jpg) no-repeat; } /* ------------------------------------------------------------------------------------- */ /* maya-image */ #extraDiv2 { position: absolute; top: 0; left: 0; width: 266px; height: 413px; margin: 0; padding: 0; background: url(left.jpg) no-repeat; } /* ------------------------------------------------------------------------------------- */ /* text-area: A demonstration of ... */ #quickSummary { position: absolute; top: 196px; left: 525px; font: 10px/13px Verdana; color: #FFF; text-align: right; width: 180px; margin: 0; padding: 13px 17px 5px; border-right: 3px solid #F89B17; background-color: #827869; } #quickSummary p { margin: 0 0 10px; padding: 0; } #quickSummary p.p2 { padding: 0 0 0 50px; } #quickSummary a:link, #quickSummary a:visited { color: #F89B17; } #quickSummary a:hover, #quickSummary a:active { color: #FFF; } /* ------------------------------------------------------------------------------------- */ /* content */ #preamble, #explanation, #participation, #benefits, #requirements { font: 11px/14px Verdana; color: #FFE0B4; width: 470px; margin: 0 0 30px; padding: 0; } #preamble { background: url(headline1.gif) no-repeat; } #explanation { background: url(headline2.gif) no-repeat; } #participation { background: url(headline3.gif) no-repeat; } #benefits { background: url(headline4.gif) no-repeat; } #requirements { background: url(headline5.gif) no-repeat; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { font: bold 10px/10px Verdana; visibility: hidden; margin: 0 0 20px 0; padding: 0; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin: 0; padding: 0 0 15px 0; } #preamble p.p1, #preamble p.p2 { width: 235px; } #preamble a:link, #preamble a:visited, #supportingText a:link, #supportingText a:visited { color: #F89B17; font-weight: normal; } #preamble a:hover, #preamble a:active, #supportingText a:hover, #supportingText a:active { color: #FFF; } /* ------------------------------------------------------------------------------------- */ /* footer-linklist */ #footer { font: bold 12px Verdana ; width: 280px; text-align: center; background: #555655; margin: 70px 0 50px 57px; padding: 2px 10px 2px 10px; } #footer a:link, #footer a:visited { color: #FFE0B4; font-weight: bold; } #footer a:hover, #footer a:active { color: #FFF; text-decoration: none; } /* ------------------------------------------------------------------------------------- */ /* lists */ #linkList { position: absolute; top: 425px; left: 0; margin: 0; padding: 0; } #lselect, #larchives, #lresources { margin: 0 0 30px 60px; padding: 0; } #lselect { background: url(subheadl1.gif) no-repeat; } #larchives { background: url(subheadl2.gif) no-repeat ; } #lresources { background: url(subheadl3.gif) no-repeat; } #lselect h3, #larchives h3, #lresources h3 { font: bold 10px/10px Verdana; visibility: hidden; margin: 0 0 15px 0; padding: 0; } #lselect ul, #larchives ul, #lresources ul { width: 150px; margin: 0; padding: 0; } #lselect li { font: 10px/14px Verdana; color: #FFE0B4; margin: 0 0 6px 0; padding: 0 0 0 15px; list-style: none; background: url(dot.gif) no-repeat 0 4px; } #larchives li, #lresources li { font: 10px/14px Verdana; margin: 0 0 6px 0; padding: 0; color: #FFF; list-style: none; } #lselect li a:link, #lselect li a:visited { display: block; } #linkList li a.c:link, #linkList li a.c:visited { display: inline; }/* css Zen Garden submission 088 - 'Tulipe', by Eric Sheperd, http://www.arkitrave.com/log */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Eric Sheperd */ /* Added: March 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /********************* TYPOGRAPHY *********************/ body { font-family: tahoma, arial, helvetica, sans-serif; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body { font-size: small; } #quickSummary { color: #665; font-weight: bold; font-size: .8em; } #quickSummary p { padding: 0 15px; } acronym { cursor: help; } /********************* LINKS *********************/ a { white-space: nowrap; } a:link { font-weight: bold; text-decoration: none; border: 1px solid #f2f4ee; color: #776; padding: 0 1px; } a:visited { font-weight: bold; text-decoration: none; color: #998; } a:hover { background: url(link_background.gif) no-repeat; border: 1px solid #776; padding: 0 1px; } a:active { font-weight: bold; text-decoration: none; } /********************* ACCESSYPOO *********************/ span.accesskey { font-weight: bold; text-decoration: underline; } /************************** DO THE DIV - LAYOUT **************************/ /*basics*/ body { background: #F2F4EE url(background.gif) repeat fixed; /*thanks to squidfingers for the background image*/ margin: 0; padding: 0; } #container { position: relative; top: 0; left: 0; margin: 0; padding: 0; } /*intro stuff*/ #intro { position: relative; top: 0; left: 0; margin: 0; padding: 0; z-index: 1000; } #pageHeader { position: relative; top: 0; left: 0; margin: 0; padding: 0; background: #fff url(headerBack.jpg) repeat-x top left; /*this is the horizontal line bk*/ height: 126px; width: 2100px; } #pageHeader h1 { /*contains the zen text and flowery images*/ margin: 0; background: transparent url(header.jpg) no-repeat; /*thanks to dubstastic for brushes*/ height: 126px; } #pageHeader h1 span { /*get the text out of the way*/ display: none; } #pageHeader h2 { /*this text will be integrated into the pictoral header*/ display: none; } #quickSummary { /*runs along left side, includes flower and below*/ position: absolute; top: 126px; left: 0; background: transparent url(flower.jpg) no-repeat top left; /*photo (c)2004 Eric Shepherd*/ width: 352px; padding-top: 301px; z-index: 500; } /*graphic backgrounds are applied to head, paragraphs, and last paragraph*/ #preamble { /*first of boxes, but different in document tree so separate css*/ position: absolute; background: #f2f4ee; z-index: 1000; width: 257px; /*all text boxes are 257px*/ top: 126px; left: 370px; padding: 0; border: solid #998; /*only for IE, overridden later*/ border-width: 0px 1px 1px 1px; /*no top border*/ } html>head:first-child+body #preamble { /*gets out of the way for IE and opera 6*/ background: transparent url(sectionBack_head.png) no-repeat top right; /*TOP bk w.drop shadow*/ border: 0; /*need to override border in place*/ } #preamble h3 { background: transparent url(title_preamble.jpg) no-repeat; /*text with faded flower gradient*/ margin: 0; padding: 0; height: 86px; } #preamble h3 span { display: none; /*get text out of the way*/ } #preamble p { margin: 0; padding: 5px 20px; /*cant put background here or IE will see it*/ } html>head:first-child+body #preamble p { /*only seen by smart browsers that can do png transp*/ background: transparent url(sectionBack_main.png) repeat-y; /*thin repeated background*/ } #preamble p.p3 { margin: 0; padding: 5px 20px 25px 20px; } html>head:first-child+body #preamble p.p3 { /*selects last paragraph*/ background: transparent url(sectionBack_foot.png) no-repeat bottom right; /*footer background*/ } /*next four text boxes are under #supportingtext div*/ #supportingText { position: relative; top: 0; left: 0; margin: 0; padding: 0; background: #fff url(bodyBack.jpg) repeat-x; /*use it to get the faded pattern background positioned - again thanks to squidfingers for pattern*/ height: 301px; width: 2100px; /*same width as header*/ } #explanation, #participation, #benefits, #requirements { border: solid #998; /*border only for IE, will be overridden*/ border-width: 0 1px 1px 1px; background: #f2f4ee; position: absolute; z-index: 1000; width: 257px; top: 0; padding: 0; } html>head:first-child+body #explanation, html>head:first-child+body #participation, html>head:first-child+body #benefits, html>head:first-child+body #requirements { background: transparent url(sectionBack_head.png) no-repeat top right; /*override IE values*/ border: 0; } #explanation { left: 680px; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 0; padding: 0; height: 86px; /*headers need defined height because of image replacement*/ } #explanation h3 { background: transparent url(title_about.jpg) no-repeat; } #explanation h3 span, #participation h3 span, #requirements h3 span, #benefits h3 span { display: none; /*for some reason the negative margin didn't work here, so we will use this*/ } #explanation p, #participation p, #benefits p, #requirements p { margin: 0; padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/ } html>head:first-child+body #explanation p, html>head:first-child+body #participation p, html>head:first-child+body #benefits p, html>head:first-child+body #requirements p { background: transparent url(sectionBack_main.png) repeat-y; /*middle background*/ } #explanation p.p2, #participation p.p4, #benefits p.p1, #requirements p.p5 { margin: 0; padding: 5px 20px 25px 20px; } html>head:first-child+body #explanation p.p2, html>head:first-child+body #participation p.p4, html>head:first-child+body #benefits p.p1, html>head:first-child+body #requirements p.p5 { background: transparent url(sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/ } #participation { /*see above for comments*/ left: 980px; } #participation h3 { background: transparent url(title_participation.jpg) no-repeat; } #benefits { left: 1280px; } #benefits h3 { background: transparent url(title_benefits.jpg) no-repeat; } #requirements { left: 1580px; } #requirements h3 { background: transparent url(title_requirements.jpg) no-repeat; } /*footer stuff - footer will be on the side, floated, and consist of buttons for MOSE, boxes for IE*/ #footer { position: absolute; background: transparent; z-index: 5000; width: 43px; /*make sure floats go to next line*/ top: 0px; left: 1880px; padding: 0; margin-top: 5px; } div#footer a { display: block; /*for text positioning and link activation*/ background: url(link_background.gif) no-repeat; /*standard link bk for all just for IE*/ border: 1px solid #998; font-weight: normal; text-align: center; } html>head:first-child+body div#footer a { /*buttons only for MOSE*/ border: 0; padding-top: 15px; background: url(footer_back.png) no-repeat; height: 26px; } html>head:first-child+body div#footer a:hover { /*i'm lazy, i just used 2 images instead of pixy method*/ background: url(footer_back_hover.png) no-repeat; border: 0; } /***************************** link list...here we go... *****************************/ #linkList a:link, #linkList a:visited, #linkList a:hover, #linkList a:active { border: 0; padding: 0; margin: 0; } #linkList2 { position: absolute; top: 65px; left: 750px; z-index: 2000; height: 150px; margin: 0; padding: 0; width: 1350px; } #linkList2 a { border: 0; } #linkList2 #lselect li > a:first-child { display: block; } #linkList2 ul > li:last-child { border-bottom: 0; } #linkList2 { list-style-type: none; font-size: .7em; } #linkList2 a { white-space: normal; } #linkList2 a:first-child { font-size: 1.3em; } #linkList2 li:hover { background: url(link_background.gif) no-repeat; } #linkList2 li a:hover { text-decoration: underline; border: 0; background: transparent; } #linkList2 li { padding: 0 3px; border: 0; } html > body #linkList2 li { margin: 0; padding: 3px; border-bottom: 1px solid #887; } #lselect, #lfavorites, #larchives, #lresources { float: left; } #lselect h3, #lfavorites h3, #larchives h3, #lresources h3 { padding-top: 25px; float: left; display: block; height: 150px; } #lselect h3 span, #lfavorites h3 span, #larchives h3 span, #lresources h3 span { padding: 5px; position: relative; margin-bottom: 60px; top: -60px; color: #776; font-size: .5em; background: transparent url(drop_ieBack.gif) no-repeat right; border: 1px solid #776; padding-right: 25px; } #lselect ul, #lfavorites ul, #larchives ul, #lresources ul { float: left; position: relative; top: -45px; z-index: 3000; left: -15px; } html > body #lselect h3 { background: transparent url(drop_lselect.png) no-repeat; height: 36px; width: 153px; padding-top: 0; float: none; } html > body #lselect h3 span { display: none; } html > body #lselect ul { display: none; position: relative; top: 0; left: 0; } html > body #lselect:hover ul { float: none; display: block; background: url(drop_background.png) repeat; border: 1px solid #776; margin: 5px; padding: 5px; width: 128px; list-style-type: none; } html > body #lselect li { float: none; } #lselect ul { list-style-type: none; display: block; } html > body #lfavorites h3 { background: transparent url(drop_favorites.png) no-repeat; height: 36px; width: 153px; padding-top: 0; float: none; } html > body #lfavorites h3 span { display: none; } html > body #lfavorites ul { display: none; position: relative; top: 0; left: 0; } html > body #lfavorites:hover ul { float: none; display: block; background: url(drop_background.png) repeat; border: 1px solid #776; margin: 5px; padding: 5px; width: 128px; list-style-type: none; } html > body #lfavorites li { float: none; } #lfavorites ul { list-style-type: none; display: block; } html > body #larchives h3 { background: transparent url(drop_archives.png) no-repeat; height: 36px; width: 153px; padding-top: 0; float: none; } html > body #larchives h3 span { display: none; } html > body #larchives ul { display: none; position: relative; top: 0; left: 0; } html > body #larchives:hover ul { float: none; display: block; background: url(drop_background.png) repeat; border: 1px solid #776; margin: 5px; padding: 5px; width: 128px; list-style-type: none; } html > body #larchives li { float: none; display: block; } #larchives ul { list-style-type: none; } html > body #lresources h3 { background: transparent url(drop_resources.png) no-repeat; height: 36px; width: 153px; padding-top: 0; float: none; } html > body #lresources h3 span { display: none; } #lresources ul { display: block; } html > body #lresources ul { display: none; position: relative; top: 0; left: 0; } html > body #lresources:hover ul { float: none; display: block; background: url(drop_background.png) repeat; border: 1px solid #776; margin: 5px; padding: 5px; width: 128px; list-style-type: none; } html > body #lresources li { float: none; } #lresources ul { list-style-type: none; } #extraDiv1 { display: block; background: url(noStandards.gif) fixed no-repeat; position: absolute; top: 542px; left: 22px; width: 330px; height: 100px; } #extraDiv2 { } html>body div#extraDiv1 { display: none; } /*html > body #extraDiv1 span { display: none; } /* thank you very much. try the filet.*//* css Zen Garden submission 089 - 'Dark Industrial', by Ray Henry, http://www.reh3.com */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Ray Henry */ /* Added: March 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* This file based on 'GearWorx99' by Ray Henry */ /* http://www.reh3.com/ */ /* basic elements */ body { margin:0; padding:0; background:#273340 url(main_bg.jpg) no-repeat bottom fixed; text-align:center; width:100%; height:100%; font-family:verdana, arial, "sans-serif"; } h1, h2, h3, h4, h5 { padding:0; margin:0; } ul { margin:0; padding:0; } acronym { cursor:help; } acronym:hover { border-bottom:2px solid #919AA4; } /* structural elements */ #container { background:url(container_bg.gif) repeat-y; position:relative; margin:0 auto; padding:0 3px; width:600px; text-align:left; voice-family: "\"}\""; voice-family: inherit; width:594px; } #intro { padding:0; } #pageHeader { background:url(intro_bg.jpg) no-repeat top left; height:132px; } #pageHeader:hover { background-position: 0 -132px; } #supportingText { position:relative; left:0; width:359px; } #linkList { position:absolute; top:169px; right:2px; margin:0 0 0 359px; background:url(linkList_bg.gif) no-repeat top right; } /* intro */ #pageHeader h1, #pageHeader h2, #quickSummary p.p1 {display:none;} #preamble { position:relative; left:0; width:304px; padding:0 45px 0 0; margin:0; font-size:11px; } #preamble h3 { background:url(preamble_title.gif) no-repeat top left; margin:10px 0 0 0; text-indent:-5000px; height:22px; } #preamble p { color:#919AA4; margin:10px 0 15px 10px; padding:0; line-height:14px; } #quickSummary { position:absolute; top:132px; right:2px; background:url(quickSum_bg.gif) no-repeat top right; width:292px; height:47px; font-size:11px; color:#92A0AB; text-align:right; padding:0; margin:0; } #quickSummary p { margin:10px 20px 0 0; } #quickSummary a:link, #quickSummary a:active, #quickSummary a:visited { color:#92A0AB; text-decoration:none; border-bottom:2px solid #506067; } #quickSummary a:hover { color:#b4c2cd; text-decoration:none; border-bottom:2px solid #708089; } /* supportingText */ #supportingText p { color:#919AA4; margin:10px 0 15px 10px; padding:0; line-height:14px; font-size:11px; } #supportingText h3 { margin:10px 0 0 0; text-indent:-5000px; height:22px; } #explanation, #participation, #benefits, #requirements { padding:0 45px 0 0; } #explanation h3 { background:url(explain_title.gif) no-repeat top left; } #participation h3 { background:url(part_title.gif) no-repeat top left; } #benefits h3 { background:url(benefits_title.gif) no-repeat top left; } #requirements h3 { background:url(req_title.gif) no-repeat top left; } #supportingText a:link, #supportingText a:active, #supportingText a:visited { color:#919AA4; font-weight:bold; } #supportingText a:hover { color:#b3bcc6; } #explanation:hover, #participation:hover, #benefits:hover, #requirements:hover, #preamble:hover { background:url(contentHover_bg.gif) no-repeat 0 20px; } #footer { text-align:center; border-top:1px solid #68717A; padding:10px; background:#101C28; margin:0 2px 0 0; font-size:10px; font-weight:normal; } #footer a:link, #footer a:active, #footer a:visited { color:#5D6772; } #footer a:hover { color:#919AA4; } /* linkList */ #linkList ul { list-style:none; } #lselect { margin:10px 0 0 0; font-size:10px; } #lselect li { padding:7px 0 7px 15px; color:#909FB1; } #lselect a:link, #lselect a:active, #lselect a:visited { color:#909FB1; font-weight:bold; } #lselect a:hover { color:#f50; } #lselect a.c { font-weight:normal; text-decoration:none; } #lselect h3 { background:url(selectDesign_title.gif) no-repeat top left; height:38px; text-indent:-5000px; width:237px; } #larchives h3 { background:url(larchives_title.gif) no-repeat top left; height:29px; text-indent:-5000px; width:237px; margin:10px 0 0 0; } #larchives li { padding:7px 0 7px 15px; color:#909FB1; font-size:10px; } #larchives a:link, #larchives a:active, #larchives a:visited { color:#909FB1; } #larchives a:hover { color:#f50; } #lresources h3 { background:url(lresources_title.gif) no-repeat top left; height:29px; text-indent:-5000px; width:237px; margin:10px 0 0 0; } #lresources li { padding:7px 0 7px 15px; color:#909FB1; font-size:10px; } #lresources a:link, #lresources a:active, #lresources a:visited { color:#909FB1; } #lresources a:hover { color:#f50; }/* css Zen Garden submission 090 - 'Untitled', by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Ray Henry */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body#css-zen-garden { background:#A1B4CD; margin:0; padding:0; font-family:verdana, arial, sans-serif; font-size:11px; } acronym { cursor: help; } /* Container */ #container { width:100%; text-align:left; } /* Intro Section */ #intro { width:100%; height:276px; } html>body div#intro { position:fixed; bottom:0px; right:0; } html*#intro { border-bottom:3px solid #fff; position:fixed; bottom:-10px; } /* start IE5Mac Nav hack \*/ #intro { height:286px; voice-family: "\"}\""; voice-family: inherit; height:auto; } /* end IE5Mac Nav hack */ #pageHeader { background:url(pageHead_bg.jpg) no-repeat top left; width:332px; height:283px; position:absolute; right:0; top:0; } html>body #pageHeader { position:absolute; right:0; } #pageHeader h1, #pageHeader h2 {display:none;} #preamble { background:#A1B4CD url(preamble_bg.gif) repeat-y top right; height:283px; width:312px; margin:0; padding:0; position:absolute; left:0; top:0; } html>body #preamble { position:absolute; left:0; } #preamble h3 { background:url(preamble_h3_bg.gif) no-repeat top left; height:48px; width:auto; margin:0; padding:0; } #preamble h3 span {display:none;} #preamble p { color:#2E3C55; line-height:16px; margin:0 10px 10px 10px; } #quickSummary { background:url(quickSum_bg.gif) repeat-x top right; border-right:3px solid #fff; margin:0 332px 0 312px; padding:52px 0 0 0; height:283px; voice-family: "\"}\""; voice-family: inherit; height:231px; } #quickSummary p { margin:0 10px 10px 10px; color:#fff; } #quickSummary a:link, #quickSummary a:active, #quickSummary a:active { color:#fff; } #quickSummary a:hover { color:#ddd; } /* Supporting Text */ #supportingText { width:100%; float:left; margin-right:-332px; margin-top:-3px; } #supportingText h3 { margin:0; padding:0; } #supportingText p { margin:10px 10px 0 10px; line-height:16px; color:#2E3C55; max-width:525px; } #explanation, #participation, #benefits, #requirements { background:#E7F0FF; margin:0 332px 0 0; border-right:3px solid #fff; } #participation, #benefits, #requirements { padding-top:15px; } #requirements { padding-bottom:25px; } #explanation h3 { background:url(exp_h3_bg.gif) no-repeat top left; height:51px; } #participation h3 { background:url(part_h3_bg.gif) no-repeat top left; height:51px; } #benefits h3 { background:url(ben_h3_bg.gif) no-repeat top left; height:51px; } #requirements h3 { background:url(req_h3_bg.gif) no-repeat top left; height:51px; } #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span {display:none;} #supportingText a:link, #supportingText a:active, #supportingText a:visited { color:#4f5e77; } #supportingText a:hover { color:#0c1a33; } html>body #requirements { padding-bottom:300px; } #footer { background:#d6e0ee; margin:0 332px 0 0; border-right:3px solid #fff; border-top:3px solid #fff; border-bottom:3px solid #fff; padding:15px 0; text-align:center; } html>body #footer { background:transparent; position:fixed; right:0; bottom:261px; padding:0; margin:0 160px 0 0; border-right:0; border-top:0; border-bottom:0; text-align:left; } #footer a:link, #footer a:active, #footer a:visited { color:#1E2E43; } #footer a:hover { color:#fff; } /* Link List Section */ #linkList { background:#CBD6E5; width:180px; margin-right:149px; float:right; padding-bottom:453px; border-bottom:3px solid #fff; border-right:3px solid #fff; } html>body #linkList { padding-bottom:700px; } #linkList h3 { background:#bac5d4; font-size:12px; font-family: georgia, serif; color:#4f5e77; } h3.select { padding:10px 0 10px 10px; margin:0 0 5px 0; border-bottom:1px dotted #4f5e77; } h3.archives, h3.resources { border-top:1px dotted #4f5e77; padding:10px 0 10px 10px; margin:10px 0 5px 0; border-bottom:1px dotted #4f5e77; } #linkList h3:hover { background:#a9b4c3; color:#fff; } #linkList ul { margin:0 0 0 5px; padding:0; list-style-type:none; } #linkList ul li { padding:5px 0 5px 15px; color:#6f7f99; font-size:10px; } #linkList ul li:hover { background:url(listBullet.gif) no-repeat 5px 10px; } #linkList ul li a:link, #linkList ul li a:active, #linkList ul li a:visited { display:block; color:#4f5e77; font-weight:bold; font-size:11px; } #linkList ul li a:hover { color:#fff; } #linkList ul li a.c { display:inline; color:#6f7f99; font-weight:normal; font-size:10px; } /* Ugly Opera 7 Hacks Section */ @media all and (min-width: 0px){ div#intro { position: absolute; right:0; width:100%; height:283px; top:0; z-index: 0; border-bottom:3px solid #fff; } div#supportingText { margin-top:280px; } div#footer { position:absolute; right:0; top:12px; } div#linkList { margin-top:280px; } } /* extraDivs */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none;} /* css Zen Garden submission 091 - 'webZine', by Cent, http://www.20cent.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Cent */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin:0px; padding:0px; } /***********************************/ html, body { cursor:default; font-family:tahoma; font-size:0.83em; width:100%; background:#FFF url(img-paper.gif) no-repeat center top; } /***********************************/ acronym { cursor:help; border:0px; } a { text-decoration:none; white-space:nowrap; padding-bottom:4px; color:#000; background: transparent url(img-line.gif) repeat-x 100% 100%; } h3 { margin:6px; font-family:courier; font-size:1.2em; margin-top:14px; } p { margin:6px; letter-spacing:1px; text-align:justify; } h1 { padding:20px; padding-top:90px; } h1 span { display:none; } h2 { font-size:1em; letter-spacing:3px; font-family:courier; } ul { border:1px solid #BBB; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; list-style-type:lower-roman; } li { margin-left:25px; } /***********************************/ #container { position:absolute; left:50%; margin-left:-375px; width:750px; } #pageHeader, #quickSummary { text-align:center; } #quickSummary { margin-top:10em; margin-bottom:-20px; text-align:left; margin-left:6px; color:#666; font-family:courier; } #quickSummary p { margin:0px; padding:0px; font-style:italic; display:inline; } #quickSummary a { color:#666; } #preamble { border-top:3px double #DDD; margin-top:30px; width:100%; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { border-bottom:1px solid #888; } #benefits { background:transparent url(img-bonsai.gif) no-repeat bottom center; padding-bottom:148px; } #explanation { float:left; width:31%; } #participation { float:left; width:46%; border-left:2px solid #DDD; border-right:2px solid #DDD; margin-bottom:10px; } #participation .p4 { border:2px solid #DDD; padding-left:4px; padding-right:4px; margin-top:30px; } #participation .p4:first-letter { text-transform:capitalize; } #benefits { float:left; width:22%; } #requirements { clear:both; margin-bottom:20px; background:transparent url(img-pen.gif) no-repeat left bottom; padding-bottom:45px; } #requirements .p5 { margin-top:20px; text-align:right; border-right:1.1em solid #CCC; } #footer { text-align:center; font-size:0.9em; position:absolute; top:130px; width:100%; } #quickSummary .p1, #quickSummary .p2 { letter-spacing:0px; } #lselect { position:absolute; top:30px; left:5px; font-size:0.8em; } #larchives { position:absolute; top:30px; right:0px; width:170px; font-size:0.8em; } #lresources { position:absolute; top:11em; right:0px; width:170px; font-size:0.8em; } #lselect a, #larchives a, #lresources a, #footer a { background:none; color:#555; } #lselect a:hover, #larchives a:hover, #lresources a:hover, #footer a:hover { color:#000; } #footer a:hover { text-decoration:none; white-space:nowrap; padding-bottom:4px; color:#000; background: transparent url(img-diagonal.gif) repeat-x 100% 100%; } /* css Zen Garden submission 092 - 'Port of Call', by Jessica Dunn, http://vcdesignconcept.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Jessica Dunn */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 12px georgia; color: #231C1C; background: url(2.jpg) repeat-y #3D3131; margin: 0 0 0 0; padding: 0 0 0 6px; } p { font: 12px/1.5 arial, times new roman, helvetica; text-align: justify; } h3 { font: bold italic 12pt times new roman; letter-spacing: 1px; color: #000; } a:link, a:visited { font-weight: normal; text-decoration: none; color: #FFFFD6; } a:hover, a:active { border-bottom:1px dotted #FFFFD6; border-top:1px dotted #FFFFD6; color: #CF700B; } #container { width: 760px; } #intro { min-width: 0px; } #pageHeader h1 { background: transparent url(top-n.jpg) no-repeat; height: 284px; width: 504px; top: 0px; margin: 0 0 0 0; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(top-n2.jpg) no-repeat; height: 229px; width: 504px; margin: 0 0 0 0; top: 0px; } #pageHeader h2 span { display:none; } #quickSummary { background: transparent url(flr.jpg) center bottom no-repeat; clear:both; width: 288px; left: 408px; margin: 40px 0 0 120px; padding:0 70px 65px 120px; } #quickSummary p { font: italic 10pt/22pt georgia; text-align:center; padding:0 70px 0 30px; } #preamble { margin: 0 0 0 -60px; position: absolute; top: 30px; left: 520px; width: 260px; z-index: 2; color: #DBD7C5; padding: 0 0 0 0; } #preamble p { font-size: 11px; line-height: 15px; } #preamble h3 { display:none; } #supportingText { position: absolute; top: 525px; left: 40px; margin-left: 4px; float: left; width: 200px; } #participation { margin:20px 20px 20px 4px; width: 400px; } #benefits, #requirements { left: 40px; width: 400px; margin:20px 20px 20px 4px; } #footer { position: absolute; left: 4px; margin: 0 0 0 0; padding: 0 0 0 10px; width: 388px; text-align: center; } #linkList { background: repeat-y transparent; margin: 0 0 0 0; padding:10px 0 0 0; color: #AF610F; position: absolute; top:27em; left:510px; width: 170px; } #linkList h3.select, #linkList h3.select span { display: none; } #linkList h3.archives, #linkList h3.resources { padding: 10px 25px 8px 55px; margin: 0; color: #DDD1C5; letter-spacing: 2px; } #lresources, #larchives, #lselect { margin: 0 0 0 0; padding: 0; } #linkList a:link, #linkList a:visited { color: #F3B530; } #lselect li { font: 9pt/16pt arial, new times roman; color: #DBD7C5; margin:0; padding:0 0 8px 0; list-style: none; border-top: 1px dotted #000; } #lselect li a:link, #lselect li a:visited { color: #FEBD33; font: 9pt/16pt arial, new times roman; } #linkList li { background: transparent; padding: 0 0 5px 5px; line-height: 3.5ex; list-style-type: none; font: 9pt/16pt arial, new times roman; border-top: 1px dotted #000; } #linkList li a.c:link, #linkList li a.c:visited { color: #FEBD33; } #linkList li a:hover { color: #FFFFD6; border-bottom:1px dotted #978D8C; border-top:1px dotted #978D8C; } #linkList #larchives li , #linkList #lresources li , #linkList #lfavorites li { background: transparent; margin: 0 0 0 0; padding: 0 0 5px 2px; line-height: 3.5ex; } #linkList ul { width: 145px; margin: 0 0 0 10px; font: 9pt arial, times new roman, helvetica; } #extraDiv1 { background: transparent url(taba2c.jpg) top left no-repeat; position: absolute; top: 0px; left:510px; right: 0px; width: 259px; height: 284px; } /* css Zen Garden submission 093 - 'South of the Border', by Rob Shields, http://www.dotcat.org/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Rob Shields */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 83%/150%; color: #fff; background: #EDEDED url(background.gif) repeat-y fixed bottom center; margin: 0px; padding: 0px; } p { font: 83%/150% georgia, palatino, serif; margin-top: 0px; text-align: justify; } h3 { font: italic normal 83%/150%; letter-spacing: 1px; margin-bottom: 0px; color: #E79900; font-weight: bold; } body, p, h3 { font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif } a:link, a:visited { text-decoration: none; color: #97ABC3; } a:hover, a:active { text-decoration: underline; color: #97ABC3; } /* specific divs */ #container { position: relative; background: url(bg-central.gif) repeat top left; margin: 0px auto 0px auto; width: 655px; } #intro { margin:0px; } #quickSummary { padding-top: 2px; border-bottom: 1px dashed #8095AF; font-style: italic; } #quickSummary, #preamble { margin: 0px 200px 0px 68px; } #pageHeader { /*display:none;*/ margin: 0px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { margin: 0px 0px 0px 0px; background: transparent url(top.gif) no-repeat top left; width: 655px; height: 206px; } #pageHeader h1 span { display: none; } #pageHeader h2 { display: none; } #quickSummary { margin-top: 10px; } #quickSummary p { } #preamble { border-bottom: 1px dashed #8095AF; } #preamble h3 { background: transparent url(ch1.gif) no-repeat top left; margin: 10px 0px 5px 0px; width: 388px; height: 44px; } #preamble h3 span { display:none } #supportingText { margin:0px 200px 0px 68px; } #explanation { border-bottom: 1px dashed #8095AF; } #explanation h3 { background: transparent url(ch2.gif) no-repeat top left; margin: 10px 0px 5px 0px; width: 388px; height: 44px; } #explanation h3 span { display:none } #participation { border-bottom: 1px dashed #8095AF; } #participation h3 { background: transparent url(ch3.gif) no-repeat top left; margin: 10px 0px 5px 0px; width: 388px; height: 44px; } #participation h3 span { display:none } #benefits { border-bottom: 1px dashed #8095AF; } #benefits h3 { background: transparent url(ch4.gif) no-repeat top left; margin: 10px 0px 5px 0px; width: 388px; height: 44px; } #benefits h3 span { display:none } #requirements { margin-bottom: -80px; } #requirements h3 { background: transparent url(ch5.gif) no-repeat top left; margin: 10px 0px 5px 0px; width: 388px; height: 44px; } #requirements h3 span { display:none } #footer { text-align: center; background: transparent url(bottom.gif) no-repeat top left; height: 37px; margin: 0px -200px 0px -68px; padding-top: 88px; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList { position: absolute; top: 207px; right: 6px; width: 181px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; background: transparent url(li-bg.gif) repeat top center; padding:8px 6px 8px 6px; margin:0px; border-top: 1px solid #5D4831; border-bottom: 1px solid #221609; display: block; } #linkList li a { color: #9E866B; } #linkList2 { font-size: 70%; color: #846645; } #lselect ul li a, #lfavorites ul li a { color: #97ABC3; font-size: 120%; display: block; width: auto; padding: 0px; } #lselect ul li a.c, #lfavorites ul li a.c { font-size: 100%; display:inline; color: #9E866B; } #linkList h3.select { background: transparent url(h3.gif) no-repeat top left; margin: 2px 0px 0px 0px; width:182px; height: 30px; } #linkList h3.select span { display:none } #lfavorites { padding-top: 10px; } #linkList h3.favorites { background: transparent url(h4.gif) no-repeat top left; margin: 0px; width:182px; height: 30px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(h5.gif) no-repeat top left; margin: 0px; width:182px; height: 30px; } #linkList h3.archives span { display:none } #larchives { padding-top: 10px; } #linkList h3.resources { background: transparent url(h6.gif) no-repeat top left; margin: 0px; width:182px; height: 30px; } #linkList h3.resources span { display:none } #lresources { padding-top: 10px; }/* css Zen Garden submission 094 - 'Deco', by Marc Trudel, http://www.marctrudel.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Marc Trudel */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { font: 10pt/16pt verdana; color: #333333; background: url(bg_blue1.gif) repeat-y left; margin: 0px; border: 0px; margin-top: 0em; margin-left: 0em; margin-bottom: 0em; margin-right: 0em; padding: 0em; } #container { background: url(bg.jpg) no-repeat scroll left top; margin: 0px; padding: 0px; position: absolute; height: 497px; width: 788px; visibility: inherit; left: 0px; top: 0px; right: 0px; bottom: 0px; } #intro { margin-top: 85px; margin-left: 172px; } #pageHeader { } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: url(csszengarden.gif) no-repeat left top; width: 620px; height: 103px; } #pageHeader h1 span { display:none } #pageHeader h2 { background: url(thebeauty.gif) no-repeat left top; width: 263px; height: 13px; } #pageHeader h2 span { display:none } #quickSummary { width: 300px; padding-bottom: 20px; padding-left: 10px; } #quickSummary p span { line-height: 17px; font-size: 11px; color: #FFFFFF; } #preamble { color: #666666; margin: 0px; width: 490px; bottom: 0px; } #preamble h3 { background: url(h1.gif) no-repeat left top; border: 0px; height: 39px; width: 537px; visibility: visible; position: static; margin: 0px; padding: 0px 0px 3px; } #preamble h3 span { display:none; padding: 0px; margin: 0px; width: 252px; } #preamble p span { position: relative; left: 27px; margin: 0px 0px 5px; padding: 0px; line-height: 17px; font-size: 11px; } #explanation { color: #666666; margin: 0px; width: 490px; } #explanation h3 { background: url(h2.gif) no-repeat 172px 5px; border: 0px; height: 55px; width: 709px; visibility: visible; position: static; margin: 0px; padding: 0px 0px 3px; } #explanation h3 span { display:none; padding: 0px; margin: 0px; width: 252px; } #explanation p span { position: relative; left: 197px; margin: 0px; padding: 0px; line-height: 17px; font-size: 11px; right: 732px; } a:link { font-weight: bold; color: #99CCFF; text-decoration: none; } a:visited { font-weight: bold; color: #99CCFF; text-decoration: none; } a:hover { font-weight: bold; color: #99CCFF; text-decoration: underline; } a:active { font-weight: bold; color: #99CCFF; } p { font-size: 8pt; line-height: 14pt; margin: 0px; padding: 3px 0px; } #participation { color: #666666; margin: 0px; width: 490px; } #participation h3 { background: url(h3.gif) no-repeat 172px 5px; border: 0px; height: 55px; width: 709px; visibility: visible; position: static; margin: 0px; padding: 0px 0px 3px; } #participation h3 span { display:none; padding: 0px; margin: 0px; width: 252px; } #participation p span { position: relative; left: 200px; margin: 0px; padding: 0px; line-height: 17px; font-size: 11px; right: 745px; } #participation a:link, #participation a:visited { color: #316DBD; } #benefits { color: #666666; margin: 0px; width: 490px; } #benefits h3 { background: url(h4.gif) no-repeat 172px 5px; border: 0px; height: 55px; width: 709px; visibility: visible; position: static; margin: 0px; padding: 0px 0px 3px; } #benefits h3 span { display:none; padding: 0px; margin: 0px; width: 252px; } #benefits p span { position: relative; left: 200px; margin: 0px; padding: 0px; line-height: 17px; font-size: 11px; right: 745px; } #requirements { color: #666666; margin: 0px; width: 490px; } #requirements h3 { background: url(h5.gif) no-repeat 172px 5px; border: 0px; height: 55px; width: 709px; visibility: visible; position: static; margin: 0px; padding: 0px 0px 3px; } #requirements h3 span { display:none; padding: 0px; margin: 0px; width: 252px; } #requirements p span { position: relative; left: 200px; margin: 0px; padding: 0px; line-height: 17px; font-size: 11px; right: 745px; } #requirements a:link, #requirements a:visited { color: #316DBD; } #footer { position: relative; left: 200px; margin: 0px; padding: 10px 10px 10px 0px; line-height: 15px; font-size: 9px; right: 745px; } #footer a:link, #footer a:visited { color: #316DBD; } #linkList { position: absolute; top: 0px; left: 0px; height: 0px; padding: 0px; width: 0px; margin: 0px; } #linkList2 { font: 10px verdana, sans-serif; padding: 0px; margin-top: 340px; width: 133px; height: 0px; top: 0px; left: 0px; right: 0px; bottom: 0px; position: absolute; } #linkList ul { margin: 0px; padding: 0px; background-image: url(lightblue.gif); background-repeat: repeat-y; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; margin-left: 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #C5D2E6; border-right-color: #C5D2E6; border-bottom-color: #C5D2E6; border-left-color: #C5D2E6; padding-left: 15px; padding-bottom: 5px; padding-right: 12px; color: #99CCFF; } #linkList li a:link { color: #FFFFFF; font-weight: bold; background-position: 5px; } #linkList li a:visited { color: #99CCFF; font-weight: bold; } #linkList h3.select { background: transparent url(selectdesign.gif) no-repeat top left; margin: 0px 0px 5px 7px; width: 95px; height: 7px; } #linkList h3.select span { display:none } #linkList h3.archives { background: transparent url(archives.gif) no-repeat top left; margin: 30px 0px 5px 7px; width: 95px; height: 7px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.gif) no-repeat top left; margin: 30px 0px 5px 7px; width: 95px; height: 7px; } #linkList h3.resources span { display:none } /* css Zen Garden submission 095 - 'Corporate ZenWorks', by Derek Hansen, http://www.dejoha.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Derek Hansen */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* HTML Tags */ body { background: #999 url(bk.jpg) repeat-x fixed; margin: 0; padding: 0; color: #33140E; font-family: Georgia, Times, serif; font-size: 80%; } h1,h2,h3,h4,h5,h6 { border: 0; margin: 0; padding: 0; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; } h3 { text-transform: uppercase; font-size: 90%; word-spacing: 2px; letter-spacing: 2px; margin-left: -10px; font-weight: bold; } a { color: #5F524F; } acronym { font-style: italic; cursor: help; font-weight: bold; } /* Divisions */ #container { width: 750px; background: url(paper_mid.gif) repeat-y; margin: 50px 0 0 25px; padding-bottom: 20px; } #pageHeader { height: 100px; padding: 20px 0 20px 50px; } #pageHeader h1 { height: 90px; width: 340px; background: url(zen_logo.gif) no-repeat; } #pageHeader h2 span, #pageHeader h1 span { display: none; } #pageHeader h2 { background: url(paper_clip.gif) no-repeat; width: 320px; height: 262px; position: absolute; top: 250px; left: -6px; z-index: 5; } #linkList, #supportingText, #preamble { margin: 10px 100px 10px 200px; } #quickSummary { position: absolute; top: 50px; left: 450px; background: url(subtext.gif) no-repeat; height: 100px; width: 280px; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { padding: 78px 0 0 15px; font-size: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } #extraDiv1 { position: absolute; top: 10px; left: 23px; width: 750px; height: 50px; background: url(paper_top.gif) no-repeat; } #lfavorites ul, #lselect ul { list-style-type: none; } #lfavorites li, #lselect li { clear: both; border-bottom: 2px dotted #887972; color: #FFF; padding: 4px 0; background: url(doc.gif) no-repeat center center; } #lfavorites a, #lselect a { float: left; text-decoration: none; } #lfavorites a.c, #lselect a.c { float: right; text-decoration: none; font-style: italic; } #footer { position: absolute; top: 160px; left: 150px; font-size: 80%; border-top: 1px solid #6E512F; padding-top: 3px; width: 575px; text-transform: uppercase; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } #larchives { margin: 40px -50px 0 -150px; text-align: center; padding-top: 15px; border-top: 1px solid #6E512F; } #larchives h3 { display: none; } #larchives ul { list-style-type: none; margin: 0; padding: 0; } #larchives li { display: inline; padding: 0 10px; text-transform: uppercase; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; font-size: 80%; } #lresources { position: absolute; top: 600px; left: 10px; width: 200px; height: 257px; background: url(sticky.gif) no-repeat; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; color: #000; } #lresources a { color: #000; } #lresources h3 { padding: 40px 10px 0 30px; } #lresources ul { font-size: 80%; } #lresources li { padding: 5px; } #extraDiv2 { position: absolute; top: 900px; left: 700px; background: url(pen.gif) no-repeat; width: 140px; height: 547px; } /* Classes */ .accesskey { font-weight: bold; text-decoration: underline; }/* css Zen Garden submission 096 - 'Japanese Garden', by Masanori Kawachi, http://www.jugglinglife.org/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Masanori Kawachi */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { width: 670px; margin: 0px; padding: 0px; background-color: #FFFFFF; background-image: url(main_bg.gif); background-repeat: repeat-y; background-position: left top; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666666; letter-spacing: 0px } a:link {color: #996600; text-decoration: none;} a:visited {color: #996600; text-decoration: none;} a:hover {color: #996600; text-decoration: underline;} a:active {color: #996600; text-decoration: none;} li { margin: 0px; width: auto; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; background-image: url(pointer.gif); background-repeat: no-repeat; background-position: left top; font-weight: bold; font-size: 12px; } #container { margin: 0px; padding: 0px 0px 20px 0px; font-size: 11px; line-height: 1.4; width: 661px; clear: both; background-image: url(rightside_bg.gif); background-repeat: no-repeat; background-position: 322px 0px; } #pageHeader { background-image: url(logo.gif); background-repeat: no-repeat; background-position: left top; margin: 0px; padding: 0px; height: 83px; width: 322px; float: left; } #pageHeader h1 { margin: 0px; padding: 0px; display:none } #pageHeader h2 { margin: 0px; padding: 0px; display:none } #quickSummary { margin: 10px 0px 0px; padding: 0px 0px 0px 22px; float: left; width: 301px; voice-family: "\"}\""; voice-family: inherit; width: 301px; } #quickSummary .p1 { margin: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; } #quickSummary .p2 { margin: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; font-size: 12px; font-weight: bold; } #preamble { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; width: 661px; clear: both; } #preamble h3 { display: none; } #preamble .p1 { margin: 0px 0px 0px 345px; background-image: url(tit_01.gif); background-repeat: no-repeat; background-position: left top; padding: 48px 0px 0px; width: 301px; } #preamble .p2 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #preamble .p3 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #supportingText { margin: 0px; padding: 0px; width: 661px; } #explanation { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } #explanation h3 { display: none; } #explanation .p1 { margin: 0px 0px 0px 345px; background-image: url(tit_02.gif); background-repeat: no-repeat; background-position: left top; padding: 48px 0px 0px; width: 301px; } #explanation .p2 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #participation { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } #participation h3 { margin: 0px; padding: 0px; display: none; } #participation .p1 { margin: 0px 0px 0px 345px; background-image: url(tit_03.gif); background-repeat: no-repeat; background-position: left top; padding: 48px 0px 0px; width: 301px; } #participation .p2 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #participation .p3 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #benefits { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; width: 301px; } #benefits h3 { display: none; } #benefits .p1 { margin: 0px 0px 0px 345px; background-image: url(tit_04.gif); background-repeat: no-repeat; background-position: left top; padding: 48px 0px 0px; width: 301px; } #requirements { margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; width: 301px; } #requirements h3 { margin: 0px; padding: 0px; display: none; } #requirements .p1 { margin: 0px 0px 0px 345px; background-image: url(tit_05.gif); background-repeat: no-repeat; background-position: left top; padding: 48px 0px 0px; width: 301px; } #requirements .p2 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #requirements .p3 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #requirements .p4 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #requirements .p5 { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #linkList { position: absolute; top: 83px; right: 21px; left: 10px; width: 214px; background-image: url(leftside_bg.gif); background-repeat: no-repeat; background-position: left top; } #lselect { padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin: 0px; } #lselect h3 { margin: 0px; padding: 0px; display: none; } #lselect ul { width: auto; padding-right: 10px; padding-left: 10px; list-style-type: none; margin: 0px; padding-top: 30px; padding-bottom: 0px; } #larchives { background-image: url(stit_02.gif); background-repeat: no-repeat; background-position: left top; margin: 10px 0px 0px; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #larchives h3 { margin: 0px; padding: 0px; display: none; } #larchives ul { width: auto; padding-right: 10px; padding-left: 10px; list-style-type: none; margin: 0px; padding-top: 20px; padding-bottom: 0px; } #lresources { background-image: url(stit_03.gif); background-repeat: no-repeat; background-position: left top; margin: 10px 0px 0px; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #lresources h3 { margin: 0px; padding: 0px; display: none; } #lresources ul { width: auto; padding-right: 10px; padding-left: 10px; list-style-type: none; margin: 0px; padding-top: 20px; padding-bottom: 0px; } #footer { margin: 0px 0px 0px 345px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; width: 301px; } #extraDiv1 { background-image: url(bg_01.gif); background-repeat: no-repeat; background-position: left top; position: absolute; top: 83px; left: 0px; margin: 0px; padding: 0px; height: 208px; width: 10px; } #extraDiv2 { background-image: url(bg_02.gif); margin: 0px; padding: 0px; position: absolute; left: 224px; top: 83px; height: 423px; width: 98px; } /* css Zen Garden submission 097 - 'No Frontiers!', by Michal Mokrzycki, http://hyperreal.info/bhang/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michal Mokrzycki */ /* Added: April 9th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basics */ body { font: small "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #676767; margin: 0px; padding: 0px; background: #fbfbf2 url(page_back.gif) repeat-x fixed; } /* text styles */ p { font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin-top: 0px; text-align: justify; } acronym { font-weight: bold; color: #e18700; text-transform: uppercase; } #quickSummary acronym { color: #ffff99; font-weight: bold; } h3 { letter-spacing: 1px; margin-bottom: 0px; } a:link { font-weight: bold; text-decoration: none; color: #909528; } a:visited { font-weight: normal; text-decoration: none; color: #909528; } a:hover, a:active { text-decoration: underline; color: #646729; } /* structure, specific texts */ #container { padding: 0px; margin: 0px; background: transparent url(body_back.png) no-repeat top left; } #pageHeader { position: absolute; left: 0px; top: 190px; width: 291px; height: 159px; background: transparent url(green_top.gif) no-repeat top left; z-index: 3; } #pageHeader h1 { position: absolute; top: 59px; background-color: #bbbf58; border-right: 2px solid #fff; width: 289px; height: 150px; margin: 0; padding: 0; } #pageHeader h1 span { display: none; } #pageHeader h2 { position: absolute; top: 118px; background: transparent url(green_bottom.gif) no-repeat bottom left; width: 291px; height: 135px; margin: 0; padding: 0; } #pageHeader h2 span { display: none; } #quickSummary { position: absolute; top: 270px; left: 20px; width: 245px; line-height: 2; z-index: 3; } #quickSummary p { color: #fff; font-size: 11px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; } #preamble { position: absolute; width: 291px; top: 455px; margin: 0; z-index: 3; } #preamble h3 { background: transparent url(enlightment.gif) no-repeat top left; width: 291px; height: 37px; margin-bottom: 10px; padding: 0; } #preamble h3 span { display: none; } #preamble p { color: #7A7D55; font-size: 11px; line-height: 1.5; padding: 0 20px 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; } #preamble p.p3 { padding-bottom: 300px; background: transparent url(leftback.gif) 17px 110px no-repeat; } #supportingText { border-left: 2px solid white; border-right: 2px solid white; position: relative; top: 0; margin: 0 170px 0px 300px; background: #fff url(content_back.gif) repeat-x; min-width: 315px; z-index: 2; } #explanation { background: transparent url(zengarden.gif) no-repeat top right; padding-top: 185px; } #explanation h3 { position: relative; top: 15px; width: 305px; height: 41px; background: transparent url(heading_1.gif) no-repeat top left; margin-top: 0; margin-bottom: 10px; } #explanation h3 span { display: none; } #explanation p, #participation p, #benefits p, #requirements p { margin-left: 11px; margin-right: 20px; padding: 10px; } #participation h3 { position: relative; top: 15px; width: 177px; height: 28px; background: transparent url(heading_2.gif) no-repeat top left; margin-top: 0; margin-bottom: 10px; } #participation h3 span { display: none; } #benefits h3 { position: relative; top: 15px; width: 120px; height: 24px; background: transparent url(heading_3.gif) no-repeat top left; margin-top: 0; margin-bottom: 10px; } #benefits h3 span { display: none; } #requirements h3 { position: relative; top: 15px; width: 193px; height: 28px; background: transparent url(heading_4.gif) no-repeat top left; margin-top: 0; margin-bottom: 10px; } #requirements h3 span { display: none; } #footer { text-align: center; padding-bottom: 30px; background-color: #fff; } #footer a:link, a:visited { font-size: 11px; } #footer a:hover, a:active { background-color: #909528; color: #fff; } #linkList { position: absolute; top: 0px; right: 0px; margin-left: 630px; z-index: 1; } #linkList2 { background: transparent url(pickup_top.gif) 10px 0 no-repeat; font: 10px verdana, sans-serif; padding-top: 60px; width: 170px; } #linkList h3.select span { display: none; } #linkList h3.favorites { background: transparent url(favorites_back.gif) no-repeat top left; margin: 20px 0px 5px 8px; width: 79px; height: 20px; } #linkList h3.favorites span { display: none; } #linkList h3.archives { background: transparent url(archives_back.gif) no-repeat top left; margin: 20px 0px 5px 8px; width: 76px; height: 20px; } #linkList h3.archives span { display: none; } #linkList h3.resources { background: transparent url(resources_back.gif) no-repeat top left; margin: 20px 0px 5px 8px; width: 89px; height: 20px; } #linkList h3.resources span { display: none; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 1.1; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 2px; margin-left: 10px; padding-left: 15px; padding-bottom: 5px; } #lselect li { background: transparent url(link_dot.gif) 0 7px no-repeat; } #larchives li, #lfavorites li { background: transparent url(link_dot2.gif) 0 7px no-repeat; } #lresources li { background: transparent url(link_dot3.gif) 0 7px no-repeat; } #linkList li a:link, a:visited { font-size: 9px; font-weight: bold; font-family: verdana, sans-serif; color: #706A47; } #linkList li a:hover, a:active { background-color: #909528; color: #fff; }/* css Zen Garden submission 098 - 'Edo and Tokyo', by Daisuke Sato, http://www.coutworks.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Daisuke Sato */ /* Added: April 14th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { margin: 0px; padding: 0px; background-color: #FFFFFF; font-size: 12px; line-height: 133%; color: #000000; font-family: arial, helvetica, sans-serif; } a { color: #000000; text-decoration: underline; } a:hover, a:active { text-decoration: underline; } /* header */ #pageHeader { position: absolute; top: 32px; left: 385px; background: transparent url(title.gif) no-repeat top left; width: 356px; height: 53px; z-index: 3; } #pageHeader h1, #pageHeader h2 { display: none; } #quickSummary { position: absolute; top: 102px; left: 444px; width: 296px; z-index: 3; } #quickSummary p { margin: 0px; padding: 0px; text-align: right; } #quickSummary a { color: #000000; text-decoration: underline; } /* contents */ #supportingText { position: relative; margin: 0px; padding: 746px 0px 243px 15px; z-index: 1; } #supportingText a { color: #FFFFFF; } #preamble, #explanation, #participation, #benefits, #requirements { margin: 0px 0px 5px 0px; width: 540px; overflow:auto; z-index: 2; } #preamble { position: absolute; top: 583px; left: 15px; height: 158px; } #explanation { height: 183px; } #participation { height: 215px; } #benefits { height: 102px; } #requirements { height: 343px; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 11px 0px 0px 15px; padding: 0px; width: 509px; font-size: 12px; line-height: 133%; color: #FFFFFF; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin: 0px 0px 0px 15px; padding: 0px; width: 509px; color: #FFFFFF; } #footer { position: absolute; top: 1126px; left: 570px; } #footer a { color: #ffffff; text-decoration: none; } /* link */ #linkList { position: absolute; top: 583px; left: 570px; width: 246px; height: 490px; z-index: 1; } #linkList a { color: #FFFFFF; font-style: normal; text-decoration: none; } #linkList ul { margin: 0px; padding: 0px; list-style-type: none; } #linkList li { margin: 0px 0px 0px 15px; padding: 0px; width: 140px; color: #FFFFFF; font-style: italic; } #lselect, #larchives, #lresources { margin: 0px 0px 5px 0px; width: 170px; overflow:auto; z-index: 2; } #lselect { height: 311px; } #larchives { height: 87px; } #lresources { height: 121px; } #lselect h3, #larchives h3, #lresources h3 { margin: 11px 0px 0px 15px; padding: 0px; width: 140px; font-size: 12px; line-height: 125%; color: #FFFFFF; } #lselect a { margin: 0px; padding: 0px; font-style: normal; display: block; } #lselect a.c { font-style: italic; display: inline; } /* images */ #extraDiv1 { position: absolute; top: 0px; left: 0px; background: transparent url(header_bg.gif) no-repeat top left; width: 832px; height: 583px; z-index: 0; } #extraDiv1 span { display: none; } #extraDiv2 { position: absolute; top: 583px; left: 0px; background: transparent url(footer_bg.gif) no-repeat top left; width: 832px; height: 1265px; z-index: 0; } #extraDiv2 span { display: none; } #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }/* css Zen Garden submission 099 - 'Wiggles the Wonderworm', by Joseph Pearson, http://www.make-believe.org/ */ /* All images used in this Zen Garden are based on freely available images in the public domain. These images and the accompanying CSS are hereby returned to the public domain, as per the Creative Commons Public Domain Dedication (http://creativecommons.org/licenses/publicdomain/). Build on the past, and free your creativity. Fight for fair and reasonable copyright laws."; */ /* Added: April 14th, 2004 */ /*======================================================================== THINGS OF UNIVERSAL IMPORTANCE ========================================================================*/ body { text-align:center; min-width:760px; line-height:100%; background:url(paper.jpg) repeat-y #FFF center top; color: black; } body a { color:black; text-decoration:none; font-weight:bold; } span { font: 12px Comic Sans MS, Verdana, sans serif; text-align:center; line-height:100%; margin-top:5px; } h3 { display:none; } acronym { font-weight:bold; border:none; cursor:help; } #container { text-align:left; margin:0 auto; width:760px; position:relative; } #pageHeader { display:none; } /*================================================================== PAGE 1 This page's content is neatly encapsulated by the intro div. ===================================================================*/ #intro { /*page container*/ position:relative; height:1385px; margin-top:40px; } #extraDiv1 { position:absolute; height:40px; width:820px; top:0; background:url(paperedge.jpg) no-repeat bottom; left:50%; margin-left:-410px; } #quickSummary{ position:absolute; left:6px; top:9px; width:750px; height:491px; background:url(P1PANEL1.jpg) no-repeat black; } #quickSummary p.p1 span { position: absolute; left: 71px; top: 28px; width: 328px; height: 80px; font-size: 16px; } #quickSummary p.p2 span { position:absolute; left:551px; top:0; font: 9px Arial, Helvetica, sans serif; } #quickSummary p.p2 span:before { content:"® " } #preamble p.p1{ position:absolute; left:5px; top:506px; width:366px; height:428px; background:url(P1PANEL2.jpg) no-repeat black; } #preamble p.p1 span { position: absolute; left: 217px; top: 30px; width: 127px; height: 92px; } #preamble p.p2{ position:absolute; left:384px; top:507px; width:370px; height:429px; background:url(P1PANEL3.jpg) no-repeat black; } #preamble p.p2 span { position: absolute; left: 18px; top: 12px; width: 160px; height: 104px; } #preamble p.p3{ position:absolute; left:4px; top:941px; width:751px; height:421px; background:url(P1PANEL45.jpg) no-repeat black; } #preamble p.p3 span { position: absolute; left: 5px; top: 5px; width: 348px; height: 56px; text-align:left; } /*================================================================================ PAGE 2 This page must be split into two sections: the explanation div (panels 1 to 4) and the participation div (panel 5). ================================================================================*/ #extraDiv2 { position:absolute; height:100px; width:820px; top:1420px; background:url(paperedge.jpg) no-repeat bottom; left:50%; margin-left:-410px; } #explanation { position:relative; height:535px; margin-top:100px; background:#EEEACD; } #explanation p.p1 { position:absolute; left:3px; top:1px; width:459px; height:509px; background:url(P2PANEL1.jpg) no-repeat black; } #explanation p.p1 span { position: absolute; left: 197px; top: 3px; width: 256px; height: 116px; } #explanation p.p2 { position:absolute; left:462px; top:12px; width:295px; height:491px; background:url(P2PANEL2.jpg) no-repeat black; } #explanation p.p2 span { position: absolute; left: 10px; top: 7px; width: 272px; height: 128px; } #participation { position:relative; width:760px; height:795px; margin-top:-17px; /*hack: should not be needed*/ background:url(P2PANEL5.jpg) no-repeat #EEECD5 19px 343px; z-index:1; } #participation h3 { display:block; position:absolute; left:4px; top:0px; width:747px; height:343px; background:url(P2PANEL34.jpg) no-repeat black; margin:0; padding:0; } #participation h3 span { display:none; } #participation p { position:relative; top:583px; left:437px; width:299px; line-height:20%; margin-top:10px; margin-bottom:0; padding:0; } #participation p.p1 { margin:0; } #participation p span { font: 10px Arial, Helvetica, sans serif; text-align:left; line-height:100%; color:#EEECD5; font-weight:bold; } #participation a { text-decoration:underline; color:#EEECD5; } /*====================================================== PAGE 3 This page is a logistical nightmare. It must contain the BENEFITS text, the REQUIREMENTS text, the FOOTER text and the LINKLIST lists. ======================================================*/ #extraDiv3 { position:absolute; height:100px; width:820px; top:2840px; background:url(paperedge.jpg) no-repeat bottom; left:50%; margin-left:-410px; } #benefits { position:relative; height:726px; background:url(P3PANEL1.jpg) no-repeat black; margin-top:112px; } #benefits p.p1 { position:absolute; left:53px; top:418px; width:298px; height:80px; line-height:20%; text-align:center; margin:0; } #benefits p.p1 span { line-height:100%; text-align:center; } #requirements { position:relative; background:url(dots.gif) black; padding:10px; margin-top:10px; border:2px solid #FCC; width:440px; height:508px; } #requirements h3 { display:inline; float:right; background:url(sparky.gif) no-repeat; width:190px; height:190px; } #requirements h3 span { display:none; } #requirements p.p1 { } #requirements span { font: 9pt Arial, Helvetica, sans serif; line-height:140%; } #requirements p.p1 span { font-style:italic; } #requirements > p.p5 { display:none; /*this line is shown in the footer for MOSe browsers*/ } /*========================= #@%&#!!! LINKLIST. ==========================*/ #linkList { font:italic 10px Arial, Helvetica, sans serif; background:#EEECD5; width:280px; position:relative; margin-top:-593px; left:470px; padding-bottom:25px; } #linkList a span { font: 10px Arial Black, Helvetica, Arial, sans serif; text-transform:uppercase; line-height:100%; } #linkList ul { margin:0; padding:0; display:block; width:140px; border-bottom:2px dotted #200; } #linkList li { margin: 0; padding:8px 3px; border: 2px dotted #200; border-bottom:none; list-style: none; font-weight: bold; text-align:right; } #linkList a { display:block; font:9px Arial Black, Helvetica, Arial, sans serif; text-transform:uppercase; padding-bottom:22px; color:#300; } #linkList a.c { display:inline; font:italic 10px Arial, Helvetica, sans serif; padding-bottom:0; } #lselect { position:absolute; left:0; top:0; width:140px; background:#DEF; } #lselect li { border-right:none; } #larchives { position:relative; left:140px; top:0; width:140px; background:#FFC; } #larchives ul { border-bottom:none; } /* bit of a dodgy hack to get same size list items; IE screws up "height"*/ #larchives li, #lresources li { padding-bottom:21px; } #lresources { padding-top:64px; position:relative; left:140px; width:136px; background:url(adcc.gif) no-repeat #FFC 7px 10px; border:2px dotted #200; border-bottom:none; } #lresources li { border:none; border-top:2px dotted #200; } #lresources ul { width:136px; } /*================================================================ MOSe decorations for linklist. Proudly brought to you by the "Get A Real Browser!" Militant Action Group. ================================================================*/ li { background:url(ad1.gif) no-repeat white 5px 10px; } li + li { background:url(ad2.gif) no-repeat #DFACAC 5px 10px; } li + li + li { background:url(ad3.gif) no-repeat #A5A5D8 5px 10px; } li + li + li + li { background:url(ad5.gif) no-repeat #FFC 5px 10px; } li + li + li + li + li { background:url(ad4.gif) no-repeat white 5px 10px; } li + li + li + li + li + li, #larchives li { background:url(ad6.gif) no-repeat #DFACAC 5px 24px; } li + li + li + li + li + li + li, #larchives li + li { background:url(ad7.gif) no-repeat #A5A5D8 5px 10px; } li + li + li + li + li + li + li + li, #larchives li + li + li { background:url(ad8.gif) no-repeat #FFC 5px 10px; } /*====================== Rounding it off ======================*/ #footer { padding-top:3px; font:9px Arial, Helvetica, sans serif; display:block; position:relative; height:60px; z-index:1000; } /* ah, the foibles of interspersing content with design. But, you know, these are unrealistic restrictions in the real world... */ #footer:before { content:"Approved by the Comics Code of America. Bandwidth graciously donated by DreamFire Studios."; } #footer:after { content:". All images used in this Zen Garden are based on freely available images in the public domain. These images and the accompanying CSS are hereby returned to the public domain, as per the Creative Commons Public Domain Dedication (http://creativecommons.org/licenses/publicdomain/). Build on the past, and free your creativity. Fight for fair and reasonable copyright laws."; } #extraDiv4 { position:absolute; height:48px; width:820px; background:url(paperedge.jpg) no-repeat; left:50%; margin-left:-410px; margin-bottom:0px; }/* css Zen Garden submission 100 - '15 Petals', by Eric Meyer and Dave Shea, http://www.meyerweb.com/ and http://www.mezzoblue.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All photos copyright 2004, Eric Meyer */ /* All other graphics copyright 2004, Dave Shea */ /* Added: April 14th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* This design built specifically for 'More Eric Meyer on CSS'. http://more.ericmeyeroncss.com/ Don't miss chapter 10, "Designing in the Garden", which explores step by step the creation of this CSS Zen Garden design. */ body {margin: 0; padding: 0; text-align: center; color: #000; background: #FFF;} acronym {border: none;} a {text-decoration: none;} a:link {color: rgb(179,63,96);} a:visited {color: rgb(90,32,48);} a:hover {text-decoration: underline;} #container {width: 647px; margin: 75px auto 0; padding: 0; position: relative; text-align: left;} #pageHeader {background: url(pageHeader2.jpg) 0 0 no-repeat; height: 157px; width: auto; position: relative; z-index: 10;} #pageHeader h1 {background: url(ph-flower.gif) 0 0 no-repeat; height: 330px; width: 250px; position: absolute; z-index: 101; top: -95px; right: -80px; margin: 0;} html>body #pageHeader h1 {background-image: url(ph-flower2.png);} #pageHeader h1 span {visibility: hidden; font-size: 1px;} #pageHeader h2 {position: absolute; z-index: 102; top: 134px; right: 140px; margin: 0; padding: 0; color: rgb(91,131,104); text-transform: lowercase; letter-spacing: 0.2em; font: bold italic 1.1em/1em Times, serif; text-align: right;} #pageHeader acronym {text-transform: uppercase;} #quickSummary {font: italic 1em/2 Times, "Times New Roman", serif; color: rgb(42,92,42); background: rgb(94%,98%,96%) url(quickSummary.jpg) 0 100% no-repeat; margin: 1px 0; padding: 1em 180px 1.5em 1.5em;} #quickSummary p {display: inline;} #preamble, #supportingText {padding-right: 217px;} #preamble {background: url(side.jpg) 100% 100% repeat-y;} #supportingText {background: url(side.jpg) 100% 0 repeat-y;} #preamble, #explanation, #participation, #benefits, #requirements { border-left: 1px solid rgb(184,214,194); padding-top: 1px; padding-bottom: 1px;} #preamble {border-top: 1px solid rgb(184,214,194); padding-top: 0.5em;} #preamble p, #supportingText p {font-size: 90%; line-height: 1.66em; margin: 0 1.5em; padding: 0.5em 0;} #preamble h3, #supportingText h3 {letter-spacing: 0.1em; font: italic 1.2em Times, "Times New Roman", serif; color: rgb(107,153,139); margin: 1em 0 0.5em 0.5em;} #requirements {border-bottom: 1px solid rgb(184,214,194); padding-bottom: 100px; background: url(main.jpg) 0 100% no-repeat;} #footer {background: #FFF url(footer.jpg) 0 1px no-repeat; margin: 0 -217px 0 4px; height: 123px; padding: 60px 1em 0 0.5em;} html>body #footer {margin-left: 0;} #footer a {color: rgb(207,216,214); line-height: 1em; font-size: 1.25em; font-weight: 100;} #linkList {position: absolute; z-index: 11; width: 216px; top: 157px; right: 0; margin-top: 8.6em;} #linkList a {color: rgb(99,131,101); font: italic 1.15em Times, serif; text-transform: lowercase;} #linkList ul {margin: 0.5em 1em 0 2em; padding: 0;} #linkList li {list-style: none;} #linkList h3 {margin: 1em 0 0; width: 216px; height: 35px; background: url(resources.gif) 10px 50% no-repeat;} #lselect h3 {background-image: url(design-list.gif);} #larchives h3 {background-image: url(archives.gif);} #linkList h3 span {display: none;} #lselect li {font-size: 85%; margin-bottom: 1.5em;} #lselect li a {display: block; font: bold italic 1.15em Times, serif; letter-spacing: 0.2em; text-transform: lowercase;} #lselect li a.c {display: inline; font: bold 1em Times, serif; letter-spacing: 0; text-transform: none;} #larchives li, #lresources li {margin-bottom: 0.5em;} #larchives li a, #lresources li a {color: rgb(126,164,139);}/* css Zen Garden submission 101 - 'punkass', by Mikhel Proulx, http://www.mikhel.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Mikhel Proulx */ /* Added: May 3rd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0; padding: 0; background: transparent url(bg.gif) no-repeat top left; background-color: #ffffff; width: 1972px; height: 667px; font-family: Verdana; font-size: 11px; line-height: 110%; color: #333333; } a:link { font-weight: bold; color: #075E7B; text-decoration: none; } a:visited { font-weight: bold; color: #075E7B; text-decoration: none; } a:hover, a:active { font-weight: bold; color: #737373; text-decoration: underline; } #container { position: absolute; margin: 0px; padding: 0px; } #intro { position: absolute; margin: 0px; padding: 0px; z-index: 1; } #pageHeader { position: absolute; margin: 0px; padding: 0px; } #pageHeader h1 { z-index: 1; position: absolute; margin: 0px; padding: 0px; background: transparent url(tit.gif) no-repeat top left; width: 278px; height: 186px; left: 25px; top: 165px; } #pageHeader h1 span { display: none; } #pageHeader h2 { z-index:1; position: absolute; margin: 0px; padding: 0px; background: #fff url(cat.gif) no-repeat top left; width: 193px; height: 18px; left: 225px; top: 40px; opacity: .70; } #pageHeader h2 span { display: none; } #quickSummary { position: absolute; margin: 0px; padding: 0px; width: 300px; left: 230px; top: 50px; background: #fff; opacity: .70; } #quickSummary p { z-index:2; position: relative; margin: 0px; padding: 6px 0px 6px 0px; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display: none; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { position: relative; margin: 0px; padding: 6px 0px 6px 15px; } #preamble { position: absolute; margin: 0px; padding: 0px; background: #fff; width: 260px; height: 300px; left: 560px; top: 29px; opacity: .70; } #preamble h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(read.gif) no-repeat top left; width: 298px; height: 25px; } #supportingText { position: absolute; margin: 0px; padding: 0px; z-index: 0; } #explanation { position: absolute; margin: 0px; padding: 0px; width: 300px; height: 300px; left: 773px; top: 360px; background: #fff; opacity: .70; } #explanation h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_explanation.gif) no-repeat top left; width: 241px; height: 25px; } #participation { position: absolute; left: 1059px; top: 10px; padding: 0px; width: 300px; height: 400px; background: #fff; opacity: .70; } #participation h3 { position: relative; margin: 0px 0px 0px 0px; padding: 0px; background: transparent url(head_participation.gif) no-repeat bottom left; width: 142px; height: 25px; } #benefits { position: absolute; left: 1260px; top: 470px; padding: 0px; background: transparent; width: 300px; height: 170px; background: #fff; opacity: .70; } #benefits h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_benefits.gif) no-repeat top left; width: 94px; height: 25px; } #requirements { position: absolute; margin: 0px; padding: 0px; background: transparent; width: 300px; height: 300px; left: 1593px; top: 23px; background: #fff; opacity: .70; } #requirements h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_requirements.gif) no-repeat top left; width: 153px; height: 25px; } #footer { position: absolute; margin: 0px; padding: 0px; background: transparent; width: 300px; left: 1650px; top: 633px; background: #fff; opacity: .70; } #linkList { margin: 0px; padding: 0px; } #linkList ul { position: relative; margin: 0px; padding: 2px 0px 0px 23px; list-style-type: none; } #linkList li { position: relative; margin: 0px; padding: 2px 0px 1px 0px; } #linkList a { font-weight: normal; } #linkList2 { position: relative; margin: 0px; padding: 0px; } #lselect h3 span, #larchives h3 span, #lresources h3 span { display: none; } #lselect { position: absolute; margin: 0px; padding: 0px; width: 145px; left: 360px; top: 189px; background: #fff; opacity: .70; } #lselect h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_select.gif) no-repeat top left; width: 127px; height: 19px; } #lselect a { margin: 0px; padding: 4px 0px 0px 0px; font-weight: bold; display:block; } #lselect a.c { margin: 0px; padding: 0px; font-weight: normal; display:inline; } #larchives { position: absolute; margin: 0px; padding: 0px; width: 270px; left: 30px; top: 461px; background: #fff; opacity: .70; } #larchives h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_archives.gif) no-repeat top left; width: 72px; height: 19px; } #lresources { position: absolute; left: 45px; top: 535px; padding: 0px; width: 270px; background: #fff; opacity: .70; } #lresources h3 { position: relative; margin: 0px; padding: 0px; background: transparent url(head_resources.gif) no-repeat top left; width: 88px; height: 19px; } #extraDiv1 { position: absolute; margin: 0px; padding: 0px; background: transparent; width: 5px; height: 258px; left: 1095px; top: 117px; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; }/* css Zen Garden submission 102 - 'Revolution!', by David Hellsing, http://www.monc.se/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, David Hellsing */ /* Added: May 3rd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* This design was made by David Hellsing for monc. */ /* ////////// GENERAL ////////// */ body { background: #e15 url(img/body_bg.gif) fixed; margin: 0; padding: 0; } /* ////////// TYPOGRAPHY ////////// */ p,ul,ol,li,dt,dl,dd,h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0;} p { font: small/1.8em georgia, tahoma, verdana, tahoma, arial, helvetica, sans-serif; color: #333; } h1,h2,h3,h4,h5,h6 { font: 100% Arial Black, verdana, tahoma, sans-serif; } p { margin-bottom: 9px; } a { color: #26a; text-decoration: none; font-weight: bold; } a:active { color: #000; border-bottom: 1px dotted #000; } a:visited { color: #048; } a:hover { color: #c32; border-bottom: 1px dotted #c32; } h3 { height: 20px; width: 240px; margin: 20px 0 7px 0; } #preamble h3 { background: url(img/head_theroad.gif) no-repeat; } #explanation h3 { background: url(img/head_sowhat.gif) no-repeat;} #participation h3 { background: url(img/head_participation.gif) no-repeat;} #benefits h3 { background: url(img/head_benefits.gif) no-repeat;} #requirements h3 { background: url(img/head_requirements.gif) no-repeat;} .p1,.p2,.p3,.p4,.p5 { padding: 0 30px 0 20px; } span.accesskey { border-bottom: 1px solid #888;} acronym { font-style: normal; font-size: 90%; letter-spacing: 1px; font-weight: bold; border: none; } #pageHeader h1 { width: 100%; height: 100%; background: transparent url(img/top.jpg) no-repeat; } #quickSummary p.p2 { margin: 10px 30px 0 0; padding: 0 0 8px 0; text-transform: uppercase; font: 9px/20px georgia, tahoma, verdana, arial, sans-serif; border-bottom: 1px dotted #333; } #quickSummary p.p2 span { text-transform: uppercase; } /* IE5/win */ #footer a { margin: 5px 20px 0 0; padding: 2px 5px; border-left: 1px solid #26a; border-right: 1px solid #26a; font: 9px/20px georgia, tahoma, verdana, arial, sans-serif; text-transform: uppercase; } #footer a:hover { background: #26a; color: #fff; } #pageHeader h1 span, #pageHeader h2, #quickSummary p.p1, h3 span { display: none; visibility: hidden; } /* ////////// CONTAINERS ////////// */ #container { margin: 0 6%; background: #f4f2ea url(img/container_bg.jpg); border-left: solid 8px #000; border-right: solid 8px #000; border-bottom: solid 32px #000; } #pageHeader { margin: 0; background: #000 url(img/top_bg.jpg); height: 462px; } #footer { margin: 20px 30px 50px 20px; padding-top: 10px; border-top: 1px dotted #000; } #quickSummary { margin-left: 250px; } #preamble { position: relative; margin-left: 230px; text-align: left; } #supportingText { position: relative; margin-left: 230px; text-align: left; } /* ////////// LISTS ////////// */ #linkList { position: absolute; top: 480px; margin-left: 30px; background: url(img/left_bg2.jpg) repeat-y top left; width: 180px; } #linkList2 { font: 9px/12px georgia, tahoma, verdana, arial, helvetica, sans-serif; text-transform: uppercase; color: #333; border-bottom: 5px solid #000; width: 170px; } #linkList ul { list-style: none; } #linkList li { margin: 0 15px; border-top: 1px dotted #333; padding: 8px 0; text-transform: uppercase; } #linkList li a { display: block; color: #c32; font: bold 11px/16px georgia, tahoma, verdana, arial, helvetica, sans-serif; text-transform: none; } #linkList li a:hover { color: #000; border: none; } #linkList li a.c { color: #333; font-size: 9px; font-weight: normal; display: inline; padding: 0; text-transform: uppercase; } #linkList li a.c:hover { color: #888; } #larchives li a, #lresources li a { display: inline; font-weight: normal; font-size: 9px; line-height: 15px; padding: 0; margin: 0; text-transform: uppercase; } #lselect h3, #larchives h3, #lfavorites h3, #lresources h3 { width: 170px; height: 30px; margin: 0 0 -1px 0; } #lselect h3 { background: transparent url(img/left_lselect.gif) no-repeat; } #larchives h3 { background: transparent url(img/left_larchives.gif) no-repeat; } #lfavorites h3 { background: transparent url(img/left_lfavorites.gif) no-repeat; } #lresources h3 { background: transparent url(img/left_lresources.gif) no-repeat; } /* END OF PAGE --> *//* css Zen Garden submission 103 - 'Odyssey', by Terrence Conley, http://www.liquidarch.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Terrence Conley */ /* Added: May 3rd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Inspired by Homer's Odyssey*/ /* All original artwork copyright 2004, Terrence Conley */ /*B A S I C T A G R U L E S */ body { color: #000; background:url(ody-bg3.jpg) repeat-y #000 fixed; margin:0; padding:0; } h3 span, h2 span, h1 span{ display:none; margin:0; padding:0; } h3, h2, h1, p{ margin:0; padding:0; } a:link, a:visited { text-decoration: none; color: #C29E47; } a:hover, a:active { text-decoration: underline; color: #FFEAC8; } acronym{ margin:0; cursor:help; } ul{ list-style:none; margin:0; padding:0 0 10px 0; } /* M A C R O R U L E S */ #container { position: relative; margin-bottom: 0px; margin-left:auto; margin-right:auto; } #intro { position:relative; width:auto; margin-bottom:0px; margin-left:35px; background:url(intro-bg.gif) top left repeat-x transparent; } #supportingText{ width:424px; margin-left:33px; text-align:center; font:.8em/1.5em arial,sans-serif; } #supportingText p{ text-align:left; margin:20px 105px 20px 30px; padding:0; } #supportingText .p1{ padding:0; margin-top:-40px; } * html #supportingText.p1 {margin-top:0px;} #supportingText .p5{ margin-bottom:10px; font:11px/14px arial, sans-serif; font-style:italic; } #linkList{ background:transparent; position:absolute; left:405px; right:0px; top:98px; height:320px; color:#73552A; font-size:.6em; font-family:arial, sans-serif; overflow:hidden; background:url(list-bg.gif) bottom right repeat-y; } * html #linkList {left:375px; right:36px} #linkList2{ height:100%; background:url(blend.gif) repeat-y; padding:12px 25px 5px 15px; } /* M I C R O R U L E S */ #pageHeader{ height:98px; background:url(title2.gif) -2px 0px no-repeat; margin-left:0px; } #pageHeader h1, #pageHeader h2{ display:none; } #quickSummary{ position:absolute; left:425px; top:425px; text-align:left; width:18em; height:95px; color:#AF9874; padding:0px 10px; } * html #quickSummary{top:435px;} #quickSummary p{ font:.7em/1.2em arial, sans-serif; font-style:italic; } #quickSummary .p2{ color:#E4CF9D; line-height:10px; line-height:30px; } #preamble{ height:450px; width:424px; font:12px/15px arial, georgia, serif; font-style:italic; position:relative; color:#AF9874; background:url(preamb2.gif) -2px 231px no-repeat; text-align:left; overflow:hidden; } #preamble p{ margin-top:4px; margin-left:20px; width:310px; text-indent:10px; } #preamble h3{ color:#E4CF9D; height:20px; padding-top:20px; margin:0px; margin-left:20px; background:url(preamb_title.gif) bottom left no-repeat; } #preamble acronym, #quickSummary acronym{ color:#E4CF9D; } #explanation .p1{ text-indent:10px; margin-top:-90px; } #explanation{ color:#E4CF9D; padding:0; margin-bottom:-30px; } #explanation h3{ margin:0; background:url(hd-explain.gif) 0 0 no-repeat transparent; height:134px; } #participation{ margin-bottom:-30px; margin-top:2em; color:#E4CF9D; padding:0; } #participation h3{ background:url(hd-partic.gif) 0 0 no-repeat transparent; height:134px; } #benefits{ margin-bottom:-30px; margin-top:2em; color:#E4CF9D; padding:0; } #benefits h3{ background:url(hd-benefits.gif) 0 0 no-repeat transparent; height:134px; } #requirements{ margin-top:2em; color:#E4CF9D; padding:0; } #requirements h3{ background:url(hd-require.gif) 0 0 no-repeat transparent; height:134px; } #footer{ background:url(footer.gif) top left no-repeat black; height:56px; text-align:left; padding-left:30px; } #footer a:link, #footer a:visited { color: #C29E47; text-transform:uppercase; font:11px/54px arial, serif; } #footer a:hover{ text-decoration: none; color: #FFEAC8; text-transform:uppercase; } /* T H E L I S T S */ #lselect h3, #larchives h3, #lfavorites h3, #lresources h3 { color:#E4CF9D; padding-left:12px; } #lselect h3{ background:url(select.gif) 0 0 no-repeat; height:17px; } * html #lselect h3 {height:17px;} #larchives h3{ background:url(archives.gif) 0 0 no-repeat; height:17px; } * html #larchives h3 {height:17px;} #lfavorites h3{ background:url(favorites.gif) 0 0 no-repeat; height:17px; } * html #lfavorites h3 {height:17px;} #lresources h3{ background:url(resources.gif) 0 0 no-repeat; height:17px; } * html #lresources h3 {height:17px;} #lselect, #lfavorites{ float:left; margin-right:0px; width:18em; } #larchives{ float:left; margin-right:0px; width:14em; } #lresources{ float:left; margin-right:0px; width:16em; } #lselect h3, #larchives h3, #lresources h3, #lfavorites h3{ margin:0 0 4px 0; } #lselect li, #lfavorites li{ padding-bottom:6px; padding-left:25px; background:url(bullet.gif) 14px .4em no-repeat; } #lselect li a, #lfavorites li a{ display:inline; } #larchives li, #lresources li{ padding-bottom:2px } #lselect a:link, #lselect a:visited, #lfavorites a:link, #lfavorites a:visited{ font-family:georgia,"times new roman", serif; font-size:120%; padding-bottom:2px; color:#E4CF9D; text-transform:capitalize; } #lselect a:hover, #lfavorites a:hover{ font-family:georgia,"times new roman", serif; font-size:120%; color:#C29E47; padding-bottom:2px; text-transform:capitalize; text-decoration:none; } #lselect a.c:link, #lselect a.c:visited, #lfavorites a.c:link, #lfavorites a.c:visited{ background:transparent; font-size:100%; color:#AF9874; padding:0; display:inline; } #lselect a.c:hover, #lfavorites a.c:hover{ background:transparent; font-size:100%; color:#C29E47; display:inline; padding:0; } #larchives a,#lresources a{ font-family:georgia,"times new roman", serif; color:#E4CF9D; text-transform:capitalize;; font-size:100%; padding:0 0 10px 30px; } #larchives a:hover,#lresources a:hover{ color:#C29E47; } /* E X T R A D I V S */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none} /* css Zen Garden submission 104 - 'Invitation', by Brad Dailey, http://bradleyboy.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Brad Dailey */ /* Added: May 31st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { background:#968354 url(zen_bg.gif) repeat-y center; margin:0; padding:0; font: 13px/15px georgia; text-align:center; } .p1 { margin-top:0px; } p { margin-left:15px; } a { color:#968354; } a:hover { color:#7e7e7e; } h1 { background:#ffffff url(head.gif); width:710px; height:200px; margin:10px 0 0 0; padding:0; } h1 span, h2 { display:none; } #container { position:relative; width:710px; margin:0 auto 0; padding:0; text-align:justify; } #quickSummary { text-align:center; font-style:italic; color:#7e7e7e; width:500px; margin:0 105px 0; font-size:11px; } #quickSummary a { color:#7e7e7e; } #quickSummary a:hover { color:#333333; } #quickSummary .p1 { margin-top:8px; margin-bottom:0; } #quickSummary .p2 { margin-top: 5px; } #quickSummary p { margin-left:0; } #preamble { width:450px; margin-top:20px; } #preamble h3 { background:transparent url(1.gif) no-repeat; height:35px; margin:0; padding:0; } #preamble h3 span { display:none; } #explanation h3 { background:transparent url(2.gif) no-repeat; height:35px; margin:0; padding:0; } #explanation h3 span { display:none; } #supportingText { width:450px; margin-top:15px; } #participation h3 { background:transparent url(3.gif) no-repeat; height:35px; margin:0; padding:0; } #participation h3 span { display:none; } #benefits h3 { background:transparent url(4.gif) no-repeat; height:35px; margin:0; padding:0; } #benefits h3 span { display:none; } #requirements h3 { background:transparent url(5.gif) no-repeat; height:35px; margin:0; padding:0; } #requirements h3 span { display:none; } #linkList { position:absolute; top:310px; left:50%; margin-left:112px; width:240px; background: url(side_02.gif) repeat-y; text-align:left; } #lselect h3 { background:transparent url(side_01.gif) no-repeat center; height:51px; margin:0; padding:0; } #lselect h3 span { display:none; } #lselect ul, #larchives ul, #lresources ul { list-style:none; margin:12px 0 0 0; padding:0 18px 0 18px; } #lselect ul li, #larchives ul li, #lresources ul li { padding:0 0 0 16px; margin: 0 0 12px 5px; background: url(bull.gif) no-repeat 0 2px; } #larchives a, #lresources a { font-weight:bold; } #lselect a:hover, #larchives a:hover, #lresources a:hover { color:#000; } #lselect a { display:block; margin-bottom:5px; font-weight:bold; } #lselect a.c { display:inline; text-decoration:none; color:#7e7e7e; border:0; font-weight:normal; } #lselect a.c:hover { color:#333333; text-decoration:none; border:0; } #lresources { background: url(side_03.gif) no-repeat bottom right; padding-bottom:10px; } #lresources h3 { background:transparent url(res.gif) no-repeat center; height:40px; margin:0; padding:0; } #lresources h3 span { display:none; } #larchives h3 { display:none; } #footer { text-align:center; padding-bottom:10px; } #footer a { text-decoration:none; font-weight:bold; } #footer a:hover { text-decoration:underline; color:#000; } #extraDiv1 { position:absolute; top:1325px; width:240px; height:174px; background-image: url(env.jpg); left:50%; margin-left:112px }/* css Zen Garden submission 105 - 'Austrian's Dark Side', by Rene Grassegger, http://www.grassegger.at/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Rene Grassegger */ /* Added: May 31st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { font: 12px/16pt "Courier New",monospace !important; color: #fff; background: #000 url(body_bg2.jpg) no-repeat bottom right; } html, body, p, h1, h2, h3, div, ul { margin: 0; padding: 0; } acronym { cursor: help; color: #900; border-bottom: 1px dotted #900; } acronym:hover { border-bottom: 3px solid #f00; font-size: 1.5em; color: #f00; font-weight: bold; } h1, h2, h3 { display: none; } a:link { font-weight: bold; text-decoration: none; color: #f00; } a:visited { font-weight: bold; text-decoration: none; color: #f00; } a:hover, a:active { text-decoration: underline; color: #f00; } /* specific divs */ #container { background: url(csszengarden_bg.jpg) no-repeat top left; position: absolute; top: 0; left: 0; width: 100%; } #quickSummary { position: absolute; top: 20px; left: 350px; background: url(starttext_bg.jpg) no-repeat; clear: both; margin: 0; width: 350px; float: left; } #quickSummary .p1 { font: 12px "Courier New" !important; color: #000; padding: 23px 10px 0 30px; height: 95px; } #quickSummary .p2 { position: absolute; top: -20px; left: 35px; color: #fff; } #preamble { position: absolute; top: 155px; left: 280px; background: url(roadtoenlightment.jpg) no-repeat; height: 416px; width: 466px; margin: 0; padding: 0; } #preamble p { font: 12px "Courier New" !important; color: #000; margin: 0 0 0px 0; padding: 20px 45px 0px 150px; } #preamble .p1 { margin-top: 35px; } #explanation { position: absolute; top: 582px; left: 268px; background: url(sowhatisitabout_bg.jpg) no-repeat; height: 465px; width: 476px; margin: 0; padding: 0; } #explanation p { font: 12px "Courier New" !important; color: #000; margin: 40px 0 -35px 0; padding: 20px 45px 0px 150px; } #participation { position: absolute; top: 1042px; left: 268px; background: url(partcipation_bg.jpg) no-repeat; width: 484px; height: 532px; margin: 0; padding: 0; } #participation p { font: 12px "Courier New" !important; color: #000; margin: 40px 0 -35px 0; padding: 20px 45px 0px 150px; } #benefits { position: absolute; top: 1582px; left: 168px; background: url(benefits_bg.jpg) no-repeat; width: 586px; height: 192px; margin: 0; padding: 0; } #benefits p { font: 12px "Courier New" !important; color: #000; margin: 40px 0 -35px 0; padding: 10px 45px 0px 180px; } #requirements { position: absolute; top: 1802px; left: 68px; background: url(requirements_bg.jpg) no-repeat; width: 677px; height: 586px; margin: 0 0 0 0; padding: 0; } #requirements p { font: 12px "Courier New" !important; color: #000; margin: 40px 0 -35px 0; padding: 10px 45px 0px 180px; } #footer { text-align: center; } #footer a:link, #footer a:visited { margin-right: 20px; } #footer { position: absolute; top: 2700px; left: 30%; } #linkList { background: url(sidebar_bg2.jpg) no-repeat top center; position: relative; top: 349px; left: 15px; margin: 0; padding: 0; height: 950px; width: 211px; color: #000; } #linkList a { font-weight: normal; } #linkList2 { font: 11px "Courier New", Courier, monospace; position: absolute; top: 105px; left: 25px; } #lselect { width: 162px; background: url(archives_bg.gif) no-repeat bottom center; padding-bottom: 100px; } #larchives { background: url(resourcen_bg.gif) no-repeat bottom right; padding-bottom: 100px; width: 142px; text-align: center; } #lresources { width: 160px; text-align: center; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #ea0000; } #linkList li a:visited { color: #ea0000; } /* css Zen Garden submission 106 - 'Mediterranean', by John Whittet, http://www.basseq.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, John Whittet */ /* Added: May 31st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* image: Erdogan Ergun http://yunus.hacettepe.edu.tr/~ergun/ http://www.sxc.hu */ /* Works as expected in: Mozilla 1.6 Mac Safari 1.0 Mac Firefox 0.8 Mac Small loss of effects in: IE 5.2 Mac IE 5.0 PC Errors in: Opera 6.03 Mac - link colors incorrect - overline instead of underline (??) */ /* Basic Default Styles */ body { font: 12px Verdana; color: #000; background: #DFE3BA; margin: 5px 0 5px 50%; } a:link, a:visited { font: 12px "Trebuchet MS", Verdana; text-decoration: underline; color: #000; } a:hover, a:active { font: 12px "Trebuchet MS", Verdana; text-decoration: none; color: #A03E19; } /* I probably would have left off the border on the container, but Safari puts some sort of weird top margin on the div if there's no border. Silly, really. */ #container { position: relative; width: 700px; background: #ADB583 url(header.jpg) no-repeat top left; margin: 0 0 0 -350px; /* Could also use margin-left and -right: auto but IE 5 PC doesn't like that */ border: 5px solid #FFF; } h3 { color: #A03E19; font: 22px "Trebuchet MS", Verdana; margin: 0; text-transform: lowercase; } acronym { border: 0; font-style: normal; } /* Header - just provides space */ #pageHeader { height: 350px; } #pageHeader span { display: none; } /* Content */ #quickSummary { margin-top: 50px; width: 430px; margin-left: 250px; color: #42443A; } #quickSummary a:link, #quickSummary a:visited { color: #42443A; } #quickSummary a:hover, #quickSummary a:active { color: #42443A; } /* This .p1 info is in the header image... */ #quickSummary .p1 { display: none; } #preamble, #supportingText { width: 430px; margin-left: 250px; margin-top: 15px; } #footer { position: relative; left: -250px; width: 400px; height: 20px; padding: 78px 0 0 50px; background: #ADB583 url(footer.jpg) no-repeat top left; } #footer a:link, #footer a:visited { color: #61A7BC; text-decoration: none; } #footer a:hover, #footer a:active { color: #61A7BC; text-decoration: underline; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* Left Bar */ #container #linkList { position: absolute; left: 18px; top: 340px; width: 198px; font: 10px "Trebuchet MS", Verdana; } #linkList h3 { width: 198px; height: 18px; margin-top: 20px; } #linkList h3 span { display: none; } /* left header images */ #linkList h3.select { background: url(left_select.gif) no-repeat top left; } #linkList h3.archives { background: url(left_archive.gif) no-repeat top left; } #linkList h3.resources { background: url(left_resources.gif) no-repeat top left; } #linkList h3.favorites { background: url(left_favorites.gif) no-repeat top left; } #linkList ul { list-style: none; padding: 0 0 18px 0; margin: 0; background: url(left_footer.gif) no-repeat bottom left; } #linkList ul li { padding: 5px 10px 5px 10px; background: url(li_bg.png) bottom left; border-bottom: 1px solid #1A4861; margin: 0; } /* li:hover style... have to replace the BG so the color will show up. */ #linkList ul li:hover { background: #A03E19 url(spacer.gif); color: #FFF; } /* bunch of crazy styles... so IE will still look ok when it doesn't parse :hover. */ #linkList #lselect { color: #666; } #linkList ul li a { /* this would be block, save for the nbsp at the end of the link for "accessibility" purposes. :P */ display: inline; color: #000; text-transform: lowercase; } #linkList #lselect ul li a { font: 14px "Trebuchet MS", Verdana; display: block; color: #000; text-transform: lowercase; } #linkList #lselect ul li a.c, #linkList ul li a.c { display: inline; font: 10px "Trebuchet MS", Verdana; color: #666; text-transform: none; } /* if the browser doesn't read the :hover pseudoclass, this shouldn't render and the text shouldn't change color */ #linkList ul li:hover a, #linkList #lselect ul li:hover a { color: #FFF; } /* Crazy :Hovers Experimentation uncomment for fun */ /* #preamble p, #explanation p, #participation p, #benefits p, #requirements p { display: none; } #preamble:hover p, #explanation:hover p, #participation:hover p, #benefits:hover p, #requirements:hover p { display: block; } #lselect ul, #larchives ul, #lresources ul { display: none; } #lselect:hover ul, #larchives:hover ul, #lresources:hover ul { display: block; } *//* css Zen Garden submission 107 - 'Defiance', by Angelo Paralos, http://www.ehlydesign.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Angelo Paralos */ /* Added: June 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* BASE Elements */ a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:x-small; font-weight:bold; color:#000000; } a:active { text-decoration:line-through; } a:visited { text-decoration:line-through; } a:hover { text-decoration:line-through; } acronym { } body { background:#000000 url("screwoff.gif") no-repeat top left; } div { } h1 { margin:0px; padding:0px; } h2 { margin:0px; padding:0px; } h3 { margin:0px; padding:0px; } head { } html { } li { } link { } meta { } p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:x-small; color:#000000; font-weight:bold; padding:0px; margin:0px 0px 10px 0px; } script { } span { } style { } title { } ul { } /* ID Elements */ #css-zen-garden { padding:0px; margin:0px; } #container { width:760px; height:3000px; padding:0px; margin:0px; } #intro { } #intro h1 span { display:none; } #intro h2 span { display:none; } #pageHeader { } #quickSummary p.p1 { width:115px; position:absolute; left:15px; top:588px; color:#FFFFFF; } #quickSummary p.p2 { position:absolute; left:5px; top:2985px; color:#FFFFFF; } #quickSummary a:link { color:#FFFFFF; } #quickSummary a:active { color:#FF0000; text-decoration:line-through; } #quickSummary a:visited { color:#FF0000; text-decoration:line-through; } #quickSummary a:hover { color:#FF0000; text-decoration:line-through; } #preamble { width:195px; position:absolute; left:215px; top:700px; } #preamble p.p1{ position:absolute; left:-50px; } #preamble p.p2{ position:absolute; top:55px; left:-30px; } #preamble p.p3{ position:absolute; top:120px; left:20px; } #preamble h3 span { display:none; } #supportingText { } #explanation h3 span { display:none; } #explanation { width:455px; position:absolute; top:1190px; left:265px; } #participation h3 span { display:none; } #participation { width:100px; position:absolute; top:1412px; left:23px; } #benefits h3 span { display:none; } #benefits { width:577px; position:absolute; top:1932px; left:155px; } #requirements h3 span { display:none; } #requirements { width:520px; position:absolute; top:2408px; left:197px; text-align:right; } #requirements p.p5{ width:520px; position:absolute; top:550px; left:-100px; text-align:right; color:#FFFFFF; } #requirements p.p5 a { color:#FFFFFF; } #requirements p.p5 a:active { color:#FF0000; text-decoration:line-through; } #requirements p.p5 a:visited { color:#FF0000; text-decoration:line-through; } #requirements p.p5 a:hover { color:#FF0000; text-decoration:line-through; } #footer { position:absolute; top:2985px; left:600px; } #footer a { color:#FF0000; text-decoration:none; } #footer a:active { text-decoration:line-through; } #footer a:visited { text-decoration:line-through; } #footer a:hover { text-decoration:line-through; } #linkList { position:absolute; top:710px; left:0px; color:#FF0000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:x-small; font-weight:bold; } #linkList h3 { margin:0px; padding:0px; color:#FF0000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:x-small; font-weight:bold; } #linkList ul { margin:0px; padding:0px; } #linkList li { margin:0px 0px 0px 5px; padding:0px; list-style-type:none; line-height:9px; } #linkList a { display:block; margin:0px; padding:0px; color:#FF0000; text-decoration:none; } #linkList a:active { text-decoration:line-through; } #linkList a:visited { text-decoration:line-through; } #linkList a:hover { text-decoration:line-through; }/* css Zen Garden submission 109 - 'Pneuma', by Adam Polselli, http://www.adampolselli.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Adam Polselli */ /* Added: June 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements -------------------------------------*/ a { font-weight: bold; } a:link, a:visited { text-decoration: none; color: #333; } a:hover, a:active { text-decoration: underline; color: #F36; } acronym { border: none; cursor: help; } body { background: #414141 url(pagebg.gif) repeat-y top center; font: 69%/1.5em 'Lucida Sans Unicode', 'Lucida Grande', verdana, arial, sans-serif; color: #333; margin: 0; padding: 0; text-align: center; } p { margin: 0 0 10px; } /* specific divs --------------------------------------*/ #container { position: relative; background: transparent; margin: 0 auto; text-align: justify; width: 600px; } #container h3 { font-size: 110%; font-weight: bold; margin-bottom: 10px; margin-top: 10px; } #pageHeader { margin: 0; padding-top: 15px; height: 300px; background: #FFF url(header.jpg) no-repeat bottom; border-bottom: 15px solid #FFF; } #pageHeader h1, #pageHeader h2 { margin: 0; padding: 0; display: none; } #quickSummary { position: absolute; bottom: 0; right: 0; z-index: 2; width: 170px; padding: 0 6px 5px; margin: 0; } #quickSummary a { color: #377774; } #quickSummary p { font-size: 90%; text-align: left; color: #377774; margin: 0; } #quickSummary p.p1 { margin: 0; padding: 0; display: none; } #preamble { background: url(preamblebg.gif) repeat-y; position: absolute; top: 330px; right: 0; z-index: 2; width: 190px; font-size: 90%; color: #FFF; text-align: left; border-bottom: 15px solid #FFF; line-height: 14px; } #preamble p { margin: 0 17px 15px 15px; } #preamble h3 { height: 58px; margin: 0; padding: 0; background: url(preambleheader.jpg) no-repeat top; } #preamble h3 span { margin: 0; padding: 0; display: none; } #supportingText { margin: 0 205px 0 0; background: #D8FBFC url(suptextbg.gif) repeat-y; } #supportingText p { margin: 0 20px 15px 20px; } #explanation h3 { height: 46px; margin: 0; padding: 0; background: url(explanation.gif) no-repeat top; } #explanation h3 span { margin: 0; padding: 0; display: none; } #participation h3 { height: 37px; margin: 0; padding: 0; background: url(participation.gif) no-repeat top left; } #participation h3 span { margin: 0; padding: 0; display: none; } #benefits h3 { height: 37px; margin: 0; padding: 0; background: url(benefits.gif) no-repeat top left; } #benefits h3 span { margin: 0; padding: 0; display: none; } #requirements h3 { height: 37px; margin: 0; padding: 0; background: url(requirements.gif) no-repeat top left; } #requirements h3 span { margin: 0; padding: 0; display: none; } #footer { background: #999 url(footerbg.gif) repeat-y 0 0; border-top: 15px solid #FFF; padding: 10px 15px 10px 10px; text-align: right; margin: 0; } #footer a { margin-left: 20px; color: #CCC; } #footer a:hover, #footer a:active { color: #FFF; } #linkList { background: transparent; padding: 0; margin: 0; width: 190px; position: absolute; top: 704px; right: 0; font-size: 90%; } #linkList ul { margin: 0; padding: 0; list-style: none; } #lselect ul, #larchives ul, #lresources ul { margin-top: -10px; margin-bottom: -10px; } #linkList li { display: block; padding: 8px 0 7px 12px; margin: 0; line-height: 160%; border-bottom: 1px solid #FFF; } #linkList li a { color: #333; font: bold 110% arial, helvectica, sans-serif; } #linkList li:hover { background: url(selecthoverbg.gif) 0 0; } #linkList li:hover a { color: #FFF; } #lselect { color: #377774; } #lselect li:hover { background: url(selecthoverbg.gif); color: #FFB9CB; } #lselect li a { text-transform: uppercase; font: bold 110% arial, helvectica, sans-serif; display: block; margin: 0; padding: 0; } #lselect li:hover a { color: #FFF; } #lselect li a.c:link, #lselect li a.c:visited { display: inline; font-weight: normal; text-transform: none; font-size: 100%; color: #377774; } #lselect li:hover a.c { color: #FFB9CB; } h3.select { height: 29px; margin: 0; padding: 0; background: url(select.gif) no-repeat; } h3.select span { margin: 0; padding: 0; display: none; } h3.archives { height: 30px; margin: 0; padding: 0; background: url(archives.gif) no-repeat; } h3.archives span { margin: 0; padding: 0; display: none; } h3.resources { height: 26px; margin: 0; padding: 0; background: url(resources.gif) no-repeat; } h3.resources span { margin: 0; padding: 0; display: none; }/* css Zen Garden submission 110 - 'Perfume de Gardenias', by Armando Sosa, http://nolimit-studio.com/yosoysosa/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Armando Sosa */ /* Added: June 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 10px/16px verdana; color: 333; margin: 0px; background:#f60 url('bg.gif') repeat-y; } h3 { font-family:georgia; font-style:italic; font-size:14px; letter-spacing: 1px; margin-bottom: 0px; text-align:center; color:#c00; } a:link { font-family:"courier new",verdana; font-weight: bold; text-decoration: none; color:#c00; text-transform:uppercase; } a:visited { font-weight: bold; text-decoration: none; } a:hover, a:active { text-decoration: underline; } /* specific divs */ #container { position:absolute; top:0; left:50px; width:90%; color:#333; padding:0 30px; } #intro,#supportingText{ text-align:justify; } #intro abbr,#intro acronym #supportingText abbr,#supportingText acronym{ font-family:"courier new",verdana; text-transform:uppercase; color:#000; } #pageHeader { position:absolute; top:0; left:0; width:650px; height:400px; background:#fcc url('head_bg.gif') repeat-x -50px;; } #pageHeader h1{ top:-40px; left:45px; position:absolute; width:515px; height:70px; text-indent:-5000px; background:transparent url('zengardenia.gif') no-repeat bottom; } #pageHeader h2{ font-family:georgia; font-size:25px; font-style:italic; position:absolute; top:15px; left:130px; padding:0px !important; padding:20px; color:#900; z-index:2 } #quickSummary{ position:absolute; top:65px; left:100px; width:350px; font-family:georgia; font-size:13px; font-weight:bold; text-align:center; padding:15px; color:#000; z-index:3; } #preamble{ position:absolute; top:200px; width:450px; left:50px; padding:10px; } #supportingText{ padding:15px; position:absolute; top:500px; left:230px; width:360px; height:600px; overflow:auto; /* I've used an ExtraDiv to display the background behind this layer, but IE doesn't like my idea. So i put the background directly in the Div for browsers that do not support "!important" */ background:transparent !important; background:transparent url('supp_bg.gif') no-repeat fixed; z-index:2; } #explanation{ margin-top:50px; } #footer{ padding-bottom:100px; } #linkList{ text-align:center; width:200px; height:600px; position:absolute; top:560px; left:5px; padding:75px 25px 0px 0px; color:#b63; background:transparent url('sidebar_bg.gif') no-repeat; } #linkList h3{ color:#c96; } #linkList ul{ margin:0px; padding:15px; } #linkList li{ margin:0; padding:0; list-style:none inside; display:block; padding:2px; } #linkList a{ font-family:verdana; color:#c96; } h3.select{ display:none; } #lselect ul li{ padding-bottom:5px; margin-bottom:5px; border-bottom:dotted 1px #b63; } #lselect ul li a{ display:block; } #lselect ul li a.c{ display:inline; text-transform:lowercase; } #lresources{ left:-5px; top:710px; width:651px; position:absolute; color:#333; background:#900; } #lresources h3{ display:none; } #lresources ul li{ display:inline; } /* Extra Divs */ /* I've used all and everyone of the six provided by the XHTML maybe if there were more, i would used it too :P*/ #extraDiv1{ position:absolute; top:-65px ; left:580px; width:150px; height:615px; background:transparent url('girl.gif') no-repeat; z-index:2; } #extraDiv2{ position:absolute; top:1070px ; left:250px; width:150px; height:200px; background:transparent url('girl.gif') no-repeat; z-index:2; } /*Because of some weird thing, I cannot make this layer to go under the supportingText one, so i've discovered for accident that leaving no space between the url for the graphic used in the background and the no-repeat attribute causes IE to not display any background at all*/ #extraDiv3{ position:absolute; top:470px; left:270px; width:430px; height:700px; background:transparent url('supp_bg.gif')no-repeat; z-index:0; } #extraDiv4{ position:absolute; top:1098px; left:590px; background:transparent url('gardenia.gif') no-repeat; width:200px; height:180px; } #extraDiv5{ position:absolute; top:420px; left:50px; background:transparent url('dead.gif') no-repeat; width:515px; height:150px; } #extraDiv6{ position:absolute; top:0px; left:0px; background:transparent url('gardenia.gif') no-repeat; width:200px; height:200px; } /* css Zen Garden submission 111 - 'Gruener Entwurf', by Hannah F. Liesong, http://www.liesong.de/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Hannah F. Liesong */ /* Added: July 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { margin: 0px; padding: 7% 0px 7% 0px; background-color: #143A1F; } p { font: 10px Verdana, Arial, Helvetica, sans-serif; text-align: justify; color: #1F1F1F; margin: 0px 13px 0px 13px; } acronym { font-style: italic; font-weight: normal; border: 0; cursor: help; } a:link { font-weight: bold; text-decoration: none; border: 1px dotted #61A681; color: #0E9B7D; } a:visited { font-weight: bold; text-decoration: none; border: 1px dotted #61A681; color: #0E8368; } a:hover { font-weight: bold; text-decoration: none; border: 1px dotted #690; background-color: #669900; color: #FCFE85; } /* specific divs */ #container { padding: 0px 0px 1px 0px; margin: 0px; height: 510px; border-bottom: 1px solid white; border-top: 1px solid white; position: relative; left: 0px; background: #254634 url("baeume.jpg") no-repeat; width: 2000px; } #pageHeader h1 { background: url("head1.gif") no-repeat left top; margin-top: 0px; float: none; padding: 0px; height: 101px; width: 778px; z-index: 5; position: absolute; } #pageHeader h1 span { display:none } #pageHeader h2 { margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right; } #pageHeader h2 span { display:none; } #quickSummary { margin: 0px; height: 56px; width: 419px; background: url("quicksummary.gif") no-repeat; z-index: 10; position: absolute; padding: 0px; left: 53px; top: 83px; } #quickSummary p { display: none; } #preamble { background: url("praeamble_bg.jpg") no-repeat; position: absolute; left: 53px; top: 139px; width: 419px; height: 300px; overflow: auto; } #preamble h3 { margin: 0; padding: 0; position: relative; height: 61px; width: 419px; left: 0px; top: 0px; background-image: url("praeamble_h1.gif"); background-repeat: no-repeat; } #preamble h3 span { margin: 0; padding: 0; display: none; } #explanation { margin: 0; padding: 0; background: url("explanation_bg.jpg") repeat-x; position: absolute; left: 473px; top: 139px; width: 297px; height: 300px; overflow: auto; } #explanation h3 { margin: 0; padding: 0; background: url("explanation_h.gif") no-repeat; position: relative; height: 61px; width: 277px; left: 0px; top: 0px; } #explanation h3 span { margin: 0; padding: 0; display: none; } #participation { margin: 0; padding: 0; background: url("participation_bg.gif"); position: absolute; left: 771px; top: 139px; width: 348px; height: 300px; overflow: auto; background-repeat: repeat; } #participation h3 { margin: 0; padding: 0; background: url("participation_h.gif") no-repeat; position: relative; height: 61px; width: 328px; left: 0px; top: 0px; } #participation h3 span { margin: 0; padding: 0; display: none; } #benefits { margin: 0; padding: 0; position: absolute; left: 1120px; top: 139px; width: 254px; height: 300px; overflow: auto; background-color: #D5E3B8; } #benefits h3 { margin: 0; padding: 0; background: url("benefits_h.gif") no-repeat; position: relative; height: 61px; width: 254px; left: 0px; top: 0px; } #benefits h3 span { margin: 0; padding: 0; display: none; border: 1px solid red; } #requirements { margin: 0; padding: 0; position: absolute; left: 1375px; top: 139px; width: 600px; height: 300px; overflow: auto; background-color: #E1EBCC; } #requirements h3 { margin: 0; padding: 0; background: url("requirements_h.gif") no-repeat; position: relative; height: 61px; width: 410px; left: 0px; top: 0px; } #requirements h3 span { margin: 0; padding: 0; display: none; } #linkList { padding: 0px 0px 3px 0px; margin: 1px; visibility: visible; z-index: 0; position: absolute; left: 53px; top: 440px; right: 0; background-image: url("select_bg.gif"); width: 1946px; } #lselect { } #linkList h3.select { margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #C1AD79; font-style: normal; font-weight: bold; text-transform: uppercase; position: relative; left: 25px; top: 0px; float: left; width: 140px; } #linkList ul { margin: 0; padding: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; left: 0px; top: 0px; color: #DBFE72; } #linkList li { list-style-type: none; float: left; margin: 0px 3px 0px 3px; padding: 0px; border-bottom: 1px solid #BCFD69; margin: 0px 3px 0px 3px; } #linkList li a:link { color: #DBFE72; font-weight: bold; text-decoration: none; border: 0; cursor: move; } #linkList li a:visited { color: #DBE272; font-weight: bold; text-decoration: none; cursor: move; border: 0; } #linkList li a:hover { color: #254632; background-color: #DBFE72; font-weight: bold; text-decoration: none; border:0; } #larchives { clear:left; } h3.archives { margin: 3px 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #C1AD79; font-style: normal; font-weight: bold; text-transform: uppercase; position: relative; left: 25px; top: 0px; float: left; width: 140px; } #lresources { clear:left; } h3.resources { margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #C1AD79; font-style: normal; font-weight: bold; text-transform: uppercase; position: relative; left: 25px; top: 0px; float: left; width: 140px; } #footer { width: 1946px; position: absolute; left: 0px; top: 490px; margin: 0; padding: 0px 0px 0px 53px; border-top: 1px solid #669900; border-bottom: 1px solid #669900; } #footer a:link, #footer a:visited { font-size: 9px; color: #254634; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; padding: 0; margin: 0; border: 0; } #footer a:hover { color: #DBFE72; font-weight: bold; text-transform: uppercase; text-decoration: underline; } #footer a:before { content: "["; } #footer a:after {content: "]"; } /* css Zen Garden submission 112 - 'Mountain Resort', by Jordi Romkema, http://www.jor-on.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Jordi Romkema */ /* Added: July 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Basic */ body { font: 9pt Arial, Helvetica, sans-serif; color: #000000; background: #00004A url(bg.gif) repeat fixed left top; margin: 0px; } p { font: 9pt Arial, Helvetica, sans-serif; text-align: left; } a:link, a:visited { color: #00004A; font-weight: bold; text-decoration: underline; } a:hover, a:active { color: #C17535; font-weight: bold; text-decoration: underline; } /* Hiding elements we don't want to see */ h1, h2, h3 span, #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* Specific Divs */ #container { display: block; position: relative; width: 700px; margin: 0px auto; background: #FFFFFF url(bgend.jpg) no-repeat left bottom; padding-bottom: 20px; } #intro { background: #FFFFFF url(header.jpg) no-repeat 0 0; padding-top: 471px; } #quickSummary { position: absolute; top: 0px; left: 0px; width: 700px; color: #B9E0FF; } #quickSummary a:link, #quickSummary a:visited { color: #B9E0FF; font-weight: bold; text-decoration: underline; } #quickSummary a:hover, #quickSummary a:active { color: #00004A; font-weight: bold; text-decoration: underline; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { font-size: 8pt; text-align: right; margin: 5px; } #preamble, #supportingText { width: 410px; text-align: left; } /* Header Images */ #preamble { background:url(preamble.jpg) no-repeat left top; padding:74px 10px 5px 10px; } #explanation { background:url(explanation.jpg) no-repeat left top; padding:44px 10px 0px; } #participation { background:url(participation.jpg) no-repeat left top; padding:44px 10px 0px; } #benefits { background:url(benefits.jpg) no-repeat left top; padding:44px 10px 0px; } #requirements { background:url(requirements.jpg) no-repeat left top; padding:44px 10px 10px 10px; } /* Footer */ #footer { text-align: center; font-size: 8pt; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding: 10px; } #footer a:link, #footer a:visited { margin-right: 15px; color: #C17535; } #footer a:hover { margin-right: 15px; color: #00004A; } /* Navigation */ #linkList { position: absolute; top: 471px; left: 437px; width: 263px; background-image: url(bglist.gif); } #linkList2 { font: 8pt Arial, Helvetica, sans-serif; color: #C17535; width: 263px; background: url(listend.jpg) no-repeat left bottom; } #linkList h3 { margin: 0; width: 263px; height: 32px; } /* Navigation Images */ #linkList h3.select { background: url(select.gif) no-repeat left top; height: 177px; } #linkList h3.archives { background: url(archives.gif) no-repeat left top; } #linkList h3.resources { background: url(resources.gif) no-repeat left top; } #linkList h3.favorites { background: url(favorites.gif) no-repeat left top; } /* Spacer */ #lresources { padding-bottom: 176px; } /* Navigation Lists */ #linkList ul { margin: 0px 0px 0px 28px; padding: 0px; width: 211px; } #linkList li { display: block; padding: 5px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #D2C598; } #linkList li a { display: block; color: #5B2C02; } #lselect li a:link, #lselect li a:visited, #lfavorites li a:link, #lfavorites li a:visited { text-transform: uppercase; color: #5B2C02; font-weight: bold; text-decoration: none; } #larchives li a:link, #larchives a:visited, #lresources li a:link, #lresources li a:visited { text-transform: uppercase; font-weight: bold; text-decoration: none; } #linkList li a:hover, #linkList li a:active { color: #000000; } #linkList li a.c:link, #linkList li a.c:visited { color: #C17535; font-weight: bold; display: inline; text-transform: none; } #linkList li a.c:hover, #linkList li a.c:active { color: #000000; } #linkList li:hover { background: #D2C598; color: #FFFFFF; } #linkList li:hover a.c:link, #linkList li:hover a.c:visited { color: #FFFFFF; } #linkList li:hover a:link, #linkList li:hover a:visited { color: #000000; }/* css Zen Garden submission 113 - 'Switch On', by Michael Fasani, http://www.michaelfasani.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michael Fasani */ /* Added: July 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: verdana, arial; background: #000000 url(bg.gif); font-size: 8pt; color: #FFFFFF; } a { color: #99FF00; text-decoration: none; } h3 span { display:none; } a:hover { color: #FF6600; } #container { position: relative; margin: 10px auto; padding: 10px; width: 600px; text-align: left; voice-family: "\"}\""; voice-family: inherit; width: 594px; border: 10px solid #ffffff; background: #000000 url(zentop.gif) no-repeat top left; } #pageHeader { margin-top: 390px; position: relative; } #pageHeader span { display:none; } #quickSummary .p1 { position: absolute; width: 586px; padding: 14px; font-size: 8pt; text-transform: uppercase; background: #000000 url(bg2.gif); color: #99FF00; text-align: center; top: 327px; left: -1px; border: 1px solid #ffffff; } #quickSummary .p2 { position: absolute; font-size: 7.5pt; text-transform: uppercase; font-family: Arial; color: #CCCCCC; top: 307px; left: 345px; width: 270px; } #quickSummary a { color: #FFFFFF; text-decoration: none; } #quickSummary a:hover { background: #99FF00; color: #000000; } #footer { position: absolute; font-size: 7.5pt; text-transform: uppercase; font-family: Arial; color: #FFFFFF; top: 307px; } #footer a { color: #FFFFFF; text-decoration: none; } #footer a:hover { background: #99FF00; color: #000000; } #preamble { width: 440px; text-align: justify; } #preamble h3 { position: relative; background: transparent url(theroad.gif) no-repeat; margin-top: 10px; height: 45px; left: -10px; } #preamble .p1 { text-indent: 20px; margin-top: -28px } #explanation { width: 440px; text-align: justify; } #explanation h3 { position: relative; background: transparent url(sowhat.gif) no-repeat; margin-top: 25px; height: 45px; left: -10px; } #explanation .p1 { text-indent: 20px; margin-top: -28px } #participation { text-align: justify; } #participation h3 { position: relative; background: transparent url(parti.gif) no-repeat; margin-top: 25px; height: 45px; left: -10px; } #participation h3 span { display: none; } #participation .p1 { text-indent: 20px; margin-top: -28px } #participation .p2 { width: 440px; } #participation .p1{ width: 440px; } #benefits { text-align: justify; } #benefits h3 { position: relative; background: transparent url(beni.gif) no-repeat; margin-top: 25px; height: 45px; left: -10px; } #benefits .p1 { text-indent: 20px; margin-top: -28px } #requirements { text-align: justify; } #requirements h3 { position: relative; background: transparent url(reqs.gif) no-repeat; margin-top: 25px; height: 45px; left: -10px; } #requirements .p1 { text-indent: 20px; margin-top: -28px } /* Force carriage return before 'by' */ #lselect li a:link, #lselect li a:visited {display: block;} #linkList li a.c:link, #linkList li a.c:visited {display: inline;} #lselect { width: 160px; position: absolute; top: 395px; left: 457px; background: transparent url(top-menu.gif) no-repeat; height: 400px; } #lselect ul { list-style: none; margin-left: 18px; margin-top: 50px; } #lselect ul li { padding: 0px 0px 0px 16px; background: url(arrow.gif) no-repeat 6px 2px; margin-bottom: 5px; } #larchives { width: 160px; position: absolute; top: 725px; left: 457px; background: transparent url(mid-menu.gif) no-repeat; height: 200px; text-transform: capitalize; } #lresources { width: 160px; position: absolute; top: 847px; left: 457px; background: transparent url(bot-menu.gif) no-repeat; height: 200px; } #larchives ul, #lresources ul { list-style: none; margin-left: 26px; margin-top: 46px; } /* css Zen Garden submission 114 - 'Salvage Yard', by Justin Peters, http://www.vatoweb.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Justin Peters */ /* Added: July 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 12px/17px tahoma, arial; color: #000; background: #DAE8BD url(bg_lines.gif) no-repeat top; margin: auto auto; padding: 0; text-align: center; } p { font: 12px/17px tahoma, arial, sans-serif; margin: 0 0 17px 0; } a:link { font-weight: bold; text-decoration: none; color: #027D87; } a:visited { font-weight: bold; text-decoration: none; color: #858686; } a.c:visited { font-weight: normal; text-decoration: none; color: #858686; } a:hover, a:active { text-decoration: underline; color: #000505; } ul { list-style-type: none; margin: 0; padding: 0; } /* specific divs */ #container { width: 762px; padding: 0; margin: auto; text-align: left; } #intro { vertical-align: bottom; } #pageHeader { padding: 0; margin: 0; height: 246px; border: 1px solid white; } #pageHeader h1 { background: url(title_hdr.jpg) no-repeat top left; width: 760px; height: 176px; margin: 70px 0 0 0; padding: 0; } #pageHeader h1 span { display:none } #pageHeader h2 { padding: 0; margin: 0; } #pageHeader h2 span { display: none; } #quickSummary p.p1 { width: 320px; height: 92px; position: absolute; top: 1px; margin-left: 470px; padding: 0; font-size: 11px; color: #FFF; font-family: arial; background: url(bg_redbox.gif) no-repeat; } #quickSummary p.p1 span{ display: none; } #quickSummary p.p2{ display: block; position: absolute; top: 53px; padding: 0 0 0 7px; font-size: 11px; text-align: right; color: #490909; font-family: arial; clear: both; } #preamble { padding: 0; margin: -3px 0 0 0; width: 291px; float: left; } #preamble h3 { background: url(hdr_enlightenment.gif) no-repeat; width: 291px; height: 47px; margin: 0; padding: 0; border-top: 1px solid white; } #preamble h3 span { display: none; } #preamble p { font: italic normal 12px/19px georgia, 'Times New Roman', times, serif; padding: 0 0 0 3px; width: 270px; } #preamble p.p1 { margin-top: 10px; } #supportingText { padding: 0; margin: -3px 0 40px 0; background: #D6E6B6; border: 1px solid white;; width: 469px; float: right; } #supportingText p { margin: 9px 17px 17px 24px; } #explanation h3 { background: url(hdr_about.gif) no-repeat; width: 469px; height: 32px; margin: 0; padding: 0; } #explanation h3 span { display: none; } #participation h3 { background: url(hdr_participation.jpg) no-repeat; width: 469px; height: 32px; margin: 0; padding: 0; } #participation h3 span { display: none; } #benefits h3 { background: url(hdr_benefits.jpg) no-repeat; width: 469px; height: 32px; margin: 0; } #benefits h3 span { display: none; } #requirements h3 { background: url(hdr_requirements.jpg) no-repeat; width: 469px; height: 32px; margin: 0; padding: 0; } #requirements h3 span { display: none; } #footer { background: #A2C1B9; border-top: 1px solid white; padding: 0 0 2px 24px; } a.c { font-weight: normal; } #lselect, #larchives, #lresources { width: 256px; clear: left; padding: 0; margin: 0; } #lselect { background: url(hdr_select.gif) no-repeat; border-bottom: 1px solid #fff; margin-top: 20px; } #larchives { background: url(hdr_archives.gif) no-repeat; border-bottom: 1px solid #fff; margin-top: 20px; } #lresources { background: url(hdr_resources.gif) no-repeat; border-bottom: 1px solid #fff; margin-top: 20px; } #lselect h3 span, #larchives h3 span, #lresources h3 span { display: none; } #linklist { margin-top: 50px; clear: both; } #linkList #linkList2 ul { padding: 20px 10px 10px 10px; display:block; } #linklist li { margin: 2px 0; } /* css Zen Garden submission 115 - 'Burnt Offering', by Jonny Blair, http://www.jonnyblair.co.uk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Jonny Blair */ /* Added: July 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0; padding: 0; background: #000 url(drops/main_bg2.jpg) no-repeat bottom fixed; text-align: center; width: 100%; height: 100%; font-family: "verdana", "arial", sans-serif; color: #333; } a:link { color: #860d01; text-decoration: none; } a:hover { color: #870b01; text-decoration: underline; } a:visited { color: #666; text-decoration: none; } h1, h2, h3, h4, h5 { padding: 10px; border: 0px solid orange; } ul { margin: 0; padding: 0; } acronym { cursor: help; } acronym:hover { border-bottom: 1px solid #870b01; } #container { border: 1px solid #000; border-right: none; border-bottom: 0px solid #860d01; border-top: 0px solid #860d01; background-color: transparent; position: relative; margin: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; width: 760px; text-align:left; voice-family: "\"}\""; voice-family: inherit; width: 754px; } #intro { padding: 0; } #pageHeader { background: url(drops/main_title.jpg) no-repeat top left; height: 145px; border-bottom: 3px solid #860d01; } #supportingText { position: relative; left: 0; width: 523px; color: #777; } #linkList { position: absolute; top: 148px; right: 0px; margin: 0 0 0 515px; background-color: #000; border-left: 1px solid #000; border-bottom: 0px solid #000; border-right: 1px solid #000; border-top: 0px; } #pageHeader h1 { border: 1px solid red; font-size: x-small; margin: 0px; padding: 0px; display: none; } #pageHeader h2 { border: 1px solid red; font-size: x-small; margin: 0px; padding: 0px; display: none; } #quickSummary p.p1 { border: 1px solid red; } #preamble { position:relative; left: 0; padding: 0px; width: 522px; font-size: x-small; display: block; border-bottom: 1px solid #000; border-right: 0px solid #000; background-color: #860d01; color: #fff; min-height: 254px; } #preamble h3 { background: url(headers/preamble_title.jpg) no-repeat top left; margin: 0px; text-indent: -2000px; height: 38px; border-bottom: 1px solid #000; padding: 0px; } #preamble p { margin: 10px; text-align: justify; margin-right: 20px; padding: 0; line-height: 1.6em; } #quickSummary { display: none; } #quickSummary p { margin: 10px; text-align: justify; padding: 0; line-height: 1.6em; } #quickSummary p.p1{ display: none; } #quickSummary a:link, #quickSummary a:active, #quickSummary a:visited { text-decoration: none; border-bottom: 2px solid #506067; } #quickSummary a:hover { text-decoration: none; border-bottom: 2px solid #708089; } #supportingText p { margin: 10px; margin-left: 100px; margin-right: 20px; padding: 0; line-height: 1.6em; font-size: x-small; text-align: justify; } #supportingText h3 { margin: 0px; text-indent: -2000px; height: 22px; } #explanation, #participation, #benefits { padding: 0px; padding-bottom: 20px; margin: 0px; border-right: 1px solid #000; border-bottom: 1px solid #ccc; width: 522px; background-color: #fff; } #requirements { border-bottom: 0px; padding-bottom: 10px; border-right: 1px solid #000; width: 522px; background-color: #fff; } #explanation h3 { background: url(headers/explain_title.jpg) no-repeat top left; } #participation h3 { background: url(headers/participation_title.jpg) no-repeat top left; } #benefits h3 { background: url(headers/benefits_title.jpg) no-repeat top left; } #requirements h3 { background: url(headers/req_title.jpg) no-repeat top left; } #supportingText a:link, #supportingText a:active, #supportingText a:visited { font-weight: bold; } #supportingText a:hover { } #explanation:hover, #participation:hover, #benefits:hover, #requirements:hover { color: #000; background-image: url(drops/jb.gif); background-repeat: no-repeat; background-position: bottom right; } #preamble:hover { background: #4a0201 url(drops/red_drop.jpg) no-repeat 0 38px; color: #fff; } #footer { margin: 0px; width: 522px; height: 6em; line-height: 6em; font-size: x-small; text-align: center; background-color: #000; margin-top: 0px; border-top: 5px solid #ccc; border-right: 1px solid #000; border-bottom: 5px solid #860d01; } #footer a:link, #footer a:active, #footer a:visited { color: #fff; } #footer a:hover { } #linkList ul { list-style: none; width: 230px; margin: 0px; padding: 0px; right: 0px; border-bottom: 0px solid #000; } #lselect { margin: 0px; font-size: 7pt; width: 230px; } #lselect li { padding: 12px 15px 12px 15px; border-bottom: 1px solid #000; height: 52px; line-height: 1.4em; background-color: #860d01; color: #c63; } #lselect li:hover { background-color: #4a0201; background-image: url(drops/li_hi.gif); background-repeat: no-repeat; background-position: top right; color: #fff; } #lselect a:link, #lselect a:active, #lselect a:visited { font-weight: bold; color: #c63; } #lselect a:hover { background-color: #4a0201; color: #fff; } #lselect a.c { font-weight:normal; text-decoration:none; } #lselect h3 { background: url(headers/select_title.jpg) no-repeat top left; margin: 0px; text-indent: -2000px; height: 38px; border-bottom: 1px solid #000; padding: 0px; } #larchives { border-right: 0px solid #000; border-bottom: 0px solid #000; background-color: transparent; width: 230px; } #larchives h3 { background:url(headers/larchives_title.jpg) no-repeat top left; margin: 0px; text-indent: -2000px; height: 38px; border-bottom: 1px solid #000; padding: 0px; } #larchives ul { background-color: #fff; } #larchives li { padding: 12px 0 7px 15px; height: 25px; line-height: 1.2em; background-color: #fff; color: #c63; border-bottom: 1px solid #000; font-size: 7pt; } #larchives a:link, #larchives a:active, #larchives a:visited { color: #c63; font-weight: bold; } #larchives li:hover { background-color: #4a0201; background-image: url(drops/li_hi.gif); background-repeat: no-repeat; background-position: top right; color: #fff; } #larchives a:hover { background-color: #4a0201; color: #fff; } #lresources { border-right: 0px solid #000; border-bottom: 0px solid #000; background-color: #fff; width: 230px; background-position: bottom right; background-repeat: no-repeat; } #lresources h3 { background:url(headers/lresources_title.jpg) no-repeat top left; margin: 0px; text-indent: -2000px; height: 38px; border-bottom: 1px solid #000; padding: 0px; } #lresources li { padding: 12px 0 7px 15px; height: 25px; line-height: 1.2em; background-color: #fff; color: #c63; font-size: 7pt; border-bottom: 1px solid #000; } #lresources li:hover { background-color: #4a0201; background-image: url(drops/li_hi.gif); background-repeat: no-repeat; background-position: top right; color: #fff; } #lresources a:link, #lresources a:active, #lresources a:visited { color: #c63; font-weight: bold; } #lresources a:hover { background-color: #4a0201; color: #fff; } /* css Zen Garden submission 116 - 'Ragged', by Jose Florido, http://www.avidos.net/blogold/ http://www.ovillo.org/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Jose Florido */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Hoja de estilos para "Ragged" */ /* Autor: Jose Florido - jose@avidos.net */ /* Elementos xhtml */ body{ padding: 0; margin: 0; font-family: "MS Trebuchet", Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 75%; line-height: 135%; background-image: url("fondo.gif"); color: #424242; text-align: center; } a{ color: #af0000; font-weight: bold; text-decoration: none; } a:visited{ color: #FF9F9F; text-decoration: none; } a:hover{ text-decoration: underline; } h3{ color: #af0000; font-size: 120%; margin-top: 30px; margin-bottom: 0; position: relative; padding: 0 0 0 25px; background-image: url("bullet.gif"); background-repeat: no-repeat; background-position: 0 1px; } h3 span{ background-color: #fff; } p{ margin: 10px 0 5px 0; } /* ---- divs ---- */ /* En orden de aparición en el codigo HTML */ #container{ position: relative; background-image: url("abajo.gif"); background-repeat: repeat-x; background-position: bottom; width: 740px; border: 1px solid #5F5F5F; border-bottom: 0; border-top: 0; margin: 0 auto; text-align: left; } #pageHeader { padding: 5px 0 0 15px; } #pageHeader h1{ width: 526px; height: 91px; background-image: url("header1.gif"); margin-bottom: 0; } #pageHeader h1 span { display: block; width: 0; height: 0; overflow: hidden; } #pageHeader h2{ width: 279px; height: 33px; background-image: url("header2.gif"); margin-top: -22px; margin-bottom: 25px; } #pageHeader h2 span { display: block; width: 0; height: 0; overflow: hidden; } #quickSummary{ background-color: #AF0000; color: #fff; margin-bottom: 60px; line-height: 125%; font-size: 110%; } #quickSummary .p1{ position: relative; padding: 29px 20px 0 20px; background-color: #AF0000; background-image: url("qsp1.gif"); background-position: top left; background-repeat: no-repeat; } #quickSummary .p2{ position: relative; padding: 0 20px 25px 20px; background: #AF0000 url("qsp2.gif") no-repeat bottom left ; } #quickSummary a{ color: #fff; font-weight: bold; text-decoration: underline; } #quickSummary a:visited{ color: #CCCCCC; text-decoration: none; } #quickSummary a:hover{ text-decoration: none; } #preamble{ margin-left: 220px; padding-right: 10px; font-size: 90%; } #supportingText{ margin-left: 220px; padding-right: 10px; font-size: 90%; } #requirements{ position: relative; margin-left: -180px; width: 650px; } #requirements .p5{ font-size: 80%; margin: 10px; } #footer{ position: relative; left: -180px; padding: 65px 10px 30px 20px; background-image: url("footer.gif"); background-repeat: no-repeat; background-position: 0 55px; } /* Columna izquierda */ #linkList { position: absolute; left: 12px; top: 320px; width: 178px; padding: 0 2px 0 0; font-size: 80%; line-height: 140%; background: #EFEFEF url("linea.gif") top right repeat-y; } #linkList h3{ background: #af0000; margin: 0; padding: 5px 0 5px 10px; text-transform: lowercase; color: #fff; font-size: 100%; background-image: url("header3.gif"); background-repeat: repeat-x; background-position: bottom; } #linkList h3 span{ background: transparent; } #linkList ul { margin: 0; padding: 0; list-style: none; padding: 20px 10px 20px 10px; background-image: url("izqdaul.gif"); background-repeat: repeat-x; } #linkList li{ padding-left: 18px; background: transparent url("flechita2.gif") 0 2px no-repeat; margin-bottom: 7px; color: #818181; } #linkList li a{ color: #af0000; } #linkList li a.c{ color: #818181; } #lresources{ background: transparent url("izqda.gif") bottom no-repeat; padding-bottom: 20px; } /* css Zen Garden submission 117 - 'Brushwood', by Katrin Zieger, http://www.teamwerk.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Katrin Zieger */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #f8f698; background: #7e8b4e; margin: 0px; padding: 0; } p { font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: left; } a:link { font-weight: bold; text-decoration: underline; color: #F8f698; } a:visited { font-weight: bold; text-decoration: underline; color: #e9c482; } a:hover, a:active { text-decoration: none; color: #F8f698; } /* specific divs */ #container { width: 98%; padding: 0px 0px 20px 0px; margin: 0px; } #pageHeader { position: absolute; top: 0; left: 0; margin: 0 0 20px 0; z-index: 1; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: url(h1.gif) no-repeat left top; display: block; margin: 0; width: 300px; height: 276px } #pageHeader h1 span { display:none } #pageHeader h2 { background: url(h2.gif) no-repeat left top; margin: 0; width: 300px; height: 72px } #pageHeader h2 span { display:none; } #quickSummary { position: absolute; top: 365px; left: 30px; z-index: 2; background: transparent; margin-right: 12px; width: 300px; padding: 0; } #quickSummary p { font-weight: bold; font-size: 12px; line-height: 180%; text-align:right; width: 250px; } #quickSummary a:link { color: #f8f698; text-decoration: underline; } #quickSummary a:hover { text-decoration: none; } #preamble { background: url(bg-preamble.gif) no-repeat left top; margin: 0 0 0 295px; padding: 105px 35px 25px 37px; position: relative; z-index: 5; width: 303px } #preamble h3 { background: url(roadtoenlightenment.gif) no-repeat left top; margin: 0 0 15px; width: 202px; height: 19px } #preamble h3 span { display:none; } #preamble p { color: #50591b; width: 303px; margin-bottom:0; line-height: 165%; } #supportingText { position: relative; margin: 0 0 0 295px; width: 374px; z-index: 6; } #supportingText p { color: #50591b; width: 303px; line-height: 165%; } #supportingText a, a:link { color: #50591b; font-style: italic; font-weight: bold; text-decoration: underline; } #supportingText a:hover { color: #55310e; text-decoration: underline; } #explanation { background: url(explaination-bg.gif) repeat-y left top; display: block; padding: 0 35px 25px 37px; position: relative; width: 303px } #explanation h3 { background: url(sowhat.gif) repeat-y left top; margin: 0 0 15px; width: 173px; height: 19px } #explanation h3 span { display:none; } #participation { background: url(partic-bg.gif) repeat-y left top; display: block; padding: 0 35px 25px 37px; position: relative; width: 303px } #participation h3 { background: url(participation.gif) no-repeat left top; margin: 0 0 15px; width: 99px; height: 18px } #participation h3 span { display:none; } #benefits { background: url(partic-bg.gif) repeat-y left top; display: block; padding: 0 35px 25px 37px; position: relative; width: 303px } #benefits h3 { background: url(benefits.gif) no-repeat left top; margin: 0 0 15px; width: 99px; height: 18px } #benefits h3 span { display:none; } #requirements { background: url(requi-bg.gif) no-repeat left bottom; display: block; padding: 0 35px 30px 37px; position: relative; width: 303px } #requirements h3 { background: url(requirements.gif) no-repeat left top; margin: 0 0 15px; width: 99px; height: 18px } #requirements h3 span { display:none; } #footer { background: transparent; width: 303px; margin: 25px 0 25px 0px; padding: 0 0 0 35px; text-align: center; } #footer a:link { margin: 0 10px 0 10px; color: #F8f698; font-weight: bold; font-style: normal; text-decoration: underline; } #footer a:hover { text-decoration: none; color: #F8f698; } /* start navbar */ #linkList { margin: 0; position: absolute; top: 297px; left: 664px; z-index: 3; } #linkList2 { background: url(select-list.gif) repeat-y left top; padding: 0; width: 141px } #linkList h3.select { background: url(select.gif) no-repeat left top; margin: 0; width: 141px; height: 65px } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(../zengarden-media/h4.gif) no-repeat top left; margin: 25px 0px 5px 0px; width: 60px; height: 18px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: url(archives.gif) no-repeat left top; margin: 0; width: 141px; height: 68px } #linkList h3.archives span { display:none } #linkList h3.favorites { background: url(favorites.gif) no-repeat left top; margin: 0; width: 141px; height: 68px } #linkList h3.archives span { display:none } #lresources { background: url(nav-bottom.gif) no-repeat left bottom; padding-bottom: 15px; z-index: 4 } #linkList h3.resources { background: url(resources.gif) no-repeat left top; margin: 0; width: 141px; height: 68px } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 12px 20px 20px 20px; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; } #linkList li a:link { color: #F8f698; font-weight: bold; font-style: normal; text-decoration: underline; } #linkList li a:hover { text-decoration: none } /* end navbar */ /* extra divs */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none }/* css Zen Garden submission 118 - 'Some Leafs', by Michael Tupy, http://www.t-2.at/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michael Tupy */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css zen garden - "some leafs" - michael tupy - t2 graphic design - http://www.t-2.at/ */ /* this is a basic theme - works with nearly all browsers */ /* all the text is visible and easy to change */ /* the css code is overcoded and long - so its easier for css starters */ /* tested with: */ /* on mac osx: safari 1.2.2, camino 0.8b, mozilla 1.7, firefox 0.9, omniweb 4.5, ie 5.2.3, */ /* on mac os9: ns 7.0.2, ie 5.1.6, */ /* on win98: ie 6.0.2800, ns 7.0.1, moz 1.6, firefox 0.9, opera 7.03, */ /* ie5 win - grrr - start */ body { font: small serif; margin: 0px; padding: 0px; line-height: 14px; color: #000; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; text-align: center; } /* ie5 win - grrr - end */ /* opera - grrr - start */ html>body { font-size: small; } /* opera - grrr - end */ /* start of the real css */ /* basic elements */ body { color: #444; background-color: #edf6e3; background-image: url(700_28.jpg); background-position: top center; background-repeat: repeat-y; font-size: 11px; line-height: 14px; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; } p { font-size: 11px; line-height: 14px; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; } h1, h2, h3 { font-size: 11px; line-height: 14px; font-weight: bold; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; margin: 0px; padding: 0px; } a:link { font-weight: bold; text-decoration: none; color: #6faf30; } a:visited, a:visited:hover { font-weight: bold; text-decoration: none; color: #7fc937; } a:hover, a:active { text-decoration: underline; color: #4f711f; } acronym { font-weight: normal; font-style: normal; border: 0; } /* major divs */ #container { width: 700px; position: relative; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; } #intro { width: 450px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #supportingText { width: 450px; margin: 0px 0px 0px 0px; padding: 0px 10px 0px 10px; } #linkList { position: absolute; top: 255px; left: 0px; width: 220px; margin: 0px 0px 0px 482px; padding: 0px 0px 0px 0px; } /* minor divs */ #pageHeader { width: 700px; height: 20px; /* strange but ie6 needs this */ background-image: url(blatt02aa.jpg); background-position: top center; background-repeat: no-repeat; border-top: 0px; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; margin: 0px 0px 0px 0px; padding: 224px 0px 0px 0px; } #pageHeader h1 { width: 600px; color: #fff; font-size: 24px; line-height: 24px; font-weight: bold; text-transform: uppercase; margin: -30px 0px 0px 10px; padding: 0px 0px 0px 0px; } #pageHeader h2 { width: 600px; color: #fff; font-size: 11px; line-height: 16px; font-weight: normal; padding: 0px 0px 0px 3px; text-transform: uppercase; margin: 0px 0px 0px 10px; padding: 0px 0px 10px 4px; } #quickSummary { width: 450px; background-image: url(stone_24.gif); background-position: top center; background-repeat: repeat; background-color: #284C00; border: 1px solid #aaa; margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; } #preamble { width: 450px; border: 1px solid #aaa; background-image: url(leaf_09d.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; margin: 0px 0px 0px 0px; padding: 10px 10px 20px 10px; } #explanation, #participation, #benefits, #requirements { width: 450px; border: 1px solid #aaa; background-image: url(leaf_09d.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; margin: 10px -10px 0px -10px; padding: 10px 10px 20px 10px; } #footer { width: 450px; border: 1px solid #aaa; background-image: url(stone_19.gif); background-position: center center; background-repeat: repeat; background-color: #284C00; margin: 10px -10px 20px -10px; padding: 10px 10px 10px 10px; text-align: center; } #explanation p, #participation p, #benefits p, #requirements p, #preamble p { padding-bottom: 8px; text-align: justify; } #preamble h3, #supportingText h3 { color: #284C00; background-color: #ddd; background-image: url(stone_21.gif); background-position: bottom center; background-repeat: repeat; font-size: 11px; line-height: 16px; text-transform: uppercase; margin: -10px -10px 4px -10px; padding: 4px 4px 4px 10px; } #quickSummary .p1 { color: #fff ! important; font-size: 10px ! important; line-height: 14px; font-weight: bold; text-transform: uppercase; text-align: left; margin: 0px 50px 0px 0px; padding: 0px 0px 10px 0px; } #quickSummary .p2 { color: #fff ! important; font-size: 10px ! important; line-height: 14px; font-weight: normal; text-transform: uppercase; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #linkList ul { border-top: 1px dotted #ccc; margin: 5px 5px 0px 5px; padding: 0px 0px 0px 0px; } #linkList li { display: block; list-style-type: none; color: #6c9e2d; background-color: #f8f8f8; font-size: 11px; line-height: 14px; font-weight: normal; font-style: italic; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-align: left; border-bottom: 1px dotted #ccc; margin: 0px 0px 0px 0px; padding: 3px 5px 3px 5px; } #linkList li a:link, #linkList li a:visited, #linkList li a:visited:hover, #linkList li a:hover, #linkList li a:active { font-style: normal; padding-right: 5px; } .c { color: #6c9e2d ! important; font-weight: normal ! important; font-style: italic ! important; margin: 0px 0px 0px 0px; padding: 0px 14px 0px 0px; } #linkList h3 { color: #7fc937; background-color: #ddd; background-image: url(stone_24.gif); background-position: center right; background-repeat: repeat-x; font-size: 11px; line-height: 16px; font-weight: bold; font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; text-transform: uppercase; text-align: left; border-bottom: 1px solid #aaa; margin: 0px 0px 0px 0px; padding: 3px 5px 3px 5px; } #lselect, #lfavorites, #larchives, #lresources { background-image: url(leaf_09a.gif); background-position: bottom center; background-repeat: no-repeat; background-color: #fff; border: 1px solid #aaa; margin: 0px 0px 10px 0px; padding: 0px 0px 30px 0px; } /* hovers */ #preamble:hover { background-image: url(leaf_09f.gif); } #linkList li:hover { background-color: #fefefe; } #lresources:hover { background-image: url(leaf_09b.gif); } /* css Zen Garden submission 119 - 'Pleasant Day', by Kyle Jones, http://www.justkyle.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Kyle Jones */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ html { background: #89b6f9; } body { font: 8pt georgia; color: #172104; background: #89b6f9 none repeat-y; margin: 0px; position: relative; width: 650px; top: 0px; left: auto; right: auto; margin-left: auto; margin-right: auto; } #container p { font: 8pt/14pt georgia; margin-top: 0px; text-align: justify; padding-right: 5px; text-indent: 10px; background: none no-repeat bottom; } #container h3 { font: 600 18pt "trebuchet ms"; color: #ffffff; background: no-repeat url(flower3.jpg) transparent 400px -8px; text-decoration: none; text-align: left; margin: 0px; padding-bottom: 0px; padding-top: 0px; letter-spacing: .5px; height: 40px; text-indent: 5px; } a:link { font-weight: bold; text-decoration: none; color: #dfce3b; } a:visited { font-weight: bold; text-decoration: none; color: #2262a4; } a:hover, a:active { text-decoration: none; color: #ffffff; background: #668fd1; } /* specific divs */ #container { background: url(repeater.jpg) repeat-y top left; padding: 0px 0px 0px 0px; position: absolute; right: auto; left: auto; width: 680px; } #intro { min-width: 470px; position: relative; } #pageHeader { margin-bottom: 20px; background: url(head2.jpg) no-repeat 21px; height: 300px; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent none no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left; } #pageHeader h1 span { display:none; background: none; } #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right; } #pageHeader h2 span { display:none; } #quickSummary { margin: 0px 20px 20px 10px; width: 650px; font-size: 10px; position: absolute; top: 0px; text-align: left; color: #fffdfa; } #quickSummary p.p1 { text-align: left; top: 0px; font: italic 10px/11px georgia; width: 360px; padding-left: 10px; padding-top: 4px; background: transparent; margin-left: 10px; margin-right: 0px; border-bottom-style: none; border-style: none; } #requirements, #benefits, #participation, #supportingText, #preamble { background: none no-repeat; margin-bottom: 20px; } #quickSummary p.p2 { width: 230px; font-size: 10px; position: absolute; top: 4px; display: block; border-style: none; margin-top: 0px; margin-right: 20px; margin-bottom: 20px; line-height: 11px; border-width: 1px; text-align: center; right: -2px; } #preamble { clear: right; padding: 0px 190px 0px 30px; } #supportingText { padding-left: 30px; margin-bottom: 40px; padding-right: 190px; } #footer { text-align: center; background: no-repeat none -50px 0px transparent; height: 10px; bottom: 0px; padding-bottom: 0px; width: 500px; font-size: 1.5em; padding-left: 0px; margin: 50px 60px 0px 0px; } #linkList { position: absolute; left: 498px; padding-bottom: 10px; width: 0px; margin-top: 95px; top: 0px; } #linkList2 { background: transparent; padding: 10px; margin-top: 150px; width: 130px; font-family: verdana, sans-serif; } #linkList h3.select { width:230px; background: transparent no-repeat url(designs.jpg) 8px 50px; text-align: center; border-bottom-style: none; margin-top: 10px; margin-right: 0px; margin-left: 0px; height: 100px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(favorites.jpg) 5px -3px no-repeat; margin: 10px 0px 0px 0px; width:230px; height: 45px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.jpg) no-repeat 5px -4px; height: 50px; width:230px; margin: 10px 0px -8px 0px; } #linkList h3.archives span { display:none; background: none; visibility: hidden; } #linkList h3.resources { background: transparent url(resources.jpg) no-repeat -6px -5px; margin: 0px 0px 5px 0px; width:220px; height: 30px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li, #linkList2 li { background: #628f13 url(h1.jpg) repeat-x top center; display: block; border-bottom: 2px #4f740e dotted; padding: 10px 0px 8px 5px; width: 128px; line-height: 1.8ex; border-top: 2px dotted #4f740e; margin-top: 0px; margin-bottom: 8px; color: #172104; text-align: left; } #linkList li:hover, #linkList2 li:hover { background: #668fd1 url(h1.jpg) repeat-x top center; display: block; border-bottom: 2px #5475ab dotted; padding: 10px 0px 8px 5px; width: 128px; line-height: 1.8ex; border-top: 2px dotted #5475ab; margin-top: 0px; margin-bottom: 8px; color: #345082; } #linkList li a:link { color: #dfce3b; text-decoration: none; } #linkList li a:link:hover { color: #fff4ee; text-decoration: none; } #linkList li a:visited { color: #2262a4; text-decoration: none; } #linkList li .c { display: block; color: #000000; text-align: right; padding-right: 5px; padding-top: 5px; padding-bottom: 0px; margin-bottom: 0px; } #extraDiv1 { background: transparent; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; }/* css Zen Garden submission 120 - 'Medioevo', by Emiliano Pennisi, http://www.peamarte.it/01/metro.html */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Emiliano Pennisi */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Medioevo - Realized from Emiliano Pennisi - MetroStation Deisgn - http://www.peamarte.it/01/metro.html */ /*General*/ body { font-family: Georgia,MS Serif,New York,sans-serif; margin-top: 0px; font-size: 0.8em; color: #fff; background-color: #160605; background-image: url(sfondo.gif); background-repeat: no-repeat; background-attachment: fixed; } p,h1,h2,h3 { text-align: justify; width: 325px; margin: 0px 1px 5px; } acronym { font-weight: bold; font-style: oblique; border: 0px; /*Only for Mozilla Firefox*/ } /*Links and Typography*/ a { color: #B69B86; text-decoration: none; } a:hover { color: #fff; border-bottom: 1px dotted #e2eff3; } /*End Links*/ /******************************************************/ /*******************Container**************************/ /******************************************************/ #container { background-color: Black; border-top: 0px; border-left: 1px solid #B69B86; border-right: 1px solid #B69B86; border-bottom: 25px solid #B69B86; padding: 10px; width: 513px; margin: 0% 74px 0%; } #quickSummary{ margin: 8px 0px 50px; } /*Hide the textual logo*/ #pageHeader h1 span, h2 span { display: none; } /*Hide quicksummary Text*/ #quickSummary .p1 span{ display: none; } #quickSummary .p2 { text-transform: uppercase; font-size: 0.8em; background-image: url(quickbg.gif); background-repeat: repeat-y; height: 22px; } #pageHeader { margin: 0; height: 200px; width: 513px; background-image: url(logo.jpg); } /*Hide for image replacement*/ #preamble h3 span { display: none; } #explanation h3 span { display: none; } #participation h3 span { display: none; } #benefits h3 span { display: none; } #requirements h3 span { display: none; } /*End ir*/ /******************************************************/ /*Image Replacement*/ #preamble h3 { background-image: url(01.gif); background-repeat: repeat-y; height: 30px; } #explanation h3 { background-image: url(02.gif); background-repeat: repeat-y; height: 30px; } #participation h3 { background-image: url(03.gif); background-repeat: repeat-y; height: 30px; } #benefits h3 { background-image: url(04.gif); background-repeat: repeat-y; height: 30px; } #requirements h3 { background-image: url(05.gif); background-repeat: repeat-y; height: 30px; } /*End ir*/ /******************************************************/ /*List style ( menu )*/ /*1° Replace with image replacement*/ .select { background-image: url(select_ds.gif); background-repeat: no-repeat; height: 30px; margin: 3px; } /*Hide text conten*/ #lselect .select span { display: none; } /*2°*/ .archives { background-image: url(archives.gif); background-repeat: no-repeat; height: 30px; } #larchives .archives span { display: none; } /*3°*/ .resources { background-image: url(resources.gif); background-repeat: no-repeat; height: 30px; margin-left: 15px; } #lresources .resources span { display: none; } /*End°*/ #linkList ul { list-style: none; } #linkList li a { display: block; } #linkList li a:hover { color: #666; border: none; } #linkList li a.c { color: #fff; font-size: 9px; font-weight: normal; display: inline; padding: 0; text-transform: uppercase; } /*Positioning of menu and list to right*/ #linkList { position: absolute; top: 300px; margin-left: 342px; background: url(menubg.gif) repeat-y; width: 198px; } #linkList li { height: 28px; margin: 0 0 0; padding: 5px; border-bottom: 1px dotted #B69B86; } #linkList2 { font-size: 0.9em; font-weight: bold; color: #B69B86; width: 150px; } #footer { background: url(footerlogo.gif) repeat-y top right; /*No repeat the image logo and place to left*/ margin: 10px 35px 10px; border-bottom: 1px dashed #850E0E; height: 100px; } #footer a { cursor: help; font: 0.8em georgia, helvetica, sans-serif; text-transform: uppercase; color: #850E0E; font-weight: bold; } #footer a:hover { color: #fff; border: 0px; font-weight: bold; } /*End of CSS*/ /* css Zen Garden submission 121 - '60's Lifestyle', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Emiliano Pennisi */ /* Added: Sept. 2nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css Zen Garden - '60 lifestyle', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ /* This illustrations and design was made by Emiliano Pennisi, MetroStation Design, for more info visit --> http://www.peamarte.it/02/03.html The clipart of the cars is realized by Lens Hanger, for more info visit--> http://www.lenshanger.co.uk/*/ /*****************Page debug*****************Good rule to know the structure of the webpage* NOTE: Only compliant browser no IE* div[id]{ border: 1px solid #000; background-color: #fff; margin: 20px 10px; } div[id]:before{ content: "div#" attr(id); background-color: #cf9; color: #060; display: block; } /*****************End Page debug*****************/ body { font-family: palatino, georgia, times new roman, serif; font-size: 70%; line-height: 150%; background: #688FBA url(img/contentBG.gif) bottom left fixed repeat-y; color: #000; margin: 0px; } /*Links and Typography*/ a { color: #000; text-decoration: none; } a:hover { color: #416D8E; border-bottom: 1px dotted #e2eff3; } acronym { font-weight: bold; font-style: oblique; cursor: help; border: 0px; /*Only for Mozilla Firefox*/ } h3 { color: #416D8E; font-size: 20px; font-weight: bold; margin-top: 13px; margin-bottom: 15px; border-bottom: 5px solid #416D8E; padding-bottom: 10px; padding-left: 55px; } /*H3 Background*/ div#linkList h3,div#intro h3{ background: url(img/h3bg_nav.gif) no-repeat 0px -3px; padding-left: 40px; } div#explanation h3{ background: url(img/h3bg.gif) no-repeat 0px -3px; } div#participation h3{ background: url(img/h3bg_part.gif) no-repeat 0px -3px; padding-left: 50px; } div#benefits h3{ background: url(img/h3bg_benef.gif) no-repeat 0px -3px; padding-left: 37px; } div#requirements h3{ background: url(img/h3bg_req.gif) no-repeat 0px -3px; padding-left: 47px; } /*End H3 background*/ /*Container*/ #container { margin-left: 0px; margin-top: 0px; padding: 0px; } /*Header image*/ div#extraDiv1{ background: url(img/header.gif) no-repeat; width: 100%; height: 648px; margin-left: 15px; margin-top: -20px; } #pageHeader { display: none; } #pageHeader h1 { width: 100%; height: 100%; } #intro { width: 300px; position: absolute; left: 20px; top: 1214px; } #supportingText { width: 450px; position: absolute; left: 330px; top: 620px; } #quickSummary p.p1 span{ display: none; } #quickSummary p.p2 { padding: 0 0 8px 0; text-transform: uppercase; font-weight: bold; } div#explanation,div#participation,div#benefits,div#requirements{ width: 400px; margin-left: 25px; } #footer, #quickSummary, #preamble, #lselect, #lfavorites, #lresources, #larchives { background-color: #CDE0F3; padding: 7px; margin: 15px; border: 5px solid #FFF0F1; } /*Rules for navigation*/ #linkList ul { margin: 0px; padding: 0px; } #linkList{ width: 300px; position: absolute; left: 20px; top: 598px; } #linkList li a{ text-transform: uppercase; font-size: 10px; font-weight: bold; } #linkList li a:hover { color: #416D8E; border: none; } #linkList li { list-style-type: none; display: block; margin: 0 0 0; padding: 1px; border-bottom: 1px dotted #000; } #linkList li a.c { color: #416D8E; font-size: 9px; font-weight: bold; display: inline; padding: 0; text-transform: uppercase; } #linkList li a:hover.c{ background-color: White; } /*End nav rules*/ /*Footer*/ div#footer{ border: 1px solid #416D8E; text-transform: uppercase; font-weight: bold; } /*En of code*/ /* css Zen Garden submission 122 - 'Centerfold', by John Oxton, http://joshuaink.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, John Oxton */ /* Added: Sept. 13th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* August 2004 =========================================================== Title: Centerfold Author: John Oxton Web Site: www.joshuaink.com Note: Ivy on the sides - in retrospect this idea was probably (not conciously) taken from hicksdesign.co.uk ========================================================================== */ /* General =============================================================== */ /* Font-sizes are relative to allow scaling in IE tutorial found at www.clagnut.com/blog/348/ */ body { font:75% Arial, Helvetica, sans-serif; color:#333; background:white url(back.png) repeat-y top center; /* zeldman.com */ margin:0; text-align:center; /* Positions all content in the center of the viewport */ } p{ font-size:1em; /* because of body font-size being 75% acutal font size 0.75em */ line-height:1.4em; margin:0.7em 0 0.7em 0; padding:0; } #preamble p, #supportingText p{ background:transparent url(hr.png) no-repeat bottom center; margin:0; padding:1.4em 0 1.4em 0; } a{ color:#900; } /* a:active added for IE a:focus for Mozilla - added to aid accesibility more than visual appearance */ a:hover, a:focus, a:active { background:black; color:white; border:0; text-decoration:none; } /* Show dotted a:link style only in decent browsers (not IE) - taken from http://www.shauninman.com/mute/project/this_is_cereal.php */ div[id="container"] a, div[id="container"] a:visited{ text-decoration:none; border-bottom:1px dotted #900; } /* Becuase IE6 doesn't do it by default - IE5 doens't do it at all */ acronym{ border-bottom:1px dotted #333; cursor:help; } acronym:hover{ border-top:1px dotted #333; border-bottom:0; } #lresources acronym{ border:0; } /* Content =============================================================== */ /* Center the site and return the contents to the left hand side */ #container { width:515px; text-align:left; padding:0; margin:0 auto; } /* position content to the right hand side */ #intro, #preamble, #supportingText, #quickSummary{ /* width when added with linkList width is 17px short of total site width creating a natural margin in the center */ width:290px; float:right; clear:right; margin:20px 0 0 0; } /* Replace the whole intro section with a graphic */ #intro #pageHeader { width:290px; height:307px; background:white url(intro.jpg) no-repeat top center; text-indent:-10000px; float:right; margin:10px 0 0 0; padding:0; } /* Replace p1 quickSummary with a graphic */ #quickSummary{ height:180px; background: url(quicksum.png) no-repeat bottom center; margin:10px 0 0 0; padding:0; text-indent:-10000px; } /* recover quickSummary p2 from text-indent and move above the graphic */ #quickSummary .p2{ margin:-20px 0 0 0; padding:0; text-indent:0; text-align:center; text-transform:uppercase; font: 0.8em Georgia, "Times New Roman", Times, serif; /* acutal size 0.6em; */ background:white; /* background colour for text size increase, masks background graphic */ } /* Hide headings from visual display (still visible to screen readers) and replace with images - first read about this at hicksdesign.co.uk */ h3{ width:290px; height:35px; margin:5px 0 5px 0; padding:0; text-indent:-10000px; float:right; overflow:hidden; } #preamble h3{ background:url(preamble.png) no-repeat center left; } #explanation h3{ background:url(explanation.png) no-repeat center left; } #participation h3{ background:url(participation.png) no-repeat center left; } #benefits h3{ background:url(benefits.png) no-repeat center left; } #requirements h3{ background:url(requirements.png) no-repeat center left; } /* Navigation ============================================================= */ #linkList{ font-family:Verdana, Arial, Helvetica, sans-serif; margin:0; padding:97px 0 0 0; width:208px; text-align:right; float:left; /* Only IE5 MAC needs the left float \*/ float:none; /* End IE5 MAC comment hack found at stopdesign.com see also http://www.stopdesign.com/log/2004/07/06/filtering-css.html */ } /* Because the linkList is not floated (except for IE5 MAC), this casued problems with usual image replacement methods, so... */ #linkList h3{ float:none; display:none; } /* linkList h3 may be hidden from screen readers and printers due to display none */ @media aural, braille, print{ #linkList h3{ display:block; } } #lselect, #lfavorites, #larchives, #lresources { /* Something shaky going on in IE6 with the background images, border-left stops it shaking */ border-left:1px solid white; padding:75px 0 0 0; margin:0 0 40px 0; } #lselect{ background:transparent url(designhead.png) no-repeat top left; } #lfavorites{ background:transparent url(favoritehead.png) no-repeat top left; } #larchives{ background:transparent url(archivehead.png) no-repeat top left; } #lresources{ background:transparent url(resourceshead.png) no-repeat top left; } #linkList ul{ margin:0; padding:0; list-style:none; } #linkList li{ font-size:0.8em; display:block; margin:0; padding: 0 0 7px 0; border-bottom:1px solid #F9F7F6; } /* Link Styles */ #linkList li a{ display:block; padding:4px 10px 4px 5px; margin:0 0 5px 0; border:0; text-transform:uppercase; font-weight:bold; text-decoration:none; color:#93A871; } /* Background position http://wellstyled.com/css-nopreload-rollovers.html */ #lselect li a, #lfavorites li a{ background:transparent url(visited.png) no-repeat -100px; } #lselect li a:visited, #lfavorites li a:visited{ background-position:0 50% ; } #linkList li a:hover, #linkList li a:focus, #linkList li a:active{ padding-right:6px; border-right:4px solid #81B4CF; color:#81B4CF; text-decoration:none; } #linkList li a.c{ display:inline; padding:0 2px 0 0; text-transform:lowercase; font-style:italic; font-weight:normal; margin:0; border:0; background-position:-100px; } #linkList li a.c:hover, #linkList li a.c:visited, #linkList li a.c:active, #linkList li a.c:focus{ padding:0 2px 0 0; border:0; background-position:-100px; } #larchives li, #lresources li{ border:0; } #lresources li a, #larchives li a{ padding-right:6px; border:1px solid #F9F7F6; border-right:4px solid #D6DECA; text-decoration:none; background:white; } #footer{ height:60px; background:transparent url(relax.png) no-repeat top left; margin:20px 0 0 0; padding:40px 0 0 30px; } #footer a{ color:#DCE4C2; text-decoration:none; font-weight:bold; border:0; } #footer a:hover, #footer a:focus, #footer a:active{ color:#900; text-decoration:none; font-weight:bold; border-bottom:1px dotted #900; background:transparent; } /* Print, because we're running out of trees faster than we are bandwidth ================================================ */ @media print{ body { text-align:left; color:black; } a{ color:black; text-decoration:none; border:0; } #linkList, #footer, #quickSummary .p2{ display:none; position:absolute; } #container{ width:90%; } #intro, #intro #pageHeader, #preamble, #supportingText, #quickSummary{ float:none; width:90%; display:block; text-indent:0; margin:0; padding:0; width:auto; height:auto; } h1, h2, h3{ display:block; text-indent:0; float:none; color:black; width:auto; height:auto; float:none; } }/* css Zen Garden submission 123 - 'Skyroots', by Axel Hebenstreit, http://www.sonnenvogel.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Axel Hebenstreit */ /* Added: Sept. 13th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Basic Elements */ html, body { color: white; font: 11px/16px "trebuchet ms", arial, helvetica, sans; background: #3a200a url(bg.gif) repeat-y center top; text-align: center; margin: 0; padding: 0; } p { font: 11px/16px "trebuchet ms", arial, helvetica, sans; text-align: justify; letter-spacing: 1px; margin: 0 0 0; padding: 0 22px 15px; } a { color: #59365f; text-decoration: none; background-color: #ffae00; } a acronym { color: #59365f; text-decoration: none; } #linkList a acronym { color: #ffae00; text-decoration: none; } a:hover { color: #feffff; text-decoration: underline; } acronym { color: #ffae00; text-transform: uppercase; cursor: help; } /* specific divs */ #footer { background: transparent url(footer_bg.gif) no-repeat left bottom; padding: 20px 0 60px 22px; } #container { background: #411948 url(steine.gif) repeat-y; display: block; margin: 0 auto; padding: 0; position: relative; width: 770px; } #lselect { background: #55012b url(kasten1_03.gif) no-repeat left bottom; padding-bottom: 30px; position: relative; } #larchives, #lresources { background: #b99ab8 url(blume_unten.gif) no-repeat left bottom; margin-top: 26px; padding-bottom: 15px; } /* header graphics */ #pageHeader { background: url(top.jpg) no-repeat 0 0; text-indent: -2000px; margin: 0; padding: 0; height: 366px; } #pageHeader h2 { line-height: 0; background: #411948 url(headlines_02.gif) no-repeat; text-indent: -2000px; display: block; margin: 0; padding: 0; position: relative; top: 385px; left: 355px; width: 370px; height: 68px; } #quickSummary { background-color: #59365f; text-align: left; margin: 82px 0 0; padding: 0; position: relative; top: 0; left: 355px; width: 370px; height: auto; } * html #pageHeader h2, * html #quickSummary { left: 155px; } #quickSummary p { font-style: italic; font-weight: bold; padding-right: 22px; padding-left: 22px; width: 323px; } h3 { text-indent: -2000px; margin: 0; padding: 0; } h1, h2 { display: none; } #preamble h3 { background: url(headlines_03.gif) no-repeat 0 0; margin: 0; padding: 0; width: 370px; height: 48px; } #explanation h3 { background: url(headlines_04.gif) no-repeat 0 0; margin: 0; padding: 0; width: 370px; height: 48px; } #participation h3 { background: url(headlines_05.gif) no-repeat 0 0; margin: 0; padding: 0; width: 370px; height: 48px; } #benefits h3 { background: url(headlines_06.gif) no-repeat 0 0; margin: 0; padding: 0; width: 370px; height: 48px; } #requirements h3 { background: url(headlines_07.gif) no-repeat 0 0; margin: 0; padding: 0; width: 370px; height: 48px; } #preamble, #supportingText { background-color: #59365f; text-align: left; position: relative; left: 355px; width: 370px; } * html #preamble, * html #supportingText { background-color: #59365f; text-align: left; position: relative; left: 155px; width: 370px; } /*linklist */ #linkList { position: absolute; top: 366px; left: 82px; width: 229px; overflow: hidden; } #linkList2 { text-align: left; position: relative; left: 38px; width: 191px; } #linkList h3 { margin: 0; width: 229px; height: 68px; } #linkList h3.select { background: url(kastenlilie.gif) no-repeat left top; position: relative; right: 38px; } #linkList h3.archives { background: url(liliarchives_01.gif) no-repeat left top; margin-top: 23px; position: relative; right: 38px; } #linkList h3.resources { background: url(liliresourcen_01.gif) no-repeat left top; margin-top: 23px; position: relative; right: 38px; } #linkList h3.select span { color: #feffff; font-size: 12px; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-transform: uppercase; text-indent: 0; letter-spacing: 1px; display: block; padding-top: 40px; padding-left: 70px; } #linkList h3.archives span, #linkList h3.resources span { display: none; } #linkList ul { margin: 0; padding: 0; } #linkList li { font-size: 11px; line-height: 11px; background: url(bullet1.gif) no-repeat 0 12px; list-style-type: none; display: block; margin: 0 0 0 14px; padding: 0 0 0 20px; height: auto; } #linkList li a { color: #feffff; font-size: 11px; font-weight: bold; line-height: 15px; text-decoration: none; background: transparent; display: block; padding: 9px 0 0 0; width: auto; } #linkList li a:hover { color: #ffae00; text-decoration: underline; } #linkList li a.c:link, #linkList li a.c:visited { color: #ffae00; font-size: 11px; font-weight: normal; line-height: 15px; display: inline; } #linkList li a.c:hover { color: #feffff; text-decoration: underline; } #linkList #larchives li, #linkList #lresources li { background: url(bullet2.gif) no-repeat 0 9px; list-style-type: none; display: block; margin-left: 14px; padding-left: 20px; height: 25px; } #linkList #larchives li a, #linkList #lresources li a { color: #411948; padding-top: 5px; padding-bottom: 3px; } #linkList #larchives li a:hover, #linkList #lresources li a:hover { color: #feffff; } /* extra divs */ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* css Zen Garden submission 124 - 'Teatime', by Michaela Maria Sampl, http://www.freecom.at/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michaela Maria Sampl, except background image, copyright Squidfingers - http://squidfingers.com/patterns/ */ /* Added: Sept. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* BASICS */ body { font: 9pt/16pt Georgia, Times New Roman, Times, serif; color: #010E22; background: #F5F5E9 url(pattern.gif) repeat; margin: 0px; border: 0px; padding: 0px; text-align: center; } p { font: 9pt/16pt Georgia, Times New Roman, Times, serif; margin-top: 0px; text-align: left; color: #010E22; } a:link { font-weight: bold; text-decoration: none; color: #A8A439; } a:visited { font-weight: bold; text-decoration: none; color: #6D7134; } a:hover, a:active { text-decoration: underline; color: #010E22; } /* LAYOUT */ #container { text-align: left; position: relative; background: #fff url(teacup.jpg) no-repeat top left; margin: 10px auto; border: 10px solid #C7CDD8; padding: 0px; width: 760px; voice-family: "\"}\""; voice-family: inherit; width: 740px; } html>body #container { width: 740px; } #intro { background: url(leaves_neu.gif) no-repeat top right; margin: 0px; } #pageHeader { padding-top: 65px; margin-left: 230px; } #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 0px; margin-left: 0px; margin-bottom: 16px; width: 192px; height: 22px; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; margin-left: 0px; margin-bottom: 68px; margin-top: 0px; width: 372px; height: 33px; } #pageHeader h2 span { display:none; } /* CONTENT */ #quickSummary { position: absolute; top: 320px; left: 30px; width: 172px; } #quickSummary p { font: bold 8pt/16pt Georgia, Times New Roman, Times, serif; text-align:left; } #preamble { margin: 0px 0px 0px 230px; padding: 0px 10px 0px 10px; width: 450px; border: 1px solid #B2B9C4; border-bottom: 1px solid #F1F2EF; background: #F1F2EF url(leave_piece_1.gif) no-repeat left top; } #supportingText { background: #F1F2EF url(bg.gif) no-repeat center top; border: 1px solid #B2B9C4; border-top: 1px solid #F1F2EF; margin-left: 230px; width: 470px; margin-bottom: 40px; padding-bottom: 10px; } #explanation { margin: 0px 10px 0px 10px; width: 450px; } #participation, #benefits, #requirements { margin: 15px 10px 0px 10px; width: 450px; } /* LINKS */ #linkList { position: absolute; top: 520px; left: 30px; } #linkList2 { font: 9px verdana, sans-serif; padding: 0px; margin-top: 20px; width: 150px; } #linkList h3.select { background: transparent url(h3_select.gif) no-repeat top left; margin: 0px 0px 0px 0px; width: 150px; height: 36px; } #linkList h3.select span { display:none } #linkList h3.favorites { background: transparent url(h3_favorites.gif) no-repeat top left; margin: 25px 0px 0px 0px; width: 150px; height: 36px; } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(h3_archives.gif) no-repeat top left; margin: 25px 0px 0px 0px; width: 150px; height: 36px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(h3_resources.gif) no-repeat top left; margin: 25px 0px 0px 0px; width: 150px; height: 36px; } #linkList h3.resources span { display:none; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #A8A439; font-weight: normal; } #linkList li a:visited { color: #010E22; font-weight: normal; } #linkList #lselect a.c:link { color: #383B16; font-weight: normal; } #linkList #lselect a.c:visited { color: #010E22; font-weight: normal; } /* FOOTER */ #footer { position: absolute; top: 10px; right: 50px; } #footer a:link, #footer a:visited { margin-right: 10px; } /* HEADLINES */ h3 { text-align: left; margin-bottom: 0px; } h3 span { display: none; } #preamble h3 { background: transparent url(h3_the_road.gif) no-repeat top left; width: 450px; height: 66px; margin-top: 15px; } #supportingText h3 { width: 450px; height: 50px; } #explanation h3 { background: transparent url(h3_a.gif) no-repeat top left; margin-top: 25px; } #participation h3 { background: transparent url(h3_b.gif) no-repeat top left; } #benefits h3 { background: transparent url(h3_c.gif) no-repeat top left; } #requirements h3 { background: transparent url(h3_d.gif) no-repeat top left; } /* css Zen Garden submission 125 - 'Beccah', by Chris Morrell, http://www.cmorrell.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Chris Morrell */ /* Added: Sept. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* General Styles */ html, body { margin: 0; padding: 0; } body { background: #eee; font: 76% Verdana, Arial, Helvetica, sans-serif; } p, div { font-size: 1em; } a:link { color: #900; } a:hover { color: #f00; } a:visited { color: #303; } acronym { cursor: default; } .accesskey { text-decoration: underline; } #container { position: relative; background: url(header.jpg) no-repeat; padding: 170px 10px 10px 10px; width: 770px; } /* Page Header Styles */ #pageHeader { display: none; } /* Navigation Bar Styles */ #linkList { position: absolute; top: 173px; left: 550px; background: url(sidebar.jpg) no-repeat; padding: 20px 25px 0 25px; width: 213px; voice-family: "\"}\""; voice-family: inherit; width: 182px; } html>body #linkList { width: 192px; } #linkList ul, #linkList li { list-style-type: none; margin: 0; padding: 0; } /* "Select a Design" Styles */ #lselect { margin: 100px 0 0 0; } #lselect li { margin-bottom: 5px; } #lselect a { font: bold 1em Georgia, "Times New Roman", Times, serif; display: block; font-variant: small-caps; text-decoration: none; letter-spacing: .3em; } #lselect a.c { font: 1em Verdana, Arial, Helvetica, sans-serif; display: inline; text-transform: none; letter-spacing: normal; } #lselect a.c:link { text-decoration: none; color: #000; } #lselect a.c:hover { text-decoration: underline; color: #f00; } h3.select { margin: 0; padding: 0; background: url(select-a-design.jpg) no-repeat; position: absolute; width: 399px; height: 225px; left: 0px; top: -130px; } h3.archives { margin: 0; padding: 0; position: relative; width: 209px; height: 68px; background: url(archives.gif) no-repeat; } h3 span { display: none; } /* "Archives" Styles */ #larchives li, #lresources li { border-bottom: 1px solid #ddd; margin-bottom: 7px; } #larchives a, #lresources a { text-decoration: none; } /* "Resources" Styles */ h3.resources { margin: 0; padding: 0; position: relative; width: 209px; height: 68px; background: url(resources.gif) no-repeat; } /* Main Content Styles */ #intro, #supportingText { margin: 0 230px 0 0; } #intro h3, #supportingText h3 { background-repeat: no-repeat; margin: 0; padding: 0; height: 50px; width: 475px; } #intro p, #supportingText p { margin-left: 20px; } #preamble, #supportingText { background: url(background.jpg) repeat-y; font: 1.3em Georgia, "Times New Roman", Times, serif; } #participation p, #benefits p { width: 730px; } /* Headings */ #explanation h3 { background-image: url(explanation.gif); } #participation h3 { background-image: url(participation.gif); } #benefits h3 { background-image: url(benefits.gif); } #requirements h3 { background-image: url(requirements.gif); } /* Quick Summary */ #quickSummary { cursor: default; font: 1.35em "Courier New", Courier, mono; margin: 0; padding: 71px 45px 3px 35px; position: relative; top: -34px; left: -10px; background: url(summary.jpg) no-repeat; color: #600; } /* Preamble */ #preamble { margin: 0; } #preamble h3 { background-image: url(preamble.gif); } /* Requirements */ #requirements p { width: 640px; } #requirements p.p1, #requirements p.p2, #requirements p.p3, #requirements p.p4 { background-repeat: no-repeat; padding-left: 90px; } #requirements p.p1 { background-image: url(1.gif); } #requirements p.p2 { background-image: url(2.gif); } #requirements p.p3 { background-image: url(3.gif); } #requirements p.p4 { background-image: url(4.gif); } /* Footer */ #requirements p.p5, #footer { color: #aaa; text-align: center; width: 770px; } #requirements p.p5 { border-top: 1px solid #ccc; padding: 15px 0 0 0; margin: 100px 0 0 0; } #footer { margin: 0 0 30px 0; } #requirements p.p5 a, #footer a { color: #aaa; } /* css Zen Garden submission 126 - 'C-Note', by Brian Williams, http://www.ploughdeep.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Brian Williams */ /* Added: Sept. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /*Portrait of Benjamin Franklin adapted from the U.S. 100 dollar bill; the intaglio for which was originally made by Thomas Hipschen, Master Engraver for the U.S. Bureau of Engraving and Printing.*/ /*--------------------------------------- GRID ---------------------------------------*/ body { margin:0; padding:0;} #container { position:absolute; width:100%;} #pageHeader { width:918px; height:320px;} #quickSummary { position:absolute; top:202px; left:296px; width:246px; height:118px;} #quickSummary p.p2 { position:absolute; top:-28px; left:324px; width:150px; padding:63px 0 50px 0; z-index:3;} #preamble {padding-top:35px;} #preamble, #supportingText { margin-left:185px; width:410px; position:relative; /*\*/left:185px; margin-left:0;/**/} #preamble p.p1 { position:absolute; top:35px; left:-170px; float:left;} #footer { padding:80px 0; text-align:center;} #linkList { position:absolute; top:238px; left:620px; width:480px; z-index:1;} #linkList2 { width:155px; position:relative; top:116px;} /*--------------------------------------- IMAGES ---------------------------------------*/ body {background:url(masthead.jpg) repeat-x;} #container {background:url(sidebody.gif) repeat-y;} #intro {background:url(logo-on-sunburst.jpg) no-repeat;} #pageHeader {background:url(PoorRichard.jpg) no-repeat;} #quickSummary {background:url(quickSummary.gif) no-repeat;} #quickSummary p.p2 {background:url(serial.gif) no-repeat;} #preamble h3 {background:url(preamble-h3.gif) no-repeat;} #preamble p.p1 {background:url(preamble-p1.gif) no-repeat;} #explanation h3 {background:url(explanation-h3.gif) no-repeat;} #participation h3 {background:url(participation-h3.gif) no-repeat;} #benefits h3 {background:url(benefits-h3.gif) no-repeat;} #requirements h3 {background:url(requirements-h3.gif) no-repeat;} #linkList {background:url(watermark.png) top right no-repeat;} #lselect h3 {background:url(lselect-h3.gif) no-repeat;} #larchives h3 {background:url(larchives-h3.gif) no-repeat;} #lresources h3 {background:url(lresources-h3.gif) no-repeat;} /*--------------------------------------- TYPOGRAPHY ---------------------------------------*/ body { font:76% Arial, Helvetica, sans-serif; color:#6C7A70;} h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dt, dd { margin:0; padding:0; list-style-type:none;} h3 {overflow:hidden;} h3 span, #preamble p.p1 span {visibility:hidden;} h1, h2, #quickSummary p.p1{ position:absolute; top:-500px;} p { line-height:2em; text-indent:1em; text-align:justify;} a { text-decoration:underline; color:#728569;} a:hover { text-decoration:underline; color:#900 !important;} a:visited { text-decoration:underline; color:#6C7A70;} #quickSummary p.p2 { line-height:normal; text-indent:0; text-align:left; letter-spacing:1px; text-transform:lowercase; font-variant:small-caps; font-size:10px; voice-family: "\"}\""; voice-family:inherit; font-size:12px;} #supportingText p {margin:5px 0;} #preamble p.p1 { height:0; padding-top:200px; width:155px;} #preamble h3, #supportingText h3 { height:20px; margin-bottom:8px; voice-family: "\"}\""; voice-family:inherit; height:0; padding-top:20px;} #explanation h3 { height:0; padding-top:25px;} #supportingText div {margin-top:20px;} #linkList2 div {margin-top:10px;} #linkList2 ul { margin-top:-110px; /*\*/margin-top:0;/**/} #linkList li { padding:10px 0; color:#909989; letter-spacing:1px;} #linkList2 h3 { height:10px; h\eight:0; padding-top:10px;} #lselect { font-variant:small-caps; text-align:right;} #lselect a { display:block; text-align:left; font:1.1em Georgia, serif; font-variant:normal;} #lselect a.c, #larchives, #lresources, #footer { display:inline; font-family:Arial, Helvetica, sans-serif; text-transform:lowercase; font-variant:small-caps; text-decoration:none; font-size:.8em; voice-family: "\"}\""; voice-family:inherit; font-size:1.0em;} #larchives, #lresources, #footer { display:block; letter-spacing:0px;}/* css Zen Garden submission 128 - 'Dragen', by Matthew Buchanan, http://www.cactuslab.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Matthew Buchanan */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Makes use of Alternate Box Model Hacks as described by Edwardson Tan: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html Makes use of Phark Revisited image replacement as described by Dave Shea: http://www.mezzoblue.com/tests/revised-image-replacement/ Tested and 100% compatible with: Internet Explorer 5.01+ (Win) Firefox 0.9.3 (Win) Opera 7.5.3 (Win) Safari 1.2.3 (Mac) Netscape 7.1 (Mac) Very minor issue found with: Internet Explorer 5.2.3 (Mac) Toy Dragon image by Maartje van Caspel, via iStockPhoto.com http://www.vancaspelenvdr.nl/portfolio/ http://www.istockphoto.com/user_view.php?id=127925 */ /* Document Styles */ body { background: #ccc; font: normal 10px/16px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif; color: #666; margin: 15px; text-align: center; /* For IE */ } p { margin: 0 0 5px 0; } p.p1 { font-size: 13px; line-height: 20px; } h3 { color: #18d; font-size: 10px; font-weight: normal; text-transform: uppercase; margin: 30px 0 2px 0; } a:link, a:visited { color: #9c0; text-decoration: none; } a:hover, a:active { color: #fff; background: #9c0; } ul { margin: 0; padding: 0 23px 10px 27px; list-style: none; line-height: 1.2em; } li { padding-bottom: 7px; } acronym { font-style: normal; border-bottom: 1px dotted #666; } .accesskey { text-decoration: underline; } /* Container Styles */ #container { position: relative; width: 720px !important; width /**/: 750px; background: #fff url(container_bg.gif) repeat-y; border: 15px solid #fff; margin: 0 auto; padding: 0; text-align: left; /* For IE, see above */ } /* Intro Styles */ #pageHeader { width: 720px; height: 220px; background: #18d url(title.jpg) no-repeat; } #pageHeader h1, #pageHeader h2 { text-indent: -999em; margin: 0; } #quickSummary { width: 720px; height: 39px; border-top: 1px solid #fff; background: #147; } #quickSummary p.p1 { position: absolute; left: -999em; } #quickSummary p.p2 { width: 248px !important; width /**/: 276px; height: 28px !important; height /**/: 39px; color: #6cf; margin: 0; padding: 11px 0 0 27px; border-right: 1px solid #fff; } #quickSummary a:link, #quickSummary a:visited { text-decoration: none; text-transform: uppercase; color: #fff; } #quickSummary a:hover, #quickSummary a:active { text-decoration: underline; background: transparent; } /* Supporting Text Styles */ #preamble, #explanation, #participation, #benefits, #requirements { margin: 0 50px 0 320px; } #footer { width: 708px !important; width /**/: 720px; height: 24px !important; height /**/: 30px; background: #18d; margin-top: 15px; padding: 6px 12px 0 0; border-top: 1px solid #fff; text-align: right; } #footer a:link, #footer a:visited { text-transform: uppercase; color: #fff; } #footer a:hover, #footer a:active { color: #18d; background: #fff; } /* Link List Styles */ #linkList { position: absolute; top: 260px; left: 0px; width: 275px; border-bottom: 1px solid #fff; } #linkList h3 { text-indent: -1100px; height: 45px; margin: 0; } #linkList a:link, #linkList a:visited { font-size: 11px; color: #fff; } #linkList a:hover, #linkList a:active { background: #fff; } #linkList a.c { font-size: 10px; } #linkList acronym { border-bottom: none; } #lselect, #lfavorites { border-top: 1px solid #fff; background: #18d; } #lselect h3 { background: url(select.gif); } #lfavorites h3 { background: url(favourites.gif); } #lselect li, #lfavorites li { color: #6cf; background: url(select_bg.gif) repeat-x left bottom; } #lselect a:hover, #lselect a:active, #lfavorites a:hover, #lfavorites a:active { color: #18d; } #larchives { border-top: 1px solid #fff; background: #9c0; } #larchives h3 { background: url(archives.gif); } #larchives li { color: #cf3; background: url(archives_bg.gif) repeat-x left bottom; } #larchives a:hover, #larchives a:active { color: #9c0; } #lresources { border-top: 1px solid #fff; background: #d8c; } #lresources h3 { background: url(resources.gif); } #lresources li { color: #fcc; background: url(resources_bg.gif) repeat-x left bottom; } #lresources a:hover, #lresources a:active { color: #d8c; }/* css Zen Garden submission 130 - 'Pseudo-Sahara', by John Barrick, http://www.waycoolwebdesign.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, John Barrick */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font: 83%/150% verdana, arial; color: #555753; background: #E6CCB3 url(bg_gold-blue-beige.gif) repeat-x top; margin: 0px; padding: 0px; } p { font: 83%/150% verdana, arial; margin-top: 0px; text-align: justify; } h3 { font: normal 100% verdana, arial; letter-spacing: 1px; margin-bottom: 0px; } a:link { font-weight: bold; text-decoration: none; color: #4E7ED1; } a:visited { font-weight: bold; text-decoration: none; color: #4E7ED1; } a:hover, a:active { text-decoration: none; color: #4E7ED1; border-bottom: dotted 1px } /* specific divs */ #container { background: url(bg_hdr-csszengarden.jpg) no-repeat top left; padding: 0px; margin: 0px; position: absolute; top: 0px; left: 0px; width: 744px; height: 326px; } #intro { } #pageHeader { } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent; } #pageHeader h1 span { display:none } #pageHeader h2 { background: transparent; float: right; } #pageHeader h2 span { display: none; } #quickSummary { position: absolute; top: 175px; left: 26px; width: 178px; height: 150px; color: #000; overflow: auto; } #quickSummary p { font: 83%/133% verdana, arial; text-align: left; letter-spacing: 1px; } #preamble { position: absolute; top: 253px; left: 255px; width: 470px; height: 200px; overflow: auto; } #supportingText { position: absolute; top: 466px; left: 255px; width: 470px; } #footer { text-align: center; margin-bottom: 11px; font: 83%/150% verdana, arial; } #footer a:link, #footer a:visited { margin-right: 20px; } #preamble h3 { background: transparent url(bg_hdr_road-to.gif) no-repeat top left; } #explanation h3 { background: transparent url(bg_hdr_what-is-this-about.gif) no-repeat top left; } #participation h3 { background: transparent url(bg_hdr_participation.gif) no-repeat top left; } #benefits h3 { background: transparent url(bg_hdr_benefits.gif) no-repeat top left; } #requirements h3 { background: transparent url(bg_hdr_requirements.gif) no-repeat top left; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 0px; width: 420px; height: 32px; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display:none; } #explanation, #participation, #benefits, #requirements { margin-bottom: 22px; } #linkList { background: transparent url(bg_nav-left.gif) top left repeat-y; position: absolute; top: 330px; left: 0px; width: 256px; margin-top: -4px; z-index: 1; } #linkList2 { font: 82%/150% verdana, arial; margin: 0px; background: transparent url(bg_leftnav_bottom.jpg) bottom left no-repeat; } #linkList h3.select { background: transparent url(bg_hdr_select-a-design.gif) no-repeat top left; width: 256px; height: 26px; margin-top: 0px; margin-bottom: 11px; margin-left: 0px; margin-right: 0px; } #linkList h3.select span { display: none } #linkList h3.favorites { background: transparent url(bg_hdr_favorites.gif) no-repeat top left; width: 256px; height: 26px; } #linkList h3.favorites span { display: none } #linkList h3.archives { background: transparent url(bg_hdr_archives.gif) no-repeat top left; width: 256px; height: 26px; } #linkList h3.archives span { display: none } #linkList h3.resources { background: transparent url(bg_hdr_resources.gif) no-repeat top left; width: 256px; height: 26px; } #linkList h3.resources span { display: none } #lselect, #lfavorites, #larchives { margin-bottom: 20px; } #lselect h3, #lfavorites h3, #larchives h3, #lresources h3 { margin-bottom: 11px; } #lselect ul li, #lfavorites ul li, #larchives ul li, #lresources ul li { margin-left: 28px; width: 160px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; background: transparent url(cr1.gif) no-repeat top center; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #4E7ED1; } #linkList li a:visited { color: #4E7ED1; } #lselect ul a { display: block; font-weight: bold; margin-bottom: -2px; } #lselect ul a.c { display: inline; font-weight: normal; } #lselect ul a:hover { color: #000; text-decoration: none; border: none; } #lresources { background: transparent url(bg_leftnav_bottom.jpg) bottom left no-repeat; padding-bottom: 165px; }/* css Zen Garden submission 131 - 'Type Thing', by Michal Mokrzycki, http://nf.hyperreal.info/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michal Mokrzycki */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { font-family: Georgia, Palatino Linotype, Times, Times New Roman, serif; color: #fff; background: #fff url(body_back.gif) top left repeat-y; margin: 0; padding: 0 0 20px 0; } /* relative font size */ body, body div, body p, body th, body td, body li, body dd, body span { font-size: small; voice-family: "\"}\""; voice-family: inherit; font-size: medium; } html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd { font-size: medium; } p { line-height: 80%; margin: 5px 0 10px 0; text-align: justify; } p span { font-size: 70%; } a:link { font-weight: bold; color: #FFD200; } a:visited { text-decoration: none; color: #FFD200; } a:hover, a:active { background: #FFD200; text-decoration: none; color: #000; } #container { width: 473px; margin: 0px; } #intro { width: 473px; } #container { width: 473px; background: url(head.gif) top left no-repeat; } #pageHeader { width: 291px; height: 259px; background: url(head_hover.gif) 0 -259px no-repeat; } #pageHeader:hover { background: url(head_hover.gif) 0 0 no-repeat; cursor: move; } /* hide header text */ #pageHeader h1, #pageHeader h2 { width: 1px; height: 1px; text-indent: -9000px; margin: 0; } #quickSummary { width: 140px; position: absolute; top: 270px; left: 298px; } #quickSummary p.p1 { text-indent: -9000px; width: 1px; height: 1px; position: absolute; left: -10px; } #quickSummary p.p2 { font-weight: bold; } #preamble { width: 240px; margin-left: 20px; } #preamble h3 { width: 237px; height: 17px; margin: 15px 0 0 0; text-indent: -9000px; background: url(preamble_h3.gif) top left no-repeat; } #preample p { margin-top: 0; } #supportingText { width: 240px; margin-left: 20px; } #explanation h3 { width: 235px; height: 15px; margin: 10px 0; text-indent: -9000px; background: url(explanation_h3.gif) top left no-repeat; } #participation h3 { width: 239px; height: 103px; margin: 10px 0; text-indent: -9000px; background: url(participation_h3.gif) top left no-repeat; } #benefits h3 { width: 234px; height: 14px; margin: 10px 0; text-indent: -9000px; background: url(benefits_h3.gif) top left no-repeat; } #requirements h3 { width: 234px; height: 15px; margin: 10px 0; text-indent: -9000px; background: url(requirements_h3.gif) top left no-repeat; } div#footer { position: absolute; top: 10px; left: 480px; width: 90px; } div#footer a { display: block; margin-bottom: 1px; border-bottom: 1px solid #f2f2f2; text-align: right; float: left; width: 50px; font-size: 10px; font-family: Tahoma, sans-serif; color: #000; clear: left; font-weight: normal; text-decoration: none; line-height: 20px; } div#linkList { width: 150px; position: absolute; top: 300px; left: 297px; } h3.select { text-indent: -9000px; width: 116px; height: 19px; margin: 20px 0 10px 0; background: url(select_design.gif) top left no-repeat; } h3.archives { text-indent: -9000px; width: 63px; height: 13px; margin: 20px 0 10px 0; background: url(archives.gif) top left no-repeat; } h3.resources { text-indent: -9000px; width: 75px; height: 13px; margin: 20px 0 10px 0; background: url(resources.gif) top left no-repeat; } div#linkList ul { margin: 0; padding: 0; list-style: none; } div#lselect ul li { font-size: 70%; margin-bottom: 3px; padding: 2px; background: #63939C; font-weight: normal; } div#lselect ul li:hover { background: #58828A; } div#lselect ul li a { display: block; text-decoration: none; padding: 5px 5px 5px 0; font-size: 100%; color: #60D4E9; font-family: Tahoma, sans-serif; } div#lselect ul li a:hover { color: #fff; background: none; } div#lselect ul li a.c { display: inline; font-family: Georgia, serif; padding: 0; border: 0; color: #fff; font-size: 100%; } div#larchives ul li, div#lresources ul li { margin-bottom: 3px; padding: 2px; background: #63939C; font-size: 10px; font-family: Tahoma, sans-serif; font-weight: normal; } div#larchives span, div#lresources span { font-size: 10px; } div#larchives ul li a, div#lresources ul li a { text-decoration: none; color: #fff; font-weight: normal; } div#larchives ul li a:hover, div#lresources ul li a:hover { background: none; }/* css Zen Garden submission 132 - 'Bonsai', by Martin Plazotta, http://martin.plazotta.at/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Martin Plazotta */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0; padding: 0; background: #fff; } h3 { margin-left: 22px; margin-top: 20px; border-bottom: 1px dashed #000; } h3 span { display: none; } p { font: normal 13px Arial, Helvetica, sans-serif; color: #000; padding-left: 22px; padding-right: 10px; } a { font: normal 13px Arial, Helvetica, sans-serif; color: #050; text-decoration: underline; } a:visited { color: #003399; text-decoration: underline; } a:hover { color:#00CC00; text-decoration: underline; } acronym { font-weight: bold; color: #000; border-bottom:1px dashed #000; cursor: help; } acronym:hover { color: #050; } li { padding-left: 5px; margin-left: 10px; padding-bottom: 1em; font: normal 13px Arial, Helvetica, sans-serif; list-style-image: url(listimage.gif); } #container { width: 675px; margin: 0; padding: 0; background: url(container_bg.gif) 0 0 no-repeat; text-align: left; float: right; } #intro { width: 500px; margin: 0; padding: 0; float: right; } #pageHeader { width: 300px; height: 195px; margin: 0; padding: 0; background: url(header.gif) 0 0 no-repeat; float: right; } #pageHeader h1, h2 { margin-top: 0; } #pageHeader h1 span, h2 span { display: none; } #quickSummary { width: 200px; height: 500px; margin: 0; padding: 0; background: url(summary_bg.gif) 0 0 no-repeat; float: left; } #quickSummary .p1 span { display: none; } #quickSummary .p1 { margin: 0; padding: 0; } #quickSummary .p2 { margin: 0; padding: 290px 20px 0 50px; text-align: right; } #preamble { width: 300px; height: 345px; margin: 0; padding: 0; background: url(intro_bg.gif) 0 0 no-repeat #C5F7A5; float: right; } #preamble h3 { height: 24px; background: url(road.gif) 0 0 no-repeat; margin-top: 38px; } #supportingText { width: 300px; margin: 0; padding: 0; background: #C5F7A5; float: right; } #explanation h3 { height: 24px; background: url(about.gif) 0 0 no-repeat; } #participation h3 { height: 24px; background: url(participation.gif) 0 0 no-repeat; } #benefits h3 { height: 24px; background: url(benefits.gif) 0 0 no-repeat; } #requirements h3 { height: 24px; background: url(requirements.gif) 0 0 no-repeat; } #footer { width: 279px; height: 30px; padding-top: 8px; padding-right: 20px; margin-top: 50px; margin-bottom: 10px; background: url(footer.gif) 0 0 no-repeat; float: right; text-align: right; /* Tantek's Hack */ voice-family: "\"}\""; voice-family: inherit; width: 259px; height: 22px; } #footer a { font: normal 13px Arial, Helvetica, sans-serif; color: #00CC00; text-decoration: none; } #footer a:hover { color:#050; text-decoration: none; } #linkList { position: absolute; top: 418px; width: 200px; margin-left:175px; padding: 0; background: url(link_bg.gif) 0 100% no-repeat #A5DBA5; } #lselect h3 { height: 24px; background: url(select.gif) 0 0 no-repeat; } #lselect li { padding-bottom: 0.25em; } #lselect a.c { font: normal 11px Arial, Helvetica, sans-serif; display: block; } #lfavorites h3 { height: 24px; background: url(favorites.gif) 0 0 no-repeat; } #larchives h3 { height: 24px; background: url(archives.gif) 0 0 no-repeat; } #lresources h3 { height: 24px; background: url(resources.gif) 0 0 no-repeat; }/* css Zen Garden submission 133 - 'Ordered Zen', by Steve Smith, http://www.orderedlist.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Steve Smith */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* CSS Document */ a:link { color:#8297A7; text-decoration:underline; } a:visited { color:#A082A7; } a:hover { text-decoration:none; } body { font:x-small/1.4 Tahoma, Verdana, Helvetica, Arial, sans-serif; background:#FFF url(style/bg.gif) repeat top left; color:#555040; margin:0; padding:0; } #container { margin:0 0 0 45px; background:#FFF url(style/bg_container.gif) repeat-y top left; width: 640px !important; width /**/:650px; /* IE5/Win */ padding:0 5px; border-bottom:5px solid #FFF; position:relative; font-size:110%; } #pageHeader { width:640px; height:75px; background:#FFF url(style/page_header.jpg) no-repeat top left; } #quickSummary { height:125px; width:640px; background-color:#FFF; position:relative; } #quickSummary p { margin:0; padding:0; } #quickSummary .p1 { position:absolute; top:0; left:0; width:405px; height:120px; background:#555040 url(style/quick_summary_p1.jpg) no-repeat top left; } #quickSummary .p1 span { display:none; } #quickSummary .p2 { position:absolute; top:0; left:410px; width:230px; height:120px; background:transparent url(style/button_html.gif) no-repeat top left; overflow:hidden; } #quickSummary .p2 span { visibility:hidden; white-space:nowrap; } #quickSummary .p2 a { width:230px; height:60px; float:right; visibility:visible; text-indent:-9000px; overflow:hidden; margin-top:-1.4em; margin-bottom:1.4em; } #pageHeader h1, #pageHeader h2 { display:none; } #preamble { margin-right:235px; padding:5px; background:#E9E6D9; } #preamble h3 { margin:0 0 5px; padding:0; width:238px; height:24px; text-indent:-9000px; overflow:hidden; background:transparent url(style/title_the_road.gif) no-repeat top left; } #preamble p { margin:0 10px 10px; padding:0; } #preamble p.p3 { margin:0 10px 5px; } #supportingText { margin-right:235px; padding:5px; } #linkList { position:absolute; top:200px; left:415px; width:230px; } #footer { margin:0 -240px -5px -5px; border-top:5px solid #FFF; background-color:#555040; padding:10px; text-transform:uppercase; } #footer a { color:#FFF; text-decoration:underline; } #footer a:hover { color:#D2DBE2; text-decoration:none; } #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin:10px 0 5px; padding:0; width:238px; height:24px; } #explanation h3 { background:transparent url(style/title_so_what.gif) no-repeat top left; } #participation h3 { background:transparent url(style/title_participation.gif) no-repeat top left; } #benefits h3 { background:transparent url(style/title_benefits.gif) no-repeat top left; } #requirements h3 { background:transparent url(style/title_requirements.gif) no-repeat top left; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display:none; } #lselect li a, #lfavorites li a {display: block; margin-left:-10px; font-weight:bold;} #linkList li a.c, #lfavorites li a.c {float:none; display:inline; margin-left:0; font-weight:normal; font-size:100%;} #supportingText p { margin:0 10px 10px; padding:0; } #linkList ul { width:210px; margin:0 0 10px 15px; padding:0; } #linkList li { padding: 0 0 0 20px; margin:0 0 5px; list-style-type:none; white-space:nowrap; background: transparent url(style/bullet_normal.gif) no-repeat 0 1px; } #lselect ul, #lfavorites ul { width:210px; margin:0 0 10px 15px; padding:0; } #lselect li, #lfavorites li { padding: 0 0 0 25px; margin:0 0 5px; list-style-type:none; clear:left; white-space:nowrap; background: transparent url(style/bullet_styles.gif) no-repeat 0 3px; } #linkList h3 { margin:0 0 10px; background:#6E6855 url(style/link_list_h3.gif) repeat-y top left; padding:5px 5px 5px 15px; font-weight:bold; color:#E9E6D9; font-size:100%; } acronym { border-bottom:1px dotted #555040; cursor:help; } a acronym { border-bottom:1px dotted #8297A7; } #lfavorites, #larchives, #lresources { border-top:5px solid #FFF; } /* css Zen Garden submission 134 - 'El Collar de Tomas', by Maria Stultz, http://www.mqstudio.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Maria Stultz */ /* Added: Oct. 21st, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body {margin: 0; padding: 0; background: #d17415 url(img/bodybg.gif) 748px 0 repeat-y; font: normal 12px/140% "Trebuchet MS", Verdana, Arial, sans-serif;} p {margin: 0; padding: 0;} h3 {margin: 0; padding: 0; color: #900; font-size: 12px;} ul {list-style: none; margin: 0; padding: 0;} a {text-decoration: none;} acronym {font-weight: bold; font-style: normal; border-width: 0;} #linkList acronym {font-weight: normal;} #container {width: 748px; background: #ffeed6 url(img/containerbg.gif) repeat-y;} #extraDiv2 {position: absolute; top: 100px; left: 0; width: 100px; height: 323px; background: url(img/collar.gif) no-repeat;} #intro {width: 600px;} #pageHeader {height: 100px; background: #807944;} #pageHeader h1 {margin: 0 0 0 100px; padding: 0; height: 100px; line-height: 100px; background: #982417 url(img/header.gif) top right no-repeat;} #pageHeader h1 span {position: absolute; left:-5000px;} #pageHeader h2 {position: absolute; left:-5000px;} #quickSummary {margin-left: 100px; height: 50px; background: url(img/summarybg.jpg) 5px 5px no-repeat;} #quickSummary p.p1 {height: 41px; line-height: 41px; background: url(img/summarytxt_1.gif) 232px 7px no-repeat;} #quickSummary p.p1 span {position: absolute; left:-5000px;} #extraDiv1 {position: absolute; top: 107px; left: 332px; width: 257px; height: 41px; background: url(img/summarytxt_2.gif) no-repeat;} #quickSummary p.p2 {position: absolute; top: 423px; left: 0; width: 100px; height: 83px; color: #ffeed6; background: url(img/sample.gif) no-repeat; text-indent: -5000px;} #supportingText {margin: 0 148px 0 100px; background: #982417 url(img/red.gif) bottom no-repeat; } #supportingText a {color: #f93; font-weight: bold;} #supportingText a:visited {color: #c60; text-decoration: underline;} #supportingText a:hover {color: #f93; text-decoration: underline;} #supportingText p {padding-bottom: 12px;} #supportingText div {color: #fdf3e5; font-size: 11px; margin-left: 157px; margin-right: 30px;} #preamble, #supportingText div#explanation {background: #fdf3e5; color: #333; font-size: 12px; margin-right: 0;} #preamble {margin-left: 100px; padding: 30px 30px 0 30px; background: #fdf3e5 url(img/preamblebg.gif) 5px 0 no-repeat;} #supportingText div#explanation {padding: 30px 30px 18px 30px; margin-left: 0;} #preamble p, #explanation p.p1 {display: inline;} #explanation p.p2 {padding-top: 12px;} #participation, #benefits, #requirements {padding: 15px 0 3px 0; border-bottom: 1px solid #b76151;} #participation h3 {width: 102px; left: -122px; background: url(img/participation.gif) no-repeat;} #benefits h3 {width: 70px; left: -90px; background: url(img/benefits.gif) no-repeat;} #requirements h3 {width: 107px; left: -127px; background: url(img/requirements.gif) no-repeat;} #participation h3, #benefits h3, #requirements h3 {height: 17px; line-height: 17px; position: relative;} #participation h3 span, #benefits h3 span, #requirements h3 span {position: relative; left: -5000px;} #participation p.p1, #benefits p.p1, #requirements p.p1 {margin-top: -17px;} #supportingText div#footer {padding: 20px 0 20px 1.5em; text-transform: uppercase; background: #982417 url(img/bullet.gif) 0 50% no-repeat; margin-right: 0;} #footer a {padding: 0 1.5em 0 0; margin: 0 .5em 0 0; background: url(img/bullet.gif) 100% 50% no-repeat; width: 5%;} #linkList {position: absolute; top: 0; left: 601px; width: 147px; background-color: #76693c;} #linkList h3 {text-transform: uppercase; letter-spacing: 2px; line-height: 100%; padding-bottom: 30px;} #linkList h3 span:before {content:".:";} #linkList h3 span:after {content:".";} #linkList h3.select {width: 147px; height: 105px; line-height: 105px; background: #5b5962 url(img/select.gif) bottom no-repeat; padding-bottom: 0;} #linkList h3.select span {position: relative; left:-5000px;} #linkList div {color: #dbd2a1; text-align: center; font-size: 11px;} #linkList div ul {padding: 0 14px;} #linkList div li {display: block; padding: 10px 0; border-bottom: 1px solid #9f916b;} #linkList2 a {color: #dbd2a1;} #linkList2 a:visited {color: #9f9667;} #linkList2 a:hover {color: #fff;} #lselect a, #lfavorites a {display: block; font-weight: bold;} #lselect a.c, #lfavorites a.c {display: inline; font-weight: normal;} #lfavorites, #larchives, #lresources {margin-top: -2px; background: #76693c url(img/stone.gif) 60px 70px no-repeat; padding-top: 50px;} /* css Zen Garden submission 135 - 'contemporary nouveau', by David Hellsing, http://www.monc.se/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, David Hellsing */ /* Added: Oct. 22nd, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ________________ general ________________ */ body { margin: 0; padding: 0; background: #554 url(bg.gif); font: small/1.5em georgia, times, serif; color: #333331; text-align: center; } a { color: #c50; text-decoration: none; border-bottom: 1px solid #dca; } a:visited { color: #a86; border: none; } a:hover { color: #000; border-bottom: 1px solid #333331; } acronym { cursor: help; font-style: normal; border: none; } h1 { display: none; } h2 { font-size: 2em; font-weight: normal; color: #922; margin: 0 0 0.7em 0; padding: 0; } h3 { width: 420px; height: 20px; margin: 1.2em 0 0.8em 0; } h3 span { display: none; visibility: hidden; } p { text-indent: 1.5em; font-size: 88%; margin: 0 0 0.6em 0; } /* The following hack is to correct paragraph text size in IE/WIN */ /* \*/ * html body p { font-size: 80%; } /* */ /* ________________ containers ________________ */ #container { position: relative; text-align: left; margin: 0 auto; width: 750px; background: #fff url(main.jpg) repeat-y; border-bottom: 15px solid #000; } #intro { width: 750px; background: #fff url(main.jpg) repeat-y; } #supportingText { width: 430px; margin-left: 30px; } #preamble { margin-left: 30px; width: 430px; } #pageHeader { width: 750px; height: 250px; background: #000 url(top.jpg) no-repeat; } #quickSummary { position: absolute; left: 510px; width: 210px; background: transparent url(h3-download.gif) no-repeat 0 0; border-bottom: 1px solid #923b09; } #footer { margin: 3em 0 0 0; font: bold 9px/3em tahoma, verdana, sans-serif; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 2em; } #linkList { position: absolute; top: 320px; left: 510px; width: 210px; margin-right: 30px; } /* ________________ lists & typo ________________ */ #pageHeader h1, #pageHeader h2 { display: none; } #quickSummary p.p2 { text-indent: 0; font: 10px/16px tahoma, verdana, sans-serif; color: #efece3; padding: 5px 17px; margin: 25px 0 0 0; background: #bd4d0d url(list-bg.jpg); border-top: 1px solid #923b09; } #quickSummary p.p2 a { color: #efece3; border: none; font-weight: bold; } #quickSummary p.p2 a:hover { color: #ec9; } #quickSummary p.p1 { display: none; } #footer a { background: #cb9; padding: 2px 5px; color: #edb; border: none; margin: 0; } #footer a:hover { background: #000; border: none; } #linkList h3 { width: 210px; height: 25px; margin: 1em 0 0 0; padding: 0; } #linkList p, #linkList li { font: x-small/1.6em tahoma, verdana, sans-serif; color: #efece3; text-indent: 0; } #linkList ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #923b09; background: #bd4d0d url(list-bg.jpg); } #linkList li { color: #000; border-bottom: 1px solid #923b09; line-height: 1.5em; padding: 0.5em 17px; } #linkList li:hover { background: #b64a0b; } #linkList li a { display: block; border: none; color: #f4f0e6; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 60%; } #linkList li a:hover { color: #ec9; background-position: -300px 60%; } #linkList li a.c { display: inline; padding: 0; margin: 0; background: none; color: #000; font-weight: normal; } #linkList li a.c:hover { color: #6e2308; } #linkList #larchives li, #linkList #lresources li, #linkList #lfavorites li { padding: 0.5em 0; } #linkList #larchives li a, #linkList #lresources li a, #linkList #lfavorites li a { background: transparent url(bullet.gif) no-repeat 5px 60%; display: inline; padding-left: 17px; margin: 0; } #linkList #larchives li a:hover, #linkList #lresources li a:hover, #linkList #lfavorites li a:hover { background-position: -295px 60%; } h3.select { background: transparent url(h3-select.gif) no-repeat;} h3.resources { background: transparent url(h3-resources.gif) no-repeat;} h3.archives { background: transparent url(h3-archives.gif) no-repeat; } h3.favorites { background: transparent url(h3-favorites.gif) no-repeat; } #preamble h3 { background: url(h3-theroad.gif) no-repeat; margin-top: 0; } #explanation h3 { background: url(h3-sowhat.gif) no-repeat; } #participation h3 { background: url(h3-participation.gif) no-repeat; } #benefits h3 { background: url(h3-benefits.gif) no-repeat; } #requirements h3 { background: url(h3-requirements.gif) no-repeat; height: 23px; margin-bottom: 0.7em; }/* css Zen Garden submission 136 - 'The Final Ending', by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Ray Henry */ /* Added: Oct. 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* The Final Ending */ /* CSS Zen Garden Halloween Submission */ /* Author: Ray Henry */ /* www.reh3.com */ * {margin:0;padding:0;} body {background:#000 url(r3_zen666_bg.jpg) no-repeat top left;} /* Basic Positioning ***********************************************************************************/ #container { width:770px; position:relative; } #pageHeader {width:770px;height:215px;} #quickSummary, #preamble, #supportingText { float:left; width:423px; } #linkList { margin:0 0 0 493px; } * html #linkList {margin:-380px 0 0 493px;} /* for IE 5+ PC */ /* #intro ***********************************************************************************/ #pageHeader { background:url(r3_zen666_banner_bg.jpg) no-repeat top left; } #pageHeader h1 { margin:0 0 0 291px; background:url(r3_zen666_logo.jpg) no-repeat top left; width:479px; height:215px; text-indent:-5000px; } #pageHeader h2 {display:none;} #quickSummary { background:url(r3_zen666_qs_bg.jpg) no-repeat top left; height:120px; padding:28px 35px 0 35px; } #preamble {padding:0 35px 0 35px;} #quickSummary p, #preamble p { font-size:11px; font-family:verdana; color:#555; margin:12px 0; } #preamble p {line-height:16px;} #quickSummary a:link, #quickSummary a:active, #quickSummary a:visited {color:#555;} #quickSummary a:hover {color:#900;} #preamble h3 { background:url(r3_zen666_road_bg.jpg) no-repeat top left; margin:0 0 0 -35px; width:399px; height:37px; text-indent:-5000px; } /* #supportingText ***********************************************************************************/ #supportingText {padding:0 35px 0 35px;} #supportingText p { font-size:11px; font-family:verdana; color:#555; margin:12px 0; line-height:16px; } #supportingText a:link, #supportingText a:active, #supportingText a:visited {color:#555;} #supportingText a:hover {color:#900;} #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin:20px 0 0 -35px; width:399px; height:37px; text-indent:-5000px; } #explanation h3 {background:url(r3_zen666_about_bg.jpg) no-repeat top left;} #participation h3 {background:url(r3_zen666_part_bg.jpg) no-repeat top left;} #benefits h3 {background:url(r3_zen666_ben_bg.jpg) no-repeat top left;} #requirements h3 {background:url(r3_zen666_req_bg.jpg) no-repeat top left;} #footer { background:url(r3_zen666_footer_bg.jpg) no-repeat top left; height:60px; margin:0 -35px 0 -35px; padding:240px 0 0 0; text-align:center; } #supportingText #footer a:link, #supportingText #footer a:active, #supportingText #footer a:visited { margin:0 10px; color:#900; } #supportingText #footer a:hover {color:#555;} /* #linkList ***********************************************************************************/ #linkList { background:url(r3_zen666_lickList_bg.jpg) no-repeat top left; padding:1px 0 0 7px; font-size:10px; font-family:verdana; color:#444; } #linkList ul { margin:0 0 10px 0; list-style:none; width:131px; } #linkList ul li { padding:5px 8px; border-bottom:1px dashed #333; } #lselect h3, #larchives h3, #lresources h3 { margin:0; width:131px; height:35px; text-indent:-5000px; } #lselect h3 {background:url(r3_zen666_lselect_bg.jpg) no-repeat top left;} #larchives h3 {background:url(r3_zen666_larchive_bg.jpg) no-repeat top left;} #lresources h3 {background:url(r3_zen666_lres_bg.jpg) no-repeat top left;} #linkList a:link, #linkList a:active, #linkList a:visited {color:#444;} #linkList a:hover {color:#900;} /* #extraDiv1 ***********************************************************************************/ #extraDiv1 { position:fixed; bottom:0; left:540px; background:url(r3_zen666_tombstone.png) no-repeat top left; width:227px; height:267px; } * html #extraDiv1 {display:none;} /* For IE 5+ PC */ #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display:none;}/* css Zen Garden submission 137 - 'DJ Style', by Ramon Bispo, http://ilhasol.com/bastidores.asp */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Ramon Bispo */ /* Added: Nov. 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ########################################################################################################## css Zen Garden style - 'Dj Style' by Ramon Bispo da Silva (Page) Rio de Janeiro, Brazil | September - November, 2004 | All Rights reserved ########################################################################################################### */ /* basic elements */ body { font: 12px/17px tahoma, arial; background: #155970; margin: auto auto; padding: 0; text-align: center; } p { font: 12px/17px tahoma, arial, sans-serif; margin: 0 0 17px 0; } a:link { font-weight: bold; text-decoration: none; color: #333399; } a:visited { font-weight: bold; text-decoration: none; color: #6699FF; } a.c:visited { font-weight: normal; text-decoration: none; color: #858686; } a:hover, a:active { text-decoration: underline; color: #3366CC; } ul { list-style-type: none; margin: 0; padding: 0; } /* specific divs */ #container { width: 762px; padding: 0; margin: auto; text-align: left; background: url(pageheader.gif) no-repeat top left; } #intro { vertical-align: bottom; } #pageHeader { padding: 0; margin: 0; height: 425px; border: 1px solid white; } #pageHeader h1 { width: 760px; height: 430px; margin: 0px 0px 0px 0px; padding: 0; } #pageHeader h1 span { display:none } #pageHeader h2 { padding: 0; margin: 0; } #pageHeader h2 span { display: none; } #quickSummary p.p1 { display:none; } #quickSummary p.p1 span{ display: none; } #quickSummary p.p2{ display: block; position: absolute; border: 1px solid #ffffff; top: 400px; margin-left: 250px; padding: 0 7px 0 7px; font-size: 10px; text-align: center; color: #ffffff; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif; clear: both; } #quickSummary p.p2 a:link, a:active{ color:#33eeff; } #quickSummary p.p2 a:hover{ text-decoration: underline; } #quickSummary p.p2 a:visited{ color:#33eeff; text-decoration: line-through; } #preamble { width: 291px; float: left; background: url(bg_preamble.gif) no-repeat; } #preamble h3 { background: url(header_preamble.gif) no-repeat; width: 291px; height: 50px; margin: 0; padding: 0; border-top: 1px solid #ffffff; } #preamble h3 span { display: none; } #preamble p { font-family:Arial, Helvetica, sans-serif; padding: 5px; color: #155970; font-size:12px; text-transform:uppercase; font-weight:bold; width: 270px; } #preamble p.p1 { margin-top: 10px; } #supportingText { padding: 0; margin: -3px 0 40px 0; background: #33ccff; border: 1px solid #ffffff; width: 469px; float: right; } #supportingText p { margin: 9px 17px 17px 24px; color: #155970; } #explanation h3 { background: url(what_is.gif) no-repeat; width: 469px; height: 40px; margin: 0; padding: 0; } #explanation h3 span { display: none; } #participation h3 { background: url(participation.gif) no-repeat; width: 469px; height: 40px; margin: 0; padding: 0; } #participation h3 span { display: none; } #benefits h3 { background: url(benefits.gif) no-repeat; width: 469px; height: 40px; margin: 0; padding: 0; } #benefits h3 span { display: none; } #requirements h3 { background: url(requirements.gif) no-repeat; width: 469px; height: 40px; margin: 0; padding: 0; } #requirements h3 span { display: none; } #footer { background: #155970; border: 1px solid #ffffff; padding: 0 0 2px 24px; font-size: 12px; font-weight:bold; text-align: center; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; } #footer a:link, a:active{ color: #ffffff; } #footer a:hover{ color: #33eeff; text-decoration:underline; } #footer a:visited{ color: #ffffff; text-decoration: line-through; } a.c { font-weight: normal; } #lselect, #larchives, #lresources { width: 278px; clear: left; padding: 0; margin: 0; } #lselect { background: url(select.gif) no-repeat; border: 1px solid #ffffff; margin-top: 20px; padding: 50px 0 0 5px; } #lselect li a:link, a:active{ text-decoration:none; text-transform:uppercase; font-size:12px; color:#FFFFFF; } #lselect li a:hover { text-decoration:underline; color: #e9e9e9; } #lselect a:visited { color: #155970; text-decoration:line-through; text-transform:uppercase; } #larchives { background: url(archives.gif) no-repeat; border: 1px solid #ffffff; margin-top: 20px; padding: 50px 0 0 5px; } #larchives li a:link, a:active{ text-decoration:none; text-transform:uppercase; font-size:12px; color:#FFFFFF; } #larchives li a:hover { text-decoration:underline; color: #e9e9e9; } #larchives a:visited { color: #155970; text-decoration:line-through; text-transform:uppercase; } #lresources { background: url(resources.gif) no-repeat; border: 1px solid #ffffff; margin-top: 20px; padding: 50px 0 0 5px; } #lresources li a:link, a:active{ text-decoration:none; text-transform:uppercase; font-size:12px; color:#FFFFFF; } #lresources li a:hover { text-decoration:underline; color: #e9e9e9; } #lresources a:visited { color: #155970; text-decoration:line-through; text-transform:uppercase; } #lselect h3 span, #larchives h3 span, #lresources h3 span { display: none; } #linklist { position: absolute; top: 48em; } #linkList #linkList2 ul { padding: 20px 10px 10px 10px; display:block; } #linklist li { margin: 2px 0; } /* css Zen Garden submission 138 - 'DJ Style', by Masanori Kawachi, http://www.804case.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Masanori Kawachi */ /* Added: Nov. 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0px; padding: 0px; background: url(images/body_bg.gif) left top repeat-y #fff; } p { font-size: 10px; !important;font-size: 70%; line-height: 133%; font-family: Arial, Helvetica, sans-serif; color: #666; } h1,h2,h3 { margin: 0px; padding: 0px; } a { color: #336633; } acronym { background-color: #FFF7D2; } #extraDiv1 { position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; height: 51px; background: url(images/header_bg.gif) left top repeat-x; } #pageHeader h1 { position: absolute; left: 0px; top: 0px; z-index: 2; width: 237px; height: 176px; margin: 0px; padding: 0px; background: url(images/logo.gif) left top no-repeat; } #pageHeader h1 span,#pageHeader h2 { position: absolute; left: -9999px; } #container { background: url(images/rightside_top.gif) 0px 0px no-repeat; width: 510px; margin: 51px 0px 0px 237px; padding-top: 24px; } #quickSummary { margin-left: 34px; padding-left: 30px; width: 425px !important;width /**/:455px; background: url(images/arrow.gif) left top no-repeat; } #quickSummary p { margin: 0px 0px 5px 0px; padding: 0px; } #preamble { margin: 40px 0px 0px 30px; width: 458px; } #preamble h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_01.gif) left top no-repeat; display: block; overflow: hidden; } #preamble p { margin: 5px 0px 5px 20px; padding: 0px; } #supportingText { margin: 25px 0px 0px 30px; width: 458px; background: url(images/leaf.gif) right top no-repeat; } #explanation { margin-bottom: 20px; } #explanation h3 { width: 458px; height: 0px !important;height /**/:24px; padding: 24px 0px 0px 0px; background: url(images/tit_02.gif) left top no-repeat; display: block; overflow: hidden; } #explanation p { margin: 5px 0px 5px 20px; padding: 0px; } #participation { margin-bottom: 20px; } #participation h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_03.gif) left top no-repeat; display: block; overflow: hidden; } #participation p { margin: 5px 0px 5px 20px; padding: 0px; } #benefits { margin-bottom: 20px; } #benefits h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_04.gif) left top no-repeat; display: block; overflow: hidden; } #benefits p { margin: 5px 0px 5px 20px; padding: 0px; } #requirements { margin-bottom: 20px; } #requirements h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_05.gif) left top no-repeat; display: block; overflow: hidden; } #requirements p { margin: 5px 0px 5px 20px; padding: 0px; } #footer { margin: 0px 0px 20px 20px; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } #linkList { position: absolute; left: 13px; top: 176px; width: 212px; background: url(images/leftside_bg.gif) left top repeat-x; } #lselect { width: 212px; background: url(images/list_bg.gif) left top repeat-y; } #lselect h3 { background: url(images/select_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:35px; padding-top: 35px; display: block; overflow: hidden; } #lselect ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } #lselect li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } #lselect li:hover { background-color: #fff; } #larchives { width: 212px; background: url(images/list_bg.gif) left top repeat-y; display: block; } #larchives h3 { background: url(images/archives_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:26px; padding-top: 26px; display: block; overflow: hidden; } #larchives ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } #larchives li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } #larchives li:hover { background-color: #fff; } #lresources { width: 212px; background: url(images/list_bg.gif) left top repeat-y; display: block; } #lresources h3 { background: url(images/archives_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:26px; padding-top: 26px; display: block; overflow: hidden; } #lresources ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } #lresources li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } #lresources li:hover { background-color: #fff; }/* css Zen Garden submission 139 - 'Neat & Tidy', by Oli Dale, http://www.designerstalk.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Oli Dale */ /* Added: Nov. 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ background-image: url(images/main_bg.jpg); background-position: center; background-position: top; background-repeat: no-repeat; background-color: #000000; margin:0px; padding:0px; color:#ffffff; font-family: Georgia,"Times New Roman", Times, serif; font-size: 11px; text-align: center; } h1{display: none;} h2{display: none;} h3{display: none;} a{color:#B00707;text-decoration: underline;} a:visited{color:#B00707;text-decoration: underline;} a:hover {color:#D6BD15; text-decoration: none;} a:active {color:#D6BD15; text-decoration: none;} acronym { border: none; cursor: help; font-style: italic;} #container{ width:600px; position: relative; text-align: justify; padding:0px; margin: 0 auto; height:1641px; } #preamble{ background-image: url(images/quicksumary_header.gif); background-repeat: no-repeat; position: absolute; top: 165px; left: 5px; padding-top:35px; width:375px; } #preamble h3{ display:none; } #explanation{ background-image: url(images/explanation_header.gif); background-repeat: no-repeat; position: absolute; top: 390px; left: 5px; width:375px; padding-top:35px; } #explanation h3{display: none;} #participation{ background-image: url(images/participation_header.gif); background-repeat: no-repeat; position: absolute; top: 665px; left: 5px; width:375px; padding-top:35px; } #participation h3{display: none;} #benefits{ background-image: url(images/benefits_header.gif); background-repeat: no-repeat; position: absolute; top: 980px; left: 5px; width:375px; padding-top:35px; } #benefits h3{display: none;} #requirements{ background-image: url(images/requirements_header.gif); background-repeat: no-repeat; position: absolute; top: 1115px; left: 5px; width:375px; padding-top:35px; } #requirements h3{display: none;} #footer{ position: absolute; top: 1590px; left: 5px; width:375px; } #intro{ width:375px; } #pageHeader{ background-image: url(images/logo.gif); background-repeat: no-repeat; width:279px; height:170px; } #lselect{ text-align: left; position: absolute; top:950px; right: 0px; width:189px; background-image: url(images/selecter_header.gif); background-repeat: no-repeat; padding-top:35px; } #quickSummary{ width:185px; position: absolute; top: 540px; right: 0px; background-image: url(images/select_header.gif); background-repeat: no-repeat; padding-top:35px; } #larchives{ position: absolute; top: 850px; right: 0px; width:185px; padding-top:10px; background-image: url(images/archives_header.gif); background-repeat: no-repeat; padding-top:35px; } #lresources{ position: absolute; top: 720px; right: 0px; width:185px; padding-top:0px; background-image: url(images/resources_header.gif); background-repeat: no-repeat; padding-top:35px; } li{list-style-type: none;} ul{padding-top:0px; padding-left:0px; padding-right:0px; padding:0px; margin:0px; } /* css Zen Garden submission 139 - 'The Hall', by Michael Simmons, http://www.thoughtanomalies.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Michael Simmons */ /* Added: Nov. 29th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0; background: #444; font-family: arial, verdana, sans-serif; } #container { position: absolute; left: 50%; top: 0; right: auto; bottom: auto; margin-left: -390px; width: 780px; clear: both; background: #F5E783 url(images/linklist_back.jpg) repeat-y 100% 0; border-left: solid 1px #fff; border-right: solid 1px #fff; } #container #intro #pageHeader { width: 780px; height: 311px; background: url(images/pageheader_p1.jpg) no-repeat 0 0; } #container #intro #pageHeader h1 { display: block; margin: 0; padding: 0; height: 311px; text-indent: -2000px; background: url(images/pageheader_p2.jpg) no-repeat bottom; } #container #intro #pageHeader h2 { display: none; } #container #intro, #container #supportingText { width: 469px; } #footer { position: absolute; top: 140px; right: 0; width: 260px; text-align: center; } #footer a { padding: 9px 0 0 0; font-family: "Din-Medium", Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; font-weight: normal; font-size: 10px; color: #fff; } #footer a:hover { background: url(images/littlearrow.gif) no-repeat top center; } #container #linkList { position: absolute; top: 180px; right: 0; width: 260px; background: url(images/linklist_bevel.jpg) no-repeat 0 0; } #container #linkList2 { padding: 18px 35px 0 23px; } #container #linkList h3 { margin: 10px 0 0 10px; padding: 0; width: 180px; height: 19px; text-indent: -2000px; } #container #linkList h3.select { background: url(images/t_selectadesign.jpg) no-repeat; } #container #linkList h3.archives { background: url(images/t_archives.jpg) no-repeat; } #container #linkList h3.resources { background: url(images/t_resources.jpg) no-repeat; } #container #linkList ul { margin: 10px 0 20px 20px; padding: 0; list-style: none; } #container #linkList ul li { margin: 0 0 9px 0; padding: 0 0 0 12px; background: url(images/bluearrow.gif) no-repeat 0 3px; font-size: 10px; color: #fff; } #container #linkList ul li a { text-transform: uppercase; text-decoration: none; font-size: 11px; font-weight: bold; color: #426279; } #container #linkList ul li a:hover { color: #21313C; } #container #linkList #lselect ul li a { display: block; } #container #linkList #lselect ul li a.c { display: inline; text-transform: none; text-decoration: underline; color: #fff; font-weight: normal; font-size: 10px; } #container #linkList #lselect ul li a.c:hover { text-decoration: none; } #container #quickSummary { position: relative; top: -40px; padding: 0; margin: 0 0 0 42px; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif; } #container #quickSummary p { margin: 0 0 10px 0; font-style: italic; font-size: 17px; font-weight: bold; line-height: 18px; color: #D65200; } #container #quickSummary p a { text-decoration: none; color: #9E3E02; border-bottom: dotted 1px #9E3E02; } #container #quickSummary p a:hover { border-bottom: none; } #container #preamble h3 { margin: 0 0 0 42px; padding: 0; text-indent: -2000px; width: 299px; height: 43px; background: url(images/t_theroadtoenlightenment.jpg) no-repeat; } #container #preamble p, #container #supportingText p { margin: 0 0 13px 42px; font-size: 12px; line-height: 18px; color: #444; } #container #supportingText p acronym { border-bottom: dotted 1px #444; cursor: help; } #container #supportingText #explanation h3 { margin: 40px 0 10px 42px; padding: 0; text-indent: -2000px; width: 187px; height: 16px; background: url(images/t_sowhatisthisabout.jpg) no-repeat; } #container #supportingText #participation h3 { margin: 40px 0 6px 42px; padding: 0; text-indent: -2000px; width: 125px; height: 20px; background: url(images/t_participation.jpg) no-repeat; } #container #supportingText #benefits h3 { margin: 40px 0 10px 42px; padding: 0; text-indent: -2000px; width: 125px; height: 16px; background: url(images/t_benefits.jpg) no-repeat; } #container #supportingText #requirements h3 { margin: 40px 0 6px 42px; padding: 0; text-indent: -2000px; width: 125px; height: 20px; background: url(images/t_requirements.jpg) no-repeat; } #container #supportingText #requirements p.p5 { margin: 40px 0 40px 42px; font-size: 11px; font-style: italic; } #container #preamble p a, #container #supportingText p a { text-decoration: none; color: #9E3E02; border-bottom: dotted 1px #9E3E02; } #container #preamble p a:hover, #container #supportingText p a:hover { border-bottom: none; }/* css Zen Garden submission 141 - 'Golden Cut', by Petr Stanciek, http://www.pixy.cz/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Petr Stanciek */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin:0; padding:0; background: #819EFF url("bkgr1.jpg") 7px 0 repeat; color: #333; font: 100%/1.67 "palatino linotype", palatino, serif; } a { color: #819EFF; text-decoration:underline; } a:visited { color: #8A8D99; } a:hover { color: #01228D; } abbr, acronym { color:#B36D00; font-style:italic; cursor:help; } a abbr, a acronym { color:inherit } #container { position:relative; width: 770px; margin: 30px auto 2.5em 7px; padding: 0; background: url("strips.jpg") 474px 0 repeat-y; border-left:1px solid #FFD99E; border-bottom:1px solid #819EFF; } /*FFDAA0*/ /* INTRO */ #intro { width:474px; margin: 0; padding:340px 0 0 0; background: white url("header.jpg") top left no-repeat; } #pageHeader { display:none } #quickSummary .p1 { display:none } #quickSummary .p2 { position:absolute; top: 195px; left: 474px; z-index:10; width:296px; margin:0; font-size:70%; line-height: 1.1; text-align:center; color:white; } #quickSummary .p2 a { white-space: nowrap; color: #FFF5D9; } #quickSummary .p2 a:hover { color: #01228D; } #preamble, #explanation, #participation, #benefits, #requirements { padding: 0 1em 1px 2em; /* 1px bottom padding due to margin-collpasing bug in Opera */ } #intro h3, #supportingText h3 { margin: 1.5em 0 1em 0; padding:0; height: 30px; background: url("ttls.gif") 0 0 no-repeat; } #intro h3 span, #supportingText h3 span { display:none } #preamble h3 { margin-top:0; } #explanation h3 { background-position: 0 -50px; } #participation h3 { background-position: 0 -100px; } #benefits h3 { background-position: 0 -150px; } #requirements h3 { background-position: 0 -200px; } #intro p, #supportingText p { margin: 0.7em 0; font-size:90%; } /* TEXT */ #supportingText { width:475px; margin: 0; padding:1px 0 1em 0; background: white; } #footer { position:absolute; bottom: -1.5em; right: 0; font: 75%/1 sans-serif; white-space:nowrap; } #footer a { padding:0.2em 0.3em; background:#819EFF; color:white; text-decoration:none; font-weight:bold; } #footer a:hover { color:white; background: #01228D; } /* LINKS */ #linkList { position:absolute; top: -20px; left: 474px; width:296px; padding-top:290px; font-size: 85%; line-height: 1.5; background: url("boy.jpg") 0 0 no-repeat; } #linkList h3 { margin: 3em 0 1em 27px; padding:0; height: 20px; background: url("ttls2.gif") 0 0 no-repeat; } #linkList h3 span { display:none } #lselect h3 { margin-top:0; } #larchives h3 { background-position: 0 -50px; } #lresources h3 { background-position: 0 -100px; } #linkList ul { list-style-type:none; margin:0; padding:0; } #linkList li { list-style-type:none; margin:0.5em 0 0.5em 120px; padding:0; } #linkList li a { display:block; margin: 0 0 0 -25px; padding: 0 0 0 25px; font-weight:bold; font-size:100%; color:#666; background: url("bull.gif") left center no-repeat; } #linkList li a.c { display: inline; margin:0; padding:0; background: transparent; font-size:100%; font-weight:normal; font-style:italic; font-variant:small-caps; color:#819EFF; } #linkList li a:hover { color: #01228D; } /* css Zen Garden submission 142 - 'Invasion of the Body Switchers' by Andy Clarke, http://www.stuffandnonsense.co.uk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Andy Clarke */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin : 0; padding : 0; } body { font : 75% "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; background : #000 url(body-bg.jpg) repeat-y top center; color : #fff; font-variant : small-caps; text-align : center; /* That Explorer Malarkey */ } h1, h2, h3, p, ul { padding : 0.5em 0; } /* hx */ div#pageHeader h1 { display : none; } div#pageHeader h2 { display : none; } h3 { padding : 0; text-indent : -3000px; } div#preamble h3 { width : 195px; height : 140px; background : url(preamble-h3.gif) no-repeat left bottom; } div#explanation h3 { float : left; width : 210px; height : 135px; margin-right : 10px; background : url(explanation-h3.gif) no-repeat; } div#participation h3 { float : right; width : 230px; height : 200px; background : url(participation-h3.gif) no-repeat; } div#requirements h3 { float : left; width : 230px; height : 180px; background : url(requirements-h3.gif) no-repeat; } div#lselect h3 { width : 200px; height : 45px; background : url(lselect-h3.gif) no-repeat; } div#lresources h3 { width : 90px; height : 20px; background : url(lresources-h3.gif) no-repeat; } div#larchives h3 { width : 90px; height : 20px; background : url(larchives-h3.gif) no-repeat; } /* p */ p { font-size : 100%; line-height : 110%; } div#quickSummary p.p1 { display : none; } div#quickSummary p.p2 { float : right; width : 400px; padding-right: 10px; text-align : right; } div#preamble p.p1, div#preamble p.p2 { display : none; } div#preamble p.p3 { width : 220px; font-size : 120%; } div#explanation p.p1 { display : none; } div#explanation p.p2 { margin-left : 230px; line-height : 110%; } div#participation p.p1, div#participation p.p2 { display : none; } div#participation p.p3 { margin-right : 240px; } div#requirements p.p1, div#requirements p.p2, div#requirements p.p4 { display : none; } div#requirements p.p3 { margin-left : 240px; } div#requirements p.p5 { clear : both; margin-left : 240px; } abbr, acronym { text-decoration : none; border-bottom : 1px dotted #ccc; cursor : help; } .accesskey { text-decoration: underline; } /* anchors, yo ho me hearties */ a:link, a:visited { color : #fdf4b3; text-decoration : none; } div#lselect a:link, div#lselect a:visited { display : block; font-variant : small-caps; } div#lselect a:link.c, div#lselect a:visited.c { display : inline; font-size : 190%; letter-spacing : -1px; color : #fff; } div#quickSummary p.p2 a { font-size : 160%; } div#footer a:link, div#footer a:visited { padding : 0px 4px; font-size : 90%; background : #666; border : 1px solid #999; color : #ccc; text-decoration : none; } div#footer a:hover { background : #555; color : #ccc; text-decoration : none; } a:hover { color : #fff; text-decoration : underline; } /* ul */ ul { list-style-type : disc; padding : 0.5em 10px; } div#linkList ul { margin-top : 20px; padding-left : 10px; } li { list-style-type : none; line-height : 200%; } div#lselect li { padding-bottom : 10px; font-variant : normal; text-align : right; line-height : 16px; } /* layout */ div#container { position : relative; width : 750px; margin : 0 auto; text-align : left; background : url(container-bg.jpg) no-repeat 0 51px; border-bottom : 5px solid #fdf4b3; } div#pageHeader { width : 750px; height : 50px; background : url(header-bg.jpg) no-repeat; border-bottom : 1px solid #fdf4b3; } div#quickSummary { width : 750px; } #preamble { margin : 0 50px 0 470px; } #explanation { margin : 0 50px 0 380px; } #participation, #benefits, #requirements { margin : 40px 50px 0 280px; } div#preamble { margin-top : 170px; } div#supportingText { margin-top : 140px; } div#explanation, div#participation, div#requirements { margin : 40px 40px 0 250px; } div#benefits { display : none; } div#footer { margin-top : 20px; padding : 20px 0; background : url(footer-bg.gif) no-repeat top center; text-align : center; } div#linkList { position : absolute; top : 70px; left : 0px; width : 200px; } div#larchives { padding : 60px 0 0 20px; } div#lresources { padding : 50px 0 0 20px; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv1, #extraDiv5 { display : none; }/* css Zen Garden submission 143 - 'Pixelisation', by Lim Yuan Qing, http://yuanqing.blogspot.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Lim Yuan Qing */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ---------- misc ---------- */ * { padding: 0; margin: 0; border: 0; } body { background: #eee url(body.gif) no-repeat 50% 100%; color: #666; font: 11px/1.3em Arial, Tahoma, sans-serif; text-align: center; } acronym { cursor: help; } /* ---------- div ---------- */ #container { margin: 30px auto; border: 1px solid #ddd; background: transparent url(container.gif) repeat-y 50% 50%; text-align: left; width: 448px !important; width /**/:450px; } #intro { background: transparent url(intro.gif) no-repeat 0 0; } #container, #intro { position: relative; } #pageHeader { width: 448px; height: 260px; } #preamble, #supportingText { width: 303px; } #supportingText { background: transparent url(supportingText.gif) no-repeat 0 100%; width: 448px; } #explanation { background: transparent url(explanation.gif) no-repeat 0 50%; } #participation { background: transparent url(participation.gif) no-repeat 0 80%; } #benefits { background: transparent url(benefits.gif) no-repeat 0 100%; } #requirements { padding-bottom: 2px; } #footer { text-align: center; font: 10px/33px Tahoma, Arial, sans-serif; width: 100%; height: 35px; } #quickSummary, #linkList { position: absolute; left: 303px; width: 140px; font: 10px/1.3em Arial, Tahoma, sans-serif; } #quickSummary { top: 260px; padding-top: 18px; } #linkList { top: 420px; } #linkList div { text-align: center; } #lselect, #larchives, #lresources { padding: 5px 0 10px; } /* ---------- h3 ---------- */ h3 { margin: 7px 15px 3px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999em; font: 1px/1px sans-serif; /* stop IE from revealing unnecessary bg */ width: 273px; height: 28px; } #preamble h3 { margin-top: 13px; background-image: url(h3_01.gif); } #explanation h3 { background-image: url(h3_02.gif); } #participation h3 { background-image: url(h3_03.gif); } #benefits h3 { background-image: url(h3_04.gif); } #requirements h3 { background-image: url(h3_05.gif); } #linkList h3 { margin: 0 10px; width: 120px; height: 10px; } .select { background-image: url(h3_06.gif); } .archives { background-image: url(h3_07.gif); } .resources { background-image: url(h3_08.gif); } /* ---------- p ---------- */ p { padding: 0 15px 5px; text-align: justify; } #supportingText p { margin-right: 145px; } #quickSummary p { padding: 3px 12px 0; text-align: left; } /* ---------- a ---------- */ a { text-decoration: none; } a:link, a:visited { color: #666; } a:hover, a:active { color: #000; } #supportingText a { font-weight: bold; } #footer a { padding: 0 1px; font-weight: normal; } #quickSummary a:link, #quickSummary a:visited, #footer a:link, #footer a:visited { border-bottom: 1px dotted #888; } #quickSummary a:hover, #quickSummary a:active, #footer a:hover, #footer a:active { border-bottom: 1px dotted #222; } #linkList a:link, #linkList a:visited { text-transform: lowercase; color: #888; } #lselect a:link.c, #lselect a:visited.c { display: inline; color: #666; } #linkList a:hover, #linkList a:active, #lselect a:hover.c, #lselect a:active.c { color: #000; } #lselect a { display: block; text-transform: lowercase; } /* ---------- ul, li ---------- */ ul { margin: 5px 10px 0; border-top: 1px solid #ddd; text-align: left; list-style: none; } li { padding: 3px 0 3px 20px; border-bottom: 1px solid #ddd; background-repeat: no-repeat; background-position: 6px 5px; display: block; list-style: none; } li:hover { background-color: #f3f3f3; } #lselect li { background-image: url(designs.gif); } #larchives li { background-image: url(archives.gif); } #lresources li { background-image: url(resources.gif); } /* ---------- the unused ---------- */ h1, h2, extraDiv1, extraDiv2, extraDiv3, extraDiv4, extraDiv5, extraDiv6 { display: none; }/* css Zen Garden submission 144 - 'Verdure' by Lim Yuan Qing, http://yuanqing.blogspot.com/ */ /* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ /* All associated graphics copyright 2004, Lim Yuan Qing */ /* Photography copyright Lynne Lancaster, http://sxc.hu/browse.phtml?f=profile&l=weirdvis */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */ /* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */ /* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */ /* ---------- misc ---------- */ * { padding: 0; margin: 0; } body { background: #f2f2f2; color: #777; font: 11px/1.4em Arial, Tahoma, Verdana, sans-serif; text-align: center; } acronym { cursor: help; } /* ---------- div ---------- */ #container { padding: 0 2px; width: 500px !important; width /**/: 504px; margin: 0 auto; background: #fff url(container.gif) repeat-y; text-align: left; position: relative; } #quickSummary, #preamble, #supportingText div { padding: 5px 20px; width: 330px !important; width /**/: 370px; } #quickSummary { padding: 15px 20px; background: url(line.gif) no-repeat 50% 100%; } #preamble { padding-top: 15px; } #supportingText #requirements { padding-bottom: 12px; } #supportingText #footer { padding: 12px 20px; background: url(line.gif) no-repeat 50% 0; text-align: center; } #linkList { position: absolute; top: 287px; left: 372px; font-size: 10px; line-height: 1.2em; } /* ---------- h1, h2, h3 ---------- */ h1, h2, h3 { font-weight: normal; font-size: 1.0em; line-height: 1.0em; text-indent: -2000em; display: block; } h1 { width: 500px; height: 80px; background: #fff url(h1.gif) no-repeat 0 100%; } h2 { width: 500px; height: 206px; background: #b6c77b url(h2.jpg) no-repeat; } #preamble h3, #supportingText h3 { width: 231px; height: 27px; background-repeat: no-repeat; } #preamble h3 { background-image: url(h3_01.gif); } #explanation h3 { background-image: url(h3_02.gif); } #participation h3 { background-image: url(h3_03.gif); } #benefits h3 { background-image: url(h3_04.gif); } #requirements h3 { background-image: url(h3_05.gif); } #linkList h3 { width: 130px; height: 34px; background-repeat: no-repeat; background-color: #f2f4d8; } .select {background-image: url(h3_06.gif); } .archives {background-image: url(h3_07.gif); } .resources {background-image: url(h3_08.gif); } /* ---------- p ---------- */ p { padding-top: 5px; } .p1 { padding-top: 2px; } /* ---------- ul, li ---------- */ ul, li { list-style: none; } ul { border-top: 1px solid #ddd; } li { text-transform: lowercase; border-bottom: 1px solid #ddd; } #lselect li { padding: 5px 7px 5px 24px; background: url(bullet1.gif) no-repeat; } #lselect li:hover { background: #e6e9cd url(hover.gif) no-repeat; } #larchives li, #lresources li { background: url(bullet2.gif) no-repeat; padding: 5px 0; } div>#larchives li, div>#lresources li { padding: 0; height: 23px; background: url(bullet2.gif) no-repeat; } /* ---------- a ---------- */ a { text-decoration: none; } #intro a, #supportingText a { font-weight: bold; color: #9ead6c; } #footer a, #linkList a { color: #777; } #lselect a { display: block; color: #9ead6c; } #lselect a.c { display: inline; color: #777; } #larchives a, #lresources a { padding: 0 7px 0 22px; } div>#larchives a, div>#lresources a { padding: 5px 7px 5px 22px; height: 13px !important; height /**/: 23px; display: block; } #footer a:hover, #footer a:active, #linkList a:hover, #linkList a:active, #lselect a.c:hover, #lselect a.c:active { color: #222; } #intro a:hover, #intro a:active, #supportingText a:hover, #supportingText a:active, #lselect a:hover, #lselect a:active { color: #85925C; } div>#larchives a:hover, div>#larchives a:active, div>#lresources a:hover, div>#lresources a:active { background: #e6e9cd url(hover.gif) no-repeat -130px 0; }/* css Zen Garden submission 145 - 'Paravion', by Emiliano Pennisi, http://www.peamarte.it/01/metro.html */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Emiliano Pennisi */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ font-family: "Book Antiqua",Georgia,"MS Sans Serif", Geneva, sans-serif; background: #A3181E url(bg_body.gif) fixed repeat-x; margin: 0; text-align: center; margin: 0; padding: 0; height: 100%; } acronym { color: #A3181E; font-weight: bold; } /*h3 rules*/ div#linkList h3 span{ font-size: 16px; background: #A3181E; border-bottom: 2px solid white; color: White; margin-left: 5px; margin-bottom: 0; padding: 3px; width: 185px; display: block; } #preamble h3 span,#supportingText h3 span{ font-family: "Courier New", Courier, monospace; background: url(h3bg.gif) no-repeat 6px 0; color: #A3181E; font-size: 20px; letter-spacing: -1px; padding-left: 35px; } div#linkList h3{ font-family: "Book Antiqua",Times, Helvetica, sans-serif; font-weight: bold; } /*link*/ #preamble a, #supportingText a,#linkList a{ color: #2B497B; font-weight: bold; } #preamble a:hover,#supportingText a:hover{ background: #2B497B; color: White; text-decoration: none; } /*Style for linkList acronym*/ div#linkList acronym { background: #A3181E; color: White; } /*child selector only for compliant mode*/ body>div#container{ height: auto; min-height: 100%; } /*container*/ div#container{ position: relative; height: 100%; background: url(bg_container.gif); margin-left: auto; margin-right: auto; border-right: 3px solid white; border-left: 3px solid white; border-bottom: 20px solid white; width: 650px; text-align: left; font-size: 0.8em; } #pageHeader { background: url(head.gif) no-repeat; height: 452px; margin: 0 0 30px 0; } #pageHeader h1,#pageHeader h2{ display: none; } /*Hide quicksummary*/ #quickSummary .p2 a{ color: #A3181E; } #quickSummary p.p1 span{ display: none; } #quickSummary p.p2 { font-size: 0.9em; line-height: 12px; position: absolute; top: 275px; left: 235px; padding: 0 0 8px 0; width: 200px; text-transform: uppercase; font-weight: bold; border-top: 1px dashed #000; padding-top: 2px; } #preamble,#supportingText{ position: relative; margin-left: 250px; margin-top: -30px; width: 400px; } /*child selector only for compliant mode*/ div#preamble,div#supportingText{ background: url(st_bg.gif); } div#preamble,#supportingText{ padding: 10px; margin-bottom: 10px; width: 370px; /*Start Tantek Box Model Hack*/ voice-family: "\"}\""; voice-family: inherit; width: 350px; } /*child selector only for compliant mode*/ body > div#preamble,#supportingText{ width: 350px; } /**************************Navigation**********************************/ #linkList{ font-family: Georgia,"MS Sans Serif", Geneva, sans-serif; background: url(linklist_bg.jpg); padding: 10px; width: 220px; position: absolute; top: 450px; margin-left: 15px; /*Start Tantek Box Model Hack*/ voice-family: "\"}\""; voice-family: inherit; width: 200px; } #linkList li { color: #fff; } #linkList ul { list-style: none; margin: 5px; margin-top: -20px; padding: 0px; border-top: 10px solid #CAD2DE; background: #2B497B; } #linkList li { color: #000; border-bottom: 1px dotted #fff; padding: 0.2em 10px; line-height: 15px; } #linkList li:hover { background: #A3181E; } #container > #linkList ul li a:hover{ color: White; } #linkList ul li a:hover{ color: #A3181E; } #linkList li a { font-size: 10px; display: block; color: #fff; font-weight: bold; text-decoration: none; text-transform: uppercase; } #linkList li a:hover { color: #fff; } #linkList li a.c:hover { color: #fff; } #lselect ul li{ color: White; } #lselect ul li a.c{ font-weight: bold; display: inline; color: White; text-transform: none; } /*Start Footer rules*/ #footer { font-family: Georgia,"MS Sans Serif", Geneva, sans-serif; margin: 0 -5px -5px; border-top: 5px solid #FFF; background-color: #A3181E; padding: 10px; text-transform: uppercase; text-align: right; } #footer a{ font-size: 9px; color: #fff; font-weight: bold; padding: 3px; text-decoration: none; border-right: 1px solid white; padding: 0 5px 0 0; } /*End of code*/ /* css Zen Garden submission 146 - 'Urban', by Matt, Kim & Nicole, http://www.learnnewmedia.ca/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Matt, Kim & Nicole */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Originally from Session 3 of the Zen Garden student gallery, http://www.mezzoblue.dev/zengarden/alldesigns/student/ */ /* basic elements */ a:hover, a:active {color: #FFF; background: #ccc;} a:visited {color: #559999; text-decoration:none; font-weight:bolder;} a:hover {color: #ffffff; background: #ccc;} a:link {color: #FACD56; text-decoration:none; font-weight:bolder;} p {font: normal 10px/16px Tahoma, Verdana, Arial, sans-serif; text-align: justify; text-decoration:none;} #quickSummary p.p2 {position:absolute; z-index:3; text-align:center; left: 158px; top: 244px; width: 216px; height: 20px;} h3 {font: normal 10px/16px Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; color: #7D775C;} /* start of body of text */ #preamble {top: 330px; height: 207px;} #supportingText {top: 540px; height: 1100px;} #supportingText, #preamble {text-decoration:none; width:355px;z-index:2; position:absolute; left: 334px;} /* end of body of text */ /* specific divs */ #css-zen-garden{background-color: #FFF;} #container {position: relative; width:765px; margin: 0 auto; text-align: left;} #footer a {text-decoration:none; text-align:right; text-transform:uppercase; color: #559999; font-weight:bolder; font-size:12px;} /* start of navagation */ #linkList {background: transparent url("final.gif") no-repeat top left; z-index:1; position: absolute; height:1650px; top: 244px; right: 0px; left: -10px; width: 778px; font-size:12px;} #linkList2 {font: 10px tahoma, verdana, sans-serif; width: 130px;} #linkList h3.select {width: 97px; height: 16px;} #linkList h3.favorites span {display:none;} #linkList h3.archives {width:57px; height: 14px; text-decoration:none;} #linkList li a:link {color: #FACD56; text-decoration:none; font-weight:bolder;} #linkList li a:visited {color: #000; text-decoration:none;} #linkList li a:hover {color: #ffffff; background: #ccc;} #linkList ul a.c {color: #ccddcb; display: inline; font-weight: normal;} #lselect ul a {line-height: 3.5ex; display: block; font-weight: bold;} #linkList li {color:#ccddcb; list-style-type: none; z-index:3; text-align:center; list-style-type: none;} #lselect {height: 239px; width: 150px; left: 134px; top: 37px;} #larchives {height: 35px; width: 168px; text-align:center; left: 125px; top: 534px;} #lresources {text-align:center; width: 150px; height: 30px; left: 132px; top: 423px;} #lresources, #larchives, #lselect {position:absolute; font-size:10px;} /* end of navagation */ /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 {background-image:url("title.gif"); background-repeat:no-repeat; height:245px;} #linkList h3.select span {display:none;} #linkList h3.archives span {display:none;} #linkList h3.resources span {display:none;} #pageHeader h1 span {display:none;} #pageHeader h2 span {display:none;} #quickSummary p.p1{width: 202px;} #quickSummary p.p2{width: 118px;} #quickSummary p.p2 a:visited {color:#FFFFFF;} #preamble h3 span {display:none;} #explanation h3 span {display:none;} #explanation h3 {background-image:url("what.gif"); background-repeat:no-repeat; height:20px; padding-top:10px;} #participation h3 span {display:none;} #participation h3 {background-image:url("part.gif"); background-repeat:no-repeat; height:27px;} #benefits h3 span {display:none;} #benefits h3 {background-image:url("benefits.gif"); background-repeat:no-repeat; height:27px;} #requirements h3 span {display:none;} #requirements h3 {background-image:url("require.gif"); background-repeat:no-repeat; height:27px;} #quickSummary p.p1 {display:none;} #extraDiv1 {background-image:url("background2.gif"); height:1617px; float:right; width:345px; z-index:0; background-repeat:no-repeat; margin-top:10px;}/* css Zen Garden submission 147 - 'Attitude', by Stephane Moens */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Stephane Moens */ /* Added: Dec. 16th, 2004 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { background: url(bgFull.gif) repeat-x #6F715C; font: normal 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #333; margin: 0px; } h3 { font: italic normal 12pt Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C;} a:link { font-weight: normal; text-decoration: underline; color: #4F8CC3;} a:visited { font-weight: normal; text-decoration: underline; color: #1D3F64;} a:hover, a:active { text-decoration:none ; color: #346293;} acronym {font-weight:bold;} /* specific divs */ #container { position: relative; width: 570px; background: url(bgWoman.gif) no-repeat; margin: 0; padding: 170px 0 0 170px;} #intro { min-width: 470px; } #pageHeader { display: none; } #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left;} #pageHeader h1 span {display:none} #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right;} #pageHeader h2 span { display:none;} #quickSummary { position:absolute; left:530px; top: 730px; width:150px; color: #f4f0e6;} #quickSummary p.p1 {display:none;} #quickSummary p.p2 {} #quickSummary a{ color: #98B974; text-decoration:underline;} #quickSummary a:hover{ color: #f4f0e6; text-decoration:none;} #preamble { clear: right; padding: 10px 10px 0 65px; width:260px;} #preamble h3 { display:block; width:100%; height:23px; background: url(title0.gif) no-repeat;} #preamble h3 span {display:none;} #preamble p {margin:5px 0 0 0; padding:0; color: #6F715C; font-style:italic;} #supportingText { clear: right; padding: 20px 10px 0 0; margin:0; width:490px; background:url(dotedLine.gif) 10px 10px no-repeat;} #explanation {margin:0; padding: 0 0 0 65px; width:260px;} #explanation h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #explanation h3 span {display:none;} #explanation p {margin:5px 0 0 0; padding:0; color: #53553F;} #participation {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} #participation h3 { display:block; width:100%; height:23px; background: url(title2.gif) no-repeat; margin:0;} #participation h3 span {display:none;} #participation p {margin:5px 0 0 0; padding:0; color: #53553F;} #benefits {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} #benefits h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #benefits h3 span {display:none;} #benefits p {margin:5px 0 0 0; padding:0; color: #53553F;} #requirements {margin:10px 0 0 0; padding: 0 200px 0 65px; width:266px; background: url(bgBottom0.gif) right bottom no-repeat;} #requirements h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #requirements h3 span {display:none;} #requirements p {margin:5px 0 0 0; padding:0; color: #53553F;} #footer { padding: 20px 0 30px 45px; width:510px; background: url(bgBottom1.gif) 0px 0px no-repeat;} #footer a:link, #footer a:visited { color:#fff; margin: 0 0 0 15px; } #footer a:hover { color:#3F753E;} #linkList { position: absolute; top: 170px; right: 0px; color:#4C4E39;} #linkList2 { font: 10px Tahoma, Verdana, Arial, sans-serif; width: 220px;} #linkList h3.select { background:url(subTitle0.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.select span {display:none;} #linkList h3.archives { background: transparent url(subTitle1.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.archives span {display:none;} #linkList h3.resources { background: transparent url(subTitle2.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.resources span {display:none;} #linkList p, #linkList li{ font: x-small/1.6em tahoma, verdana, sans-serif; text-indent: 0;} #linkList ul { list-style: none; margin: 0; padding: 0; } #linkList li { color: #fff; padding: 2px 0 0 17px; } #linkList li a { display: block; border: none; color: #98B974; text-decoration:none; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 2px;} #linkList li a:hover { color: #f4f0e6; background-position: 0 -48px; text-decoration:underline; } #linkList li a.c { display: inline; padding: 0; margin: 0; background: none; color: #4C4E39; font-weight: normal; } #linkList li a.c:hover { color: #f4f0e6; } #linkList #larchives li,#linkList #lresources li,#linkList #lfavorites li { padding: 2px 0 0 5px; } #linkList #larchives li a,#linkList #lresources li a,#linkList #lfavorites li a { background: transparent url(arrow.gif) no-repeat 0 2px; display: inline; padding-left: 17px; margin: 0;} #linkList #larchives li a:hover,#linkList #lresources li a:hover,#linkList #lfavorites li a:hover { background-position: 0 -48px; } #extraDiv1 { background: transparent url(cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; }/* css Zen Garden submission 148 - 'Museum', by Samuel Marin, http://www.info.fundp.ac.be/~sma/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Samuel Marin */ /* Added: Jan. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Tested and 100% compatible with: ================================ Windows browsers: Internet Explorer 5.5/6, Netscape 6/7.1/7.2, Mozilla 1.7.3, Firefox 1.0 Previous Release/1.0, Opera 7.54 Mac browsers (Mac OS X): Internet Explorer 5.2.3, Safari 1.2.3, Firefox 1.0 Unix browsers: Mozilla 1.4.1/1.7b/1.7.3 (Linux), Firefox 0.9.3 (Linux), Galeon 1.3.10 (Linux), Opera 7.54 Final (Linux), Epiphany 1.4.4 (Linux), Mozilla 1.4 (Solaris) (Very) minor issues with: ========================= Internet Explorer 5 (Windows) Konqueror 3.1.4-6 (Linux) Graphics: ========= The graphics are my own illustrations using Adobe Photoshop and Illustrator (some inspirations from google search images). Photos: ======= The photos are from "http://www.sxc.hu/": The tree and the enlighted path by Christopher Bruno (vxdigital) -> http://www.cbruno.com/ The water lily by King Ayo (kingayo) -> http://www.kingayo.com (kingayo@wanadoo.fr) The Butterfly by Dirk De Kegel (Magos) -> Dirk.De.Kegel@pandora.be The flower by Troy Nulus (nulus) -> nulus@mail.com The ladybug by Michal Zajac (babinicz) -> miczajac@poczta.onet.pl The fledglings by Rob Waterhouse (Rob_W) -> robw349@hotmail.com Font: ===== One of the font of the header and the titles of the linklist come from "http://www.dafont.com" and is free: MK British Writing by Manfred Klein -> cybapee@joice.net References: =========== For information, here is the main references I used: * CSS The Definitive Guide (Eric Meyer) * More Eric Meyer on CSS (Eric Meyer) * And a lot of CSS from the Zen Garden website Thanks: ======= Thanks to Charlotte Dereppe for her invaluable advices. */ /* ============== basic elements ============== */ body { background: #444444; padding: 0px; margin: 0px; font: 13px Georgia, Serif; color: #7f7f7f; text-align: center; } p { padding: 0px; margin: 0px; } a:link, a:visited { text-decoration: underline; color: #706F6A; } a:hover, a:active { text-decoration: none; color: #555555; } /* ============= specific divs ============= */ /* --- container --- */ #container { background: #5d5d5d; position: relative; padding: 0px; margin: 0px auto; width: 760px; text-align: left; border-left: 1px solid #fff; border-right: 1px solid #fff; } /* --- intro --- */ #intro { background: url(images/intro_bg.jpg) repeat-y left; padding: 0px; margin: 0px; width: 760px; } /* --- pageHeader --- */ #pageHeader { background: url(images/header_bg.jpg) no-repeat; padding: 0px; margin: 0px; width: 760px; height: 400px; } #pageHeader h1, #pageHeader h2 { display: none; } /* --- quickSummary --- */ #quickSummary p.p1 { display: none; } #quickSummary p.p2 { font-size: 11px; color: #ccc; position: absolute; top: 0px; left: 2px; } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited { text-decoration: underline; color: #ccc; } #quickSummary p.p2 a:hover, #quickSummary p.p2 a:active { text-decoration: none; color: #ccc; } /* --- preamble --- */ #preamble h3 { background: url(images/preamble.jpg) no-repeat; padding: 0px; margin: 0px; width: 560px; height: 147px; } #preamble h3 span { display: none; } #preamble { background: url(images/preamble_bg.jpg) no-repeat top; padding: 0px; width: 560px; } #preamble p { text-indent: 2em; } #preamble p:first-letter { font-size: 180%; font-weight: bold; color: #444444; } #preamble p.p1 { padding: 10px 85px 10px 86px; margin: -100px 0px 0px 0px; } #preamble p.p2 { padding: 0px 85px 20px 86px; margin: 0px; } #preamble p.p3 { background: url(images/preamble_img.jpg) no-repeat bottom; padding: 0px 85px 60px 280px; margin: 0px; } /* --- supporting text --- */ #supportingText { background: url(images/st_bg.jpg) repeat-y; position: relative; padding: 0px; width: 560px; } /* --- explanation --- */ #explanation h3 { background: url(images/trans_prea_expl.jpg) no-repeat; padding: 0px; margin: 0px; width: 560px; height: 153px; } #explanation h3 span { display: none; } #explanation { background: url(images/explanation_bg.jpg) no-repeat top; padding: 0px; margin: 0px; width: 560px; } #explanation p { text-indent: 2em; } #explanation p:first-letter { font-size: 180%; font-weight: bold; color: #444444; } #explanation p.p1 { padding: 10px 115px 10px 106px; margin: 0px; } #explanation p.p2 { background: url(images/explanation_img.jpg) no-repeat bottom; padding: 0px 115px 50px 106px; margin: 0px; } /* --- participation --- */ #participation h3 { background:url(images/trans_expl_part.jpg) no-repeat; padding: 0px; margin: 0px; height: 155px; } #participation h3 span { display: none; } #participation { background: url(images/participation_bg.jpg) repeat-y; padding: 0px; margin: 0px; width: 560px; } #participation p { text-indent: 2em; } #participation p:first-letter { font-size: 180%; font-weight: bold; color: #444444; } #participation p.p1 { padding: 10px 115px 10px 106px; margin: 0px; } #participation p.p2 { padding: 0px 115px 10px 106px; margin: 0px; } #participation p.p3 { background: url(images/participation_img.jpg) no-repeat bottom; padding: 0px 160px 20px 161px; } /* --- benefits --- */ #benefits h3 { background: url(images/trans_part_bene.jpg) no-repeat; padding: 0px; margin: 0px; height: 147px; } #benefits h3 span { display: none; } #benefits { background: url(images/benefits_bg.jpg) repeat-y; padding: 0px; margin: 0px; width: 560px; } #benefits p { text-indent: 2em; } #benefits p:first-letter { font-size: 180%; font-weight: bold; color: #444444; } #benefits p.p1 { padding: 10px 145px 0px 146px; margin: 0px; } /* --- requirements --- */ #requirements h3 { background: url(images/trans_bene_requ.jpg) no-repeat; padding: 0px; margin: 0px; height: 230px; } #requirements h3 span { display: none; } #requirements { background: url(images/requirements.jpg) no-repeat bottom; padding: 0px 0px 105px; margin: 0px; width: 560px; } #requirements p { padding: 0px 105px 10px 106px; margin: 0px; text-indent: 2em; } #requirements p:first-letter { font-size: 180%; font-weight: bold; color: #444444; } #requirements p.p1 { background: url(images/requirements_img.jpg) no-repeat top; padding: 100px 105px 10px 106px; margin: 0px; } /* --- footer --- */ #footer { background: url(images/footer_bg.jpg) repeat-y; font: 11px Georgia, Serif; padding-top: 2px; padding-left: 3px; margin: 0px; width: 560px; height: 35px; } #footer a { font-weight: bold; padding: 0px; } /* --- linkList --- */ #linkList { position: absolute; top: 400px; left: 570px; padding: 0px; margin: 0px; width: 190px; } #linkList h3 span { display: none; } #linkList #lselect h3 { background: url(images/header_lselect.jpg) no-repeat; padding: 0px 5px 0px 5px; margin: 0px; height: 70px; } #linkList #larchives h3 { background: url(images/header_larchives.jpg) no-repeat; padding: 0px 5px 0px 5px; margin: 0px; height: 70px; } #linkList #lresources h3 { background: url(images/header_lresources.jpg) no-repeat; padding: 0px 5px 0px 5px; margin: 0px; height: 70px; } #linkList ul { background: url(images/linklist_bg.jpg) repeat-y; padding: 0px 25px; margin: 0px; } #linkList li { display: block; list-style-type: none; font: 10px Georgia, Serif; line-height: 14px; font-weight: normal; color: #D4D2D2; text-align: left; padding: 3px 2px 10px 2px; margin: 0px; border-bottom: 1px dotted #ccc; } #linkList li a:link, #linkList li a:visited, #linkList li a:visited:hover, #linkList li a:hover, #linkList li a:active { font-style: normal; padding-right: 5px; } .c { font-weight: normal ! important; color: #D4D2D2 ! important; padding: 0px 14px 0px 0px; margin: 0px; } #linkList li a { display: block; font-weight: bold; color: #fff; } #linkList li a.c { display: inline; padding: 0px; margin: 0px; } #larchives, #lselect { background: #fff url(images/linklist_footer.jpg) no-repeat bottom; padding: 0px 0px 127px 0px; margin: 0px 0px 10px 0px; width: 190px; } #lresources { background: #fff url(images/linklist_footer_guard.jpg) no-repeat bottom; padding: 0px 0px 127px 0px; margin: 0px 0px 10px 0px; width: 190px; } /* css Zen Garden submission 149 - 'Uncultivated', by Mario Carboni, http://www.mariocarboni.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Mario Carboni */ /* Added: Jan. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* general _______________________________________________________________________________*/ * { padding: 0; margin: 0; } body { font: 11px/1.3em Arial,Helvetica,sans-serif; text-align: center; background: #bebcad; } p { text-align: justify; padding: 5px 30px 15px 30px; color: #786A47; line-height: 1.5em; } a{ text-decoration: none; background: transparent url(dotlink.gif) repeat-x left bottom; } a:link ,a:visited { color: #5785A4; } a:hover { color: #1D8FDB; } acronym { background: transparent url(dot.gif) repeat-x left bottom; cursor: help; } h3 { font: normal 10px/12px Arial,Helvetica,sans-serif; text-transform: uppercase; margin: 20px 0 0 30px; color: #574D33; } ul { list-style: none; margin: 10px 20px 30px 10px; } li { padding-left: 1px; margin: 10px 0 0 8px; display: block; list-style: none; background: transparent url(dot.gif) repeat-x 0 100%; } /* grid _______________________________________________________________________________*/ #container { margin: 0 auto; text-align: left; width: 580px; background: url(container.gif) repeat-y center top; position: relative; } #quickSummary { background: transparent url(quicksummary.gif) no-repeat top left; height: 178px; } #preamble,#supportingText { padding-right: 200px; } #supportingText { background: transparent url(foot2.jpg) no-repeat 0 100%; } #lresources { padding-bottom: 220px; background: transparent url(flowers.jpg) no-repeat 0 100%; } #footer { height: 34px; line-height: 34px; text-align: center; padding-bottom: 14px; } #linkList { position: absolute; top: 210px; right: 0; width: 210px; } #extraDiv1 { position: absolute; top: 0; left: 0; background: transparent url(uncultivated.gif) no-repeat; width: 43px; height: 297px; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* headers _______________________________________________________________________________*/ #pageHeader h1 { background: transparent url(csszen.jpg) no-repeat top left; width: 580px; height: 40px; } #pageHeader h1 span { display: none } #pageHeader h2 { background: transparent url(beauty.jpg) no-repeat top left; width: 580px; height: 169px; } #pageHeader h2 span { display: none; } #linkList h3.select { background: transparent url(styles.jpg) no-repeat top left; height: 39px; margin: 0; } #linkList h3.select span { display: none; } #linkList h3.archives { background: transparent url(archives.jpg) no-repeat top left; height: 39px; margin: 0; } #linkList h3.archives span { display: none; } #linkList h3.resources { background: transparent url(resources.jpg) no-repeat top left; height: 39px; margin: 0; } #linkList h3.resources span { display: none; } /* p _______________________________________________________________________________*/ #quickSummary .p1 { display: none; } #quickSummary .p2 { margin-right: 200px; color: #382A07; text-align: right; padding-top: 150px; } #preamble p, #supportingText p{ margin: 0 10px; background: url(p.gif); } #requirements .p4{ margin-bottom: 40px; } #requirements .p5{ margin-bottom: 110px; text-align: center; } /* links _______________________________________________________________________________*/ #footer a{ text-decoration: underline; } #footer a:link, #footer a:visited { color: #c6c6c6; } #footer a:hover { color: #fff; } #linkList li a { display: block; font-weight: bold; color: #E5D9BC; text-decoration:none; margin-left: -5px; padding-left: 19px; padding-bottom: 4px; background: url(dot2.gif) no-repeat 0 1px; } #linkList li a:hover { color: #7ECDFF; background: transparent url(dot2on.gif) no-repeat 0 1px; } #linkList li a.c { display: inline; padding: 0; margin: 0; background: none; color: #595339; font-weight: normal; } #linkList li a.c:hover { color: #7ECDFF; } #linkList #larchives li,#linkList #lresources li,#linkList #lfavorites li { padding: 2px 0 0 7px; } #linkList #larchives li a,#linkList #lresources li a,#linkList #lfavorites li a { background: transparent url(dot2.gif) no-repeat 0 1px; display: block; padding-left: 19px; padding-bottom: 5px; margin: 0 0 0 -11px; } #linkList #larchives li a:hover,#linkList #lresources li a:hover,#linkList #lfavorites li a:hover { background: transparent url(dot2on.gif) no-repeat 0 1px; }/* css Zen Garden submission 150 - 'By The Pier', by Peter Ong, http://peter.rock.per.sg/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Peter Ong */ /* Added: Jan. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { color: #fc3; font-size: 11px; font-family: Arial, Helvetica, sans-serif; line-height: 17px; background-color: #000; text-align: center; margin: 0; padding: 0; } a:link { color: #cf6; font-weight: bold; text-decoration: none; } a:visited { color: #007f00; font-weight: bold; text-decoration: none; } a:hover, a:active { color: #f60; text-decoration: none; border-bottom: 1px dotted #005e00; } /* specific divs */ #container { background-color: #0c3379; text-align: left; margin: 8px auto; padding: 0; width: 640px; } acronym { color: #ffff67; font-style: italic; font-weight: bold; text-decoration: none; border-width: 0; } #intro { background-image: url("media/masthead.jpg"); background-repeat: no-repeat; background-position: center top; margin: 0; padding: 0; width: 640px; height: 445px; } #pageHeader { display: none; margin: 0; padding: 0; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 span, #pageHeader h2 span { display: none; } #quickSummary { width: 300px; margin: 0 0 0; padding: 154px 0 0; position: absolute; } #quickSummary .p1 span { display: none; margin: 0; padding: 0; } #quickSummary .p2 span { color: #699fc8; font-size: 10px; text-align: left; margin: 0 0px; padding: 0; position: absolute; top: 150px; float: left; } #preamble { margin: 0; padding: 233px 0 10px 0; width: 375px; float: right; } #supportingText { clear: right; } #explanation, #participation, #benefits, #requirements { background-color: #0c3379; padding-bottom: 10px; width: 375px; float: right; clear: both; } #preamble h3 { background-image: url("media/enlightenment.gif"); background-repeat: no-repeat; background-position: right 0; margin: 199px 0 8px; padding: 0; width: 375px; height: 35px; float: right; } #participation h3 { background-image: url("media/participation.gif"); background-repeat: no-repeat; background-position: right 0; margin: 8px 0; padding: 0; width: 375px; height: 35px; float: right; } #requirements h3 { background-image: url("media/requirements.gif"); background-repeat: no-repeat; background-position: right 0; margin: 8px 0; padding: 0; width: 375px; height: 35px; float: right; } #benefits h3 { background-image: url("media/benefits.gif"); background-repeat: no-repeat; background-position: right 0; margin: 8px 0; padding: 0; width: 375px; height: 35px; float: right; } #explanation h3 { background-image: url("media/whatabout.gif"); background-repeat: no-repeat; background-position: right 0; margin: 8px 0; padding: 0; width: 375px; height: 35px; float: right; } .p1, .p2, .p3, .p4, .p5 { text-align: left; margin: 0; padding: 0 0 8px 15px; width: 320px; float: left; } #preamble h3 span, #participation h3 span, #explanation h3 span, #benefits h3 span, #requirements h3 span { display: none; margin: 0; padding: 0; } #footer { background-image: url("media/base.jpg"); background-repeat: no-repeat; background-position: center bottom; text-align: center; margin-right: auto; margin-left: auto; padding-top: 100px; padding-bottom: 20px; width: 640px; clear: both; } #footer a:link, #footer a:visited { font-weight: bold; margin-top: 0; padding-bottom: 50px; } #linkList { background-color: #0c3379; position: absolute; top: 440px; width: 210px; } #lselect { margin: 0; padding: 0 0 0 0; } #lselect h3 { margin: 0 0 0 40px; padding: 0; } #linkList ul li { font-size: 10px; list-style-type: none; margin: 0; padding: 0 0 5px; } #linkList ul { text-align: right; list-style-type: none; margin-top: 0; margin-right: 0; margin-bottom: 18px; padding: 0; } #linkList h3.select { background-image: url("media/select.gif"); background-repeat: no-repeat; margin: 0 0 0 0; padding: 0 0 8px; width: 210px; height: 35px; } #linkList h3.select span { display: none; } #linkList h3.favorites { background-image: url("media/favourites.gif"); background-repeat: no-repeat; margin: 0 0 0 0; padding: 0 0 8px; width: 210px; height: 35px; } #linkList h3.favorites span { display: none; } #linkList h3.archives { background-image: url("media/archives.gif"); background-repeat: no-repeat; margin: 0 0 0 0; padding: 0 0 8px; width: 210px; height: 35px; } #linkList h3.archives span { display: none; } #linkList h3.resources { background-image: url("media/resources.gif"); background-repeat: no-repeat; margin: 0 0 0 0; padding: 0 0 8px; width: 210px; height: 35px; } #linkList h3.resources span { display: none; } #linkList #lselect li a:link { font-size: 10px; color: #cf6; text-decoration: none; text-transform: uppercase; display: block; padding: 2px 4px; } #linkList #lselect li a:hover { font-size: 10px; color: #f60; text-decoration: none; display: block; padding: 2px 4px; border-width: 0; } #linkList #lselectli a:visited { font-size: 10px; color: #5bbb11; text-decoration: none; display: block; padding: 2px 4px; } #linkList #lselect ul li a.c { font-size: 10px; color: #fff; font-style: italic; text-decoration: none; text-transform: none; display: inline; padding: 2px 4px; } #linkList li a:link { color: #cf6; text-decoration: none; text-transform: uppercase; padding: 2px 4px; } #linkList li a:hover { color: #f60; text-decoration: none; text-transform: uppercase; padding: 2px 4px; border-width: 0; } #linkList li a:visited { color: #5bbb11; text-decoration: none; text-transform: uppercase; padding: 2px 4px; } /* css Zen Garden submission 151 - 'Contempo Finery', by Ro London, http://www.intersmash.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Ro London */ /* Added: Jan. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ *{ margin:0; padding:0; background-repeat:no-repeat; } body{ font-family:arial,helvetica,sans-serif; color:#888; background-color:white; font-size:small; margin-top:100px; text-align:center; background-image:url(z-background2.gif); background-repeat:repeat-y; background-position:center top; } div, p, h2, h1{ text-align:left; width:247px; } h3{ width:200px; padding:0px; color:white; font-size:1px; height:60px; text-indent:-1000px; } acronym{ cursor: help; } #container{ width:500px; margin-left:auto; margin-right:auto; } p{ line-height:150%; } p span{ display:block; padding:0 22px 22px 22px; } #intro{ float:left; } #supportingText{ float:left; width:250px; } #pageHeader{ height:240px; background-image:url(z-header2.gif); background-position:0 0; } #pageHeader *{ display:none; } #quickSummary{ height:470px; background-image:url(z-d.gif); } #quickSummary * { display:none; } #preamble{ margin-top:800px; background-image:url(z-e.gif); background-position:0 0; } #preamble p span{ color:#966; text-align:center; } #preamble .p3{ padding-bottom:30px; } #preamble h3{ padding:20px; height:115px; } #explanation h3{ background-image:url(z-h1.gif); background-position:7px 12px; margin-left:4px; } #participation, #explanation, #benefits, #requirements{ background-image:url(zbg.gif); } #participation h3{ background-image:url(z-h2.gif); background-position:7px 12px; margin-left:4px; } #benefits h3{ background-image:url(z-h3.gif); background-position:7px 12px; margin-left:4px; } p{ background-image:url(zbg.gif); background-position:0 -50px; } #requirements .p5{ background-image:none; } #requirements .p5{ padding-top:50px; background-image:url(z-leaf3.gif); background-position:right center; margin-top:0px; margin-bottom:100px; font-size:x-small; color:#ccc; text-align:center; background-color:#fff; height:250px; } #requirements .p5 span{ margin-right:30px; } #requirements .p5 a{ color:#aaa; text-decoration:none; font-style:italic; } #requirements h3{ background-image:url(z-h4.gif); background-position:7px 12px; margin-left:4px; } #requirements .p4, #benefits .p1, #participation .p3, #explanation .p2, #preamble .p3 { background-image:url(zbg.gif); background-position:center bottom; } #linkList{ clear:both; position:absolute; top:811px; left:50%; z-index:5; margin-left:-258px; * margin-left:-250px; width:247px; background-image:url(zbg.gif); background-position:0 -401px; height:799px; overflow:hidden; padding-bottom:0px; *padding-bottom:0; } head+body #linkList{ margin-left:-250px; padding-bottom:0; } #linkList h3{ height:60px; width:247px; background-position:0 0; } .select{ background-image:url(z-s3.gif); } .archives{ background-image:url(z-s4.gif); margin-top:30px; } .resources{ background-image:url(z-s5.gif); margin-top:30px; } #lselect{ background-image:url(zbg.gif); } li, ul{ list-style-type:none; } a{ color:#366; } a:hover{ background-color:#eee; } li{ display:block; width:247px; min-height:20px; * height:20px; margin-bottom:9px; * margin-bottom:0; background-image:url(zbg.gif); background-position:0 -40px; } li a{ margin-left:2px; border-right:2px solid #fff; border-left:2px solid #fff; display:block; width:239px; height:100%; font-size:x-small; text-transform:uppercase; text-decoration:none; color:#699; text-align:center; padding: 2px 0 2px 0; } li a:hover{ background-color:#f3f3f3; border-right:2px solid #f3f3f3; border-left:2px solid #f3f3f3; } li .c{ display:none; } #footer{ position:absolute; top:0px; left:50%; overflow:hidden; height:24px; width:240px; background-color:#ededed; text-align:center; background-image:url(z-cr.gif); background-position:bottom right; line-height:15px; } #footer a{ color:#999; text-decoration:none; font-size:x-small; text-transform:uppercase; } #footer a:hover{ color:#333; } #extraDiv2{ width:35px; height:24px; position:absolute; left:50%; margin-left:-24px; top:0px; background-image:url(z-cl.gif); background-position:bottom left; } #extraDiv1{ width:102px; height:235px; position:absolute; left:50%; margin-left:-351px; top:520px; background-image:url(z-leaf2.gif); } #lselect li{ text-align:center; * text-align:left; font-size:1px; color:white; } a:visited{ color:#7E84A1; }/* css Zen Garden submission 152 - 'Subway Dream', by Pablo Caro, http://www.nuevostudio.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Pablo Caro */ /* Added: Jan. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body#css-zen-garden { background: url(images/trama.gif); margin: 0; padding: 0; font-size: 70%; font-family: 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif; color: #B198C5; } p { line-height: 170%; text-indent: 30px; } a { color: #BA76FF; text-decoration: none; } a:hover { color: #F286FF; } acronym { font-style: normal; color: #CCAFE3; cursor: help; } /*POSITIONING======================================*/ #container { position: relative; background: #2E0154 url(images/background.gif) no-repeat top center; border-left: 5px solid #CD9FF3; border-right: 5px solid #CD9FF3; margin: 0 auto; width: 720px; } #intro { width: 100%; background: transparent url(images/girl.gif) no-repeat; } #pageHeader { width: 720px; height: 55px; } #quickSummary { margin-top: 237px; margin-left: 270px; width: 425px; height: 166px; background: transparent url(images/quicksum.gif) no-repeat; } #preamble { margin-left: 75px; margin-right: 280px; background: transparent url(images/back_flowers.gif) no-repeat 0 0; } #supportingText { margin-left: 75px; margin-right: 275px; } #explanation { background: transparent url(images/back_flowers.gif) no-repeat 100% 100%; } #participation { background: transparent url(images/back_flowers.gif) no-repeat 100% 0%; } #benefits { background: transparent url(images/back_flowers.gif) no-repeat 0% 0%; } #requirements { background: transparent url(images/back_flowers.gif) no-repeat 100% 0%; } #linkList { position: absolute; top: 515px; left: 480px; width: 225px; background: transparent url(images/back_list.gif) repeat-y; } #footer { padding: 25px 0; text-align: center; text-transform: uppercase; background: transparent url(images/footer.gif) no-repeat 50% 50%; } /*HEADERS======================================*/ #pageHeader h1, #pageHeader h2 { display: none; } #preamble h3 { position: relative; left: -20px; display: block; height: 57px; background: transparent url(images/title_the_road.gif) no-repeat; text-indent: -1500px; } #supportingText h3 { position: relative; left: -20px; display: block; height: 58px; text-indent: -1500px; } #explanation h3 {background: transparent url(images/title_so_what.gif) no-repeat;} #participation h3 {background: transparent url(images/title_participation.gif) no-repeat;} #benefits h3 {background: transparent url(images/title_benfits.gif) no-repeat;} #requirements h3 {background: transparent url(images/title_requirements.gif) no-repeat;} #linkList2 h3 { display: block; height: 35px; margin: 0px 30px; text-indent: -1500px;} #lselect h3 {background: transparent url(images/title_select.gif) no-repeat;} #larchives h3 {background: transparent url(images/title_archives.gif) no-repeat;} #lresources h3 {background: transparent url(images/title_resources.gif) no-repeat;} /*LISTS======================================*/ #linkList ul { margin: 0 10px 0 35px; padding-left: 0; padding-bottom: 10px; list-style-type: none; font-family: 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif; font-size: 10px; } #lselect ul li { padding-left: 20px; } #lselect ul li a { margin-left: -25px; padding-left: 25px; background: transparent url(images/bullet_flower.gif) no-repeat 0 50%; line-height: 25px; text-decoration: none; display: block; clear: both; text-transform: uppercase; } #lselect ul li a:hover { color: #F286FF; background-image: url(images/bullet_flower_on.gif); } #lselect ul li a.c { margin-left: 0; padding-left: 0px; padding-right: 12px; background-image: none; display: inline; clear: none; text-transform: none; color: #B198C5; } #lselect ul li a.c:hover { color: #F286FF; background: transparent url(images/bullet_stah.gif) no-repeat 100% 50%; } #lselect ul li a.c:hover { color: #F286FF; } #larchives ul li a, #lresources ul li a { display:block; padding-left: 25px; background: transparent url(images/bullet_oval.gif) no-repeat 0 50%; line-height: 25px; text-decoration: none; } #larchives ul li a:hover, #lresources ul li a:hover { background-image: url(images/bullet_oval_on.gif); } /*VARIOUS======================================*/ #quickSummary p.p1 { display: none; } #quickSummary p.p2 { text-indent: 4px; padding-top: 140px; text-transform: uppercase; } /* css Zen Garden submission 153 - 'Moss', by Mani Sheriar, http://www.manisheriar.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Mani Sheriar */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* CSS Document */ * { padding:0; margin:0; border:0; } * html #content { margin-bottom:-600px; } /*IE */ body { background:#2B411B url(bg2.gif) repeat; padding-bottom:600px; } abbr, acronym { font-style:italic; cursor:help; } a { color:#A7D277; text-decoration:underline; } a:hover { color:#28411C; background-color:#8DBB5A; text-decoration:none; } #container { position:relative; width:818px; padding:125px 0 0 18px; background:url(bg.jpg) repeat-y; margin:0 0 -1200px 0; } #intro, #supportingText { position:relative; width:500px; backgroun-color:#2B411B } #pageHeader { position:absolute; top:-125px; left:-18px; width:813px; height:201px; background:url(logo.jpg) no-repeat; z-index:1; } h1 span, h2 span, #preamble h3 span, #supportingText #explanation h3 span, #supportingText #participation h3 span, #supportingText #benefits h3 span, #supportingText #requirements h3 span, #pageheader span, h3.select span, h3.archives span, h3.resources span { visibility:hidden; } h1 span, h2 span { position:absolute; } #quickSummary { margin:0 0 50px 0; } #quickSummary p.p1 { position:relative; font:normal 15px/17px Georgia, "Times New Roman", Times, serif; color:#C9E2AB; z-index:2; } #quickSummary p.p2 { position:absolute; top:-100px; left:568px; width: 141px; font:normal 13px/16px Georgia, "Times New Roman", Times, serif; color:#C9E1AA; z-index:3; } #quickSummary p.p2 a:hover { color:#69913E; background-color:#C9E1AA; text-decoration:none; } #preamble p, #supportingText p { font:normal 13px/16px Verdana, Arial, Helvetica, sans-serif; color:#A3C979; margin:12px 0; } #preamble h3 { width:227px; height:36px; background:url(enlightenment.gif) no-repeat; margin:30px 0 -10px -2px; } #explanation h3 { width:233px; height:36px; background:url(about.gif) no-repeat; margin:30px 0 -10px -2px; } #preamble p.p3 { margin:12px 0 0 0; } #participation h3 { width:114px; height:36px; background:url(participation.gif) no-repeat; margin-top:30px; margin-bottom:-10px; } #benefits h3 { width:114px; height:36px; background:url(benefits.gif) no-repeat; margin-top:30px; margin-bottom:-10px; } #requirements h3 { width:150px; height:36px; background:url(requirements.gif) no-repeat; margin-top:30px; margin-bottom:-10px; } #linkList { position:absolute; width:174px; top: 100px; left: 572px; font:normal 10px/12px Verdana, Arial, Helvetica, sans-serif; color:#69913E; z-index:4; } #linkList #lselect li { margin-bottom:8px; } #linkList a { font:bold 12px/12px Georgia, "Times New Roman", Times, serif; color:#E7F9D3; display:block; background-color:#B1D48A; text-decoration:none; margin:0 0 1px 0; } #linkList a:hover { color:#436023; } #linkList #lselect a.c, #linkList #larchives a, #linkList #lresources a { font:normal 10px/12px Verdana, Arial, Helvetica, sans-serif; color:#69913E; display:inline; text-decoration:underline; } #linkList #lselect a.c:hover, #linkList #larchives a:hover, #linkList #lresources a:hover { color:#C9E1AA; background-color:#66992D; text-decoration:none; } #linkList h3 { margin:25px 0 0 0; height:54px; } #linkList ul { margin:-25px 0 0 20px; list-style-type:none; list-style-image:url(bullet.gif); } #linkList ul li { margin:0 0 4px 0; } h3.select, h3.archives, h3.resources { background-repeat:no-repeat; } h3.select { background-image:url(design.gif); width:124px; } h3.archives { background-image:url(archives.gif); width:81px; } h3.resources { background-image:url(resources.gif); width:84px; } #footer { position:relative; left:-18px; background:url(footer.jpg) no-repeat bottom left; width:615px; height:47px; padding:60px 220px 0 0; text-align:center; } #footer a { color:#C9E1AA; } #footer a:hover { color:#69913E; background-color:#C9E1AA; } #extraDiv1 { position:relative; top:600px; left:561px; height:600px; width:454px; background:url(tree.jpg) no-repeat bottom left; z-index:5; } #extraDiv2 { position:relative; top:0; left:561px; height:600px; width:454px; background:url(treeBg.gif) no-repeat bottom left; margin-bottom:-600px; z-index:6; }/* css Zen Garden submission 154 - 'Butterfly Effect', by Kevin Linkous, http://www.sitemaker.us/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Kevin Linkous */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { background: url(bgFull.gif) repeat-x #000000; font: normal 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #333; margin: 0px; } h3 { font: italic normal 12pt Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C;} a:link { font-weight: normal; text-decoration: underline; color: #4F8CC3;} a:visited { font-weight: normal; text-decoration: underline; color: #1D3F64;} a:hover, a:active { text-decoration:none ; color: #346293;} acronym {font-weight:bold;} /* specific divs */ #container { position: relative; width: 570px; background: url(bg_home.jpg) no-repeat; margin: 0; padding: 170px 0 0 170px;} #intro { min-width: 470px; } #pageHeader { display: none; } #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left;} #pageHeader h1 span {display:none} #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right;} #pageHeader h2 span { display:none;} #quickSummary { position:absolute; left:530px; top: 730px; width:150px; color: #f4f0e6;} #quickSummary p.p1 {display:none;} #quickSummary p.p2 {} #quickSummary a{ color: #98B974; text-decoration:underline;} #quickSummary a:hover{ color: #f4f0e6; text-decoration:none;} #preamble { clear: right; padding: 10px 10px 0 65px; width:260px;} #preamble h3 { display:block; width:100%; height:23px; background: url(title0.gif) no-repeat;} #preamble h3 span {display:none;} #preamble p {margin:5px 0 0 0; padding:0; color: #6F715C; font-style:italic;} #supportingText { clear: right; padding: 20px 10px 0 0; margin:0; width:490px; background:url(dotedLine.gif) 10px 10px no-repeat;} #explanation {margin:0; padding: 0 0 0 65px; width:260px;} #explanation h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #explanation h3 span {display:none;} #explanation p {margin:5px 0 0 0; padding:0; color: #53553F;} #participation {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} #participation h3 { display:block; width:100%; height:23px; background: url(title2.gif) no-repeat; margin:0;} #participation h3 span {display:none;} #participation p {margin:5px 0 0 0; padding:0; color: #53553F;} #benefits {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} #benefits h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #benefits h3 span {display:none;} #benefits p {margin:5px 0 0 0; padding:0; color: #53553F;} #requirements {margin:10px 0 0 0; padding: 0 200px 0 65px; width:266px; background: url(bgBottom0.gif) right bottom no-repeat;} #requirements h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0;} #requirements h3 span {display:none;} #requirements p {margin:5px 0 0 0; padding:0; color: #53553F;} #footer { padding: 110px 0 30px 45px; width:510px; background: url(bgBottom1.gif) -37px 0px no-repeat;} #footer a:link, #footer a:visited { color:#fff; margin: 0 0 0 15px; } #footer a:hover { color:#3F753E;} #linkList { position: absolute; top: 170px; right: 0px; color:#E8CFB0;} #linkList2 { font: 10px Tahoma, Verdana, Arial, sans-serif; width: 220px;} #linkList h3.select { background:url(subTitle0.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.select span {display:none;} #linkList h3.archives { background: transparent url(subTitle1.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.archives span {display:none;} #linkList h3.resources { background: transparent url(subTitle2.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; } #linkList h3.resources span {display:none;} #linkList p, #linkList li{ font: x-small/1.6em tahoma, verdana, sans-serif; text-indent: 0;} #linkList ul { list-style: none; margin: 0; padding: 0; } #linkList li { color: #E8CFB0; padding: 2px 0 0 17px; } #linkList li a { display: block; border: none; color: #98B974; text-decoration:none; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 2px;} #linkList li a:hover { color: #f4f0e6; background-position: 0 -48px; text-decoration:underline; } #linkList li a.c { display: inline; padding: 0; margin: 0; background: none; color: #E8CFB0; font-weight: normal; } #linkList li a.c:hover { color: #f4f0e6; } #linkList #larchives li,#linkList #lresources li,#linkList #lfavorites li { padding: 2px 0 0 5px; } #linkList #larchives li a,#linkList #lresources li a,#linkList #lfavorites li a { background: transparent url(arrow.gif) no-repeat 0 2px; display: inline; padding-left: 17px; margin: 0;} #linkList #larchives li a:hover,#linkList #lresources li a:hover,#linkList #lfavorites li a:hover { background-position: 0 -48px; } #extraDiv1 { background: transparent url(cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; }/* css Zen Garden submission 154 - 'Butterfly Effect', by Alen Grakalic, http://www.pixelpusher.biz/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Alen Grakalic */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css by Alen Grakalic of Pixelpusher.biz Thanks for taking the time to go through my code. Central photo was taken by me. It is a fountain in my home town Rijeka, Croatia. I made several photo calendars and it inspired me to make this Css Zen Garden entry that I call "November". */ body { background: #2F3027 url(back.jpg) no-repeat; font:0.7em Tahoma, Arial, Verdana, sans-serif; color:#666; margin:0; padding:0; } a{ color:#BD8100; text-decoration:none; } a:hover{ background:#BD8100; color:#FFF; } h3{ margin:0; padding:0; } h3 span{ display:none; } acronym{ border-bottom:1px dotted; } .accesskey{ text-decoration:underline; } ul{ margin: 0; padding:10px 0px 10px 10px; list-style: none; } li{ padding-right: 12px; padding-bottom: 0.6em; background:url(li_bullet.gif) no-repeat 100% 2px; } #container { margin:0; padding:0; } /* Intro */ #intro{ width:467px; } #pageHeader h1{ margin:0 0 0 16px; height:367px; background:url(page_header.gif) no-repeat; text-indent:-2000px; } #pageHeader h2, #quickSummary .p1{ display:none; } #quickSummary .p2{ margin:0 0 0 16px; padding-left:343px; font-size:6px; height:82px; background:url(quicksummary_back.gif) no-repeat; white-space:no-wrap; } #quickSummary .p2 span{ visibility:hidden; } #quickSummary .p2 a{ width:36px; height:20px; float:left; visibility:visible; text-indent:-2000px; margin:-7px 17px 0 0; padding:0; } #quickSummary .p2 a:hover{ background:none; } #preamble{ margin:0 0 0 16px; padding:0; background:url(txt_back.gif) repeat-y; } #preamble h3{ height:69px; background:url(theroad_back.gif) no-repeat; } #preamble p{ line-height:1.4em; padding:19px 19px 5px 19px; margin:0; } /* Supporting Text */ #supportingText{ width:467px; background:url(txt_back.gif) repeat-y 16px; } #supportingText p{ font-size:11px; line-height:1.4em; padding:19px 19px 5px 19px; margin:0; } #supportingText h3{ margin:0; padding:0; height:107px; } #explanation, #participation, #benefits, #requirements{ margin:0 0 0 16px; } #explanation h3{ background:url(explanation_back.gif) no-repeat; } #participation h3{ background:url(participation_back.gif) no-repeat; } #benefits h3{ background:url(benefits_back.gif) no-repeat; } #requirements h3{ background:url(requirements_back.gif) no-repeat; } #footer{ margin:0 0 0 16px; padding-top:58px; padding-bottom:20px; background:url(footer_back.gif) no-repeat; text-align:center; } #footer a{ margin:3px; padding:2px 5px; font-weight:bold; } /* Link List */ #linkList { position:absolute; top:64px; left:467px; width:226px; background:url(linklist_back.gif) no-repeat; padding-top:62px; text-align:right; } #linkList acronym{ border:none; } .select{ background:url(select_back.gif) no-repeat 100% 0; height:30px; } .archives{ background:url(archives_back.gif) no-repeat 100% 0; height:27px; } .resources{ background:url(resources_back.gif) no-repeat 100% 0; height:27px; } /* css Zen Garden submission 156 - 'Table Layout Assassination', by Marko Krsul & Marko Dugonjic, http://web.burza.hr/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Marko Krsul & Marko Dugonjic */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* general settings */ * { margin: 0; padding: 0; } html { background: #000; color: #000; font: 65%/1.5 Arial, Helvetica, sans-serif; } body { background: #000 url(body.gif) repeat-y 747px 0; } p { font-size: 1.2em; line-height: 19px; } * html p { line-height: 1.5em; } ul { list-style: none; } a { color: #da0000; text-decoration: none; border-bottom: 1px solid #da0000; } a:hover { color: #000; border: 0 !important; } acronym { border: 0; font-style: italic; color: #da0000; cursor: help; } a acronym { color: inherit; } /* header and overall layout */ #container { position: relative; width: 747px; background: #fff url(ferlauf.png) repeat-x 0 95%; } #intro { background: url(header.jpg) no-repeat 0 0; width: 747px; padding-top: 184px; } #pageHeader { position: absolute; left: -9999px; top: 0; width: 0; height: 0; overflow: hidden; } #quickSummary { width: 175px; margin-left: 262px; } #quickSummary p { margin-bottom: 10px; color: #f6f6f6; } #quickSummary acronym { color: #fff; font-weight: bold; } #quickSummary a { color: #ff0705; font-weight: bold; border-bottom: 1px solid #ff0705; } #quickSummary p.p2 { width: 130px; margin-bottom: 45px; } #preamble p, #supportingText p { margin-left: 262px; width: 282px; margin-bottom: 1em; text-align: justify; } #preamble a, #supportingText a { font-weight: bold; } #quickSummary h3, #preamble h3, #supportingText h3 { height: 46px; margin-left: 262px; } #supportingText #footer { position: absolute; top: 150px; left: 0; margin: 0 !important; width: 262px; height: 200px; text-align: center; } * html #supportingText #footer/**/{ left: -262px; } #footer a { border: 0; font-size: 1.1em; } #footer a:hover { text-decoration: underline; } #supportingText, #supportingText #requirements { position: relative; } #supportingText { background: url(footer.gif) no-repeat 0 100%; } #supportingText #requirements .p5 { margin: 0; width: 747px; padding: 140px 0 20px 0; text-align: center; color: #fff; font-size: 1.1em; } #supportingText #requirements .p5 a { color: #ff0705; } #extraDiv1 { position: absolute; top: 367px; left: 45px; width: 161px; height: 411px; background: url(herLegs.gif) no-repeat 0 0; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* h3 image replacements and icons */ h3 { background-repeat: no-repeat; background-position: 0 15px; } h3 span { display: block; text-indent: -9999px; } #preamble h3 { background-image: url(h3road.gif); } #preamble { background: url(road.gif) no-repeat 216px 0; } #explanation h3 { position: relative; background-image: url(h3about.gif); } #explanation h3 span { position: absolute; left: -46px; top: 0; width: 46px; height: 38px; background: url(about.gif) no-repeat 0 0; } #participation h3 { background-image: url(h3part.gif); } #participation { background: url(part.gif) no-repeat 223px 20px; } #benefits h3 { background-image: url(h3ben.gif); } #benefits { background: url(ben.gif) no-repeat 223px 5px; } #requirements h3 { background-image: url(h3req.gif); } #requirements { background: url(req.gif) no-repeat 225px 18px; } #linkList h3 { font-size: 1.2em; height: 20px; background-position: 0 0; margin-bottom: 1em; } #lselect h3 { background-image: url(h3sel.gif); } #larchives h3 { background-image: url(h3arc.gif); } #lresources h3 { background-image: url(h3res.gif); } /* sidebar */ #linkList { position: absolute; top: 387px; right: 0; width: 182px; } #linkList ul { margin-bottom: 2em; } #linkList li { font-size: 1.1em; padding: 0 16px; } #linkList a { font-weight: bold; border: 0; text-transform: lowercase; } #linkList a:hover { text-decoration: underline; } #linkList acronym { font-style: normal; cursor: pointer; } #lselect li { margin-bottom: 1em; } #lselect a { display: block; line-height: 1.2em; } #linkList a.c { display: inline; clear: none; color: #000; } #linkList a.c:hover { text-decoration: none; color: #51C3C4; } #lselect li { background: url(shuriken.gif) no-repeat 2px .3em; } #larchives li { background: url(ninjapac.gif) no-repeat 5px .5em; } #lresources li { background: url(lamp.gif) no-repeat 0 .3em; }/* css Zen Garden submission 157 - 'Bugs', by Zohar Arad, http://www.captainserious.co.uk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Zohar Arad */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* General Styles */ body{ color:#000; font: normal 11px Times, serif; line-height:1.4em; letter-spacing: 1pt; margin:0 0 20px 0; padding:0; text-align:center; } a{font-weight:bold;color: #8B3C12;text-decoration:none} a:hover{text-decoration:underline;} a:active, a:visited{color: #B07D03;} h3{margin:0; padding:0;} /* General DIV Styles */ #container{ background:transparent url(header.gif) no-repeat top left; margin:0 auto; padding: 330px 0 0 0; position:relative; width:685px; text-align:left; } #container p{margin: 0 20px; padding: 5px 0} .p1:first-letter{font-size: 18px;} #intro, #supportingText{width:415px; background-color:#FBD1BC; padding:0; margin:0} #pageHeader{display:none} #quickSummary{position:absolute; top: 310px; margin:0 0 0 115px; padding:0} #quickSummary p{margin:0; padding:0;} #quickSummary p.p1{display:none} #footer{margin:-25px 0 0 0;width: 415px;text-align:center;} #footer a{color:#FFFFFF} /* headings replacement styles */ #preamble h3{ display:block; background: transparent url(heading1.gif) no-repeat center left; height: 161px; width: 415px; } #preamble h3 span{display:none;} #explanation h3{ display:block; background: transparent url(so.gif) no-repeat center center; height: 45px; width: 415px; } #explanation h3 span{display:none;} #participation h3{ display:block; background: transparent url(heading2.gif) no-repeat center left; height: 173px; width: 415px; } #participation h3 span{display:none;} #benefits h3{ display:block; background: transparent url(benefits.gif) no-repeat center center; height: 45px; width: 415px; } #benefits h3 span{display:none;} #requirements{ background: transparent url(footer.gif) no-repeat bottom center; padding-bottom:70px; } #requirements h3{ display:block; background: transparent url(heading3.gif) no-repeat center left; height: 173px; width: 415px; } #requirements h3 span{display:none;} /* Navigation Styles */ #linkList{ position:absolute; top: 330px; margin-left: 445px; padding-bottom: 360px; background: #EEFFC5 url(link_footer.gif) no-repeat bottom center; width:200px; } #linkList ul{ list-style-type:none; margin:0 20px; padding:30px 0 20px 0; } #linkList li{ background: transparent url(leaf.gif) no-repeat top left; padding:0 0 0 28px; margin-bottom: 10px; } #lselect a{ display:block; padding: 0; margin:0; } #lselect a.c{ display:inline; color:#2B7F01; } #larchives ul{ padding:30px 0 5px 0; } #lresources ul{ padding:20px 0; } #lselect h3{ display:block; background: transparent url(choose.gif) no-repeat center left; height: 112px; width: 200px; } #lselect h3 span{display:none;} #larchives h3{ display:block; background: transparent url(archive.gif) no-repeat center left; height: 96px; width: 200px; } #larchives h3 span{display:none;} #lresources h3{ display:block; background: transparent url(resources.gif) no-repeat center center; height: 25px; width: 200px; } #lresources h3 span{display:none;} /* Original images used in this design were downloaded from morguefile.com and manipulated for the purpose of this design only. This style sheet was created to symbolise the endless bugs Web artists have to deal with on a daily basis and give hope (as well as a good laugh) to all those who work hard to make the Web a better and bug-free environment Style Sheet by Zohar Arad */ /* css Zen Garden submission 158 - 'a Simple Sunset', by Rob Soule, http://www.couchfort.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Rob Soule */ /* Added: Mar. 7th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* 'a Simple Sunset' design by rob soule www.couchfort.net */ /* --// basic elements --// */ body { font: 11px georgia,times,serif; color: #F0E9CE; background: #F0E9CE url(mainBg.gif) repeat-x top; margin: 0; text-align: center; } acronym { cursor: help; border-bottom: 1px dotted #F0E9CE; } /* --// links --// */ a { color: #F0AC4A; text-decoration: none; } a:hover,a:active { text-decoration: underline; } a acronym { border: 0; } li a { display: block; color: #2B0101; font-weight: bold; font-size: 11px; text-transform: none; padding: 2px 0 3px 0; } li a.c { font-size: 9px; font-weight: normal; display: inline; padding: 0; text-transform: uppercase; } #larchives li a, #lresources li a { display: inline; font-weight: normal; font-size: 9px; line-height: 15px; margin: 0; text-transform: uppercase; } li a:hover, li a:hover.c { color: #5E1919; } #footer a { color: #B6B2A3; margin: 0 5px; border: 1px solid #CBC7B5; text-decoration: none; padding: 2px 3px; } #footer a:hover { background: #CBC7B5; color: #2B0101; } /* --// id selectors --// */ #container { margin: 0 auto; text-align: left; background: url(contBg.gif) repeat-y center; width: 672px; } #intro,#supportingText { line-height: 19px; } #pageHeader { height: 287px; background: url(top.jpg) no-repeat; } #quickSummary { background: url(preBg.gif) no-repeat center top; height: 87px; font-size: 9px; text-transform: uppercase; } #preamble { width: 380px; margin-top: -95px; padding: 0 0 0 260px; font-style: italic; } #supportingText { width: 380px; padding: 0 0 0 260px; } #linkList { position: absolute; top: 325px; padding-left: 45px; color: #2B0101; } #lselect,#larchives,#lresources { background: url(lselectBttm.gif) no-repeat bottom; padding-bottom: 12px; margin-top: 15px; } /* --// layout ...booya --// */ #preamble h3,#explanation h3, #participation h3, #benefits h3, #requirements h3{ text-indent: -5000px; height: 37px; } #lselect h3, #lresources h3, #larchives h3 { height: 23px; width: 189px; margin: 0; text-indent: -5000px; } #preamble h3 { background: url(h3Road.gif) no-repeat right; } #explanation h3 { background: url(h3AllAbout.gif) no-repeat right; } #participation h3 { background: url(h3Part.gif) no-repeat right; } #benefits h3 { background: url(h3Benefits.gif) no-repeat right; } #requirements h3 { background: url(h3Require.gif) no-repeat right; } #lresources h3 { background: url(lresourcesSpan.gif); } #larchives h3 { background: url(larchivesSpan.gif); } #lselect h3{ background: url(lselectSpan.gif); margin: -15px 0 0 0; } #quickSummary .p2 { position: absolute; top: 190px; width: 280px; text-align: right; margin-left: 360px; } #quickSummary .p1 { position: absolute; top: 100px; width: 158px; margin-left: 482px; text-align: right; line-height: 14px; } #footer { display: block; width: 625px; margin-left: -235px; text-align: center; padding: 15px 0 25px 0; font: 10px verdana,arial,serif; text-transform: uppercase; letter-spacing: -1px; background: #DCD5B8 url(footerBg.gif) repeat-x bottom; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv1, #extraDiv5, #pageHeader h1,h2 { display : none; } /* --// lists --// */ ul,li { list-style: none; padding: 0; margin: 0; } li { background: #F0E9CE; padding: 5px 7px; border-bottom: 1px solid #DCD5B8; text-transform: uppercase; font-size: 9px; } li:hover { background: #DCD5B8; } /* --// the lone class --// */ .p5 { clear: both; } /* the end... doh doh doh *//* css Zen Garden submission 159 - 'Berry Flavour', by Maren Becker, http://www.honeyjazz.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Maren Becker */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ******************************** HTML Tags ******************************** */ * { padding: 0px; margin: 0px; } body { margin: 0px; padding: 0px; border: 0px; background: url(bg.gif) repeat-y center top fixed; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #D48EA8; text-align: center; } p { line-height: 1.4em; } a:link, a:visited { color: #858585; text-decoration: none; } a:hover, a:active { color: #BF4E77; text-decoration: none; } acronym { cursor: help; color: #CD9CAE; font-weight: bold; border-bottom: 1px solid #FEF6FA; } /* ******************************** Container, Intro ******************************** */ #container { padding: 12px 0px 0px; width: 428px; margin-right: auto; margin-left: auto; position: relative; text-align: left; } #intro { margin-top: 0px; } /* ******************************** Page Header ******************************** */ #pageHeader { height: 175px; width: 428px; margin-top: 0px; margin-bottom: 12px; background: url(header.jpg) no-repeat; } #pageHeader h2 { height: 120px; width: 119px; position: absolute; left: 319px; top: 79px; background-image: url(berryflavour.gif); } /* ******************************** Quick Summary ******************************** */ #quickSummary { background: #FEF6FA url(bg_content.gif) repeat-y; border-top: 1px solid #F6E1EA; border-right: 1px solid #F6E1EA; border-bottom: 1px solid #F6E1EA; position: absolute; top: 199px; left: 0px; padding: 2px 2px 2px 6px; height: 36px; width: 142px; voice-family: "\"}\""; voice-family: inherit; width: 134px; } /* ******************************** Preamble ******************************** */ #preamble { border-top: 1px solid #F6E1EA; border-bottom: none; } #preamble p { padding-left: 7px; padding-right: 7px; margin-top: 7px; } #preamble h3 { background: url(bg_preamble.gif) no-repeat; height: 29px; } #preamble p.p3 { padding-bottom: 15px; } /* ******************************** Supporting Text ******************************** */ #supportingText, #preamble { margin-top: 0px; margin-left: 155px; background: #FEF6FA url(bg_content.gif) repeat-y; border-right: 1px solid #F6E1EA; width: 278px; voice-family: "\"}\""; voice-family: inherit; width: 271px; } #supportingText p { margin-top: 7px; padding-right: 7px; padding-left: 7px; } #explanation h3 { background: url(bg_explanation.gif) no-repeat; background-repeat:; height: 29px; } #explanation p.p2, #participation p.p3, #benefits p.p1 { margin-bottom: 20px; } #participation h3 { background: url(bg_participation.gif) no-repeat; height: 29px; } #benefits h3 { background: url(bg_benefits.gif) no-repeat; height: 29px; } #requirements h3 { background: url(bg_requirements.gif) no-repeat; height: 29px; } #requirements p.p5 { margin-top: 30px; } /* ******************************** Footer ******************************** */ #footer { text-align: right; padding-right: 12px; padding-bottom: 20px; margin-top: 40px; } /* ******************************** Link List ******************************** */ #linkList{ position: absolute; top: 251px; left: 0px; width: 142px; font-size: 10px; } #linkList h3 { font-size: 12px; font-weight: bold; padding-left: 14px; margin-top: 6px; margin-bottom: 6px; margin-left: 2px; } #lselect h3 { height: 19px; background: url(bg_select.gif) no-repeat; } #lresources h3 { height: 19px; background: url(bg_resources.gif) no-repeat; } #larchives h3 { height: 19px; background: url(bg_archives.gif) no-repeat; } #lselect, #lresources, #larchives { background: #FEF6FA url(bg_content.gif) repeat-y; border-top: 1px solid #F6E1EA; border-right: 1px solid #F6E1EA; border-bottom: 1px solid #F6E1EA; margin-bottom: 12px; } #linkList ul { list-style: none; margin: 5px; padding: 0px; } #linkList li a { display: block; } #linkList li:hover { background-color:#FAEBF1; } #lselect a { text-transform: uppercase; } #lselect ul li a.c { display: inline; text-transform: none; } #lselect li, #larchives li, #lresources li { padding-top: 4px; padding-bottom: 4px; background: url(dots.gif) repeat-x; } #footer a:link, #footer a:visited { font-weight: bold; } #footer a:hover, #footer a:visited { padding-bottom: 2px; border-bottom: 4px solid #858585; color: #858585; } /* ******************************** Hidden ******************************** */ #pageHeader h1 span, #pageHeader h2 span, #quickSummary p.p1 span, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #linkList h3 span { display:none; } /* css Zen Garden submission 160 - 'Daruma', by Stuart Cruickshank, http://www.stuartandpetra.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Stuart Cruickshank */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body {background:#dcdcdc url(grad_top.jpg) repeat-x; font:12px "Trebuchet MS", verdana, arial, sans-serif; color:#606060;} #container {width:765px; margin:0 auto;} #pageHeader {background-image:url(header.jpg); width:699px; height:347px;} #pageHeader h1, h2 {display:none;} #quickSummary {position:relative;} #quickSummary p.p1 {display:none;} #quickSummary p.p2 {position:absolute; left:600px; top:-65px; width: 130px;} #quickSummary p.p2 a:link {color: #606060; text-decoration:underline; font-weight:bold;} #quickSummary p.p2 a:visited {color:#787878;} #quickSummary p.p2 a:hover {color:#949494;} #preamble {width:765px; background:url(preamble_bg.gif) bottom; padding-bottom:15px; line-height:22px; text-align:justify;} #preamble h3 span {display:none; } #preamble h3 {position:relative; background-image:url(preamble_hdr.gif); width:765px; height:35px;} #preamble p {padding: 7px 20px;} #supportingText {float:left; width:543px; background-image:url(body_bg.gif); line-height:22px; text-align:justify;} #supportingText p {padding: 7px 20px;} #supportingText a:link {color:#df0000; text-decoration:none; font-weight:bold; border-bottom:1px solid #930000;} #supportingText a:visited {color:#df0000; text-decoration:none; border:0;} #supportingText a:hover{border-bottom: 1px solid #df0000;} #explanation {background:url(so_what_btrflys.gif) bottom left no-repeat;} #explanation h3 span {display:none;} #explanation h3 {position:relative; background-image:url(so_what_hdr.gif); width:543px; height:28px;} #participation {background: url(participation_btrflys.gif) bottom left no-repeat;} #participation h3 span {display:none;} #participation h3 {position:relative; background-image:url(participation_hdr.gif); width:543px; height:37px;} #benefits h3 span {display:none;} #benefits h3 {position:relative; background-image:url(benefits_hdr.gif); width:543px; height:35px;} #requirements {background: url(req_btrflys.gif) top left no-repeat;} #requirements h3 span {display:none;} #requirements h3 {position:relative; background-image:url(req_hdr.gif); width:543px; height:36px;} #requirements .p5 {margin-bottom:0; padding-bottom:14px;} #footer {position:relative; font-size: 14px; text-align:center;background:url(footer_bg.gif) no-repeat; width:543px; height:35px; padding-top:63px;} #footer a:link {color: #c20000; font-weight:bolder; text-decoration:none; border:0;} #footer a:visited {color:#c20000; font-weight:bolder;} #footer a:hover {color:#f33; border:0;} #linkList {float:right; width:195px; color:#d70000; background-image:url(linklist_bg.gif); font-size:11px;} #linkList ul {list-style-type:none;} #lselect a:link {display:block;color: #d70000; text-decoration:none; font-weight:bolder; border-bottom:1px solid #ddd;} #lselect a:visited {display:block; color:#c66; text-decoration:none; border-bottom:1px solid #b1b1b1;} #lselect a:hover {color: #f70000;} #lselect a:link.c {display:inline; color:#5d5d5d; text-decoration:none; font-style:italic; margin-left:5px; border:0;} #lselect a:visited.c {display:inline; color:#787878; font-weight:normal; text-decoration:none; border:0;} #lselect a:hover.c{color:#949494;} #linkList2 li {padding: 0 20px;} #linkList2 {background:url(resources_btm_2.gif) bottom no-repeat; padding-bottom: 10px; padding-bottom: 119px;} #lselect h3 {position:relative; background-image: url(select_design_hdr.gif); width:195px; height:60px;} #lselect h3 span {display:none;} #lselect ul {padding-top:8px;} #lselect li {padding-bottom:10px;} #larchives h3 {position:relative; background-image: url(archives_hdr.gif); width:195px; height:30px;} #larchives h3 span {display:none;} #lresources h3 {position:relative; background: url(resources_hdr.gif) no-repeat; width:195px; height:30px;} #lresources h3 span {display:none;} #larchives ul, #lresources ul {padding-top:8px;} #larchives ul li, #lresources ul li {padding-bottom:8px;} #larchives a:link, #lresources a:link {color:#606060; text-decoration:none; font-weight:bolder;} #larchives a:visited, #lresources a:visited {color:#787878;text-decoration:none;} #larchives a:hover, #lresources a:hover {color:#949494; font-style:italic;} * {margin:0; padding:0;} acronym {border-bottom: 1px dotted #606060; cursor:help;} /* css Zen Garden submission 161 - 'Zenfandel', by Nicholas Rougeux, http://www.c82.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Nicholas Rougeux */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Zenfandel design by Nicholas Rougeux [ www.c82.net ] All photography originated from free stock for commercial and personal use from the good folks at Stock Exchange. [ www.sxc.hu ] */ /*__________Clean slate__________*/ body, h1, h2, h3, li, p, ul { font-size: 1em; margin: 0; padding: 0; } /*__________Basics__________*/ a, a:link, a:visited, a:hover, a:active { color: #ada364; } a:hover { text-decoration: none; } acronym { border: 0; color: #780101; cursor: help; } .accesskey { text-decoration: underline; } body { background: url(bgMain.gif) repeat-y; color: #0f330d; font-family: "Lucida Grande", Georgia, "Times New Roman", Times, serif; font-size: 0.8em; padding-bottom: 20px; } h3 { color: #8f9947; font-style: italic; font-size: 1.7em; font-weight: normal; margin-bottom: 0.5em; } #container { position: relative; z-index: 99; } p { line-height: 1.5em; margin-bottom: 1em; } /*__________Header__________*/ #pageHeader { background: #fff url(header.jpg) no-repeat left top; border-bottom: 1px solid #acb7a6; height: 155px; } #pageHeader span { display: none; } /*__________Quick summary__________*/ #quickSummary { font-size: 0.85em; font-style: italic; line-height: 1.4em; } #quickSummary .p2 { text-align: right; } /*__________Preamble__________*/ #preamble, #quickSummary { margin-left: 219px; margin-top: 10px; padding-left: 150px; /* Make IE play nice with others */ width: 530px; voice-family: "\"}\""; voice-family:inherit; width: 380px; } html>body #quickSummary, html>body #preamble { width: 380px; } /*__________Supporting text__________*/ #supportingText { background: url(bottle.gif) no-repeat right bottom; margin-left: 230px; width: 530px; z-index: 100; } #preamble .p3, #explanation, #participation, #benefits, #requirements { background: url(curlSmall.gif) no-repeat bottom; margin-bottom: 1em; padding-bottom: 37px; } #requirements { margin-right: 160px; } /*__________Side__________*/ #linkList { color: #fff; font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; font-size: 0.85em; font-weight: bold; left: 0; overflow: hidden; position: absolute; top: 156px; width: 220px; } #linkList a, #linkList h3 { font-family: Georgia, "Times New Roman", Times, serif; } #lselect a { display: block; } #lselect a.c { display: inline; } #linkList a { color: #fff; font-size: 1.1em; font-style: italic; font-weight: normal; text-decoration: none; } #linkList a:hover { text-decoration: underline; } #linkList a.c { color: #fffbe2; font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; font-size: 1em; font-style: normal; font-weight: bold; } #linkList acronym { color: #f6f1c0; } #linkList h3 { color: #ccc180; font-size: 1.4em; font-style: normal; padding-top: 0.5em; text-align: center; text-transform: uppercase; } #linkList li { background: url(bullet.gif) no-repeat 0 0.3em; padding-left: 15px; } #linkList ul { list-style: none; padding: 0 10px 0.8em 10px; } #lselect { background: #44410d url(curlBig.gif) no-repeat bottom; padding-bottom: 40px; } #lselect li { padding-bottom: 0.8em; } #larchives, #lresources { border-top: 3px double #8e7253; } #larchives li, #lresources li { margin-bottom: 0.2em; } /*__________Footer__________*/ #footer { font-size: 0.85em; font-style: italic; text-align: right; } /*__________Extras__________*/ /* Extra div used for grapes image so the entire image is not clipped when text is resized */ #extraDiv1 { background: transparent url(grapes.gif) no-repeat left top; height: 351px; left: 220px; position: absolute; top: 156px; width: 147px; z-index: 1; }/* css Zen Garden submission 162 - 'Angelus', by Vladimir Lukic, http://www.c82.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Vladimir Lukic */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* All images are Copyright (c) 2005 by Vladimir Lukic | www.wortahn.com */ /* The Angel sculpture is from the main doors of the Metropolitan United Church in */ /* Toronto, Canada, photographed by the author. */ /* The inspiration for this work draws on the stained glass windows of */ /* St. Michael's Catholic Cathedral, Toronto, Canada, and medieval Catholic prayer books */ /* ENG: To any Croatian designers reading this, at home and abroad, a big hello from Canada! */ /* HRV: Svim hrvatskim designerima koji ovo citaju, doma i u inozemstvu, velik pozdrav iz Kanade! */ /* basic elements */ html, body { font-family: 'Tahoma', sans-serif; font-size: small; color: rgb(104,0,0); background: url("body-bg.jpg") rgb(70, 0, 0); padding: 0px; margin: 0px; } p { font-family: 'Tahoma', sans-serif; font-size: x-small; margin-top: 0px; margin-bottom: 7px; margin-left: 76px; margin-right: 30px; text-align: left; line-height: 130%; } h3 { font-family: 'Tahoma', serif; font-size: medium; font-stretch: condensed; font-style: italic; margin-bottom: 10px; color: #7D775C; margin-top: 0px; } a:link { font-weight: bold; text-decoration: none; color: #7D775C; } a:visited { font-weight: bold; text-decoration: none; color: #7D775C; } a:hover, a:active { text-decoration: underline; color: navy; } acronym { cursor: help; } /* specific divs */ #container { position: relative; width: 640px; background: url("container-bg.jpg") rgb(245, 203,144) top left repeat-y; border-top: 0px; padding-top: 1px; padding-bottom: 0px; border-left: 2px solid white; border-right: 3px solid black; margin: auto; margin-bottom: 0px; overflow: hidden; /*needed to avoid horizontal scrollbars that appear in mozilla with margin: auto at 800x600*/ } #intro { background: url("text-bg.jpg") 45px 0px repeat-y; margin: 0px; padding: 0px; } #pageHeader { width: 640px; position: relative; height: 314px; background: transparent url("banner2.jpg") top left no-repeat; margin: 0px; padding-top: 1px;/*needed to account for collapsing margins -- mozilla properly adds extra space on top if no padding is specified*/ margin-bottom: 0px; padding-right: 0px; z-index: 100; } #preamble { position: relative; padding-left: 0px; width: 400px; margin-left: 15px; margin-top: 0px; margin-right: 0px; padding-bottom: 0px; padding-top: 0px; background: transparent url("l.jpg") 25px 35px no-repeat; } #preamble h3 { width: 183px; height: 25px; background: url("preamb-title.jpg") top center no-repeat; margin-left: auto; margin-right: auto; } #preamble h3 span { display: none; } #preamble .p3 { background: url("preamb-bg.jpg") 42% 100% no-repeat; padding-bottom: 85px; } #preamble p { font-variant: small-caps; color: #7D775C; font-weight: bold; font-size: small; line-height: 100%; } #preamble p.p1:first-letter { margin-left: -7px; color: rgb(245, 203,144); } #quickSummary { background: url("demo.jpg") transparent top right no-repeat; width: 207px; height: 174px; clear: none; position: relative; padding: 0px; right: 35px; top: 0px; float: right; text-align: right; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1, h2 { display: none; } #quickSummary p.p1 { display: none } #quickSummary p.p2 { display: block; position: relative; top: 120px; bottom: 0px; margin: 0px; margin-left: 50px; padding: 0px; text-align: right; } #supportingText { padding-left: 0px; padding-right: 0px; padding-bottom: 0px; width: 100%; padding-top: 1px; margin-top: 30px; margin-left: 0px; margin-right: 0px; position: relative; background: transparent url("text-bg.jpg") 45px 0px repeat-y; z-index: 100; } #supportingText h3 { margin-left: auto; margin-right: auto; } #supportingText .p1:first-letter { margin-left: -7px; color: rgb(245, 203,144); display: none; } #supportingText div { padding-left: 0px; width: 400px; margin-left: 15px; margin-bottom: 45px; height: 1%; } #supportingText #footer { text-align: right; padding: 0px; width: 640px; height: 191px; margin-left: 0px; padding-left: 0px; margin-bottom: 1px; position: relative; background: url("footer.jpg") bottom left no-repeat; padding-top: 0px; } #explanation { background: transparent url("t.jpg") 25px 33px no-repeat; } #participation { background: transparent url("g.jpg") 25px 33px no-repeat; } #benefits { background: transparent url("w.jpg") 25px 18px no-repeat; } #requirements { background: transparent url("w2.jpg") 25px 18px no-repeat; } #explanation h3 { width: 167px; height: 22px; background: url("what-title.jpg") top left no-repeat; } #explanation h3 span{ display: none; } #participation h3 { width: 90px; height: 23px; background: url("part-title.jpg") top left no-repeat; } #participation h3 span{ display: none; } #benefits h3 { width: 53px; height: 18px; background: url("ben-title.jpg") top left no-repeat; } #benefits h3 span{ display: none; } #requirements h3 { width: 90px; height: 23px; background: url("req-title.jpg") top left no-repeat; } #requirements h3 span{ display: none; } #lselect, #larchives, #lresources { display: block; font-size: x-small; margin-bottom: 20px; } #footer a { position: relative; top: 140px; right: 60px; color: rgb(245, 203,144) } #footer a:hover{ color: #7D775C; } #linkList { position: absolute; width: 180px; height: auto; right: 35px; top: 500px; clear: none; text-align: right; padding-bottom: 30px; z-index: 100; background: transparent url("link-bg.jpg") bottom left no-repeat; } #linkList2 { margin: 0px; padding: 0px; width: auto; } #linkList h3.select { text-align: right; width: 180px; height: 23px; background: url("sel-title.jpg") top right no-repeat; } #linkList h3.select span { display: none; } #linkList h3.archives { text-align: right; width: 180px; height: 23px; background: url("arch-title.jpg") top right no-repeat; } #linkList h3.archives span { display: none; } #linkList h3.resources { text-align: right; width: 180px; height: 23px; background: url("res-title.jpg") top right no-repeat; } #linkList h3.resources span { display: none; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2.5ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { font-weight: bold; text-decoration: none; color: #7D775C; } #linkList li a:visited { font-weight: bold; text-decoration: none; color: #7D775C; } #linkList li a:hover, a:active { text-decoration: underline; color: navy; } #requirements .p5 { text-align: right; font-style: italic; font-size: x-small; padding-top: 5px; margin-top: 20px; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4 { display:none; } /* css Zen Garden submission 163 - 'Like the Sea', by Lars Daum, http://www.redrotate.de/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Lars Daum */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { padding: 0; margin: 0; } body { font-family: Tahoma, Arial, Helvetica, sans-serif; text-align: center; background: #FBFBE5 url(grass.gif) right bottom fixed no-repeat; color: #566047; } a, a:link, a:visited { color: #566047; text-decoration: underline; } a:hover { text-decoration: none; } a:active, a:focus { color: #566047; } .p5 span a { font-weight: bold; } p { margin-bottom: 10px; line-height: 19px; font-size: 70%; } acronym { font-weight: bold; text-decoration: none; border-bottom: none; } #container { position: relative; margin: auto; text-align: left; background: #FBFBE5 url(container_bg.gif) center top repeat-y; width: 760px; } #pageHeader { text-align: center; background: #8C9777 url(page_header_bg.jpg) center top no-repeat; height: 300px; } #pageHeader h1 span, #pageHeader h2 span { display: none; } #quickSummary .p1 { position: absolute; top: 65px; left: 40px; font-weight: bold; color: #FBFBE5; width: 475px; } #quickSummary .p2 span { position: absolute; color: #566047; font-size: 100%; text-align: left; top: 245px; left: 530px; } #preamble { margin: -40px 50px 20px 265px; padding: 20px 20px 10px; border: 3px solid #8C9777; background: #FBFBE5; } #preamble h3 { margin-bottom: 10px; height: 32px; background: transparent url(h3_preamble.gif) left top no-repeat; border-bottom: 1px solid #7D8965; } #preamble h3 span { display: none; } #supportingText { margin-left: 230px; padding: 0 0 35px 35px; } #supportingText h3 span { display: none; } #explanation, #participation, #benefits, #requirements { padding-right: 50px; } #explanation h3 { margin-bottom: 10px; height: 32px; background: transparent url(h3_explanation.gif) left top no-repeat; border-bottom: 1px solid #7D8965; } #participation h3 { margin-bottom: 10px; height: 32px; background: transparent url(h3_participation.gif) left top no-repeat; border-bottom: 1px solid #7D8965; } #benefits h3 { margin-bottom: 10px; height: 32px; background: transparent url(h3_benefits.gif) left top no-repeat; border-bottom: 1px solid #7D8965; } #requirements h3 { margin-bottom: 10px; height: 32px; background: transparent url(h3_requirements.gif) left top no-repeat; border-bottom: 1px solid #7D8965; } #footer { margin: 0 0 -55px -265px; padding: 20px 20px 0 530px; text-align: center; clear: both; font-size: 70%; background: #FBFBE5 url(footer_bg.jpg) center top no-repeat; height: 166px; voice-family: "\"}\""; height: 146px; voice-family: "\"}\""; } #linkList { position: absolute; top: 275px; left: 64px; width: 138px; } #linkList h3 span { display: none; } #linkList h3 { margin-top: 25px; width: 138px; height: 30px; border-bottom: 1px solid #7D8965; } h3.select { margin-bottom: 5px; background: transparent url(h3_select.gif) left center no-repeat; } h3.archives { margin-bottom: 5px; background: transparent url(h3_archives.gif) left center no-repeat; } h3.resources { margin-bottom: 5px; background: transparent url(h3_resources.gif) left center no-repeat; } #linkList ul { list-style: none; } #lselect ul li { margin-bottom: 5px; padding-bottom: 5px; font-size: 70%; color: #8C9777; border-bottom: 1px solid #8C9777; } #linkList a.c, #linkList a.c:link, #linkList a.c:visited, #linkList a.c:hover, #linkList a.c:active, #linkList a.c:focus { display: inline; padding: 0; font-size: 100%; font-weight: normal; text-decoration: none; color: #8C9777; background-image: none; } #lselect ul li a, #lselect ul li a:link, #lselect ul li a:visited { display: block; clear: both; padding: 0 0 2px 20px; font-size: 100%; font-weight: bold; text-decoration: underline; color: #566047; background: transparent url(lselect_a_bg.gif) left center no-repeat; } #lselect ul li a:hover { text-decoration: none; } #lselect ul li a, #lselect ul li a:active, #lselect ul li a:focus { display: block; clear: both; padding: 0 0 2px 20px; font-size: 100%; font-weight: bold; text-decoration: underline; color: #566047; background: transparent url(lselect_a_bg.gif) left center no-repeat; } #larchives ul li { margin-bottom: 5px; font-size: 70%; color: #8C9777; } #larchives ul li a, #larchives ul li a:link, #larchives ul li a:visited { font-weight: bold; color: #8C9777; text-decoration: underline; } #larchives ul li a:hover { text-decoration: none; } #larchives ul li a:active, #larchives ul li a:focus { font-weight: bold; color: #8C9777; text-decoration: underline; } #lresources ul li { margin-bottom: 5px; font-size: 70%; color: #8C9777; } #lresources ul li a, #lresources ul li a:link, #lresources ul li a:visited { font-weight: bold; color: #8C9777; text-decoration: underline; } #lresources ul li a:hover { text-decoration: none; } #lresources ul li a:active, #lresources ul li a:focus { font-weight: bold; color: #8C9777; text-decoration: underline; } /* css Zen Garden submission 164 - 'Chien', by Alex Miller, http://www.pixul.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Alex Miller */ /* Added: Apr. 15th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* You may notice this CSS file has no IE hacks. This is because I think hacks are messy, and I don't care if my page screws up for some people. It's their fault for using Internet Explorer in the first place. If everyone didn't include hacks, more people would not use IE! */ body { background-image: url(background.gif); font-family: verdana, arial, serif; font-size: 11px; text-align: center; padding: 0; margin: 0; line-height: 16px; color: #333; } #container { width: 633px; margin: auto; border-top: 1px solid #000; background-image: url(containerbackground.gif); text-align: left; padding: 0 0 0 29px; position: relative; top: -1px; } #pageHeader { background-image: url(top.gif); width: 605px; height: 332px; margin-top: 0; } #pageHeader h1, h2 { display: none; } #preamble, #supportingText { margin: 0 0 0 8px; width: 389px; } #preamble h3, #supportingText h3 { margin-top: 0; } #preamble p, #supportingText p, #quickSummary p { margin: 10px 15px 10px 15px; } #quickSummary, #linkList { position: absolute; left: 435px; width: 192px; } #quickSummary { top: 332px; background: url(summary.gif) no-repeat; padding-top: 46px; color: #000; } #linkList { top: 526px; } #footer { text-align: center; width: 100%; padding-bottom: 10px; } #preamble h3 { background-image: url(title1.gif); width: 389px; height: 46px; } #preamble h3 span { display: none; } #explanation h3 { background-image: url(title2.gif); width: 389px; height: 46px; } #explanation h3 span { display: none; } #participation h3 { background-image: url(title3.gif); width: 389px; height: 46px; } #participation h3 span { display: none; } #benefits h3 { background-image: url(title4.gif); width: 389px; height: 46px; } #benefits h3 span { display: none; } #requirements h3 { background-image: url(title5.gif); width: 389px; height: 46px; } #requirements h3 span { display: none; } h3.select { background-image: url(designs.gif); width: 192px; height: 45px; } h3.select span { display: none; } h3.archives { background-image: url(archives.gif); width: 192px; height: 45px; } h3.archives span { display: none; } h3.resources { background-image: url(resources.gif); width: 192px; height: 45px; } h3.resources span { display: none; } li { padding: 0 0 6px 0; text-transform: capitalize; } #lselect a:link.c, #lselect a:visited.c { display: inline; } #lselect a { display: block; } #lselect ul li { list-style-image: url(paperfolded.gif); } #larchives ul li, #lresources ul li { list-style-image: url(paper.gif); } a:LINK { text-decoration: none; color: #CC0000; } a:VISITED { text-decoration: none; color: #CC6666; } a:HOVER { text-decoration: underline; color: #CC0000; } #footer { border-top: 1px solid #999; padding: 6px 0 6px 0; background-color: #FFF; } #footer a { font-weight: bold; } /* css Zen Garden submission 165 - 'Red Paper', by Rob Soule, http://www.couchfort.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Rob Soule */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* --// basic elements --// */ body { font: 11px/18px verdana,arial,helvetica,sans-serif; color: #512720; background: #512720 url(bodyBg.gif) center top repeat-y; margin: 0; padding: 0; text-align: center; } acronym { cursor: help; border-bottom: 1px dotted #B0915F; } /* --// layout // */ #container { width: 765px; background: url(mainBg.gif) repeat-y; margin: 0 auto; padding: 0; text-align: left; } #pageHeader { width: 765px; height: 343px; background: url(headerBg.jpg) no-repeat; } #preamble, #supportingText { text-align: left; width: 455px; margin: 0 0 0 43px; } #preamble p, #supportingText p { margin: 0 0 12px 0; } #quickSummary { position: relative; } #quickSummary .p2 { position: absolute; margin-top: -70px; left: 615px; font: 9px/14px Georgia,Times,Serif; text-transform: uppercase; width: 100px; padding: 0; } #linkList { position: absolute; top: 343px; margin-left: 529px; color: #2B0101; width: 175px; } #footer { display: block; padding: 12px 0 0 0; margin: 20px 0 0 120px; text-align: center; background: url(footer.gif) no-repeat; height: 43px; width: 204px; } .p1,.p2,.p3,.p4,.p5 { padding-left: 8px; } /* --// headers // --*/ #preamble h3,#explanation h3, #participation h3, #benefits h3, #requirements h3 { height: 60px; text-indent: -8000px; margin: 0; padding: 0; } #lselect h3, #lresources h3, #larchives h3 { height: 23px; margin: 0; padding: 0; text-indent: -8000px; } #preamble h3 { background: url(hdRoad.gif) no-repeat; } #explanation h3 { background: url(hdAbout.gif) no-repeat; } #participation h3 { background: url(hdPart.gif) no-repeat; } #benefits h3 { background: url(hdBen.gif) no-repeat; } #requirements h3 { background: url(hdReq.gif) no-repeat; } #lselect h3 { background: url(hdSelect.gif) no-repeat; } #larchives h3 { background: url(hdArch.gif) no-repeat; margin-top: 15px;} #lresources h3 { background: url(hdResc.gif) no-repeat; margin-top: 15px; } /* --// links --// */ a { color: #683A33; text-decoration: none; border-bottom: 1px dotted #683A33; } a:hover,a:active { border-bottom: 1px solid #512720; background: #C3A680; } a acronym { border: 0; } li a { display: block; font-weight: bold; font-size: 10px; text-transform: uppercase; padding: 0 0 0 10px; background: url(star.gif) no-repeat; border-bottom: 0; } li a.c { font-size: 9px; font-weight: normal; display: inline; padding: 0; background: none; } #larchives li a, #lresources li a { display: inline; font-weight: normal; font-size: 9px; margin: 0; text-transform: uppercase; } #larchives li a { background: none; } li a:hover, li a:hover.c { color: #5E1919; border-bottom: 0; } li a:hover { background: url(star_over.gif) no-repeat; } li a:hover.c { background: none; } #footer a { text-decoration: none; border: none; font: 10px georgia,times,serif; padding: 1px; text-transform: uppercase; } #footer a:hover { background: none; border-top: 1px solid #683A33; border-bottom: 1px solid #683A33; } /* --// no display // -- */ #quickSummary .p1, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6, #pageHeader h1,h2 { display : none; } /* --// lists --// */ ul,li { list-style: none; padding: 0; margin: 0; line-height: 15px; } #lselect, #lresources, #larchives { padding-bottom: 6px; background: url(liBttmBg.gif) center bottom no-repeat; } li { padding: 5px 5px 12px 5px; background: url(liBg.gif) center bottom no-repeat; text-transform: uppercase; font-size: 9px; /*border-bottom: 1px solid #A68858;*/ } /* --// hover effects //-- */ .p1:hover,.p2:hover,.p3:hover,.p4:hover,.p5:hover { border-left: 2px solid #B0915F; padding-left: 6px; } #quickSummary .p2:hover { border: 0; padding: 0; } /* css Zen Garden submission 166 - 'Obsequience', by Pierce Gleeson, http://www.piercegleeson.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Pierce Gleeson */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin: 0; padding: 0; } body { font: 75%/160% verdana; color: #333; background: #333 url(equaliser.jpg) repeat top left; margin: 0; text-align:right; padding-top:0px; font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Verdana, sans-serif; } #container { padding: 0; margin: 30px 30px 0 auto; width:720px; text-align:left; background:transparent url(back.jpg) top left repeat-y; overflow:auto; } #extraDiv1{ padding: 0; margin: 0 30px 30px auto; width:720px; height:75px; background:transparent url(useless.jpg) top left repeat; overflow:auto; } #linkList{ background:transparent url(linkback.gif) repeat-y top left; margin:0 0 0 70px; float:left; width: 120px; position:absolute; top: 299px !important; /* Good Browsers */ top: 269px; /* IE 5 */ top/**/:/**/299px; /* IE 6 */ } #linkList2{ background:transparent url(linkbottom.jpg) no-repeat bottom left; padding:0 2px 20px 2px; } #lselect h3, #larchives h3, #lresources h3, #lfavorites h3{ margin:10px 0 0 0; text-indent: -15000px; height: 28px; overflow: hidden; } #lselect h3{ background: transparent url(select.gif) no-repeat left top; height:50px; margin:0px;} #larchives h3{ background: transparent url(archives.gif) no-repeat left top;} #lfavorites h3{ background: transparent url(favourites.gif) no-repeat left top;} #lresources h3{ background: transparent url(resources.gif) no-repeat left top;} #quickSummary{ padding:0; margin:0 10px 0 250px !important; margin:0 5px 0 250px; float:right; width:250px; clear:right; background:#fff; color:#666; } #quickSummary p{ margin:5px 5px 5px 5px; height:100%; } #quickSummary p.p1{ text-indent:-15000px; overflow:hidden; height:1px; margin:0; } #pageHeader{ background: url(header.jpg) no-repeat top left; padding:0; margin:0; text-indent: -15000px; height: 290px; overflow: hidden; } #supportingText{ padding:0; margin:0 10px 0 0 !important; margin:0 5px 0 0; } #preamble{ padding:0; margin:0 0 20px 205px !important; margin:0 0 20px 102px; float:left; width:230px; clear:left; background: url(preambleback.jpg) repeat-y top left; } #explanation{ background:transparent; margin:0 0 10px 20px !important; margin:0 0 10px 457px; padding-bottom:10px; width: 250px; clear:right; float:right !important; float:none; overflow:auto; } #participation{ background:transparent; margin:0 0 40px 20px !important; margin:0 0 40px 205px; float:right !important; float:none; width: 505px; clear:right; overflow:auto; background: transparent url(participationback.jpg) repeat-y top left; } #benefits, #requirements{ background:transparent; margin: 40px 0 0 70px; clear:both; overflow:auto; width:640px; background: transparent url(benback.jpg) repeat-y top left; position:relative; } #footer{ text-align:center; padding:40px 0 10px 0; background: transparent url(footback.jpg) top left no-repeat; margin:0 0 0 460px; width: 250px; float:right !important; float:none; overflow:auto; border-bottom:2px solid #fff; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3{ padding:0; margin:0 0 10px 0; text-indent: -15000px; height: 40px; overflow: hidden; } #preamble h3{ background: transparent url(road.jpg) no-repeat left top;} #explanation h3{ background: transparent url(what.jpg) no-repeat left top;} #participation h3{ background: transparent url(participation.jpg) no-repeat left top;} #benefits h3{ background: transparent url(benefits.jpg) no-repeat left top;} #requirements h3{ background: transparent url(requirements.jpg) no-repeat left top;} #preamble p, #explanation p, #participation p, #benefits p, #requirements p{ margin:10px 15px; text-align:justify; } #participation p{ margin:10px 15px 10px 25px; } #participation h3, #benefits h3, #requirements h3{ margin:0; height: 50px; } #participation p.p3{ background:transparent url(participationbottom.jpg) no-repeat bottom left; margin:0; padding:10px 15px 30px 25px; } #benefits p,#requirements p{ margin:10px 15px 10px 25px; } #benefits p.p1,#requirements p.p5{ background:transparent url(benbottom.jpg) no-repeat bottom left; margin:0; padding:10px 15px 30px 25px; } #preamble p{ margin:10px 20px 10px 20px; } #preamble p.p3{ background:transparent url(preamblebottom.jpg) no-repeat bottom left; margin:0; padding:10px 25px 30px 25px; } #preamble h3{ margin:0 0 20px 0; height:50px; } a, a:link, a:visited { background-color:transparent; color:#996; text-decoration:none; font-weight:bold; } a:visited { background-color:transparent; color:#600; } a:hover {text-decoration:underline; color:#600;} #linkList ul { list-style: none; padding: 0; margin: 0; font-size: .9em; letter-spacing:1px; } #linkList ul li { padding: 5px 10px 5px 5px; margin: 0; } #linkList ul li:hover { background: #cc9; color: #333; } #linkList ul li:hover a{ background: #cc9; color: #333; } #linkList #lselect { color: #333; } #linkList ul li a { display: inline; color: #363; font-weight:normal; } #linkList #lselect ul li a { display: block; } #linkList #lselect ul li a.c, #linkList ul li a.c { display: inline; font-size: .8em; color: #363; color: #600; text-transform: none; font-weight:normal; } /* css Zen Garden submission 167 - 'Hoops - Tournament Edition', by David Marshall Jr., http://www.pixelflexmedia.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, David Marshall Jr. */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic html attributes ------------------------------------------------------------------- */ body { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: #6B320E url(bg.gif) repeat-y 50% 0; text-align: center; } p, ul { font-family: arial, verdana, helvetica, sans-serif; font-size: 11px; line-height: 17px; color: #000000; } a:link, a:visited { text-decoration: underline; color: #B52E00; } a:hover, a:active { text-decoration: underline; color: #6B320E; } h1, h2 { display: none; } h3 { width: 323px; height: 37px; } h3 span { display: none; visibility: hidden; } /* main divs ------------------------------------------------------------------------------- */ #container { position: relative; margin: 0 auto; width: 600px; text-align: left; } #intro { width: 600px; } #supportingText { width: 340px; margin: 0px 0px 0px 20px; } #preamble { width: 340px; margin: 0px 0px 0px 20px; } #pageHeader { width: 600px; height: 471px; background: url(main.jpg) no-repeat; } #quickSummary { position: absolute; top: 480px; left: 390px; width: 190px; background: transparent url(h3_thegoods.jpg) no-repeat; border-bottom: 1px solid #FFFFFF; } #footer { font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; text-transform: uppercase; margin: 30px 0px 30px 0px; } #linkList { position: absolute; top: 570px; left: 390px; width: 190px; margin: 0px 30px 0px 0px; } #pageHeader h1, #pageHeader h2 { display: none; } /* text & links ---------------------------------------------------------------------- */ #quickSummary p.p2 { text-indent: 0; font-family: arial, verdana, helvetica, sans-serif; color: #FFFFFF; padding: 7px 12px 7px 12px; margin: 38px 0px 0px 0px; background: #6B320E; border-top: 1px solid #FFFFFF; } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited { text-decoration: underline; color: #FEEC83; font-weight: bold; } #quickSummary p.p2 a:hover, #quickSummary p.p2 a:active { text-decoration: underline; color: #FFFFFF; font-weight: bold; } #quickSummary p.p1 { display: none; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { padding: 0px 0px 0px 0px; margin: 30px 0px 5px 0px; } #preamble h3 { margin: 0px 0px 5px 0px; } #preamble .p1, #explanation .p1, #participation .p1, #benefits .p1, #requirements .p1 { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #footer a:link, #footer a:visited { text-decoration: underline; color: #FFFFFF; background: #6B320E; padding: 2px 16px 2px 16px; margin: 0px 0px 0px 0px; border: 1px solid #FFFFFF; } #footer a:hover, #footer a:active { text-decoration: underline; color: #000000; border: 1px solid #FFFFFF; background: url(li_bg.jpg) no-repeat; } /* linklist on sidebar --------------------------------------------------------------- */ #linkList h3 { width: 190px; height: 37px; padding: 0px 0px 0px 0px; margin: 20px 0px 0px 0px; } #linkList p, #linkList li { font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; text-indent: 0px; } #linkList ul { list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: #6B320E; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } #linkList li { color: #000000; line-height: 12px; padding: 7px 17px 7px 17px; } #linkList li:hover { background: url(li_bg.jpg) no-repeat; } #linkList li a { display: block; border: none; color: #FFFFFF; font-weight: bold; padding: 0px 0px 0px 12px; margin: 0px 0px 0px -12px; background: url(bullet_white.gif) no-repeat 0px 4px; } #linkList li a:hover { color: #000000; background: url(bullet_black.gif) no-repeat 0px 4px; } #linkList li a.c { display: inline; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: none; color: #FEEC83; font-weight: normal; } #linkList li a.c:hover { color: #000000; } #linkList #larchives li, #linkList #lresources li { padding: 7px 0px 7px 0px; } #linkList #larchives li a, #linkList #lresources li a { display: inline; padding: 0px 0px 0px 12px; margin: 0px 0px 0px 5px; background: url(bullet_white.gif) no-repeat 0px 4px; } #linkList #larchives li a:hover, #linkList #lresources li a:hover { background: url(bullet_black.gif) no-repeat 0px 4px; } /* h3 image replacement -------------------------------------------------------------- */ h3.select { background: transparent url(h3_select.jpg) no-repeat; } h3.resources { background: transparent url(h3_resources.jpg) no-repeat; } h3.archives { background: transparent url(h3_archives.jpg) no-repeat; } #preamble h3 { background: url(h3_theroad.gif) no-repeat; margin-top: 0; } #explanation h3 { background: url(h3_sowhat.gif) no-repeat; } #participation h3 { background: url(h3_participation.gif) no-repeat; } #benefits h3 { background: url(h3_benefits.gif) no-repeat; } #requirements h3 { background: url(h3_requirements.gif) no-repeat; }/* css Zen Garden submission 168 - 'Hengarden', by Mr. Khmerang, http://www.khmerang.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Mr. Khmerang */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Chicken Should Smile! * Hengarden is made to celebrate the year of the cock, * for general concern about rights of the innocent chickens * and in fear of Chicken's Revenge (a.k.a the flu, you know what I'm talking about) * but also to * laugh at the growing use of image replacements in * css design and especially at zengarden. */ body { background: #fff url(bodybg.gif) 395px 0 repeat-y; margin: 0; padding: 3px; font: 80%/80% Trebuchet MS, Arial, Helvetica, Sans Serif; } #pageHeader { background: #fff url(pageheaderbg.gif) repeat-x; width: 389px; height: 272px; } h1 { background: url(pageheader.jpg) 33px 22px no-repeat; width: 389px; height: 272px; padding: 0; } h1 span, h2, #quickSummary p, h3 span, p, p.p1 span{ display: none; } h1, h3, p.p1 { margin:0 auto 8px auto; display: block; } h3 { margin-top: 20px; } #quickSummary { position:absolute; left: 420px; top: 40px; background-image: url(quicksummary.gif); background-repeat:no-repeat; width: 138px; height: 83px; } #preamble, #supportingText { width: 389px; text-align:center; } #preamble h3 { background: url(preambleH.gif) no-repeat; width: 289px; height: 41px; } #preamble p.p1 { background: url(preamble.gif) no-repeat; width: 343px; height: 182px; } #explanation h3 { background: url(explanationH.gif) no-repeat; width: 247px; height: 41px; } #explanation p.p1 { background: url(explanation.gif) no-repeat; width: 342px; height: 212px; } #participation h3 { background: url(participationH.gif) no-repeat; width: 171px; height: 41px; } #participation p.p1 { background: url(participation.gif) no-repeat; width: 342px; height: 256px; } #benefits h3 { background: url(benefitsH.gif) no-repeat; width: 130px; height: 41px; } #benefits p.p1 { background: url(benefits.gif) no-repeat; width: 342px; height: 83px; } #requirements h3 { background: url(requirementsH.gif) no-repeat; width: 174px; height: 41px; } #requirements p.p1 { background: url(requirements.gif) no-repeat; width: 342px; height: 313px; } #requirements p.p4 { display: block; background: url(requirementsend.gif) no-repeat; width: 367px; height: 138px; margin-left: 22px; margin-bottom: 60px; text-align: left; } #supportingText { background: url(footer.gif) right bottom no-repeat; text-align: center; } #requirements p.p4 span,#requirements p.p5 span { display: none; } #footer { background-color:#4178E6; padding: 5px; font-weight:bold; } #footer a { color: #fff; } #linkList { position:absolute; left: 395px; top: 140px; width: 189px; } #linkList ul { list-style-type: none; margin: 0; padding: 0; } #linkList ul li { border-bottom: 1px solid #CBDAF8; padding: 6px 15px; color: #555; text-align:center; } #linkList ul li:hover { background-color: #CBDAF8; } #linkList ul li a { text-decoration: none; } #lselect a { color: #4178E6; } #lresources a { color: #82A839; } #larchives a { color: #fa0; } #linkList ul li a:hover { color: #000; } h3.select, h3.resources { width: 189px; height: 40px; display: block; } h3.select { background: url(lselectH.gif); } h3.resources { background: url(lresourcesH.gif); } /* css Zen Garden submission 169 - 'Greece Remembrance', by Pierre-Leo Bourbonnais, http://www.kaligrafy.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Pierre-Leo Bourbonnais */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { background: #30261d; padding: 0px; margin-right: auto; margin-left: auto; margin-bottom: 0px; margin-top: 0px; width: 776px; text-align: center; font: 12px Georgia, Times New Roman, Times, serif; color: #ffffff; } #container { background: repeat-y url(sculptures.jpg); margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; margin-top: 381px; top: 381px; width: 776px; text-align: justify; color: #362F27; line-height: 19px; } #intro { margin: 0px; padding: 0px; width: 589px; background: repeat-y url(content_bkgd.jpg); margin-left: 94px; border-top: 1px none; border-bottom: 1px none; } #pageHeader { position: absolute; top: 0px; background: no-repeat center url(header.jpg); height: 381px; width: 776px; margin: 0px; padding: 0px; margin-left: -94px; right: auto; left: auto; } #supportingText { margin: 0px; padding: 0px; width: 589px; background: repeat-y url(content_bkgd.jpg); margin-left: 94px; border-top: 1px none; border-bottom: 1px none; margin-top: -20px; } #quickSummary { background: no-repeat url(top.jpg); width: 589px; height: 85px; margin: 0px; padding: 0px; } .p1 { text-indent: 0px; padding: 0px; margin: 0px; } .p2, .p3, .p4, .p5 { text-indent: 22px; } h1, h2 { display: none; } h3 span { display: none; } #quickSummary p { display: none; } #quickSummary p.p2 { display: block; width: 156px; margin: 0px; padding: 0px; position: absolute; top: 470px; left: auto; right: auto; margin-left: 415px; text-indent: 0px; text-align: left; vertical-align: middle; font-size: 10px; line-height: 16px; height: 50px; font-style: oblique; } #quickSummary a { padding: 0px; margin: 0px; color: #000000; text-decoration: underline; } #quickSummary a:hover { margin: 0px; padding: 0px; color: #ebdccc; font-style: italic; border-bottom: 1px none; text-decoration: none; } #quickSummary span { margin: 0px; padding: 0px; padding-left: 5px; display: block; } #preamble, #explanation, #participation, #benefits, #requirements { margin: 0px; padding: 0px; width: 405px; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p { margin: 0px; padding: 8px; padding-left: 41px; padding-right: 27px; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { width: 362px; height: 22px; margin: 0px; padding: 0px; margin-bottom: 5px; margin-left: 38px; margin-top: 20px; } #preamble h3 { margin-top: 5px; background: url(h3_preamble.gif) no-repeat; } #explanation h3 { background: url(h3_explanation.gif) no-repeat; } #participation h3 { background: url(h3_participation.gif) no-repeat; } #benefits h3 { background: url(h3_benefits.gif) no-repeat; } #requirements h3 { background: url(h3_requirements.gif) no-repeat; } #preamble { padding-bottom: 20px; } #linkList { position: absolute; width: 139px; margin: 0px; padding: 0px; top: 510px; left: auto; right: auto; font-size: 11px; margin-left: 507px; text-indent: 0px; text-align: right; } #linkList h3 { width: 139px; height: 22px; margin: 0px; padding: 0px; margin-bottom: 5px; margin-left: 0px; margin-top: 20px; padding-right: 2px; } #linkList ul { margin: 0px; padding: 0px; list-style: none; margin-left: 0px; width: 139px; } #linkList li { margin: 0px; padding: 0px; list-style: none; } #linkList a { margin: 0px; padding: 0px; display: block; color: #B82A09; text-decoration: none; text-transform: uppercase; } #linkList a:hover { margin: 0px; padding: 0px; display: block; color: #741600; text-decoration: none; } #lselect h3 { margin-top: 2px; background: url(h3_select.gif) no-repeat; } #larchives h3 { background: url(h3_archives.gif) no-repeat; } #lresources h3 { background: url(h3_resources.gif) no-repeat; } #larchives a, #lresources a { margin: 0px; padding: 0px; display: inline; text-decoration: none; text-transform: none; } #larchives a:hover, #lresources a:hover { margin: 0px; padding: 0px; display: inline; text-decoration: none; text-transform: none; } #linkList a.c { margin: 0px; padding: 0px; display: inline; font-style: italic; color: #754f38; text-decoration: none; text-transform: none; } #linkList a.c:hover { margin: 0px; padding: 0px; display: inline; font-style: italic; color: #462f22; text-decoration: none; text-transform: none; } a { color: #B82A09; text-decoration: none; } a:hover { color: #B82A09; text-decoration: underline; } a:visited { color: #754f38; } #footer { width: 589px; background: no-repeat url(bot.jpg) #30261d; margin: 0px; padding: 0px; margin-bottom: -2px; text-align: center; padding-top: 54px; text-indent: 0px; font: 10px Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; padding-bottom: 17px; } #footer a { color: #362F27; text-decoration: none; text-transform: uppercase; } #footer a:hover { color: #B82A09; text-decoration: none; text-transform: uppercase; } #requirements p.p5 { position: relative; bottom: -35px; width: 589px; text-indent: 0px; text-align: center; font: 10px Verdana, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; } #requirements p.p5 a { color: #5d5144; text-decoration: none; } #requirements p.p5 a:hover { color: #B82A09; text-decoration: none; } #intro acronym { color: #5d5144; font-style: italic; text-decoration: none; border-bottom: none; } #supportingText acronym { color: #5d5144; font-style: italic; text-decoration: none; border-bottom: none; } #linkList acronym { border-bottom: none; text-decoration: none; font-style: oblique; }/* css Zen Garden submission 170 - 'Love is in the Air', by Nele Goetz, http://www.april-design.de/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Nele Goetz */ /* Added: May. 31st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ * {margin: 0; padding: 0} body { background:#3C6FAC url(back.gif) repeat-x; font-size:100.01%; font-family:"trebuchet ms", verdana, sans-serif; color:#2C5079} p {padding:10px 30px 10px 20px; font-size:0.9em; line-height:1.6} a{text-decoration:none} a:link{color:#E5FBBB} a:visited{color:#B8DBFF} a:hover, a:active{color:white} acronym{cursor:help} /* specific divs */ #container{position:relative; min-width:744px} #intro{ height:1%; border-right:1px solid #2B4D70; border-left:1px solid #2B4D70; margin:0 240px 0 0; background:url(back_top.gif)} #pageHeader{ background:url(head.jpg) center no-repeat; height:365px} #pageHeader h1 span{display:none} #pageHeader h2 span{ /*misused for the googbye-grafic*/ color:#3C6FAC; position:absolute; bottom:0px; right:128px; width:112px; height:69px; background:url(bye.gif); font-size:0px; line-height:0px} #supportingText{ border-right:1px solid #2B4D70; border-left:1px solid #2B4D70; margin:0 240px 0 0} #quickSummary{text-align:center} #quickSummary p{ color:#C5E1FF; font-style:italic; padding:0} #quickSummary p.p1{ font-size:1em; margin:30px 10px; width:70%; float:left} #quickSummary p.p2{ float:right; font-size:0.8em; width:20%; margin:3em 10px 0 0; text-align:right} #quickSummary a:link, #quickSummary a:visited{text-decoration:underline; color:#C5E1FF} #quickSummary a:hover, #quickSummary a:active{text-decoration:underline; color:white} #preamble{background:#79A6D4; clear:both} #preamble h3{ height:55px; background:#98AE6D url(preamble.jpg) no-repeat; border-top:1px solid #BDCCA3; border-bottom:1px solid #386496} #preamble h3 span{display:none} #supportingText{background:#79A6D4} #supportingText h3{ height:55px; border-top:1px solid #BDCCA3; border-bottom:1px solid #386496} #supportingText h3 span {display:none} #explanation h3{background: #98AE6D url(about.jpg) no-repeat} #participation h3{background: #98AE6D url(participation.jpg) no-repeat} #benefits h3{background: #98AE6D url(benefits.jpg) no-repeat} #requirements h3{background: #98AE6D url(requirements.jpg) no-repeat} #footer { text-align:left; background:#DE5608; padding:10px 20px; border-top:1px solid #EFAE89} #footer a{ color:#F4A21F; font-size:0.8em} #footer a:visited{color:#992D2A} #footer a:hover{color:white} #linkList{ font:0.8em/1.6 "trebuchet ms", verdana, sans-serif; position:absolute; right:0px; top:0px} #linkList2{width:201px} #linkList h3{ width:201px; height:53px; border-right:1px solid #3D82AD; border-left:1px solid #3D82AD; voice-family:"\"}\""; voice-family:inherit; width: 199px} .dummy{margin: 0} #linkList h3 span{display:none} #linkList h3.select{background:transparent url(select.jpg)} #linkList h3.favorites{background:transparent url(favorites.jpg)} #linkList h3.archives{background:transparent url(archives.jpg)} #linkList h3.resources{background:transparent url(resources.jpg)} #linkList ul{ background:#B7D1ED; border-right:1px solid #3D82AD; border-left:1px solid #3D82AD} #lresources ul{ padding:0 0 41px 0; background:#B7D1ED url(attent.jpg) no-repeat left bottom} #linkList li{ list-style-type:none; display:block; border-bottom:1px solid #3D82AD; color:#3D82AD; padding:7px 0 7px 10px} #linkList li a{ font-weight:bold; display:block; color:white; background:url(heart.gif) no-repeat 0px 55%; padding:0 0 0 15px} #linkList li a:hover{color:#3D82AD; background:url(heart2.gif) no-repeat 0px 55%} #linkList li a:visited{font-weight:normal} #linkList li a.c{ letter-spacing:0.2em; color:#3D82AD; font-size:0.81em; font-weight:normal; display:inline; text-transform:uppercase; background:none; padding:0 0 0 5px} #linkList li a.c:hover{font-weight:bold; background:none} /*This one is dedicated to my little son Jelrik ♥ */ /* css Zen Garden submission 171 - 'Shaolin Yokobue', by Javier Cabrera, http://www.emaginacion.com.ar/hacks/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Javier Cabrera */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Coded and designed by Javier Cabrera (emaginacion) http://www.emaginacion.com.ar/geek (blog). */ body { font: 8pt/12pt georgia, sans-serif; color: #c0c0c0; margin: 0px; } #container { top:0; position: absolute; padding: 0px; left: 50%; margin-left: -277px; width: 595px; background: transparent url(zen-bg.gif) no-repeat; background-position: 0 40px; } p { margin:10px 0 0 0; } a:link { text-decoration: none; color: #fff; } a:visited { font-weight: bold; text-decoration: underline; color: #d4cddc; } a:hover, a:active { text-decoration: underline; color: #fff; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(h1.gif) no-repeat; margin:0 0 0 97px; position:absolute; width: 332px; height: 40px; top:60px; } #pageHeader h1 span { display:none } #pageHeader h2 { position: absolute; background: transparent url(h2.gif) no-repeat; margin: 0 0 0 355px; width: 80px; height: 25px; top:98px; } #pageHeader h2 span { display: none } h3 { margin: 0 0 0 30px; font-weight: bold; font: 13pt Georgia, sans-serif; font-style:italic; padding: 0; } /* Sidebar */ #linkList { position:absolute; top: 920px; left: 390px; height:500px; font: 8pt/11pt arial, sans-serif; } #linkList ul { list-style-type: none; margin-top:5px; } #linkList h3 { color:#fff; } #linkList2 { margin-top:55px; } #lselect a:link.c, #lselect a:visited.c { display: inline; } #lselect a { display: block; } #lresources { background: transparent url(rockbottom.gif) no-repeat; height:250px; width:190px; background-position:28px 0; } /* Content */ .p1 { margin-top:1px; padding-top:30px; } .p5 { text-align:center; color:#FFE1A4; font: 8pt/12pt Arial, sans-serif; margin:47px 0 0 0; width:215px; } #quickSummary { font: 10pt/15pt "Trebuchet MS", sans-serif; margin:400px 0 0 135px; padding-bottom:8px; color: #fff; width: 250px; text-align: left; border-bottom:1px solid #353535; } #quickSummary :first-letter { font: 1.5em/15pt "Georgia", sans-serif; } #preamble { margin: 20px 0 0 148px; width: 230px; } #preamble h3 { position:absolute; background: transparent url(titulo1.gif) no-repeat; margin: 0 0 0 -35px; width: 395px; height: 41px; } #preamble h3 span { display:none; } /* This little guy here ensures that if you want to make the text 100% in mozilla, you will still see the design &*/ #supportingText { width:314px; margin-left:100px; background: transparent url(back.gif) repeat-y; background-position:-78px 0; } #explanation { margin: 20px 0 0 47px; width: 230px; } #explanation h3 { position:absolute; background: transparent url(titulo2.gif) no-repeat; margin: 0 0 0 -30px; width: 145px; height: 41px; } #explanation h3 span { display:none; } #participation { margin: 20px 0 0 47px; width: 230px; } #participation h3 { position:absolute; background: transparent url(titulo3.gif) no-repeat; margin: 0 0 0 -35px; width: 250px; height: 41px; } #participation h3 span { display:none; } #benefits { margin: 20px 0 0 47px; width: 230px; } #benefits h3 { position:absolute; background: transparent url(titulo4.gif) no-repeat; margin: 0 0 0 -35px; width: 250px; height: 41px; } #benefits h3 span { display:none; } #requirements { margin: 20px 0 0 47px; width: 230px; } #requirements h3 { position:absolute; background: transparent url(titulo5.gif) no-repeat; margin: 0 0 0 -35px; width: 250px; height: 41px; } #requirements h3 span { display:none; } #footer { color:#000; height:60px; position:absolute; margin:0 0 0 -15px; background: transparent url(bottom.gif) no-repeat; width:345px; padding:40px 0 30px 134px; } #footer a:link, #footer a:active{ color:#c0c0c0; } #footer a:hover { color:#fff; text-decoration:underline; }/* css Zen Garden submission 172 - 'Blackcomb*75', by Bryan Carichner, http://www.carichner.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Bryan Carichner */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ----- The Design ----- blackcomb*75 - Bryan Carichner (http://www.carichner.com) ----- The Photograph ----- A View of 'Spearhead' taken from across the bowl on the Blackcomb Glacier - Bryan Carichner (Whistler, BC, Canada - February 2004) */ /* ----- BASIC ----- */ html { margin: 0; padding: 0; } body { margin: 0; padding: 0; height: 100%; font: normal 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background: #1D0D00 url(images/BG_body.jpg) repeat-y; } #container { position: absolute; margin: 0; padding: 0; width: 900px; height: 964px; background: url(images/BG_blackcomb.jpg) top left no-repeat; } a:link, a:visited { color: #3F5671; } a:hover { color: #DA8C11; } acronym { font-style: italic; cursor: help; border: none; } /* hidden */ h1 span, h2 span, h3.select span, h3.archives span, h3.resources span, #preamble h3 span, #supportingText h3 span { visibility: hidden; } /* ----- MAIN CONTENT ----- */ #preamble { position: absolute; top: 190px; left: 90px; width: 320px; height: 300px; text-align: center; color: #1D0D00; background: url(images/BG_preamble.gif) no-repeat top; } #preamble h3 { margin: 0; padding: 0; } #preamble .p1 { margin: 0; padding: 25px 10px 10px 10px; } #preamble .p2 { margin: 0; padding: 0px 10px 10px 10px; } #preamble .p3 { margin: 0; padding: 0px 10px 10px 10px; } #supportingText { position: absolute; top: 425px; left: 90px; width: 318px; padding: 0px; margin: 0; text-align: center; color: #1D0D00; background: #FFFFFF; border-left: 1px solid #A4B0C8; border-right: 1px solid #A4B0C8; } /* h3 text-replacing images (text hidden above) */ #explanation h3 { margin: 0; height: 60px; background: url(images/BG_h3exp.gif) no-repeat top center; } #participation h3 { margin: 0; height: 60px; background: url(images/BG_h3par.gif) no-repeat top center; } #benefits h3 { margin: 0; height: 60px; background: url(images/BG_h3ben.gif) no-repeat top center; } #requirements h3 { margin: 0; height: 60px; background: url(images/BG_h3req.gif) no-repeat top center; } #explanation .p1 { margin: 0; padding: 5px 10px 0 10px; } #explanation .p2 { padding: 0 10px 10px 10px; } #participation .p1 { margin: 0; padding: 5px 10px 0 10px; } #participation .p2 { padding: 0 10px 0 10px; } #participation .p3 { padding: 0 10px 10px 10px; } #benefits .p1 { margin: 0; padding: 5px 10px 20px 10px; } #requirements .p1 { margin: 0; padding: 5px 10px 0 10px; } #requirements .p2, #requirements .p3, #requirements .p4, #requirements .p5 { padding: 0 10px 0 10px; } #footer { margin: 0; padding-top: 14px; text-align: center; height: 30px; width: 318px; background: url(images/BG_footer.gif) no-repeat bottom center; } #footer a:link, #footer a:visited { padding: 0px 3px 1px 3px; color: #E2E7EF; border: 1px solid #A4B0C8; text-decoration: none; } #footer a:hover { padding: 0px 3px 1px 3px; color: #3F5671; background: #E2E7EF; border: 1px solid #A4B0C8; } /* ----- MENUS & PROJECT SUMMARY (positioned over maple leaf scrim) -----*/ #container #linkList { position: absolute; left: 435px; top: 275px; width: 145px; text-align: left; } #linkList h3 { width: 145px; height: 26px; margin: 0; } #linkList h3 span { display: none; } /* h3 text-replacing images */ #linkList h3.select { background: url(images/BG_h3select.gif) top left no-repeat; } #linkList h3.archives { background: url(images/BG_h3archives.gif) top left no-repeat; } #linkList h3.resources { background: url(images/BG_h3resources.gif) top left no-repeat; } #linkList h3.favorites { background: url(images/BG_h3favorites.gif) top left no-repeat; } #linkList ul { list-style: none; padding: 0 0 6px 0; margin: 0; line-height: 13px; } #linkList ul li { padding: 3px 0px 3px 0px; margin: 0; font-size: 10px; border-bottom: dotted 1px #A4B0C8; } /* subtle hover effect for friendly browsers */ #lselect li:hover { border-bottom: dotted 1px #3F5671; } #linkList #lselect { font-style:italic; color: #A4B0C8; margin-bottom: 8px; } #linkList #lselect li { padding-top: 6px; } #linkList #lselect a:link, #linkList #lselect a:visited { display: block; font: bold 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #72141A; text-decoration:none; padding: 0px 0px 2px 15px; background: url(images/BG_li.gif) top left no-repeat; } #linkList #lselect a:hover { font: bold 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #DA8C11; text-decoration: none; padding: 0px 0px 2px 15px; background: url(images/BG_li_hover.gif) top left no-repeat; } #linkList #larchives { margin-bottom: 8px; } #linkList #larchives a, #linkList #lresources a, #linkList #larchives a:visited, #linkList #lresources a:visited { display: inline; font: bold 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #3F5671; text-decoration:none; padding: 0px 0px 2px 14px; background: url(images/BG_li_2.gif) no-repeat left; } #linkList #larchives a:hover, #linkList #lresources a:hover { display: inline; font: bold 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #DA8C11; text-decoration:none; padding: 0px 0px 2px 14px; background: url(images/BG_li_2_hover.gif) no-repeat left; } #linkList #lselect a.c, #linkList #lselect a.c:visited { display: inline; margin-bottom: 4px; padding: 0; font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #3F5671; border: 0; text-decoration: none; background: none; } #linkList #lselect a.c:hover { display: inline; padding: 0; font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #DA8C11; border: 0; text-decoration: none; background: none; } #quickSummary { position: absolute; top: 505px; left: 630px; width: 130px; margin: 0; padding: 5px 4px 8px 5px; text-align: left; color: #A4B0C8; font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } #quickSummary a:link, #quickSummary a:visited { color: #3F5671; text-decoration: none; } #quickSummary a:hover { color: #DA8C11; text-decoration: none; } /* ----- Final Touch ----- */ #extraDiv1 { position: absolute; top: 1180px; left: 410px; width: 76px; height: 546px; background: transparent url(images/BG_bc.gif) no-repeat; } /* css Zen Garden submission 173 - 'Red Stars', by Shafiq Rizwan, http://www.1988online.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Shafiq Rizwan */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { font: 8pt/16pt georgia; color: #fffafa; background: #fff url(blossoms.jpg) no-repeat bottom right; margin: 0px; text-align: center; } p { font: 8pt/16pt georgia; margin-top: 0px; text-align: justify; } h3 { margin-bottom: 0px; } a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; } a:visited { font-weight: bold; text-decoration: none; color: #D4CDDC; } a:hover, a:active { text-decoration: underline; color: #9685BA; } #container { margin: 0 auto; width: 619px; background: url(bg.jpg) repeat-y; text-align:left; } #intro { background: url(intro.jpg) no-repeat; } #pageHeader { position:absolute; width:55px; } #pageHeader h1 { background: transparent url(header.gif) no-repeat; text-indent: -5000px; width: 46px; height: 254px; } #pageHeader h1 span { display:none } #pageHeader h2 { text-indent: -5000px; } #pageHeader h2 span { display:none } #quickSummary { position:absolute; margin-top:90px; margin-left:322px; height:90px; width:260px; } #quickSummary p { font: 10px arial; text-align:center; color : #FFF; } #preamble { padding: 205px 0 0 62px; width:335px; } #preamble h3 { text-indent:-5000px; background: url(road.jpg) no-repeat; width:344px; height:50px; } #preamble p { font-style: italic; margin:0 5px 0 30px; } #supportingText { padding-left: 73px; width:330px; } #supportingText p { margin:0 10px 0 20px; } #supportingText h3 { margin:0 0 0 7px; } #explanation, #participation, #benefits, #requirements { margin: 10px 0 0 0; } #explanation h3 { background: url(what.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } #participation h3 { background: url(participation.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } #benefits h3 { background: url(benefits.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } #requirements h3 { background: url(requirements.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } #footer { background: url(footerbg.jpg) no-repeat; text-align: center; padding:10px; height:28px; } #footer a:link, #footer a:visited { margin-right: 20px; } #linkList { position:absolute; top:197px; margin:0 0 0 400px; width:200px; } #linkList2 { font: 10px verdana, sans-serif; background: transparent url(paper-bg.jpg) top left repeat-y; padding: 10px; width: 130px; text-align:left; } #linkList h3.select { background: url(select.jpg) no-repeat; margin: 10px 0px 5px 0px; width: 177px; height: 40px; } #linkList h3.select span { display:none } #linkList h3.archives { background: transparent url(archives.jpg) no-repeat; margin: 25px 0px 5px 0px; width:177px; height: 40px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.jpg) no-repeat; margin: 25px 0px 5px 0px; width:177px; height: 40px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { list-style-type: none; border:1px #761C1C none; width:170px; padding-left:7px; } #linkList #lselect li { height:30px; padding-top:5px; } #linkList #larchives li, #linkList #lresources li { height:15px; padding-top:3px; } #linkList a { display:block; } #linkList a.c { display:inline; font-weight: normal; color: #FFF; border-bottom: 1px #FFF none; } #linkList a.c:hover { text-decoration: none; border-bottom: 1px #FFF dotted; } #linkList li:hover { background: url(lbg.jpg) #8F2323 repeat-x; border:1px #761C1C solid; }/* css Zen Garden submission 174 - 'Simple', by Shawn Chin, http://www.shawnchin.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Shawn Chin */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { text-align:center; padding:0; margin:1px 0 0; font:normal 11px Arial, Helvetica, Sans-serif; color:#666; } a { color:#777; } a:hover { color:#A77749; } #container { text-align:left; background:#FFF url(container_bg.gif) repeat-y top left; width:700px; margin:auto; position:relative; padding:0; } #pageHeader { width:700px; height:80px; background:#666 url(main_title.gif) no-repeat; margin:0; padding:0; } #pageHeader h1,h2 { padding:0; margin:0; display:none; } #quickSummary{ margin:0; padding:0; position:relative; border-top:#FFF 1px solid; width:700px; height:75px; background:#FFF; } #quickSummary p{ margin:0; padding:0; } #quickSummary .p1{ position:absolute; top:0; left:0; width:700px; height:75px; background:#FFF url(quickSummary_main.gif) no-repeat 251px 0; } #quickSummary .p1 span{ display:none; } #quickSummary .p2{ position:absolute; top:0; left:0; width:250px; height:75px; background:url(quickSummary_button.gif) no-repeat top left; } #quickSummary .p2 span{ visibility:hidden; white-space:nowrap; } #quickSummary .p2 a { width:250px; height:37px; float:right; visibility:visible; text-indent:-9000px; overflow:hidden; margin-top:-1.3em; margin-bottom:1.4em; } #preamble { position:relative; border-top:#fff 1px solid; margin:0; padding:0; width:524px; background:#CCC url(preamble_top.gif) no-repeat top left; } #preamble h3{ display:none; margin:0; padding:0; } #preamble .p1{ margin:0; padding:31px 15px 0px 15px; } #supportingText{ width:524px; } #explanation .p1, #participation .p1, #requirements .p1{ margin:0; padding:41px 15px 0px 15px; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p{ margin:0; padding:10px 15px 0px 15px; } #explanation h3, #participation h3, #benefits h3, #requirements h3, #lselect h3, #larchives h3, #lresources h3{ display:none; } #preamble .p3, #explanation .p2, #participation .p3, #requirements .p5{ margin:0; padding:10px 15px 7px 15px; } #benefits .p1{ margin:0; padding:41px 15px 7px 15px; } #explanation{ background:#CCC url(explanation_top.gif) no-repeat top left; } #participation{ background:#CCC url(participation_top.gif) no-repeat top left; } #benefits{ background:#CCC url(benefits_top.gif) no-repeat top left; } #requirements{ background:#CCC url(requirements_top.gif) no-repeat top left; } #footer{ background:#FD9453 url(footer_top.gif) no-repeat top left; padding-top:17px; padding-left:15px; } #linkList { position:absolute; top:156px; left:525px; width:175px; background:#FD9453; border-top:#fff 1px solid; color:#fff; } #linkList a, #footer a{ color:#FFF; text-decoration:none; } #linkList a:hover, #footer a:hover{ color:#FCD2B8; } #lselect{ background:#FD9453 url(lselect_top.gif) no-repeat top left; padding:29px 0 0 0; } #larchives{ background:#FD9453 url(larchives_top.gif) no-repeat top left; padding:39px 0 0 0; } #lresources{ background:#FD9453 url(lresources_top.gif) no-repeat top left; padding:39px 0 0 0; } #lselect ul, #larchives ul, #lresources ul{ margin:0; padding:0 15px 5px 15px; } #lselect li, #larchives li, #lresources li{ padding: 0 0 5px 15px; margin:0; list-style-type:none; background:transparent url(bullet2.gif) no-repeat 0 4px; } #extraDiv1{ margin:auto; width:700px; height:9px; background:#fff url(extradiv1_bg.gif) no-repeat top left; } /* css Zen Garden submission 175 - 'Business Style', by Gunta Klavina, http://www.klavina.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Gunta Klavina */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { margin: 0; padding: 0; color: #333; font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; background: #E2EBED; text-align: center; } a { color: #307082; } a:hover { color: #D60808; } acronym { border: none; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #lresources h3.resources span, #larchives h3.archives span, #lselect h3.select { display:none; } #container { margin: 0 auto; width: 724px; position: relative; background: #fff; padding: 0 10px 0 10px; text-align: left; } * html #container { width: 744px; w\idth: 724px; } #pageHeader { position: absolute; top: 25px; left: 40px; } h1 { background: url("logo.gif"); width: 156px; height: 25px; overflow: hidden; margin: 0; } h1 span { display: none; } h2 { font-size: 12px; margin: 0; } #quickSummary { padding-top: 85px; } #quickSummary .p2 { font-size: 12px; position: absolute; top: 65px; right: 20px; margin: 0; } #container #intro #quickSummary .p1 { font-size: 11px; height: 171px; background: url("background.jpg") no-repeat; margin: 0; width: 724px; color: #fff; font: 12px/150% Trebuchet MS; } #container #intro #quickSummary .p1 span { padding: 30px 530px 0 30px; display: block; margin: 0; font: 12px/150% Trebuchet MS; } #preamble, #supportingText { margin: 0 20px 0 243px; } #supportingText p, #preamble p { line-height: 150%; margin: 10px 0 10px 0; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { width: 200px; height: 24px; margin: 40px 0 10px 0; } #preamble h3 { background: url("heading01.gif") no-repeat; } #explanation h3 { background: url("heading02.gif") no-repeat; } #participation h3 { background: url("heading03.gif") no-repeat; } #benefits h3 { background: url("heading04.gif") no-repeat; } #requirements h3 { background: url("heading05.gif") no-repeat; } #requirements { margin-bottom: 40px; } #linkList { position: absolute; top: 295px; left: 0; width: 210px; } #lselect ul, #larchives ul, #lresources ul { list-style-type: none; margin: 0; padding: 0 0 0 40px; } #lselect ul li a { text-decoration: underline; display: block; font-size: 13px; } #lselect ul li.c, #lselect ul li a.c { display: inline; font-size: 12px; color: #333; } #lselect ul li a.c { text-decoration: none; } #lselect ul li a.c:hover { color: #D60808; } #lselect ul li { font-size: 12px; border-bottom: 1px solid #E6EEF0; } #linkList #larchives ul li { font-size: 13px; border-bottom: 1px solid #E6EEF0; display: block; padding: 5px 0; } #linkList #lresources ul li { font-size: 13px; border-bottom: 1px solid #E6EEF0; display: block; padding: 5px 0; } #lresources h3.resources { background: url("resources.gif") no-repeat; width: 69px; height: 15px; margin: 30px 0 5px 40px; } #larchives h3.archives { background: url("archives.gif") no-repeat; width: 69px; height: 15px; margin: 30px 0 5px 40px; } #footer { background: url("footer.gif") no-repeat; color: #fff; height: 48px; text-align: right; padding: 0 10px 0 0; line-height: 26px; font-size: 11px; } #footer a { color: #fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } /* css Zen Garden submission 176 - 'Kelmscott', by Bronwen Hodgkinson, http://www.cdevision.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Bronwen Hodgkinson */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body {font:8pt georgia, serif; color:#333; background:#fff url(bground.gif); margin:0; border:1px solid #000;} p {font:8pt georgia, serif; margin:0 0 12px 0; text-align:justify;} h3 {font:bold 12pt georgia, serif; margin-bottom:0;} acronym {font-weight:bold; border-bottom: none;} a:link, a:visited {text-decoration:none; color:#900;} a:hover, a:active {text-decoration:underline; color:#c00;} /* specific divs */ #container {width:604px; padding:0; margin:80px auto 80px 80px; border:2px solid #333; position:relative; background:#f8f8f8 url(bottomBorder.gif) 2px 100% no-repeat;} #intro {background:url(header.gif) no-repeat; width:600px;} #pageHeader {margin-bottom:0; height:30px;} #pageHeader h1, #pageHeader h2 {margin:17px 0 0 0; padding:0; height:30px;} #pageHeader h1 {background:transparent url(h1.gif) no-repeat; width:223px; float:left;} #pageHeader h2 {background:transparent url(h2.gif) no-repeat; width:377px; float:right;} #pageHeader h1 span, #pageHeader h2 span {display:none} #quickSummary {clear:both; margin:0 0 6px 0; width:600px; height:73px; background:url(summary.gif) 0 0 no-repeat;} #quickSummary p.p1 {display:none;} #quickSummary p.p2 {position:absolute; top:129px; left:430px; padding:0; font-size:8pt; z-index:10; font-weight:bold; width:150px; text-align:left;} #preamble {padding:210px 0 0 20px; margin:0 188px 0 0; background:url(mainImage.gif) 13px 0 no-repeat; width:392px;} #preamble h3 {background:url(preAmble.gif) -9px 0 no-repeat; height:41px; width:392px; margin:0; padding:0;} #preamble h3 span {display:none;} #supportingText {margin:0 8px 50px 20px; width:390px;} #supportingText h3 span {display:none;} #supportingText h3 {height:41px; width:392px;} #explanation h3 {background:url(explanation.gif) -9px 0 no-repeat;} #participation h3 {background:url(participation.gif) -9px 0 no-repeat;} #benefits h3 {background:url(benefits.gif) -9px 0 no-repeat;} #requirements h3 {background:url(requirements.gif) -9px 0 no-repeat;} #linkList {width:170px; position:absolute; top:170px; left:422px; background:url(linklistBottom.gif) 0 100% no-repeat; padding-bottom:200px; font:7.5pt georgia, serif; padding-left:7px;} #linkList h3 span {display:none} #linkList h3 {width:165px; height:15px; margin:0;} #linkList h3.select {background:url(select.gif) no-repeat;} #linkList h3.archives {background:url(archives.gif) no-repeat;} #linkList h3.resources {background:url(resources.gif) no-repeat;} #linkList ul {margin:0 0 17px 0; padding:0;} #linkList li {line-height:1.2em; list-style-type:none; display:block; padding-top:5px; margin-left:0;} /* css Zen Garden submission 177 - 'Zen City Morning', by Ray Henry, http://www.reh3.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Ray Henry */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ----------------------------------------------------------------------------------------- Global -------------------------------------------------------------------------------------- */ * {margin:0;padding:0;} /* zero out everything */ body { width:100%; background:#0A3443 url(r3_zc_main_bg.jpg) repeat-y top left; font-family:verdana, arial, sans-serif; } ul, ol {list-style:none;} /* ----------------------------------------------------------------------------------------- Layout Structure -------------------------------------------------------------------------------------- */ #container {width:760px;} #intro, #supportingText { float:left; width:570px; } #linkList { padding:190px 0 0 0; margin:0 0 0 570px; font-size:11px; } * html #linkList {position:absolute;left:0;top:0;} /* For Internet Explorer */ /* ----------------------------------------------------------------------------------------- =intro -------------------------------------------------------------------------------------- */ #pageHeader h1 { width:570px; height:190px; background:url(r3_zc_title.gif) no-repeat top left; text-indent:-5000px; } #pageHeader h2 {display:none;} #quickSummary p {font-size:11px;margin:0;padding:0;} #quickSummary p.p1 { float:left; width:380px; height:178px; background:url(r3_zc_summary.gif) no-repeat top left; text-indent:-5000px; } #quickSummary p.p2 { float:left; width:190px; padding:102px 0 50px 9px; height:76px; background:url(r3_zc_download.gif) no-repeat top left; color:#E6B788; /* start box model to fix main nav in IE 5.5 */ voice-family: "\"}\""; voice-family:inherit; width:181px; padding:102px 0 0 9px; height:76px; /* end box model to fix main nav in IE 5.5 */ } #quickSummary p.p2 a:link, #quickSummary p.p2 a:visited, #quickSummary p.p2 a:active {color:#E6B788;} #quickSummary p.p2 a:hover {color:#F4D3B3;} #preamble { clear:both; width:570px; padding:0 0 20px 0; background:#4A6774 url(r3_zc_road_bg.gif) repeat-x top left; font-size:11px; } #preamble h3 { width:268px; height:45px; background:url(r3_zc_road_title.gif) no-repeat top left; text-indent:-5000px; } #preamble p { margin:12px; color:#CFD9DC; } /* ----------------------------------------------------------------------------------------- =supportingText -------------------------------------------------------------------------------------- */ #supportingText div { padding: 19px 0; background:#DECD95 url(r3_zc_support_bg.gif) repeat-x top left; } #supportingText h3 { float:left; width:190px; text-indent:-5000px; } #supportingText #explanation h3 { height:40px; background:url(r3_zc_what_title.gif) no-repeat top left; } #supportingText #participation h3 { height:28px; background:url(r3_zc_participation_title.gif) no-repeat top left; } #supportingText #benefits h3 { height:26px; background:url(r3_zc_benefits_title.gif) no-repeat top left; } #supportingText #requirements h3 { height:26px; background:url(r3_zc_requirements_title.gif) no-repeat top left; } #supportingText p { margin:0 0 0 190px; padding:0 10px 22px 0; font-size:11px; line-height:16.5px; color:#4D3A33; } #supportingText p a {padding:2px;text-decoration:none;} #supportingText p a:link {color:#C64708;} #supportingText p a:visited {color:#4D3A33;} #supportingText p a:active {color:#C64708;} #supportingText p a:hover {background:#C6B478;color:#fff;} #supportingText div#footer { clear:both; padding:6px 0; background:#555; text-align:center; font-size:10px; } #supportingText div#footer a { margin:5px 15px; padding:5px; } #supportingText div#footer a:link, #supportingText div#footer a:visited, #supportingText div#footer a:active {color:#999;text-decoration:none;} #supportingText div#footer a:hover {background:#777;color:#bbb;} /* ----------------------------------------------------------------------------------------- =linkList -------------------------------------------------------------------------------------- */ #linkList2 { width:180px; padding:0 0 250px 10px; background:url(r3_zc_linklist_bg.gif) no-repeat top left; } #linkList2 h3 { width:180px; height:22px; text-indent:-5000px; } #lselect h3 {background:url(r3_zc_lselect_title.gif) no-repeat top left;} #larchives h3 {background:url(r3_zc_larchives_title.gif) no-repeat top left;} #lresources h3 {background:url(r3_zc_lresources_title.gif) no-repeat top left;} #linkList2 ul { margin:10px 0 20px 0; color:#7FA2B0; } #linkList2 ul li {margin:10px 0 0 0;padding: 1px 0 0 12px;} #lselect ul li {background:url(r3_zc_lselect_bullet.gif) no-repeat top left;} #lselect ul li a:link, #lselect ul li a:visited, #lselect ul li a:active { color:#fff; font-weight:bold; text-decoration:none; } #lselect ul li a:hover {color:#C64708;} #lselect ul li a.c:link, #lselect ul li a.c:visited, #lselect ul li a.c:active, #larchives ul li a:link, #larchives ul li a:visited, #larchives ul li a:active, #lresources ul li a:link, #lresources ul li a:visited, #lresources ul li a:active { color:#7FA2B0; font-weight:normal; } #lselect ul li a.c:hover, #larchives ul li a:hover, #lresources ul li a:hover {color:#C64708;} { color:#7FA2B0; font-weight:normal; } /* ----------------------------------------------------------------------------------------- =Extra Divs -------------------------------------------------------------------------------------- */ #extraDiv1 { position:fixed; left:0; top:0; width:770px; height:184px; background:url(r3_zc_clouds.png) no-repeat top left; } * html #extraDiv1 {display:none;} /* Hide from Internet Explorer */ /* css Zen Garden submission 178 - 'Pinups', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Emiliano Pennisi */ /* Added: July 9th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css Zen Garden - 'Pinups', by Emiliano Pennisi All illustrations and design was made by Emiliano Pennisi, MetroStation Design, for more info visit --> http://www.peamarte.it/02/03.html The image of the first list it has been taken give: Stylegala Bullet Madness list ************************************************************************************/ /* General */ body{ font-family: "Lucida Grande", Georgia, "Times New Roman", Times, serif; font-size: 0.8em; background: #d07b00; text-align: center; margin: 0; } body>#container{ margin-top: -20px; } /* General links */ a:link,a:visited{ color: #000; font-weight: bold; } a:hover{ color: #B74213; } /* Paragraphs */ p{ line-height: 1.3em; margin: 15px 0 0 10px; } acronym { color: #B74213; font-weight: bold; font-size: 10px; border-bottom: 1px dashed #B74213; } h3{ font-size: 12px; } /* Start layout rules */ #preamble h3 span{ display: none; } #preamble h3{ background: url(01.gif); width: 380px; height: 72px; } /* Images replacement group */ #explanation h3 span{ display: none; } #explanation h3{ background: url(02.gif); width: 380px; height: 60px; } #participation h3 span{ display: none; } #participation h3{ background: url(03.gif); width: 380px; height: 60px; } #benefits h3 span{ display: none; } #benefits h3{ background: url(04.gif); width: 380px; height: 60px; } #requirements h3 span{ display: none; } #requirements h3{ background: url(05.gif); width: 380px; height: 60px; } /* Container */ #container{ position: relative; width: 700px; margin-left: auto; margin-right: auto; margin-top: -10px; } #quickSummary { position: absolute; top: 320px; left: 44%; font-size: 10px; font-weight: bold; text-transform: uppercase; } /* Child Selector - compliant browser */ #intro>#pageHeader{ width: 700px; } #pageHeader{ background: url(head.jpg); width: 690px; height: 356px; } #pageHeader h1 span,#pageHeader h2 span,#quickSummary .p1 span{ display: none; } #preamble,#supportingText{ text-align: left; padding: 10px; } #preamble{ background: #ecca99; width: 408px; margin: -20px 0 0 214px; voice-family: "\"}\""; voice-family: inherit; width: 388px; } /* Child Selector - compliant browser */ #intro>#preamble{ margin: 0px 0 0 248px; } #supportingText{ background: #ecca99; width: 408px; margin: -10px 0 0 214px; voice-family: "\"}\""; voice-family: inherit; width: 388px; } /* Child Selector - compliant browser */ #container>#supportingText{ background: #ecca99; width: 388px; margin: -10px 0 0 248px; } #larchives li a, #lresources li a { display: inline; font-weight: normal; font-size: 9px; line-height: 15px; padding: 0; margin: 0; text-transform: uppercase; } /* Navigation rules */ #linkList{ position: absolute; top: 350px; /* bottom: 0;*/ left: 46px; font-size: 10px; background: #ecca99; width: 200px; background: #ecca99 url("bottom_linklist.gif") no-repeat left bottom; padding-bottom: 24px; } /* Child Selector - compliant browser */ #container>#linkList{ left: 41px; } #linkList ul{ text-align: left; list-style: url(list.png); } #linkList a{ text-decoration: none; } #linkList li { margin: 0 0 5px -10px; border-bottom: 1px solid #ebab6b; background: #ecca99; width: 150px; padding-bottom: 5px; } #lselect li a { text-transform: uppercase; font-size: 11px; } #lselect li a:hover{ color: #d07b00; } #lselect .c { text-transform: capitalize; font-size: 10px; } #lselect a { display: block; font-weight: bold; } #lselect a.c { display: inline; font-weight: bold; color: #B74213; } #larchives ul li,#lresources ul li{ border-bottom: none; } #larchives ul,#lresources ul{ list-style: url(star_blt.png); } #larchives ul li,#lresources ul li{ margin: 0 0 -5px -10px; } #larchives ul a,#lresources ul a{ color: #000; font-weight: bold; } h3.select{ color: #ecca99; background: url(bgh3sel.gif); height: 14px; text-align: left; padding: 5px; } h3.archives,h3.resources{ color: #ECCA99; background: url(bgh3.gif); height: 14px; text-align: left; padding: 5px; border-bottom: none; } /*Footer*/ #footer{ background: url(footer.gif); line-height: 45px; height: 45px; margin: 30px -10px -10px -10px; padding: 0 10px 0 0; font-weight: bold; text-align: right; } #footer a{ text-transform: uppercase; font-size: 9px; color: #EFECDE; text-decoration: none; } /* End code */ /* css Zen Garden submission 179 - 'Vin Rouge', by Thorsten Bopp, http://www.bopp-medien.de/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Thorsten Bopp */ /* Added: September 1st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* tested with IE5+/Win, Mozilla, IE5/Mac, Safari, Opera8/Win */ /* colors wine red: #9E2E2F dark brown: #541D1D light yellow:#F7F5D9 link: #EA907F */ body { background: #371212 url(background.gif) top repeat-x; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #F7F5D9; font-size: 0.75em; line-height: 1.6em; padding: 0; margin: 0; text-align: center; } /* fonts ------------------------------------------------------------------------- */ a:link {color: #EA907F;text-decoration: none;} a:visited {color: #EA907F;text-decoration: none;} a:hover {color: #F7F5D9;text-decoration: underline;} p, h1, h2, h3 {margin: 0; padding: 0;} abbr, acronym { text-decoration: none; border-bottom: 1px dotted #F7F5D9; cursor: help; } /* container ------------------------------------------------------------------- */ div#container { background: #000000 url(background_header.gif) top center no-repeat; width: 760px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: -50px; padding: 0; text-align: left; } /* intro ------------------------------------------------------------------- */ div#intro { width: 580px; margin: 0; padding: 0; } div#pageHeader { display: none; } div#quickSummary { width: 260px; height: 20px; padding: 220px 0 0 0; margin: 0 0 30px 310px; color: #9E2E2F; } div#quickSummary p.p1 { display: none; } /* preamble ------------------------------------------------------------------- */ div#preamble { background: url(content_boxes_middle_preamble.gif) repeat-y; width: 375px; margin-left: 205px; } div#preamble h3 { background: url(headline_preamble.gif) top left no-repeat; height: 85px; } div#preamble h3 span { display: none; } div#preamble p { padding: 0 10px 10px 20px; } div#preamble p.p1 { margin-top: -25px; } div#preamble p.p3 { background: url(content_boxes_bottom_preamble.gif) bottom left no-repeat; padding-bottom: 65px; /* for IE5 */ margin-bottom: 0px; } /* supportingText ------------------------------------------------------------------- */ div#supportingText { width: 580px; margin: 0 0 50px 0; padding: 0; } div#explanation, div#participation, div#benefits, div#requirements { background: url(content_boxes_middle.gif) repeat-y; width: 550px; margin-left: 30px; } div#explanation p, div#participation p, div#benefits p, div#requirements p { padding: 0 10px 10px 20px; } div#explanation p.p1, div#participation p.p1, div#benefits p.p1, div#requirements p.p1 { margin-top: -25px; } div#explanation p.p2, div#participation p.p3, div#benefits p.p1, div#requirements p.p5 { background: url(content_boxes_bottom.gif) bottom left no-repeat; padding-bottom: 65px; /* for IE5 */ margin-bottom: 0px; } div#explanation h3 { background: url(headline_explanation.gif) top left no-repeat; } div#participation h3 { background: url(headline_participation.gif) top left no-repeat; } div#benefits h3 { background: url(headline_benefits.gif) top left no-repeat; } div#requirements h3 { background: url(headline_requirements.gif) top left no-repeat; } div#explanation h3, div#participation h3, div#benefits h3, div#requirements h3 { height: 85px; } div#explanation h3 span, div#participation h3 span, div#benefits h3 span, div#requirements h3 span { display: none; } /* footer ------------------------------------------------------------------- */ div#footer { width: 425px; height: 40px; margin-left: 155px; text-align: right; font-size: 0.9em; padding-top: 20px; } div#footer a:link {color: #9E2E2F;} div#footer a:visited {color: #9E2E2F;} div#footer a:hover {color: #F7F5D9;} /* linkList ------------------------------------------------------------------- */ div#linkList { position: absolute; left:auto; right:auto; top:290px; width: 155px; margin-left: 595px; padding: 0; font-size: 0.9em; line-height: 1.6em; color: #9E2E2F; } ul { list-style: none; background: url(marginal_boxes_bottom.gif) bottom left no-repeat; margin: 5px 0 0 0; padding: 0 0 45px 0; } li { margin-left: 0; padding: 0 10px 5px 15px; } div#lselect li { background: url(li_element.gif) bottom center no-repeat; padding: 0 10px 25px 15px; } div#lselect a { display: block; font-weight: bold; } div#lselect a.c { display: inline; font-weight: normal; } div#lselect, div#larchives, div#lresources { background: url(marginal_boxes_middle.gif) repeat-y; width: 155px; } div#lselect h3 { background: url(headline_select.gif) top left no-repeat; } div#larchives h3 { background: url(headline_archives.gif) top left no-repeat; } div#lresources h3 { background: url(headline_resources.gif) top left no-repeat; } div#lselect h3, div#larchives h3, div#lresources h3 { height: 35px; } div#lresources h3 span, div#lselect h3 span, div#larchives h3 span { display: none; } /* extraDivs ------------------------------------------------------------------- */ div#extraDiv1, div#extraDiv2, div#extraDiv3, div#extraDiv4, div#extraDiv5, div#extraDiv6 { display: none; }/* css Zen Garden submission 180 - 'Vertigo', by Antonio Cella, http://www.digitalink.it/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Antonio Cella */ /* Added: September 1st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* GENERAL STYLES */ body { margin: 0; padding: 0; background: url(bck.jpg) no-repeat top left; } h1, h2{ margin: 0; padding: 0; } h3 { margin: 3px 0 3px 0; padding: 0; font-size: 17px; font-weight: 500; background: none; } p { margin: 2px 0; } a:link { font-weight: bold; text-decoration: underline; color: #000; } a:visited { font-weight: bold; text-decoration: underline; color: #000; } a:hover, a:active { text-decoration: underline; font-weight: bold; text-decoration: underline; color: #333; background: #ccc; } ul { margin: 0; padding: 0; list-style: none; } /* MAIN DIV STYLES*/ #container { margin: 0 0 20px 0; padding:0; background: url(bck2.jpg) no-repeat 150px 0; } /* CLASS STYLES */ .p1 { text-indent: 33px; } .p5 { margin-top: 15px; width: 300px; text-align: left; } .select { margin: 3px 0 3px 0; padding: 0; font-size: 17px; font-weight: 500; background: none; } /* ID STYLES */ #intro { margin: 0; padding: 0; } #pageHeader { margin: 0; padding: 0; } #quickSummary { text-align: justify; padding: 100px 0 0 150px; width: 550px; font-family: "lucida grande", verdana, tahoma, arial; font-size: xx-small; voice-family: "\"}\""; voice-family:inherit; font-size: x-small; width: 400px; } html>#quickSummary { font-size: x-small; width: 400px; } #preamble { text-align: justify; padding: 10px 0 0 150px; width: 550px; font-family: "lucida grande", verdana, tahoma, arial; font-size: xx-small; voice-family: "\"}\""; voice-family:inherit; font-size: x-small; width: 400px; } html>#preable { font-size: x-small; width: 400px; } #preamble h3, #explanation h3, #participation h3, #benefits h3, #requirements h3 { margin: 8px 0 3px 0; padding: 3px 0 0 0; font-size: 17px; font-weight: 500; background: url(piuma.gif) no-repeat top left; text-indent: 33px; } #supportingText { text-align: justify; padding: 0 0 0 150px; width: 550px; font-family: "lucida grande", verdana, tahoma, arial; font-size: xx-small; voice-family: "\"}\""; voice-family:inherit; font-size: x-small; width: 400px; } html>#supportingText { font-size: x-small; width: 400px; } #linkList { top: 170px; margin-left: 588px; position: absolute; text-align: right; font-family: "lucida grande", verdana, tahoma, arial; font-size: xx-small; width: 198px; padding: 0 12px; voice-family: "\"}\""; voice-family:inherit; font-size: x-small; width: 174px; } html>#linkList { font-size: x-small; width: 174px; } #linkList a:link { font-weight: normal; text-decoration: none; color: #000; } #linkList a:visited { font-weight: normal; text-decoration: none; color: #000; } #linkList a:hover, #linkList a:active { font-weight: normal; text-decoration: none; color: #000; } #larchives, #lresources { margin-top: 10px; } #extraDiv1 { top: 0; left: 265px; background: url(title2.jpg) no-repeat top left; position: absolute; width: 143px; height: 100px; } #footer { text-align: center; margin-top: 20px; } #footer a:link { width: 40px; padding: 20px 15px 0 10px; font-weight: bold; text-decoration: none; color: #000; } #footer a:visited { width: 40px; padding: 20px 15px 0 10px; font-weight: bold; text-decoration: none; color: #000; } #footer a:hover, #footer a:active { width: 40px; padding: 20px 15px 2px 10px; font-weight: bold; text-decoration: none; color: #333; background: #fff url(svirgolata.gif) no-repeat -2px 10px ; } /* OTHER STYLES */ h1 span { margin: 0; padding: 0; display: none; } h2 span { margin: 0; padding: 0; display: none; } /* css Zen Garden submission 181 - 'Pretty in Pink', by Jordi Romkema, http://www.jor-on.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Jordi Romkema */ /* Added: September 1st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ html, body { background: url(images/bg.gif) left top repeat-y #F06; background-attachment: fixed; margin: 0; padding: 0; font-family: "Trebuchet MS", Tahoma, Lucida Sans, Arial, Verdana, Helvetica, sans-serif; } abbr, acronym { border-bottom: 1px dotted #FFE6F0; } div#pageHeader h1, div#pageHeader h2, div#linkList h3 { display: none; } div#container { display: block; } div#intro { display: block; } @media screen { div#pageHeader, div#quickSummary { position: fixed; } * html div#pageHeader, * html div#quickSummary { position: absolute; } } div#pageHeader { left: 0; top: 0; width: 200px; height: 320px; background: url(images/logo.gif) left top no-repeat; } div#quickSummary { left: 0; top: 250px; width: 185px; color: #FFE6F0; font-size: 12px; padding: 5px; padding-right: 10px; } div#quickSummary a { font-weight: bold; color: #FFE6F0; } div#quickSummary a:hover { color: #000; } div#preamble, div#supportingText { margin-left: 463px; padding: 10px; padding-left: 20px; padding-bottom: 0; } div#preamble h3, div#supportingText h3 { display: block; background: url(images/hbg.gif) left top repeat #000; margin: 0; padding: 0; padding-left: 20px; color: #FFF; font-size: 24px; line-height: 50px; text-transform: lowercase; } div#preamble p, div#supportingText p { font-size: 14px; color: #000; line-height: 1.5em; } div#preamble a, div#supportingText a { color: #000; } div#preamble a:hover, div#supportingText a:hover { color: #FFF; } div#preamble abbr, div#preamble acronym, div#supportingText abbr, div#supportingText acronym { border-bottom: 1px dotted #000; } div#footer { display: block; height: 20px; background: url(images/hbg.gif) left top repeat #000; padding: 3px; font-size: 12px; line-height: 20px; text-align: center; margin-bottom: 10px; } div#footer a { color: #FFF; font-weight: bold; } div#footer a:hover { color: #000; } div#linkList { position: absolute; left: 200px; top: 0px; width: 263px; font-family: Baskerville, Georgia, Garamond, Times New Roman, serif; } div#linkList ul { list-style: none; padding: 0; margin: 0; } div#linkList ul { list-style: none; } div#linkList ul li { border-bottom: 1px solid #CCC; } div#linkList ul li a { display: block; padding: 5px; padding-left: 20px; padding-right: 20px; font-weight: bold; font-size: 12px; color: #F06; text-transform: uppercase; text-decoration: none; } div#linkList ul li a:hover { background-color: #000; color: #FFF; } div#linkList div#lselect ul li { padding: 5px; padding-left: 20px; padding-right: 20px; font-size: 10px; } div#linkList div#lselect ul li a { padding: 0; font-size: 12px; } div#linkList div#lselect ul li a:hover { color: #000; background-color: #FFF; } div#linkList div#lselect ul li a.c { display: inline; text-transform: none; font-size: 10px; color: #000; } div#linkList div#lselect ul li a.c:hover { text-decoration: underline; } div#linkList div#lselect, div#linkList div#larchives, div#linkList div#lresources { display: block; margin-top: 10px; } div#linkList div#lselect h3, div#linkList div#larchives h3, div#linkList div#lresources h3 { display: block; height: 35px; width: 100%; margin: 0; padding: 0; } div#linkList div#lselect h3 span, div#linkList div#larchives h3 span, div#linkList div#lresources h3 span { display: none; } div#linkList div#lselect h3 { background: url(images/ll_selectadesign.gif) left top no-repeat; } div#linkList div#larchives h3 { background: url(images/ll_archives.gif) left top no-repeat; } div#linkList div#lresources h3 { background: url(images/ll_resources.gif) left top no-repeat; }/* css Zen Garden submission 182 - '45 RPM', by Thomas Michaud, http://www.ivfx.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Thomas Michaud */ /* Added: September 1st, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* --HTML and BODY Information-- */ html { margin: 0px; padding: 0px; } body { font-family: "Trebuchet MS", "Times New Roman", serif; font-size: 12px; color: #83986D; background: #E0E8B6 url(sidegraphic.gif) no-repeat fixed; margin: 0px; padding: 0px; line-height: 17px; font-weight: normal; } /* --Typography and Links-- */ p { text-align: justify; width: 380px; margin: 0px; } h1,h2,h3 { margin: 0px; } acronym { color: #706D32; font-weight: bold; font-style: oblique; border: 0px; } a:link { color: #83986d; text-decoration: none; font-weight: bold; } a:visited{ color: #83986d; text-decoration: none; } a:hover, a:active { color: #DB7762; border-bottom: 1px dotted #e6ad6c; } /*End Links*/ /* --Container-- */ #container { width: 560px; margin-left: 100px; padding-left: 5px; } #quickSummary{ padding: 0px 0px 0px 5px; margin: 0px 1px 10px 0px; background-image: url(bar.gif); background-repeat: no-repeat; width: 325px; height: 30px; } /* --Hide the Text for Logo-- */ #pageHeader h1 span, h2 span { display: none; } /* --Hide quicksummary Text-- */ #quickSummary .p1 span{ display: none; } #quickSummary .p2 { text-transform: uppercase; font-size: 12px; } #pageHeader { background-image: url(preamble.gif); background-repeat: no-repeat; height: 455px; width: 552px; margin: 0px; padding: 0px; } /* --Hide Header3 Text for image replacement-- */ #preamble h3 span { display: none; } #explanation h3 span { display: none; } #participation h3 span { display: none; } #benefits h3 span { display: none; } #requirements h3 span { display: none; } /* --Image Replacement for each h3 subject-- */ #preamble h3 { background-image: url(01.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 400px; } #explanation h3 { background-image: url(02.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 400px; } #participation h3 { background-image: url(03.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } #benefits h3 { background-image: url(04.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } #requirements h3 { background-image: url(05.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } /* --Link Menu Position on Right-- */ #linkList { position: absolute; top: 300px; margin-left: 400px; width:240px; } #linkList a{ display: inline; } #linkList2 { font-size: 12px; padding: 10px; margin-top: 150px; width:240px; } #linkList h3.select { background: url(playlist.gif) no-repeat top left; margin: 0px 0px 5px 0px; width: 195px; height: 30px; } #linkList h3.select span { display:none } #linkList h3.archives { background: url(goldenoldies.gif) no-repeat top left; margin: 15px 0px 5px 0px; width: 195px; height: 30px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: url(resources.gif) no-repeat top left; margin: 15px 0px 5px 0px; width: 195px; height: 30px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; } #linkList li { line-height: 2ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } #linkList li a:link { color: #83986D; } #linkList li a:hover { color: #706D32; } #linkList li a:visited { color: #B6BB68; } #linkList li a.c{ color: #DB7762; font-size: 12px; font-weight: normal; } /* --Footer Information to Close everything out-- */ #footer { background-image: url(footer.gif); background-repeat: no-repeat; background-position: left top; height: 100px; width: 400px; margin: 10px 35px 10px; text-align: center; } #footer a { cursor: help; font: 0.8em "Trebuchet MS", "Times New Roman", serif; text-transform: uppercase; color: #83986D; font-weight: bold; } #footer a:hover { color: #DB7762; border: 0px; font-weight: bold; } /* --Fini-- */ /* css Zen Garden submission 184 - 'Peace of Mind', by Carlos Varela, http://www.carlosvarela.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Carlos Varela */ /* Added: September 16th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ html { min-width:750px; } body { font:11px/32px Georgia, 'Times New Roman', Times, serif; color:#28780A; text-align:center; background:#fff url(bg.gif) repeat-x; margin:0; padding:0; } a,a:link,a:visited,a:active { text-decoration:none; color:#5EA936; text-transform:uppercase; font-weight:700; } a:hover { color:#ABD550; } acronym { cursor:help; border-bottom:1px dotted #5EA936; color:#ABD550; font-weight:600; letter-spacing:1px; text-transform:uppercase; } h1,h2,h3,ul ,li { margin:0; padding:0; } li { list-style:none; } p { line-height:1.5em; margin:0; padding:5px 0 0 12px; } #benefits h3 { background:url(benefits.gif) no-repeat; } #container { width:750px; height:1500px; background:url(girl.jpg) top right no-repeat; text-align:left; position:relative; margin:0 auto; padding:0; } #explanation h3 { background:url(sowhat.gif) no-repeat; } #explanation,#participation,#benefits { background:transparent url(bg_text.jpg) left bottom no-repeat; margin:0 0 50px 0; padding:0; } #footer { text-align:center; height:50px; background:url(footer_bg.png) top right no-repeat; margin:0; padding:0 0 0 15px; font-family: 'Times New Roman', Times, serif; letter-spacing: 1.5px; font-size: 12px; } #footer a { text-transform:uppercase; color:#96CB18 } #footer a:hover { color: #99CC00 } #intro { text-align:center; } #larchives h3 { background:url(archives.gif) no-repeat; } #linkList { position:absolute; width:255px; left:444px; top:581px; margin:0; padding:0; } #linkList ul { text-align:left; list-style:none; } #lresources h3 { background:url(resources.gif) no-repeat; } #lselect .c { text-transform:capitalize; font-size:10px; line-height:11px; } #lselect a { display:block; } #lselect a.c { display:inline; line-height:5px; margin:0; padding:0; } #lselect h3 { background:url(select.gif) no-repeat; } #lselect li a { text-transform:uppercase; font-size:11.5px; line-height:13px; font-weight:bold; background:url(bg_li.gif); margin:0; font-family:Georgia, 'Times New Roman', Times, serif; color: #96CB18 } #lselect li a:hover { color:#CEC81A; } #lselect li,#lresources li,#larchives li { background:url(bg_li.gif); margin:0 0 1px; padding:8px 0 0 10px; } #lselect,#larchives,#lresoucers { margin:0 0 50px; } #larchives li a, #lresources li a { text-transform: lowercase; font-size: 11px; font-family:Georgia, 'Times New Roman', Times, serif; color: #96CB18 } #pageHeader { position:absolute; height:300px; width:500px; background:transparent url(title.gif) top right no-repeat; left:0; top:16px; z-index:10; margin:0; padding:0; } #pageHeader span,#preamble h3 span,#explanation h3 span,#participation h3 span,#benefits h3 span,#requirements h3 span,#lselect h3 span,#larchives h3 span,#lresources h3 span,#extradiv3,#extraDiv4,#extraDiv5,#extraDiv6 { display:none; } #participation h3 { background:url(participation.gif) no-repeat; } #preamble { position:absolute; top:270px; left:12px; text-align:justify; width:390px; background:transparent url(bg_text.jpg) left bottom no-repeat; margin:0 0 50px; padding:0; height: 351px; } #preamble h3 { background:url(theroad.gif) no-repeat; } #preamble h3,#explanation h3,#participation h3,#benefits h3,#requirements h3,#lselect h3 ,#larchives h3,#lresources h3 { width:380px; height:60px; } #preamble p,#explanation p,#participation p,#benefits p,#requirements p { text-align:justify; font:12px/22px Georgia, 'Times New Roman', Times, serif; margin:0; padding:10px 0 0 35px; } #quickSummary { position:absolute; width:300px; height:250px; background:url(quicksummary_bg.gif) no-repeat; font-style:italic; font-size:12px; left:421px; top:325px; text-align:center; } #quickSummary .p1 { text-indent:-9999px; height:200px; display:none; margin:0; padding:0; } #quickSummary .p2 { background:transparent; font-style:normal; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:10px; margin:210px 0 0; padding:0; } #requirements { background:transparent url(bg_text.jpg) left bottom no-repeat; margin:0; padding:0; } #requirements .p5 { height:200px; background:url(flower.jpg) center no-repeat; text-align:center; margin:0; padding:135px 0 0; } #requirements h3 { background:url(requirements.gif) no-repeat; } #supportingText { position:absolute; width:390px; float:left; left:13px; top:641px; margin:0 70px 0 0; padding:0; } #extraDiv1 { position:absolute; background:url(leaves.jpg) no-repeat; height:242px; width:332px; left:666px; /* 6 6 6 the number of the div! */ top:1641px; } #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none } /* css Zen Garden submission 185 - 'Manhattan Edition', by TheOm3ga, http://www.theom3ga.tk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, TheOm3ga */ /* Added: September 16th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ margin: 0; padding: 0; background-color: #0D0C0D; background-image:url(fondo.gif); background-repeat:repeat-x; background-position:7px 0; color: white; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } #container{ width:759px; margin: 0; padding: 0; } #pageHeader{ background-image: url(top.jpg); background-repeat: no-repeat; background-position: top left; width: 759px; height: 432px; margin: 0; padding: 0; } #quickSummary{ position: absolute; top: 437px; left: 565px; font-family: Tahoma, Arial, Helvetica, sans-serif; color: white; padding-bottom: 10px; background-image:url(panel_azul_bajo.gif); background-repeat:no-repeat; background-position:bottom; } #quickSummary p.p1{ background-image:url(panel_naranja_medio.gif); width: 161px; min-height: 86px; margin-bottom: 0px; padding-bottom: 0px; } #quickSummary p.p1 span{ background-image:url(panel_naranja_top.gif); background-position:top; background-repeat:no-repeat; } #quickSummary p.p1 span, #quickSummary p.p2 span{ margin: 0px; padding-left: 35px; padding-top: 9px; padding-right: 10px; display: block; } #quickSummary p.p2{ margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; background-image:url(panel_azul_medio.gif); width: 161px; min-height: 39px; } #quickSummary p.p2 span{ padding-top: 24px; background-image:url(panel_naranja_bottom.gif); background-repeat:no-repeat; background-position:top; min-height: 24px; } #quickSummary a{ color: white; } #linkList{ position: absolute; left: 565px; /*top:600px;*/ /*top: 56.5em; /* top for fonts @ 10px */ top: 60.6em; /* top for fonts @ 11px */ float:right; width: 159px; background-image:url(panel3_top.gif); background-position:top; background-repeat: no-repeat; } #linkList2{ position:relative; top: 10px; background-image:url(panel3_med.gif); } #lresources{ background-image:url(panel3_bot.gif); background-repeat:no-repeat; background-position:bottom; } #linkList h3{ margin-top: 0; margin-left: 10px; margin-bottom: 0px; padding: 0; font-size: 12px; } #linkList a{ color: white; } #linkList acronym, #quickSummary acronym{ border-bottom-color: white; } #linkList ul{ margin-top: 3px; margin-left: 0px; padding-left: 25px; padding-bottom: 5px; background-image:url(divizor.gif); background-repeat:no-repeat; background-position:bottom center; } li{ margin-bottom: 5px; } #lresources ul{ background-image: none; } #footer{ width: 558px; text-align: center; margin-bottom: 30px; } #pageHeader h1{ display: none; } #pageHeader h2{ display: none; } #preamble h3{ background-image:url(theRoadTo.jpg); } #explanation h3{ background-image:url(soWhatIs.jpg); } #participation h3{ background-image:url(participation.jpg); } #benefits h3{ background-image:url(benefits.jpg); } #requirements h3{ background-image:url(requirements.jpg); } #preamble h3, #supportingText h3{ margin: 0; padding: 0; width: 558px; height: 38px; } #preamble h3 span, #supportingText h3 span{ display: none; } #preamble{ margin-top: 6px; } #preamble, #explanation, #participation, #benefits, #requirements{ position: relative; display: block; left: 4px; background-image: url(fondoParagraphBottom.gif); background-position:bottom; background-repeat:no-repeat; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; width: 558px; padding-bottom: 29px; } #preamble p, #explanation p, #participation p, #benefits p, #requirements p{ margin-top: 0px; margin-bottom: 0px; padding-left: 26px; padding-right: 35px; padding-bottom: 10px; background-image:url(fondoParagraph1.gif); background-repeat:repeat-y; } a{ color: #666666; font-weight: bold; text-decoration: none; } a:hover{ text-decoration: underline; } acronym{ font-style:italic; border-bottom: 1px dotted #666666; } #benefits p{ padding-bottom: 0px; }/* css Zen Garden submission 186 - 'Floral Simplicity', by Mani Sheriar, http://www.manisheriar.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Mani Sheriar */ /* Added: November 10th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin:0; padding:0; } body { background:#cadeb9 url(zenGarden.gif) no-repeat top left; background-attachment:fixed; padding:14px 20px 0 73px; margin:0; } p { margin:12px 0; } #container { position:absolute; width:700px; margin:0; padding:0; background:transparent url(lines.gif) repeat-y top left; } #intro { position:relative; text-align:left; background:transparent url(pink.jpg) no-repeat top left; width:335px; font:normal 13px/18px arial; color:#333; padding:150px 75px 0 75px; } #pageHeader { display:none; } #quickSummary { } #quickSummary p.p1 { color:#7CAF6B; font-style:italic; font-size:14px; padding-top:0 !important; padding-top:12px; } #quickSummary p.p2 { padding-left:20px; background:transparent url(download.gif) no-repeat top left; color:#C99AAD; } #quickSummary p.p2 a { color:#C99AAD; } #quickSummary p.p2 a:hover { color:#fff; text-decoration:none; background-color:#E2C0CE; } #preamble { margin-top:24px; color:#999; } h3 span { display:none; } #preamble h3 { width:260px; height:16px; background:url(enlightenment.gif) no-repeat; } #supportingText { position:relative; font:normal 13px/18px arial; color:#999; width:335px; margin-left:75px; z-index:200; } #supportingText h3 { margin-top:24px; } #supportingText a { color:#98A892; } #supportingText a:hover { text-decoration:none; color:#fff; background-color:#ADC8A2; } #explanation h3 { width:202px; height:16px; background:url(about.gif) no-repeat; } #participation h3 { width:202px; height:16px; background:url(participation.gif) no-repeat; } #benefits h3 { width:202px; height:16px; background:url(benefits.gif) no-repeat; } #requirements h3 { width:230px; height:16px; background:url(requirements.gif) no-repeat; } #requirements { padding-bottom:1px; } #footer { position:absolute; background:url(footerBg.gif) no-repeat top center; width:485px; height:48px; margin-left:-150px; padding-left:150px; padding-top:27px; padding-bottom:0; margin-bottom:0; z-index:300; text-indent:-150px; text-align:center; font-size:11px; } #linkList { position:absolute; top:0; width:200px; left:500px; font:normal 11px/15px arial; color:#999; background:#fff url(lines2.gif) repeat-y top center; color:#666; float:left; } #linkList2 { background:transparent url(orange.jpg) no-repeat top left; padding:50px 25px 0 25px; width:150px; } h3.select { width:115px; height:18px; background:url(select.gif) no-repeat; } h3.archives { width:115px; height:18px; background:url(archives.gif) no-repeat; } h3.resources { width:115px; height:18px; background:url(resources.gif) no-repeat; } #linkList a { color:#98A892; } #linkList a:hover { color:#fff; background-color:#ADC8A2; text-decoration:none; } #lselect a { display:block; } #lselect a.c { display:inline; color:#999; } #lselect a.c:hover { color:#C99AAD; background:none; } ul { margin:4px 0 16px 18px; } li { margin:4px 0; list-style-image:url(bullet.gif); } #lresources { margin:0 -25px; padding:0 25px 15px 25px; background:url(linkListBottom.gif) no-repeat bottom center; } #lresources ul { margin-bottom:0; padding-bottom:14px; }/* css Zen Garden submission 187 - 'Wilderness', by Aadesh Mistry, http://www.idizyn.com/blog/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Aadesh Mistry */ /* Added: November 10th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /*------------------------------------------------------ G L O B A L E L E M E N T S ------------------------------------------------------*/ * { margin: 0; padding: 0; } body { margin: 0; padding: 0; background: url(background.gif); } a { color: #E0B53D; } a:hover { color: #FBBA04; } h1, h2, h3 span { display: none; } /*------------------------------------------------------ C O N T A I N E R ------------------------------------------------------*/ #container { position: relative; margin: 0 auto 0 auto; padding: 0 50px 0 50px; width: 640px !important; width /**/: 750px; background: url(background_container.gif) repeat-y; font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: .75em; color: #BBB5A2; } #pageHeader { width: 670px; height: 150px; background: url(page_header.jpg) no-repeat; } #intro { width: 460px; } #quickSummary { margin: -10px 0 0 30px; } #quickSummary .p1 { display: none; } #preamble { margin: 20px 0 30px 0; padding: 0 0 0 30px; width: 420px !important; width /**/: 460px; } #preamble h3{ margin: 0; padding: 0; width: 265px; height: 20px; background: url(h_preamble.gif) no-repeat; } #preamble .p1 { padding: 0; margin: 5px 0 0 0; } /*------------------------------------------------------ S U P P O R T I N G T E X T ------------------------------------------------------*/ #supportingText { width: 460px; } #supportingText { padding: 30px; padding-bottom: 0; width: 408px !important; width /**/: 468px; background: url(background_supportingtext.gif) repeat-y; /*background: url(i_supportingtext_header.gif) no-repeat;*/ color: #BDC1BC; } #explanation { margin: -30px -30px 0 -30px ; padding: 30px 30px 0 30px; background: url(i_supportingtext_header.gif) no-repeat; } #explanation h3 { width: 369px; height: 25px; background: url(h_sowhat.gif) no-repeat; } #participation h3 { width: 396px; height: 25px; background: url(h_participation.gif) no-repeat; } #benefits h3 { width: 396px; height: 25px; background: url(h_benefits.gif) no-repeat; } #requirements h3 { width: 396px; height: 25px; background: url(h_requirements.gif) no-repeat; } #explanation,#participation,#benefits,#requirements { margin-bottom: 30px; } .p1,.p2,.p3,.p4,.p5 { margin-top: 10px; } .p5 { padding: 10px; background: #0B1C07; } /*------------------------------------------------------ F O O T E R ------------------------------------------------------*/ #footer { margin: 0 -30px; padding: 40px 30px 10px 30px; height: 20px !important; height /**/: 70px; background: #000000 url(background_footer.gif) no-repeat; } #footer a{ color: #FFFFFF; } /*------------------------------------------------------ L E F T C O L U M N ------------------------------------------------------*/ #linkList { position: absolute; top: 160px; left: 530px; width: 177px; } #linkList2 { color: #C13003; } /*------------------------------------------------------ S E L E C T A D E S I G N ------------------------------------------------------*/ .select { margin-top: 20px; padding-bottom: 5px; width: 177px; height: 31px; background: url(h_selectadesign.gif) no-repeat; } #lselect ul { width: 150px; list-style-type: none; } #lselect ul li { width: 150px; padding: 5px 0 5px 25px; display: block; background: url(bullets.gif) 14px 7px no-repeat; border-bottom: 1px solid #311D00; } #lselect ul li a{ display: block; font-weight: bold; color: #D07B02; text-decoration: none; line-height: 12px; } #lselect ul li a:hover{ color: #FAA123; } #lselect ul li a.c { color: #C13003; display: inline; font-weight: bold; } #lselect ul li a.c:hover { color: #C13003; text-decoration: underline; } /*------------------------------------------------------ A R C H I V E S ------------------------------------------------------*/ .archives { margin-top: 20px; padding-bottom: 5px; width: 177px; height: 31px; background: url(h_archives.gif) no-repeat; } #larchives ul { width: 150px; list-style-type: none; } #larchives ul li { width: 150px; padding: 3px 0 3px 25px; border-bottom: 1px solid #311D00; } #larchives ul li a{ font-weight: bold; color: #D07B02; text-decoration: none; line-height: 12px; } #larchives ul li a:hover{ color: #FAA123; } /*------------------------------------------------------ R E S O U R C E S ------------------------------------------------------*/ .resources { margin-top: 20px; padding-bottom: 5px; width: 177px; height: 31px; background: url(h_resources.gif) no-repeat; } #lresources ul { width: 150px; list-style-type: none; } #lresources ul li { width: 150px; padding: 3px 0 3px 25px; background: url(bullets.gif) 14px 8px no-repeat; border-bottom: 1px solid #311D00; } #lresources ul li a{ font-weight: bold; color: #D07B02; text-decoration: none; line-height: 12px; } #lresources ul li a:hover{ color: #FAA123; } /* css Zen Garden submission 188 - 'Organica Creativa', by Eduardo Cesario, http://www.criaturacreativa.com.ar/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Eduardo Cesario */ /* Added: November 10th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css Zen Garden "Organica Creativa", by Eduardo Cesario, La Criatura Creativa. All images, photos and vector art present on this design, are copyrighted by Eduardo Cesario, La Criatura Creativa. To see more of my work, you can go to http://www.criaturacreativa.com.ar */ a:link { text-decoration: none; } #participation a:link { color: #FF0000; } #requirements a:link { color: #009999; } a:visited { text-decoration: none; color: #666666; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } body { background-color: #99CC00; background-image: url("bg_body.gif"); background-repeat:no-repeat; margin: 0px; margin-left:122px; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px; line-height: 15px; color: #999999; font-weight: bold; } #container { position:absolute; margin-top:0px; width: 658px; background-image: url("bg_container.gif"); background-repeat: repeat-y; background-position:left; } #intro { margin-top: 250px; } #pageHeader h1 , #pageHeader h2 , #pageHeader span { display: none; height: 5px; background-color: #00CCCC; } #quickSummary { position: absolute; top: 1330px; left: 415px; width: 230px; height: 111px; background-image: url("sidebar_part_4.gif"); background-repeat: no-repeat; margin: 5px; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { margin: 10px; margin-top: 30px; color: #FF6600; } #quickSummary a { color: #CC0000; } #intro, #supportingText, #linkList { padding: 25px; width: 320px; } #intro h3 span, #supportingText h3 span { display: none; } #intro h3 { background: url("title1.jpg"); width: 313px; height: 75px; } p.p1 { color: #666666; } p.p1, p.p2, p.p3 { margin: 0px; padding: 0px; margin-top: 8px; } #explanation h3 { background: url("title2.jpg"); width: 313px; height: 75px; margin: 0px; padding: 0px; } #participation h3 { background: url("title3.jpg"); width: 313px; height: 75px; } #benefits h3 { background: url("title4.jpg"); width: 313px; height: 75px; } #requirements h3 { background: url("title5.jpg"); width: 313px; height: 75px; } #extraDiv1 { background-image: url("header.gif"); background-repeat: no-repeat; background-position:top; position: absolute; top: 0px; left: 122px; width: 658px; height: 259px; } #extraDiv2 { background: transparent url("photo_csspill.jpg") top left no-repeat; position: absolute; top: 191px; left: 485px; width: 295px; height: 339px; } #linkList { position: absolute; top: 530px; left: 363px; width: 295px; height: 755px; z-index: 1; } #linkList2 { margin-top: 70px; margin-left: 26px; } #lselect { width: 230px; height: 384px; background-image: url("sidebar_part_1.gif"); color:#CCCCCC; } #lselect h3 span, #larchives h3 span, #lresources h3 span { display: none; } #lselect h3, #larchives h3, #lresources h3 { width: 229px; height: 50px; } #lselect h3 { background: url("sidetitle_01.gif"); width: 229px; height: 40px; top: 0px; margin: 0px; padding: 0px; } #lselect ul, #larchives ul, #lresources ul { margin-top: 5px; } #lselect li { border-bottom: 1px dotted #FFFFFF; width: 170px; margin-bottom: 8px; list-style-position: outside; list-style-image: url("bullet_01.jpg"); } #lselect .c { text-transform: capitalize; } #lselect a { display: block; font-weight: bold; color:#FFFFFF; } #lselect a:hover { display: block; font-weight: bold; color: #3399FF; background-color:#FFFFFF; } #lselect a.c { color: #FFCC00; display: inline; font-weight: bold; } #lselect a.c:hover { color: #FFCC00; display: inline; font-weight: bold; background-color:#3399FF; } #larchives a, #lresources a { /*display: block;*/ font-weight: bold; color:#FFFFFF; } #larchives li, #lresources li { width: 170px; list-style-position: outside; } #lresources li { list-style-image: url("bullet_02.jpg"); } #larchives li { list-style-image: url("bullet_03.jpg"); } #larchives { width: 230px; height: 169px; background-image: url("sidebar_part_2.gif"); } #larchives h3 { background: url("sidetitle_02.gif"); width: 229px; height: 40px; top: 0px; margin: 0px; padding: 0px; } #lresources { width: 230px; height: 156px; background-image: url("sidebar_part_3.gif"); } #lresources h3 { background: url("sidetitle_03.gif"); width: 229px; height: 40px; top: 0px; margin: 0px; padding: 0px; } #requirements p.p5 { font-variant:small-caps; font-size: 9px; border-bottom: 2px dotted #FFCC00; text-align: center; width: 470px; } #footer { background: url("footer.jpg"); background-repeat:no-repeat; width: 470px; height: 46px; text-align:center; margin-top:10px; padding: 10px; } #footer a { color: #FF9900; } acronym { font-style:italic; }/* css Zen Garden submission 189 - 'Mozart', by Andrew Brundle, http://mr-thomas-dot-com.port5.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Andrew Brundle */ /* Added: November 10th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /*************** Main background, container & logo. *************************/ HTML{ margin: 0px; padding: 0px;} BODY{ margin: 0px; padding: 0px; background: #292421 url(bg-mozart.jpg) repeat-y fixed 50% 48%;} #container{ width: 703px; position: absolute; left: 50%; background: transparent url(bg-bio.gif) no-repeat 0px 50px; margin-left: -352px;} #pageHeader h1 span{ display: none;} #pageHeader h1{ width: 533px; height: 173px; margin: 0px 0px 0px 170px; background: url(logo.jpg);} #pageHeader h2{ display: none;} /*************** End background, container & logo. *************************/ /*************** Fonts and decoration. *************************/ P{ font: 9pt Times, "Times New Roman", Georgia, Verdana, serif; color: #cfb35b; text-align: left; text-indent: 10px; padding: 3px 5px 2px 5px; margin: 0px;} #preamble P.p3, #explanation P.p2, #participation P.p3, #benefits P.p1, #requirements P.p5{ padding-bottom: 5px; border-bottom: solid 1px #cfb35b;} /*************** End fonts and decoration. *************************/ /*************** Main links & acronym. *************************/ ACRONYM{ border: none;} A:link, A:visited{ color: #cfb35b;} A:hover, A:active{ color: #000; background: #cfb35b;} /*************** End main links. *************************/ /*************** Main content. *************************/ #preamble{ width: 360px; margin: 0px 0px 25px 172px; border-bottom: solid 1px #000; background: #000 url(border-1.gif);} #preamble h3 span{ display: none;} #preamble h3{ margin: 0px; height: 26px; background: url(preamble.gif);} #supportingText{ width: 365px; margin: 0px 0px 0px 170px; padding: 0px 0px 31px 0px; background: url(bottom.gif) no-repeat bottom;} #explanation, #participation, #benefits, #requirements{ width: 360px; margin: 0px 0px 25px 2px; border-bottom: solid 1px #000; background: #000 url(border-1.gif);} #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span{ display: none;} #explanation h3, #participation h3, #benefits h3, #requirements h3{ margin: 0px; height: 27px;} #explanation h3{ background: url(explanation.gif);} #participation h3{ background: url(participation.gif);} #benefits h3{ background: url(benefits.gif);} #requirements h3{ background: url(requirements.gif);} /*************** End main content. *************************/ /*************** Footer division. *************************/ #footer{ width: 360px; text-transform: uppercase; font-weight: bold; text-align: center; word-spacing: 2px; padding: 5px 0px 0px 0px; margin: -10px 0px 0px 2px; border-top: solid 1px #cfb35b; background: #000 url(border-1.gif);} html>body #footer{padding: 8px 0px 0px 0px;} #footer a:link, a:visited{ font-size: 11pt; text-decoration: none; color: #cfb35b; background: #000; border: solid 1px #292421;} #footer a:hover, a:active{ color: #cfb35b; background: #000;} /*************** End footer division. *************************/ /*************** Download sample CSS & HTML files. *************************/ #quickSummary{ width: 169px; position: absolute; left: 534px; top: 173px; padding: 5px 0px 50px 0px; background: #000 url(border-3.gif) repeat-y right;} #quickSummary p.p1{ display: none} #quickSummary p.p2{ text-align: center; text-indent: 0px; padding: 0px 0px 10px 0px; margin: 0px 13px 0px 10px; background: url(divider.gif) no-repeat center bottom;} #quickSummary p.p2 a:link, a:visited{ font-weight: bold; text-decoration: none;} #quickSummary p.p2 a:hover, a:active{ color: #000; background: #cfb35b;} #extraDiv1{ width: 167px; height: 1px; background: #cfb35b; position: absolute; top: 173px; left: 50%; margin-left: 182px;} /*************** End download sample CSS & HTML files. *************************/ /*************** Right column: navigation & graphics. *************************/ UL{ list-style-type: none; margin: 0px 3px 0px 0px; padding: 0px; border-top: double 3px #cfb35b; background: url(corners.gif) no-repeat center 3px;} html>body UL{background: url(corners.gif) no-repeat top;} li{ padding: 0px 0px 9px 0px; margin: 0px 10px 0px 10px; background: url(divider.gif) no-repeat center bottom;} html>body Li{padding: 5px 0px 9px 0px;} #linkList{ position: absolute; top:240px; left: 534px; margin: 0px; width: 169px; padding-bottom: 13px; background: #000 url(border-2.gif) no-repeat bottom;} #linkList2{ font-size: 9pt; color: #cfb35b; text-align: center; background: url(border-3.gif) repeat-y right;} #lselect, #larchives, #lresources{ padding: 0px 0px 20px 0px;} #lselect h3 span, #larchives h3 span, #lresources h3 span{ display: none;} #lselect h3, #larchives h3, #lresources h3{ height: 23px; margin: 0px;} #lselect h3{ background: url(select.gif) no-repeat left;} #larchives h3{ background: url(archives.gif) no-repeat left;} #lresources h3{ background: url(resources.gif) no-repeat left;} #linkList li a:link, a:visited{ font: 9pt "Times New Roman", Times, Georgia, Verdana, serif; color: #cfb35b; font-weight: bold; text-decoration: none; display: block;} #lselect li a.c{ font-weight: normal; display: inline;} #linkList li a:hover, a:active{ color: #000; background: #cfb35b;} /*************** End right column: navigation & graphics. *************************/ /* css Zen Garden submission 190 - 'Lonely Flower', by Mitja Ribic, http://mitja.impresija.com/mic/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Mitja Ribic */ /* Added: November 10th, 2005 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ----- BASICS ELEMENTS ------------------------------------------------------------------------------------------------- */ body { font: Tahoma; color: #999999; background-color: #626262; margin: 0px; padding: 0px; text-align: center; } p { padding: 0px; font: 11px Tahoma; margin-top: 8px; margin-bottom: 15px; text-align: justify; } h1,h2,h3 { margin-top: 15px; padding: 0px; } h3 { font: bold 11pt Tahoma; margin-bottom: 0px; color: #6AA14E; padding-bottom: 0px; } #supportingText h3 span,#preamble h3 span { padding-bottom: 4px; background: url(flower3.gif) no-repeat 0 0; padding-left: 24px; } #linkList h3 span { padding-bottom: 4px; background: url(flower2.gif) no-repeat 0 30%; padding-left: 14px; } a:link { font-weight: bold; text-decoration: none; color: #7F7F7F; } a:visited { font-weight: bold; text-decoration: line-through; color: #7F7F7F; } a:hover, a:active { text-decoration: underline; color: #3C9A35; } acronym { font-weight: bold; border-bottom: 1px dotted #bbbbbb; } /* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */ #container { background: url(bg_main.gif) repeat-y; width: 569px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-top: 0px; text-align: left; position: relative; } #pageHeader { background: url(bg_header.jpg) no-repeat right top; width: 378px; height: 217px; float: left; } #quickSummary { background: url(bg_header2.jpg) no-repeat left top; width: 180px; height: 217px; float: right; } #preamble { margin-left: 31px; padding: 20px; padding-top: 1px; padding-bottom: 30px; width: 306px; clear: both; background: url(bg_divide.gif) no-repeat bottom; } #supportingText { margin-left: 31px; padding: 0px 20px; width: 306px; position: relative; } #preamble h3 { margin-top: 20px; } #linkList { width: 148px; font: 10px Tahoma; position: absolute; top: 217px; left: 389px; margin: 0px; padding: 0px; } #footer { text-align: center; font: bold 10px Tahoma; padding: 20px; text-transform: uppercase; margin-top: 20px; border-top: 1px dashed #dddddd; } /* ----- OTHER ------------------------------------------------------------------------------------------------- */ #lselect,#larchives,#lresources { padding: 0px 15px 45px 15px; margin: 0px; background: url(bg_divide1.gif) no-repeat bottom center; } #explanation,#participation,#benefits,#requirements { margin-top: 0px; padding-top: 0px; } #explanation h3 span { margin-top: 20px; } #linkList h3 { font-size: 11px; padding: 3px 3px 3px 1px; color: #E98523; margin-bottom: 10px; margin-top: 20px; } #lselect ul, #larchives ul, #lresources ul { list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px; } #lselect li, #larchives li, #lresources li { padding: 5px 0px; background: url(bullet.gif) no-repeat 0 50%; } #lselect li a { display: block; } #lselect li a.c { display: inline; } #linkList #lselect ul li { border-bottom: 1px solid #EEEEEE; display: block; padding: 5px 0 5px 15px; } #linkList #larchives ul li { border-bottom: 1px solid #EEEEEE; display: block; padding: 5px 0 5px 15px; } #linkList #lresources ul li { border-bottom: 1px solid #EEEEEE; display: block; padding: 5px 0 5px 15px; } #pageHeader h1 span,#pageHeader h2 span,#quickSummary p.p1 { display: none; } #quickSummary p.p2 { text-align: left; color: #ffffff; font: 11px Tahoma; width: 120px; padding: 145px 0px 0px 15px; }/* css Zen Garden submission 191 - 'The Diary', by Alexander Shabuniewicz, http://eye.loveline.ru/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Alexander Shabuniewicz */ /* Added: February 15th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ font:11px/20px Georgia,"Times New Roman",Times,serif; color:#666; background:#00496C; margin:0; padding:0 } h1,h2,h3{ margin:0; padding:0 } a{ color:#191970 } a:hover{ color:#B22222 } a:visited{ color:#696969 } a acronym{ border:none } acronym{ cursor:help } /* main */ #container{ background:url("cover_bot.png") no-repeat left bottom; left:50%; position:absolute; width:770px; margin:10px 0 20px -385px; padding-bottom:120px } /* intro */ #intro{ padding:0 30px; background:url("cover.png") repeat-y; padding-bottom:1px } #pageHeader{ margin:0 -30px; background:url("cover_top.png") no-repeat } #pageHeader h1{ background:url("csszengarden.jpg") no-repeat; height:71px; width:268px; position:relative; top:50px; left:71px } #pageHeader h1 span{ display:none } #pageHeader h2{ background:url("thebeauty.jpg") no-repeat; height:20px; width:299px; position:relative; top:55px; left:57px } #pageHeader h2 span{ display:none } #quickSummary{ position:absolute; top:41px; padding:0 0 0 380px } #quickSummary .p1{ margin:10px 81px 0 0; font-size:120% } #quickSummary .p2{ margin:0; background:url("bookmark.jpg") no-repeat; position:absolute; top:-25px; left:620px; width:81px; height:131px } #quickSummary .p2 span{ display:block; padding:20px 10px; color:#fff; font:11px/18px "Trebuchet MS",Arial,Helvetica,sans-serif } #quickSummary .p2 a{ color:#fff } #quickSummary .p2 a:hover{ text-decoration:none; color:#ccc } #preamble{ padding-top:120px; background:url("img_1.jpg") 10px 170px no-repeat; height:1% } #preamble h3{ background:url("roadto.png") no-repeat; position:relative; left:120px; height:44px; width:212px } #preamble h3 span{ display:none } #preamble p{ text-align:left; margin-top:-44px; font-style:italic; padding:0 10px 35px 380px } /* main content */ #supportingText{ background:url("cover.png") repeat-y; padding:0 30px } #explanation{ height:1%; background:url("img_2.jpg") 370px 50% no-repeat } #explanation h3{ background:url("sowhat.png") no-repeat; position:relative; left:380px; height:45px; width:176px } #explanation h3 span{ display:none } #explanation p{ text-align:right; margin-top:-45px; font-style:italic; padding:0 380px 35px 10px } #participation{ height:1%; background:url("img_3.jpg") 5px 50% no-repeat } #participation h3{ background:url("participation.png") no-repeat; position:relative; left:180px; height:45px; width:157px } #participation h3 span{ display:none } #participation p{ text-align:left; margin-top:-45px; font-style:italic; padding:0 10px 35px 380px } #benefits{ background:url("img_4.png") 380px 50% no-repeat } #benefits h3{ background:url("benefits.png") no-repeat; position:relative; left:380px; height:47px; width:150px } #benefits h3 span{ display:none } #benefits p{ text-align:right; margin-top:-47px; font-style:italic; padding:0 380px 35px 10px } #requirements h3{ background:url("requirements.png") no-repeat; position:relative; left:180px; height:46px; width:150px } #requirements h3 span{ display:none } #requirements p{ text-align:left; margin-top:-46px; font-style:italic; padding:0 10px 35px 380px } #footer{ padding-left:380px; text-align:center } #footer a{ color:#666; text-decoration:none; border:1px solid #fffcf1; padding:5px } #footer a:hover{ border:1px solid #ccc } /* notes */ #linkList{ font-size:120%; font-style:italic; position:absolute; width:300px; bottom:70px; left:80px } #linkList h3.select{ width:142px; height:29px; background:url("select.png") no-repeat; position:relative; left:8px; top:8px } #linkList h3.select span{ display:none } #linkList h3.archives{ width:74px; height:25px; background:url("archives.png") no-repeat; position:relative; left:8px } #linkList h3.archives span{ display:none } #linkList ul{ margin:10px 5px 10px 40px; padding:0 5px } #linkList ul li{ list-style-type:none; list-style-image:none } #lselect ul li{ list-style:outside url("bull.png") } #linkList ul li a{ text-decoration:none } #lresources{ font:16px/22px "Trebuchet MS",Arial,Helvetica,sans-serif; display:block; background:url("notes.jpg") no-repeat; padding:20px 15px; width:252px } #lresources ul{ margin:30px 20px 50px 25px } #lresources h3.resources{ width:85px; height:22px; background:url("resources.png") no-repeat } #lresources h3.resources span{ display:none } /* css Zen Garden submission 192 - 'LuGoZee', by Viallon Pierre-Antoine, http://www.accxs.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Viallon Pierre-Antoine */ /* Added: February 15th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* CSS Document */ #css-zen-garden{ font-family:Georgia, Garamond, serif; font-size:12px; color:#000001; background-color:#000000; background-image:url(mur_fond.jpg); background-position:top left; background-repeat:repeat-x; } #css-zen-garden H1 { margin:0px; } #css-zen-garden H1 SPAN { display:none; } #css-zen-garden H2 { margin:50px 0px 0px 0px; padding:25px 0px 0px 0px; height:75px; text-align:center; font-size:16px; } #css-zen-garden H3 { color:#4A0000; padding:30px 0px 0px 42px; margin:10px 0px 0px 0px; height:53px; font-size:16px; text-transform:uppercase; } #css-zen-garden H3:first-letter {font-size:2px;} #css-zen-garden P { margin:0px; } #css-zen-garden A { color:#960000; text-decoration:none; font-weight:bold; } #css-zen-garden A:HOVER { text-decoration:underline; } #css-zen-garden acronym { text-decoration:overline; color:#9A7339; } #container { position:absolute; top:0px; left:215px; width:600px; background:url(fond-centre.jpg); background-position:top left; background-repeat:repeat-y; z-index:10; } #intro { background:url(H1.jpg); background-position:top left; background-repeat:no-repeat; width:550px; border-top:1px solid black; margin:0px; } #quickSummary { width:350px; padding:0px 0px 0px 50px; text-align:center; margin-top:-25px; } #explanation, #benefits { padding:0px 0px 0px 15px; width:385px; margin-top:15px; } #preamble { padding:0px 0px 0px 15px; width:385px; margin:15px 0 0 15px; } #supportingText { padding:0px 15px 0px 15px; } #benefits, #participation { width:500px; padding:0px 0px 0px 15px; } #preamble H3 { background-image:url(T.gif); background-repeat:no-repeat; background-position:top left; } #explanation H3 { background-image:url(S.gif); background-repeat:no-repeat; background-position:top left; } #participation H3 { background-image:url(P.gif); background-repeat:no-repeat; background-position:top left; } #benefits H3 { background-image:url(B.gif); background-repeat:no-repeat; background-position:top left; } #linkList {position:absolute; top:0px; left:463px; z-index:15; background:url("menu_droite_fd_center.jpg") top left repeat-y; width:230px; font-family:"Courier New", Courier, serif; } #linkList H3 { margin:0px 0px 0px 10px; padding:0px; text-align:center; } #linkList .select { background:url(select_design.gif) top right no-repeat; width:100px; height:65px; margin-top:90px; } #linkList .archives { background:url(archives.gif) top center no-repeat; width:100px; height:65px; } #linkList .resources{ background:url(resources.gif) top center no-repeat; width:100px; height:40px; } #linkList H3 SPAN {display:none;} #linkList A { color:#9C5600; text-decoration:none;} #linkList A:HOVER { color:#FF8D00; } #linkList UL {margin:-5px 42px 0 25px; list-style-image:url(clou.gif); padding:0; } #linkList UL LI {margin:-5px 0 0 0; padding-top:0} #linkList2 { background:URL("menu_droite_fd_top.jpg") top left no-repeat; width:210px; border-top:1px solid black; margin:0 0px 0px 0px; color:#FFFFFF; } #lresources { background:URL("menu_droite_fd_bottom.jpg") bottom left no-repeat; margin:0 0 0 0; height:200px; } #requirements { background:url(author.jpg) bottom left no-repeat; width:420px; padding:0px 70px 125px 70px; margin:0px 0px 0px -15px; } #requirements H3 { background:url(R.gif) top left no-repeat; } #footer A{color:#D6AE73} #footer { margin-top:-100px; text-align:center; height:75px; } #extraDiv1 { background:url(bella.jpg) top left no-repeat; width:119px; height:600px; position:absolute; left:90px; top:0px; } #extraDiv2 { background:url(candel.jpg) top left no-repeat; width:126px; height:600px; position:absolute; top:0px; left:775px; z-index:2; }/* css Zen Garden submission 193 - 'Leggo My Ego', by Jon Tan, http://www.gr0w.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Jon Tan */ /* Added: February 15th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* css Zen Garden 'Leggo My Ego' By Jon Tan Knowledge is like Lego: Bits of data. Design is how you present the bits. Wisdom is understanding why. It's autumn in the Zen Garden. CSS is bedding in to the World Wide Web for the duration. Bits of data are falling through the community on the breeze. The debates still flow beneath the bridge that the ancients built between design and structure but as the sun rises, the message is clear: CSS is beautiful. I stand on the shoulders of those who came before. There are too many to list here but if you search for mezzoblue, stopdesign, tantek, zeldman, meyerweb, southcot, pwhitrow, joe clark, alistapart, carter and cone or css you will probabaly find most of them. Thank you to them all. */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* start the fun */ body { margin: 0 0 30px 0; padding:0; border:0; font: 80% tahoma,sans-serif; color: #7A745A; line-height:1.5em; background: #fff url(bg.gif) top center no-repeat; text-align:center; } /* layers */ #container{ position:relative; width:750px; margin: 270px auto 0 auto; background: url(bg_container.gif) bottom left no-repeat; } #supportingText{ margin: 0 0 0 405px; text-align:left; } #preamble{ position:absolute; top:120px; left:0; width:170px; text-align:left; } #linkList{ position:absolute; top:120px; left:205px; width:200px; text-align:left; } #footer{ height:3.5em; background: url(bg_p_p2.gif) right no-repeat; margin-top:2em; } /* display:none content */ #intro h2, #quickSummary p.p1{display:none;} /* headers and paragraphs */ h1, #explanation h3, #preamble h3, #supportingText h3, #linkList h3 {margin:0;text-indent: -9999px;} h1{ height:120px; background: url(bg_h1.gif) no-repeat; } h3 {font-size:150%} #explanation h3 {height:6em;background: url(bg_h3_ex.gif) no-repeat;} #preamble h3 {height:220px;background: url(bg_h3_preamble.gif) top no-repeat;} #participation h3 {height:30px;background: url(bg_h3_participation.gif) no-repeat;} #benefits h3 {height:30px;background: url(bg_h3_benefits.gif) no-repeat;} #requirements h3 {height:30px;background: url(bg_h3_requirements.gif) no-repeat;} h3.select {height:120px;background: url(bg_h3_select.gif) no-repeat;} h3.archives {height:30px;background: url(bg_h3_archives.gif) no-repeat;} h3.resources {height:30px;background: url(bg_h3_resources.gif) no-repeat;} p{ letter-spacing:+0.05em; word-spacing:0.1em; } #quickSummary p.p2 { float:right; width:70px; height:4em; margin:75px 0 0 0; padding-left:40px; text-align:right; font: 80% tahoma,sans-serif; line-height:1.1em; letter-spacing:0; word-spacing:0; background: url(bg_p_p2.gif) top left no-repeat; } #benefits p, #preamble p{ letter-spacing:0; font:italic 120% georgia,serif; } /* hyperlinks and lists*/ a{ color:#d25c3e; text-decoration:none; border-bottom:1px dotted #d25c3e; } a:hover{ color:#0cf; text-decoration:none; border-bottom:1px solid #ddd1a8; } /*So the IE audience sees somthing visual for acronyms */ acronym{cursor:help;border-bottom:1px dotted #ccc;} #lselect a{ font:normal 100% tahoma,sans-serif; text-transform:uppercase; display:block; text-decoration:none; background: #fff0f0; padding-left:0.25em; margin-left:-0.25em; border-bottom:0; } #lselect a:hover{ background:#f3efe0; } #lselect a.c{ font: italic 100% georgia,serif; text-transform:none; color:#d25c3e; display:inline; padding-left:0; margin-left:0; background:none; } #lselect a.c:hover{ color:#0cf; background:none; border-bottom:1px solid #ddd1a8; } #linkList ul{ list-style:none; padding:0; margin-right:40px; margin-left:0.5em; } #linkList ul li{ margin: 0.5em 0; padding: 0.3em 0; font: normal 90% tahoma,serif; }/* css Zen Garden submission 194 - 'Dark Rose', by Rose Fu, http://www.rosefu.net/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Rose Fu */ /* Added: February 15th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* ~~~ General Properties ~~~ */ * { padding: 0; margin: 0; } body { color: #64645A; background: #A09B7D url(bg.jpg) repeat; font: normal 70% Georgia, Palatino, Times, Times New Roman, serif; color: #666; } a:link { text-decoration: none; border-bottom: 1px solid #BEB9AA; color: #968C5A; } a:visited { text-decoration: none; border-bottom: 1px solid #BEB9AA; color: #B3AE94; } a:hover { text-decoration: none; border-bottom: 1px solid #AAA08C; color: #AA7846; } a:active { text-decoration: none; border-bottom: 1px solid #AAA08C; color: #8C7846; } /* ~~~ Text Properties ~~~ */ p { font: 100% Georgia, Palatino, Times, Times New Roman, serif; line-height: 17px; margin-top: 0px; text-align: justify; padding-left: 14px; padding-bottom: 10px; padding-right: 100px; } .p5 { padding-bottom: 40px; } h3 { text-indent: -1000em; } acronym { font-style: italic; border: 0px; cursor: help; } /* ~~~ Div Properties ~~~ */ #container { background: url(back.jpg) center center repeat-y; width: 750px; height: auto; margin-left: auto; margin-right: auto; } #intro { display: block; } #pageHeader { background: url(header.jpg) no-repeat; position: relative; width: 660px; height: 175px; top: 0px; left: 80px; text-indent: -1000em; } #quickSummary .p1 { background: url(summary.jpg) no-repeat; left: 80px; position: relative; width: 660px; height: 155px; text-indent: -1000em; } #quickSummary .p2 { background: url(download.jpg) top right no-repeat; font: 100% Georgia, Times, Times New Roman, serif; line-height: 20px; position: absolute; top: 1500px; display: block; width: 126px; height: 420px; z-index: 5; } #quickSummary .p2 span { display: block; position: relative; top: 80px; left: 90px; width: 100px; text-align: center; } #preamble { background: url(preamble.jpg) no-repeat; position: relative; top: -10px; left: 240px; width: 500px; height: 540px; } #supportingText { background: url(paper.jpg) repeat-y; display: block; position: relative; top: 0px; left: 92px; margin-top: -270px; width: 500px; height: auto; padding-left: 150px; } /* ~~~ Header Properties ~~~ */ #preamble h3 { background: url(preamble.gif) no-repeat; position: relative; width: 306px; height: 50px; top: 0px; left: 0px; } #explanation h3 { background: url(explanation.gif) no-repeat; position: relative; width: 250px; height: 50px; top: 0px; left: 0px; } #participation h3 { background: url(participation.gif) no-repeat; position: relative; width: 164px; height: 50px; top: 0px; left: 0px; } #benefits h3 { background: url(benefits.gif) no-repeat; position: relative; width: 100px; height: 50px; top: 0px; left: 0px; } #requirements h3 { background: url(requirements.gif) no-repeat; position: relative; width: 157px; height: 50px; top: 0px; left: 0px; } /* ~~~ List Properties ~~~ */ #linkList { position: absolute; top: 330px; } #linkList ul { margin-top: 35px; list-style-type: none; } #linkList ul li { list-style-image: url(button.gif); font-size: 90%; width: 120px; margin-left: 15px; margin-top: 5px; } #linkList ul li a { display: block; font-size: 110%; width: 120px; border: 0px; line-height: 15px; } #linkList ul li a:hover { text-decoration: underline; } #lselect { background: url(lselect.jpg) no-repeat; width: 210px; height: 540px; padding-left: 25px; position: relative; left: 30px; } #lselect h3.select { background: url(select.gif) no-repeat; display: block; width: 106px; height: 31px; position: relative; top: 25px; left: 15px; } #lselect li a.c { font: 100% Georgia, Times, Times New Roman, serif; text-transform: none; display: inline; color: #64645A; } #lselect ul li a:hover.c { color: #8C7846; text-decoration: underline; } #larchives { background: url(archives.jpg) no-repeat; width: 210px; height: 200px; position: relative; left: 30px; padding-left: 45px; padding-top: 35px; } #larchives ul li a { font: 110% Georgia, Times, Times New Roman, serif; line-height: 17px; } #larchives h3.archives { background: url(archives.gif) no-repeat; display: block; width: 145px; height: 145px; position: absolute; top: -100px; left: 20px; text-indent: -1000em; } #larchives h3.resources { background: url(resources.gif) no-repeat; display: block; width: 69px; height: 31px; position: relative; top: 25px; left: 30px; } #lresources { background: url(resources.jpg) no-repeat; width: 210px; height: 470px; position: relative; left: 30px; padding-left: 45px; } #lresources ul li a { font: 110% Georgia, Times, Times New Roman, serif; line-height: 17px; } #lresources h3.resources { background: url(resources.gif) no-repeat; display: block; width: 69px; height: 31px; position: relative; top: 25px; left: 30px; } /* ~~~ Misc Properties ~~~ */ #footer { display: block; background: url(footer.jpg) no-repeat; width: 400px; height: 45px; font: 11px Verdana, Tahoma, Arial, Helvetica, sans-serif; line-height: 45px; text-align: center; text-transform: uppercase; padding-bottom: 20px; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* css Zen Garden submission 195 - 'Dazzling Beauty', by Deny Sri Supriyono, http://blog.denysri.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Deny Sri Supriyono */ /* Added: February 15th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin: 0; padding: 0; } html { background: transparent url(htmlbg.jpg) repeat-x; } body { margin: 0; padding: 0; font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; color: #7c7c7c; text-align: center; background: transparent url(bodybg.jpg) no-repeat center top; } #container { margin: 0px auto; padding: 0; width: 696px; border: none; text-align: left; background-image: url(footerbg.jpg); background-repeat: no-repeat; background-position: bottom; padding-bottom: 70px; } #pageHeader span, #quickSummary .p1, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #lselect h3 span, #larchives h3 span, #lresources h3 span, #extradiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none; } a, a:visited { text-decoration: none; color: #D7661C; border-bottom: 1px dotted #ccc; } a:hover { text-decoration: none; color: #94AB36; border-bottom: 1px solid #ccc; } acronym { text-decoration: none; color: #D7661C; border-bottom: 1px dotted #ccc; cursor: help; } p { margin-bottom: 10px; } #quickSummary .p2 { padding-top: 220px; margin-left: 430px; font: normal 0.9em/0.9em Arial, Tahoma, Georgia, sans-serif; letter-spacing: -1px; color: #C3A176; text-transform: uppercase; width: 220px; } #linkList{ position: absolute; left:auto; right:auto; top: 385px; margin-left: 410px; width: 196px; background-image: url(bgsidebar.jpg); background-repeat: no-repeat; background-position: left top; padding-left: 30px; } #linkList2{ padding: 0; margin: 0; background-image: url(extraflower.jpg); background-repeat: no-repeat; background-position: right bottom; padding-bottom: 250px; } #linkList ul { text-align: left; list-style: none; margin: 0; padding: 0; } #linkList ul li{ margin: 0; padding: 3px 0 3px 10px; border-bottom: 1px solid #ECEFD7; } #linkList ul li a, #linkList ul li a:visited { border-bottom: none; } #linkList ul li a:hover { color: #94AB36; } #lselect { font-size: 0.9em; } #lselect ul li { background: transparent url(ikonli.jpg) no-repeat 0% 25%; padding: 3px 0 3px 25px; } #lselect a { display: block; font-size: 1.1em; color: #789B51; } #lselect a.c { display:inline; line-height:5px; margin:0; padding:0; font: normal 1.0em/0.9em Verdana, Arial, Tahoma, sans-serif; color: #B9B9B9; letter-spacing: -1px; } #preamble, #explanation, #participation, #benefits, #requirements{ top: 150px; position: relative; left: 63px; color: #B0A77E; width: 340px; padding-bottom: 29px; text-align: justify; } #preamble h3 { background-image: url(theroadto.jpg); background-repeat: no-repeat; background-position: left; width: 340px; height: 38px; } #explanation h3 { background-image: url(sowhatgitulowh.jpg); background-repeat: no-repeat; background-position: left; width: 340px; height: 38px; } #participation h3 { background-image: url(participation.jpg); background-repeat: no-repeat; background-position: left; width: 340px; height: 38px; } #benefits h3 { background-image: url(benefits.jpg); background-repeat: no-repeat; background-position: left; width: 340px; height: 38px; } #requirements h3 { background-image: url(requirements.jpg); background-repeat: no-repeat; background-position: left; width: 340px; height: 38px; } #lselect, #larchives { margin-bottom: 20px; } #lselect h3 { background-image: url(selectadesign.jpg); background-repeat: no-repeat; background-position: left; width: 196px; height: 40px; } #larchives h3 { background-image: url(archives.jpg); background-repeat: no-repeat; background-position: left; width: 196px; height: 40px; } #lresources h3 { background-image: url(resources.jpg); background-repeat: no-repeat; background-position: left; width: 196px; height: 40px; } #footer{ text-align: left; padding-left: 63px; padding-top: 140px; } #footer a, #footer a:visited { padding: 5px; border: 1px solid #f4f4f4; background-color: #fff; } #footer a:hover { padding: 5px; border: 1px solid #993300; background-color: #D94904; color: #fff; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none }/* css Zen Garden submission 196 - 'Elegance in Simplicity', by Mani Sheriar, http://www.manisheriar.com/blog/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Mani Sheriar */ /* Added: December 1st, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin:0; padding:0; } body { background:#fff; padding:0 0 20px 0; } a { color:#8fb34f; font-weight:bold; text-decoration:none; } a:hover { border:1px solid #d7d6b7; border-right:none; border-left:none; } abbr, acronym { cursor:help; } #container { position:relative; width:781px; left:50%; margin-left:-390px; background:#fff url(bg.gif) repeat-y center; overflow:auto; z-index:100; } #container h3 span { display:none; } #intro { position:relative; padding-bottom:14px; height:auto !important; height:1%; } #pageHeader { position:relative; width:781px; height:245px; margin:0 auto; background:url(header.jpg) no-repeat right; } #pageHeader h1, #pageHeader h2 { display:none; } #quickSummary p.p1 { display:none; } #quickSummary p.p2 { font:normal 12px/12px Georgia,"Times New Roman",Times, serif; color:#a8a781; position:absolute; bottom:0px; left:58px; background:url(download.gif) no-repeat left center; text-indent:14px; } #quickSummary p.p2 a { display:inline; position:relative; } #preamble { width:440px; margin-left:42px; font:normal 12px/18px Georgia,"Times New Roman",Times, serif; font-style:italic; color:#a8a781; margin-top:19px; } #preamble h3 { width:302px; height:14px; background:url(enlightenment.gif); } #preamble p { margin:18px 0 18px 17px; letter-spacing:0.03em; text-align:justify; } #supportingText { width:430px; font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; color:#a1a07b; margin:55px 0 0 59px; padding-bottom:26px !important; padding-bottom:0; text-align:justify; } #explanation h3 { width:424px; height:18px; background:url(about.gif); } #participation h3 { width:424px; height:22px; background:url(participation.gif); margin:25px 0 -5px 0; } #benefits h3 { width:424px; height:22px; background:url(benefits.gif); margin:25px 0 -5px 0; } #requirements h3 { width:424px; height:22px; background:url(requirements.gif); margin:25px 0 -5px 0; } #supportingText p { margin:16px 0; } #requirements { margin-bottom:37px; } #footer { display:inline; float:right; background:url(check.gif) no-repeat left center; padding-left:18px; margin-bottom:-26px; } #extraDiv1 { position:relative; left:50%; margin-left:-390px; background:url(bottom.gif); width:781px; height:42px; } #linkList { width:196px; position:absolute; top:284px; right:59px; } #linkList h3.select { width:196px; height:34px; background:url(select.gif); } #linkList h3.archives { width:196px; height:25px; background:url(archives.gif); } #linkList h3.resources { width:196px; height:12px; background:url(resources.gif); margin-top:30px; } #linkList ul { list-style-image:url(blt_sm.gif); margin:5px 0 20px 23px; font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; color:#bcbb93; } #linkList ul li { margin-bottom:8px; } #linkList ul a { color:#a9a867; font-weight:normal; font-style:italic; font-size:12px; text-transform:lowercase; } #linkList ul a:hover { color:#b2d378; border:none; } #linkList #lselect ul { list-style-image:url(blt_lrg.gif); margin:5px 0 20px 23px; font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; color:#bcbb93; } #linkList #lselect ul a { display:block; color:#a9a867; font-weight:normal; font-style:italic; font-size:12px; text-transform:none; line-height:14px; } #linkList #lselect ul a.c { display:inline; font-style:normal; font-size:11px; color:#bcbb93; letter-spacing:0; text-transform:lowercase; } #linkList #lselect ul a:hover { color:#b2d378; border:none; } #linkList #larchives ul, #linkList #lresources ul { margin:10px 0 20px 24px; } #extraDiv2 { width:49%; position:absolute; top:0; left:0; height:127px; background:url(topLeft_bg.gif) repeat-x; z-index:10; } #extraDiv3 { width:49%; position:absolute; top:0; right:0; height:141px; background:url(topRight_bg.gif) repeat-x; z-index:10; } /* css Zen Garden submission 197 - 'Floral Touch', by Jadas Jimmy, http://www.jahmasta.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Jadas Jimmy */ /* Added: December 4th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #919191; background-image: url(back.gif); background-repeat: repeat; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } p { margin-top: 10px; text-align: justify; font-family: arial; font-size: 8pt; line-height: 10pt; } h3 { font: normal 12pt arial; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; color: #74529A; } a:visited { font-weight: bold; text-decoration: none; color: #993399; } a:hover, a:active { text-decoration: underline; color: #74529A; } acronym { font-weight: bold; border-bottom: 1px dotted #DB008C; } /* specific divs */ #container { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; width: 691px; text-align: left; position: relative; border-left: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; background-color: #ffffff; } #intro { min-width: 470px; background: url(header.png) no-repeat right top; } #pageHeader { width: 506px; height: 234px; float: left; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { margin-top: 10px; width: 219px; height: 87px; float: left; } #pageHeader h1 span { display:none } #pageHeader h2 span { display:none; } #quickSummary { background: url(down1.gif) no-repeat left top; margin-top: 165px; margin-right: 6px; width: 179px; height: 117px; float: right; } #preamble { margin-left: 10px; padding-top: 1px; padding-bottom: 30px; width: 460px; clear: both; padding-right: 0px; padding-left: 0px; } #supportingText { margin-left: 10px; padding: 0px 0px; width: 460px; position: relative; } #footer { text-align: center; font: bold 10px arial; padding: 0px; text-transform: uppercase; margin-top: 0px; width: 660px; margin-bottom: 0px; height: 20px; } #footer a:link, #footer a:visited { margin-right: 20px; margin-bottom: 30px; } #linkList { background-image: url(menuback.gif); width: 179px; font: 10px verdana #A50069; position: absolute; top: 293px; left: 506px; margin: 0px; padding-top: 0px; padding-right: 6px; padding-bottom: 0px; padding-left: 0px; background-repeat: repeat-y; } #linkList2 { font: 10px verdana; padding: 0px; margin-top: 0px; width: 179px; } #linkList h3.select { background: url(m1.gif) no-repeat top left; margin: 0px 0px 0px 0px; width: 179px; height: 41px; } #linkList h3.select span { display:none } #linkList h3.favorites span { display:none } #linkList h3.archives { background: url(m2.gif) no-repeat top left; margin: 0px 0px 0px 0px; width: 179px; height: 41px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: url(m3.gif) no-repeat top left; margin: 0px 0px 0px 0px; width: 179px; height: 41px; } #linkList h3.resources span { display:none } #lresources { background-image: url(mfoot.gif); background-repeat: no-repeat; width: 179px; height: 514px; background-position: 0px 200px; } #linkList ul { margin: 0px; padding: 0px; } #linkList li { border-bottom: 1px solid #F2E1EC; line-height: 15px; list-style-type: none; display: block; padding-left: 20px; padding-top: 0px; padding-bottom: 10px; margin-bottom: 5px; margin-top: 5px; background-image: url(picto.gif); background-repeat: no-repeat; background-position: 5px 0px; } #linkList li a:link { color: #999999; border-bottom: 1px dotted #DB008C; } #linkList li a:hover { color: #996699; } #linkList li a:visited { color: #919191; } -------------------------------------------- /* Modifications */ p.p2{ font: bold 11px verdana; text-align: center; color: #DB008C; padding: 30px 10px 0px 10px;} #quickSummary p.p2{ font: bold 11px verdana; text-align: center; color: #DB008C; padding: 30px 10px 0px 10px;} #pageHeader h1 span, #pageHeader h2 span, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #quickSummary p.p1 {display: none;} #preamble h3 { text-align: left; color: #919191; font: 11px Arial; width: 479px; height: 40px; padding: 0px 0px 0px 0px; background-image: url(t1.gif); background-repeat: no-repeat; background-position: 0px top; } #explanation h3 { text-align: left; color: #919191; font: 11px Arial; width: 479px; height: 40px; padding: 0px 0px 0px 0px; background-image: url(t2.gif); background-repeat: no-repeat; background-position: 0px top; } #participation h3 { text-align: left; color: #919191; font: 11px Arial; width: 479px; height: 40px; padding: 0px 0px 0px 0px; background-image: url(t3.gif); background-repeat: no-repeat; background-position: 0px top; } #benefits h3 { text-align: left; color: #919191; font: 11px Arial; width: 479px; height: 40px; padding: 0px 0px 0px 0px; background-image: url(t4.gif); background-repeat: no-repeat; background-position: 0px top; } #requirements h3 { text-align: left; color: #919191; font: 11px Arial; width: 479px; height: 40px; padding: 0px 0px 0px 0px; background-image: url(t5.gif); background-repeat: no-repeat; background-position: 0px top; } .p1 {padding: 0px 0px 0px 21px;} .p2 {padding: 0px 0px 0px 21px;} .p3 {padding: 0px 0px 0px 21px;} .p4 {padding: 0px 0px 0px 21px;} .p5 {padding: 0px 0px 0px 21px;} #requirements p.p5 span{ font: bold 15px arial; text-align: center; color: #DB008C; padding: 35px 0px 0px 0px; background-image: url(footer1.gif); background-repeat: no-repeat; background-position: 0px top; display: block; width: 691px; height: 50px; margin: 0px 0px 0px -30px; padding: 35px 0px 0px 0px; } /* css Zen Garden submission 198 - 'The Original', by Joachim Shotter, http://www.bluejam.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Joachim Shotter */ /* Added: December 4th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body { font: 12px Arial, Helvetica, sans-serif; color: #CCCCCC; background: #000000 url(background.jpg) no-repeat center bottom; margin: 0px; } p { width: 354px; padding-right: 25px; text-align: justify; color: #999999; margin-bottom: 10px; float: right; clear: both; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; } a, a:visited { background :url(a_link.jpg) left center; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height: 15px; padding-right: 2px; padding-left: 2px; } acronym{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0000; } #container { background: url(../zen-bg.jpg) no-repeat top left; width: 770px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; } #pageHeader { background: url(css_zen.jpg) no-repeat; background-position: left bottom; display: block; height: 459px; width: 770px; margin: 0px; padding: 0px; } #pageHeader h1, #pageHeader h2 { margin: 0px; padding: 0px; } #pageHeader h1 span { display:none; } #pageHeader h2 span { display: none; } #quickSummary { top: 175px; width: 770px; position: absolute; font-size: 10px; } #quickSummary p { width: 376px; text-transform: uppercase; } #quickSummary .p2{ float: left; padding-left: 20px; position: absolute; top: 300px; } h3{ margin: 0px; padding-bottom: 10px; float: right; } h3 span{ display: none; } #preamble h3{ background: url(preamble.jpg) no-repeat; width: 434px; height: 155px; } #supportingText h3{ background: url(supportingText.jpg) no-repeat; width: 434px; height: 169px; } #participation h3{ background: url(participation.jpg) no-repeat; width: 434px; height: 129px; } #benefits h3{ background: url(benefits.jpg) no-repeat; width: 434px; height: 129px; } #requirements h3{ background: url(requirements.jpg) no-repeat; width: 434px; height: 129px; } #linkList { background: url(original.jpg) no-repeat; background-position: left bottom; color: #777777; position: absolute; top: 500px; width: 321px; padding-bottom: 431px; } #linkList2 { background: url(linkList.jpg) repeat-y; width: 100%; } #lselect ul{ list-style-type: none; margin: 0px; padding: 0px 0px 180px 100px; clear: both; } #lselect li { margin-bottom: 15px; width: 190px; } #lselect li a, #lselect li a:visited { color:#999999; background-image: none; font-size: 15px; font-weight: bold; display: block; margin: 0px; padding: 0px; } #lselect li a.c, #lselect li a.c:visited { display: inline; background-image: none; font-size: 10px; color: #CCCCCC; margin: 0px; padding: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0000; } #larchives li, #lresources li { margin-bottom: 5px; } #larchives ul, #lresources ul { list-style-type: none; margin: 0px; padding: 0px 0px 20px 115px; clear: both; } #larchives li a, #lresources li a{ font-size: 10px; text-transform: uppercase; background-image: none; color: #999999; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF0000; } #lselect li a:hover, #larchives li a:hover, #lresources li a:hover { color: #FFFFFF; } #linkList h3.select { background: url(selectAdesign.jpg); height: 90px; width: 100%; } #linkList h3.archives { background: url(archives.jpg); margin-top: 250px; height: 100px; width: 100%; } #linkList h3.resources { background: url(resources.jpg); height: 100px; width: 100%; } #footer { height: 80px; clear: both; padding-left: 305px; padding-top: 150px; font-size: 10px; } #footer a, #footer a:visited { color: #999999; background-image: none; } .p5{ width: 340px; float: right; position: relative; top: 150px; font-size: 10px; text-transform: uppercase; margin: 0px; padding: 0px; text-align: right; left: 90px; } /* a:hover, a:active {} #intro {} #linkList h3.select span {} #linkList h3.favorites {} #linkList h3.favorites span {} #linkList h3.archives span {} #linkList h3.resources span {} #lresources{} #extraDiv1 {} */ /* css Zen Garden submission 199 - 'Zen Army', by Carl Desmond, http://www.niceguy.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Carl Desmond */ /* Added: December 5th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ html { margin: 0px; padding: 0px; min-width:764px; background: url(topgrnd.jpg) repeat-x top; background-color:#E7D8AF; } body { font: 10pt/18pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #000; margin: 0px; background: url(btmgrnd.jpg) no-repeat bottom left; height:2200px; width:764px; } p { font: 10pt/18pt "Trebuchet MS", Arial, Verdana, sans-serif; margin-top: 0px; text-align: left; } h3 { font: italic normal 12pt georgia; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; color: red; } a:visited { font-weight: bold; text-decoration: none; color: red; } a:hover, a:active { text-decoration: underline; color: #3B6132; } #container { position:absolute; left:50%; width: 750px; margin-left: -380px; } #intro { min-width: 764px; } #pageHeader { margin-bottom: 20px; } #pageHeader h1 { background: transparent url(header.jpg) no-repeat top center; margin-top: 0px; width: 764px; height: 380px; } #pageHeader h1 span { display:none } #pageHeader h2 { } #pageHeader h2 span { display:none; } #quickSummary { position:absolute; top:365px; left:30px; } #quickSummary p.p1 span { display:none; } #preamble { position: absolute; top:400px; left:250px; } #preamble h3 { background:url(h1_road.gif) no-repeat; width:400px; height:43px; } #preamble h3 span{ display:none; } #explanation h3 { background:url(h1_sowhat.gif) no-repeat; width:400px; height:43px; } #explanation h3 span{ display:none; } #participation h3 { background:url(h1_participate.gif) no-repeat; width:400px; height:43px; } #participation h3 span{ display:none; } #benefits h3 { background:url(h1_benefit.gif) no-repeat; width:400px; height:43px; } #benefits h3 span{ display:none; } #requirements h3 { background:url(h1_requirements.gif) no-repeat; width:400px; height:43px; } #requirements h3 span{ display:none; } #supportingText { position: absolute; left:250px; top: 680px; padding-left: 0px; margin-bottom: 0px; } #linkList { position: absolute; top: 385px; } #linkList li{ text-align:left; padding-left: 45px; } #linkList2 { font: 10pt "Trebuchet MS", Arial, Verdana, sans-serif; line-height:12px; background-image:url(linklist_bk.gif); background-repeat:repeat-y; background-position:left; width: 222px; } #linkList h3.select { background: url(selectdesign.jpg) no-repeat top left; width: 222px; height: 169px; } #linkList h3.select span { display:none; } #linkList h3.favorites { } #linkList h3.favorites span { display:none } #linkList h3.archives { background: transparent url(archives.jpg) no-repeat top left; margin: 0px 0px 0px 0px; width:222px; height: 191px; } #linkList h3.archives span { display:none } #linkList h3.resources { background: transparent url(resources.jpg) no-repeat top left; width:222px; height: 202px; } #linkList h3.resources span { display:none } #linkList ul { margin: 0px; padding: 0px; padding-bottom:5px; } #linkList li { background: url(hrzline.gif) no-repeat top right; display: block; padding-top: 10px; } #linkList li a:link { color: red; } #linkList li a:visited { color: #3B6132; } #lresources { padding-bottom:10px; } #lselect li a { font-size: 12px; } #lselect li a:hover{ color: #3B6132; } #lselect .c { font-size: 10px; } #lselect a { display: block; font-weight: bold; } #lselect a.c { display: inline; color: #3B6132; } #footer { text-align: right; } #footer a:link, #footer a:visited { margin-right: 20px; }/* css Zen Garden submission 200 - 'Icicle Outback', by Timo Virtanen, http://www.timovirtanen.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Timo Virtanen */ /* Added: December 6th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ font-family:Arial, Helvetica, sans-serif; background:#2baffa url(pics/content_background.jpg) repeat-y top left; font-size:0.8em; color:#fff; font-weight:normal; margin:0; padding:0; } /*left column*/ #pageHeader{ position:absolute; top:0; left:0; background:#2baffa url(pics/header.jpg) no-repeat top left; height:467px; width:100%; } #quickSummary{ font-size:0.8em; overflow:hidden; position:absolute; left:590px; top:140px; height:140px; text-align:center; width:230px; z-index:3; } #quickSummary a{ text-transform:uppercase; } #preamble, #supportingText{ position:relative; text-align:justify; width:370px; top:302px; left:150px; z-index:4; } #preamble h3, #supportingText h3{ margin-top:40px; } * html #preamble{ top:302px; } #preamble h3 { background:transparent url(pics/header1.gif) no-repeat center top; height:55px; } #explanation h3 { background:transparent url(pics/header2.gif) no-repeat center top; height:55px; } #participation h3 { background:transparent url(pics/header3.gif) no-repeat center top; height:55px; } #benefits h3 { background:transparent url(pics/header4.gif) no-repeat center top; height:55px; } #requirements h3 { background:transparent url(pics/header5.gif) no-repeat center top; height:55px; } #supportingText{ width:370px; left:150px; margin-top:0; padding-bottom:40px; } * html #supportingText{ padding-bottom:240px; } #footer{ text-align:center; background:transparent url(pics/footer.jpg) no-repeat top center; height:55px; padding-top:10px; margin-top:40px; } #footer a{ border-bottom:none; } /*right column*/ #linkList{ position:absolute; top:251px; width:210px; text-align:center; left:602px; font-size:0.85em; background:transparent url(pics/right_list_bg.jpg) repeat-y top left; } #linkList h3{ padding:0; margin:0; } #lselect h3{ margin-bottom:14px; } #lselect a:link, #lselect a:visited{ text-transform:uppercase; display:block; font-weight:bold; color:#fff; border-bottom:none; } #lselect a:hover, #lselect a:active{ color:#a9e0ff; text-decoration:underline; } #lselect a:link.c, #lselect a:visited.c{ display:inline; text-transform:none; color:#a9e0ff; font-weight:normal; border-bottom:#a9e0ff dotted 1px; text-decoration:none; } #lselect a:hover.c, #lselect a:active.c{ color:#fff; border-bottom:#fff dotted 1px; } #lselect ul{ margin-top:-290px; } #lselect ul li + li{ background:transparent url(pics/list_background.jpg) no-repeat center top; padding-bottom:5px; padding-top:2px; } * html #lselect ul li{ background:transparent url(pics/list_background_ie.jpg) no-repeat center top; } #lselect ul li{ padding-bottom:5px; padding-top:2px; } #larchives ul li, #lresources ul li{ padding-bottom:0; padding-top:0; } #lselect ul{ background:transparent url(pics/design_bottom.jpg) no-repeat left bottom; padding-bottom:30px; padding-right:30px; width:215px; } #larchives ul{ background:transparent url(pics/archives_bottom.jpg) no-repeat left bottom; margin-top:-28px; padding-bottom:20px; padding-right:40px; width:205px; } * html #larchives ul{ padding-bottom:14px; } #lresources ul{ background:transparent url(pics/resources_bottom.jpg) no-repeat left bottom; padding-bottom:60px; margin-top:-28px; padding-right:40px; width:205px; } * html #lresources ul{ padding-bottom:57px; } #lselect h3 { background:transparent url(pics/design_header.jpg) no-repeat left top; height:378px; width:245px; } #larchives h3 { background:transparent url(pics/archives_header.jpg) no-repeat left top; height:90px; width:245px; } #lresources h3 { background:transparent url(pics/resources_header.jpg) no-repeat left top; height:90px; width:245px; } * html #larchives ul li, * html #lresources ul li{ background:none; } /* global typography */ a:link, a:visited{ color:#a9e0ff; text-decoration:none; border-bottom:#a9e0ff dotted 1px; } a:hover, a:active{ color:#fff; border-bottom:#fff dotted 1px; } abbr, acronym{ border-bottom:#fff dotted 1px; cursor:help; } /*lists*/ ul{ margin:0; padding:0; } ul li{ list-style:none; } /* hidden stuff */ #pageHeader h1,h2, h3 span, #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display:none; } /* css Zen Garden submission 201 - 'Lily Pond', by Rose Thorogood, http://tulips4rose.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Rose Thorogood */ /* Added: December 11th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* --- LAYOUT ---------------------------------- */ body { margin: 0px; padding: 0px; background: #421d42 url(images/bg.gif); color: #471c47; font-family: Verdana, Arial, sans-serif; font-size: 0.7em; } #container { width: 750px; height: 1335px; } #pageHeader { width: 250px; height: 625px; background: url('bg-pageHeader.gif') no-repeat; margin-top: 0px; margin-left: 0px; position: absolute; top: 350px; left: 250px; z-index: 0; } #quickSummary { margin-top: 0px; margin-left: 0px; position: relative; top: 350px; left: 250px; z-index: 1; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { width: 425px; margin-top: 0px; margin-left: 0px; position: absolute; top: -18px; left: -250px; z-index: 2; } #preamble { width: 500px; height: 350px; background: #471c47 url('bg-road.gif'); margin-top: 0px; position: absolute; top: 0px; } #explanation { width: 250px; height: 490px; background: #a690af url('bg-about.gif'); margin-top: 0px; margin-left: 0px; position: absolute; top: 0px; left: 500px; } #participation { width: 250px; height: 485px; background: #a690af url('bg-participation.gif'); margin-top: 0px; margin-left: 0px; position: absolute; top: 490px; left: 500px; } #benefits { width: 250px; height: 230px; background: #85a3c2 url('bg-benefits.gif'); margin-top: 0px; position: absolute; top: 350px; } #requirements { width: 250px; height: 755px; background: #85a3c2 url('bg-requirements.gif'); margin-top: 0px; position: absolute; top: 580px; } #footer { width: 500px; height: 20px; background: #336699 url('bg-footer.gif'); margin-top: 0px; margin-left: 0px; position: absolute; top: 1280px; left: 250px; } #linkList { width: 500px; height: 305px; background: #336699 url('bg-select.gif'); margin-top: 0px; margin-left: 0px; position: absolute; top: 975px; left: 250px; } #lselect { margin-bottom: 0px; margin-left: 0px; position: absolute; bottom: -5px; left: 10px; width: 300px; } #larchives { margin-top: 0px; margin-left: 0px; position: absolute; top: 30px; left: 290px; } #lresources { margin-top: 0px; margin-left: 0px; position: absolute; top: 180px; left: 290px; } /* --- FORMATTING HEADINGS --------------------- */ h1 span { display: none; } h2 span { display: none; } #explanation h3 { background-image: url('heading-about.gif'); width: 250px; height: 100px; } #explanation h3 span { display: none; } #participation h3 { background-image: url('heading-participation.gif'); width: 250px; height: 50px; } #participation h3 span { display: none; } #benefits h3 { background-image: url('heading-benefits.gif'); width: 250px; height: 60px; } #benefits h3 span { display: none; } #requirements h3 { background-image: url('heading-requirements.gif'); width: 250px; height: 50px; } #requirements h3 span { display: none; } #lselect h3 { display: none; } #larchives h3 { display: none; } #lresources h3 { display: none; } /* --- FORMATTING TEXT ------------------------- */ p { padding: 0 15px 0 15px; } #preamble p.p1 { margin-top: -20px; } #preamble p.p1, #preamble p.p2, #preamble p.p3 { color: #ffffff; font-size: 1.25em; font-style: italic; } #supportingText { background-color: #341256; } #quickSummary p.p1 { display: none; } #quickSummary p.p2 { color: #ffffff; font-weight: bold; text-align: right; padding: 0; } #benefits, #requirements { color: #072849; } #requirements p.p5 { margin-top: 0px; margin-left: 0px; position: absolute; top: 720px; left: 250px; width: 500px; height: 35px; font-size: .9em; background-color: #ffffff; color: #471c47; text-align: center; padding: 0; } #requirements p.p5 span { position: relative; top: 10px; } #footer { text-align: center; text-transform: uppercase; } acronym { font-weight: bold; border-bottom: 1px dotted #ffffff; } #quickSummary acronym { font-weight: bold; border-bottom: 1px dotted #339999; } /* --- FORMATTING NAVIGATION ------------------- */ a { color: #ffffff; text-decoration: none; } a:hover { color: #336699; text-decoration: underline; } #quickSummary a { color: #339999; text-decoration: none; } #quickSummary a:hover { color: #336699; text-decoration: underline; } #explanation a:hover, #participation a:hover { color: #770e77; } #requirements p.p5 a { color: #336699; font-weight: bold; text-decoration: none; } #requirements p.p5 a:hover { color: #339999; text-decoration: underline; } #footer a { font-weight: bold; } #linkList a, #footer a { color: #ffffff; text-decoration: none; } #linkList a:hover, #footer a:hover { background-color: #ffffff; color: #471c47; text-decoration: underline; } #lselect a { font-weight: bold; } #lselect a.c { font-weight: normal; } li { padding-bottom: 3px; list-style: none; } /* css Zen Garden submission 202 - 'Retro Theater', by Eric RogŽ, http://space-sheeps.info/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Eric RogŽ */ /* Added: December 12th, 2006 */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ a, a:visited { text-decoration:none; color:#ccc; position:relative; } a:hover { text-decoration:underline; } div, p, body, ul, li, h1, h2, h3 { display:block; margin:0; padding:0; border:none; } ul { list-style:none; } h1, h2, h3{ text-transform:uppercase; font-weight:normal; } acronym { border:none; } body { position:relative; background:#000 url('cote.png') repeat-y 50% 0%; text-align:center; z-index:1; } #container { position:relative; width:450px; margin:0 auto; padding:230px 0 350px 0; font-size:0.8em; font-family:arial, sans serif; background-color:#313131; color:#b9b9b9; text-align:left; background-image:url('ecran.gif'); z-index:3; } p { font-variant:small-caps; } #intro { text-align:center; } #pageHeader h1 span, #pageHeader h2 span { display:none; } #pageHeader h1 { width:450px; height:258px; background:url('titre.png') no-repeat 50% 0; } #pageHeader h2 { margin-top:-20px; width:450px; height:37px; background:url('sous-titre.png') no-repeat 90% 0; } #quickSummary { width:80%; margin:10em auto 0 auto; text-align:center; } #quickSummary p { display:inline; font-size:125%; line-height:80%; } #preamble h3 { margin-top:1.5em; font-size:80%; } #preamble p { width:80%; font-size:95%; line-height:90%; margin:0 auto; margin:0 auto; } #supportingText { float:left; padding:10em 0; } #supportingText { width:100%; margin-top:2em; } #explanation { float:left; width:60%; } #explanation h3 { font-size:125%; font-weight:bold; text-align:right; margin:0 5% 0 10%; margin-bottom:-1.1em; } #explanation p { line-height:4em; text-align:right; margin:0 5% 0 10%; font-variant:normal; text-transform:capitalize; padding-bottom:4em; } #participation { float:right; width:40%; } #participation h3 { font-size:125%; font-weight:bold; margin:0 10% 0 5%; } #participation p { line-height:2em; margin:0 10% 0 5%; font-weight:bold; font-variant:normal; text-transform:uppercase; } #benefits { float:left; clear:left; margin-top:10em; width:24%; } #benefits h3 { font-size:125%; font-weight:bold; margin:0 10% 0 5%; text-align:center; margin-bottom:1.2em; } #benefits p { line-height:2em; font-weight:bold; margin:0 20px 0 5%; font-variant:normal; text-transform:uppercase; text-align:center; } #requirements { float:right; margin:10em 0 0 0; width:72%; text-align:center; } #requirements h3 { font-size:125%; font-weight:bold; margin-bottom:1.2em; } #requirements p { line-height:2em; font-weight:bold; font-variant:normal; text-transform:uppercase; } #requirements .p1 { float:left; /*margin-top:-1em; line-height:4em;*/ width:20%; margin-right:3%; text-align:left; text-transform:none; } #requirements .p2 { float:left; width:36%; } #requirements .p3, #requirements .p4, #requirements .p5 { float:right; width:35%; text-align:right; margin-right:2%; } #linkList { clear:both; } #lselect h3, #larchives h3, #lresources h3 { padding-top:7em; font-size:125%; font-weight:bold; text-align:center; clear:both; } #lselect ul { margin:0; padding:0; } #lselect li { position:relative; width:90%; margin:.5em auto; padding:0; color:#313131; border-bottom:2px dashed #b9b9b9; } #lselect a { position:relative; top:5px; padding:0 4px 0 0; font-weight:bold; text-transform:uppercase; background:url('ecran.gif'); } #lselect a.c { position:absolute; right:-1px; padding:0 0 0 4px; } #larchives, #lresources { clear:both; } #larchives h3, #lresources h3 { padding-top:6em; font-size:125%; font-weight:bold; text-align:center; } #larchives ul, #lresources ul { margin:1em 0 0 0; width:100%; } #lresources ul { padding-bottom:200px; background:url('sponsorts.png') no-repeat 50% 100%; } #larchives li, #lresources li { text-align:center; } #larchives a, #lresources a { visibility:visible; font-weight:bold; text-transform:uppercase; } #footer { position:absolute; clear:both; bottom:300px; left:0; width:100%; text-align:center; } #extraDiv1 { position:fixed !important; position:absolute; top:0; left:0; width:100%; height:23.2% !important; height:102px; min-height:102px; max-height:230px; z-index:2; } #extraDiv1 span { display:block; position:absolute; bottom:-198px; left:0; width:100%; height:428px; background:url('haut1.png') no-repeat 50% 100%; } #extraDiv2 { position:fixed !important; position:absolute; top:0; left:0; width:100%; height:23.2% !important; height:102px; min-height:102px; max-height:230px; background:url('haut2.png') no-repeat 50% 100%; z-index:4; } #extraDiv3 { position:fixed !important; position:absolute; bottom:0; left:0; width:100%; height:30% !important; height:110px; min-height:110px; max-height:318px; background:url('bas.png') no-repeat 50% 0%; z-index:4; }/* css Zen Garden submission - 'Tiny Blue', by Timo Virtanen, http://www.timovirtanen.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Timo Virtanen */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ body{ text-align:center; margin:0; padding:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:0.75em; color:#fff; background:#fff url(pics/background.gif) repeat-y top center; } h1, h2, h3{ font-size:1.4em; text-align:center; margin:0; padding:0; } p{ margin:0.9em 0 0.9em 0; padding:0; line-height:1.2em; } #container{ width:396px; position:absolute; left:50%; margin-left:-198px; } * html #container{ /*IE FIX*/ margin-left:-197px; } #container h3{ padding:6px 0; background:url(pics/header_bg.gif) top left repeat; } #supportingText, #preamble, #linkList{ padding:0 30px; text-align:justify; } #preamble h3{ margin-top:1.4em; } ul{ padding:0; margin:0; } ul li{ list-style:none; padding-left:1em; border-bottom:1px #365779 solid; height:1.6em; } ul li a:link, ul li a:visited, ul li acronym{ color:#ffa94d; font-weight:normal; text-decoration:none; } ul li acronym{ border-bottom:1px dotted #ffa94d; } ul li a:hover, ul li a:active, ul li a:hover acronym{ color:#fff; text-decoration:underline; } ul li a.c:link, ul li a.c:visited{ color:#bcd0e5; font-style:italic; } ul li a.c:hover, ul li a.c:active{ color:#fff; } ul li:hover{ background:url(pics/list_over.gif) top left repeat-x; } acronym{ color:#bcd0e5; border-bottom:1px dotted #bcd0e5; cursor:help; } a:link, a:visited{ color:#fff; font-weight:bold; text-decoration:underline; } a:hover, a:active{ color:#bcd0e5; text-decoration:none; } #pageHeader{ width:396px; height:319px; background:url(pics/header.jpg) no-repeat top left; } #quickSummary{ margin:-0.9em 0 0 0; padding:0; } #quickSummary .p2{ padding:0; margin:0 0 0.9em 0; width:396px; height:25px; background:url(pics/download.gif) no-repeat top left; } #quickSummary .p2 span{ visibility:hidden; white-space:nowrap; } #quickSummary .p2 span a{ visibility:visible; text-indent:-9000px; display:block; margin-top:-1.1em; height:25px; float:left; width:198px; overflow:hidden; } #linkList{ background:#fff url(pics/background2.gif) repeat-y top center; padding-top:0.5em; } #lselect h3, #larchives h3, #lresources h3{ width:336px; height:21px; margin-top:1em; } #lselect h3{ background:url(pics/header_design.gif) no-repeat top left; } #larchives h3{ background:url(pics/header_archives.gif) no-repeat top left; } #lresources h3{ background:url(pics/header_resources.gif) no-repeat top left; } #lresources ul{ padding-bottom:8em; } #footer{ text-align:center; position:absolute; margin-top:43em; margin-left:-30px; padding:6px 0; padding-bottom:1em; width:396px; height:72px; text-transform:uppercase; background:url(pics/footer.gif) bottom left no-repeat; } #extraDiv1{ position:fixed; top:0; width:37px; height:433px; left:50%; margin-left:-235px; background:url(pics/the_beauty.gif) no-repeat top left; } * html #extraDiv1{ position:absolute; } /*hidden*/ #linkList h3 span, #pageHeader h1, #pageHeader h2, #quickSummary p.p1 span{ display:none; }/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* CSS Zen Garden Top Level Styles || William Duffy || www.wdart.co.uk || 01 March 2006 /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ body { color: #AB9F82; font: 9pt/13pt georgia, sans-serif; margin: 0px; padding: 0px; background: black url(images/background_body.jpg) no-repeat center top; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ acronym { border-bottom: 1px dotted #AB9F82; cursor: help; font-weight: bold; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Container Styles /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #container { margin: 0px auto 0px auto; position: relative; width: 750px; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Intro Styles /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #intro #pageHeader { background: transparent url(images/background_pageheader.jpg) no-repeat 17px 22px; width: 464px; height: 446px; } #intro #pageHeader h1, #intro #pageHeader h2 { margin: 0px; } #intro #pageHeader h1 span, #intro #pageHeader h2 span { display: none; } #intro #quickSummary { background: transparent url(images/txt_quicksummary.gif) no-repeat left top; color: #D9D0B7; position: absolute; top: 186px; left: 336px; width: 172px; height: 160px; } #intro #quickSummary .p1 { display: none; } #intro #quickSummary .p2 { background: transparent url(images/bullet_download.gif) no-repeat 0px 4px; color: #E8D6A3; padding: 0px 0px 0px 12px; position: absolute; top: 1110px; left: 203px; z-index: 100; width: 150px; } #intro #quickSummary .p2 a {color: #DEC35A; text-decoration: underline;} #intro #quickSummary .p2 a:visited {color: #DEC35A;} #intro #quickSummary .p2 a:hover {color: #E8D6A3;} #intro #preamble { background: transparent url(images/breakrule.gif) no-repeat center bottom; padding: 25px 0px 37px 0px; width: 464px; } #intro #preamble .p1, #intro #preamble .p2, #intro #preamble .p3, #intro #preamble .p4, #intro #preamble .p5 { padding: 0px 0px 0px 49px; } #intro #preamble h3 { background: transparent url(images/txt_sowhatisthisabout.gif) no-repeat left top; height: 25px; margin: 0px 0px -9px 27px; } #intro #preamble h3 span { display: none; } /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* supportingText Styles /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #supportingText #explanation, #supportingText #participation, #supportingText #benefits, #supportingText #requirements { background: transparent url(images/breakrule.gif) no-repeat center bottom; padding: 25px 0px 37px 0px; width: 464px; } #supportingText .p1, #supportingText .p2, #supportingText .p3, #supportingText .p4, #supportingText .p5 { padding: 0px 0px 0px 49px; } #supportingText a {color: #D2C9BB;} #supportingText a:visited {color: #D2C9BB;} #supportingText a:hover {color: #D34E1A;} #supportingText h3 { height: 25px; margin: 0px 0px -9px 27px; } #supportingText h3 span { display: none; } #supportingText #explanation h3 {background: transparent url(images/txt_participation.gif) no-repeat left top;} #supportingText #participation h3 {background: transparent url(images/txt_benefits.gif) no-repeat left top;} #supportingText #benefits h3 {background: transparent url(images/txt_participation.gif) no-repeat left top;} #supportingText #requirements h3 {background: transparent url(images/txt_requirements.gif) no-repeat left top;} #supportingText #footer { background: transparent url(images/background_footer.jpg) no-repeat right bottom; height: 20px; padding: 152px 0px 0px 0px; text-align: right; } #supportingText #footer a {color: #CCAD50; font-weight: bold; text-decoration: none;} #supportingText #footer a:visited {color: #CCAD50;} #supportingText #footer a:hover {color: #D2C9BB;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* linkList Styles /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #linkList { color: #E8D6A3; position: absolute; top: 75px; left: 516px; width: 205px; } #linkList a {color: #E8D6A3; text-decoration: none;} #linkList a:visited {color: #E8D6A3;} #linkList a:hover {color: #DEC35A; text-decoration: underline;} /* Begin lselect styles */ #linkList #lselect { font-style: italic; } #linkList #lselect h3 { background: transparent url(images/txt_designs.gif) no-repeat left top; margin: 0px 0px -17px 0px; width: 168px; height: 79px; } #linkList #lselect h3 span { display: none; } #linkList #lselect ul { list-style-type: none; margin: 0px 0px 0px 20px; padding: 0px; } #linkList #lselect ul li { background: transparent url(images/bullet_designs.gif) no-repeat left 4px; padding: 0px 0px 12px 14px; } #linkList #lselect a {display: block; font-style: normal; font-weight: bold;} #linkList #lselect a.c {display: inline; font-weight: normal;} /* End lselect styles */ /* Begin larchives styles */ #linkList #larchives h3 { background: transparent url(images/txt_archives.gif) no-repeat left top; margin: 0px 0px -17px 0px; width: 168px; height: 79px; } #linkList #larchives h3 span { display: none; } #linkList #larchives ul { list-style-type: none; margin: 0px 0px 0px 20px; padding: 0px; } #linkList #larchives ul li { background: transparent url(images/bullet_designs.gif) no-repeat left 4px; padding: 0px 0px 0px 14px; } /* End larchives styles */ /* Begin lresources styles */ #linkList #lresources { background: transparent url(images/background_lresources.jpg) no-repeat left top; padding: 117px 0px 0px 38px; position: absolute; top: 950px; left: -37px; width: 233px; height: 422px; } #linkList #lresources h3 { background: transparent url(images/txt_resources.gif) no-repeat left top; margin: 0px 0px -17px 0px; width: 168px; height: 79px; } #linkList #lresources h3 span { display: none; } #linkList #lresources ul { list-style-type: none; margin: 0px 0px 0px 20px; padding: 0px; } #linkList #lresources ul li { background: transparent url(images/bullet_resources.gif) no-repeat left 5px; padding: 0px 0px 0px 14px; } /* End lresources styles */ /* css Zen Garden submission - 'spring360', by Rene Hornig, http://www.medialab360.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Rene Hornig */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ * { margin: 0; padding: 0; } body { background: #DFDBD3 url(images/bg.gif) top left repeat-x; color: #4C4C4C; font-family: Verdana,Arial,Helvetica,sans-serif; } p { font-size: .8em; line-height: 2em; } h3 { font-size: .7em; font-weight: bold; line-height: 1.3em; padding-top: 2.5em; } acronym, abbr { background: transparent url(images/abbr.gif) bottom left repeat-x; border: 0 none; cursor: help; font-style: italic; } a:link, a:visited { background: #EBF3CE; color: #5D7403; text-decoration: none; } a:hover, a:active, a:focus { background: #B2CF42; color: #FFF; } #container { background: transparent url(images/contbg.gif) top left repeat-y; width: 700px; } #intro, #supportingText { padding: 0 69px 0 86px; width: 545px; } #intro { background: transparent url(images/logo.gif) top left no-repeat; padding-top: 230px; } #preamble h3, #preamble p, #supportingText h3, #supportingText p { padding-left: 10px; padding-right: 40px; } #preamble, #explanation, #participation, #benefits, #requirements { border-bottom: 1px solid #E4E1DB; padding-bottom: 20pt; } #pageHeader, #pageHeader h1, #pageHeader h2, #quickSummary .p1, #linkList2 h3 span { display: none; } #quickSummary .p2 { background: transparent url(images/nav_dl.gif) top left no-repeat; display: block; font-size: .6em; font-weight: bold; left: 661px; line-height: 1.4em; padding: 40px 40px 0 30px; position: absolute; top: 160px; width: 141px; z-index: 20; } #quickSummary .p2 a:link, #quickSummary .p2 a:visited { background: transparent; color: #E6E3DE; text-decoration: none; } #linkList { background: transparent url(images/navbg.gif) top left repeat-y; left: 661px; padding-top: 10em; position: absolute; top: 130px; width: 285px; z-index: 10; } #linkList2 { background: transparent url(images/navbtmbg.gif) bottom left no-repeat; font: .6em/1.4em verdana, sans-serif; padding-bottom: 160px; } #linkList2 h3 { background: transparent top left no-repeat; display: block; height: 26px; padding: 0 0 10px 0; width: 285px; } #linkList2 .select { background-image: url(images/nav_des.gif); } #linkList2 .archives { background-image: url(images/nav_arch.gif); } #linkList2 .resources { background-image: url(images/nav_res.gif); } #linkList2 ul { list-style-type: none; padding: 0 75px 25px 15px; } #linkList2 li { color: #E6E3DE; padding: 6px 10px; } #linkList2 a:link, #linkList2 a:visited { background: transparent; color: #4C4C4C; font-weight: bold; } #linkList2 a.c:link, #linkList2 a.c:visited { color: #E6E3DE; font-weight: normal; } #quickSummary .p2 a:hover, #quickSummary .p2 a:active, #quickSummary .p2 a:focus, #linkList2 a:hover, #linkList2 a:active, #linkList2 a:focus, #linkList2 a.c:hover, #linkList2 a.c:active, #linkList2 a.c:focus { background: #B2CF42; color: #FFF; text-decoration: none; } #lselect li { background: transparent url(images/navico.gif) 3pt 5pt no-repeat; border-bottom: 1px solid #CFCCC4; padding: 7px 10px 7px 25px; } #footer { font-size: .7em; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; text-align: center; } #footer a:link, #footer a:visited, #footer a:hover, #footer a:active, #footer a:focus { background: transparent; color: #857E70; }/* css Zen Garden submission - 'A Walk in the Garden', by Simon Van Hauwermeiren,, http://users.skynet.be/bk316398/temp.html */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Simon Van Hauwermeiren */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ html { background: url(02.gif); margin: 0; padding: 0; } body { margin: 0; padding: 0; } #container { background: url(08.jpg) no-repeat 270px 1335px; } p { font-family: Georgia, serif; font-size: 12px; color: #666; margin: 10px 15px 20px 10px; line-height: 16px; } acronym { color: #063; border-bottom: 1px dotted #063; cursor: help; } #pageHeader h1 { background: url(01.jpg) no-repeat left top; width: 750px; height: 404px; margin: 0; } #pageHeader h1 span, #pageHeader h2, #quickSummary p.p1 { display: none; } #preamble h3 { background: url(conh1.gif) no-repeat left top; width: 367px; height: 68px; margin: 0; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display: none; } #explanation h3 { background: url(conh2.gif) no-repeat left top; width: 367px; height: 68px; margin: 0; } #participation h3 { background: url(conh3.gif) no-repeat left top; width: 367px; height: 68px; margin: 0; } #benefits h3 { background: url(conh4.gif) no-repeat left top; width: 367px; height: 68px; margin: 0; } #requirements h3 { background: url(conh5.gif) no-repeat left top; width: 367px; height: 68px; margin: 0; } #participation a, #requirements a, #quickSummary a, #footer a { color: #063; text-decoration: underline; } #participation a:hover, #requirements a:hover, #quickSummary a:hover { text-decoration: none; } #footer a:hover { color: #FFF; text-decoration: none; background: #063; } #supportingText { width: 367px; text-align: justify; } #intro { width: 367px; text-align: justify; } #quickSummary p.p2 { background: url(05.gif) no-repeat right top; padding: 0 40px 0 0; margin: -20px 0 0 0; height: 50px; line-height: 42px; text-align: right; font-style: italic; } #linkList { position: absolute; top: 470px; left: 405px; font-family: Verdana, Arial, sans-serif; font-size: 10px; } #lselect ul { background: url(03.gif) no-repeat left top; height: 465px; width: 208px; margin: 0; padding: 0; } #lselect li { background: url(04.gif) no-repeat left top; height: 39px; width: 120px; list-style-type: none; padding: 5px 0 0 55px; } #larchives ul { background: url(06.gif) no-repeat left top; width: 208px; height: 113px; margin: 0; padding: 0; } #larchives li { list-style-type: square; padding: 7px 0 0 5px; margin: 0 0 0 35px; } #lresources ul { background: url(07.gif) no-repeat left top; width: 208px; height: 164px; margin: 0; padding: 0; } #lresources li { list-style-type: square; padding: 7px 0 0 5px; margin: 0 0 0 35px; } #lresources h3 { padding: 0; background: url(listh3.gif) no-repeat left bottom; width: 208px; height: 50px; margin: 0; } #lresources h3 span { display: none; } #larchives h3 { padding: 0; background: url(listh2.gif) no-repeat left bottom; width: 208px; height: 50px; margin: 0; } #larchives h3 span { display: none; } #lselect h3 { background: url(listh1.gif) no-repeat left bottom; width: 208px; height: 50px; margin: 0; } #lselect h3 span { display: none; } #lselect a.c { display: inline; color: #333; text-decoration: underline; font-size: 10px; } #lselect a.c:hover { color: #333; text-decoration: none; } #lselect a { font-family: Arial, Verdana, sans-serif; display: block; font-size: 12px; color: #063; text-decoration: underline; } #lselect a:hover, #lresources a:hover, #larchives a:hover { color: #633; text-decoration: none; } #lresources a, #larchives a { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #063; text-decoration: underline; } #footer { clear: both; width: 605px; border-top: 1px solid #666; font-family: Verdana, Arial, sans-serif; font-size: 14px; text-align: right; margin: 0 0 15px 0; }/* css Zen Garden submission - 'Kyoto Forest', by John Politowski, http://rpmdesignfactory.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2007, John Politowski */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* basic elements */ html { margin: 0; padding: 0; } body { font-family:Arial, Helvetica, sans-serif; line-height:18px; font-size:12px; color: #06185c; background: #e6fad6 url(body_bg.jpg) no-repeat top center; margin: 0; padding: 0; } body a:link, a:active, a:visited{ text-decoration:none; color:#720a0b; } body a:hover{ text-decoration:underline; } p{ margin: 10px; padding: 0; } h3 { display:none; } ul { list-style-type: none; padding-left: 0; margin-left: 0; } li { background: url(bullet.gif) left center no-repeat; padding-left: 7px; margin-bottom: 5px; } acronym { border-bottom: none; } /* content div's */ #container { margin: auto; width:892px; background:url(content_bg_top.jpg) no-repeat top center; position:relative; } #intro{ width:892px; height:451px; } #pageHeader { background:url(header_what_about.gif) no-repeat top center; height:34px; overflow:hidden; position:absolute; top:462px; left:205px; width:587px; } #pageHeader span{ display:none; } #quickSummary { display:none; } #preamble{ padding:240px 100px 0 205px; } #preamble p.p1{ margin-top: 20px; } #supportingText{ background-image:url(content_tile.jpg); height:100%; } #explanation { padding:50px 100px 30px 205px; background:url(content_bg_bottom.jpg) top no-repeat; height:100%; } #participation { margin:20px 100px 30px 205px; padding-top:40px; background: url(header_participation.gif) no-repeat top center; height:100%; } #benefits { margin:65px 100px 30px 205px; padding-top:40px; background: url(header_benefits.gif) no-repeat top center; height:100%; } #requirements{ margin:65px 100px 30px 205px; padding:40px 0 15px 0; background: url(header_requirements.gif) no-repeat top center; border-bottom:1px solid #720a0b; height:100%; } #footer{ padding:10px; text-align:center; } /* link list and extra div's */ #linkList { position:absolute; width:150px; top:603px; z-index:5; color: #666666; font-size:10px; left: 25px; height:550px; line-height:13px; } #linkList a:link, a:active, a:visited { color:#113c05; text-decoration:none; } #linkList a:hover{ text-decoration: underline; } #lselect{ background:url(header_select_design.gif) top left no-repeat; margin: 5px 0 0 0; padding: 20px 0 0 0; width:150px; } #larchives{ background:url(header_archives.gif) top left no-repeat; margin: 10px 0 0 0; padding: 30px 0 0 0; width:150px; } #lresources{ background:url(header_resources.gif) top left no-repeat; margin: 15px 0 0 0; padding: 30px 0 0 0; width:150px; }/* css Zen Garden submission - 'Sakura', by Tatsuya Uchida, http://www.re-bloom.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Tatsuya Uchida */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* /////////////// basic elements /////////////// */ body { margin:0; padding:0; font:75%/1.4 verdana,Helvetica,sans-serif; background-image:url(body_bg.gif); text-align:center; } h1,h2,h3 span { display:none; } h3 { height:39px; margin:0; padding:0; } p {margin:0;padding:0;} acronym { border:none; } a { color:#D9189F; background-color:#ffffff; text-decoration:underline; } a:hover, a:hover { color:#FC7AD5; background-color:#ffffff; } /* ////////////// layout ///////////////// */ #container { width:772px; margin:0 auto; padding:0 13px; position:relative; background:url(bg.gif) repeat-x #dfdfdf; border-left:1px solid #ffffff; border-right:1px solid #ffffff; color:#454545; text-align:left; } #pageHeader { width:772px; height:179px; background:url(top.jpg); } #quickSummary, #preamble, #explanation, #participation, #benefits, #requirements { width:546px; background-color:#ffffff; background-repeat:repeat-y; margin:0 0 2px 226px; color:#454545; display:block;padding:0; } #footer { width:539px; margin:5px 0 0 226px; text-align:right; padding:3px 14px 43px 0; } #linkList { position:absolute; top:179px; left:20px; width:207px; } #lselect, #larchives, #lresources { margin:0 0 2px 0; } #quickSummary p span, #explanation p span, #benefits p span { padding:0 15px 10px 77px; display:block; } #preamble p span, #participation p span, #requirements p span { padding:0 85px 10px 17px; display:block; } #requirements .p5 { padding:0 85px 10px 17px; } #requirements .p5 span { display:inline; padding:0; } #linkList li { list-style:none; padding:6px 0 10px 0; background:url(line.gif) bottom repeat-x; } #linkList li a { padding-left:7px; background:url(link.gif) left center no-repeat; text-decoration:none; } #linkList li a:hover { text-decoration:underline; } #quickSummary .p1 span { padding-top:14px; background:url(quicksummary_top.gif) top no-repeat; } #quickSummary .p2 span { padding-bottom:20px; background:url(right_bottom.gif) bottom no-repeat; } #lselect li a { display:block; font-weight:bold; background-position:0 0.6em; } #lselect .c { display:inline; color:#666666; padding:0; background:none; background-color:#ffffff; } #footer a{ text-decoration:none; color:#888888; background-color:#dfdfdf; border:1px solid #bdbdbd; padding:3px 3px; height:100%; } #footer a:hover{ background-color:#ebebeb; color:#777777; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6{display:none;} /* ///////////// background image ////////////// */ /* right image */ #quickSummary p, #explanation p , #benefits p { background:url(right_bg.gif) right repeat-y; } #lselect, #larchives, #lresources { background:url(left_bg.gif) repeat-y; } /* side image */ #quickSummary {background-image:url(img_quicksummary.jpg);background-position:left bottom;} #preamble {background-image:url(img_preamble.jpg);background-position:right bottom;} #explanation {background-image:url(img_explanation.jpg);background-position:left bottom;} #participation {background-image:url(img_participation.jpg);background-position:right bottom;} #benefits {background-image:url(img_benefits.jpg);background-position:left bottom;} #requirements {background-image:url(img_requirements.jpg);background-position:right bottom;} /* h3 image */ #preamble h3 {background:url(title_preamble.gif) no-repeat;} #explanation h3 {background:url(title_explanation.gif) no-repeat;} #participation h3 {background:url(title_participation.gif) no-repeat;} #benefits h3 {background:url(title_benefits.gif) no-repeat;} #requirements h3 {background:url(title_requirements.gif) no-repeat;} #lselect h3 {background:url(title_select.gif) no-repeat;} #larchives h3 {background:url(title_archives.gif) no-repeat;} #lresources h3 {background:url(title_resources.gif) no-repeat;} /* bottom image */ #preamble .p3 span, #explanation .p2 span, #participation .p3 span, #benefits .p1 span, #requirements .p5{ padding-bottom:20px; background:url(right_bottom.gif) bottom no-repeat; } #lselect ul, #larchives ul, #lresources ul{ margin:0; padding:0 25px 20px 17px; background:url(left_bottom.gif) bottom no-repeat; } /* css Zen Garden submission - 'CSS Co., Ltd.', by Benjamin Klemm, http://www.re-bloom.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2007, Benjamin Klemm */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ * { margin: 0; padding: 0; } body { background: #DADADA url(bg_body.gif) left top repeat-x; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; } #container { margin: 0 auto; width: 776px; position: relative; background: transparent url(bg_container.gif) left top repeat-y; z-index: 1; margin-bottom: 50px; } /* Formatierung des Intro Blocks -----------------------------------------------------------------------*/ #intro { background: transparent url(bg_intro.jpg) right top no-repeat; position: relative; padding: 1px; } #pageHeader { display: inline; height: 0; left: -1000px; overflow: hidden; position: absolute; top: -1000px; width: 0; } #pageHeader h1{ font: bold 154%/25px Arial, Helvetica, sans-serif; } #pageHeader h2{ font: bold 90%/25px Arial, Helvetica, sans-serif; } #quickSummary { color: #000; font: normal 75%/18px Arial, Helvetica, sans-serif; right: 60px; position: absolute; top: 25px; } #quickSummary .p1 { display: inline; height: 0; left: -1000px; overflow: hidden; position: absolute; top: -1000px; width: 0; } #quickSummary a, #quickSummary a:link, #quickSummary a:visited { color: #F29E00; font-weight: bold; } #quickSummary a:hover, #quickSummary a:active, #quickSummary a:focus { text-decoration: none; } #preamble { background: transparent url(bg_preamble.jpg) right top no-repeat; color: #fff; font: normal 80%/18px Arial, Helvetica, sans-serif; padding: 80px 30px 15px 15px; margin-left: 210px; margin-top: 192px; height: 100%; } #preamble h3 { background: transparent url(hl_roadto.gif) left top no-repeat; height: 37px; margin: 0 0 10px 0; width: 508px; } #preamble acronym { border-bottom:1px dotted #F29E00; color: #F29E00; font-weight: normal; font-size: 85%; } #preamble p { padding-left: 30px; } /* Formatierung des Content Blocks (supportingText) -----------------------------------------------------------------------*/ #supportingText { color: #fff; margin-left: 210px; font: normal 80%/18px Arial, Helvetica, sans-serif; padding: 15px 35px 15px 15px; position: relative; height: 100%; } #supportingText acronym { border-bottom:1px dotted #F29E00; color: #F29E00; font-size: 85%; font-weight: normal; } #supportingText a, #supportingText a:link, #supportingText a:visited { color: #F29E00; font-weight: bold; text-decoration: underline; } #supportingText a:hover, #supportingText a:active, #supportingText a:focus { text-decoration: none } #supportingText p { padding-left: 30px; } #explanation { width: 250px; float: left; } #explanation h3 { background: transparent url(hl_sowhat.gif) left top no-repeat; height: 37px; margin: 0 0 10px 1px; width: 260px; } #explanation .p1 { background: transparent url(cont_img_01.jpg) 30px 0px no-repeat; padding-top: 130px; } #participation { margin-left: 265px; margin-top: -23px; width: 240px; } #participation h3 { background: transparent url(hl_participation.gif) left top no-repeat; height: 37px; margin: 23px 0 10px 1px; width: 247px; } #participation .p1 { background: transparent url(cont_img_02.jpg) 30px 0px no-repeat; padding-top: 130px; } #benefits h3 { background: transparent url(hl_benefits.gif) left top no-repeat; height: 37px; margin: 23px 0 10px 1px; width: 508px; } #requirements { margin-bottom: 50px; } #requirements h3 { background: transparent url(hl_requirements.gif) left top no-repeat; height: 37px; margin: 23px 0 10px 1px; width: 508px; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display: inline; height: 0; left: -1000px; overflow: hidden; position: absolute; top: -1000px; width: 0; } /* Die Linklisten -----------------------------------------------------------------------*/ #linkList { background: transparent url(bg_linkList.gif) 0px 2px repeat-y; color: #fff; font-weight: normal; padding: 15px 10px 0 0; position: absolute; top: 193px; width: 221px; } #linkList h3 { padding-left: 10px; } #linkList a, #linkList a:link, #linkList a:visited { color: #000; text-decoration: underline; } #linkList a:hover, #linkList a:active, #linkList a:focus { text-decoration: none; } #linkList ul li { font-size: 70%; list-style: square; } #lselect { background: transparent url(bg_lselect.gif) left bottom no-repeat; padding-bottom: 25px; } .select { background: transparent url(h1_lselect.gif) left top no-repeat; display: block; margin: 0 auto; height: 29px; width: 185px; } #lselect ul li a { display: block; font: bold 110%/19px Arial, Helvetica, sans-serif; } #lselect ul li a.c { color: #fff; display: inline; font: normal 90%/19px Arial, Helvetica, sans-serif; } #larchives { background: transparent url(bg_lselect.gif) left bottom no-repeat; padding: 15px 0 40px 0; } .archives { background: transparent url(h1_larchives.gif) left top no-repeat; display: block; margin: 0 auto; height: 29px; width: 185px; } #lresources { background: transparent url(bg_lresources.gif) left bottom no-repeat; padding-bottom: 30px; } .resources { background: transparent url(h1_lresources.gif) left top no-repeat; display: block; margin: 15px auto; height: 29px; width: 185px; } #larchives ul li a, #lresources ul li a { font-weight: bold; } #lresources ul li, #larchives ul li, #lselect ul li { margin: 14px 0 14px 35px; } .resources span, .archives span, .select span { display: inline; height: 0; left: -1000px; overflow: hidden; position: absolute; top: -1000px; width: 0; } /* Footer Formatierung -----------------------------------------------------------------------*/ #footer { background: transparent url(bg_footer.gif) left top no-repeat; bottom: -27px; left: 25px; height: 54px; line-height: 50px; position: absolute; width: 312px; padding-left: 37px; } #footer a, #footer a:link, #footer a:visited { color: #000; padding: 0 6px; } * html #footer { bottom: -28px; } /* css Zen Garden submission 210 - 'Oceanscape', by Justin Gray, http://www.pixel-house.com.au/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2007, Justin Gray */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /*------ basic elements -------------------------------------------------------------*/ body { font-family: Arial, Helvetica, sans-serif; background: #122981 url(gradient_bg.jpg) repeat-x; margin: 0px; } p { text-align: justify; color: #fff; font-size: 0.70em; line-height: 1.25em; } a:link, a:visited { text-decoration: underline; color: #a5bcff; } a:hover, a:active { text-decoration: none; color: #ff9600; } li { text-decoration: none; list-style-type: none; display: block; color: #fff; } /*------ specific divs --------------------------------------------------------------*/ #container { width: 536px; padding-left: 20px; padding-right: 20px; margin: 200px auto 0px auto; position: relative; z-index: 6; } #intro { width: 356px; float: left; } #pageHeader { margin-bottom: 20px; float: left; } /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; width: 355px; height: 29px; float: left; margin: 0px; } #pageHeader h2 { background: transparent url(h2.gif) no-repeat top left; width: 167px; height: 12px; float: right; margin: 2px 0 0 0; } #quickSummary { background: transparent url(divider01.jpg) no-repeat; float: left; padding-top: 50px; } #quickSummary p.p1 { background: transparent url(summary.gif) no-repeat; width: 356px; height: 49px; margin: 0px 0px 6px 0px; } #quickSummary p.p1 span, #pageHeader h2 span, #pageHeader h1 span { display: none; } #quickSummary p.p2 { width: 355px; display: block; } /*-----------------------------------------------------------------------------------*/ #supportingText { width: 356px; float: left; } #supportingText h3, #intro h3 { letter-spacing: 1px; margin: 0px 0px 20px 0px; color: #7D775C; width: 355px; height: 18px; } #preamble, #explanation, #participation, #benefits, #requirements { padding-top: 60px; margin-top: 6px; float: left; } #preamble { background: transparent url(divider02.jpg) no-repeat; } #explanation { background: transparent url(divider03.jpg) no-repeat; } #participation { background: transparent url(divider04.jpg) no-repeat; } #benefits { background: transparent url(divider05.jpg) no-repeat; } #requirements { background: transparent url(divider06.jpg) no-repeat; } #linkList { width: 141px; position: absolute; top: 101px; left: 410px; margin: 0px; padding: 0px; } #linkList2 { font-size: 0.70em; background: transparent url(paper-bg.jpg) top left repeat-y; padding: 10px; width: 141px; } #linkList ul { margin: 0px; padding: 0px; } #linkList a.c { display: inline; color: #ff9600; text-decoration: none; font-weight: normal; text-transform: capitalize; } #linkList li a { color: #fff; text-decoration: none; } #linkList li a:hover { text-decoration: underline; } #lselect li { line-height: 16px; padding: 5px 0px; border-bottom: 1px solid #003d90; } #lselect li a { font-weight: bold; color: #fff; display: block; text-transform: uppercase; text-decoration: none; } #larchives li, #lresources li { line-height: 16px; padding: 1px 0px; color: #fff; } /*------ Image Replacement for headings----------------------------------------------*/ #linkList h3 { width: 141px; height: 20px; display: block; margin: 0px; } #preamble h3 { background: transparent url(h3_road.gif) no-repeat; } #explanation h3 { background: transparent url(h3_about.gif) no-repeat; } #participation h3 { background: transparent url(h3_participation.gif) no-repeat; } #benefits h3 { background: transparent url(h3_benefits.gif) no-repeat; } #requirements h3 { background: transparent url(h3_requirements.gif) no-repeat; } #linkList h3.select { background: transparent url(h3_select.gif) no-repeat; } #linkList h3.archives { margin-top: 22px; background: transparent url(h3_archives.gif) no-repeat; } #linkList h3.resources { margin-top: 22px; background: transparent url(h3_resources.gif) no-repeat; } #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #linkList h3.select span, #linkList h3.archives span, #linkList h3.resources span { display: none; } /*------ footer ---------------------------------------------------------------------*/ #footer { margin-top: 20px; margin-bottom: 25px; } #footer a:link, #footer a:visited { margin-right: 6px; color: #ff9600; } /*------ main images -----------------------------------------------------------------*/ #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv3 span, #extraDiv4, #extraDiv5, #extraDiv6, #extraDiv6 span { position: absolute; } #extraDiv1 { background: url(clouds.jpg) repeat-x; top: 0px; right: 0px; width: 100%; height: 104px; } #extraDiv2 { background: url(water_edge.jpg) repeat-x; top: 104px; right: 0px; width: 100%; height: 75px; } #extraDiv3 { background: url(fish01.jpg) no-repeat right top; z-index: 3; top: 960px; right: 4%; width: 300px; height: 123px; } #extraDiv3 span { background: url(fish_bottom.gif) no-repeat; z-index: 3; top: 1000px; width: 224px; height: 108px; } #extraDiv4 { background: url(sunlight.jpg) no-repeat; z-index: 3; top: 0px; left: 0px; width: 472px; height: 481px; } #extraDiv5 { background: url(fish_top.gif) no-repeat; z-index: 7; top: 220px; left: 20px; width: 180px; height: 80px; } #extraDiv6 { z-index: 2; top: 125em; left: 0px; width: 100%; height: 426px; background: url(seafloor_bg.jpg) repeat-x left bottom; } #extraDiv6 span { z-index: 2; top: 0px; left: 0px; width: 633px; height: 426px; background: url(seafloor.jpg) no-repeat; } /* css Zen Garden submission 211 - 'Orchid Beauty', by Kevin Addison, http://www.kevinaddison.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Kevin Addison */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* Orchid Beauty Style Sheet */ /* --------------------------*/ a:link { color: #6D2542; text-decoration: none; } a:visited { color: #999999; text-decoration: none; } a:hover { color: #999999; text-decoration: underline; } a:active { color: #999999; text-decoration: none; } body { margin:0 0 0 0; padding:0 0 0 0; } #container { width:630px; margin: auto; padding: 0 0 100px 0; background-image:url(rounded.jpg); background-repeat: no-repeat; background-position:bottom; border:0px dotted #999999; position:relative; } #pageHeader { background: transparent url(header.jpg) no-repeat center top; border:0px dotted #999999; width:630px; height:387px; } #intro { width:400px; margin:0 0 0 0; border:0px dotted #999999; } #quickSummary .p2 { border:0px solid #000000; margin:-110px 0 95px 288px; padding: 0 0 0 15px; text-transform: uppercase; width:290px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#999999; background: transparent url(bullet.jpg) no-repeat 0% 28%; } #supportingText { width:350px; margin:0 0 0 0; } #preamble, #explanation, #participation, #benefits, #requirements { border-bottom:0px dotted #999999; position:relative; width:350px; margin:0 0 0 60px; } #requirements { margin-bottom:35px; } #preamble h3 { background-image: url(title01.jpg); background-repeat: no-repeat; background-position: left top; width:286px; height:64px; margin-bottom:-5px; } #explanation h3 { background-image: url(title02.jpg); background-repeat: no-repeat; background-position: left top; width:286px; height:66px; margin-bottom:-5px; } #participation h3 { background-image: url(title03.jpg); background-repeat: no-repeat; background-position: left top; width:286px; height:66px; margin-bottom:-5px; } #benefits h3 { background-image: url(title04.jpg); background-repeat: no-repeat; background-position: left top; width:286px; height:66px; margin-bottom:-5px; } #requirements h3 { background-image: url(title05.jpg); background-repeat: no-repeat; background-position: left top; width:286px; height:66px; margin-bottom:-5px; } #pageHeader h1, #pageHeader h2, #quickSummary .p1, #preamble h3 span, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span { display:none; } p { color: #999999; font-size:11px; font-weight:normal; line-height:1.4em; font-family: Geneva, Arial, Helvetica, sans-serif; } #linkList { position: absolute; left:160px; right:auto; top: 400px; padding:0 0 0 0; margin-left: 270px; width: 180px; border:0px dotted #666666; background: transparent url(orchid.jpg) no-repeat bottom; height:810px; } #linkList ul { text-align: left; list-style: none; margin: 0 0 0 0; padding:0 0 15px 35px; font-size:10px; font-family:Geneva, Arial, Helvetica, sans-serif; border:0px dotted #666666; width:120px; } #linkList ul li{ margin: 0; padding: 3px 0 3px 0; border-bottom: 1px dotted #999999; } #linkList ul li a, #linkList ul li a:visited { border-bottom: none; outline:0; } #linkList ul li a:hover { color: #999999; text-decoration: underline; } #lselect { font-size: 0.9em; } #lselect ul li { padding: 3px 0 3px 20px; background: transparent url(bullet.jpg) no-repeat 2% 25%; color:#999999; } #lselect a { display: block; font-size: 1.1em; color: #6D2542; } #lselect a.c { display:inline; line-height:5px; margin:0; padding:0; font: normal 1.0em/0.9em Geneva, Arial, Tahoma, sans-serif; color: #999999; letter-spacing: -1px; } #lselect, #larchives { margin-bottom: 5px; border:0px solid #000000; } #larchives ul li a, #lresources ul li a { color:#6D2542; } #lselect h3, #larchives h3, #lresources h3 { width: 196px; height: 40px; margin-bottom:-20px; padding:10px 0 0 35px; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; text-transform: uppercase; color:#999999; } #footer{ text-align: left; padding:0 0 0 0; margin:0 0 0 60px; } #footer a, #footer a:visited { padding: 5px; border: 1px solid #eeeeee; background-color: #fff; color: #666666; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; } #footer a:hover { padding: 5px; border: 1px solid #eeeeee; background-color: #eeeeee; color: #999999; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; text-decoration: none; } #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6{ display:none; } /* css Zen Garden submission 212 - 'Make Õem Proud!', by Michael McAghon and Scotty Reifsnyder, http://skybased.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2007, Michael McAghon and Scotty Reifsnyder */ /* IMPORTANT */ /* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. */ /* hi, and welcome */ /* Make'em Proud! */ /* CSS Zen Garden */ /* 2007 */ /* meyer reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* end meyer reset */ body#css-zen-garden { font: 62.5%/1.6 Georgia, Times, "Times New Roman", serif; color: #3C1700; position: relative; background: #edefd0 url("bg.jpg") top left repeat; margin-top: 75px; } p { font-size: 1.4em; margin: 0 0 1.6em; padding: 0 24px; clear: both; } abbr, acronym { cursor: help; } span.accesskey { border-bottom: 1px dotted #fff; } :link, :visited { font-weight: bold; text-decoration: none; color: #1e0c00; } a:active { color: #f00; } a:hover { color: #000; font-weight: bold; text-decoration: underline; } a img { border: 0; } #container { width: 645px; padding: 0 30px 0 180px; float: left; background: url("bg_container.gif") 0 50px repeat-y; } h1 { position: absolute; z-index: 101; top: -75px; left: 0; width: 179px; height: 152px; text-indent: -10001px; background: url("zen-troop-seal.gif") top left no-repeat; } h2 { margin: 0 0 2.5em -95px; width: 770px; height: 352px; text-indent: -10001px; display: block; background: url("make-em-proud.jpg") top left no-repeat; border-bottom: 4px solid #f7fad9; } h3 { text-align: center; color: #472101; height: 27px; text-indent: -10001px; background-position: 50% 0; background-repeat: no-repeat; margin: 0 0 .8em; } #preamble h3 { background-image: url("h_path-to-achieve.gif"); } #explanation h3 { background-image: url("h_what-is-about.gif"); } #participation h3 { background-image: url("h_participation.gif"); } #benefits h3 { background-image: url("h_merit-benefits.gif"); } #requirements h3 { background-image: url("h_requirements.gif"); width: 621px; margin-left: -633px; } #intro #quickSummary { background: #3C1700 url("leader.gif") 54% 15px no-repeat; color: #fff; position: absolute; top: 110px; left: 10px; width: 150px; padding: 125px 0 0; } #intro #quickSummary p.p1 { font-size: 1.2em !important; font-style: italic; padding: 0 11px 0 14px; } #intro #quickSummary p.p2 { background: #2d1100 url("h_get-started.gif") 50% 1.5em no-repeat; padding: 5em 15px 1.6em; margin: 0; font-size: 1.2em !important; } #intro #quickSummary a { color: #fff; } #linkList { width: 130px; background-color: #3c1700; position: absolute; top: 53.5em; left: 10px; padding: 2.4em 10px .8em; color: #cec5bf; } #linkList a { color: #ebe7e5; } #linkList h3 { display: block; margin: 0 0 1.2em; } #linkList ul { margin: 0 0 2.4em; font-size: 1em; text-align: center; line-height: 1.2em; } #linkList ul li { margin-bottom: .8em; text-align: center; } #lselect h3 { background-image: url("h_other-scouts.gif"); } #lselect ul li { margin: 0 0 1.2em; } #lselect ul li a { background-color: #2d1100; display: block; padding: .5em 5px .6em; font-size: 1.1em; margin-bottom: .3em; color: #fff; } #lselect ul li a.c { background-color: transparent; display: inline; padding: 0; font-size: 1em; margin-bottom: 0; color: #ebe7e5; } #larchives h3 { background-image: url("h_archives.gif"); } #lresources h3 { background-image: url("h_resources.gif"); } #supportingText { padding: .5em 0 0; position: relative; } #benefits { margin-bottom: 1em; } #requirements { float: right; width: 1px; margin: 145px -1px 0 0; display: inline; } #requirements p { width: 598px; margin-left: -646px; } #footer { float: left; background: url("merit-badges.gif") top left no-repeat; width: 645px; height: 130px; overflow: visible; position:relative; display: inline; } #footer a { text-indent: -10001px; float: right; display: block; width: 114px; height: 114px; margin: 0 7px; } #extraDiv1 { width: 855px; height: 100px; display: block; float: left; background: url("bg_req.gif") top left no-repeat; } /* don't need'em */ #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { display: none; } /* IE6 help for repositioning of badges, overall weirdness */ * html #container { float: left; height: 170em; } * html #requirements { height: 1px; width: 1px; position: relative; margin-right: -30px; } * html #requirements p, * html #requirements h3 { position: relative; } /* end sad IE6 */ /* thanks, */ /* skybased */