Return-Path: Received: from scotty.tknetwork.de ([unix socket]) by scotty (Cyrus v2.2.13-Debian-2.2.13-10) with LMTPA; Thu, 10 Jul 2008 07:07:30 +0200 X-Sieve: CMU Sieve 2.2 Received: from localhost (localhost [127.0.0.1]) by scotty.tknetwork.de (Postfix) with ESMTP id EF1C35045F6 for ; Thu, 10 Jul 2008 07:07:28 +0200 (CEST) X-Spam-Score: -2.287 X-Spam-Level: X-Spam-Status: No, score=-2.287 tagged_above=-1000 required=5 tests=[BAYES_00=-2.599, HTML_50_60=0.134, HTML_MESSAGE=0.001, TW_XH=0.177] Received: from scotty.tknetwork.de ([127.0.0.1]) by localhost (scotty.tknetwork.de [127.0.0.1]) (amavisd-new, port 10024) with ESMTP id cATdlGtIheNp for ; Thu, 10 Jul 2008 07:07:05 +0200 (CEST) Received: from hrndva-omtalb.mail.rr.com (hrndva-omtalb.mail.rr.com [71.74.56.124]) by scotty.tknetwork.de (Postfix) with ESMTP id E885F5045ED for ; Thu, 10 Jul 2008 07:07:04 +0200 (CEST) Received: from [10.0.1.2] (really [76.168.53.182]) by hrndva-omta02.mail.rr.com with ESMTP id <20080710050425.FJET29555.hrndva-omta02.mail.rr.com@[10.0.1.2]> for ; Thu, 10 Jul 2008 05:04:25 +0000 Message-Id: <6B9B2DEB-81FD-497F-9C4D-17FD9D678377@ericstoltz.com> From: Eric Stoltz To: Tristan Koch In-Reply-To: <48734F7E.9080002@tknetwork.de> Content-Type: multipart/alternative; boundary=Apple-Mail-3--1011622492 Mime-Version: 1.0 (Apple Message framework v924) Subject: Re: Under The Seal, HTML 5 Adoption Date: Wed, 9 Jul 2008 22:04:22 -0700 References: <48734F7E.9080002@tknetwork.de> X-Mailer: Apple Mail (2.924) --Apple-Mail-3--1011622492 Content-Type: text/plain; charset=WINDOWS-1252; format=flowed; delsp=yes Content-Transfer-Encoding: quoted-printable Hi Tristan, Certainly! Glad to help. You have my permission to reproduce the design. Eric On Jul 8, 2008, at 4:29 AM, Tristan Koch wrote: > Hi Eric, > > I've converted the Zen Garden HTML Template to HTML 5. You might =20 > have heard about HTML 5. Besides other things, it introduces a whole =20= > new set of elements to enable authors to structure documents and =20 > applications better than before. > > See attached the adopted .html and .css file. I have not validated =20 > yet, the HTML 5 validator is down. I've commented the file so if you =20= > like to take a look at HTML 5=85 > > Why am I writing this? Well, I'm writing my thesis about HTML 5 and =20= > related APIs and I'm looking for a good looking design to showcase =20 > the HTML 5 template. I think your design qualifies as *very* good =20 > looking, so I thought, I'd ask if its okay to use it? > > I assume, your .css is under under a Creative Commons license, as =20 > required by Zen Garden? > > Moreover, would you grant permission to use your artwork. If you =20 > like, I can put the demo on a restricted page that only my tutor can =20= > see? > > (Of course, you would be named as the creator of the art work.) > > ---- > You can find a short writeup about HTML 5 at "A List Apart", see = http://www.alistapart.com/articles/previewofhtml5 > > More about HTML 5 on > http://www.whatwg.org > ---- > > I'd be happy to hear from you! > > Tristan > A demonstration of what can be accomplished visually through CSS-=20 > based design using HTML 5 structured content. > > Download the sample html file and css file > > The Road to Enlightenment > > Littering a dark and dreary road lay the past relics of browser-=20 > specific tags, incompatible DOMs, and broken CSS support. > > Today, we must clear the mind of past practices. Web enlightenment =20 > has been achieved thanks to the tireless efforts of folk like the =20 > W3C,WaSP and the major browser creators. > > The css Zen Garden invites you to relax and meditate on the =20 > important lessons of the masters. Begin to see with clarity. Learn =20 > to use the (yet to be) time-honored techniques in new and =20 > invigorating fashion. Become one with the web. > > So What is This About? > > There is clearly a need for CSS to be taken seriously by graphic =20 > artists. The Zen Garden aims to excite, inspire, and encourage =20 > participation. To begin, view some of the existing designs in the =20 > list. Clicking on any one will load the style sheet into this very =20 > page. The code remains the same, the only thing that has changed is =20= > the external .css file. Yes, really. > > CSS allows complete and total control over the style of a hypertext =20= > document. The only way this can be illustrated in a way that gets =20 > people excited is by demonstrating what it can truly be, once the =20 > reins are placed in the hands of those able to create beauty from =20 > structure. To date, most examples of neat tricks and hacks have been =20= > demonstrated by structurists and coders. Designers have yet to make =20= > their mark. This needs to change. > > Participation > > Graphic artists only please. You are modifying this page, so strong =20= > CSS skills are necessary, but the example files are commented well =20 > enough that even CSS novices can use them as starting points. Please =20= > see the CSS Resource Guide for advanced tutorials and tips on =20 > working with CSS. > > You may modify the style sheet in any way you wish, but not the =20 > HTML. This may seem daunting at first if you=92ve never worked this =20= > way before, but follow the listed links to learn more, and use the =20 > sample files as a guide. > > Download the sample html file and css file to work on a copy =20 > locally. Once you have completed your masterpiece (and please, don=92t = =20 > submit half-finished work) upload your .css file to a web server =20 > under your control. Send us a link to the file and if we choose to =20 > use it, we will spider the associated images. Final submissions will =20= > be placed on our server. > > Benefits > > Why participate? For recognition, inspiration, and a resource we can =20= > all refer to when making the case for CSS-based design. This is =20 > sorely needed, even today. More and more major sites are taking the =20= > leap, but not enough have. One day this gallery will be a historical =20= > curiosity; that day is not today. > > Requirements > > We would like to see as much CSS1 as possible. CSS2 should be =20 > limited to widely-supported elements only. The css Zen Garden is =20 > about functional, practical CSS and not the latest bleeding-edge =20 > tricks viewable by 2% of the browsing public. The only real =20 > requirement we have is that your CSS validates. > > Unfortunately, designing this way highlights the flaws in the =20 > various implementations of CSS. Different browsers display =20 > differently, even completely valid CSS at times, and this becomes =20 > maddening when a fix for one leads to breakage in another. View the =20= > Resources page for information on some of the fixes available. Full =20= > browser compliance is still sometimes a pipe dream, and we do not =20 > expect you to come up with pixel-perfect code across every platform. =20= > But do test in as many as you can. If your design doesn=92t work in at = =20 > least IE5+/Win and Mozilla (run by over 90% of the population), =20 > chances are we won=92t accept it. > > We ask that you submit original artwork. Please respect copyright =20 > laws. Please keep objectionable material to a minimum; tasteful =20 > nudity is acceptable, outright pornography will be rejected. > > This is a learning exercise as well as a demonstration. You retain =20 > full copyright on your graphics (with limited exceptions, see =20 > submission guidelines), but we ask you release your CSS under a =20 > Creative Commons license identical to the one on this site so that =20 > others may learn from your work. > > Bandwidth graciously donated by mediatemple Now available: Zen =20 > Garden, the book > > xhtml css cc 508 aaa > Select a Design: > > Under the Sea! by Eric Stoltz > Make =92em Proud by Michael McAghon and Scotty Reifsnyder > Orchid Beauty by Kevin Addison > Oceanscape by Justin Gray > CSS Co., Ltd. by Benjamin Klemm > Sakura by Tatsuya Uchida > Kyoto Forest by John Politowski > A Walk in the Garden by Simon Van Hauwermeiren > Archives: > > next designs =BB > View All Designs > Resources: > > View This Design=92s CSS > CSS Resources > FAQ > Submit a Design > Translations > /* ::::: http://www.csszengarden.com/213/213.css ::::: */ > > /* based on the work of Eric Stoltz, modified to apply to HTML 5 =20 > document */ > /* copyright of all graphics belongs to Eric Stoltz, permission to =20 > redistribute granted (???) */ > > html { > margin:0; > padding:0; > height:100%; > width:100%; > } > > body { > margin:0; > padding:0; > font-family:Georgia,"Times New Roman",Times,serif; > font-size:.9em; > height:100%; > width:100%; > background-image:url('water.png'); > background-repeat:repeat-x; > background-position:center top; > background-color:rgb(240, 236, 214); > } > > p { > } > > h3 { > } > > a:link { > color:rgb(153, 51, 0); > text-decoration:none; > } > > a:visited { > color:rgb(153, 153, 0); > text-decoration:none; > } > > a:hover,a:active { > border-bottom:1px dotted rgb(153, 51, 0); > color:rgb(153, 51, 0); > text-decoration:none; > } > > acronym { > } > > /* those elements have no default style */ > section,header,nav,article,aside,footer { > display:block; > } > > body > section { > width:700px; > margin-right:auto; > margin-left:auto; > margin-top:0; > background-image:url('squid-blowfish.png'); > background-repeat:no-repeat; > background-position:right top; > z-index:4; > position:relative; > } > > section > header { > margin-top:0; > padding-top:130px; > } > > section > header h1 { > background-image:url('title.png'); > height:195px; > width:290px; > background-repeat:no-repeat; > margin-top:0; > position:absolute; > } > > section > header h1 span { > display:none; > } > > section > header h2 { > background-image:url('beauty.png'); > background-repeat:no-repeat; > height:234px; > width:33px; > margin-left:8px; > position:absolute; > margin-top:250px; > } > > section > header > header span { > display:none; > } > > section > header > header { > z-index:5; > margin-top:-130px; > position:absolute; > } > > section > header > footer { > background-image:url('top.png'); > background-repeat:no-repeat; > width:385px; > padding-bottom:20px; > } > > section > header > footer p { > font-size:.7em; > font-style:italic; > margin-left:60px; > margin-right:60px; > line-height:120%; > text-align:center; > } > > section > header > footer .p1 { > padding-top:60px; > } > > section > header > footer .p2 { > font-style:normal; > font-variant:small-caps; > font-size:.8em; > } > > section > header section { > margin-top:0; > width:385px; > margin-bottom:0; > padding-bottom:20px; > background-image:url('back.png'); > } > > section > header section h3 { > margin-top:0; > background-image:url('enlightenment.png'); > height:45px; > width:242px; > margin-left:70px; > } > > section > header section h3 span { > display:none; > } > > section > header section p { > font-size:.8em; > margin-left:60px; > margin-right:60px; > line-height:140%; > } > > section > article { > margin-top:0; > width:385px; > background-image:url('end.png'); > background-repeat:no-repeat; > background-position:center bottom; > padding-bottom:600px; > margin-bottom:50px; > } > > section > article h3 { > margin-top:0; > } > > section > article p { > font-size:.8em; > margin-left:60px; > margin-right:60px; > line-height:140%; > } > > #explanation { > background-image:url('back.png'); > padding-bottom:20px; > } > > #explanation h3 { > background-image:url('about.png'); > background-repeat:no-repeat; > height:45px; > width:242px; > margin-left:70px; > } > > #explanation h3 span { > display:none; > } > > #participation { > background-image:url('back.png'); > padding-bottom:20px; > } > > #participation h3 { > background-image:url('participation.png'); > background-repeat:no-repeat; > height:45px; > width:242px; > margin-left:70px; > } > > #participation h3 span { > display:none; > } > > #benefits { > background-image:url('back.png'); > padding-bottom:20px; > } > > #benefits h3 { > background-image:url('benefits.png'); > background-repeat:no-repeat; > height:45px; > width:242px; > margin-left:70px; > } > > #benefits h3 span { > display:none; > } > > #requirements { > background-image:url('back.png'); > margin-bottom:0; > } > > #requirements h3 { > background-image:url('requirements.png'); > background-repeat:no-repeat; > height:45px; > width:242px; > margin-left:70px; > } > > #requirements h3 span { > display:none; > } > > #requirements .p5 { > margin-bottom:0; > padding-bottom:20px; > background-image:url('huzzah.png'); > background-repeat:no-repeat; > background-position:center top; > padding-top:45px; > text-align:center; > font-style:italic; > } > > #requirements .p5 a { > display:block; > font-family:Arial,Helvetica,sans-serif; > font-style:normal; > font-weight:bold; > text-transform:uppercase; > } > > #requirements .p5 a:hover { > border-style:none; > color:rgb(51, 51, 51); > text-decoration:underline; > } > > article > footer { > position:absolute; > bottom:700px; > margin-left:350px; > z-index:6; > font-family:Arial,Helvetica,sans-serif; > text-transform:uppercase; > font-size:.75em; > background-image:url('footer.png'); > background-repeat:no-repeat; > height:57px; > width:252px; > text-align:center; > padding-top:15px; > padding-right:40px; > visibility:visible; > } > > section > nav { > background-image:url('menu-top.png'); > background-repeat:no-repeat; > background-position:center top; > width:225px; > padding-top:104px; > position:absolute; > top:300px; > margin-left:375px; > font-family:Georgia,"Times New Roman",Times,serif; > font-size:.8em; > } > > section > nav ul { > margin-left:35px; > padding-left:10px; > list-style-image:url('bullet.png'); > list-style-position:outside; > margin-top:5px; > } > > section > nav li { > margin-bottom:10px; > line-height:130%; > margin-right:30px; > } > > #lselect { > background-image:url('menu-back.png'); > margin-bottom:0; > padding-bottom:20px; > } > > #lselect h3 { > background-image:url('select.png'); > background-repeat:no-repeat; > height:15px; > width:200px; > margin-top:0; > margin-left:0; > } > > #lselect h3 span { > display:none; > } > > #lselect a { > display:block; > font-family:Arial,Helvetica,sans-serif; > font-style:normal; > font-weight:bold; > } > > #lselect a:hover { > border-style:none; > border-width:0; > color:rgb(51, 51, 51); > text-decoration:underline; > } > > #lselect li { > font-style:italic; > } > > #lselect .c { > display:inline; > } > > #lselect a.c { > font-style:italic; > font-family:Georgia,"Times New Roman",Times,serif; > font-weight:normal; > } > > #larchives { > background-image:url('menu-back.png'); > margin-top:0; > margin-bottom:0; > padding-bottom:20px; > } > > #larchives h3 { > background-image:url('archives.png'); > background-repeat:no-repeat; > height:15px; > width:200px; > margin-top:0; > margin-left:0; > } > > #larchives h3 span { > display:none; > } > > #lresources { > background-image:url('menu-back.png'); > margin-top:0; > margin-bottom:0; > padding-bottom:20px; > } > > #lresources h3 { > background-image:url('resources.png'); > background-repeat:no-repeat; > height:15px; > width:200px; > margin-top:0; > margin-left:0; > } > > #lresources h3 span { > display:none; > } > > section > nav > ul, section > nav > ul > li { > /* reset default stlye of ul */ > margin: 0; > padding: 0; > list-style: none; > } > > section > nav > ul { > background-image:url('menu-end.png'); > background-repeat:no-repeat; > padding-bottom:352px; > background-position:center bottom; > } > > #extraDiv2 { > background-image:url('bottom.png'); > background-repeat:no-repeat; > background-position:center center; > height:200px; > width:100%; > position:fixed; > bottom:0; > z-index:5; > } > > #extraDiv1 { > z-index:2; > height:800px; > width:100%; > position:absolute; > top:1200px; > background-image:url('critters.png'); > background-repeat:no-repeat; > background-position:center center; > } > > .accesskey { > } --Apple-Mail-3--1011622492 Content-Type: text/html; charset=WINDOWS-1252 Content-Transfer-Encoding: quoted-printable Hi = Tristan,

