/*

	-- -- -- -- -- -- --
	It's A Mystery To Me
	default.css
	main site foundation layout
	-- -- -- -- -- -- --
	
*/

@import url("reset.css");

/* -- basic HTML elements -- */

	body {
		font: 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #CCC;
		background: #000;
		margin: 0;
		padding: 0;
	}

	
/* -- Content Styling -- */
	a:link, a:visited {
		color: #362A19;
		text-decoration: underline;
	}
	a:hover {
		color: #000;
	}
	h1 {
	}
	h1 a {
		width: 340px;
		height: 85px;
		display: block;
		margin: 47px 0 0 87px;
		text-indent: -9000px;
	}
	h2 {
		width: 614px;
		height: 85px;
		display: block;
		text-indent: -9000px;
	}
	h3 {
		font-size: 1.3em;
		color: #555;
		font-weight: bold;
		margin: 5px 0 5px 20px;
	}
	h4 {
		font-size: 1.2em;
		line-height: 1.5833;
	}
	input, textarea {
		font: 1.3em "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
		color: #291e18;
	}
	ul {
		margin: 0 0 0 50px;
	}
	ul li {
		font-size: 1.1em;
		line-height: 1.3;
		margin: 0;
		color: #333;
		list-style: disc;
	}
	ol li {
		font-size: 1.3em;
		line-height: 1.6923;
		margin: 0;
		list-style: lower-roman;
	}
	ul li h4, ol li h4,
	ul li p, ol li p {
		font-size: 1em;
	}
	p, .column-2 .intro {
		font-size: 1.2em;
		font-weight: normal;
		color: #333;
		line-height: 1.4em;
		text-indent: 0.5em;
		padding: 5px 25px 10px 25px;
	}
	.column-2 .intro {
		text-indent: 0;
		padding: 0 25px 10px 25px;
	}
	.column-2 .intro .spacer {
		height: 1.4em; 
		float: left; 
		clear: left;
		padding: 0;
		margin: 0;
	}	
	.column-2 a:link, .column-2 a:visited {
		color: #990000;
		text-decoration: underline;
	}
	.column-2 a:hover, .column-2 a:focus {
		color: #000;
		background: url(../images/ui/link.png) repeat-x left center;
	}
	
/* -- containers -- */
	#container {
		width: 902px;
		height: auto;
		margin: 10px auto 0 auto;
		padding: 0;
		position: relative;
	}
	
	#body {
		width: 902px;
		height: auto;
		margin: 0;
	}
	
	#footer {
		width: 902px;
		height: 50px;
		display: block;
		margin: 0;
		padding: 0;
	}
	
/* -- header -- */	
	#header {
		width: 902px;
		height: 132px;
		display: block;
	}
	
	#header .left {
		width: 437px;
		height: 132px;
		display: block;
		background: url(../images/ui/header-left.jpg) no-repeat;
		margin: 0;
		position: relative;
		float: left;
	}
	
	#header .right {
		width: 465px;
		height: 132px;
		display: block;
		background: url(../images/ui/header-right.jpg) no-repeat;
		margin: 0;
		position: relative;
		float: left;
	}
	
/* -- columns -- */		
	.column-1 {
		width: 144px;
		height: 396px;
		display: block;
		margin: 0;
		position: relative;
		float: left;
		background: url(../images/ui/column-1.jpg) no-repeat;
	}
	
	.column-2 {
		width: 614px;
		min-height: 500px;
		display: block;
		margin: 0;
		position: relative;
		float: left;
		background: url(../images/ui/column-2-fill.jpg) repeat-y;
	}
	.column-2 .top, .column-2 .bottom {
		width: 614px;
		min-height: 500px;
		display: block;
		margin: 0;
	}
	.column-2 .top {
		background: url(../images/ui/column-2-top.jpg) left top no-repeat;
	}	
	.column-2 .bottom {
		background: url(../images/ui/column-2-bottom.jpg) left bottom no-repeat;
	}
	.column-2 .links {
		width: 574px;
		height: 40px;
		display: block;
		font-size: 0.9em;
		color: #333;
		text-align: center;
		padding: 10px 0 10px 0;
		margin: 30px 20px 0 20px;
		border-top: 1px solid #CCC;
	}
	
	.column-2 .links a:link, .column-2 .links a:visited {
		font-size: 1em;
		color: #333;
		text-decoration: none;
	}
	
	.column-2 .links a:hover {
		color: #900;
		background: none;
		text-decoration: underline;
	}
	
	.column-3 {
		width: 144px;
		height: auto;
		display: block;
		margin: 0;
		position: relative;
		float: left;
		background: url(../images/ui/menu.jpg) no-repeat;
	}
		
/* -- nav -- */	
	.column-3 ul {
		width: 144px;
		height: 396px; 
		display: block;
		margin: 0;
	}
	
	.column-3 ul li {
		width: 144px;
		display: block;
		list-style-type: none;
	}
	
	.column-3 ul li.history {height: 34px;}
	.column-3 ul li.format {height: 31px;}
	.column-3 ul li.list {height: 33px;}
	.column-3 ul li.schedule {height: 28px;}
	.column-3 ul li.profiles {height: 38px; margin: 2px 0 0 0;}
	.column-3 ul li.gallery {height: 27px;}
	.column-3 ul li.venues {height: 34px;}
	.column-3 ul li.downloads {height: 35px; margin: 16px 0 0 0;}
	.column-3 ul li.testimonials {height: 32px; margin: 13px 0 0 0;}
	.column-3 ul li.contact {height: 34px; margin: 15px 0 0 0;}	
	
	.column-3 ul li a {
		display: block;
		text-indent: -9000px;
		background: none;
	}
	
	.column-3 ul li.history a {width: 91px; height: 34px; margin: 0 63px 0 0;}
	.column-3 ul li.history a:hover {background: url(../images/ui/menu.jpg) -144px 0 no-repeat;}
	
	.column-3 ul li.format a {width: 75px; height: 31px; margin: 0 0 0 69px;}
	.column-3 ul li.format a:hover {background: url(../images/ui/menu.jpg) -213px -34px no-repeat;}
	
	.column-3 ul li.list a {width: 79px; height: 33px; margin: 0 65px 0 0;}
	.column-3 ul li.list a:hover {background: url(../images/ui/menu.jpg) -144px -65px no-repeat;}
	
	.column-3 ul li.shows a {width: 85px; height: 27px; margin: 0 0 0 59px;}
	.column-3 ul li.shows a:hover {background: url(../images/ui/menu.jpg) -203px -98px no-repeat;}
	
	.column-3 ul li.profiles a {width: 79px; height: 38px; margin: 0 65px 0 0;}
	.column-3 ul li.profiles a:hover {background: url(../images/ui/menu.jpg) -144px -127px no-repeat;}
	
	.column-3 ul li.gallery a {width: 75px; height: 27px; margin: 0 0 0 69px;}
	.column-3 ul li.gallery a:hover {background: url(../images/ui/menu.jpg) -213px -165px no-repeat;}
	
	.column-3 ul li.links a {width: 82px; height: 34px; margin: 0 62px 0 0;}
	.column-3 ul li.links a:hover {background: url(../images/ui/menu.jpg) -144px -192px no-repeat;}
	
	.column-3 ul li.downloads a {width: 92px; height: 35px; margin: 0 0 0 52px;}
	.column-3 ul li.downloads a:hover {background: url(../images/ui/menu.jpg) -196px -242px no-repeat;}
	
	.column-3 ul li.testimonials a {width: 100px; height: 32px; margin: 0 0 0 12px;}
	.column-3 ul li.testimonials a:hover {background: url(../images/ui/menu.jpg) -156px -290px no-repeat;}
	
	.column-3 ul li.contact a {width: 69px; height: 34px; margin: 0 0 0 62px;}
	.column-3 ul li.contact a:hover {background: url(../images/ui/menu.jpg) -206px -337px no-repeat;}
	
/* -- footer -- */	
	#footer .copyright, #footer .terran {
		width: 307px;
		height: auto;
		display: block;
		font-size: 0.9em;
		color: #CCC;
		padding: 0;
		float: left;
	}
	
	#footer .copyright {
		margin: 5px 0 10px 144px;
	}
	
	#footer .terran {
		text-align: right;
		margin: 5px 0 10px 0;
	}
	
	#footer .terran a:link, #footer .terran a:visited {
		font-size: 1em;
		color: #FFF;
		text-decoration: none;
	}
	
	#footer .terran a:hover {
		color: #CC0000;
		text-decoration: underline;
	}