/*************** CSS Stylesheet for JAHA Education site*************/

body{
	font-family: Trebuchet, "Trebuchet MS",sans-serif;
	line-height: 1.2em;
	margin: 0 0 2em 0;
	padding: 0px;
	}


/*************** Layout Divs***********/

#pagecell1 {
	position:absolute;
	top: 90px;
	left: 17px;
	right: 70px;
	background-color: #eed;
}


#masthead {
	position: absolute;
	top: 0px;
	left: 2%;
	right: 70px;
	
}

#pageNav {
	float: left;
	width:178px;
	padding: 0px;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	position: fixed; 
	top:162px;
}

#content{
	padding: 0px 1em 0px 1em;
	margin:0px 0px 0px 178px;
	font-size: 0.9em;
	border-left: 1px solid #cccccc;
	line-height: 1.4em;
	clear:none;}

#siteInfo{
	clear:both;
	border-top: 1px solid #ccccbb;
	font-size: small;
	color: #666644;
	padding: 10px 10px 50px 10px;
	margin-top: 0px;
	text-align:right;
}


/* Holly hack for IE \*/
* html body,
* html #pagecell1,
* html #content { height: 0; position:relative;}


/************ Masthead Divs**************/

#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: normal;
}

#masthead #siteName {
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #ffffff;
	font-weight: bold;
}

#masthead #siteName #museum{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #dddddd;
	font-weight: normal;
}

#exhibit{
	width: 60%;
	top: 5px;
	font: 1em/20px georgia,serif;
	padding: 5px 0px 10px 10px;
	/*display: block;*/
	vertical-align: bottom;
	font-weight: bold;
	color: #999999;
}


/************** headings **************/

h1,h2,h3,h4,h5{
 font-weight: bold;
 font-family: georgia,serif;
 margin: .75em 0 .5em 0;
 padding: 0;
 }

h1 {
font-size: 1.4em}


h2{
 font-size:1.25em 
}

h3{
 font-size: 1.15em;
}

h4{
 font-size: 1em;
}

li h4{
margin-bottom:.25em;
}


h5{
	font-size: 0.9em;
}


	

/*************General page -subnav headings*************/

#pageNav h1{
 font-size: 1em;
 font-weight: bold;
 font-family: Trebuchet, "Trebuchet MS",sans-serif;
 margin: 0px;
 padding: 0px;
}

#pageNav h2{
	font-size: 0.85em;
	font-weight: bold;
	font-family: Trebuchet, "Trebuchet MS",sans-serif;
	margin: 0px;
	padding: 0px;
}

#pageNav h3{
 font-size: .75em;
 font-weight: bold;
 font-family: Trebuchet, "Trebuchet MS",sans-serif;
 margin: 0px;
 padding: 0px;
}

#pageNav h4{
 font-size: .7em;
 font-weight: bold;
 font-family: Trebuchet, "Trebuchet MS",sans-serif;
 margin: 0px;
 padding: 0px;
}

#pageNav h5{
 font-weight: bold;
 font-family: Trebuchet, "Trebuchet MS",sans-serif;
 margin: 0px;
 padding: 0px;
}

/******* hyperlink and anchor tags *******/

a:link, a:visited{
	color: #339999;
	font-weight:bold;
	text-decoration: none;
	border: 0;
}

a:hover{
	text-decoration: underline;
	font-weight: bold;
	background: #ffffee;
	border: 0;
	color: #00CC99;
}

a:active{
	text-decoration:underline;
	color:#993333;
	background-color: #aaaa99;
	font-weight: bold;
	border: 0;
}

/************ sectionLinks subnav **************/
/*********see jfm, jhdc, and wrh css for variable color styles*******/


#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3 {
	margin: 0px;
	padding: 0px 0px 0px 10px;
}

div#sectionLinks a:link, 
div#sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffee;
	border-left: 1px solid #ffffee;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCbb;
	padding: 2px 0px 2px 5px;
	text-decoration:none;
}

div#pagecell1 div#pageNav div#sectionLinks h2 a:hover,
div#pagecell1 div#pageNav div#sectionLinks h2  a:active {
	border-top: 1px solid #CCCCbb;
	border-left: 1px solid #CCCCbb;
	border-right: 1px solid #ffffee;
	border-bottom: 1px solid #ffffee;
	text-decoration: none;
}

div#pagecell1 div#pageNav div#sectionLinks h3 a:hover,
div#pagecell1 div#pageNav div#sectionLinks h3 a:active {
	border-top: 1px solid #CCCCbb;
	border-left: 1px solid #CcCCbb;
	border-right: 1px solid #ffffee;
	border-bottom: 1px solid #ffffee;
	text-decoration: none;
}

/*************** list tag  ***************/

ul{
	list-style-type: square;
}

ul li{
	line-height: 1.4em;
	padding-bottom: 0.25em;
}


ul ul{
 list-style-type: square;
}

ul ul ul{
 list-style-type: square;
}

ul.footnotes {
list-style:none;
line-height:1em;
font-size:.9em;
}

ul.footnotes li a {
	vertical-align: super;
}

dl {
margin:.5em 0;
}

dl dt {
font-weight:bold;
color:#144;
margin-top:.5em;
}



/************headings******************/

div#content h1,h2,h3,h4,h5{
font-family:georgia, serif;
margin:1em 0 0 0;
line-height:1.4em;
}

#content h2 {
	border-bottom:2px solid #ccb;
	border-top:2px solid #fff;
	padding:2px 4px;
	background-color: #f4f4e5;
}


/************** pageName styles  ****************/

#pageName{
	padding: 0px 0px 10px 10px;
	margin: 0px;
	border-bottom:1px solid #cccccc;
}

#pageName h1{
	font: bold 1.5em Georgia, serif;
	margin:0px;
}

/************* globalNav - in masthead ****************/

#globalNav{
position: relative;
display:block;
width: 100%;
min-width: 640px;
height: 28px;
padding: 0px;
margin: 0px;
}

#globalLink{
	position: absolute;
	top: 7px;
	height: 18px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	right: 10px;
	text-align: right;
	display:block;
	left: 10px;
}

a.glink, a.glink:visited{
  	font-size: 10px;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #333333;
}

a.glink:hover{
	color:#665;
	background-color:#eed;
}

#globalLink a.youarehere:link,
#globalLink a.youarehere:visited {
	font-size:inherit;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 2px 5px;
}

.skipLinks {display: none;}


/************* breadCrumbs  ***************/

#breadCrumb{
	padding: 3px 10px 5px 0px;
	font: .7em/15px Trebuchet, "Trebuchet MS",sans-serif;
	color: #aaaaaa;
	right:0px;
	position: absolute;
	text-align: right;
	width: 50%;
	top: 5px;
}

#breadCrumb a{
	color: #aaaaaa;
}

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

/************** content area - pseudo-paper *****************/

#content blockquote {
line-height: 140%;
}

#content div.docu {
display:block;
background-image:url(../img/paper-bg09.jpg);
background-repeat:repeat;
background-color: #fff;
margin:1.5em;
padding:1em 2em 1em 2em;
border-top:2px solid #ffe;
border-left:2px solid #ffe;
border-right:2px solid #bba;
border-bottom:2px solid #bba;
font-family:"Kunstler Script", "Vladimir Script", "Lucida Handwriting", "Bradley Hand ITC", cursive, serif; 
font-size:1.2em;
line-height:2em;
color:#330033;
font-size-adjust:0.5;
}
/* Holly hack for IE \*/
* html #content div.docu {font-size:2em;}
/* */


#content div.docu-office {
display:block;
background-image:url(../img/paper-bg02.jpg);
background-repeat:repeat;
background-color: #fff;
margin:1.5em;
padding:2em 2em 2em 3em;
border-top:2px solid #ffe;
border-left:2px solid #ffe;
border-right:2px solid #bba;
border-bottom:2px solid #bba;
font-family:"John Doe", "American Typewriter", Courier, monospace; 
font-size:1.2em;
line-height:1.6em;
color:#333333;
}

