/*########## 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
{
 top : 0px;
 margin : 0 auto;
 font : 13px verdana, arial, helvetica, sans-serif;
 color : #000000; 
 background : #ffffff url(body_bg.jpg) top center fixed;
 width : 773px;
 text-align : center;
}

h1
{
 display : none; 
}

h2
{
 display : none; 
}

h3
{
 font-weight : normal;
}

body[id=css-zen-garden] 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 
{
 color : #7f239a;
 text-decoration : none; 
 font-weight : bold;
}
 
body[id=css-zen-garden] a 
{
 color : #a21cf7;
 text-decoration : none; 
}
 
 
a:hover, a:active 
{
 text-decoration : underline; 
} 

ul, li 
{
 list-style : none; 
 padding : 0; 
 margin : 0; 
}
 
li 
{
 padding : 5px 7px; 
 border-bottom : 1px solid #dcd5b8; 
 text-transform : uppercase; 
 font-size : 0.8em; 
}
 
li:hover
{
} 

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


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



#container
{
 background : url(background.jpg) top center fixed no-repeat;
 position : absolute;
 margin-top : 0px;
 margin-right : 20px;
 margin-left : 10px;
 height : 1013px;
 width : 773px;
}


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

#pageHeader 
{
 margin-top : 0px;
 margin-left : 0px;
 height : 110px;
 width : 773px;
 background : url(pageHeader_bg.gif) top center no-repeat;
} 


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

#quickSummary 
{
 position : absolute;
 top : 120px;
 right : 0px;
 color : #ffd7a8;
}

body[id=css-zen-garden] #quickSummary
{
 position : absolute;
 right : 0px;
 height : 200px;
 margin-right : 20px;
 margin-top : 40px;
 width : 180px;
 font-weight : bold;
}

#quickSummary .p1 
{
 color : #000000;
 font-size : 1.0em;
 line-height : 14px; 
 padding-top : 20px;
 margin-right : 10px;
 margin-left : 400px;
 text-align : right;
} 

body[id=css-zen-garden] #quickSummary .p1 
{
 color : #000000;
 font-size : 1.0em;
 line-height : 14px; 
 padding-top : 0px;
 margin-right : 0px;
 margin-left : 0px;
 text-align : center;
} 

#quickSummary .p2 
{
 color : #000000;
 font-size : 1.0em;
 margin-right : 10px;
 margin-top : -70px;
 margin-left : 10px;
 text-align : left;
} 

body[id=css-zen-garden] #quickSummary .p2 
{
 color : #000000;
 font-size : 1.0em;
 margin-left : 0px;
 margin-right : 0px;
 margin-top : 0px;
 text-align : center;
} 


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

#preamble
{
 position : absolute;
 right : 0px;
 top : 200px;
 padding-right : 20px;
 text-align : right;
 padding-top : 30px;
}

body[id=css-zen-garden] #preamble
{
 right : 0px;
 top : 0px;
 position : relative;
 align : right;
 width : 235px;
 margin-left : 10px;
 margin-top : 0px;
 padding-right : 0px;
 text-align : left;
 color : #000000;
}

#preamble h3
{
 margin-left : 200px;
}

body[id=css-zen-garden] #preamble h3
{
 color : #110033;
 margin-left : 0px;
 margin-right : 5px;
}

#preamble .p1
{
 margin-left : 475px;
}

body[id=css-zen-garden] #preamble .p1
{
 margin-left : 0px;
}

#preamble .p2
{
 margin-left : 475px;
}

body[id=css-zen-garden] #preamble .p2
{
 margin-left : 0px;
}

#preamble .p3
{
 margin-left : 475px;
}

body[id=css-zen-garden] #preamble .p3
{
 margin-left : 0px;
}



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

#supportingText
{
 position : absolute;
 left : 0px;
 top : 540px;
}

body[id=css-zen-garden] #supportingText
{
 position : relative;
 left : 0px;
 top : 0px;
}

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

#explanation 
{
 text-align : right;
 margin-top : 0px;
 margin-left : 450px;
 margin-right : 10px;
}

body[id=css-zen-garden] #explanation
{
 background : url(transp.png);
 margin-top : -90px;
 margin-left : 290px;
 margin-right : 15px;
 text-align : right;
 color : #f9f9f9;
}

body[id=css-zen-garden] #explanation a
{
 color : #fecfcf;
}

body[id=css-zen-garden] #participation a
{
 color : #fecfcf;
 font-weight : bold;
}

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

#participation
{
 text-align : right;
 margin-left : 430px;
 margin-top : 0px;
 margin-right : 10px;
}


body[id=css-zen-garden] #participation
{
 background : url(transp.png);
 margin : 30px 15px 30px 250px;
 text-align : right;
 color : #f9f9f9;
}


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

#benefits
{
 text-align : right;
 margin-left : 430px;
 margin-top : 0px;
 margin-right : 10px;
}


body[id=css-zen-garden] #benefits
{
 position : absolute;
 background : url(Footer_ie.gif) right bottom no-repeat;
 align : right;
 width : 215px;
 margin-left : 0px;
 margin-right : 20px;
 margin-top : 250px;
 text-align : left;
}

#benefits p
{
 margin-bottom : 30px;
}

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


#requirements
{
 background : url(shadow_bg.png) no-repeat; 
 padding-right : 5px;
 padding-top : 0px;
 margin-right : 10px;
 margin-left : 0px;
 margin-top : 0px;
 text-align : right;
 font-size : 1.1em;
 z-index : 2;
}

#requirements h3
{
 padding-top : 5px;
 margin-left : 600px;
 margin-bottom : 6px;
}
#requirements .p1
{
 margin-left : 300px;
 margin-top : 5px;
 margin-bottom : 6px;
}

#requirements .p2
{
 background : url(requirements_bg.jpg) no-repeat 50% 45%;
 padding-left : 500px;
 margin-left : 30px;
 margin-top : 5px;
 margin-bottom : 5px;
 z-index : 1;
}

#requirements .p3
{
 background : url(transp_txt.png);
 margin-left : 0px;
 margin-top : 2px;
 margin-bottom : 0px;
 padding-bottom : 5px;
 text-align : center;
}

#requirements .p4
{
 background : url(transp_txt.png);
 margin-left : 0px;
 margin-top : 0px;
 margin-bottom : 0px;
 text-align : center;
 padding-top : 4px;
 padding-bottom : 4px;
}

#requirements .p5
{
 background : url(transp_txt.png);
 padding-left : 400px;
 text-align : right;
 margin-top : 0px;
 padding-top : 4px;
 padding-bottom : 0px;
}

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

#footer
{
 margin-left : 400px;
 height : 155px;
 background : url(Footer_ie.gif) right bottom no-repeat;
}

#footer a
{
 color : #7f239a;
}

body[id=css-zen-garden] #footer
{
 background : none;
/* background : url(transp_txt.png);
 border-width : 2px;
 border-style : outset;
 border-color : #ffffff; */
 align : left;
 margin-left : 10px;
 margin-top : -40px;
 width : 200px;
 height : 17px;
}


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

#linkList 
{
 position : absolute;
 left : 200px;
 top : 530px;
 width : 230px;
 font-size : 0.9em;
 line-height : 14px;
 margin-left : 0px;
 color : #400000; 
}

body[id=css-zen-garden] #linkList 
{
 position : absolute;
 left : 0px;
 top : 533px;
 width : 230px;
 font-size : 0.9em;
 line-height : 14px;
 margin-left : 0px;
 color : #400000; 
}


#linkList2 
{
 padding : 15px 15px 15px 15px;
}

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

#linkList ul li.zgHover /* in case you want to add a JavaScript function for IE6 */
{
} 


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

#lselect h3 
{
  background : url(linklistBody.jpg) top right ;
 height : 20px;
 padding-top : 5px;
} 

body[id=css-zen-garden] #lselect h3 
{
  background : url(linklistBody.jpg) top right ;
 display : block; 
 height : 15px;
} 

#lselect ul li.zgHover /* in case you want to add a JavaScript function for IE6 */
{
 background : url(linklistBody_sel.jpg) ; 
} 
li a.c 
{
 font-size : 1.0em; 
 font-weight : normal; 
 display : inline; 
 padding : 0; 
 line-height : 14px; 
 text-transform : uppercase; 
} 

#lselect a 
{
 color : #4342aa;
} 

#lselect a:hover 
{
 color : #ffd7a8;
} 

body[id=css-zen-garden] #lselect a 
{
 color : #400000;
} 


body[id=css-zen-garden] #lselect li 
{
 background : url(linklistBody.jpg) top right ;
}

#lselect li 
{
 background : url(linklistBody.jpg) top right ;
}

#lselect li:hover 
{
 background : url(linklistBody_sel.jpg) top right;
}
body[id=css-zen-garden] #lselect li:hover 
{
 background : url(linklistBody_sel.jpg) top right;
}

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

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

body[id=css-zen-garden] #larchives h3
{
 background : url(linklistBody.jpg) top right;
}

#larchives h3 
{
 display : none; 
} 

#larchives li a 
{
 display : inline; 
 line-height : 14px; 
} 
#larchives a 
{
 color : #4342aa;
} 
#larchives a:hover 
{
 color : #ffd7a8;
} 

body[id=css-zen-garden] #larchives a 
{
 color : #400000;
} 

#larchives li 
{
 background : url(linklistBody.jpg) top right ;
}

body[id=css-zen-garden] #larchives li 
{
 background : url(linklistBody.jpg) top right ;
}

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

body[id=css-zen-garden] #larchives li:hover 
{
 background : url(linklistBody_sel.jpg) top right ;
}

/*##########     RESOURCES - CSS ARTICLES, INFORMATION           ###########*/
#lresources
{
 background : url(linklistBody.jpg);
}

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

#lresources
{
 margin-top : 180px;
 height : 180px;
 background : url(resources_ie6_bg.jpg);
 border-width : 2px;
 border-style : outset;
 border-color : #ffffff;
}

#lresources h3 
{
 display : none;
} 

#lresources a 
{
 color : #000000;
} 

#lresources a:hover 
{
 color : #ff0000;
} 

body[id=css-zen-garden] #lresources a 
{
 color : #f1effa;
} 

body[id=css-zen-garden] #lresources a:hover 
{
 color : #ffd7a8;
} 

#lresources h3 
{
 display : block;
} 

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

@media screen and (min-width: 550px) { /* opera */


#container
{
 height : 1055px;
}

body[id=css-zen-garden] #linkList 
{
 top : 450px;
}

#participation p.p2
{
 font-size : 1.1em;
}

#participation p.p3
{
 font-size : 1.1em;
}

#requirements
{
 font-size : 1.1em;
}

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

#benefits p
{
 margin-bottom : 40px;
}

#lselect { margin-top : 100px; }
#lresources { margin-top : 225px; }
}