/* 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: #FFFFFF; margin: 0px; padding: 10px; font-family: Ubuntu, Tahoma, Sans; font-size: 90%; } p { line-height: 180%; } .page-wrapper { background-color: #EDEEF0; border: 1px solid #DAD5D9; padding: 0px; margin: 0px; } abbr { border-bottom: 1px #6BA0D2 dashed; } header,h1 { font-family: Impact, Georgia, serif; background-color: #FFFFFF; } header h1 { height: 190px; margin: 0px; background-color: black; background-image: url(Gala.jpg); background-repeat: no-repeat; } header h1, header h2 { text-indent: 100%; white-space: nowrap; overflow: hidden; } header h2 { background-color: #EDEEF0; margin: 0px; height: 24px; padding: 0px 14px 2px 14px; background-image: url(headerh2.gif); background-repeat: no-repeat; } header h2 abbr { color: #FFF; border-bottom: 1px #FFF dashed; } .summary p:first-child { position: absolute; right: 21px; top: 21px; width: 12em; height: 165px; padding: 3px 0 0 0; margin: 0px; border: 1px solid #0C2953; text-align: center; font-size: 90%; font-family: Impact, Georgia, serif; line-height: 110%; color: #FFF; background-image: url(summary.jpg); background-repeat: no-repeat; background-position: 50% 100%; background-color: #0C2953; } .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::before { content: " "; display: inline-block; padding: 35px 0px 30px 48px; background-image: url(preambleShell.jpg); background-repeat: no-repeat; background-position: 0px 50%; vertical-align: middle; } .preamble p { text-align: justify; } .preamble p:nth-child(2), .preamble p:nth-child(3) { 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:nth-child(4) { margin: 0px; padding: 0px; background-image: url(bordBasPreamble.gif); background-repeat: no-repeat; background-position: 100% 100%; background-color: #F6F7F7; padding: 10px 20px 20px 6px; } .preamble p:nth-child(4)::after { content: " "; display: block; margin: 0px; padding: 0 20px 0 6px; background-image: url(bordBasPreambleGauche.gif); background-repeat: no-repeat; background-position: 0% 100%; } .supporting { 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%; } .supporting 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); } .supporting form { padding: 30px; display: inline-block; clear: both; width: 120em; } .supporting input { margin: 8px; } .participation h3 { background-image: url(participationShell.jpg); } .benefits h3 { background-image: url(benefitsShell.jpg); } .requirements h3 { background-image: url(requirementsRock.jpg); } .supporting p { text-align: justify; margin: 10px 0px 0px 0px; padding: 1px 3px 2px 3px; } .supporting a:link { color: #0083FF; font-weight: bold; } .supporting a:visited { color: #204160; font-weight: bold; } .supporting a:hover, .supporting a:active { color: #8C0000; font-weight: bold; text-decoration: none; } .sidebar, .summary p:last-child { font-size: 90%; font-family: Impact, Georgia, serif; position: absolute; right: 21px; width: 12em; border: 1px solid #0C2953; padding: 0px; margin: 0px; background-color: #A4ACB3; } .summary p:last-child { height: 50px; text-align: center; top: 217px; font-size: 90%; display: block; padding: 3px 0; color: #FFF; } .sidebar { top: 266px; } .sidebar h3 { background-color: #0C2953; color: #FFF; margin: 0px; padding: 30px 1px 1px 1px; background-repeat: no-repeat; } .sidebar h3.select { background-image: url(selecth3.jpg); background-position: 50% 0%; } .sidebar h3.favorites { border-top: 1px solid #0C2953; background-image: url(favoritesh3.jpg); background-position: 40% 100%; } .sidebar h3.archives { border-top: 1px solid #0C2953; background-image: url(archivesh3.jpg); background-position: 40% 100%; } .sidebar h3.resources { border-top: 1px solid #0C2953; background-image: url(resourcesh3.jpg); background-position: 50% 30%; } .sidebar ul { list-style-type: none; font-size: 90%; color: #FFF; margin: 0px; padding: 0px; background-color: #A4ACB3; } .sidebar li { padding: 3px 2px 3px 2px; margin-bottom: 4px; } .sidebar li:hover { padding: 2px 1px 2px 1px; border: 1px dotted #0C2953; background-color: #6BA0D2; } .summary p:last-child a:link { color: #FFF; font-weight: bold; } .summary p:last-child a:visited { color: #204160; } .summary p:last-child a:hover, .summary p:last-child a:active { color: #FFD800; font-weight: bold; text-decoration: none; } .sidebar a:link, .sidebar a:visited { border-left: 6px solid #FFF; padding-left: 2px; font-weight: bold; color: #FFF; } .sidebar a:visited { color: #204160; } .sidebar a:hover, .sidebar a:active { border-left: 6px solid #FFD800; padding-left: 2px; color: #FFD800; text-decoration: none; font-weight: bold; } .sidebar a.designer-name:link, .sidebar a.designer-name:visited { border-left: none; padding-left: 0px; font-weight: normal; color: #FFF; } .sidebar a.designer-name:hover, .sidebar a.designer-name:active { border-left: none; padding-left: 0px; color: #FFD800; text-decoration: none; } .sidebar abbr { 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: Impact, Georgia, serif; }