/*****************************************/
/*               General       			  */
/*****************************************/
* {
margin:0;
padding:0;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
margin:0;
padding:0;
height: 100%;
text-align: center;
font-size:62.5%;
font-family : Verdana, Arial, Helvetica, sans-serif;
background: #CCC url(images/fd.gif) fixed;
}

acronym, abbr {
cursor: help ;
border-bottom:1px dotted #CCC;
}

ul {
margin-bottom:13px;
margin-left:13px;
}

ul.classic li{
margin-left:13px;
padding-left:13px;
margin-bottom:4px;
list-style-type:none;
background: transparent url(images/li-classic.gif) 0 5px no-repeat;
}

a img {
border:0;
}

a:link {
color:#001C27;
}

a:visited {
color:#001C27;
font-style:italic;
color:#999;
}

a:hover {
color:#F60;
text-decoration:none;
}

a:active {
background-color:#F30;
text-decoration:none;
}

h1 {
background: #FFF url(images/h1.png) no-repeat;
padding-left:130px;
padding-top:9px;
padding-bottom:10px;
margin-top:0;
font-size:large;
font-family:Georgia, "Times New Roman", Times, serif;
color:#001C27;
letter-spacing:3px;
width:200px;
}

h1 span {
font-size:0.9em;
letter-spacing:normal;
}

h2
{
background: #F1ECEC url(images/h2.png) no-repeat;
font-family:Georgia, "Times New Roman", Times, serif;
color:#001C27;
letter-spacing:0.1em;
font-size:1.2em;
border-bottom: 1px solid #001C27;
padding-left:35px;
margin-top:20px;
margin-bottom:13px;
}

h2 > em {
font-size:1em;
font-style:normal;
font-weight:100;
}

h3 {
border-top: 1px dotted #CCC;
padding-top: 5px;
margin-bottom:10px;
color:#F60;
font-size:1em;
}

p {
margin-bottom:15px;
}

blockquote {
background:#FFF url(images/fd-blockquote.png) no-repeat;
margin-left:20px;
margin-bottom:15px;
padding-right:5px;
padding-top:8px;
padding-left:18px;
font-size:1em;
}

blockquote ul {
margin-left:15px;
text-align:left;
}

blockquote li {
margin-top:5px;
}

blockquote:after {
content:url(images/fd-blockquote-end2.png);
}

.important {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#F60;
font-size:1.1em;
}

.little {
font-size:0.9em;
font-style:italic;
}

strong {
font-weight:600;
}

kbd {
background-color:#E5E5E5;
font-size:1.2em;
}

.clear {
clear:both;
font-size:0.1em;
}


/*****************************************/
/*               Blocs        			  */
/*****************************************/

#container {
margin-left: auto;
margin-right: auto;
width:664px;
background:url(images/fd3.png) repeat-y;
text-align: left;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important;
height: 100%;
}

#page {
margin-left:7px;
margin-right:7px;
margin-top:0;
padding-top:0;
padding-bottom: 29px;
}

#popupvideo {
text-align:center;
height:100%;
}

#hautedepage {
margin-left:7px;
margin-right:7px;
background-color:#001C27;
color:#CCC;
}

#hautedepage a{
color:#FFF;
text-decoration:none;
}

#hautedepage a:hover{
text-decoration:none;
background-color:#FFF;
color:#001C27;
}

#hautedepage a:visited{
font-style:normal;
}

#hautedepage ul{
text-align:right;
margin-bottom:3px;
padding-bottom:0;
padding-right:10px;
}

#hautedepage li{
list-style-type:none;
display:inline;
padding-right:5px;
}

/*****************************************/
/*               Header        	      */
/*****************************************/

#header {
background: #001C27 url(images/metro2.jpg) 5px 20px no-repeat;
height:175px;
margin-left:7px;
margin-right:7px;
margin-bottom:0;
padding-top:0;
}

#logo a {
width: 119px ;
height: 164px;
display: block ;
background: url(images/logo7.gif) no-repeat ;
position: relative ;
top: -10px ;
}

#logo a span
{
display: none ;
}

#header ul{
list-style-type:none;
}

#header ul li{
float:right;
margin-right:5px;
border-right: 1px solid #996;
padding-right:5px;
padding-top:2px;
}
 
#header a{
color:#FFF;
display: block;
font-size:1em;
text-decoration:none;
}

#header a:hover{
text-decoration:none;
background-color:#FFF;
color:#001C27;
}

/*****************************************/
/*               Menu          	      */
/*****************************************/

#menu {
float:left;
width:134px;
position: relative;
height: 275px;
background: #FFF url(images/fd-menu2.png) no-repeat;
margin: 10px auto;
padding:0;
list-style: none;
font-size:1.1em;
font-weight:500;
}

#menu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}

#menu li, #menu a {
display: block;
text-decoration:none;
color:#000;
height:30px;
}

#menu a:active {
text-decoration:none;
background-color:transparent;
}

#accueil {
left:0;
top:2px;
height:35px;
}

#accueil a, #parcours a, #etudes a{
padding-left:60px;
width:74px;
}

#experiences a {
padding-left:35px;
width:99px;
}

#competences a, #realisations a{
padding-left:25px;
width:109px;
}

#divers a {
padding-left:45px;
width:89px;
}

#accueil a:hover {
background: transparent url(images/fd-menu2.png) 0 -282px no-repeat;
}

#parcours a:hover {
background: transparent url(images/fd-menu2.png) 0 -281px no-repeat;
}

#etudes a:hover {
background: transparent url(images/fd-menu2.png) 0 -281px no-repeat;
}

#experiences a:hover {
background: transparent url(images/fd-menu2.png) 0 -422px no-repeat;
}

#competences a:hover {
background: transparent url(images/fd-menu2.png) 0 -459px no-repeat;
}

#realisations a:hover {
background: transparent url(images/fd-menu2.png) 0 -500px no-repeat;
}

#divers a:hover {
background: transparent url(images/fd-menu2.png) 0 -537px no-repeat;
}

#parcours {
top:45px;
height:40px;
}

#etudes {
top:87px;
height:60px;
}

#experiences {
top:142px;
height:40px;
}

#competences {
top:179px;
height:40px;
}

#realisations {
top:220px;
height:40px;
}

#divers {
top:257px;
height:40px;
}

#logo {
height:167px;
width:650px;
background-color:#001C27;
background:url(images/metro.jpg);
background-position:right top;
background-repeat:no-repeat;
padding-bottom:0px;
margin-bottom:0px;
}

#contenu {
background-color:#FFF;
}

#contenu p{
text-align:justify;
line-height:1.4em;
}

#fil-ariane {
border-bottom: 1px dotted #CCC;
margin-top:5px;
margin-bottom:20px;
font-size:0.9em;
padding-bottom:4px;
}

#fil-ariane a:visited {
font-style:normal;
}

#fil-ariane strong{
font-weight:normal;
letter-spacing:0.2em;
}

/*****************************************/
/*               Download      			  */
/*****************************************/

#download h2 {
font-size:small;
font-family:Georgia, "Times New Roman", Times, serif;
margin-top:5px;
margin-bottom:4px;
margin-left:3px;
letter-spacing:0.1em;
color:#FFF;
background: #001C27 url(images/fd-h2-download.png) 0 0 no-repeat;
padding-left:16px;
padding-bottom:3px;
}

#download p a {
background:transparent url(images/contact2.gif) 5px 1px no-repeat;
padding-left: 25px;
display:block;
margin-left:3px;
margin-top:5px;
font-size:1.2em;
font-weight:bold;
color:#001C27;
text-decoration:none;
text-transform:capitalize;
letter-spacing:0.2em;
}

#download p a:hover {
color:#FFF;
text-decoration:none;
background-color:#001C27;
}

#download ul{
list-style-type:none;
margin-top:5px;
margin-left: 1px;
padding-left: 2px;
}

#download li a {
font-size:small;
display: block;
width:85px;
background:transparent url(images/li-download.png) 5px 0 no-repeat;
padding-left:20px;
color:#001C27;
text-decoration:none;
}

