﻿* {
	padding : 0;
	outline : 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;
}
.h1 {color:#FFFFFF}

#bgsamples{background:#fff;opacity:0.6;width:525px;filter:Alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;}
#bgintro{width:420px;height:320px;background:#fff;opacity:0.6;filter:Alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;position:relative;top:14%;left:57%;margin-top:50px}

html {
overflow : hidden;
}
body {
font-family : Arial, Helvetica, sans-serif;
overflow : hidden;
}
img {
border : 0;
}
#loading {
position : absolute;
left : 50%;
margin-left : -12px;
top : 50%;
margin-top : -12px;
}
#background {
position : absolute;
bottom : 0;
left : 0;
}
#navigation {
position : fixed;
bottom : 12px;
left : 0;
width : 100%;
height : 50px;
}
#navigation .background {
background : #000;
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 50px;
}
#navigation .logo {
position : absolute;
bottom : 12px;
left : 20px;
}
#navigation ul {
list-style : none;
position : absolute;
bottom : 0;
right : 20px;
}
#navigation ul li {
float : left;
}
#navigation ul li a {
font-size : 13px;
color : #ccc;
text-decoration : none;
display : block;
float : left;
height : 33px;
padding : 0 8px;
padding-top : 17px;
}
#navigation ul li a:hover {
color : #000;
background : #ccc;
}
#footer {
background : #999;
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 12px;
text-align : right;
color : #434343;
font-size : 10px;
}
#home #bgsamples, #home #samples {
height : 400px;
margin-top : -200px;
position : absolute;
top : 45%;
}
#home #bgsamples {
background : #fff;
width : 525px;
}
#home #samples {
padding-left : 20px;
width : 500px;
}
#home #samples h2 {
font-size : 20px;
margin : 15px 0 10px 0;
color : #333;
font-weight : normal;
}
#home #samples .cadre {
list-style : none;
margin-top : 20px;
}
#home #samples .cadre li {
float : left;
margin : 0 15px 15px 0;
}
#home #samples .cadre li a img {
border : 4px solid #fff;
}
#home #bgintroh1 {
width : 350px;
height : 40px;
background : #fff;
position : absolute;
top : 14%;
left : 57%;
}
#home #bgintro {
	width : 420px;
	height : 400px;
	background : #fff;
	position : absolute;
	top : 10%;
	left : 60%;
	margin-top : 50px;
	z-index: 2;
}
#home #intro {
	position : absolute;
	top : 20%;
	left : 60%;
	width : 410px;
	overflow: visible;
	z-index: 1;
}
#home #intro h1 {
font-size : 18px;
margin : 10px;
color : #333;
font-weight : normal;
margin-bottom : 25px;
}
#home #intro p {
margin-bottom : 10px;
font-size : 12px;
color : #222;
margin-left : 10px;
}
#home #intro p a {
text-decoration : none;
border-bottom : 1px dotted #222;
color : #222;
}
#home #intro p a:hover {
color : #000;
}
#home #intro p img.mail {
margin-bottom : -3px;
}
#realisation-site-internet #bgportfolionav {
width : 900px;
height : 100px;
background : url(../img/bgportfolionav.png) no-repeat top left;
position : absolute;
top : 10%;
left : 50%;
margin-left : -450px;
}
#realisation-site-internet #bgportfoliocontent {
width : 350px;
height : 300px;
background : url(../img/bgportfoliocontent.png) no-repeat top left;
position : absolute;
top : 10%;
margin-top : 120px;
left : 50%;
margin-left : -450px;
}
#realisation-site-internet #bgportfolioscreen {
width : 530px;
height : 300px;
background : url(../img/bgportfolioscreen.png) no-repeat top left;
position : absolute;
top : 10%;
margin-top : 120px;
left : 50%;
margin-left : -80px;
}
#realisation-site-internet #portfolionav {
width : 900px;
height : 100px;
position : absolute;
top : 10%;
left : 50%;
margin-left : -450px;
}
#realisation-site-internet #portfolionav ul {
list-style : none;
padding : 10px;
}
#realisation-site-internet #portfolionav ul li {
float : left;
margin-right : 10px;
}
#realisation-site-internet #portfolionav ul li a img {
border : 2px solid #fff;
}
#realisation-site-internet #content {
width : 330px;
height : 300px;
position : absolute;
top : 10%;
margin-top : 130px;
left : 50%;
margin-left : -440px;
}
#realisation-site-internet #content h1 {
font-size : 20px;
color : #333;
font-weight : normal;
margin-bottom : 10px;
}
#realisation-site-internet #content p {
font-size : 12px;
color : #222;
margin-bottom : 5px;
}
#realisation-site-internet #content p a {
text-decoration : none;
border-bottom : 1px dotted #222;
color : #222;
}
#realisation-site-internet #screenview {
width : 530px;
height : 300px;
position : absolute;
top : 10%;
margin-top : 130px;
left : 50%;
margin-left : -70px;
}
#interaction-webdesigner .items {
padding : 10px;
background : #fff;
position : absolute;
}
#interaction-webdesigner .items h2 {
font-size : 18px;
color : #000;
font-weight : normal;
margin-bottom : 5px;
}
#interaction-webdesigner .items ul li {
list-style : none;
font-size : 12px;
color : #000;
}
#interaction-webdesigner #graphisme {
top : 3%;
left : 3%;
}
#interaction-webdesigner #devfront {
top : 10%;
left : 55%;
}
#interaction-webdesigner #devback {
top : 25%;
left : 5%;
}
#interaction-webdesigner #sem {
top : 58%;
left : 15%;
}
#interaction-webdesigner #autres {
top : 53%;
left : 60%;
}
#consultant-freelance #bgconsultant {
position : absolute;
background : #fff;
width : 350px;
height : 375px;
left : 12%;
}
#consultant-freelance #content {
position : absolute;
width : 330px;
padding : 10px;
left : 12%;
}
#consultant-freelance #content h1 {
font-size : 18px;
color : #333;
font-weight : normal;
margin-bottom : 10px;
}
#consultant-freelance #content p {
font-size : 12px;
color : #222;
margin-bottom : 5px;
}
#consultant-freelance .illustration {
position : absolute;
left : 60%;
top : 20%;
}
#contact-webdesigner #contact {
position : absolute;
background : #fff;
width : 385px;
padding : 10px 15px;
top : 5%;
left : 5%;
}
#contact-webdesigner #contact h1 {
font-size : 18px;
color : #333;
font-weight : normal;
margin-bottom : 10px;
}
#contact-webdesigner #contact p {
font-size : 12px;
color : #222;
margin-bottom : 5px;
}
#contact-webdesigner #contact p {
margin-bottom : 15px;
}
#contact-webdesigner #contact p img.mail {
margin-bottom : -3px;
}
#contact-webdesigner #contact label {
font-size : 12px;
color : #222;
margin : 10px 0 5px 0;
display : block;
float : left;
width : 170px;
}
#contact-webdesigner #contact label {
margin : 0;
}
#contact-webdesigner #contact input {
font-size : 12px;
color : #222;
border : 1px solid #555;
width : 204px;
height : 18px;
margin : 10px 0 -5px 0;
padding : 0 3px;
}
#contact-webdesigner #contact input {
margin : 0;
}
#contact-webdesigner #contact input#url {
visibility : hidden;
position : absolute;
top : 0;
left : 0;
height : 1px;
width : 1px;
}
#contact-webdesigner #contact input.red, #contact-webdesigner #contact textarea.red {
border : 1px solid #cc0000;
}
#contact-webdesigner #contact input.submit {
width : 150px;
height : 25px;
border : 0;
margin : 10px 0 5px 232px;
padding : 0;
}
#contact-webdesigner #contact textarea {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color : #222;
border : 1px solid #555;
width : 370px;
height : 170px;
padding : 5px;
}
#contact-webdesigner #contact br {
clear : both;
}
