﻿/* Style de mise en forme incorporant propriétés d'affichage, flottants et positionnement, largeurs et hauteurs, remplissages et marges (layout.css) 
--------------------------------------------------------------------*/

html {
text-align:center;
background-color: #FFFFFF; }

body {
width: 980px;
margin: 10px;
text-align: left; }

/* Normalise les marges et le remplissage */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,h7, pre, form, fieldset, input, p, blockquote, th, td
{margin: 0; padding: 0 }

/* Normalise les tailles de polices pour les en-têtes */
h1, h2, h3, h4, h5, h6, h7
{ font-size: 100% }

/* Supprime list-style pour les listes */
ol, ul
{list-style: none; }

/* Normalise les styles et graisses de fontes: font-style et font-weight sont "normal" */
adress, caption, cite, code, dfn, em, strong, th, var
{font-style: normal; font-weight: normal; }

/* Supprime les bordure des tableaux */
table
{border-collapse: collapse; border-spacing: 0; }

/* Supprime les bordures dans les éléments fieldset et img */
fieldset, img
{ border: 0; }

/* Aligne le texte à gauche dans caption et th */
caption, th
{text-align: left; }

/* Supprime les appostrophes doubles (guillements anglais) autour de q */
q:before, q:after
{content: ''; } 


/* Typographie */

body {
font: 72%/1.5  "Trebuchet MS", "Lucida Grande", "Lucida sans unicode", Verdana, sans serif;}

h2, h3, h4, p, ul, blockquote {
margin: 0 0px .75em; }

/* titre #branding */
h1 {
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background: #fff; 
}

/* titres des boites à droite */
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #CCCCCC; 
}


/* Légende de la photgraphie centrale */
h3 {
text-decoration: none;
text-align: left;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
background: #fff; 
}

/* titre #site_info */
h4 {
text-decoration: none;
text-align: right;
color: #999999;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background: #fff;
}

/* titre #nav_sub */
h5 {
text-decoration: none;
color: #CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #fff;
}

/* titre #nav_main */
h6 {
text-decoration: none;
text-align: center;
color: #999999;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8px;
background: #fff;
}

/* citations */
h7 {
text-decoration: none;
text-align: left;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic;
font-size:10px;
background: #fff; 
}

a:link {
color:#666666;
text-decoration:none;
}

a:visited {
color: #666666;
text-decoration:none;
}

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

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


/* Conteneur de page:<div id="container">conteneur de page</div>
---------------------------------------------------------------------*/
#container {
position:relative;
width: 980px;
margin:10 px;
text-align: left; }


/* Signe distinctif (dont titre de premier niveau):<div id="branding">titre de premier niveau</div> 
---------------------------------------------------------------------*/
#branding  {
width: 100%;
margin: 0px;
margin: 0px;
border: 0px;
height: auto;
}


/* Navigation :<div id="nav">navigation</div> 
---------------------------------------------------------------------*/
#logo {
position:relative;
width: 23%;
margin-top:10px;
margin-right:0px;
margin-bottom:Opx;
margin-left:35px;
border: 0px;
padding: 0px;
height: auto;
background-image: url(file:///C|/Documents and Settings/User/Bureau/Site080907/images/logo.jpg width="221" height="42");
background-repeat: no-repeat;
}



/* Navigation principale:<div id="nav_main">navigation principale</div> 
---------------------------------------------------------------------*/
#nav_main {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
border: 0px;
padding: 0px;
width: 60%;
height: auto;
}

ul#menu1 {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu1 li {
float: left;
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background: #fff; }

ul#menu1 a {
float: left;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
border: 1px solid white;
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background: #fff; }

ul#menu1 a:hover {
background: #fff;
color: #33CCCC;
border: 1px solid white; }

/* Navigation secondaire:<div id="nav_sub">navigation secondaire</div>
---------------------------------------------------------------------*/
#nav_sub {
position: absolute;
width: 195px;
top: 20px;
margin: 0px;
left: 279px;
border: 0px;
padding: 0px;
height: auto; }


ul#menu2 {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu2 li {
float: left;
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #fff; }

ul#menu2 a {
float: left;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
border: 1px solid white;
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #fff; }

ul#menu2 a:hover {
background: #fff;
color: #33CCCC;
border: 1px solid white; }

/* Navigation supplémentaire:<div id="nav_supp">navigation supplémentaire</div> 
---------------------------------------------------------------------*/
#nav_supp {
}



/* Recherche:<div id="search_input">recherche</div>
---------------------------------------------------------------------*/



/* Contenu:<div id="content">contenu</div>
---------------------------------------------------------------------*/
#content {
margin: 0px;
width: 100%;
height: 840px;
}


/* Contenu principal:<div id="content_main">contenu principal</div>
---------------------------------------------------------------------*/
#content_main {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 5px;
border: 1px solid #CCCCCC;
padding: 10px;
height: 400px;
width: 500px;
}

#content_main2 {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 0px;
border: 1px solid white;
padding: 0px;
height: 10px;
width: 520px;
 }

#content_main3 {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 0px;
border: 1px solid white;
padding: 0px;
height: 10px;
width: 520px;
 }

#content_expo {
float: left;
margin-left:10px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 20px;
border: 0px solid #CCCCCC;
padding: 5px;
height: 10px;
width: 510px;
}

#content_expodev {
float: left;
margin-left:20px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 5px;
border: 0px solid #CCCCCC;
padding: 5px;
height: 65px;
width: 510px;
}

#content_boiteexpo {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 0px;
border: 1px solid #CCCCCC;
padding: 10px;
height: 370px;
width: 500px;
}


/* Contenus additionnels:<div id="content_sub">contenus additionnels</div> 
---------------------------------------------------------------------*/
#content_sub {
float: left;
margin-left:40px;
}

/* Contenu secondaire_boite 1:<div id="content_sub1"boite1</div>
---------------------------------------------------------------------*/
#content_sub_1 {
margin: 5px 5px 0px 5px;
border: 1px solid #CCCCCC;
padding: 10px;
height: 410px;
width: 250px;
}

#boite1 {
	position: relative;
	width: 33%;
	float: left;
		}

#boite2 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite3 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite4 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite5 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite6 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite7 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite8 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite9 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite10 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite11 {
	position: relative;
	width: 33%;

	float: right;
	}
	
#boite12 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite13 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite14 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite15 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite16 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite17 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite18 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite19 {
	position: relative;
	width: 33%;
	float: left;
	}
	
#boite20 {
	position: relative;
	width: 33%;
	float: right;
	}
	
#boite21 {
	position: relative;
	width: 33%;
	float: right;
	}

#content_sub_2 {
margin: 5px 5px 0px 5px;
border: 1px solid white;
padding: 10px;
height: 1100px;
width: 250px;
}

#content_texte {
float: left;
margin-left:10px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
border: 0px solid #CCCCCC;
padding: 5px;
height: 10px;
width: 510px;
}

#content_textedev {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 0px;
border: 0px solid #CCCCCC;
padding: 5px;
height: 520px;
width: 515px;
}

#content_textedev2 {
float: left;
margin-left:10px;
margin-bottom: 0px;
margin-right: 10px;
margin-top: 0px;
border: 0px solid #CCCCCC;
padding: 5px;
height: 30px;
width: 510px;
}
/* Ours du site:<div id="site_info">ours du site</div>
---------------------------------------------------------------------*/
#site_info {
float: right;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: 0px;
padding: 0px;
width: 40%;
height: auto;
}

#menu3 {
float: left;
width: 100%;
background-color: #FFFFFF; }

ul#menu3 {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu3 li {
float: left; }

ul#menu3 a {
float: left;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
border: 1px solid white;
text-decoration: none;
color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background: #fff; }

ul#menu3 a:hover {
background: #fff;
color: #33CCCC;
border: 1px solid white; }





/* coordonnées
<address class="vcard">
<a class="url fn n href="http://www.aureliafrey.com">
<span class="given-name">Aurélia</span>
<Span class="family-name">Frey</span>
<span class="locality">Paris</span>
<span class="country">France</span>
</a>
<span class="title">Photographe</span>
<a class="org" href="http://www.aureliafrey.com>Site d'Aurélia Frey</a>
<a class="e-mail" mailto="aureliafrey@hotmail.com>Contactez-moi</a>
</adress> 
--------------------------------------------------------------------*/

