Appendix: Zen Garden CSS Rules
*
{
margin: 0;
padding: 0;
color: #111;
font: 10.5pt/16pt Tahoma, Arial;
}
html
{
background: url('images/right_slice.png');
background-attachment: fixed;
}
body
{
background: url('images/background.png') no-repeat;
background-attachment: fixed;
height: 2150px;
}
acronym
{
border-bottom: 1px dotted #222;
}
p
{
margin: 18px auto;
}
#quickSummary p
{
margin: 0;
}
#pageHeader h1 span,
#quickSummary .p1 span,
#preamble h3 span,
#explanation h3 span,
#participation h3 span,
#benefits h3 span,
#requirements h3 span,
#larchives,
#lresources,
#linkList h3.select span
{
display: none;
}
#pageHeader h1
{
background: url('images/zentek.png');
height: 93px;
left: 279px;
position: fixed;
top: 116px;
width: 337px;
z-index: 1;
}
#quickSummary .p1
{
background: url('images/right_header.png');
height: 122px;
left: 692px;
position: fixed;
top: 20px;
width: 298px;
z-index: 1;
}
#preamble h3
{
background: url('images/road_hot.png');
height: 24px;
margin-bottom: -12px;
width: 271px;
}
#preamble
{
left: 195px;
position: absolute;
text-align: justify;
top: 220px;
width: 412px;
}
#supportingText
{
left: 195px;
position: absolute;
text-align: justify;
top: 510px;
width: 412px;
}
#explanation h3
{
background: url('images/about_hot.png');
height: 20px;
margin-bottom: -12px;
width: 237px;
}
#participation h3
{
background: url('images/participation_hot.png');
height: 24px;
margin-bottom: -12px;
width: 129px;
}
#benefits h3
{
background: url('images/benefits_hot.png');
height: 20px;
margin-bottom: -12px;
width: 83px;
}
#requirements h3
{
background: url('images/require_hot.png');
height: 24px;
margin-bottom: -12px;
width: 140px;
}
#linkList
{
left: 864px;
position: fixed;
top: 180px;
}
#linkList *
{
color: #111;
font-size: 9pt;
text-decoration: none;
}
#linkList2 lselect
{
position: fixed;
}
#lselect ul *
{
position: relative;
}
#linkList li
{
margin: 5px auto;
list-style: none;
}
#lselect ul a[accesskey='a']
{
display: block;
font-weight: bold;
margin-bottom: -5px;
}
#lselect ul li + li
{
left: 9px;
top: 54px;
}
#lselect ul a[accesskey='b']
{
display: block;
font-weight: bold;
margin-bottom: -5px;
}
#lselect ul li + li + li
{
left: 16px;
top: 106px;
}
#lselect ul a[accesskey='c']
{
display: block;
font-weight: bold;
margin-bottom: -5px;
}
#lselect ul li + li + li + li + li
{
display: list-item;
left: 23px;
top: 159px;
}
#lselect ul a[accesskey='e']
{
display: block;
font-weight: bold;
margin-bottom: -5px;
}
#lselect ul li + li + li + li + li + li
{
left: 28px;
top: 212px;
}
#lselect ul a[accesskey='f']
{
display: block;
font-weight: bold;
margin-bottom: -5px;
}
#lselect ul li + li + li + li,
#lselect ul li + li + li + li + li + li + li
{
display: none;
}
#extraDiv1
{
background: url('images/top_fade.png');
display: block;
height: 206px;
left: 0;
position: fixed;
top: 0;
width: 1194px;
}
#extraDiv1 span
{
background: transparent url('images/ie7.png') no-repeat -12px -58px;
background-attachment: fixed;
height: 350px;
left: 0;
position: fixed;
top: 0;
width: 380px;
}
#extraDiv7
{
background: url('images/ie7_style.png');
display: block;
height: 17px;
left: 622px;
position: fixed;
top: 134px;
width: 384px;
}
#extraDiv2 span,
#extraDiv3 span,
#extraDiv4 span,
#extraDiv5 span,
#extraDiv6 span
{
display: none;
height: 525px;
left: 314px;
position: fixed;
top: 175px;
width: 410px;
}
#extraDiv2
{
background: url('images/thumb_1.png');
display: block;
height: 108px;
left: 724px;
position: fixed;
top: 150px;
width: 144px;
}
#extraDiv2:hover
{
background: url('images/thumb_1_hover.png');
}
#extraDiv2:hover span
{
background: url('images/screen_1.png');
display: block;
}
#extraDiv3
{
background: url('images/thumb_2.png');
display: block;
height: 108px;
left: 732px;
position: fixed;
top: 245px;
width: 144px;
}
#extraDiv3:hover
{
background: url('images/thumb_2_hover.png');
}
#extraDiv3:hover span
{
background: url('images/screen_2.png');
display: block;
}
#extraDiv4
{
background: url('images/thumb_3.png');
display: block;
height: 108px;
left: 738px;
position: fixed;
top: 340px;
width: 144px;
}
#extraDiv4:hover
{
background: url('images/thumb_3_hover.png');
}
#extraDiv4:hover span
{
background: url('images/screen_3.png');
display: block;
}
#extraDiv5
{
background: url('images/thumb_5.png');
display: block;
height: 108px;
left: 745px;
position: fixed;
top: 435px;
width: 144px;
}
#extraDiv5:hover
{
background: url('images/thumb_5_hover.png');
}
#extraDiv5:hover span
{
background: url('images/screen_5.png');
display: block;
}
#extraDiv6
{
background: url('images/thumb_6.png');
display: block;
height: 108px;
left: 750px;
position: fixed;
top: 530px;
width: 144px;
}
#extraDiv6:hover
{
background: url('images/thumb_6_hover.png');
}
#extraDiv6:hover span
{
background: url('images/screen_6.png');
display: block;
}
Show: