/* the methods on this page are largely the hard work (freely given) of many people from the css-discuss list [http://www.css-discuss.org], including (but not limited to) Big John, Holly Bergevin, Douglas Livingstone, Scott Sauyet, Victor Caston, Mike Papageorge, and me, Alex Robinson [css-stuff@alex.cloudband.com] */

/* ====================================================================
GENERAL STYLING
-------------------------------------------------------------------- */
/* border:nones are for NN4 */
html { 
min-width: 800px;
margin: 0px; 
padding: 0px; 
}

body {
margin: 20px;
padding: 0px;
color: #000;
background: #cfcfcf;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
}

a:link {
color: #971b1e;
background: transparent;
text-decoration: underline;
}

a:visited {
color: #636466;
background: transparent;
text-decoration: underline;
}

a:hover {
color: #bcbec0;
background: transparent;
text-decoration: underline;
}

p {
margin: 0;
padding: 0 0 1.0em 0; 
}

img {
border: 0;
}

table {width: 100%;
}

td {
vertical-align: top;
}

.super {
font-size: .8em;
vertical-align: super;
}

.bold {
font-weight: bold;
}

.clear {
clear: both;
}

.small {
font-size: .8em;
}

/* IE-Win hack to keep list background images from disappearing */
ul, ul.bullets, ol, dl {
position: relative;  
}

/* Opera hack: to keep the list item prior to the li.current from inheriting the font-weight of bold. */
html > body ul, html > body ol, html > body dl {
position: inherit; 
}


/* ====================================================================
WRAPPERS
-------------------------------------------------------------------- */

div { 
margin: 0px; 
padding: 0px; 
}

.divclear { 
clear: both;
} /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette */

/*/*/ .divclear { display: none; } /* */

/* box-wrap is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */

.box-wrap {
color : #000000;
background: #fff;
border-top: 1px solid #636466; /*** Sets the external top side border. ***/
border-right: 2px outset #636466; /*** Sets the external right side border. ***/
border-bottom: 2px outset #636466; /*** Sets the external bottom border. ***/
border-left: 1px solid #636466; /*** Sets the external left side border. ***/
}

.box-inner-wrap {
border: 0;
margin: 10px;
padding: 0;
}

.box-inner-wrap h1, .box-inner-wrap h2 {
color: #231f20;
background: transparent;
font: 1.5em/1.5em verdana, helvetica, arial, sans-serif;
text-transform: lowercase;
margin: 0;
padding: 0;
}

.box-inner-wrap  ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-inner-wrap ul li {
margin: 0;
padding: 0 0 1.0em 0;
font: 1em/1.25em verdana, helvetica, arial, sans-serif;
}

.box-inner-wrap ul.indent {
margin: 0 0 0 20px;
padding: 0;
}

.box-inner-wrap ul.indent li {
margin: 0;
padding: 0;
}


/* ====================================================================
CRUMBTRAIL
-------------------------------------------------------------------- */

.box-crumbtrail {
color: #000000;
background: transparent;;
margin: 0;
padding: 0 0 5px 15px;
text-transform: uppercase;
}

.box-crumbtrail a:link, .box-crumbtrail a:visited, .box-crumbtrail a:hover {
text-decoration: none;
}

/* ====================================================================
HEADER (Navigation and Title)
-------------------------------------------------------------------- */

#nav {
color: #000000;
background: #fff;
margin: 0;
padding: 5px 5px 0 0;
}

#nav h1 {
display: none;
}

#nav p {
color: #2e3192;
background: transparent;
font-size: 1.5em;
margin: 0;
padding: 0 0 5px 15px;
}

#nav img {
margin: 0;
padding-right: 5px;
border: 0;
vertical-align: top;
}

#nav div.archives {
position: relative;
float: right;
width: 225px;
margin: -10px 5px 5px 0;
padding: .125em;
color: #008eaf;
background: #fff;
}

#nav div.archives img {
float: left;
width: 43px;
margin: 0;
padding: .5em .125em .125em 0;
}

#nav div.archives p {
margin: 0;
padding: .125em;
font-size: 1.25em;
line-height: 1.25em;
text-align: center;
}

#nav div.archives p.small {
font-size: .8em;
text-align: center;
}

#nav div.archives span.highlight {
color: #fff;
background: #008eaf;
margin: 0;
padding: .15em 1.0em;
}

