/* http://www.sandrinevenet.com/
based on a metarmorphozis design
*/

/* ------------------------- GENERAL ------------------------------------------ */
/* pour tout le site*/
* 
{
	margin: 0px;
	padding: 0px;
}

/* les liens sont en bleu */
a:link {
	color: #1555B5;
}

/* quand on passe sur un lien pas de soulignement pas mais passe en blanc */
a:hover {
	text-decoration: none;
	color: #FF0000;
}

/* unlien visité passe en bleu */
a:visited {
	color: #1555B5;
}

/* le corps du site est blanc avec une image a l'arrière qui se repète horizontalement 
le texte s'ecrit par defaut en 13px et en gris foncé */
body {
	background: #ffffff url(images/back_all.gif) repeat-x;
	font: 14px Trebuchet, Arial, courrier, sans-serif;
	text-align: justify;
	color: #333333;
	margin-top: 60px;
}

/* la zone dans le bleu fait 796 de large comme la photo, tour blanc pas de marge externe */
#back
{
	width: 796px;
	background: #ffffff;
	margin: 0 auto;
}

/* La zone header qi contient la grande photo fait 448 de haut avec le texte aligné a gauche */
#header {
	height: 448px;
	text-align: left;		
}

/* La zone header small qui contient la petite photo fait 223 de haut avec le texte aligné a gauche */
#headersmall {
	height: 200px;
	text-align: left;
}

/* ------------------------- MENU Horizontal ---------------------------------- */

/* le bandeau menu fait la meme largeur que le site, et 44 de haut, avec une marge interne de 50 et qui est une image de fond */
#menu
{
	width: 740px;
	height: 44px;
	padding-left: 50px;
	background: url(images/menu.gif) no-repeat;
}

/* le menu n'a pas de bullets ou numero */
#menu ul {
	list-style: none;	
}

/* les differentes categories de la liste sont plcés horizontalemet dans le menu */
#menu li {
	display: inline; 
}

/* largeur de chaque lien block de 200 alignés a gauche, le texte a l'interieur est centré, en gras et blanc 
avec une marge par rapport a l'interieur du block de 15 */
#menu a {
	float: left;
	width: 200px;
	height: 29px;
  display: block;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	padding-top: 15px;
	font-size: 13px;
}

/* qaund on passe sur le lien il ne change pas sauf qu'il se souligne en blanc et il s'affiche une ombre dessous en bleu foncé qui se repete */
#menu a:hover {
	width: 200px;
  height: 29px;
	color: #ffffff;
	text-decoration: underline;
	background: url(images/menu_r.gif) repeat-x;
}

/* ------------------- Menu gauche -------------------------------------------- */

/* la classe titre dans la liste est en bordeau, 14 et gras */
li.titre {
	font: 14px Calibri, Arial, courrier, sans-serif;
	color: #b22222;
	font-weight: bold;
}

/* la classe vendu dans la liste est en bordeau, et barre */
li.vendu {
	color: #b22222;
	text-decoration: line-through;
}

/* -------------------- LOGO -------------------------------------------------- */

/* le logo est dans la zone d'image, le text est aligné a gauche mais avec un retrait de 350, ecrit en rouge et fait 13 px */
#logo {
	background: url(images/header.jpg) no-repeat;
	width: 796px;
	height: 375px;
	margin: 0px;
	text-align: left;
	padding-top: 25px;
	padding-left: 30px;
	color: #b22222;
}

#logo h1 {
	text-transform: uppercase;
	font-size: 18px;
}

#logo h2 {
	padding-top: 5px;
	font-size: 16px;
}

#logo h3 {
	padding-top: 5px;
	font-size: 14px;
}

/* pas de changement */
#logo a {
	text-decoration: none;
	color: #b22222;
}


/* -------------------- LOGO SMALL -------------------------------------------- */

/* idem que logo normal mais plus petite photo en hauteur */
#logosmall {
	background: url(images/headersmall.jpg) no-repeat;
	width: 796px;
	height: 130px;
	margin: 0px;
	text-align: left;
	padding-top: 20px;
	padding-left: 30px;
	color: #b22222;
}

#logosmall h1 {
	text-transform: uppercase;
	font-size: 18px;
}

#logosmall h2 {
	padding-top: 5px;
	font-size: 16px;
}

#logosmall h3 {
	padding-top: 5px;
	font-size: 14px;
}

/* pas de changement */
#logosmall a {
	text-decoration: none;
	color: #b22222;
}


/* ------------------------- MAIN --------------------------------------------- */

#main
{
	padding: 10px;
}

/* ------------------ MIDDLE = zone de gauche plus large ---------------------- */

#middle
{
	width: 350px;
}

#middle h3
{
 	width: 330px;
 	height: 30px;
 	font-size: 14px;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 14px;
	text-transform: uppercase;
	color: #ffffff;
	background: url(images/title_large.gif) repeat-x
}

#middle ul {
	list-style: none;

}

#middle li
{
 	background: url(images/title_large_back.gif) no-repeat top;
	padding-top: 10px;
}

#middle li ul {
	border: 0px;
	margin-left: 20px;
	margin-bottom: 10px;
}

#middle li li {
	padding: 4px 20px;
  	background: url(images/small.gif) no-repeat left;
	border: 0px;
}

#middle a {
	color: #1555B5;
	text-decoration: none;
}
#middle a:visited {
	color: #1555B5;
}

#middle p
{
 	padding: 10px;
}

/* --------------------------- LEFT ------------------------------------------- */

#left
{
	width: 236px;
}

#left h3
{
 	width: 216px;
 	height: 30px;
 	font-size: 14px;
	font-weight: bold;
	padding-left: 20px;
	padding-top: 14px;
	text-transform: uppercase;
	color: #ffffff;
	background: url(images/title.gif) repeat-x
}

#left ul {
	list-style: none;

}

#left li
{
 	background: url(images/title_back.gif) no-repeat top;
	padding-top: 10px;
}

#left li ul {
	border: 0px;
	margin-left: 20px;
	margin-bottom: 10px;
}

#left li li {
	padding: 4px 20px;
  	background: url(images/small.gif) no-repeat left;
	border: 0px;
}

#left a {
	color: #1555B5;
	text-decoration: none;
}
#left a:visited {
	color: #1555B5;
}

#left p
{
 	padding: 10px;
}

/* --------------------------- RIGHT ------------------------------------------- */

#right
{
 	float: right;
 	width: 500px;
 	padding-right: 10px;
}

#right h4
{
	margin: 0;
	padding: 0px;
	font-size: 14px;
	color: #1555B5;
}

#right a
{
 	color: #1555B5;
 	text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right ul, #right ol
{
	margin-left: 30px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #1555B5;
}

#right h5 /*vendu*/
{
	margin: 0;
	padding: 0;
	padding-top: 10px;
	font-size: 20px;
	color: #b22222;
	text-decoration: line-through
}

#right_small
{
 	float: right;
 	width: 386px;
 	padding-right: 10px;
}
/* ------------------------------ FOOTER -------------------------------------- */

#footer {
	height: 50px;
	clear: both;
	padding-top: 20px;
	border-top: 5px solid #1555B5;
	background: url(images/footer.gif) repeat-x bottom;
}

#footer p {
	margin: 0;
	font-size: 12px;
	text-align: center;
	color: #666666;
}

#footer a {
	color: #1555B5;
}

/* ---------------------------- IMAGES ---------------------------------------- */

#right img
{
	background: #fff;
	color: inherit;
	vertical-align: middle;
	width: 400px;
	height: 300px;
	margin: 2px;
	padding: 2px;
	/* border-color: #1555B5;
	border-style: solid;
	border-width: 1px; */
}

/* --------------------------- Picachoose ------------------------------------- */

/* These hieghts and widths should be edited to your images */	
ul#pikame{
	padding-left:0;
	width:450px;
	margin:0 auto;}
.pika_main{
	width:500px;
	padding-right:20px;
	margin:0 auto;}
#pikame li{
	margin:5px;
	float: left;
	border:2px solid #1555B5;}

/* thats all you NEED to edit. But continue if you'd like. */
ul#pikame li img{position:relative;cursor:pointer;}
.pika_main img{border:5px solid #1555B5;}
.pika_main{position: relative; margin:0 auto;}
.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
.pika_play{position:absolute;top:10px;right:20px;z-index:1;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
.pika_play img{border:none !important;}
.pika_caption{width:100%;height:30px;text-align:center;}
.pika_navigation a{font-size: 12px;color:white;text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* --------------------------- Lien Email ------------------------------------- */

/* lien vers email cannes-immo pour famille*/	

.email{
text-align:right
}