/* reset margin and padding to 0 for all elements */
html, body, p, h1, h2, h3, h4, h5, h6, div, ul, li {
margin: 0;
padding: 0;
}

/* This fixes an IE bug that caused awkward text-resizing */
html {
font-size: 100%;
}

body {
text-align: center;
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: url(images/gray-lines.gif);
}

a {
text-decoration: none;
color: blue;
}

a:hover {
text-decoration: underline;
color: #b96917;
}

/* this prevents images from disappearing in IE 6 */
img { 
position: relative;
border: none; /* and this removes image borders unless explicitly set */
}

#header {
/*width: 844px;*/
width: 100%;
margin: auto;
position: relative;
background: url(images/bkg-card.gif);
z-index: 499;
}

/*#header p {
float: right;
}*/

#mainmenu {
width: 125px;
height: 171px;
position: absolute;
top: 0;
left: 0;
/*background: white;*/
text-align: left;
margin-left: 12px;
padding-left: 60px;
padding-top: 10px;
/*background: url(images/bkg-mainmenu.png) no-repeat top left;*/
z-index: 499;
}

#menubkg {
position: absolute;
z-index: 1;
left: 15px;
top: 0;
}

#header a {
color: #403E3F;
display: block;
}

#header a:hover {
color: #b96917;
text-decoration: none;
}

#mainmenu a:hover {
color: #b96917;
}

ul.level1 li {
font-size: 1.4em;
margin-top: 0.2em;
padding-bottom: 0.4em;
}

ul.level1 li ul li {
font-size: 0.6em;
margin-top: 0;
}

#header li {
list-style-type: none;
}

#header #funderslink {
position: absolute;
right: 20px;
top: 65px;
text-transform: uppercase;
font-size: 76%;
color: black;
}

#header #funderslink:hover {
color: blue;
}

#header #funderslink a {
display: inline;
}

#headerbottom {
background: url(images/headerbottom.gif);
height: 17px;
}

#siteid {
display: none;
}

#header .container, 
#content .container, 
#footer .container {
width: 844px;
margin: auto;
/*border: solid 1px blue;*/
position: relative;
}

/* *************** End of Header CSS *************** */

#content {
/*border: solid 1px blue;*/
width: 100%;
background: url(images/bkg-texture.gif);
color: white;
z-index: 1;
}

#content .container {
text-align: left;
height: 390px;
}

#content h1 {
font-size: 120%;
color: #7F2518;
}

#sidebar h1 {
font-size: 110%;
}

#content .notebookheader { /* use this for the top of a notebook page in the tour */
margin: auto;
margin-bottom: 14px;
margin-top: 23px;
text-align: center;
padding-right: 20px;
display: block;
}

#content .subheader {
font-size: 90%;
text-align: center;
font-weight: normal;
margin-bottom: 1em;
}

#content a {
color: #E1AA4A;
}

#frontpage {
background: url(images/notebook.gif) no-repeat -5px -3px;
height: 390px;
width: 400px;
position: absolute;
left: 60px;
top: 0;
}

.slide {
position: absolute;
top: 45px;
left: 60px;
z-index: 100;
}

#studentwork {
position: absolute;
left: 330px;
top: -2px;
z-index: 1;
}

#starttour {
position: absolute;
top: 282px;
left: 85px;
z-index: 499;
}

#sidebar {
position: absolute;
top: 20px;
right: 0px;
width: 200px;
z-index: 500;
}

#shackles {
position: relative;
left: -40px;
top: 10px;
}

#classiclayout #sidebar {
position: relative;
float: left;
padding-top: 35px;
width: 180px;
padding-left: 20px;
}
/**/

#page1 {
width: 50%;
background: url(images/notebook-bkg-left.gif) no-repeat;
height: 390px;
position: absolute;
left: 85px;
top: 0;
}

#tour2 #page1 {
background: url(images/notebook-bkg-tour2.gif) no-repeat;
}

#tour3 #page1 {
background: url(images/notebook-bkg-tour3.jpg) no-repeat;
}

#tour4 #page1 {
background: url(images/notebook-bkg-tour4.jpg) no-repeat;
}

#tour5 #page1 {
background: url(images/notebook-bkg-left2.gif) no-repeat;
}

#page2 {
position: absolute;
right: 0;
background: url(images/notebook-bkg-right.gif) no-repeat;
width: 290px;
color: black;
padding: 40px;
padding-top: 50px;
padding-right: 50px;
padding-left: 50px;
height: 300px;
}

#page2 p {
line-height: 120%;
margin-bottom: 1em;
}

.scroller {
height: 170px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 15px;
}

#tourcontents {
position: absolute;
right: 5px;
font-size: 200%;
}


#tourcontents li {
list-style-type: none;
z-index: 100;
}

#tourcontents a {
display: block;
height: 43px;
width: 28px;
padding-left: 10px;
padding-top: 15px;
color: white;
}

#tourcontents #tab1 {
height: 42px;
padding-top: 20px;
background: url(images/tab1.gif);
}

#tourcontents #tab2 {
position: absolute;
top: 62px;
right: 0;
}

#tourcontents #tab3 {
background: url(images/tab3.gif);
position: absolute;
top: 120px;
right: 0;
height: 50px;
}

#tourcontents #tab4 {
background: url(images/tab4.gif);
position: absolute;
top: 180px;
right: 0;
}

#tourcontents #tab5 {
background: url(images/tab5.gif);
position: absolute;
top: 239px;
right: 0;
height: 60px;
}

#tourcontents #tab1.active {
background: url(images/tab1-active.gif);
z-index: 400;
}

#tourcontents #tab2.active {
z-index: 400;
}

#tourcontents #tab3.active {
background: url(images/tab3-active.gif);
z-index: 400;
}

#tourcontents #tab4.active {
background: url(images/tab4-active.gif);
z-index: 400;
}

#tourcontents #tab5.active {
background: url(images/tab5-active.gif);
z-index: 400;
}

#step1photo {
position: absolute;
left: 18px;
top: 26px;
}

#filmstrip1 {
position: absolute;
left: 35px;
top: 280px;
}

#filmstrip2 {
position: absolute;
left: 110px;
top: 280px;
}

#filmstrip3 {
position: absolute;
left: 190px;
top: 280px;
}

#filmstrip4 {
position: absolute;
left: 268px;
top: 280px;
}

#footnotes {
font-style: italic;
position: absolute;
width: 285px;
bottom: 0;
right: 0;
right: 60px;
color: #7F2518;
font-size: 90%;
margin-bottom: 20px;
}

#footer {
/*border: solid 1px red;*/
/*width: 794px;*/
width: 100%;
padding: 16px 0;
background: url(images/bkg-card.gif);
text-align: left;
z-index: 100;
position: relative;
}

#programdescription {
/*float: left;  this is a temporary hack, need to come back and position more carefully */
width: 310px;
text-transform: uppercase;
text-align: left;
font-size: 76%;
line-height: 1.3em;
color: #403e3f;
}

#footer .logos {
position: absolute;
top: 0;
right: 0;
}

#footer .logos li {
display: inline;
margin-right: 10px;
}

#shadow {
position: absolute;
width: 100%;
bottom: 79px;
}

#tour5 #page1 {
text-align: center;
padding-top: 70px;
color: #9B500F;
width: 328px;
padding-right: 15px;
padding-left: 25px;
}

#tour5 h2 {
font-size: 150%;
}

#tour5 input {
display: block;
margin: auto;
margin-top: 8px;
background: none;
border: solid 1px #9B500F;
width: 220px;
text-align: center;
font-family: "Courier New", Courier, mono;
font-size: 120%;
}

#tour5 #submit {
width: auto;
color: #9B500F;
cursor: pointer;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#tour5 input:hover {
background: #EFC686;
}

#classiclayout {
background: url(images/bigpaper.gif) no-repeat;
min-height: 300px;
padding: 20px;
width: 640px;
color: black;
margin: auto;
padding-top: 30px;
}

#classiclayout p {
margin-bottom: 1em;
}

#classiclayout a {
color: #446e87;
padding: 2px;
}

#classiclayout a:hover {
background: url(images/highlight.gif) repeat-x;
text-decoration: none;
}

#classiclayout #sidebar li {
list-style-type: none;
}

#text {
margin-left: 200px;
}

#text h2 {
color: #0a2541;
font-size: 110%;
}

#text h3 {
color: #0a2541;
font-size: 100%;
}

#text ul {
margin-top: 1em;
margin-bottom: 1em;
}

#text li {
margin-left: 3em;
}
.gallery #content .container {
text-align: center;
}

#zoomimage {
margin: auto;
}

.thumbnails {
background: gray url(images/gray-lines.gif);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
}

.thumbnails h2 {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}

.thumbnails ul {
float: left;
clear: left;
text-align: left;
}

.thumbnails li {
list-style-type: none;
}

.thumbnails img {
float: left;
margin-left: 30px;
}

.thumbnails div {
float: left;
}

#content .thumbnails a {
color: black;
text-transform: uppercase;
font-size: 90%;
}

.thumbnails a:hover {
background: url(images/highlight-gray.gif);
text-decoration: none;
}

.thumbnails a:hover img {
background: none;
}

/********** Tour Step 2 *********/

.step2image {
position: absolute;
left: 57px;
top: 87px;
background: url(images/step2start.jpg) no-repeat;
width: 228px;
height: 160px;
text-align: center;
padding: 15px;
color: black;
text-transform: uppercase;
font-size: 13px;
}

.step2image h3 {
text-transform: none;
color: white;
margin-bottom: 10px;
font-size: 15px;
}

.step2image li {
text-align: left;color: black;
text-transform: uppercase;
font-size: 90%;
font-size: 12px;
margin-left: 1em;
}

#step1 {
position: absolute;
top: 287px;
left: 130px;
}

#step2 {
position: absolute;
top: 318px;
left: 130px;
}

#step3 {
position: absolute;
top: 347px;
left: 130px;
}

#step2ha, 
#step2hb, 
#step2hc {
font-size: 15px;
}

/* *************************** */

.nobullet {
list-style-type: none;
}

#tab1 {
position: absolute;
right: -1px;
}

#tab2 {
position: absolute;
right: -1px;
top: 109px;
}

#tab3 {
position: absolute;
right: -1px;
top: 169px;
}

#tab4 {
position: absolute;
right: -1px;
top: 229px;
}

#tab5 {
position: absolute;
right: -1px;
top: 289px;
}

.activetab {
z-index: 499;
}

#sample1button {
position: absolute;
left: 99px;
top: 285px;
}

#sample2button {
position: absolute;
left: 99px;
top: 313px;
}

#sample3button {
position: absolute;
left: 99px;
top: 343px;
}

#sample1 {
position: absolute;
left: 129px;
top: 86px;
}

#sample2 {
position: absolute;
left: 50px;
top: 68px;
}

#sample3 {
position: absolute;
left: 55px;
top: 80px;
}

#shadow {
position: absolute;
width: 707px;
top: 340px;
z-index: 500;
left: 19px;
height: 50px;
}

.addrule {
background: url(images/rough-rule.gif) no-repeat 0px bottom;
}

#prevbutton {
position: absolute;
left: 33px;
top: 10px;
}

#nextbutton {
position: absolute;
right: 40px;
top: 11px;
}

/*#imagedescription {
position: absolute;
right: 0;
z-index: 501;
top: 0;
color: black;
text-align: left;
} Probably don't need this now that we're using hidden divs */

.galleryimage p {
float: right;
width: 200px;
text-align: left;
font-style: italic;
margin-top: 110px;
}

.galleryimage img {
position: absolute;
right: 220px;
}

.prevbutton {
float: right;
}

.nextbutton {
float: right;
}

#shadow {
display: block;
text-align: center;
top: 483px;
z-index: 600;
left: 0;
width: 100%;
}

#shadow img {
width: 100%;
height: 15px;
}

.thumbnails div a, 
.thumbnails a img {
z-index: 850;

}