/* --- STYLES DE BASE --- */ 
 
/* Page */ 
html { 
  font-size: 100%; /* Évite un bug d'IE 6-7. (1) */ 
  overflow:auto;
} 

body { 
  margin: 0; 
  padding: 1em; /* Remettre à zéro si nécessaire. */ 
  /* Pensez à utiliser une collection de polices (2), par ex: 
  font-family: Arial, Helvetica, FreeSans, sans-serif; */ 
  font-size: .8em; /* À adapter pour la police choisie. (3) */ 
  line-height: 1.4; /* À adapter au design. (4) */ 
  color: black; 
  background: black; 
  font-family: Tahoma;
} 
/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */ 
  line-height: 1.2; 
  font-weight: bold; /* Valeur par défaut. (6) */ 
  font-style: normal; 
} 
h1 { 
  font-size: 1.75em; 
} 
h2 { 
  font-size: 1.5em; 
} 
h3 { 
  font-size: 1.25em; 
} 
h4 { 
  font-size: 1em; 
} 

/* Listes */ 
ul, ol { 
  margin: .75em 0 .75em 32px; 
  padding: 0; 
} 
 
/* Paragraphes */ 
p { 
  margin: .75em 0; /* Marges plus faibles que par défaut. (7) */ 
} 
/* transparence*/ 
.transparent {
	position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
address { 
  margin: .75em 0; 
  font-style: normal; 
} 
strong {
	font-weight: bold;
}
/* Liens */ 
a { 
  text-decoration: none; 
} 
a:link { 
  color: inherit; 
} 
a:visited { 
  color: inherit;
} 
a:hover, a:focus, a:active { 
  color: #334bff; 
} 
/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:active { 
  outline: none; 
} 
/* Pas de bordure autour des images dans les liens */ 
a img { 
  border: none; 
} 
 
/* Divers éléments de type en-ligne (8) */ 
em { 
  font-style: italic; 
} 
strong { 
  font-weight: bold; 
} 

/*structure*/
div#header {
	top:0;
	display: block;
	height:30px;
	width: 100%;
}

div#contener {
	background-image: url(../img/bkg.gif);
	display: block;
	height:510px;
	width: 100%;
	margin-top:100px;
	left:0;
	position:relative;

}
div#graphbkg {
	background-image:url(../img/bkg2.jpg);
	display: block;
	height:510px;
	width: 100%;
	background-position: top;
	background-position: left;
	background-repeat: no-repeat;
	position:absolute;
}
div#position {
	display: block;
	height:100%;
	width: 800px;
	margin:auto;

}
div#contenu{
	height:460px;
	width: 700px;
margin-top:10px;
} 
div#contend {
	height:460px;
	width: 800px;
	background-image: url(../img/bkgcontenu.png);
	margin:auto;
	position:absolute;
	z-index:3;
	font-size: 12px;
	text-align: justify;
	
}
/*détails de chaque page*/
div#accueil{
	margin-bottom:10px;
	display:block;
	height:460px;
	overflow:hidden;
	padding-left:0px;
}
div#contact{
	margin-bottom:10px;
	display:block;
	height:460px;
	overflow:hidden;
}
div#portfolio{
	width: 750px;
	display:block;
	height:460px;
	overflow:hidden;
	
}
div#illustrations{
	width: 750px;
	display:block;
	height:460px;
	overflow:hidden;
}
div#noexist{
	display:block;
	height:auto;
	overflow:hidden;
	margin:auto;
	padding-left:20px;
	width: 300px;
}
div#accueil div.right
{
	display: block;
	width: 275px;
	right:0;
	padding:20px;
	padding-top:0px;
	margin-top:30px;
	float:right;
}
div#accueil div.left {
	display: block;
	width: 445px;
	float:left;
	padding-top:0px;
}
div#cv div.right
{
	display: block;
	width: 200px;
	right:0;
	float:right;
	padding:20px;
	padding-top:0px;
	margin-top:0px;
}
div#cv div.center {
	display: block;
	width: 260px;
	position:absolute;
	padding:20px;
	padding-top:0px;
	margin-left:260px;
}
div#cv div.left {
	display: block;
	width: 270px;
	float:left;
	position:absolute;
	padding:0px;
	padding-top:0px;
	margin-top:0px;
}
div#contact div.right {
	display: block;
	width: 200px;
	position:absolute;
	float:right;
	padding-top:20px;
	margin-left:440px;
}
div#contact div.left {
	display: block;
	width: 400px;
	float:left;
	position:absolute;
	padding-top:0px;
}
div.left img  {
	float:left;
	margin:5px;
	margin-right:10px;
}
span#dernews {
	display:block;
	height:125px;
	border:1px solid black;
	background-image: url(../img/fdnews.png);
	color:#FFFFFF;
	padding:8px;
	margin-bottom:40px;
	border-radius: 11px;
	behavior: url(border-radius.htc);
}
div.left p {
text-indent: 30px;
}
div.left p a{
color:#334bff;
font-weight: bolder;
font-size: 12px;
padding:3px;
}
div#cv div p{
	text-indent: 0px;
}
div#cv div ul li{
	list-style: none;
	line-height: 20px;
}
div#cv div ul {
margin:0px;
margin-left:20px;
}
div#cv div h4 {
font-size: 11px;
margin:0px;
padding:0px;
}
div#noexist h2{
padding:20px;
display:block;
width:300px;
margin:auto;
}
div#noexist p{
padding:20px;
display:block;
width:300px;
margin:auto;
}
div#noexist img{
margin:10px;
}
p.competences {
font-size: 9px;
margin-top:0px;
margin-right:10px;
margin-bottom:8px;

text-align:right;
}
p.competences img {
cursor:pointer;
}
img#cv {
	margin-left:40px;
}
div#contenu  div h2 {
	font-family: Georgia, serif;
	color:#7182ff;
	font-size: 24px;
	font-weight: normal;
}
div#contenu div h3 {
	font-family: Georgia, serif;
	color:#7182ff;
	font-size: 18px;
	font-weight: normal;
	margin-top:0px;
}
div#contenu div div.panel h3.title  {
margin-bottom: 15px; font-family: "Trebuchet MS";color:black;text-transform: uppercase;font-size: 14px;font-weight: bold;
}
div#cv h3 {
	font-family: Georgia, serif;
	color:#FFFFFF;
	font-size: 14px;
	font-weight: normal;
	margin-top:0px;
	display:block;
	width:100%;
	height:25px;
	text-align: center;
	background-color: #000000;
	margin-top:5px;
}
h2#quoideneuf {
	display:block;
	position:absolute;
	margin-top:150px;
	margin-left:50px;
}
div#header h1 {
	display:block;
	width: 380px;
	height:60px;
	background-image: url(../img/logo-cloe-duc.png);
	position:relative;
	margin-top:-30px;
	background-repeat: no-repeat;
	z-index:2;
	float:left;
	border-radius: 11px;
	behavior: url(border-radius.htc);
}
.anne {
	font-size: 10px;
	font-weight: bold;
}
.diplome {
	text-transform: uppercase;
	font-size:14px;
	color:#334bff; 
	font-weight: bold;
}
span.lieu {
	display:block;
}

