@charset "utf-8";
/* CSS Document */

body {
	background-color:#6D6E70;
	margin:20px 0 0;
	font:76% Verdana, Helvetica, sans-serif;
	color:#333333;
	behavior:url("csshover2.htc");
}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

/*TYPOGRAPHY****************************
***************************************/
h1 { position:relative; width:329px; height:42px; margin:0; overflow:hidden;font-size:16px;}
h1 em { display:block; z-index:1; position:absolute; width:100%; height:100%;}

body#welcomepage h1 em {background:url(../images/welcome_head.gif) no-repeat;}
body#services h1 em {background:url(../images/services_head.gif) no-repeat;}
body#projects h1 em {background:url(../images/projects_head.gif) no-repeat;}
body#references h1 em {background:url(../images/references_head.gif) no-repeat;}
body#ourcompany h1 em {background:url(../images/ourcompany_head.gif) no-repeat;}
body#contactus h1 em {background:url(../images/contactus_head.gif) no-repeat;}

/*PROJECT HEADS******
********************/
body#cie-studios h1 em {background:url(../images/cie-studios_head.gif) no-repeat;}
body#delius h1 em { background:url(../images/delius_head.gif) no-repeat; }
body#spaghettini h1 em {background:url(../images/spaghettini_head.gif) no-repeat;}
body#astro-aluminum h1 em { background:url(../images/astro-aluminum_head.gif) no-repeat;}

h2 { font-size:1.5em; margin:30px 0 0; color:#6C6E70;}
h2 + h4, h2 + p { margin-top:0;}


h3 {font-size:1.2em; margin-bottom:0;}
h3 + * {margin-top:0;}

h4 {font-size:1em;font-weight:bold; margin-bottom:0;}
h4 + * {margin-top:0;}

h1 + p, h1 + h2 { margin-top:12px;}

h2.topmarg {margin-top:30px; }

p {
	margin:0 0 12px;
}

#bottomnav a:link {color:#FFFFFF; text-decoration:none;}
#bottomnav a:visited {color:#EEEEEE; text-decoration:none;}
#bottomnav a:hover, #bottomnav a:active { color:#CCC; text-decoration:underline; }

a:link {
	color:#2189CA;
	text-decoration:none;
}
a:visited {
	color:#7AB8DF;
	text-decoration:none;
}
a:hover, a:active {
	color:#999999;
	text-decoration:underline;
}


#content ul.flush {
	padding-left:0;
	margin-left:15px;
}
#content ul li, #content ol li {
	padding-bottom:8px;
}

/*LAYOUT********************************
***************************************/
div#container {
	position:relative;
	width:730px;
	margin:0 auto;
	padding:20px;
	background-color:#FFFFFF;
}

div#content {
	width:400px;
	min-height:200px;
	position:relative;
	margin:20px 0 40px 250px;
	font-size:.9em;
}

#content img {
	margin:10px 0;
}

a#contact:link, a#contact:visited {
	display:block;
	width:100px;height:20px;
	color:#666666;
	text-decoration:none;
	position:absolute;
	top:20px;right:20px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
}
a#contact em { display:block; cursor:pointer; z-index:1; position:absolute; width:100%; height:100%; background:url(../images/contact_us_02.gif) no-repeat; }
a#contact:hover em, a#contact:active em { background-position:-102px 0;}
a#contact:hover, a#contact:active {
	text-decoration:underline;
	color:#333333;
}
a#contact.active em { background-position:-198px 0; }

div#footer {
	width:760px;
	margin:0 auto 20px;
	padding:4px 8px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}

#copy {float:left;}
#bottomnav {float:right;color:#999;}


/*PHOTO GALLERY******
********************/
#content div.gallery {margin-top:10px;}

#content .gallery a:link img, #content .gallery a:visited img { 
	float:left;
	margin:0px 10px 10px 0;
	border:8px solid #EEEEEE;
}
#content .gallery a:hover img, #content .gallery a:active img {
	border:8px solid #DDDDDD;
	margin:0px 10px 10px 0;
	float:left;
}
#content .gallery a img.nomarg {
	margin-right:0;
}

/*NAVIGATION****************************
***************************************/
ul#nav li {
	position:relative;
	overflow:hidden;
	font-size:1em;
}
#nav em {
	display:block;
	position:absolute;
	top:0;left:0;
	z-index:1;
}
/* For IE5.x mac only */
* html>body #nav {
  position: static;
  / *overflow: visible;
  commented out for this example */
  font-size: 10px;
}

* html>body #nav em  { position: static; }

#nav {list-style:none;padding-left:0;margin-left:0;position:absolute;top:175px;left:30px;}
#nav li {float:left; clear:left; padding-bottom:10px; }
#nav li, #nav li em {width:150px; height:20px;}

#nav li em { background:url(../images/nav_02.gif) no-repeat; cursor:pointer; }

li#welcome em {background-position:0 0;}
li#welcome:hover em {background-position:-149px 0;}
li#welcome.active em {background-position:-297px 0;}

li#ourcompany em {background-position:0 -31px;}
li#ourcompany:hover em {background-position:-149px -31px;}
li#ourcompany.active em {background-position:-297px -31px;}

li#services em {background-position:0 -60px;}
li#services:hover em {background-position:-149px -60px;}
li#services.active em {background-position:-297px -60px;}

li#projects em {background-position:0 -87px;}
li#projects:hover em {background-position:-149px -87px;}
li#projects.active em {background-position:-297px -87px;}

li#references em {background-position:0 -114px;}
li#references:hover em {background-position:-149px -114px;}
li#references.active em {background-position:-297px -114px;}



/*PAGE-SPECIFIC*************************
***************************************/

/*OUR COMPANY***************
***************************/
body#cie-studios div#content, body#delius div#content, body#spaghettini div#content { 	margin:20px 0 0px 250px; }