/*########## CONTAINER                                           ###########*/
/*##########   INTRO                                             ###########*/
/*##########     PAGEHEADER - css Zen Garden                     ###########*/
/*##########     QUICKSUMMARY - A demonstration of.....          ###########*/
/*##########     PREAMBLE - The Road to Enlightenment            ###########*/
/*##########   SUPPORTINGTEXT                                    ###########*/
/*##########     EXPLANATION - So What is This About?            ###########*/
/*##########     PARTICIPATION - Graphic artists only please.    ###########*/
/*##########     BENEFITS - Why participate?                     ###########*/
/*##########     REQUIREMENTS - We would like to see.....        ###########*/
/*##########     FOOTER - SHORT LINKS                            ###########*/
/*##########   LINKLIST                                          ###########*/
/*##########     SELECT - OTHER DESIGNS                          ###########*/
/*##########     ARCHIVES - NEXT SELECT LIST                     ###########*/
/*##########     RESOURCES - CSS ARTICLES, INFORMATION           ###########*/

body 
{
 font : 84% "Comic Sans MS", verdana, arial, helvetica, sans-serif;
 color : #8822c2;
 background : #717080 url(body_bg.jpg) ;
 margin : 0;
 align : left;
}

h1
{
 display : none; 
}

h2
{
 display : none;
}

h3
{
 font-size : 1.4em;
 font-weight : bold;
}

h3
{
 font-size : bold 1.4em georgia;
 letter-spacing: 1px;
 margin-bottom: 0px;
}

acronym 
{
 cursor : help; 
 border-bottom : 1px dotted #f0e9ce; 
}

a 
{
 text-decoration : underline; 
 color : #b03951;
}
 
a:hover, a:active 
{
 text-decoration : underline; 
} 

ul, li 
{
 list-style : none; 
 padding : 0; 
 margin : 0; 
}
 
li 
{
 background : #f3edbd url(linklist_body.jpg) ; 
 padding : 5px 7px; 
 border-bottom : 1px solid #dcd5b8; 
 text-transform : uppercase; 
 font-size : 0.8em; 
}
 
li:hover
{
 background : #dcd5b8 url(linklist_body_sel.jpg) ; 
} 

li a 
{
 display : block; 
 color : #000000; 
 font-weight : bold; 
 font-size : 1.0em; 
 text-transform : none; 
 padding : 2px 0 3px; 
}
 
li a:hover 
{
 color : #5e1919; 
} 


/*########## CONTAINER                                           ###########*/

#container
{
 background : url(container_bg.jpg) top left no-repeat;
 margin-top : 0px;
 margin-right : 20px;
 margin-left : 0px;
 width : 821px;
}


/*##########   INTRO                                             ###########*/

/*##########     PAGEHEADER - css Zen Garden                     ###########*/

#pageHeader 
{
 height : 537px; 
} 

body[id=css-zen-garden] #pageHeader 
{
 height : 520px; 
} 

#pageHeader h1
{
 margin-left : 160px;
 position : absolute; 
 top : 20px; 
}

body[id=css-zen-garden] #pageHeader h1
{
  margin-left : 160px;
 position : absolute; 
 top : 0px; 
}


#pageHeader h2
{
 color : #a27dc3;
 position : absolute; 
 top : 60px; 
 margin-left : 250px;
}

body[id=css-zen-garden] #pageHeader h2
{
 position : absolute; 
 top : 45px; 
}


/*##########     QUICKSUMMARY - A demonstration of.....          ###########*/

#quickSummary .p1 
{
 display : none;
 color : #ffeeff;
 font-size : 1.0em;
 position : absolute; 
 top : 100px; 
 width : 220px; 
 line-height : 14px; 
 text-align : right;
 left : 455px;
} 

#quickSummary a
{
 color : #fa4f72;
}

body[id=css-zen-garden] #quickSummary .p2 
{
 font-size : 1.0em;
 position : absolute; 
 top : 402px; 
 width : 300px; 
} 

#quickSummary .p2 
{
 color : #440044;
 font-size : 1.0em;
 position : absolute; 
 top : 415px; 
 width : 300px; 
 left : 345px;
} 


/*##########     PREAMBLE - The Road to Enlightenment            ###########*/

#preamble
{
 background : url(preamble_bg.jpg) bottom right no-repeat;
 margin-left : 290px;
 width : 420px;
 padding-left : 10px;
 padding-bottom : 30px;
 padding-right : 20px;
}

body[id=css-zen-garden] #preamble
{
 background : url(preamble_bg.jpg) bottom right no-repeat;
 padding : 0px 20px 20px 10px;
}

body[id=css-zen-garden] #preamble p 
{
 padding-top : 7px;
}

#preamble p
{
 padding-right : 0px;
}



#preamble h3 
{
 margin-left : 20px;
 text-indent : -5000px; 
 height : 40px; 
 background : url(preamble_h3.jpg) no-repeat; 
} 


/*##########   SUPPORTINGTEXT                                    ###########*/

#supportingText
{
 width : 740px;
}


/*##########     EXPLANATION - So What is This About?            ###########*/

#explanation
{
 background : url(explanation_bg.jpg) bottom right no-repeat;
 margin-top : 36px;
 margin-left : 290px;
 padding : 0px 20px 20px 10px;
}

#explanation p
{
 margin-top : 20px;
 margin-right : 10px;
}

#explanation h3 
{
 margin-left : 20px;
 text-indent : -5000px; 
 height : 40px; 
 background : url(explanation_h3.jpg) no-repeat; 
} 


/*##########     PARTICIPATION - Graphic artists only please.    ###########*/

#participation
{
 background : url(participation_bg.jpg) bottom right no-repeat;
 padding : 0px 20px 20px 10px;
 margin-left : 290px;
} 

body[id=css-zen-garden] #participation
{
 margin-top : 10px;
}

#participation h3 
{
 margin-top : 30px;
 text-indent : -5000px; 
 height : 40px; 
 background : url(participation_h3.jpg) center no-repeat; 
} 

#participation p 
{
 margin-top : 21px;
 margin-right : 10px;
} 

#participation .p1
{
 margin-left : 0px;
}

#participation .p2
{
 margin-left : 0px;
}


/*##########     BENEFITS - Why participate?                     ###########*/

#benefits
{
 background : url(benefits_bg.jpg) bottom right no-repeat;
 padding : 0px 20px 20px 10px;
 margin-left : 290px;
}

#benefits h3 
{
 text-indent : -5000px; 
 height : 40px; 
 background : url(benefits_h3.jpg) no-repeat center; 
} 

#benefits p 
{
 margin-top : 20px;
 margin-right : 10px;
} 


/*##########     REQUIREMENTS - We would like to see.....        ###########*/

#requirements
{
 position : absolute;
 top : 1242px;
 left : 0px;
 background : url(requirements_bg.jpg) bottom right no-repeat;
 padding : 0px 0px 25px 10px;
 width : 251px;
}

body[id=css-zen-garden] #requirements
{
 top : 1230px;
 left : 0px;
 padding : 0px 20px 35px 10px;
 width : 251px;
}


#requirements h3 
{
 text-indent : -5000px; 
 height : 48px; 
 width : 271px;
 background : url(requirements_h3.jpg) no-repeat center; 
} 

#requirements p 
{
 margin-top : 23px;
 margin-right : 10px;
 margin-left : 15px;
 width : 240px;
} 



/*##########     FOOTER - SHORT LINKS                            ###########*/

body[id=css-zen-garden] #footer
{
 position : absolute;
 top : 1891px;
 left : 280px;
}

#footer
{
 position : absolute;
 top : 1863px;
 left : 280px;
 width : 208px;
 padding-left : 20px;
 padding-right : 270px;
 padding-top : 310px;
 padding-bottom : 20px;
 background :  url(footer_bg.jpg) bottom right no-repeat;
 font : 0.9em verdana, arial, serif; 
 text-transform : uppercase; 
 letter-spacing : -1px; 
}

#footer a
{
 color : #000000;
 text-decoration : none; 
 font-size : 1.0em;
 font-weight : bold;
}

/*##########   LINKLIST                                          ###########*/

#linkList 
{
 position: absolute; 
 top: 0px; 
 font-size : 0.8em;
 line-height : 14px;
 margin-top : 540px;
 margin-left : 60px;
 left: 0px;
 background: #b08fa0 url(linkList_bg.jpg); 
 color : #000000; 
}

#linkList2 
{
 padding : 0px 5px 5px 5px;
 width : 175px;
}

#linkList li /* required if you use the zgHover event for ie6 */
{
 width : 160px; 
}

#linkList ul li.zgHover /* in case you want to add a JavaScript function for IE6 */
{
 background : #e9b65b url(linklist_body_sel.jpg) ; 
} 


/*##########     SELECT - OTHER DESIGNS                          ###########*/

#lselect h3 
{
 background : url(select_top.jpg) right no-repeat; 
 margin-left : -5000px;
 height : 35px;
 margin-top : 0px;
 width : 155 px;
 } 

#lselect li a 
{
 text-decoration : none;
} 

#lselect li a:hover 
{
 text-decoration : underline;
} 

li a.c 
{
 font-size : 1.0em; 
 font-weight : normal; 
 display : inline; 
 padding : 0; 
 line-height : 14px; 
 text-transform : uppercase; 
 width : 165 px;
 text-decoration : none;
} 

/*##########     ARCHIVES - NEXT SELECT LIST                     ###########*/

#larchives h3 
{
 background : url(archives_top.jpg) right bottom no-repeat; 
 margin-left : -5000px;
 height : 50px;
 margin-top : 0px;
 padding-left : 5px;
 width : 165 px;
} 

#larchives li a 
{
 display : inline; 
 line-height : 14px; 
 text-decoration : none;
} 


/*##########     RESOURCES - CSS ARTICLES, INFORMATION           ###########*/

#lresources h3 
{
 background : url(resources_top.jpg) right bottom no-repeat; 
 margin-left : -5000px;
 height : 50px;
 margin-top : 0px;
 padding-left : 5px;
 width : 165 px;
} 

#lresources li a 
{
 display : inline; 
 line-height : 14px; 
 text-decoration : none;
}