/* Fully developed by: Pixelbox
----------------------------------------------- */


/* HTML & Body
----------------------------------------------- */
	html {
		height: 100%;
		margin-bottom: 1px;
		}

	body {
		width: 100%;
		margin: 0;
		padding: 0;
		font: 75% "Trebuchet MS", "Lucida Grande", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
		background: #000 url(/images/bg.png) no-repeat top left;
		}

	img {
		border: none;
		}


/* Headings
-----------------------------------------------*/
	h1 {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		right: 30px
		}

	h2 {
		color: white;
		font-size: 200%;
		margin-top: 0;
		padding-top: 0;
		background: transparent url(/images/line.png) no-repeat bottom left;
		}

	h3 {
		color: white;
		margin: 0;
		padding: 0;
		font-size: 140%;
		}

	.formContainer h3 {
		font-size: 160%;
		}


/* Navigation
----------------------------------------------- */
	#sidenav {
		width: 258px;
		padding-top: 195px;
		float: left;
		}

	#sidenav ul {
		width: 258px;
		height: 166px;
		background: url(/images/sidenav.png);
		margin: 0;
		padding: 0;
		position: relative
		}

	#sidenav ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		position: absolute;
		left:0;
		letter-spacing: -1000em;
		text-indent: -999em;
		}

	#sidenav ul li,
	#sidenav ul li a {
		height: 25px;
		display: block;
		}

	.one,
	.two,
	.three,
	.four,
	.five,
	.six {
		left: 0;
		top: 0px;
		width: 258px;
		}

	.two {
		top: 28px;
		}

	.three {
		top: 56px;
		}

	.four {
		top: 84px;
		}

	.five {
		top: 112px;
		}

	.six {
		top: 140px;
		}

	.one a:hover {
		background: transparent url(/images/sidenav.png) -270px 0 no-repeat;
		}

	.two a:hover {
		background: transparent url(/images/sidenav.png) -270px -28px no-repeat;
		}

	.three a:hover {
		background: transparent url(/images/sidenav.png) -270px -56px no-repeat;
		}

	.four a:hover {
		background: transparent url(/images/sidenav.png) -270px -84px no-repeat;
		}

	.five a:hover {
		background: transparent url(/images/sidenav.png) -270px -112px no-repeat;
		}

	.six a:hover {
		background: transparent url(/images/sidenav.png) -270px -140px no-repeat;
		}


/* Structure
----------------------------------------------- */
	#container {
		margin: 0 45px 0 0;
		padding: 110px 0 20px 258px;
		height: auto;
		min-height: 200px;
		}

	#footer {
		margin: 0 45px 0 0;
		padding: 15px 0 0 258px;
		text-align: right;
		clear: both;
		}


/* Form
----------------------------------------------- */
	.formContainer {
		text-align: left;
		width: 400px;
		float: left;
		}

	.form {
		font-size: 125%;
		font-weight: bold;
		color: white;
		margin: 0;
		padding: 0;
		}

	.form p {
		margin: 0;
		padding: 5px 0 0;
		}

	input {
		font-size: 125%;
		background: #eff5fa url(/images/formBg.png) top left repeat-x;
		border: 1px solid #69c;
		color: #666;
		padding: 2px;
		width: 310px;
		}

	input.button {
		background: none;
		border: none;
		width: auto;
		margin: 0 0 0 250px;
		padding: 0;
		cursor:pointer;
		color: white;
		}


/* Content
----------------------------------------------- */
	#container p {
		color: white;
		font-size: 120%;
		line-height: 1.5em;
		}

	#container p a {
		color: white;
		}

	#container p a:hover {
		text-decoration: none;
		}

	.quotes {
		float: right;
		padding: 0 10px 10px 0;
		}

	.thumb {
		display:block;
		float:left;
		width: auto;
		height: 180px;
		margin: 5px;
		}


/* Lightbox
----------------------------------------------- */
	#lightbox {
		position: absolute;
		top: 40px;
		left: 0;
		width: 100%;
		z-index: 100;
		text-align: center;
		line-height: 0;
		}

	#lightbox a img {
		border: none;
		}

	#outerImageContainer {
		position: relative;
		background-color: #fff;
		width: 250px;
		height: 250px;
		margin: 0 auto;
		}

	#imageContainer {
		padding: 10px;
		}

	#loading {
		position: absolute;
		top: 40%;
		left: 0%;
		height: 25%;
		width: 100%;
		text-align: center;
		line-height: 0;
		}

	#hoverNav {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10;
		}

	#imageContainer > #hoverNav{
		left: 0;
		}

	#hoverNav a {
		outline: none;
		}

	#prevLink,
	#nextLink{
		width: 49%;
		height: 100%;
		background: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
		display: block;
		}

	#prevLink {
		left: 0;
		float: left;
		}

	#nextLink {
		right: 0;
		float: right;
		}
	
	#prevLink:hover,
	#prevLink:visited:hover {
		background: url(/images/prevlabel.gif) left 15% no-repeat;
		}

	#nextLink:hover,
	#nextLink:visited:hover {
		background: url(/images/nextlabel.gif) right 15% no-repeat;
		}

	#imageDataContainer {
		font:10px Verdana, Arial, Helvetica, sans-serif;
		color:#666;
		background-color: #fff;
		margin: 0 auto;
		line-height: 1.4em;
		}

	#imageData {
		padding:0 10px;
		}

	#imageData #imageDetails{
		width: 70%;
		float: left;
		text-align: left;
		}

	#imageData #caption{
		color:#666;
		font-weight: bold;
		}

	#imageData #numberDisplay{
		color:#333;
		display: block;
		clear: left;
		padding-bottom: 1.0em;
		}

	#imageData #bottomNavClose{
		width: 66px;
		float: right;
		padding-bottom: 0.7em;
		}

	#overlay{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		height: 500px;
		background-color: #000;
		filter:alpha(opacity=60);
		-moz-opacity: 0.6;
		opacity: 0.6;
		}

	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
		}

	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
		}

	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
		}