Export (0) Print
Expand All

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:
© 2014 Microsoft