div#header ul{
	position:relative;
	padding-top:10px;
	font-family: Love Ya Like A Sister, Georgia, serif;/* Dans cet exemple nous n'avons qu'une seule police utilisé par Typeface, on aurait pu se passer de déclarer la famille de police*/  
	margin-left:10px;
}
div#header li{
     font-size: 22px;/* Attention Typeface ne comprends pas les tailles de police relative (em)*/  
     color: black;  
     line-height: 1.4em;  
	display:block;
	padding-top:5px;
	padding-left:3px;
	padding-right:5px;
	list-style: none;
	margin-bottom: -30px;

	float:left;
	margin-left:5px;
	text-transform: uppercase;
	font-family: Love Ya Like A Sister, Georgia, serif;/* Dans cet exemple nous n'avons qu'une seule police utilisé par Typeface, on aurait pu se passer de déclarer la famille de police*/  
}
div#header li a:hover{
color:#334bff;
}
div#header li a#contact {
	background-image: url(../img/contact.png);
	height:90px;
	width: 22px;
	display:block;
	margin-left:780px;
	margin-top:10px;

}
div#footer{
	display: block;
	margin-left:0;
	margin-bottom:0;
	position:relative;
	width:100%;
	bottom:0;
	display:block;
	background-color:black;
	height:10px;
}
div#footer ul {
	display: block;
	margin-top:10px;
}
div#footer li{
	color:white;
	display: inline;
	margin-left:20px;
	text-transform: uppercase;
}
form fieldset
  {
	border:0px;
	background-image:url(../img/fdnews.png);
	-webkit-border-radius: 11px;
	border-radius: 11px;
	behavior: url(border-radius.htc);
	color:#FFFFFF;
	padding:10px;
	width: 350px;
  }
 form fieldset legend{
	text-transform: uppercase;
	font-weight: bold;
	color:#000000;
}
form fieldset label{
	overflow: hidden;
	text-align: left;
	font-weight: bold;
	display:block;
	}

	.jquery-corner{
		 position: relative;
z-index: 1;
	}
	span.right {
		float:right;
		margin-right:50px;
	
	}
	span.hautcrea {
		display:block;
		border:1px solid white;
	}
	a.miniaturegalerie {
		-webkit-border-radius: 11px;
	border-radius: 11px;
	behavior: url(border-radius.htc);
	display:block;
	height:40px;
	width: 40px;
	margin-right: 1px; 
	padding: 3px 6px; 
	position:relative;
	text-decoration: none;
	opacity:0.8;
	margin:2px;
	background-repeat: no-repeat;
	float:left;
	
	}
	a.miniaturegalerie:hover {
	opacity:1;
	}
.illustrations{
		width: 180px;
		display:block;
		float:left;
		border:1px solid white;
	}
	#footer p {
		float:right;
	
}
.overlay{
    position:fixed;
	 margin-top:0px;
	 padding-top:50px;
    z-index:100;
	 background-image:url(../img/fdnews2.png);
	 width: 100%;
	 height:90%;
}
.box{
    position:fixed;
    top:100px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}
a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:transparent url(images/cancel.png) repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
}
.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
	 font-family: Tahoma;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

input { outline:none; }
.panel {
	color:black;
	text-align: justify;
	width: 550px;
	float:right;
	display:none;}
#TD {
	display:block;
}
#menu{
	display:block;
	width: 150px;
	float:left;
	position:relative;
}
.panel img { float:left;
		margin-right :10px;
		margin-bottom:10px;}
	noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }