/*--------------------------------------------------------

	File:			common.css
	Version:		1.0
	Contents:		Base stylesheet providing
					grid and typography functions
	Last modified:	09.07.10
	TOC:
	
		0. Reset
		1. Globals
		2. Typography
		3. Structure
		4. Widgets (e.g. Tabs etc.)
		5. Page Specific Styles
		6. Miscellaneous
		
	Note: Items marked EXPERIMENTAL are incomplete and 
	      may or may not work as expected.

--------------------------------------------------------*/

/*--------------------------------------------------------

	N.B. CODING STYLE
	
	1. Retain the same level of indentation used in this document.
	2. DO NOT use !important unless absolutely necessary, instead make use of the C (cascade) in CSS.
	3. Use EM units for all dimensional properties except for width.
	4. Hex codes are to be all uppercase. e.g. #FFF - NOT #fff
	5. Always enclose url paremeters in double quotes. e.g. url("../img/myimage.jpg") - NOT url(../img/myimage.jpg)
	6. New ID and Class declarations should use camel case e.g. .myNewClassName
	7. IE Hacks, two types are used...
		- To target IE6 & IE7 use *html { }
		- To target IE6 only use _html { }
	8. For multiple declarations include each on a new line 
		e.g.
			.classOne,
			.classTwo { }
		


--------------------------------------------------------*/

/* 	0. 		Reset
	0.1 	Yahoo Reset CSS
--------------------------------------------------------*/

	/*
		0.1 Yahoo Reset CSS
	*/
	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, 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;
	}
	html {
		overflow:			-moz-scrollbars-vertical;
		overflow-x:			auto;
	}
	body {
		line-height: 		1;
	}
	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;
	}

/* 	1. 		Globals
	1.1 	Reset 1em == 10px
	1.2		Body
--------------------------------------------------------*/

	/*
		1.1 Reset 1em == 10px
	*/
	html { 
		font-size: 125%; 
	}
	
	body { 
		font-size: 50%; 
	}
	
	/*
		1.2 Body
	*/
	body {
		color: #404040;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		background:	#FFF;
	}
	
/* 	2. 		Typography
	2.1 	Headings
	2.2 	Paragraphs & Text
	2.3 	Rules
	2.4 	Links
	2.5 	Lists
	2.5.1 	Ordered Lists
	2.5.2 	Unordered Lists
	2.5.3 	Definition Lists
	2.6 	Superscripts & Subscripts
	2.7 	Bolds, Italics, Cites, Pre
	2.8 	Tables
	2.9 	Forms
	2.10 	Footnote Lists
--------------------------------------------------------*/

/*
	2.1 Headings
*/

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1em;
		margin: 0 0 .5em 0;
	}

	h1 {
		font-size: 3em;
		text-indent: -9999px;
	}
	
	h2 {
		font-size: 3em;
		font-weight: normal;
		color: #4E4F27;
		font-family: "Times New Roman", Times, serif;
		border-bottom: 1px solid #6E6F45;
		padding-bottom: .3em;
	}
	
	h2.intro {
		font-size: 1.8em;
		line-height: 1.4em;
		margin: 0 0 1em 0;
		font-weight: normal;
		padding-bottom:15px;
	}
	
	h3 {
		font-size: 1.8em;
		color: #4E4F27;
		font-weight: normal;
		margin: 0 0 1em 0;
	}
	
	h4 {
		font-size: 1.4em;
		color: #4E4F27;
		margin-bottom: 1em;
	}
	
	h5 {
		font-size: 2em;
	}
	
	h5.footnote {
		font-size:				1.2em; 
		margin-bottom:			0.5em; 
		font-weight:			bold;
		color: #4E4F27;
	}	
	
	h6 {
		font-size: 1.8em;
	}

/*
	2.1 Paragraphs & Text
*/
	
	p, 
	blockquote,
	address {
		font-size: 1.2em;
		line-height: 1.4em;
		margin: 0 0 1em 0;
	}
	
	blockquote {
		padding: 1em;
	}
	
	blockquote p {
		font-size: 1em;
	}
	
	address {
		font-style: normal;
	}
	
