/* CSS AND WEBSITE DESIGNED BY ALEXANDRE TONNEAU - www.alexandretonneau.com
==============================================================================

 ________________________________
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
[_]     |X||°|          V
        |X||/           |
        |X|             |
        |X|             |
        |X|             |
        |X|             |
        |X|             |
        |X|             ^
        |X|             
        |X|
        |X|
        |X|
        |X|
__________________________________________________________MADE IN DUBAI_______
==============================================================================
*/

/* COLOUR SCHEME
	Grey text			#828282
	Grey lines			#303030
	Yellow logo			#FFCD5A
*/

/* RESET */

*, html, body, div, table, tr, td, ul, li, h1, h2, h3, h4, hr, input, textarea {margin:0; padding:0;}
a img {border:0;}

/* MAIN SETTINGS ======================= */

html, body {height: 100%;}

body {
	background: black;
	font-family: "Century Gothic", Arial, Helvetica, Sans-serif;
	font-size: 12px;
	color: #828282;
}

a, a:hover {color:white;}

li {list-style: none;}

h1 {color: white; font-size: 24px; padding: 8px 0 10px 0; font-weight: normal;}
h2 {color: white; font-size: 18px; padding: 0 0 7px 0; font-weight: normal;}
h3 {color: white; font-size: 14px; padding: 0 0 7px 0; font-weight: normal;}

p {padding: 0 0 10px 0; text-align: justify;}

/* Grid system */

#grid {width: 860px; margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 20px;}

.one_column {float: left; width: 200px; margin-right: 20px;}
.two_columns {float: left; width: 420px;}
.left_margin {margin-left: 20px;}

#grid ul {display: block; overflow: auto;}
#grid ul li {float: left; width: 180px; padding: 3px 10px;}
#grid ul li a {font-size: 14px;text-decoration: none;}
#grid ul li a:hover {text-decoration: underline;}

/* HEADER & TOP NAVIGATION ======================= */

#header {z-index: 50; height: 145px; width: 860px; padding: 0 50px; margin-left: auto; margin-right: auto; position: relative;}
#header h1 {position: absolute; bottom: 14px; left: 10px; width: 180px; padding: 0; vertical-align: top; text-align: center;}

#header ul {position:absolute;bottom: 0px; right: 50px; border-left: #303030 solid 1px;}
#header ul li {float: left; display: inline;}
#header ul li a {display: block; text-decoration: none; padding: 20px 15px; color: #828282; border-right: #303030 solid 1px;}
#header ul li a:hover {color: white;}
#header ul li a.active {color:white; background: url(images/bg-menu-active.jpg) center 38px no-repeat;}

.hr {width: 100%; border-top: #303030 solid 1px; height: 0px; overflow: hidden;}

/* EVENTS MAIN PAGE =============================== */

/* Accordion menu */

#sliding_list {float: left; position: relative; border-bottom: #303030 solid 1px;}
#sliding_list h3 a {display: block; width: 200px; padding: 7px 0; font-size: 16px; font-weight: normal; text-decoration: none; border-top: #303030 solid 1px;}
#sliding_list p {display: block; width: 200px; background: transparent url(images/bg-menu-active.jpg) bottom center no-repeat;}

/* Images container */

#sliding_list div {position: absolute; left: 200px; top: 0px; width: 440px;}
#sliding_list div.images a {position: relative; float: left; width: 198px; border: #303030 solid 1px; margin: 0 0 20px 18px; text-decoration: none;}
#sliding_list div.images a:hover {border: #828282 solid 1px;}
#sliding_list div.images a span {position: absolute; top: 0px; left: 0px; width: 186px; padding: 6px; background: transparent url(images/bg-black-80.png);}

/* EVENT & EXPERTISE CONTENT ======================= */

#content {	
	position: relative;
	left:0px
	width: 100%;
	overflow: hidden;
	border-top: #303030 solid 1px;
}

/* Main image container */

#slideshow {position: absolute; top:0px; left:0px; width: 100%; text-align: center;}
#slideshow img {width: 100%; height: auto;}

/* Right vertical description stripe */

#position {
	/* surimposition layer to center content */
	position: relative;
	top: 0px;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.description {
	width: 364px;
	position: absolute;
	z-index: 10;
	top: 0px;
	right: 50px;
	background: transparent url(images/bg-black-80.png);
}

#title {
	padding: 10px 10px 5px 10px;
}

#extra_info {
	padding: 0 10px 15px 10px;
}

/* Page specific */

.description.expertise {width: 344px; padding: 20px 10px 7px 10px;}
.description.expertise h2 {margin-bottom: 0px;}

.description.home {width: 431px;}
.description.home #extra_info > a {float: left; margin-bottom: 14px; text-decoration: none;}
.description.home #extra_info > a.feature {margin-left: 9px;}
.description.home #extra_info img {border: #303030 solid 1px;}
.description.home #extra_info img:hover {border: #828282 solid 1px;}

/* Navigation list */

#title ul { width: 233px; background: transparent url(images/bg-list.gif) 215px 8px no-repeat;}
#title ul li:hover {border: #303030 solid 1px; padding-left: 2px;}
#title ul li a {display: block; width: auto; padding: 3px 0; text-decoration: none; color: #828282;}
#title ul li.active a {color: white;}

/* Images navigation */

#slide_control {padding: 10px 0;}
#slide_control a {border: #303030 solid 1px; padding: 3px 11px; margin: 0 10px 10px 0; text-decoration: none;}
#slide_control a:hover {border-color: #828282;}
#slide_control a.activeSlide {border-color: white;}

/* Project fact data */

dt {padding-top: 5px; font-size: 11px;}
dd {color: white;}

/* Next - Prev page navigation */

#sub_navigation {position: absolute; z-index: 9; right:0px; top:0px;}
#sub_navigation a {display: block; float: right; text-align: center; font-size: 50px; text-decoration: none; width: 50px; height: 50px;}
#sub_navigation a:hover {text-shadow: 0px 0px 4px yellow;}
#sub_navigation a.previous {margin-right: 364px;}

/* SHOWREEL ======================================= */

#showreel {width: 550px; margin-left: auto; margin-right: auto; margin-top: 100px;}
#flashmovie {display: block; border-top: #303030 solid 1px; border-bottom: #303030 solid 1px;}
#backlight {width: 550px; height: 16px; background: transparent url(images/bg-video.jpg) top center;}

/* FORM =========================================== */

input, textarea {
	font-family: "Century Gothic", Arial, Helvetica, Sans-serif;
	color: white;
	padding: 3px;
	border: #303030 solid 1px;
	background-color: black;
}

label.error {
	display: block;
	clear: both;
	color: #FFCD5A;
}