#nav ul {
width: 100%;
background: #c3c4e0 url(../images/nav-bg.gif) 0 0 no-repeat;
}

#nav ul li {
display: inline;
margin: 0;
padding: 10px 20px;
font-size: 1.1em;
text-transform: uppercase;
}

#nav ul li a:link {
color: #231f20;
background: transparent;
text-decoration: none;
}

#nav ul li a:visited {
color: #231f20;
background: transparent;
text-decoration: none;
}

#nav ul li a:hover {
color: #971b1e;
background: transparent;
text-decoration: none;
}

#nav ul li.current, #nav ul li.current a:link, #nav ul li.current a:visited, #nav ul li.current a:hover {
color: #971b1e;
background: transparent;
}



/* ====================================================================
FOOTER
-------------------------------------------------------------------- */

.box-footer {
clear: both;
margin: 0;
padding: 0.5em;
border-top: 1px solid #5b57a6;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
color: #000;
background: #fff;
}

.box-footer a:link, .box-footer a:visited, .box-footer a:hover {
text-decoration: none;
}

.box-footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-footer ul li {
margin: 0;
padding: 0;
line-height: 1.15em;
}

.box-footer #update {
float: right;
width: auto;
margin: 0;
padding: 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Prevents the right margin of the input box from overlapping the gray background. */
* html div.box-footer #update {
position: relative;
top: 0;
right: 0;
}

/* ====================================================================
COLUMNS LAYOUT
-------------------------------------------------------------------- */

.main-wrap {
float: left;
width: 100%;
margin: 0 10px 10px 0;
padding: 0;
}

.main-content {
margin: 0;
padding: 25px 10px 10px 10px;
color: #000;
background: #fff;
}

.bg {
color: #231f20;
background: #fff url(../images/gallery-bg.gif) 10px 75px no-repeat;
}

/* ====================================================================
MAIN CONTENT
-------------------------------------------------------------------- */

