/* Style commun a toutes les pages et aux navigateurs avances ----------------------

/* Site de "Cosima Lukashevich" : lukashevich.com

Version : 1.0
Auteur : Didier Fournet
E-mail : didier.fournet@orange.fr
Site : http://www.agencedif.fr/

--------------------------------------------------------------------------------- */

/* 								��������������������							  */

/* Bases communes
--------------------------------------------------------------------------------- */

body
{
	font-family: "Arial Narrow", "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 62.5%;
	/* ram�ne la base des font � 10px (en g�n�ral), permet de travailler ensuite avec les em dans un rapport simple (ex : 12px = 1.2em) */
	behavior: url(scripts/csshover.htc);
	/* solutionne le probleme :hover des IE */
	background: #D7D5B0 url(../images/fond.jpg) repeat-x left top;
}

*
{
	margin: 0;
	padding: 0;
	/* neutralise les padding et margin de tous les elements */
}

img, fieldset
{
	border: 0;
	/* Supprime les border autour des images et des formulaires */
}

h1, h2, h3, h4, h5, h6
{
	font-size: 100%;
	/* Normalise la taille de police des titres */
}

ul, ol, dl
{
	list-style: none;
	/* Supprime le formatage des listes */
}

address, caption, cite, code, dfn, em, strong, th, var
{
	font-style: normal;
	font-weight: normal;
	/* Normalise les police de certains elements */
}

table
{
	border-collapse: collapse;
	border-spacing: 0;
	/* Normalise les tableaux */
}

caption, th
{
	text-align: left;
	/* Normalise la police des tableaux */
}

q:before, q:after
{
	content: '';
	/* Supprime les guillemets de "q" */
}

.engras { font-weight: bold; }
.enitalique { font-style: italic; }
.souligne { text-decoration: underline; }
.chassefixe { font-family: "Courier New", monospace; }
.empattement { font-family: Georgia, Palatino, "Times New Roman", serif; }
.capitale { font-variant: small-caps; }
.majuscule { text-transform: uppercase; }
.taille8 { font-size: 0.8em; }
.taille10 { font-size: 1em; }
.taille12 { font-size: 1.2em; }
.taille14 { font-size: 1.4em; }
.taille15 { font-size: 1.5em; }
.taille18 { font-size: 1.8em; }
.taille20 { font-size: 2em; }
.taille40 { font-size: 4em; }

/* Fin de Bases communes -------------------------------------------------------- */

/* Avertissement javascript
--------------------------------------------------------------------------------- */

p.pasdejs
{
	width: 1000px;
	margin-bottom: 30px;
	font-family: sans-serif;
	font-size: small;
	line-height: 150%;
	color: white;
	text-align: center;
	letter-spacing: 1px;
}

/* Fin de Avertissement ------------------------------------------------------------- */

/* Conteneur
--------------------------------------------------------------------------------- */

div#conteneur
{
	width: 1000px;
	height: 595px;
	margin: 10px 0 0 -500px;
	background: transparent url(../images/titre.jpg) no-repeat 45px 5px;
	position: absolute;
	top: 0;
	left: 50%;
}

div#conteneur h1 { text-indent: -10000px; }

div#conteneur p#provisoire
{
	width: 150px;
	font-size: 1.4em;
	letter-spacing: 1px;
	color: #696969;
	position: absolute;
	top: 420px;
	left: 830px;
	z-index: 10;
}

div#conteneur img#grandeimage
{
	position: absolute;
	top: 80px;
	left: 190px;
}

div#conteneur p#legende
{
	width: 150px;
	font-size: 1.4em;
	letter-spacing: 1px;
	color: #696969;
	background-color: #D7D5B0;
	position: absolute;
	top: 420px;
	left: 830px;
	z-index: 20;
}

div#conteneur p.technique
{
	width: 150px;
	font-size: 1.4em;
	color: #696969;
	position: absolute;
	top: 200px;
	left: 830px;
}

/* Fin de Conteneur ----------------------------------------------------------------- */

/* Navigation
--------------------------------------------------------------------------------- */

div#navigation
{
	text-align: right;
	position: absolute;
	top: 230px;
	right: 850px;
	z-index: 50;
}

div#navigation li
{
	text-transform: uppercase;
	margin-bottom: 10px;
}

div#navigation ul#subGallery li { margin-bottom: 5px; }

div#navigation a
{
	font-size: 1.5em;
	color: #A09B46;
	text-decoration: none;
	letter-spacing: 0.1em;
}

div#navigation a.encours, div#navigation a:hover
{
	font-size: 1.8em;
	color: #696969;
}

div#navigation ul#subGallery a { font-size: 1em; }

div#navigation ul#subGallery a.encours,div#navigation ul#subGallery a:hover
{
	font-size: 1.2em;
	color: #696969;
}

/* Fin de Navigation ------------------------------------------------------------- */

/* Vignettes
--------------------------------------------------------------------------------- */

ul#vignettes
{
	width: 620px;
	height: 20px;
	margin-top: 5px;
	margin-left: -310px;
	text-align: center;
	position: absolute;
	top: 570px;
	left: 50%;
}

ul#vignettes li
{
	margin-right: 25px;
	display: inline;
}

ul#vignettes li#dernier { margin-right: 0; }
ul#vignettes img { visibility: hidden; }

ul#vignettes a
{
	width: 10px;
	height: 10px;
	background: transparent url(../images/puce.gif) no-repeat left top;
}

ul#vignettes a:hover { background: transparent url(../images/puce.gif) no-repeat right top; }

/* Fin de Vignettes ----------------------------------------------------------- */

/* Pour memoire
------------------------------------------------------------------------------------
� Surfaces utiles en fonction de la r�solution �cran (IE6/Win) :
--> 620 x 309 pour 640 x 480
--> 780 x 429 pour 800 x 600
--> 1004 x 597 pour 1024 x 768
--> 1132 x 793 pour 1152 x 864
--> 1260 x 853 pour 1280 x 1024
--> 1580 x 1129 pour 1600 x 1200
� Familles de polices
--> Arial, "Arial Black", "Arial Narrow", Impact, Tahoma, "Trebuchet MS", Verdana, sans-serif
--> Georgia, Palatino, "Times New Roman", serif
--> "Courier New", monospace
--> "Comic Sans MS", cursive
--> Webdings, fantasy
� Les div ne doivent pas rester vides.
� La position relative preserve l'espace initial de l'element.
� La position absolute supprime l'espace initial de l'element.
� Un element en float: left (right); sera pouss� aussi loin que possible � la gauche (droite) de son parent.
� La fusion des marges verticales n'a lieu qu en presence de boites de type block dans le flux normal du document. Les marges verticales des boites de type inline, flottantes ou positionnees de maniere absolue ne fusionnent jamais.
--> La solution r�side dans l'application d'un border transparent ou d'un padding de 1 px. 
� Les padding, border et margin verticaux n'ont aucun effet sur la hauteur d'une bo�te inline.
� Un texte ajout� dans un �l�ment de niveau block sans �tre d�fini dans un paragraphe est consid�r� comme une bo�te block anonyme.
� Une structure est dite liquide (ou fluide) si elle s'adapte aux dimensions de la fenetre du navigateur et � ses variations. Afin d'obtenir cet effet, on utilise des dimensions exprimees en %. Il est alors bon de specifier une min-width et une max-width.
� Une structure est dite elastique si elle s'adapte aux variations de dimensionnement du texte. Afin dobtenir cet effet, on utilise des dimensions exprim�es en em. Il est alors bon de specifier une min-width et une max-width, et de choisir une base d'�chelle pour font � 62.5% (1em est alors sensiblement �gal � 10px).
� Une structure hybride utilisera la base d'�chelle de font � 62.5%, les dimensions exprim�es en em, des min-width en px et des max-width en % (IE/Win sera laiss� de c�t� pour ces derni�res).
--------------------------------------------------------------------------------- */