/*
this is the CSS for the MUSEUM template. 
by wrapping this text within the forward slash and asterisks the text is not renderd by the style sheet.

NOTE:
the indentations are to inform you visually of the nesting order of page elements.
the # sign is how we call out id's within the xhtml.
the . sign is how we call out classes within the xhtml.
a div acts like a container for smaller page elements like paragraphs and unordered lists. makes it easier to move them around all together.
please be careful when modifying the properties for each element.
changing the floating properties will dramatically alter the layout as will other margins and paddings properties 
CSS properties are cascading, meaning if you alter an elements property further down the css page, it overrwrites the property applied earlier.
*/


/* the body is where your main font properties should be specified. please do not alter the .8125em value which is = to 13px */
body{
	font: .8125em palatino, helvetica, arial;
	text-align: center;
	margin:0;
	padding:0;
	background:black;
	color:white;
}

/* this #wrapper holds the entire page, we call it the "containing" div or "wrapper" div and it is the outer most portion of the visual framework for the information space */
#wrapper{
	text-align:left;
	margin: 0 auto;
	width:800px; 
	background:#000  url('../images/bg_museum.jpg') top left no-repeat;
}



/* this is your page titling */
h1.mus_pagetitle{
	text-align:center;
	color:white;
	margin:0;
	font-weight:lighter;
	font-size:2.6em;
	letter-spacing:.2em;
	padding-top:18px;
}



/* this is the white horizontal bar above the navigation */
hr{
	color: #fff;
	background-color: #fff;
	height: 5px;
}



/*Navigation*/

/*This is your top center nav*/
ul#mus_nav{
	text-align:center;
	font-size:1.1em;
	margin:0 0 0 23px;
	padding:0 0 0 0;
	list-style:none;
}
	ul#mus_nav li{
		float:left;
		margin:0;
		padding:2px 15px;
		border-right:2px solid white;
		letter-spacing:.2em;
	}
			/* this tells the last nav cue NOT to have a right 2px solid white border */
			ul#mus_nav li.mus_navlast{
				border:none;
			}
			
	/* this effects the links themselves */
	ul#mus_nav li a{
		text-decoration:none;
		margin:0;
		padding:0;
		color:white;
	}
	ul#mus_nav li a:hover{
		text-decoration:underline;

	}



/* main content under navigation */
/* the width of all page elements combined needs to be < or = to the width set on the wrapper div above. This is the total of all widths, L and R margins and paddings, and borders across the page*/
#wrapper div#content{
	clear:both;
	padding:35px 0 0 0;
}
			/* main content on left of page for copy*/
			#wrapper div#mus_left{
				width:325px;
				margin-left:45px;
				letter-spacing:.08em;
			}
			
			 	/* first left paragraph*/
				div#mus_left p{
					padding-top:20px;
				}


/*footer information*/
#footer{
	clear:both; /* the clear property makes sure this content does not start until both margins are free and "clear" of any floating elements, forcing it to stay below the floating elements */
}
	#footer ul{
		padding-top:20px;
		padding-bottom:20px;
		margin:0 auto;
		text-align:center;
	}

	#footer ul li{
		display:inline;
		text-align:center;
		margin:0 auto;
		padding:0 8px;
	}
	#footer ul li a{
		color:#fff; /* using only 3 numbers is shorthand for black in CSS, #fff for white, etc. */
		text-decoration:none;
		font-size:.8em;
	}
	#footer ul li a:hover{
		text-decoration:underline;
	}