/*
	2.1 Links
*/

	a:link, a:active {
		color: #6E6F45;
	}
	
	a:visited {
		color: #6E6F45;
	}
	
	a:hover {
		color: #4E4F22;
	}
	
/*
	2.1 Lists
*/

	ul, ol, dl {
		font-size: 1.2em;
		line-height: 1.4em;
		margin: 0 0 1em 0;
		padding: 0 0 0 1em;
	}
	
	ul li {
		list-style-type: disc;	
	}	
	
	ol li {
		list-style-type: decimal;	
	}
	
	li {
		margin: 0 0 .5em .5em;
	}
	
	ul li ul, 
	ol li ol {
		font-size: 1em;
		margin: 1em 0;
	}
	
	ul li ul li {
		list-style-type: circle;	
	}
	
	ol li ol li {
		list-style-type: lower-roman;	
	}
	
	dl dt {
		font-size: 1.2em;
		font-weight: bold;
	}
	
	dl dd {
		margin: 0 0 .5em 0;	
	}
	
	dl dd dl {
		font-size: 1em;
		margin: .5em 0;
	}
	
/*
	2.1 Superscripts & Subscripts
*/

	sup {
		vertical-align: top;
	}
	
	sub {
		vertical-align: bottom;
	}
	
/*
	2.1 Bolds, Italics, Cites, Pre
*/

	strong {
		font-weight: bold;
	}
	
	em, 
	cite {
		font-style: italic;
	}
	
	pre {
		
	}
	
/*
	2.1 Rules
*/

	hr {
		display: none;
	}

	.hr {
		background:				#9D9F63; 
		border:					0 none; 
		height:					1px; 
		margin:					15px 0 16px 0!important; 
		text-align:				center;
	}

	.hr hr {
		display:				none !important;
	}
		
	.col_right_lg hr {
		display: block;
		height: 1px;
		background: #abac91;
		border: none;
		margin: 30px 0;
		clear: both;
	}
	
/*
	2.1 Tables
*/

	table {
		border-collapse: collapse;
		font-size: 1.2em;
		border-top: 1px solid #DDD;
		border-bottom: 1px solid #DDD;
	}
	
	caption {
		font-weight: bold;
		font-size: 1.4em;
		margin: 0 0 .5em 0;
	}
	
	td, th {
		padding: 1em;
		line-height: 1.3em;
	}
	
	th {
		font-weight: bold;
		border-right: 1px solid #DDD;
		border-bottom: 1px dotted #DDD;
	}
	
	td {
		border-bottom: 1px dotted #DDD;
	}
	
	tfoot {
		font-size: .8em;
		line-height: 1.6em;
	}

/*
	2.1 Forms
*/

	form {
		font-size: 1em;
		margin: 0 0 1em 0;
	}
	
	fieldset {
		padding: 0 1em;
		margin: 0 0 1em 0;
	}
	
	legend {
		font-size: 1.4em;
		padding: .5em 1em;
	}
	
	label {
		display: inline-block;
		margin: 0 0 .2em 0;
		vertical-align: top;
	}
	
	label span {
		display: inline-block;
		width: 10em;
	}
	
	input,
	textarea,
	button,
	optgroup {
		padding: .2em;
	}
	
	select,
	input {
		width: auto;	
	}
	
	textarea {
		border: 1px solid #ACACAC;
	}
	
	option {
		margin-bottom: .2em;	
	}
	
	optgroup {
		font-weight: bold;	
	}
	
	optgroup option {
		font-weight: normal;
		padding: 0 0 0 .5em;
	}
	
	textarea {
		font-size: 1.2em;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	input[type="checkbox"],
	input[type="radio"] {
		display: inline-block;
		vertical-align: top;
	}
	
	input[type="submit"], 
	input[type="checkbox"], 
	input[type="radio"], 
	input[type="reset"] {
		width: auto;	
	}
	
	input.button {
		font-size:				1.1em; 
		background:				url("/Museum/_images/btn-green.gif") repeat-x 0 top; 
		border:					1px solid #cdcdcd; 
		color:					#fff; 
		cursor:					pointer; 
		padding:				2px;
	}
/* 
	2.10  Footnote Lists 
*/
	.footnoteList {
		margin-top:				10px !important;
	}
	
	.footnoteList li {
		margin:					5px 15px !important;
	}
	
	.backtoText {
		display:				block; 
		margin:					3px 0px 0px 0px;
	}
	
	.backtoText, 
	.backtoText a:link, .backtoText a:active {
		font-size:				.90em; 
		text-decoration:		none; 
		text-transform:			uppercase;
	}
	
	.backtoText a:hover {
		color: 					#404040;	
	}
			
/* 	3. 		Structure
--------------------------------------------------------*/

/*
	2.1 Accessibility Links
*/

	ul#accessibility { /* Hide accessibility links by positioning them off screen */
		position: absolute;
		top: -100px;
		left: -100px;
	}
	
/*
	2.1 Wrapper
*/

	div#wrapper {
		width: 794px;
		margin: 5px auto 10px auto;
		text-align: left;
		position: relative;
	}

/*
	2.1 Utilities
*/

	ul#utilities {
		text-align: right;
		padding: .5em 0;
		margin: 0;
	}
	
	ul#utilities li {
		display: inline;
		padding: 0 0 0 .5em;
		margin: 0;
	}
	
	ul#utilities li a:link, ul#utilities li a:active, ul#utilities li a:visited {
		font-size: .9em;
		color: #666;
		text-decoration: none;
		border-right: 1px solid #666;
		padding: 0 .6em 0 0;
	}
	
	ul#utilities li a:hover {
		color: #333;
	}
	
/*
	2.1 Inner Wrapper
*/

	div#inner_wrapper {
		overflow: auto;
		border: 1px solid #BFBFBF;
		position: relative;
		_height: 1%;
	}
	
/*
	2.1 Header
*/
	div#header {
		background: #54564A url("../_images/bg-header.jpg") no-repeat top left;
		min-height: 149px;
		height:	149px;
		margin: 0 0 1px 0;
		position: relative;
	}
	
	div#header form {
		position: absolute;
		width: 50%;
		text-align: right;
		bottom: 0;
		right: 20px;
		margin: 0;
	}
	
	div#header input {
		margin: 0 0 8px 0;
	}
	
	div#header input#search_text {
		width: 10em;
		vertical-align: middle;
	}
	
	div#header input#search_go {
		vertical-align: middle;
		color: #FFF;
		border: 0;
	}
	
/*
	2.1 Nav
*/
	ul#nav {
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: #8f906f url("../_images/bg-nav.gif") repeat-x top left;
		_height: 1%; /* IE6 Hack */
	}
	
	ul#nav li {
		display: inline;
		margin: 0;
		padding: 0;
	}
	
	ul#nav li a:link, ul#nav li a:active, ul#nav li a:visited {
		display: block;
		float: left;
		background: #8f906f url("../_images/bg-nav.gif") repeat-x top left;
		padding: 5px 19px;
		border-right: 1px solid #FFF;
		text-decoration: none;
		color: #FFF;
	}
	
	ul#nav li a:hover {
		background: #6E6F45;
	}
	
	ul#nav li a.selected {
		background: #4E4F27 !important;
	}
	
/*
	2.1 Subnav
*/

	ul.subnav {
		margin: 0;
		padding: 0;
	}
	
	ul.subnav li {
		list-style-type: none;
		margin: 0;
		display: inline;
	}
	
	ul.subnav a:link, ul.subnav a:active, ul.subnav a:visited {
		display: block;
		padding: 5px 10px;
		text-decoration: none;
		border-bottom: 1px solid #BEBFA7;
		background: #4E4F27;
		color: #FFF;
	}
	
	ul.subnav a:hover {
		
	}
	
	ul.subnav a.selected {
		/*background: #8E8F6B !important;
		color: #FFF !important;*/
		background: #7E7F3F;
		color: #FFF;
	}
	
	/* Nested nav */
	ul.subnav li ul {
		margin: 0;
		padding: 0;
	}
	
	ul.subnav li ul li a:link, 
	ul.subnav li ul li a:active, 
	ul.subnav li ul li a:visited {
		color: #3E3F17;
		/*background: #EFEFE0;*/
		padding: 5px 0 5px 20px;
		border-bottom: 1px dotted #BEBFA7;
		background: #FFF !important;
	}
	
	ul.subnav li ul li a:hover {
		
	}
	
	ul.subnav li ul li a.selected {
		background: #DFDFC3 !important;
	}
	
/*
	2.1 Content
*/
	div#content {
		padding: 15px 20px;
		overflow: auto;
	}
	
	/*
		2.1.1 Columns
	*/
	div.col_left_lg {
		width: 500px;
		float: left;
		margin: 0 20px 0 0;
		overflow: hidden;
	}
	
	div.col_left_sm {
		float: left;
		width: 175px;
		margin: 0 20px 20px 0;
	}
	
	div.col_right_lg {
		width: 550px;
		float: left;
		margin: 0 0 20px 0;
		height:300px;
		height:auto!important;
		min-height:300px;		
	}
	
	div.col_right_lg img {
		padding: 2px;
		border: 1px solid #a5a68c;
	}
	
	div.col_right_sm {
		float: left;
		width: 230px;
	}
	
	div.exhib {
		width: 	222px;
		margin: 0 20px 0 0;
		float: left;
	}
	
	div.exhib_2 {
		width: 500px;
		margin: 0 20px 0 0;
		float: left;
	}
	
	div.exhib img,
	div.exhib_2 img {
		margin: 0 0 10px 0;
		border: 1px solid #BFBFBF;
	}
	
	div.exhib h4,
	div.exhib_2 h4 {
		font-size: 1.3em;
		font-weight: bold;
	}
	
	div.exhib h4 a,
	div.exhib_2 h4 a{
		color: #4E4F27;
	}
	
	div.exhib h4 a:link,
	div.exhib h4 a:visited,
	div.exhib_2 h4 a:link, 
	div.exhib_2 h4 a:visited {
		text-decoration:none;
	}
	
	div.exhib h4 a:hover,
	div.exhib_2 h4 a:hover {
		text-decoration:underline;
	}
	
	div.exhib h4 a:active,
	div.exhib_2 h4 a:active {
		text-decoration:none;
	}	
	
	div.exhib p,
	div.exhib_2 p {
		line-height: 1.4em;	
	}
	
	div.exhib p.exhib-text {
		height: 190px;
	}
	
	div.exhib small {
		display: block;
		color: #999;
		margin: 0 0 1em 0;
		height: 40px;
	}
	
	div.exhib_2 small {
		display: block;
		color: #999;
		margin: 0 0 1em 0;
		height: 70px;
	}
	
	.timeline div {
		padding: 0 1em 1em 1em;
		border-left: 1px solid #DDD;
	}
	
	.timeline div h3 {
		width: 50px;
		padding: 1em .5em 0 .5em;
		margin: 0;
		border-top: 1px solid #DDD;
		margin-left: -4.4em;
	}
	
	#pause {
		display: block;
		width: 30px;
		height: 30px;
		background: transparent url("../_images/play-pause.gif") no-repeat left -30px;
		text-indent: -9999px;
		float: right;
	}
		
	.timeline div:nth-child(2n) {
		background: #f8f8f8;
	}
	
	.timeline ul li {
		display: inline;
	}
	
	div#visitor_info {
		color: #FFF;
		background: #FFF;
	}
	
	div#visitor_info .info-top {
		height: 18px;
		background: #717352 url("/Museum/_images/top-border.gif") no-repeat top left;
	}
	
	div#visitor_info .info-bottom {
		height: 18px;
		background: #717352 url("/Museum/_images/bottom-border.gif") no-repeat top right;
	}
	
	div#visitor_info .info-content {
		background: #717352;
		padding: 0 1em;
	}
	
	div#visitor_info h3 {
		color: #FFF;
		margin: 0 0 .5em 0;
		font-weight: bold;
	}
	
	div#visitor_info a {
		color: #FFF;	
	}
	
	div#visitor_info h4 {
		color: #FFF;
	}
	