.main {
float: right;
width: 79%;
margin: 0;
padding: 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Keeps left margin from moving 150px to the left. */
* html .main {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.main h1, .main h2 {
margin: 0;
padding: 0 0 .5em 0;
color: #231f20;
background: transparent;
text-transform: none;
}

.main h1 {
font-size: 1.70em;
font-weight: lighter;
margin: 0;
padding: 0 0 .125em 0;
}

.main h1 span {
color: #008eaf;
background: transparent;
}

.main h1.small {
font-size: 1.25em;
text-transform: none;
}

.main h1.borders {
margin: 4px 0;
padding: 10px 0 11px 0;
border: 1px solid #5b57a6;
border-width: 1px 0;
text-transform: uppercase;
}

/* Hide from IE-mac. Only IE-win sees this. Keeps borders from disappearing. */

* html .main h1.borders {
position: relative;
}

.main h1.borders span {
color: #9d9fa1;
background: #fff;
text-transform: lowercase;
}

.main h2 {
font-size: 1.5em;
font-weight: lighter;
text-transform: none;
margin: 0;
padding: 0 0 .125em 0;
line-height: 1.15em;
}

span.small {
font-size: .7em;
}

.main h2.first {
clear: both;
font-size: 1.5em;
margin: 0;
padding: .5em 0 .5em 0;
}

.main h2 a:link, .main h2 a:visited, .main h2 a:hover, 
.main h2.clear a:link, .main h2.clear a:visited, .main h2.clear a:hover, 
.main h3 a:link, .main h3 a:visited, .main h3 a:hover {
margin: 0;
padding: 0 0 0 1em;
}

.main h3 {
font-size: 1.25em;
font-weight: lighter;
margin: 0;
padding: 0 0 .125em 0;
}

/* IE-Win hack to keep list background images from disappearing */
.main ul, .main ol, .main dl {
position: relative;  
}

.main ul, .main ul.bullets {
margin: 0 0 10px 0;
padding: 0 0 5px 10px;
}

.main ul li {
list-style: none;
}

.main ul.indent {
margin: 0 0 0 20px;
padding: 0;
}

.main ul.bullets li {
list-style: url(../images/bullet.gif) outside;
margin: 0 0 0 15px;
padding: 0 0 5px 0;
color: #000;
background: transparent;
}

.main ol.alpha-lc {
list-style: lower-alpha;
}

.main dl dt {
font-weight: bold;
}

.main p.author {
margin: 25px 0 0 0;
padding: 0;
text-transform: uppercase;
}

.main p.author-kistler {
margin: 0;
padding: 0;
text-transform: uppercase;
}

.main p.note {
font-style: italic;
}

.main p.equation {
margin: 0 0 1.0em 0;
padding: 0;
text-align: center;
}

.main p.first {
padding-top: 5px;
}

.main p.right {
text-align: right;
}

.main p.center {
text-align: center;
}

.main p.top {
clear: both;
margin: 0;
padding: 0;
font-size: .75em;
}

.main p.border {
color: #fff;
clear: both;
background: transparent;
margin: 0;
padding: 0;
border-top: 1px solid #8f74b4;
height: 1%;
}

.main p.height {
margin: 0;
padding: 0;
font-size: .5em;
}

.main .blockquote {
margin: 0 7em 1em 7em;
padding: 0.5em; 
border: 2px solid #9AAF6B;
}

.main .blockquote p.last {
margin: 0;
padding-bottom: 0; 
}

.main .newspaper {
margin: 0 7em .5em 7em;
padding: 0.5em;
border: 1px solid #5b57a6;
border-width: 1px 0;
}

.main .newspaper h2, .main .newspaper h3 {
text-align: center;
text-transform: uppercase;
}

.main .letter {
margin: 0 3em .5em 3em;
padding: 0.5em;
border: 1px solid #5b57a6;
}

.main .members {
float: right;
width: 180px;
margin: 0;
padding: 0 0 0 5px;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
color: #808284;
background: transparent;
}

.main .members span {
font-size: 1.25em;
color: #231f20;
background: transparent;
}

.main .members h2 {
margin: 0;
padding: 0;
font-size: 1.25em;
text-transform: uppercase;
font-weight: bold;
}


/* ====================================================================
													Image formatting
-------------------------------------------------------------------- */

.main .img-caption {
margin: .25em;
padding: 10px;
text-align: center;
}

.main .img-caption p {
margin: 0;
padding: .5em 0 0 0;
font-size: .8em;
line-height: 1.5em;
text-align: left;
}

.l150, .l200, .l250, 
.l400, .l425 {
margin: 0 10px 5px 0;
padding: 5px;
}

.r200, .r400, .r425 {
margin: 0 0 5px 10px;
padding: 5px;
}

.l150 {
float: left;
width: 150px;
}

.l200 {
float: left;
width: 200px;
}

.r200 {
float: right;
width: 200px;
}

.l250 {
float: left;
width: 250px;
}

.r400 {
float: right;
width: 400px;
}

.l400 {
float: left;
width: 400px;
}

.r425 {
float: right;
width: 425px;
}

.l425 {
float: left;
width: 425px;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Keeps the flower image on the home page together. */
* html .main .img-wrap {
float: left;
height: 240px;
}

.main img.curve {
float: left;
clear: left;
margin: 0 15px 0 0;
padding: 0;
height: 30px;
}

.main img.title {
float: left;
clear: left;
margin: 0 15px 0 0;
padding: 0;
height: 64px;
}

.main table.gallery {
margin: 0;
padding: 1em 0 0 0;
width: 100%;
border-top: 1px solid #5b57a6;
}

.main table.gallery tr {
height: 130px;
}

.main table.gallery td {
width: 100px;
}

.main table.gallery td p {
font: .8em/1.15em verdana, helvetica, arial, sans-serif;
margin: 0;
padding: 0;
}

.main table.gallery img {
margin: .25em 0;
padding: 0;
border: 3px solid #9d9fa1;
}

.middle {
vertical-align: middle;
}

.bottom {
vertical-align: bottom;
}

.center {
text-align: center;
}

.right {
text-align: right;
}

/* ====================================================================
													Table formatting
-------------------------------------------------------------------- */

.main table {
margin: 0;
padding: 0 0 10px 0;
}

.main table th {
color: #231f20;
font-size: 1.25em;
vertical-align: top;
margin: 0;
padding: 0;
border-bottom: 2px solid #5b57a6;
}

.main table th.w-15 {
width: 15%;
}

.main table th.w-20 {
width: 20%;
}

.main table th.w-25 {
width: 25%;
}

.main table.properties td {
margin: 0;
padding: .15em;
border-bottom: 1px solid #008eaf;
}

.main table.properties td.value {
text-align: center;
border-left: 1px dotted #008eaf;
border-right: 1px dotted #008eaf;
border-bottom: 1px solid #008eaf;
}

.main table.properties td.bottom {
border-bottom: 2px solid #5b57a6;
}

/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ 

/*/*/
.box-wrap, .main-wrap, .main, .left-nav, h2 { 
p\osition: relative; 
}
/* */


/* ====================================================================
KISTLER NAVIGATION
-------------------------------------------------------------------- */

.main #kistler {
position: relative;
margin: 0 0 10px 0;
padding: 5px 0;
border: 1px solid #5b57a6;
border-width: 1px 0;
}

.main #kistler .nav {
margin: 0;
padding: .25em;
color: #231f20;
background: #ebd2be;
}

.main #kistler .nav h1 {
margin: 0;
padding: 0;
font-size: 1.5em;
text-transform: uppercase;
}

.main #kistler .nav h2 {
display: inline;
margin: 0;
padding: 0;
font-size: 1.25em;
font-weight: bold;
text-transform: lowercase;
color: #808284;
background: transparent;
}

.main #kistler .nav .img-caption {
position: relative;
float: left;
width: 150px;
margin: 10px 10px 5px 0;
padding: 0;
}

.main #kistler .nav .img-caption p {
margin: 0;
padding: 0;
text-align: center;
}

/* IE-Win hack: positive: relative to keep list background images from disappearing */

.main #kistler .nav ul, .main #kistler .nav ul.bullets {
position: relative;  
margin: 5px 0 5px 160px;
padding: 10px 0 0 0;
border-top: 1px solid #5b57a6;
color: #231f20;
background: #ebd2be;
}

.main #kistler .nav ul li {
list-style: disc;
margin: 0 0 0 15px;
padding: 0;
line-height: 1.25em;
}


.main #kistler .nav p.small {
font-size: .8em;
}

.main  #kistler .nav p.clear {
clear: both;
margin: 0;
padding-left: 5px;
color: #000;
background: transparent;
border: none;
}


/* ====================================================================
LEFT NAVIGATION
-------------------------------------------------------------------- */

.left-nav {
float: left;
width: 152px;
margin: 0 0 0 0;
padding: 0;
color: #000;
background: transparent;
}

/* Opera hack: to keep the list item prior to the li.current from inheriting the font-weight of bold. */
html > body .left-nav ul, html > body .left-nav ol, html > body .left-nav dl {
position: inherit; 
}

.left-nav ul {
margin: 0;
padding: 25px 10px 25px 15px;
color: #000;
}

.left-nav ul.bg {
position: relative;
color: #000;
background: transparent url(../images/left-nav-bg.gif) 0 0 repeat-y;
}

.left-nav ul.level1 li {
list-style: none;
margin: 0;
padding: 0 0 1em 0;
font-size: 1.1em;
text-transform: uppercase;
}

.left-nav ul.level2 {
margin: 0;
padding: 0 0 0 15px;
}

.left-nav ul.level2 li {
list-style: none;
margin: 0;
padding: .25em 0;
font-size: .8em;
text-transform: none;
}

.left-nav ul.level1 li a, .left-nav ul.level2 li a {
display: block;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: normal;
}

.left-nav ul li a:link, .left-nav ul.level1 li a:link, .left-nav ul.level2 li a:link {
color: #231f20;
background: transparent;
text-decoration: none;
}

.left-nav ul li a:visited, .left-nav ul.level1 li a:visited, .left-nav ul.level2 li a:visited {
color: #231f20;
background: transparent;
text-decoration: none;
}

.left-nav ul li a:hover, .left-nav ul.level1 li a:hover, .left-nav ul.level2 li a:hover {
color: #971b1e;
background: transparent;
text-decoration: none;
}



/* For Opera 8.5: The next two font declarations are designed to keep list items from inheriting the font weight of .current. */

.left-nav ul.level1 li.current, .left-nav ul.level1 li ul.level2 li.current, 
.left-nav ul.level1 li.current a, .left-nav ul.level1 li ul.level2 li.current a {
color: #971b1e;
background: transparent;
}

.left-nav ul.level1 li.current ul.level2 li, .left-nav ul.level1 li.current ul.level2 li a {
font-weight: normal;
}

/* End hack for Opera 8.5 */

.left-nav span.current {
color: #971b1e;
background: transparent;
}