#download li a:hover {
color:#FFF;
text-decoration:none;
background:#001C27 url(images/li-download.png) 5px 0 no-repeat;
}

.left {
float:left;
}

.right {
float:right;
}

.into {
margin-top:7px;
margin-bottom:10px;
font-style:italic;
word-spacing:0.9em;
padding-left:3px;
}

p img.left {
/*float:left;*/
margin-right:5px;
margin-bottom:1px;
border:0;
}

p img.right {
float:right;
margin-left:5px;
margin-bottom:1px;
border:0;
}

/*****************************************/
/*               Competences    			  */
/*****************************************/

ul.competences {
list-style-type:none;
margin:0;
padding:0;
height:270px;
}

ul.competences li {
width:109px;
height:122px;
border: 1px solid #000;
text-align:center;
margin-right:17px;
margin-bottom:17px;
display:inline;
float:left;
}

ul.competences li a{
color:#FFF;
width:100%;
height:122px;
display:block;
text-decoration:none;
font-weight:bold;
}

ul.competences li a:hover{
color:#000;
background-color:#CCC;
text-decoration:none;
}

a.dev{
background: #333 url(images/developpement.gif) no-repeat 2px 15px;
color:#FFF;
}

a.marketing {
background: #333 url(images/marketing.jpg) no-repeat 2px 15px;
color:#FFF;
}

a.ref{
background: #333 url(images/referencement.gif) no-repeat 2px 15px;
color:#FFF;
}

a.design {
background: #333 url(images/webdesign.gif) no-repeat 2px 15px;
color:#FFF;
}

a.ergo{
background: #333 url(images/ergonomie.gif) no-repeat 2px 15px;
color:#FFF;
}

a.pao{
background: #333 url(images/pao.jpg) no-repeat 2px 15px;
color:#FFF;
}

/*****************************************/
/*               Rea          			  */
/*****************************************/

h3.realisations {
color:#666;
font-size:1em;
margin-top:10px;
padding-left:14px;
background: #FFF url(images/h3.gif) no-repeat 2px 3px;
letter-spacing: 0.5em;
}

ul.rea {
list-style-type:none;
margin-top:8px;
padding:0;
height:130px;
}

ul.rea li{
display:inline;
margin-left:5px;
width:155px;
height:115px;
display:inline;
float:left;
text-align:center;
}

ul.rea li a{
/*height:5x;*/
padding-top:115px;
text-decoration:none;
display:block;
width:100%;
}

ul.rea li a:hover{
text-decoration:underline;
}

a.rea-apjd {
background: transparent url(images/captures/apjd.png) no-repeat;
}

a.rea-cv {
background: transparent url(images/captures/cv.png) no-repeat;
}

a.rea-mgh {
background: transparent url(images/captures/mgh-watches.png) no-repeat;
}

a.rea-viadeli {
background: transparent url(images/captures/viadeli.png) no-repeat;
}

a.voir-site {
background: transparent url(images/voir-site.gif) no-repeat 5px 0;
padding-left:27px;
text-decoration:none;
font-weight:bold;
border-left:3px solid #CCC;
}

ul.ancres {
list-style-type:none;
}

ul.ancres li{
background: transparent url(images/li-classic.gif) 0 5px no-repeat;
padding-left:10px;
margin-right:10px;
display:inline;
}

.real {
min-height: 123px;
height: 123px;
margin-bottom:10px;
padding-top:10px;
}

.real img{
float:right;
margin-left:8px;
}

.leftaddress {
float:left;
margin-right:15px;
}

.link-rea {
clear:both;
clear:
width:250px;
background-color:#FFFFCC;
}
/*****************************************/
/*               Footer       			  */
/*****************************************/
#footer {
background:#F60 url(images/fd-footer.png) no-repeat;
position: absolute;
bottom: 0 !important;
bottom: -1px; /* For Certain IE widths */
height: 21px;
clear:left; 
width: 455px;
margin-left:7px;
text-align:right;
padding-left:180px;
padding-right:15px;
padding-top:7px;
}

#footer a:hover {
color:#FFF;
}

#top {
background: #F60 url(images/top.gif) no-repeat;
width: 57px;
margin-left:584px;
}