/*
	Exhibitions 
*/

	dl.exhib-list {
		overflow: hidden;
		_height: 1%;
		border-bottom: 1px solid #9D9F63;
		padding: 1em 0;
		position: relative;
	}
	
	.dotted {
		border-bottom: 1px dotted #9D9F63!important;	
	}
	
	dd.exhib-list-image {
		position: absolute;
		left: 0;
		top: 10px;
		margin: 0 10px 10px 0;
	}
	
	dd.exhib-list-image img {
		border: 1px solid #9D9F63;
	}
	
	dl.exhib-list dt {
		font-size: 1.8em;
		color: #4E4F27;
		font-weight: normal;
		margin: 0 0 .7em 0;
	}
	
	dl.exhib-list dt a {
		text-decoration: none;	
		font-size: 0.9em;		
	}
	
	dd.exhib-list-text {
		font-size: .8em;
	}
	
	dl.exhib-list dt, dl.exhib-list dd.exhib-list-text {
		margin-left: 160px;
	}
	dl.exhib-list.dotted dt, 
	dl.exhib-list.dotted dd.exhib-list-text {
		margin-left: 130px;
	}
	
/*
	2.1 Footer
*/
	div#footer {
		clear: both;
		background: #8f906f url("../_images/bg-footer.gif") repeat-x top left;
		color: #FFF;
		padding: 7px 20px
	}
	
	div#footer p {
		margin: 0;
		line-height: 1.1em;
		font-size: 1.1em;
	}
	
/*
	Copyright
*/

	div#copyright {
		padding: 1em 2em;
	}
	
	div#copyright p {
		font-size: 1.1em;	
	}


/* 	4. 		Widgets
--------------------------------------------------------*/

	#content .nonHtml {
		font-size:				.75em; 
		color:					#4E4F27;
	}


/* 	5. 		Page Specific Styles
--------------------------------------------------------*/

/*
	Homepage
*/

	p.view-previous {
		text-align: right;
		border-top: 1px solid #6E6F45;
		padding: 1em 1em 0 1em;
	}

/* 
	About
*/
	ul#activities {
		padding: 0;
		margin: 0;
	}

	ul#activities li {
		width: 35%;
		height: 120px;
		display: block;
		float: left;
		padding: 0 2% 2% 13%;
		margin: 0;
	}
	
	li#learn {
		background: url("../_images/learn_small.jpg") no-repeat top left;
	}
	
	li#explore {
		background: url("../_images/explore_small.jpg") no-repeat top left;
	}
	
	li#experience {
		background: url("../_images/timeline_small.jpg") no-repeat top left;
	}
	
	li#discover {
		background: url("../_images/discover_small.jpg") no-repeat top left;
	}
	
/* 
	Visitor Information
*/

	/* Google Map */
	div#map {
		clear: both;
		width: 100%;
		height: 400px;
		background: #EFEFEF;
	}
	
/* 
	Displays
*/

	div.display {
		width: 35%;
		height: 14em;
		display: block;
		float: left;
		padding: 0 2% 2% 13%;
		margin: 0;
	}
	
	div.display h3 {
		font-size: 1.65em;
		margin-bottom: .3em;	
	}
	
	div.display a {
		text-decoration: none;
	}
	
	#before_fed {
		background: url("../_images/icon_1788_1900_small-2.jpg") no-repeat top left;
	}
	
	#new_curr {
		background: url("../_images/icon_1901_1920_small-2.jpg") no-repeat top left;
	}
	
	#comm_bank {
		background: url("../_images/icon_1920_1960_small-2.jpg") no-repeat top left;
	}
	
	#curr_reform {
		background: url("../_images/icon_1960_1988_small-2.jpg") no-repeat top left;
	}
	
	#polymer {
		background: url("../_images/icon_1988_onwards_small-2.jpg") no-repeat top left;
	}

/* 	6. 		Miscellaneous
--------------------------------------------------------*/

	.hidden {
		display: none;
	}
	
	.left {
		float: left;
	}
	
	.right {
		float: right;	
	}
	
	.clear {
		clear: both;	
	}
	
	img.left {
		margin: 0 10px 10px 0;
	}
	
	img.right {
		margin: 0 0 10px 10px;	
	}
	
	.center {
		text-align: center;
	}
	.marginB10 {
		margin-bottom:	10px;
	}	
	.marginB20 {
		margin-bottom:	20px;
	}	
	.noBorder {
		border: 				0 !important;	
	}