/* CSS : BERBEROS.COM

AUTHOR : MEHDI AYACHE

E-MAIL : M@MEHDIAYACHE.COM  */


body {
	background:url(img/bg.jpg) repeat #fddd01;
	color:#000;
	font-family:Georgia, "Times New Roman", Times, serif;
	position:relative;
}
#container {
	width:560px;
	margin:0 auto;
}
#logo {
	width:193px;
	height:193px;
	margin:30px auto 30px auto;
	display:block;
}
/*  STYLES COMMUNS */

img {
	border:0;
}

a {
color:#000;
text-decoration:none;	
}

.shad {
	text-shadow: #fff5b3 1px 1px 0px;
}

.shad2 {
	text-shadow: #FFF 1px 1px 0px;
}

/*  TOP MENU STYLE */


#topmenu {
	height:88px;
	background:url(img/bg-topmenu.png) top center repeat-x transparent;
	display:block;
}
/*  PRESENTATION */

span.jesuis {
	font-size:20px;
	font-style:italic;
	text-align:center;
	display:block;
}
h1.graphicdesigner {
	letter-spacing:-3px;
	font-size:50px;
	text-align:center;
	display:block;
}
h2.freelance {
	background:url(img/line-freelancer.png) center center no-repeat transparent;
	font-size:26px;
	font-style:italic;
	text-align:center;
	display:block;
	margin-bottom:30px;
}
/*  MAP */

div#map {
	padding-top:200px;
	background:url(img/map.png) top center no-repeat transparent;
	width:470px;
	margin:0 auto 60px auto;
}
p.jhabite {
	text-transform:uppercase;
	font-size:25px;
	text-align:center;
	display:block;
}
p.maroc {
	font-size:15px;
	font-style:italic;
	text-align:center;
	display:block;
}

/* CERVEAU */
p.jegagne {
	font-size:20px;
	font-style:italic;
	text-align:center;
	display:block;
}

p.cerveau {
letter-spacing:-3px;
	font-size:90px;
	text-align:center;
	display:block;
}

div#savoirfaire {
background:url(img/cerveau.png) center center no-repeat transparent;
width:500px;
height:250px;
position:relative;
margin:0 auto 60px auto;
}

div#savoirfaire span.cerveauitem {
		position:absolute;
		font-size:18px;
		font-style:italic;
		text-align:center;
		display:block;
		
		
	}
	div#savoirfaire span.wordpress {
		top:154px;
		left:40px;
	}
	div#savoirfaire span.uxui {
		top:96px;
		left:10px;
	}
	
	div#savoirfaire span.csshtml {
		top:44px;
		left:80px;	
	}
	div#savoirfaire span.mobile {
		top:18px;
		left:200px;
	}
	div#savoirfaire span.illustrations {
		top:60px;
		left:350px;
	}
	div#savoirfaire span.interfaces {
		top:110px;
		left:380px;
	}
	
	div#savoirfaire span.da {
		top:186px;
		left:290px;
	}
	div#savoirfaire span.cm {
		top:214px;
		left:90px;
	}
	
	
	
/* FORMULAIRE */

#contactFormContainer {
	width:650px;
	height:339px;
	margin:0 auto;
	background:url(img/letter.jpg) top center no-repeat #FFF;
	position:relative;
	box-shadow: 0px 0px 5px #7b6b00;
	
}



	
/* Hides the whole contact form until needed */	
#contactForm {
	padding:70px 20px 0 20px;

	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}
	
/* Hides the confirmation message until needed */	
#messageSent {display:none;}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:11px; 
	line-height:10px; 
	padding-left:6px; 
	color:#c30000;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:47px; width:211px;
	background:url(../images/contact_me.png); 
	position:absolute; 
	left:368px; bottom:-44px; 
	cursor:pointer;
	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0;
	background:#000; 
	z-index:11;
	}  
	
/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
#contactForm textarea, #contactForm input {
	width:180px; 
	background-color:#FFF;
	height:15px;
	border:1px dashed #FFF;
	line-height:14px; 
	font-size:11px; 
	padding:2px 2px 0px;
	box-shadow: -1px -1px 3px #d9d9d9;
	}
#contactForm input {
	font-size:18px;
	line-height:24px;
	height:24px;
	padding:3px;
	width:400px;
}

#contactForm textarea {
	font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
	line-height:24px;
	height:24px;
	padding:3px;
	width:400px;
	height:100px;
	resize:none;	
}
	
#contactForm .submit {
width:148px;
height:58px;
background:none;
border:none;
text-shadow:none;
box-shadow:none;
	}

#contactForm label {padding-left:4px; font-size:14px;}
#contactForm p {padding-bottom:8px;}
#contactForm .input_boxes {float:left; width:500px;}
#contactForm .submit_boxes {position:absolute;width:148px; height:58px; top:140px; right:40px;}

#dummycontent {padding-top:100px; height:600px; position:relative;}
.bottomlink {position:absolute; bottom:0;}



/*  SOCIAL */

div#social {
margin:60px auto 60px auto;
width:450px;
text-align:center;
background:url(img/line-social.png) center center no-repeat transparent;
}

div#portfolio {
margin:30px auto 60px auto;
text-align:center;
}