body, html {background-image: url(../images/background.jpg); height: 100%}
.box {float: left;}


/* MENU */

#header {position: relative; width: 780px; height: 217px; overflow: hidden;}

#about #header {background: #000 url(../images/head1.jpg) no-repeat;}
#engineers #header {background: #000 url(../images/head2.jpg) no-repeat;}
#contact #header {background: #000 url(../images/head3.jpg) no-repeat;}
#press #header {background: #000 url(../images/head4.jpg) no-repeat;}
#awards #header {background: #000 url(../images/head5.jpg) no-repeat;}
#albums #header {background: #000 url(../images/head6.jpg) no-repeat;}


#header #mtopper{height: 184px; width: 100%;}
ul#menu {
	display: block; 
	height: 33px; 
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 780px;
	background: black;
}

ul#menu li {
	float: left;
}

ul#menu li a {
	display: block; 
	color: #c8c8c8; 
	text-decoration: none; 
	height: 33px; 
	font: 11px Verdana, Arial, san-serf; 
	line-height: 10000px;
	letter-spacing: 2px;
	margin-right: 29px;
}


li.about a {
	margin-left: 16px;
	width: 84px; 
	background: url(../images/m-about.jpg) 0 -33px no-repeat; 

}

li.engineers a {
	width: 90px; 
	background: url(../images/m-engineers.jpg) 0 -33px no-repeat;
}

li.contact  a{
	width: 185px; 
	background: url(../images/m-contact.jpg) 0 -33px no-repeat;
}

li.press a {
	width: 51px; 
	background: url(../images/m-press.jpg) 0 -33px no-repeat;
}

li.awards a {
	width: 64px; 
	background: url(../images/m-awards.jpg) 0 -33px no-repeat;
}

li.credits a {
	width: 65px; 
	background: url(../images/m-credits.jpg) 0 -33px no-repeat;
}


ul#menu li.about a:hover {
	background: url(../images/m-about.jpg) 0 0 no-repeat; 
}

ul#menu li.engineers a:hover {
	background: url(../images/m-engineers.jpg) 0 0 no-repeat; 
}

ul#menu li.contact a:hover {
	background: url(../images/m-contact.jpg) 0 0 no-repeat; 
}

ul#menu li.press a:hover {
	background: url(../images/m-press.jpg) 0 0 no-repeat; 
}

ul#menu li.awards a:hover {
	background: url(../images/m-awards.jpg) 0 0 no-repeat; 
}

ul#menu li.credits a:hover {
	background: url(../images/m-credits.jpg) 0 0 no-repeat; 
}

ul#menu li.active a, ul#menu li.active a:hover {background-position: 0 0; color:#7b7b7b }
ul#menu li a:hover {color: #FFF;}

/* Spanish Menu */

.esp li.about a {
	margin-left: 16px; width: 83px; background: url(../images/m-sobre.jpg) 0 -33px no-repeat; }

.esp li.engineers a {width: 93px; background: url(../images/m-ingenieros.jpg) 0 -33px no-repeat;}

.esp li.contact  a{width: 203px; background: url(../images/m-contacto.jpg) 0 -33px no-repeat;}

.esp li.press a {width: 63px; background: url(../images/m-prensa.jpg) 0 -33px no-repeat;}

.esp li.awards a {width: 69px; background: url(../images/m-premios.jpg) 0 -33px no-repeat;}

.esp li.credits a {width: 77px; background: url(../images/m-creditos.jpg) 0 -33px no-repeat;}


.esp ul#menu li.about a:hover {background: url(../images/m-sobre.jpg) 0 0 no-repeat;}

.esp ul#menu li.engineers a:hover {background: url(../images/m-ingenieros.jpg) 0 0 no-repeat;}

.esp ul#menu li.contact a:hover {background: url(../images/m-contacto.jpg) 0 0 no-repeat;}

.esp ul#menu li.press a:hover {background: url(../images/m-prensa.jpg) 0 0 no-repeat;}

.esp ul#menu li.awards a:hover {background: url(../images/m-premios.jpg) 0 0 no-repeat;}

.esp ul#menu li.credits a:hover {background: url(../images/m-creditos.jpg) 0 0 no-repeat;}


/* Sub Nav */

ul#subnav * {outline: none;}

ul#subnav {list-style: none; margin: 20px 0px 0px 16px; padding: 0px; font-size: 13px;}
ul#subnav li a {
	display: block;
	width: 150px;
	height: 33px;
	text-decoration: none; 
	color:#dddddd; 
	font: 11px Verdana, Arial, sans-serif;	
	line-height: 10000px;
}

li.gavin a {
	background: url(../images/btn-gavin.jpg) 0 -33px no-repeat;
}

li.gabriel a {
	background: url(../images/btn-gabriel.jpg) 0 -33px no-repeat;
}

li.reuben a {
	background: url(../images/btn-reuben.jpg) 0 -33px no-repeat;
}

li.gavin a:hover {
	background: url(../images/btn-gavin.jpg) 0 0 no-repeat;
}

li.gabriel a:hover {
	background: url(../images/btn-gabriel.jpg) 0 0 no-repeat;
}

li.reuben a:hover {
	background: url(../images/btn-reuben.jpg) 0 0 no-repeat;
}


ul#subnav li.active a{background-position: 0 0; color: #FFF;}



/*Individual Page Styles */
#slideshow {height: 86px; margin: 3px; overflow: hidden;}
#slideshow .box{ float: left;}
#slideshow .box img {width: 86px; height: 86px;}

#landing #slideshow {width: 300px; height: 300px; float: right; margin: 15px;}
#landing #slideshow .box img {width: 100px; height: 100px;}

#landing {font-family: Verdana, Arial, Helvetica, Sans-serif}
#landing #box4 {clear: left;} /*Starts second row */
#landing #box7 {clear: left;} /*Starts third row */
#landing {font-size: 12px;}


#landing #wrapper {margin: 0 auto; width: 672px; height: 100%;}
#landing .valign {height: 50%; margin-bottom: -185px;}
#landing #container {clear: both; position: relative; width: 672px; height: 330px; background-color: #4a4a50;}
#landing #footer {clear: both; width: 440px; margin: 10px auto; background: none;}
#landing #footer p {color: #FFF; text-align: center; margin-top: 10px;}

#landing #content {width: 294px; float: left; margin: 15px 33px 15px 15px; display: inline;}
#landing .logo {margin-bottom: 5px;}

#landing a h1 {margin: 0px 0px 11px 9px;}
#landing a h4 {font-size: 12px; color: #FFF; text-decoration: none; margin: 10px 0px 5px 20px; letter-spacing: 1px; font-weight: bold;}
#landing p {margin: 0px 0px 9px 10px; font-size: 11px; line-height: 15px; color:#FFF;}
#landing .lang {margin-top: 10px;}
#landing a {color: #FFF;}


.hlbox {margin-right: 40px; padding: 10px; background-color: #8d8d92; border: 1px solid #d1d1d1 ;}
.hlbox a {color: #FFF;}

/* Temporary rules */
.hidden {display: none;}