Certainly! Glad to help. You have my = permission to reproduce the = design.

Eric

On Jul 8, = 2008, at 4:29 AM, Tristan Koch wrote:

Hi Eric,

I've = converted the Zen Garden HTML Template to HTML 5. You might have heard = about HTML 5. Besides other things, it introduces a whole new set of = elements to enable authors to structure documents and applications = better than before.

See attached the adopted .html and .css file. = I have not validated yet, the HTML 5 validator is down. I've commented = the file so if you like to take a look at HTML 5=85

Why am I = writing this? Well, I'm writing my thesis about HTML 5 and related APIs = and I'm looking for a good looking design to showcase the HTML 5 = template. I think your design qualifies as *very* good looking, so I = thought, I'd ask if its okay to use it?

I assume, your .css is = under under a Creative Commons license, as required by Zen = Garden?

Moreover, would you grant permission to use your artwork. = If you like, I can put the demo on a restricted page that only my tutor = can see?

(Of course, you would be named as the creator of the art = work.)

----
You can find a short writeup about HTML 5 at "A = List Apart", see http://www.alis= tapart.com/articles/previewofhtml5

More about HTML 5 on
http://www.whatwg.org
----

I'= d be happy to hear from you!

Tristan

A demonstration of what can be accomplished visually = through CSS-based design using HTML 5 = structured content.

Download the = sample html file and css = file

The Road to = Enlightenment

Littering a dark and = dreary road lay the past relics of browser-specific tags, = incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web = enlightenment has been achieved thanks to the tireless efforts of folk = like the W3C,WaSP and the major browser = creators.

The css Zen Garden invites you = to relax and meditate on the important lessons of the masters. Begin to = see with clarity. Learn to use the (yet to be) time-honored techniques = in new and invigorating fashion. Become one with the = web.

So What is This About?

There is clearly a need for CSS to be taken seriously by = graphic artists. The Zen Garden aims to excite, inspire, and encourage = participation. To begin, view some of the existing designs in the list. = Clicking on any one will load the style sheet into this very page. The = code remains the same, the only thing that has changed is the external = .css file. Yes, really.

CSS allows complete and total = control over the style of a hypertext document. The only way this can be = illustrated in a way that gets people excited is by demonstrating what = it can truly be, once the reins are placed in the hands of those able to = create beauty from structure. To date, most examples of neat tricks and = hacks have been demonstrated by structurists and coders. Designers have = yet to make their mark. This needs to = change.

Participation

Graphic artists only please. You are modifying this = page, so strong CSS skills are necessary, but = the example files are commented well enough that even CSS novices can use them as = starting points. Please see the CSS Resource Guide for advanced tutorials and = tips on working with CSS.

You may = modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if = you=92ve never worked this way before, but follow the listed links to = learn more, and use the sample files as a guide.

Download the sample html file and css file to work on a copy locally. = Once you have completed your masterpiece (and please, don=92t submit = half-finished work) upload your .css file to a web server under your = control. Send us a link to the file and if we = choose to use it, we will spider the associated images. Final = submissions will be placed on our server.

Benefits

Why = participate? For recognition, inspiration, and a resource we can all = refer to when making the case for CSS-based design. This is sorely needed, even = today. More and more major sites are taking the leap, but not enough = have. One day this gallery will be a historical curiosity; that day is = not today.

Requirements

We would like to see as much CSS1 as possible. CSS2 should be limited to = widely-supported elements only. The css Zen Garden is about functional, = practical CSS and not the latest = bleeding-edge tricks viewable by 2% of the browsing public. The only = real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the = flaws in the various implementations of CSS. Different browsers display differently, = even completely valid CSS at times, and this becomes = maddening when a fix for one leads to breakage in another. View the Resources page for information on = some of the fixes available. Full browser compliance is still sometimes = a pipe dream, and we do not expect you to come up with pixel-perfect = code across every platform. But do test in as many as you can. If your = design doesn=92t work in at least IE5+/Win and Mozilla (run by over 90% = of the population), chances are we won=92t accept it.

We ask that you submit original artwork. Please = respect copyright laws. Please keep objectionable material to a minimum; = tasteful nudity is acceptable, outright pornography will be = rejected.

This is a learning exercise as = well as a demonstration. You retain full copyright on your graphics = (with limited exceptions, see submission = guidelines), but we ask you release your CSS under a Creative Commons = license identical to the one on this = site so that = others may learn from your work.

Bandwidth= graciously donated by mediatemple Now available: Z= en Garden, the book 

/* ::::: http://www.csszengarden.c= om/213/213.css :::::= */

/* based on the work of Eric Stoltz, modified to apply to = HTML 5 document */
/* copyright of all graphics belongs to Eric = Stoltz, permission to redistribute granted (???) */

html = {
 margin:0;
 padding:0;
 height:100%;
 wi= dth:100%;
}

body = {
 margin:0;
 padding:0;
 font-family:Georgia,"Tim= es New = Roman",Times,serif;
 font-size:.9em;
 height:100%;
&nbs= p;width:100%;
 background-image:url('water.png');
 backgro= und-repeat:repeat-x;
 background-position:center = top;
 background-color:rgb(240, 236, 214);
}

p = {
}

h3 {
}

a:link {
 color:rgb(153, 51, = 0);
 text-decoration:none;
}

a:visited = {
 color:rgb(153, 153, = 0);
 text-decoration:none;
}

a:hover,a:active = {
 border-bottom:1px dotted rgb(153, 51, = 0);
 color:rgb(153, 51, = 0);
 text-decoration:none;
}

acronym {
}

/* = those elements have no default style = */
section,header,nav,article,aside,footer = {
 display:block;
}

body > section = {
 width:700px;
 margin-right:auto;
 margin-left:a= uto;
 margin-top:0;
 background-image:url('squid-blowfish.= png');
 background-repeat:no-repeat;
 background-position:= right = top;
 z-index:4;
 position:relative;
}

section = > header = {
 margin-top:0;
 padding-top:130px;
}

section = > header h1 = {
 background-image:url('title.png');
 height:195px;
&n= bsp;width:290px;
 background-repeat:no-repeat;
 margin-top= :0;
 position:absolute;
}

section > header h1 span = {
 display:none;
}

section > header h2 = {
 background-image:url('beauty.png');
 background-repeat:= no-repeat;
 height:234px;
 width:33px;
 margin-lef= t:8px;
 position:absolute;
 margin-top:250px;
}

= section > header > header span = {
 display:none;
}

section > header > header = {
 z-index:5;
 margin-top:-130px;
 position:absolu= te;
}

section > header > footer = {
 background-image:url('top.png');
 background-repeat:no-= repeat;
 width:385px;
 padding-bottom:20px;
}

se= ction > header > footer p = {
 font-size:.7em;
 font-style:italic;
 margin-lef= t:60px;
 margin-right:60px;
 line-height:120%;
 te= xt-align:center;
}

section > header > footer .p1 = {
 padding-top:60px;
}

section > header > footer .p2 = {
 font-style:normal;
 font-variant:small-caps;
 f= ont-size:.8em;
}

section > header section = {
 margin-top:0;
 width:385px;
 margin-bottom:0; padding-bottom:20px;
 background-image:url('back.png');}

section > header section h3 = {
 margin-top:0;
 background-image:url('enlightenment.png'= );
 height:45px;
 width:242px;
 margin-left:70px;<= br>}

section > header section h3 span = {
 display:none;
}

section > header section p = {
 font-size:.8em;
 margin-left:60px;
 margin-righ= t:60px;
 line-height:140%;
}

section > article = {
 margin-top:0;
 width:385px;
 background-image:u= rl('end.png');
 background-repeat:no-repeat;
 background-p= osition:center = bottom;
 padding-bottom:600px;
 margin-bottom:50px;
}
section > article h3 {
 margin-top:0;
}

section = > article p = {
 font-size:.8em;
 margin-left:60px;
 margin-righ= t:60px;
 line-height:140%;
}

#explanation = {
 background-image:url('back.png');
 padding-bottom:20px;=
}

#explanation h3 = {
 background-image:url('about.png');
 background-repeat:n= o-repeat;
 height:45px;
 width:242px;
 margin-left= :70px;
}

#explanation h3 span = {
 display:none;
}

#participation = {
 background-image:url('back.png');
 padding-bottom:20px;=
}

#participation h3 = {
 background-image:url('participation.png');
 background-= repeat:no-repeat;
 height:45px;
 width:242px;
 mar= gin-left:70px;
}

#participation h3 span = {
 display:none;
}

#benefits = {
 background-image:url('back.png');
 padding-bottom:20px;=
}

#benefits h3 = {
 background-image:url('benefits.png');
 background-repea= t:no-repeat;
 height:45px;
 width:242px;
 margin-l= eft:70px;
}

#benefits h3 span = {
 display:none;
}

#requirements = {
 background-image:url('back.png');
 margin-bottom:0;
= }

#requirements h3 = {
 background-image:url('requirements.png');
 background-r= epeat:no-repeat;
 height:45px;
 width:242px;
 marg= in-left:70px;
}

