@import "reset.css";

*{
	outline: none;
}

body {
	font-size: 75%;
	font-family: "Helvetica Neue", Helvetica, georgia, "times new roman", serif;
	color: #999;
	height: 100%;
	overflow: hidden;
	background: #000;
}

html>body {
	font-size:12px;
}

/* --- Typography from 23ways -------------------------------- */

p {
	font-size:10px;
	line-height:13px;
	margin:0 0 10px;
}

h1 {
	line-height:1em;
	font-size: 10px;
	font-weight:normal;
	color: #D0CFCF;
	margin:0;
}

h2, h3 {
	font-size:16px;
	line-height: 1.286em;
	margin:0 0 10px 0;
	font-weight:normal;
	color: #FFF;
}

#footer *{
	color: #D0CFCF;
}

/* Lists */
#content ul, #content ol{
	margin:0 35px 1.5em 35px;
}
#content ul li, #content ol li{
	font-size:10px;
}
/* Links */
a, a:link{
	color: #D0CFCF;
	text-decoration: none;
}
a:visited{
	color: #D0CFCF
}
a:hover{
	text-decoration: underline;
	color: #FFF;
}

/* --- layout ----------------------------------------------- 
   keep these for just the layout no background color nothing! */
/* 	try this alternative was of laying out the page 
	this is having the content all locked to the bottom
	and streaching the image height to fit.
	Will have to be tested on big monitors
*/


#header{
	height: 35px;
	z-index: 90;
	position: absolute;
	width: 100%;
	background: url('/img/backgrounds/header.png') repeat-x;	
}

#navigation{
	height: 30px;
	position: absolute;
	width: 100%;
	background: url('../img/backgrounds/navigation.png') repeat-x;
	border-bottom: 1px solid #1e1e1e;
	z-index: 11;
}

#wrapper{
	position: absolute;
	z-index: 11;
	background: #000;
	width: 100%;
	height: 185px;
	bottom: 0;
}

#content{
	position: absolute;
	width: 870px;
	background: #000;
	z-index: 10;
}

#footer{
	position: absolute;
	bottom: 0px;
	height: 50px;
	width: 100%;
	border-top: 1px solid #1e1e1e;
	background: #000 url('/img/backgrounds/footer.jpg') no-repeat top left;
	padding-left: 25px;
	padding-top: 15px;
	z-index: 12;
}

/* this is the positions */
#navigation{
	bottom: 185px;
}	

#content{
	bottom: 66px;
	height: 99px;
	padding: 15px 25px 5px 25px;
}

#footer{
	bottom: 0px;
	height: 50px;
}

/* --- header ---------------------------------------------- */
#header h1{
	position: relative;
}

#header h1 a{
	display: block;
}

#header h1 a:hover{
	text-decoration: none;
}

#header h1 a span{
	position: absolute;
	top: 12px;
	left: 25px;
}
#header h1 a img{
	position: absolute;
	top: 45px;
	left: 25px;
}

#load{
	position: absolute;
	right: 15px;
	top: 10px;
	background: url('../img/backgrounds/ajax-loader-2.gif') no-repeat;
	width: 43px;
	height: 15px;
	text-indent: -1000000px;
}

/* --- banner ----------------------------------------------- */

#main-image-container{
	position: absolute;
	bottom: 185px;
	top: 0;
	z-index: -100px;
}

#banner{
	position: absolute;
	top: 33px;
	bottom: 185px;
	right: 0px;
	width: 600px;
	z-index: 10;
}

#large-logo{
	position: absolute;
	right: 50px;
	z-index: 10;
}

#banner h3{
	position: absolute;
	right: 20px;
	top: 133px;
	font-size: 48px;
}


/* --- navigation ----------------------------------------------- */

#navigation ul{
	margin: 0;
	padding-left: 25px;
}

#navigation li ul{
	display: none;
}

#navigation li{
	float: left;
}

#navigation li.active ul{
	display: block;
}

#navigation li, #navigation ul{
	list-style-type: none;
	margin-left: 0;
}

#navigation li a{
	display: block;
	padding:7px 10px 7px 10px;
	text-transform: capitalize;
	background: url('/img/backgrounds/nav_point_on.png') repeat-x 0 -99px;
}

#navigation li a:hover, #navigation li.active a{
	color: #FFF;
	background: url('/img/backgrounds/nav_point_on.png') repeat-x 0 0;
	text-decoration: none;
}




/* content ---------------------------------------------------- */
#content{
	-moz-column-width: 255px;
	-moz-column-gap: 20px;            
	-webkit-column-width: 255px;
	-webkit-column-gap: 40pxz;
}


/* gallery ---------------------------------------------------- */

.installations #main-image-container {
	overflow: hidden;
}

#main-image-container ul{
	padding-left: 100px;
	padding-top: 100px;
}

#main-image-container ul li{
	width: 240px;
	margin-left: 48px;
	margin-bottom: 48px;
	height: 80px;
	border: 5px solid #808080;
	float: left;
	list-style: none;
	position: relative;
	overflow: hidden;
	z-index: 11;
}

#main-image-container ul li:hover{
	border: 5px solid #FFF;
}

#main-image-container ul li a{
	position: absolute;
	z-index: 15;
	display: block;
}

#main-image-container ul li a img{
	position: relative;
	bottom: 20px;
}

#main-image-container ul li a span{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
}
#main-image-container ul li a:hover span{
	display: none;
}


/* --- footer --------------------------------------------------- */

#footer{
	font-size: 11px;
}

#footer p{
	color: #d0cfcf;
}

/* ---[ misc ]------------------------------------- */

img, a img {
    border: none;
    }
.hide {
    display: none;
    }
.clear {
    clear: both;
    }
.debug {
    border: 1px solid red;
    }