/**************************************************************************

 C S S   H A N D C R A F T E D   B Y   M A M O K A           www.mamoka.com

 ..........................................................................
 ..........................................................................
 ..........................................................................
 ..........................................................................
 ..........................................................................

 **************************************************************************

 CODER

 Alexandre Bourdeaud'Hui - a.bourdeaudhui@mamoka.com

 **************************************************************************

 SECTIONS

 - Main tags and wrappers
 - Header
 - Navigation
 - Content area
 - Footer
 - Various

 **************************************************************************/

html, body
	{
	margin: 0;
	padding: 0;
	height: 100%;
	background: #000000 url(css/body.jpg) center top no-repeat;
	background-attachment: fixed;
	}
body
	{
	font: normal 62.5% "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	color: #525674;
	text-align: center;
	}

#wrapper
	{
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: 800px;
	text-align: left;
	background-color: #000000;
	}
	
/**************************************************************************

 H E A D E R

 **************************************************************************/

#header
	{
	display: inline;
	float: left;
	margin: 0;
	width: 800px;
	height: 110px;
	background: url(css/body.jpg) center top no-repeat;
	}
	#header h1
		{
		margin: 0;
		padding: 0;
		font-size: 1.2em;
		color: #FFFFFF;
		text-transform: uppercase;
		}
	#header h1 a
		{
		display: block;
		width: 400px;
		height: 110px;
		color: #FFFFFF;
		text-decoration: none;
		}
	#header h1 a strong
		{
		display: block;
		padding: 50px 0 0 5px;
		position: relative;
		z-index: -1;
		}
		#header h1 a strong em
			{
			color: #451d4b;
			}

/**************************************************************************

 N A V I G A T I O N

 **************************************************************************/

#navigation
	{
	display: inline;
	float: right;
	margin: -64px 0 0 0;
	padding: 0;
	}
	#navigation h3
		{
		display: none;
		}
	#navigation ul
		{
		float: right;
		margin: 0 -10px 0 0;
		padding: 0;
		color: #383461;
		list-style: none;
		}
		#navigation ul li
			{
			display: inline;
			float: left;
			margin: 0;
			padding: 0;
			}
			#navigation ul li a
				{
				display: inline;
				float: left;
				margin: 0;
				padding: 5px 10px;
				font-weight: bold;
				font-size: 1.0em;
				color: #383461;
				text-decoration: none;
				text-transform: uppercase;
				}
				#navigation ul li a:hover
					{
					color: #ffffff;
					}
				#navigation ul li a:focus
					{
					}
			#navigation ul li.special
				{
				}
				#navigation ul li.special a
					{
					color: #451d4b;
					}
				#navigation ul li.special a:hover
					{
					color: #ffffff;
					}

/**************************************************************************

 C O N T E N T   A R E A

 **************************************************************************/

#content
	{
	clear: both;
	margin: 0;
	}
	#content div.section
		{
		clear: both;
		margin: 0 0 50px 0;
		background: url(css/section.jpg) right bottom no-repeat;
		}
		#content div.section hr
			{
			clear: both;
			visibility: hidden;
			margin: 0;
			border: 0;
			padding: 0;
			}
		#content div.section div.column
			{
			display: inline;
			float: left;
			}
		#content div.section div.column1
			{
			display: inline;
			float: left;
			margin: 0 50px 0 0;
			width: 375px;
			}
		#content div.section div.column2
			{
			display: inline;
			float: left;
			width: 375px;
			}
		#content div.section div.column1 em
			{
			color: #434760;
			}
		#content div.section h2
			{
			margin: 10px 0;
			border-top: 1px solid #160314;
			border-bottom: 1px solid #160314;
			padding: 20px 0 20px 0;
			font-size: 1.2em;
			color: #916991;
			line-height: 1;
			text-transform: uppercase;
			}
	#content h3, #content h4
		{
		margin: 15px 0 8px 0;
		font-weight: normal;
		font-size: 1.4em;
		color: #703370;
		}
	#content p
		{
		margin: 8px 0;
		font-weight: normal;
		font-size: 1.1em;
		line-height: 1.5;
		}
	#content cite
		{
		margin: 8px 0;
		font-weight: normal;
		font-size: 1.1em;
		color: #434760;
		line-height: 1.5;
		}
		#content p b, #content p strong
			{
			}
		#content p i, #content p em
			{
			}
		#content p a
			{
			color: #525674;
			}
			#content p a:hover
				{
				color: #ffffff;
				}
		#content ul, #content ol
			{
			margin: 8px 0;
			padding: 0 0 0 15px;
			font-weight: normal;
			font-size: 1.1em;
			line-height: 1.5;
			list-style-image: url(css/bullet.gif);
			}
			#content ul li, #content ol li
				{
				margin: 0;
				padding: 0;
				}
				#content ul li a, #content ol li a
					{
					}
					#content ul li:hover, #content ol li a:hover
						{
						}
				#content ul li ul, #content ol li ul, #content ul li ol, #content ol li ol
					{
					}
	#content blockquote
		{
		}
	#content pre
		{
		}
	#content form
		{
		margin: 8px 0;
		font-weight: normal;
		font-size: 1.1em;
		line-height: 1.5;
		}
		#content form fieldset
			{
			margin: 0;
			border: 0;
			padding: 0;
			}
			#content form fieldset legend
				{
				}
			#content form fieldset label
				{
				}
				#content form fieldset input, #content form fieldset textarea, #content form fieldset select
					{
					margin-bottom: 5px;
					font: normal 1em Verdana, Arial, Helvetica, sans-serif;
					}
			#content form fieldset input
				{
				}
				#content form fieldset input.field
					{
					border: 1px solid #160314;
					padding: 5px;
					width: 350px;
					color: #916991;
					background-color: #160314;
					}
					#content form fieldset input.field:hover
						{
						}
					#content form fieldset input.field:focus
						{
						border-color: #525674;
						color: #000000;
						background-color: #525674;
						}
				#content form fieldset input.button
					{
					border: 1px solid #341a3e;
					padding: 5px 10px;
					font-weight: bold;
					color: #160314;
					background-color: #341a3e;
					}
					#content form fieldset input.button:hover
						{
						border-color: #525674;
						color: #000000;
						background-color: #525674;
						}
					#content form fieldset input.button:focus
						{
						}
				#content form fieldset textarea
					{
					border: 1px solid #160314;
					padding: 5px;
					width: 350px;
					color: #916991;
					background-color: #160314;
					}
					#content form fieldset textarea:hover
						{
						}
					#content form fieldset textarea:focus
						{
						border-color: #525674;
						color: #000000;
						background-color: #525674;
						}
				#content form fieldset select
					{
					border: 1px solid #160314;
					padding: 5px;
					color: #916991;
					background-color: #160314;
					}
					#content form fieldset select:hover
						{
						}
					#content form fieldset select:focus
						{
						border-color: #525674;
						color: #000000;
						background-color: #525674;
						}

/**************************************************************************

 F O O T E R

 **************************************************************************/

#footer1
	{
	clear: both;
	float: right;
	margin-top: 50px;
	}
	#footer1 p
		{
		display: inline;
		float: left;
		margin: 0 0 0 10px;
		width: 200px;
		font: normal 0.9em Tahoma, Arial, Helvetica, sans-serif;
		color: #1d1b2d;
		text-align: right;
		}
		#footer1 p strong
			{
			color: #2d2a47;
			}
		#footer1 p a
			{
			color: #1d1b2d;
			}
			#footer1 p a:hover
				{
				color: #2d2a47;
				}

/**************************************************************************

 V A R I O U S

 **************************************************************************/

/* STYLES FOR JAVASCRIPT LAVALAMP PLUGIN APPLIED TO NAVIGATION */

#navigation ul
	{
	position: relative;
	}
#navigation ul li
	{
	float: left;
	}
#navigation ul li.back
	{
	position: absolute;
	z-index: 8;
	background-color:#451d4b;
	}
#navigation ul li.selected a
	{
	color: #ffffff;
	}
#navigation ul li a
	{
	display: block;
	position: relative;
	z-index: 10;
	padding: 5px 10px;
	text-align: center;
	outline: none;
	}

/* STYLES FOR JAVASCRIPT COLLAPSED CONTENT SECTIONS */

#content.collapsed
	{
	height: 340px;
	overflow: hidden;
	}
#content.collapsed div.section
	{
	margin: 0 0 340px 0;
	height: 340px;
	overflow: hidden;
	}

/* OTHER STUFF */

#content.collapsed #intro
	{
	margin:0;
	height: 340px;
	background: url(css/intro.jpg) 50% 50% no-repeat !important;
	}
#portfolio
	{
	margin:0;
	height: 340px;
	background: url(css/portfolio.jpg) 50% 50% no-repeat !important;
	}
#portfolio p
	{
	padding: 50px 0 0 0;
	text-align: center;
	}
p.result
	{
	border: 1px solid #341a3e;
	padding: 4px;
	font-weight: bold;
	}