/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: Web2ajax Wordpress Theme                            ••
   ••  Author:  delarueguillaume@gmail.com                          ••
   ••  Date:    2010                                                ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••  

      
---------------------------------------------------------------------- */

/* 1. =Global Styles
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */


/* 1.1 =Reset
---------------------------------------------------------------------- */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix { display: inline-block; position: relative; z-index: -1; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


/* 1.1 =Default & Grid
---------------------------------------------------------------------- */

.grid-20 { position: relative; width: 20%; float: left; }
.grid-25 { position: relative; width: 25%; float: left; }
.grid-50 { position: relative; width: 50%; float: left; }
.grid-60 { position: relative; width: 60%; float: left; }
.grid-33 { position: relative; width: 33%; float: left; }

div { position: relative; display: block; font-family: Verdana; color: #fff;}
a, a:link, a:visited, a:hover { font-family: Verdana; text-decoration: none;}

@font-face {
	font-family: 'BlairMdITCTTMedium';
	src: url('../ttf/blairmditc_tt_medium_wwww.font-cat.com-webfont.eot');
	src: local('☺'), url('../ttf/blairmditc_tt_medium_wwww.font-cat.com-webfont.woff') format('woff'), url('../ttf/blairmditc_tt_medium_wwww.font-cat.com-webfont.ttf') format('truetype'), url('../ttf/blairmditc_tt_medium_wwww.font-cat.com-webfont.svg#webfontf99bvTOs') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* 2. =Document style
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
html { 
	background-color: #1f1f1f; /* fallback color */
}

body {
	font-family:Verdana, Arial;
	font-size: 13px;
	color: #FFFFFF;
	margin: 0px auto;
	text-align:center;
	display:block;
	min-width: 1000px;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/layout.png?new=0) repeat-x 37% top;
}

#VP {
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/flower.png) no-repeat 150% 200px;
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 20px;
}
#VP.hided { opacity: 0.3; }

h1 { font: 22px BlairMdITCTTMedium; padding: 50px 230px 50px 0; text-align:center; }

.seoData { display: none; }

/* 3. =Box Content
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 3.0 =Download in PDF button
---------------------------------------------------------------------- */
#download {
	width: 206px;
	height: 117px;
	position: absolute;
	right: 30px;
	top: 16px;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/download.png) no-repeat center 0;
}

#download:hover { background-position: center -117px; cursor: pointer; }

#language {	
	padding: 5px 10px;
	position: absolute;
	right: 30px;
	top: 5px;
	background: #121212;
	background: rgba(52, 52, 52, 0.7);
}

#language img { border: 1px solid #777; }
#language img.active { border: 1px solid #fff; }


/* 3.1 =Box Container
---------------------------------------------------------------------- */
.box {
	position: relative;
	display: block;
	min-height: 200px;
	margin: 38px 38px 80px;
	border: 1px solid #050505;
	/* Opera */
	background: url(https://delarueguillaume.s3.amazonaws.com/img/gradient-bg.svg);
	/* Navigateurs récents */
	background-image: -moz-linear-gradient(100% 100% 90deg, rgba(0,0,0,0.4), rgba(69,73,77,0.4)), url(https://delarueguillaume.s3.amazonaws.com/img/box-bg.png);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(69,73,77,0.4)), to(rgba(0,0,0,0.4))), url(https://delarueguillaume.s3.amazonaws.com/img/box-bg.png);
}

.box h2 {
	position: relative;
	display: block;
	width: 240px;
	height: 106px;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/sprites.png) no-repeat right top;
	font: 20px BlairMdITCTTMedium;
	line-height: 88px;
	margin: -54px 0px 0px -40px;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.75);
	text-align: center;
}

/* 3.1.1 =Box ABOUT
---------------------------------------------------------------------- */
#about { padding-bottom:20px; }
#about ul { text-align: left; padding: 0 0 0 34px; }
#about li { font: 16px/33px BlairMdITCTTMedium; clear: both; height: 33px; }
#about li span { color: #ffd9b3; width: 190px; display: block; float: left; line-height: 33px; }


/* 3.1.1.1 =Box ABOUT > Polaroid
---------------------------------------------------------------------- */
#photoWrapper {
	position: absolute;
	display: block;
	width: 330px;
	height: 258px;
	right: 0;
	top: -26px;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/photo-bg.png) no-repeat center center;
}

#photoWrapper .scene {
	position: absolute;
	display: block;
	width: 291px;
	height: 182px;
	right: 20px;
	top: 25px;
}

