/*colors:  accent1=#6c3 (lime green), accent2=#077 (blue green), #fff (white), #ddd (dark grey for hover and body background), #eee (light grey for odd rows in tables) and black for most text*/

body {
background: #ddd url(../images/bodybg.jpg) 50% -40px fixed; 
color: black; 
font-family:'Times New Roman', Times, serif;
font-size: 1em;
}

#pagewrapper, #footer {
width: 90%;
margin: 1em auto;
}
/*pagewrapper can be used for drop shadow on overall page by adding a background-color to #page and then using relative positioning*/

#page {
border: 2px solid #6c3;
background-color: #fff;
}

/*header positioning and sizing*/
#header {
background: #6c3 url(../images/headerbg.jpg) no-repeat 110% 10%;
overflow: hidden; /*to make Safari render bg img without overflow*/
color: black;
font-size: 1.5em;
padding: .1em 0em 1em 1em;
}

#header h1 {color: black;
margin-bottom: 0;}

#subtitle {
margin: 0 2.5em;
color: #077;
}

/*horizontal menu styling*/
#menubar {
background: #077 url(../images/menubarbg.jpg) bottom;
}

#menubar ul {
margin: 0;
padding: .3em 0;
font-size: 1.2em;
}

#menubar li {
display: inline;
background-image: none; /*remove custom bullets from this list*/
margin: 0;
padding: 0;
}

#menubar li a {
padding: .3em 1em;
color: #fff;
text-decoration: none;
}

#menubar a:hover {background: #077 url(../images/menubarhoverbg.jpg);}

/*for a dropped shadow on the rightcolumn area add a background color to the #rightwrapper and use relative positioning bottom .3em right .3em for the #rightcolumn*/

#rightwrapper {
width: 12em;
float: right;
margin: 0 0 1em 1em;
}

#rightcolumn  {
background-color: #fff;
border-left: 1px solid #6c3;
}

#rightcolumn a:hover, #leftcolumn a:hover {background-color: #ddd;}

/*styling the navigation or contents menu*/

#navigation {
text-transform: lowercase;
}

#navigation h2 {
margin: 0;
padding: .2em;
color: #fff; 
background: #6c3 url(../images/menubarhoverbg.jpg);
text-decoration: none;
text-align: center;
font-weight: normal;
font-size: 1.4em;
}

#navigation ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 1.1em;
}

#navigation ul li {
margin: 0;
padding: 0;
background-image: none;/*no custom bullets on this list*/
}

/*Makes sure that the font size gets gradually smaller for all nested lists.*/
#navigation ul ul {
font-size: .9em;
}

/*Makes sure that nested list items are further left indented*/
#navigation ul ul li a {
padding-left: 1.9em;
}

#navigation ul ul ul li a {
padding-left: 3em;
}

#navigation a {
color: #077;
text-decoration: none;
display: block;
padding: 2px 1em 2px 1em;
border-bottom: solid 1px #6c3;
margin: 0;
}

#navigation a#current, h4, dt {color: #6c3;}

a#current:hover {background-color: #fff;}

/*leftcolumn has a wrapper that can be used for dropped shadow or other effects if needed.  #leftcolumn is used for the all site content.*/

#leftcolumn {
margin: 0;
padding: 0 1.5em;
}

#leftcolumn img {
float: left;
margin: 0 1em 1em 0;
}

/*styles for floated pictures with captions that float across the page.  There are two sizes.  picwcaption is 200px and thumbwcaption is 100px.  If another size is needed, use picwcaption and an inline style for the width on the span and the img.*/

#leftcolumn span.picwcaption, #leftcolumn span.thumbwcaption {
display: -moz-inline-box; /*FireFox does not support inline-block*/
display: inline-block;
text-align: center;
margin: 0 1em 1em 0;
vertical-align: top;
}

#leftcolumn .picwcaption img, #leftcolumn .thumbwcaption img {
float: none;
margin: 5px;
border: none; /*to prevent default border in FireFox*/
}

/*span.thumbfff and span.picfff is a FireFox fix for those pics that are not links.  Need to have a block element inside the -moz-inline-box with a declared width to get proper text wrapping*/

#leftcolumn .picwcaption a, #leftcolumn .thumbwcaption a, span.picfff, span.thumbfff {
display: block; /*so hover covers entire picture and caption rectangle*/
color: black;
text-decoration: none;
}

#leftcolumn span.picwcaption, #leftcolumn .picwcaption a, span.picfff { width: 210px; }
#leftcolumn .picwcaption img { width: 200px; }
#leftcolumn span.thumbwcaption, #leftcolumn .thumbwcaption a, span.thumbfff { width: 110px; }
#leftcolumn .thumbwcaption img { width: 100px; }

#leftcolumn span.picwcaption, #leftcolumn span.thumbwcaption, #footer, #thankyou { font-size: .8em; }

/*text styling*/
p {margin: 1em 0;}

.centered {text-align: center;}

.clearleft { clear: left; }

.equation {
white-space: nowrap;
font-family: monospace;}

#intro p, #conclusion p { 
font-weight: bold;
clear: left;
}

em, .glossary {
font-style: italic;
}

h1, h2, h3, h4 {
margin: .5em 0;
clear: left;
}

h1 {
font-size: 2em; }

h2 {
font-size: 1.9em;
text-align: left;
}

h3 {font-size: 1.5em;}

h4 {font-size: 1.2em;}

#footer, h1, h2, h3 {color: #077;}

a {text-decoration: none;}

a:hover {text-decoration: underline;}

/*list styling*/
dt {
font-weight: bold;
clear: left;
margin-top: 1.5em;
}

ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 .5em;
}

ul li {
background-image: url(../images/temaribullet.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding: .25em 0 .25em 1.2em;
}

ul ul li {
background-image: url(../images/nestedbullet.gif);
padding: 0 0 0 1.2em;
}

ol {
padding: 0;
margin: 0 3em 0 2em;
}

ol li {
margin: 0;
padding: .5em 0;
}

ol ol {
list-style-type: lower-alpha;
}

ol ol li {
padding: .1em;
}

ol ul li {
padding: .2em 0 .2em 1.2em;
}

/*table styling*/
table {
    border-collapse: collapse;
    border: 1px solid #6c3;
}

table thead th {
    text-align: center;
    border-bottom: 2px solid #6c3;
    border-top: 2px solid #6c3;
}

table th {
    text-align: left;
    font-weight: bold;
    padding: 0.3em 0.7em;
    border: 1px dotted #6c3;
}

table td {
    text-align: center;
    vertical-align: top;
    border: 1px dotted #6c3;
    padding: 0.5em 0.7em;
}

#leftcolumn td img {
float: none;
margin: 1em;
}

.oddrow {background-color: #eee;}

.print, .hideme {display: none;}