#content div.docu-office img {
float:left;
margin: -1.5em 1em .25em -1.5em;
border-top:2px solid #ffe;
border-left:2px solid #ffe;
border-right:2px solid #bba;
border-bottom:2px solid #bba;
}

#content div.docu-print {
	display:block;
	background-color: #fff;
	margin:1.5em;
	padding:2em 2em 2em 3em;
	border-top:2px solid #ffe;
	border-left:2px solid #ffe;
	border-right:2px solid #bba;
	border-bottom:2px solid #bba;
	font-family:Palatino, Georgia,  serif;
	font-size:1.1em;
	line-height:1.8em;
	color:#000000;
	clear: both;
}

#content div.docu-print img {
float:left;
margin: -1.5em 1em .25em -1.5em;
border-top:2px solid #ffe;
border-left:2px solid #ffe;
border-right:2px solid #bba;
border-bottom:2px solid #bba;
}


#content table.docu_img {
	background-color:#CCCCBB;
	/*padding:1em; MS web site says IE6 doesn't like padding on tr > 0 
	*/
	padding: 0;
	border-top:2px solid #ffe;
	border-left:2px solid #ffe;
	border-right:2px solid #aa9;
	border-bottom:2px solid #aa9;
	width: 10%;
	margin: 1em 1em 1em 0;
}

.docu_img img{
	border: 2px solid #330033;
}

.docu_img td p {
	font: bold .9em/1.3em "Trebuchet MS", Arial, Geneva, sans-serif;
	text-align:left;
	vertical-align: top;
	margin: .75em 0 .25em 0;
	color:#332; 
}

.docu_img td {
	border:0; 
}

.lt div  {
float:left;
display:inline;
background-color:transparent;
}

div.rt  {
float:right;
background-color:transparent;
}

div.rtSidebar {
	float:right;
	display:block;
	width:30%;
	background: #ddddcc;
	padding: .5em 1em .5em 24px;
	border-top: 2px solid #aa9;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #887;
	list-style-position: outside;
	list-style-type: square;
	margin:1.5em;
	font-size:.9em;
	line-height:1.2em;
	background-image: url(../discovery_center/img/mosaic/simple-vert03s.gif);
	background-position: left;
	background-repeat: repeat-y;

}

td.rt {
float:right;
text-align:right;
}

body.gallery table.gallery_table td.rt {
float:right;
text-align:right;
}

body.gallery table.gallery_table td.pano {
float:none;
text-align:center;
padding:0 10%;
}


img.section_div  {
	display:block;
	margin:0.5em auto;
	text-align: center;
}

/********* content area - Picture gallery **************/

body.gallery #content, 
body.sp #content{
	padding: 0 1em 0 1em;
	margin:0 0 0 1em;
	border-left: none;
	font-size: 0.9em;
}


body.gallery #pagecell1 #pageNav, 
body.sp #pagecell1 #pageNav {
display:none;
}

table.gallery_table {
	width:100%;
	border: none;
	text-align: center;
	clear:both;
}

table.gallery_table tr td {
	border:0;
	vertical-align: top;
	text-align: left;
}

table.gallery_table tr td ul {
	border:0;
	vertical-align: top;
	text-align: left;
	font-size: .8em;
}

body.gallery div#content table.gallery_table table.imageframe, 
body.gallery div#content table.gallery_table div.imageframe,
div.gallery table.gallery_table table.imageframe, 
div.gallery table.gallery_table div.imageframe {
	background:#CCCCBB;
	margin: .5em 1em .5em 0;
	float:left;
	border-top:2px solid #ffe;
	border-left:2px solid #ffe;
	border-right:2px solid #aa9;
	border-bottom:2px solid #aa9;
	width: auto;
	text-align: center;
	padding: 0 0 .5em 0;
}



	
/*body.gallery table.gallery_table .imageframe a {}*/
/*display:block;  <<<<<<<<This is the problematic bit of code that causes DW to hang when opening pages that use this rule. Commenting it out allows it to open pages using this rule. Browsers display OK. HTML and CSS both validate */
/*display:block;*/



.imageframe img {
	margin: 0.5em;
	border:1px solid #332;
}

body.gallery .imageframe img,
div.gallery .imageframe img {
	margin: 0.5em;
	border:1px solid #332;
	text-align: center;
}



body.gallery div.imageframe a,
div.gallery div.imageframe a {
	display:block;
	background-color:#ccccbb;
}

body.gallery div.imageframe a:link,
div.gallery div.imageframe a:link {
	background-color:#ccccbb;
}

body.gallery div.imageframe a:hover,
div.gallery div.imageframe a:hover {
	background-color:#ffe;
}

body.gallery div.imageframe a:hover img,
div.gallery div.imageframe a:hover img {
	border: 1px solid #399;
}

body.gallery div.imageframe a:active,
div.gallery div.imageframe a:active {
	background-color: #aa9;
}

body.gallery div.imageframe a:active img,
div.gallery div.imageframe a:active img {
	border: 1px solid #ffe;
}


.imageframe p, .imageframe td p {
	font: .85em "Trebuchet MS", Arial, Geneva, sans-serif; 
	color:#332; 
	margin: .5em 0 .5em .5em;
	text-align:left;
	border:0;
	line-height:1.25em;
	font-weight:bold;
}

/*caption widths for image galleries*/

body.gallery .imageframe p, 
div.gallery .imageframe p {
	width:150px;
}


body.gallery .imageframe p.ultra,
div.gallery .imageframe p.ultra { 
	width:500px; 
}


body.gallery .imageframe p.wide,
div.gallery .imageframe p.wide, { 
	width:250px; 
}

body.gallery .imageframe p.med,
div.gallery .imageframe p.med { 
	width:200px; 
}

body.gallery .imageframe p.nar,
div.gallery .imageframe p.nar { 
	width:150px;
}


/*****************previous-next bar******************/

body.gallery #pagecell1 #content .prevNext {
	background-color: #ddc;
	padding: 0px 0 0 6px;
	border-top: 2px solid #FFFFEE;
	border-right: 2px solid #AAAA99;
	border-bottom: 2px solid #AAAA99;
	border-left: 2px solid #FFFFEE;
}


body.gallery #pagecell1 #content .prevNext td {
	padding: 0;
	border:none;
	font-weight:bold;
}

body.gallery #pagecell1 #content a:hover.prevNext td a:link  {
text-decoration:none;
	background-color:#AAAA99;
	}
	
body.gallery table.prevNext a {
background-color:#ddc;
text-decoration:none;
border:none;
}

body.gallery table.prevNext a:hover {
color:#663300;
}


body.gallery table.prevNext a:active {
color:#bb9977
}

/***************statistics table*****************/

table.stat {
	border:1px solid #aaaa99;
	font-size:0.9em;
	line-height:1.2em;
	width:100%;
	border-collapse:collapse;
	text-align: left;
	vertical-align: top;
}

table.stat caption {
text-align:left;
font-size:1.2em;
padding:1em 0 .5em 0;
font-weight:bold;
}

table.stat tr th {
border-top:1px solid #ffffff;
border-bottom:1px solid #666655;
background-color:#ddddcc;
padding:.5em .5em;
vertical-align:top;
}


table.stat tr td {
	border:1px solid #aaaa99;
	vertical-align: top;
}

table.stat tr th h3, table.stat tr th h4{
margin:0;
vertical-align:top;
}


/****** discussion bullet block *************/

div.discuss_bullets {
	background: #ddddcc;
	padding: .5em 1em;
	border-top: 2px solid #aa9;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #887;
	display: block;
	list-style-position: outside;
	list-style-type: square;
	margin:1.5em;
}

.discuss_bullets h3 {
font-family:"Trebuchet MS", Arial, Geneva, sans-serif;
}

.discuss_bullets ul {
margin:.0 0 1em 0;
}

.discuss_bullets li:first-child {
margin: 1em 0 0 0;
}

.tg div.discuss_bullets {
background-image:none;
}



/****** TG materials block *************/

/*********see jfm, jhdc, and wrh css for variable color styles*******/

div.materials {
	padding: .5em .5em .25em .5em;
	border-top: 1px solid #aa9;
	border-right: 1px solid #ffe;
	border-bottom: 1px solid #ffe;
	border-left: 1px solid #aa9;
	display: block;
	list-style-position: outside;
	list-style-type: square;
}

.materials {
font-size:11px;
}

.materials table caption {
text-align:left;
font-weight:bold;
font-size:1.15em;
font-family:"Trebuchet MS", Arial, Geneva, sans-serif;
}

.tg #content .materials table {
text-align:left;
vertical-align:top;
width:auto;
padding: .5em .25em .5em .25em;

}

.tg #content .materials table td {
 border:0;
 padding:0;
}


.materials ul {
margin: 0 0 0 .5em;
padding: 0 0 0 1em;
}


.materials ul ul {
padding: 0 0 0 1em;
}


.materials li {
margin:0em 0 0 0;
font-weight:normal;
padding: 0 0 .25em 0;
}




/****************TG tables**************/

body.tg div#content table.grid,
body.sp div#content table.grid {
	margin:2em;
	width:auto;
	border-collapse: collapse;
	border:1px solid #110;
	vertical-align: top;
	background-color: #ffe;
}

body.tg #content table.grid td, /*,th*/    /*this is the selector that is picked up by class-less generic tables in body.sp and body.gallery pages -- fixed by eliminating <th> selector */
body.sp #content table.grid td {
	padding: .5em .5em;
	border-collapse: collapse;
	border: 1px solid #110;
	text-align:left;
	vertical-align: top;
}

body.sp #content table.grid td {
font-size:inherit;
}

body.tg #content table.grid td ul,
body.sp #content table.grid td ul {
	padding: 0;
	margin-left: 1em;
}


body.tg #content table.grid th,
body.sp #content table.grid th {
	padding: .25em .5em;
	border-collapse: collapse;
	border: 1px solid #110;
	font-weight:bold;
	color:#110;
	background-color:#ddc;
	vertical-align:middle;
}

body.tg #content table.grid th.contrast,
body.sp #content table.grid th.contrast {
background-color:#ccccbb;
}

body.tg #content table.grid caption,
body.sp #content table.grid caption {
font-weight:bold;
font-style:italic;
text-align:left;
margin: 0 0 .5em 0;
}

/*************** search  *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
}

#search a:hover{
	margin: 0px;
}

/************** siteInfo  ****************/



#pagecell1 #siteInfo a {
	display: none;
}


/************** utility  *****************/

#utility{
	font: 75% georgia,sans-serif;
	position: absolute;
	top: 8px;
	right: 0;
	color: #FFFFFF;
	width: 40%;
	text-align: right;
}

#utility a{
	color: #ffffff;
}

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


.teach {
	color: #666655;
}

.announce {
	color: #990033;
	background: #ddc;
	padding: 2px  3px 3px 3px;
	border-top: #fff solid 1px;
	border-bottom: #ccb solid 1px;
	text-transform: uppercase;
	font: bold .8em Verdana,geneva,arial,sans-serif;
}

a:hover .announce   {
	color: #CC3366;
	background: #ffe;
	border-top: #fff solid 1px;
	border-bottom: #ccb solid 1px;
}

.credit {
font-style:italic;
color:#776;
}

body.gallery .imageframe p.credit  {
	text-align: right;
	width: 9%;
	padding-right: 1em;
	font-size:10px;
	font-style:italic;
}

/********************* end **********************/