#photoWrapper .scene .wall {
	position: absolute;
	display: block;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/photo-wall.png) no-repeat center center;
	width: 100%;
	height: 100%;
}

#photoWrapper .scene .photo {
	position: absolute;
	display: block;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/photo-id-front.png) no-repeat center center;
	width: 100%;
	height: 100%;
}

#photoWrapper .scene .photo-front-obama {
	background-image: url(https://delarueguillaume.s3.amazonaws.com/img/photo-id-front-obama.png) ;
}

#photoWrapper .top{
	position: absolute;
	display: block;
	width: 330px;
	height: 258px;
	right: 0;
	background: transparent url(https://delarueguillaume.s3.amazonaws.com/img/photo-top.png) no-repeat center center;
}

/* 3.1.2 =Box PORTFOLIO
---------------------------------------------------------------------- */
#portfolio { 
	position: relative;
	display: block;
	padding-bottom: 10px;
	background-image: -moz-linear-gradient(100% 100% 90deg, rgba(0,0,0,0.4), rgba(69,73,77,0.4));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(69,73,77,0.4)), to(rgba(0,0,0,0.4)));
}
#portfolio h2 { background-position: 0 -110px; }

#portfolio .portfolio_view {
	position: relative;
	display: block;
	overflow: hidden;	
	width: 100%;
	height: 528px;
}

#portfolio .control {
	position: absolute;
	top: 200px;
	width: 60px;
	height: 90px;
	border: 1px solid #222;
	cursor: pointer;
	display: none;
	background: #121212 no-repeat center center;
}

#portfolio .control.hover {
	background-color: #323232;
}

#portfolio .prev {
	left: 0;
	margin-left: -61px;
	-webkit-border-radius:10px 0 0px 10px;
	-moz-border-radius:10px 0 0px 10px;
	border-right: none;
	background-image: url(https://delarueguillaume.s3.amazonaws.com/img/arrow-left.png);
}

#portfolio .next {
	right: 0;
	margin-right: -61px;
	-webkit-border-radius:0px 10px 10px 0px;
	-moz-border-radius:0px 10px 10px 0px;
	border-left: none;
	background-image: url(https://delarueguillaume.s3.amazonaws.com/img/arrow-right.png);
	display: block;
}

#portfolio ul { display: block; position: absolute; margin-left: 0px; width : 10000px; height: 528px; }

#portfolio li {
	display:block;
	float:left;
	margin:0 7px;
	padding:8px 0 15px;
	width:216px;
	text-align:center;
}

#portfolio li.hover {
	background: rgba(12, 12, 12, 0.5);
	cursor: pointer;
}

#portfolio li h3 {
	font: 15px BlairMdITCTTMedium;
	color: #a9f04c;
	padding: 15px 0;
	text-align: center;
}

#portfolio li p.paragraph {
	text-align: left;
	padding: 0 22px 16px;
	font: 13px/18px 'Cantarell', arial, serif;
	color: #fff;
	text-align:left;
}

#portfolio li .desc { height: 265px; }
#portfolio .links {
	text-align: left;
	margin: 0 22px;
	padding-top: 10px;
	font: 12px 'Cantarell', arial, serif;
	border-top: 1px dotted #323232;
	text-align:left;
}

#portfolio p.term span { color: #ce5757; }
#portfolio p.link span { color: #ffd9b3; }
#portfolio p.link a {
	color: #fff;
	font: 12px 'Cantarell', arial, serif;
}
#portfolio p.link a:hover {
	color: #FF0071;
	text-decoration: underline;
}



/* 3.1.3 =Box EXPERIENCE
---------------------------------------------------------------------- */
#experience { padding-bottom: 20px; margin-bottom: 20px; }

#experience .stars {
	background:url(https://delarueguillaume.s3.amazonaws.com/img/sprites.png) no-repeat scroll left -330px transparent;
	height:110px;
	position:absolute;
	right:-38px;
	top:-77px;
	width:110px;
}
#experience h2 { background-position: 0 -220px; margin-bottom: 7px; }
#experience p {
	text-align: left;
	padding: 0 34px 16px;
	font: 13px/18px 'Cantarell', arial, serif;
}
#experience p.first {
	font: 14px/18px 'Cantarell', arial, serif;
	font-weight: bold;
}

#experience p span {
	color: #00afb1;
	font-weight: bold;
}

#experience p a {
	color: #FF0071;
	font: 13px/18px 'Cantarell', arial, serif;
}

#experience p a:hover {
	color: #FF0071;
	text-decoration: underline;
}