html { font-family: sans-serif ;  background: white;  padding: 0px ; height:100% ; }

body { margin: 0 ;  padding: 0 ;} 

body#toppage { height:100% ; width:100% ;
  background-color: white ;
  padding: 0 ; margin:0 ;
}

#toppage #container { position:relative ; min-height:780px ; min-width:750px ; 
border-color:#50C020 ; border-width: 20px 20px 0px 20px ; border-style: solid ;
background-color: white ;
padding:20px ;
}

#toppage div#leftpane {
 float: left ; width: 40% ; height: 100% ; margin: 0px ; padding: 10px ;
}

#toppage div#rightpane {
 float: left ; width: 53% ; margin-right: -20px ; padding: 0 ; 
}

#toppage div#rightpane #toc{
 min-height: 620px ; margin:0 ; padding: 0 ;
 background: transparent url("../images/topleftbg.png") no-repeat left top ;
}

#toppage div#rightpane #footnote{
 position:relative; left: 62px ; min-height: 120px 
 margin: 0 ; padding: 0 ; font-size:10pt ;
}
#trailing { clear:both ; position:relative ; font-size:10pt ; border:0 ; 
  height:20px ; width:100% ; margin:0 auto ;  padding:0 ; background-color:#50C020 ; color:white ; 
}
#trailing .rest { position:absolute; bottom:2px ; right:20px ; }

table.tocitem { margin:0px ; padding:0px ; border-collapse:collapse ; border-spacing:0px ;}
td.tocicon { border-style:none; margin:0px ; padding:0px ; width:52px  ; vertical-align:top ; } 
td.tocicon img { margin:0px; padding:0px ; border:0px ; }
td.toctext { border-style:none; padding-left:10px ; border:0px ; vertical-align:middle ; } 
.toctext h2 { margin:0 ; padding:0 ;} 
.toctext h3 { margin:0 ; padding:0 ;} 
.toctext h4 { margin:0 ; padding:0 ;} 
.toctext h5 { margin:0 ; padding:0 ;} 
.toctext p { font-size:9pt ; margin:0 ; padding:0 ; } 

div.headlineimage { margin-top: 20px ; text-align:center ; }
#toppage div#leftpane .headline { text-align:center ; } 

body.article {
  background-color: white ;  margin: 0 auto ;  padding: 0 ;
  position:relative;
  min-height: 100%; width:100% ;
  background: transparent url("../images/articlebg.png") no-repeat left top ;
}

#header { 
height:50px ; width:100% ; margin:0 ; padding:0 ; background-color:#50C020 ; color:white ; 
}

#header .title {  position:relative ; height: 30px ; width: 100% ; 
 background: transparent url("../images/joyofscience.png") no-repeat right top ;
}

#header .rest { position:relative ; height: 20px ; width:100% ; }
#header .lefttpane { float:left ; }
#header .rightpane { float:right ; }
#header .title span { position:absolute; bottom:0 ; left:20px ; font-size:18pt ; font-weight:bold ; width:20em ;}
#header .rest .leftpane span { position:absolute; bottom:2px ; left:20px ; font-size:10pt ; width:80% ;}
#header .rest .rightpane span { position:absolute; bottom:2px ; right:20px ; font-size:10pt ; width:15em ;}

#footer { position:absolute ; bottom:0 ; font-size:10pt ;
  height:20px ; width:100% ; margin:0 auto ;  padding:0 ; background-color:#50C020 ; color:white ; 
}
#footer .title { position:absolute; bottom:2px ; left:20px ; }
#footer .rest { position:absolute; bottom:2px ; right:20px ; }

.article #maintext { margin:0 auto ; padding:15px ; font-size:12pt ; }
.article #maintext p {position:relative; left:210px ; min-width:250px; width:70% ; } 
.article #maintext li {position:relative; left:210px ; min-width:250px; width:70% ; } 
.article #maintext li li {position:relative; left:0px ; min-width:0px; width:auto ;}
.article #maintext table {position:relative; left:210px ; margin:5px ; border-collapse:collapse ; border-spacing:0 ; 
      empty-cells:show ; border:1px solid #C0C0C0 ;} 
.article #maintext table tr,td {position:relative; left:0px ; min-width:0px; width:auto ; border:1px solid #C0C0C0 ; }
.article #maintext h1 {position:relative; left:20px ; width:95% ; border-bottom:4px solid black ;} 
.article #maintext h2 {position:relative; left:20px ; width:95% ; border-bottom:2px solid black ;} 
.article #maintext h3 {position:relative; left:210px ; width:70% ; border-bottom:1px solid black ;} 
.article #maintext h4 {position:relative; left:210px ; width:70% ;} 
.article #maintext h5 {position:relative; left:210px ; width:70% ;} 
.article #maintext pre {position:relative; left:210px ; width:70% ; background-color:#E0E0E0 ; 
         padding:10px ; font-size:10pt ;} 
.article #maintext blockquote p {border-left-color:#E0E0E0 ; border-left-width:7px ; border-left-style:solid ; 
         padding-left: 10px ; } 
.article #maintext .cmdline p {padding:10px ; position:relative; left:210px ; width:70% ; background-color:#FFEFE0 ; 
         font-family:monospace ; font-size:10pt ;  }
.article #maintext .att p {padding:7px ; border:solid 3px #E0E0B0 ; position:relative; left:210px ; width:50% ; 
      background-color:#FFFFC0 ;  font-size:11pt ;  }
.article #maintext .note { position:absolute ; left:20px ; } 
.article #maintext .note p {position:relative; left:0px ; width:200px ;  min-width:50px ; line-height:1.1; font-size:9pt ;} 
.article #maintext .note .rescale img {position:relative; left:0px ; width:200px ; } 
.article #maintext .fig { position:relative; left:210px ; width:60% ; line-height:1.1; font-size:9pt ;}
.article #maintext .eqn { position:relative; left:230px ; width:70% ; line-height:1.0; font-size:11pt ; font-family:monospace ; }
.article #maintext .remark { font-weight: bold; color: #931d0b; background-color: #daffec ; }
.article #maintext .attn { word-break: normal; font-weight: bold; color: #cc0000; }
.article #maintext .code { position:relative; left:230px ; width:70% ; line-height:1.0; font-size:10pt ; font-family:monospace ; }


body.topics {
  background-color: white ;  margin: 0 auto ;  padding: 0 ;
  position:relative;
  min-height: 100%; min-width:840px ;
  background: transparent url("../images/wasabi.png") repeat-x left bottom ;
}

.topics #contents { margin:0 0 ; padding:0 15px ; font-size:10pt ; width:820px ;}
.topics #contents h1 { margin-top:10px ; margin-bottom:3px }
.topics #contents h2 { margin-top:10px ; margin-bottom:3px }
.topics #contents h3 { margin-top:10px ; margin-bottom:3px }
.topics #contents h4 { margin-top:10px ; margin-bottom:3px }
.topics #contents h5 { margin-top:10px ; margin-bottom:3px }
#topiclist { position:relative; left:15px; width:98% ; margin:0 ; }
.topicitem { float:left ; display:inline; height:300px ; width:250px ; margin: 0px 20px 20px 0px ; border:1px solid #DDD ; font-size:9pt ; line-height:1.2 ; }
.topicend { clear:both ; }
.topicitem img {float:right ; margin:0px ; width:133px ; height:100px ; }
.topics #contents table {margin:5px; border-collapse:collapse ; border-spacing:0 ; empty-cells:show ; border:1px solid #C0C0C0 ;} 
.topics #contents table tr,td { border:1px solid #C0C0C0 ; }
.topics  #topiclist .topicitem h3 { margin:0 ; border-bottom:1px none #DDD ; width:100% ; color: #933 ;} 
.topics .cover {float:right ; margin:0px ; width:auto ; font-size:8pt ; color:#CCC ; }
.topics .cover img { position:relative ; left:0px ; }


h1 {
  text-transform: uppercase ;
}

a:link { color: #400 ; text-decoration: none; }
a:visited { color: #400 ; text-decoration: none; }
a:hover { color: #400 ; text-decoration: underline; }

#header a:link { color: #151 ; text-decoration: none; }
#header a:visited { color: #151 ; text-decoration: none; }
#header a:hover { color: #151 ; text-decoration: underline; }

#footer a:link { color: #151 ; text-decoration: none; }
#footer a:visited { color: #151 ; text-decoration: none; }
#footer a:hover { color: #151 ; text-decoration: underline; }


.dummybox { height:40px ; }