/********************************
Feuille de style Frederic JULLIEN
*********************************/

/* Modification des balises HTML */
body { 
	font-family : sans-serif;
	margin: 12px;
	color: #f1f1f1;
	background-color: #333333;	
}

img {
	border : 0px;
}

a {
	text-decoration: none;
	text-decoration: none;
	color: black;
	color: #222222;	
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/********************
Les Zones principales 
*********************/

/* Entete de page */
#header {
	width : 100%;
	clear : both;
	background-color : #cccccc;
}

/* Zone message */
#message {
	width: 100%;
	clear : both;	
	text-align : center;
	margin-top : 5px;
	background-color : #fad062;
	color : #ff0000;	
}

/* Pied de page */
#footer {
	width : 100%;
	clear : both;
	background-color : #cccccc;
}

/* Bloc central */
#main {
	clear : both;
	width: 75%;
	margin: auto;
	padding-top : 30px;
	padding-bottom : 30px;
}

/* Barre de menu */
#menu {
	z-index:100;
	width: 100%;
}
#menu dl {
	float: left;
	width: 170px;
	margin: 2px 2px 2px 2px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	background-color: #cccccc;
}
#menu dd {
	position: absolute;
	width: 170px;
	margin: 0 1px;
	border: 1px solid gray;
}
#menu li {
	text-align: center;
	background-color: #ffffff;	
}
#menu li a, #menu dt a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	color: #000000;
}

#menu li a:hover, #menu dt a:hover {
	background-color: #eeeeee;
}


/* Bouton de signature*/
#signInOut {
	float : right;
	padding-top : 2px;
	padding-right : 2px;
}

/******************
index.php
*******************/
#intro {
	text-align: center;
}

/******************
gallery.php
*******************/

#vignettes  {
	clear: both;
	padding: 6px;
	text-align: center;
}

#vignettes a {
	margin: 6px;
	display: block;
	float: left;
	height : 200px;
	border: 2px solid #727272;
	-moz-border-radius: 10px;
	color: #727279;
	background-color: #282828;	
}

#vignettes a:hover {
  	border: 2px solid #c49200;
	margin: 6px;
	background-color: #282828;
}

img.vignettes { 
	padding: 4px;
	margin: 24px 3px;
}

span.comm {
	display : none;
	position : absolute;
	margin: 6px;
   padding : 10px;
	width : 250px;
  	border : 2px solid #c49200;
	-moz-border-radius : 10px;
	color: #f1f1f1;
	background-color : #282828;
}

span.comm img { 
	height : 1em;
}

/******************
photo.php
*******************/

/* Barre au dessus de la photo */
#barrePhoto {
	width : 800px;
	margin-bottom : 2px;
	-moz-border-radius-topleft : 10px;
	-moz-border-radius-topright : 10px;
	background-color : #cccccc;
}

#barrePhoto a {
	padding-left : 5px;
   display : inline-block;
}

#navigation {
	width : 75%;
	padding-left : 5px;
	float : left;
}

#spanDiapo {
	display : inline;
	margin-left : 20px;
}

#spanDiapo a {
	display : inline-block;
	padding : 0px;
}

#diapoCurseur {
	display : none;
	position : absolute;
	margin : 20px;
}

#diapoCurseur span {
   padding : 5px;
  	border : 2px solid #cccccc;
	-moz-border-radius : 10px;
}

#liens {
	margin : auto;
	width: 90%;
}

span.vign {
	display : none;
	position : absolute;
	margin: 6px;
   padding : 5px;
  	border : 2px solid #c49200;
	-moz-border-radius : 10px;
}

/* Commentaire en dessous de la photo */
#photoText {
	width : 788px;
	margin-top : 2px;
	margin-bottom : 2px;
	padding : 5px;
	border : solid;
	border-width : 1px;
	border-color : #cccccc;
}

/* Barre en dessous de la photo */
#photoOptions {
	width : 800px;
	margin-top : 2px;
	-moz-border-radius-bottomleft : 10px;
	-moz-border-radius-bottomright : 10px;
	background-color : #cccccc;
}

form.codeCouleur {
	width : 35%;
}

form.codeCouleur input {
	width : 5em;
}