/* =Variables
-------------------------------------------------------------- */

@grey: #716956;
@green: #8bae05;
@orange: #ea7500;
@blue: #3e484c;
@blue2: #124b4d;


/* =Mixins
-------------------------------------------------------------- */

.default-link {
	color:@orange; font-size:14px; text-decoration:none;
	&:hover { text-decoration:underline; }
}

.border-radius (@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

.box-shadow {
	-moz-box-shadow: inset 0px 4px 5px rgba(139,132,128,0.3);
    -webkit-box-shadow: inset 0px 4px 5px rgba(139,132,128,0.3);
    box-shadow: inset 0px 4px 5px rgba(139,132,128,0.3);
}


/* =Fonts
-------------------------------------------------------------- */

@font-face {
    font-family: 'Rockwell';
    src: url('fonts/rockwell/rock.eot');
    src: url('fonts/rockwell/rock.eot?#iefix') format('embedded-opentype'),
         url('fonts/rockwell/rock.woff') format('woff'),
         url('fonts/rockwell/rock.ttf') format('truetype'),
         url('fonts/rockwell/rock.svg#rock') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rockwell-Bold';
    src: url('fonts/rockwell/rockb.eot');
    src: url('fonts/rockwell/rockb.eot?#iefix') format('embedded-opentype'),
         url('fonts/rockwell/rockb.woff') format('woff'),
         url('fonts/rockwell/rockb.ttf') format('truetype'),
         url('fonts/rockwell/rockb.svg#rockb') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* =Layout
-------------------------------------------------------------- */

/* html */
body { font-family:'Amaranth', sans-serif; font-size:14px; text-align:center; background:url('../images/body_bg.jpg') repeat; }

/* content */
.container { width:960px; margin:0px auto; padding:0px; text-align:left; position:relative; }

/* menu */

.menu { position:fixed; z-index:1200; width:165px; height:285px; margin:114px 0px 0px 794px; padding-top:5px; background:url('../images/menu_bg.png') no-repeat;
	.elt { float:left; width:165px; height:54px; margin-bottom:2px; background:url('../images/menu_leef_off.png') 12px 10px no-repeat;
		.link { float:left; position:absolute; z-index:3; width:170px; height:54px; background:url('../images/blank.png') repeat; }
		.text {
			float:left; position:absolute; z-index:2; margin:9px 0px 0px 48px; font-family:'Rockwell', sans-serif; font-size:18px; line-height:17px; color:#716956; text-shadow:0px 1px 1px #faf8f4;
			em { font-family:'Amaranth', sans-serif; font-style:italic; font-size:13px; color:#a89f8c; }
		}
		.leef { float:left; position:absolute; z-index:1; width:24px; height:28px; margin:10px 0px 0px 12px; background:url('../images/menu_leef.png') no-repeat; }
	}
}

/* edito */
#edito {
	.logo { float:left; width:215px; height:155px; margin-top:55px; background:url('../images/logo.png') no-repeat; }

	.title { 
		float:left; width:445px; margin-left:120px; padding-top:105px; color:@grey; font-size:32px; line-height:34px; text-shadow:0px 1px 1px #faf8f4; background:url('../images/edito_schema.png') top right no-repeat; 
		strong { color:@green; font-weight:normal; }
	}
	.island { 
		float:left; position:absolute; z-index:999; width:494px; height:563px; padding:14px 0px 0px 160px; margin:280px 0px 0px 166px; color:@grey; line-height:20px; background:url('../images/edito_island.png') no-repeat;
		strong { font-weight:normal; text-decoration:underline; }
	}
	.bird { 
		float:left; position:absolute; z-index:999; width:396px; height:1167px; margin-left:378px; color:@grey; line-height:20px; background:url('../images/edito_bird.png') no-repeat;
		.text { float:left; width:170px; margin:1005px 0px 0px 22px; }
	}
	.cloud-front { float:left; position:absolute; width:880px; height:1800px; margin-left:38px; background:url('../images/edito_cloud_front.png') no-repeat; }
	.cloud-behind { float:left; position:absolute; z-index:997; width:798px; height:1500px; background:url('../images/edito_cloud_behind.png') no-repeat; }
	.bar { float:left; position:absolute; width:347px; height:1200px; margin-left:100px; background:url('../images/edito_bar.png') no-repeat; }
	.bar2 { float:left; position:absolute; z-index:998; width:287px; height:2000px; margin-left:400px; background:url('../images/edito_bar2.png') no-repeat; }
	.bananas { float:left; position:absolute; z-index:999; width:88px; height:1500px; margin-left:210px; background:url('../images/edito_bananas.png') no-repeat; }
	.monkey { float:left; position:absolute; z-index:999; width:271px; height:1700px; margin-left:180px; background:url('../images/edito_monkey.png') no-repeat; }
}

/* edito - services */
#edito-services {
	float:left; width:100%; height:555px; margin-top:975px;
	.edito-bg { float:left; position:absolute; z-index:1100; width:100%; height:555px; background:url('../images/edito_bottom.png') bottom center no-repeat; }
	.title { 
		float:left; width:300px; margin-left:487px; color:@grey; font-size:32px; line-height:32px; text-shadow:0px 1px 1px #faf8f4;
		strong { color:@green; font-weight:normal; }
	}
	.text { float:left; width:560px; margin:20px 0px 0px 242px; font-size:16px; line-height:18px; color:@grey; text-shadow:0px 1px 1px #faf8f4; }
	.service1 { 
		float:left; width:115px; margin:99px 0px 0px 280px; text-align:center; font-size:17px; line-height:20px; text-shadow:0px 1px 1px #faf8f4; color:@grey;
		a {	.default-link; }
	}
	.service2 {
		float:left; width:120px; margin:99px 0px 0px 33px; text-align:center; font-size:17px; line-height:20px; text-shadow:0px 1px 1px #faf8f4; color:@grey;
		a {	.default-link }
	}
	.service3 {
		float:left; width:180px; margin:99px 0px 0px 30px; text-align:center; font-size:17px; line-height:20px; text-shadow:0px 1px 1px #faf8f4; color:@grey;
		a {	.default-link }
	}
}

/* news */

#news {
	float:left; width:100%; height:519px; background:url('../images/news_schema.png') top center no-repeat;
	.title { float:left; position:absolute; margin:38px 0px 0px 265px; color:@blue; font-size:32px; line-height:32px; text-shadow:0px 1px 1px #faf8f4; z-index:999; }
	.text {
		float:left; position:absolute; z-index:999; height:448px; width:960px; clear:both; margin-top:78px; background:url('../images/news_post.png') no-repeat;
		.panel { 
			float:left; position:absolute; width:401px; height:208px; padding:55px 50px 0px 30px; margin-left:323px; background:url('../images/news_panel.png') no-repeat; color:#76797f; line-height:16px;
			h3 { width:370px; font-size:18px; line-height:20px; margin-bottom:18px; font-weight:bold; color:#666f72; }
			p { float:left; }
			a { .default-link; float:right; clear:both; margin-top:6px; }
		}
		.date {
			font-family:'Rockwell-Bold', sans-serif; font-size:24px; color:@blue; line-height:25px; margin:40px 0px 0px 330px; display:none;
			strong { font-size:45px; }
		}
	}
	.bee { float:left; position:absolute; z-index:999; width:81px; height:500px; margin-left:240px; background:url('../images/news_bee.png') no-repeat; }
	.bar { float:left; position:absolute; z-index:998; width:347px; height:437px; margin-left:584px; background:url('../images/news_bar.png') no-repeat; }
	.cloud-front { float:left; position:absolute; width:864px; height:700px; margin-left:120px; background:url('../images/news_cloud_front.png') no-repeat; }
	.cloud-behind { float:left; position:absolute; width:609px; height:700px; margin-left:244px; background:url('../images/news_cloud_behind.png') no-repeat; }
}

/* services */

#services { 
	float:left; width:100%; height:1216px;
	.top { 
		float:left; position:absolute; z-index:1; width:100%; height:421px; background:url('../images/services_sky.png') top center no-repeat;
		.title { float:left; position:absolute; margin:30px 0px 0px 274px; color:@blue2; font-size:32px; line-height:32px; text-shadow:0px 1px 1px #e6f2f2; z-index:999; }
	}
	.pictos { float:left; position:absolute; z-index:999; width:603px; height:403px; margin:57px 0px 0px 215px; background:url('../images/services_pictos.png') no-repeat; }
	.bottom {
		float:left; position:absolute; z-index:4; width:100%; height:766px; margin-top:450px; background:url('../images/services_tree.png') bottom center no-repeat;
		.col { 
			float:left; text-shadow:0px 1px 1px #faf8f4;
			h3 { font-size:28px; line-height:28px; color:@green; }
			h4 { font-size:16px; line-height:18px; font-weight:bold; color:@orange; text-transform:uppercase; margin-top:18px; }
			p { color:@grey; line-height:18px; }
		}
		.col1 { float:left; width:160px; margin-left:242px; }
		.col2 { float:left; width:190px; margin-left:30px; }
		.col3 { float:left; width:140px; margin-left:30px; }
	}
	.cloud-front { float:left; position:absolute; z-index:3; width:100%; height:2000px; background:url('../images/services_cloud_front.png') top center no-repeat; }
	.cloud-behind { float:left; position:absolute; z-index:2; width:100%; height:2000px; background:url('../images/services_cloud_behind.png') top center no-repeat; }
}

/* references */

#references {
	float:left; width:100%; height:965px;
	.background { float:left; position:absolute; z-index:100; width:100%; height:965px; background:url('../images/body_bg.jpg') repeat; }
	.photo { float:left; position:absolute; z-index:998; width:100%; height:366px; background:#16150f url('../images/references_photo.jpg') top center no-repeat; }
	.island { float:left; position:absolute; z-index:997; width:517px; height:1200px; margin-left:220px; background:url('../images/references_island.png') no-repeat; }
	.bars { float:left; position:absolute; z-index:996; width:412px; height:1200px; margin:80px 0px 0px 434px; background:url('../images/references_bars.png') no-repeat; }
	.slider { 
		float:left; position:absolute; z-index:999; margin-left:192px;
		.nav { 
			float:left; width:10px; margin-top:56px;
			a {
				float:left; width:10px; height:10px; margin-bottom:7px; background:url('../images/references_nav.png') no-repeat;
				&:hover { background:url('../images/references_nav.png') -10px 0px no-repeat; }
			}
			a.active { background:url('../images/references_nav.png') -10px 0px no-repeat; }
		}
		.title { float:left; color:#f2f2f3; font-size:32px; line-height:32px; margin:35px 0px 0px 70px; text-shadow:1px 0px 6px rgba(32,34,27,0.75); }
		.arrows {
			float:left; position:absolute; z-index:999; width:540px; margin:170px 0px 0px 50px;
			.left { float:left; width:40px; height:40px; background:url('../images/references_arrows.png') no-repeat; }
			.right { float:left; width:40px; height:40px; margin-left:460px; background:url('../images/references_arrows.png') -40px 0px no-repeat; }
		}
		.screen {
			float:left; position:absolute; z-index:998; margin:80px 0px 0px 77px;
			.slider-elt { 
				float:left; position:absolute;
				.web { float:left; position:absolute; margin-left:47px; }
				.iphone { float:left; position:absolute; margin:-53px 0px 0px 200px; }
				.infogerance { float:left; position:absolute; margin:32px 0px 0px 146px; }
				.ingenierie { float:left; position:absolute; margin:-74px 0px 0px 25px; }
				.text {
					float:left; position:absolute; z-index:999; width:199px; height:211px; padding:20px 28px 0px 28px; margin-top:212px; color:#273442; background:url('../images/references_panel.png') no-repeat;
					h3 { font-size:28px; line-height:30px; font-weight:bold; }
					h4 { font-size:18px; line-height:19px; margin-top:10px; }
					p { margin:0px; padding:0px; line-height:19px; }
					a { .default-link; }
				}
			}
		}
	}
}

/* form */

#form {
	float:left; margin-left:242px; height:590px;
	.title {
		float:left; color:@grey; font-size:32px; line-height:28px; text-shadow:1px 0px 6px #faf8f4;
		strong { font-weight:normal; color:@green; }
	}
	form { float:left; width:550px; position:absolute; z-index:1100; margin-top:95px; }
	.success {
		float:left; width:542px; padding:10px 0px; margin-bottom:20px; background-color:#e4ebc3; .border-radius(10px); text-align:center; display:none; font-size:18px; line-height:22px; text-shadow:1px 0px 1px #f8faf1; color:@green;
		strong { color:@grey; }
	}
	.text {
		float:left; margin-right:13px;
		label { display:block; color:#786854; }
		input { width:150px; height:33px; line-height:33px; padding:0px 10px; margin-top:5px; border:1px solid #f0eee9; background-color:#eeeae8; .box-shadow; .border-radius(4px); color:#786854; font-size:12px; }
	}
	.textarea {
		float:left; clear:both; margin-top:22px;
		label { display:block; color:#786854; }
		textarea { font-family:Arial; width:520px; height:95px; padding:10px; margin-top:5px; border:1px solid #f0eee9; background-color:#eeeae8; .box-shadow; .border-radius(4px); color:#786854; font-size:12px; }
	}
	.loader { float:left; width:30px; height:16px; margin:35px 0px 0px 385px; }
	.submit { float:left; width:128px; height:36px; margin-top:25px; border:none; background-color:transparent; cursor:pointer; background:url('../images/form_submit.png') no-repeat; }
	.footer { 
		float:left; clear:both; margin-top:400px; font-size:12px; color:#a79682; line-height:20px;
		strong { text-transform:uppercase; }
		a {
			color:#a79682; text-decoration:none;
			&:hover { text-decoration:underline; }
		}
	}
}