#requirements h3 span = {
 display:none;
}

#requirements .p5 = {
 margin-bottom:0;
 padding-bottom:20px;
 backgro= und-image:url('huzzah.png');
 background-repeat:no-repeat;
&nbs= p;background-position:center = top;
 padding-top:45px;
 text-align:center;
 font-= style:italic;
}

#requirements .p5 a = {
 display:block;
 font-family:Arial,Helvetica,sans-serif;=
 font-style:normal;
 font-weight:bold;
 text-tran= sform:uppercase;
}

#requirements .p5 a:hover = {
 border-style:none;
 color:rgb(51, 51, = 51);
 text-decoration:underline;
}

article > footer = {
 position:absolute;
 bottom:700px;
 margin-left:= 350px;
 z-index:6;
 font-family:Arial,Helvetica,sans-serif= ;
 text-transform:uppercase;
 font-size:.75em;
 ba= ckground-image:url('footer.png');
 background-repeat:no-repeat; height:57px;
 width:252px;
 text-align:center;
&= nbsp;padding-top:15px;
 padding-right:40px;
 visibility:vi= sible;
}

section > nav = {
 background-image:url('menu-top.png');
 background-repea= t:no-repeat;
 background-position:center = top;
 width:225px;
 padding-top:104px;
 position:a= bsolute;
 top:300px;
 margin-left:375px;
 font-fam= ily:Georgia,"Times New = Roman",Times,serif;
 font-size:.8em;
}

section > nav = ul = {
 margin-left:35px;
 padding-left:10px;
 list-sty= le-image:url('bullet.png');
 list-style-position:outside;
 = ;margin-top:5px;
}

section > nav li = {
 margin-bottom:10px;
 line-height:130%;
 margin-= right:30px;
}

#lselect = {
 background-image:url('menu-back.png');
 margin-bottom:0= ;
 padding-bottom:20px;
}

#lselect h3 = {
 background-image:url('select.png');
 background-repeat:= no-repeat;
 height:15px;
 width:200px;
 margin-top= :0;
 margin-left:0;
}

#lselect h3 span = {
 display:none;
}

#lselect a = {
 display:block;
 font-family:Arial,Helvetica,sans-serif;=
 font-style:normal;
 font-weight:bold;
}

#lsele= ct a:hover = {
 border-style:none;
 border-width:0;
 color:rgb(= 51, 51, 51);
 text-decoration:underline;
}

#lselect li = {
 font-style:italic;
}

#lselect .c = {
 display:inline;
}

#lselect a.c = {
 font-style:italic;
 font-family:Georgia,"Times New = Roman",Times,serif;
 font-weight:normal;
}

#larchives = {
 background-image:url('menu-back.png');
 margin-top:0; margin-bottom:0;
 padding-bottom:20px;
}

#larchi= ves h3 = {
 background-image:url('archives.png');
 background-repea= t:no-repeat;
 height:15px;
 width:200px;
 margin-t= op:0;
 margin-left:0;
}

#larchives h3 span = {
 display:none;
}

#lresources = {
 background-image:url('menu-back.png');
 margin-top:0; margin-bottom:0;
 padding-bottom:20px;
}

#lresou= rces h3 = {
 background-image:url('resources.png');
 background-repe= at:no-repeat;
 height:15px;
 width:200px;
 margin-= top:0;
 margin-left:0;
}

#lresources h3 span = {
 display:none;
}

section > nav > ul, section > nav > = ul > li  {
 /* reset default stlye of ul = */
 margin: 0;
 padding: 0;
 list-style: = none;
}

section > nav > ul = {
 background-image:url('menu-end.png');
 background-repea= t:no-repeat;
 padding-bottom:352px;
 background-position:c= enter bottom;
}

#extraDiv2 = {
 background-image:url('bottom.png');
 background-repeat:= no-repeat;
 background-position:center = center;
 height:200px;
 width:100%;
 position:fixe= d;
 bottom:0;
 z-index:5;
}

#extraDiv1 = {
 z-index:2;
 height:800px;
 width:100%;
 = ;position:absolute;
 top:1200px;
 background-image:url('cr= itters.png');
 background-repeat:no-repeat;
 background-po= sition:center center;
}

.accesskey = {
}

= --Apple-Mail-3--1011622492--