/*==============  Browser reset as recommended by Eric Meyer  ========== */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ===========================  End of Reset  ==============================*/
 

/* -------------------------------- Constants -----------------------------
Lavender: #5268A1
	20% Lavender: #BBBDC3
	
Cream: #D5D2CC

Sans-serif: Arial
Serif: Georgia

Font-size: 10pt = 13px = 0.8em = 80%
	Use relative sizes for newer devices (ex. iPhone, Blackberry)
	
Points 	Pixels 	Ems 		Percent
6pt 	8px 	0.5em		50%
7pt 	9px 	0.55em 		55%
7.5pt 	10px 	0.625em 	62.5%
8pt 	11px 	0.7em 		70%
9pt 	12px 	0.75em 		75%
10pt 	13px 	0.8em 		80%
10.5pt 	14px 	0.875em 	87.5%
11pt 	15px 	0.95em 		95%
12pt 	16px 	1em 		100%
13pt 	17px 	1.05em 		105%
13.5pt 	18px 	1.125em 	112.5%
14pt 	19px 	1.2em 		120%
14.5pt 	20px 	14px 		125%
15pt 	21px 	1.3em 		130%
16pt 	22px 	1.4em 		140%
17pt 	23px 	1.45em 		145%
18pt 	24px 	14px 		150%
20pt 	26px 	1.6em 		160%
22pt 	29px 	1.8em 		180%
24pt 	32px 	2em 		200%
26pt 	35px 	2.2em 		220%
27pt 	36px 	24px 		225%
28pt 	37px 	2.3em 		230%
29pt 	38px 	2.35em 		235%
30pt 	40px 	2.45em 		245%
32pt 	42px 	2.55em 		255%
34pt 	45px 	2.75em 		275%
36pt 	48px 	3em 		300%
--------------------------------------------------------------------------- */




body { font-family:Arial, Helvetica, sans-serif; color:#333; background:white; line-height: 19px; font-size:15px;}

#Homepage { margin:auto; background-image: url('images/AHJ-Background2.png'); background-position: center; background-repeat: no-repeat; height:532px; position: relative; width:960px; position:relative;}
	#Homepage #navigation { display: block; position: absolute; left: 280px; top:220px; font-size:16px; font-weight:lighter;}
	#Homepage #navigation ul li { float:left; margin-left:14px;}
	#Homepage #navigation a:link, #Homepage #navigation a:visited { text-decoration:none; color:#BF8105; }
	#Homepage #navigation a:hover { color:black; }
	
	#Homepage #intro { display: block; position: absolute; left:205px; top:280px; font-size:14px; color:#484F53; width:560px; line-height:20px;}
	
	#Homepage #biyoto { position: absolute; top:36px; left:336px; }
	#Homepage #moyo { position: absolute; top:0px; left:507px; }
	#Homepage #wabanda { position: absolute; top:65px; left:498px; }
	#Homepage #maku { position: absolute; top:36px; left:711px; }
	 
	
	
#nav { margin: 10px auto; width:960px; position: relative; height:100px;}
	#nav ul { padding-left:273px; margin-top:0px;}
	#nav ul li { float:right; margin-left:2em; font-size:14px;}
	#nav ul li a:link, #nav ul li a:visited { text-decoration:none; color:#BF8105; }
	#nav ul li a:hover { color:black; }
	
#NavBackground { float:right; }

#HeaderLeft { float:left; margin-right:20px; }


#page { width:960px; margin:20px auto 30px; padding:0; font-size:13px; }
	#page #column1 { width:300px; float:left; border:0px solid red; clear:left;}
	#page #column2 { width:630px; float:right; border:0px solid red; clear:right; }
	#page #column3 { width:960px; text-align: left;}
		#page #column3 h1 { padding-left:320px; }
		#page #column3 h2 {background:#EEEEEE none repeat scroll 0 0; padding:10px 0 10px 320px;}		
		#page #column3 h3 { padding-left:320px; }
		#page #column3 h4 { color:#333; margin-top:1em; font-size:14px; padding-left:320px; border-bottom:1px solid black; }
		#page #column3 p { padding-left:320px; padding-right:40px; }
	#page #map { width:100%; clear:both; position: relative; }
	
	#page #ExhibitLayoutMap { margin-top:20px; }
	
	.Image { float:left; margin-left:100px;}
	
	#page p { margin-bottom:1em; }
	
	#page h1 { clear:both; color:white; background: #bf8105; padding:4px 6px; display:block;font-size:18px; margin:10px 0 10px 0; font-weight:bold; }
	#page h2 { clear:both; color:#333; margin:40px 0 .3em 0; font-size:22px; }
	#page h3 { clear:both; color:#666; margin:14px 0 .2em 0; font-size:18px;}
	
	#page #column4 h2 { clear: none;  padding-left:300px; }
	#page #column4 h3 { font-size:18px; color:#333; padding-left:100px; border-bottom:1px solid #ccc;}
	#page #column4 h4 { clear: none; font-size:14px; color:#333; padding-left:300px; }
	#page #column4 h5 { font-size:12px; color:#666; padding-left:100px; display:block;}
	#page #column4 h6 { clear: none; font-size:12px; font-weight:normal; color:#333; padding-left:300px;}
	#page #column4 p { padding-left:300px; padding-right:40px; }

	
	#page .Image h1 { font-size:10px; font-weight:lighter; color:#666; display:inline; background:none; line-height:1em; padding:0 !important;}
	#page .Image h2 { font-size:9px; font-weight:normal; color:#666; line-height:1em; padding:0; margin:0;}
	#page .Image h6 { font-size:8px; font-weight:normal; color:#666; line-height:1.2em; padding:0; margin:0;}
	#page .Image { border:1px solid #ccc; background:#eee; padding:4px; margin:5px; }
	#page .Image img { margin:auto; margin-bottom:5px; border:1px solid #ccc;}
	
	#page .ConceptDetail { padding-left:10px; }

	#Dysentery { float:left; margin-left:80px; margin-top:40px; }
	#Details-Image { float:left; margin-left:80px; margin-top:0px; }
	
	#WalkthroughNav { width:960px; clear:both; position: relative; height:20px; margin-bottom: 20px; }
	#WalkthroughBack { float:left; }
		#WalkthroughBack a:link, #WalkthroughBack a:visited { text-decoration:none; color:#BF8105; }
		#WalkthroughBack a:hover { color:black; }
		#WalkthroughBack img { padding-right:6px; margin-bottom:-2px; }
	#WalkthroughForward { float:right; }
		#WalkthroughForward a:link, #WalkthroughForward a:visited { text-decoration:none; color:#BF8105; }
		#WalkthroughForward a:hover { color:black; }
		#WalkthroughForward img { padding-left:6px; margin-bottom:-2px; }
	
	
ul.Outline { padding-left:4px; margin-top:50px;margin-bottom:2em;}
ul.Outline li { list-style-type: none; margin-left:0;margin-top:14px; font-size:18px;}
ul.Outline ul { margin-left:3em; }
ul.Outline ul li { list-style-type:disc; margin-top:0; font-size:12px;}
ul.Outline ul ul { margin-left:14px; margin-bottom:4px;}
ul.Outline ul ul li { list-style-type:none; }

ul.Outline a:link, ul.Outline a:visited { text-decoration:none; color:#BF8105; }
ul.Outline a:hover { color:black; }

ul.DetailsList { margin-left:300px; }
ul.DetailsList a:link { color:#333;}
ul.DetailsList a:visited { color:#666; }
ul.DetailsList a:hover { color:#BF8105; }

ul.BasicList { padding-left:4px;}
ul.BasicList li { list-style-type: disc; margin-left:2em;}
ul.BasicList ul { margin-left:14px; margin-bottom:1em;}
ul.BasicList ul li { list-style-type:square; }
ul.BasicList ul ul { margin-left:14px; margin-bottom:4px;}
ul.BasicList ul ul li { list-style-type:square; }

.JourneyQuestions { margin-left:270px;}

ol.BasicList { padding-left:4px;}
ol.BasicList li { list-style-type:decimal; margin-left:2em;}
ol.BasicList ol { margin-left:14px; margin-bottom:1em;}
ol.BasicList ol li { list-style-type:square; }
ol.BasicList ol ol { margin-left:14px; margin-bottom:4px;}
ol.BasicList ol ol li { list-style-type:square; }

#demotip { 
    display:none; 
    background:transparent url(images/black_arrow.png); 
    font-size:12px; 
    height:70px; 
    width:160px; 
    padding:25px; 
    color:#fff;     
}

img.floatLeft { float:left;}

#footer { width:960px;  margin:20px auto 0; padding:6px 10px 6px 20px; }

.clearer { clear:both; }

strong { font-weight: bold; }
em { font-style: italic; }




/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
float:left;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
margin:1px 1px 1px 0;
padding:2px 2px 2px 0;
border:2px solid #fff;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
visibility: hidden;
color: #333;
text-decoration: none;
font-size:11px;
background:white;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
bottom: 120px;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50
}

#ImageGallery {width:300px; float:left; padding-bottom:30px; }

#CaseStudyImageGallery {width:300px; float:left; }

#CaseStudyFeatureImage { width:300px; height:374px;  position:relative; }
#CaseStudyFeatureImage img { position:absolute; bottom:0; }

#FeatureImage { width:300px; height:400px;  position:relative;}
#FeatureImage img { position:absolute; top:0; right:0; }

#ImageInfo, #ImageInfo2, #ImageInfo3, #ImageInfo4, #ImageInfo5, #ImageInfo6 { float:left; padding-left:15px; margin-left:5px; background-image: url('LeftArrow.png'); background-position: left top; background-repeat: no-repeat; color:#be8005; width:600px;  }
#ImageInfoSingle, #ImageInfoSingle2 { width:290px; color:#be8005; line-height: 1.2em; padding:5px; height:40px;}

#Thumbs { padding-left:320px; }
#Column2Thumbs { }
.ThumbsLeft { width:300px; }

#LeftImage { }

#IconImage { width:300px; float:left; }
#IconImageInfo { float:left; width:300px; }00px;  }
#ImageInfoSingle, #ImageInfoSingle2 { width:290px; color:#be8005; line-height: 1.2em; padding:5px; height:40px;}

#Thumbs { padding-left:320px; }
#Column2Thumbs { }
.ThumbsLeft { width:300px; }

#LeftImage { }

#IconImage { width:300px; float:left; }
#IconImageInfo { float:left; width:300px; }



.clearfix:after {
	content:" "; 
	display:block; 
	height:0;
	font-size:0; 
	clear:both; 
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide */