/*************************************************
 * CSS REFERENCE
 *
 * JFLAD V5
 * Date: 02/08/2007
 *
 * Copyright:
 *   Lavault Julien
 *   JFLAD Studio
 *
 * Description:
 *   - Styles de la rubrique référence
 *
 **************************************************/



/****************************
 * Contenu texte gauche 
 ******/
 
div#contenu_realisation {
	display:block;
	float:left;
	width:319px;
	background-repeat: no-repeat;
	background-position: 50px bottom;
	background-image:url(../wipic/upload/reference/pick_labyrinth_fond.jpg);
}

/* Première image */
img.tips_img1 {
	float:left;
	margin:10px 0 10px 10px;
	border:#333333 4px solid;
}

/* Titre contenu */
div#contenu_realisation h4 {
	clear:both;
	display:block;
	width:295px;
	height:18px;
	line-height:18px;
	margin:25px 0 5px 0;
	padding:0 10px;
	color:#414141;
	text-align:right;
	font-size:16px;
	font-weight:bold;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-family:"trebuchet MS";
}
div#contenu_realisation p {
	padding:0 15px 0 20px;
}

h3#date_realisation {
	display:block;
	float:right;
	width:300px;
	height:20px;
	line-height:20px;
	margin:5px 0 0 0;
	padding:0 5px 0 0;
	text-align:right;
	color:#666666;
	font-size:16px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
h1#titre_realisation{
	display:block;
	float:right;
	width:300px;
	height:20px;
	line-height:20px;
	margin:0;
	padding:0 5px 0 0;
	font-size:15px;
	color:#FFFFFF;
	text-align:right;
	font-size:22px;
	font-weight:bold;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-family:"trebuchet MS";
	background-image:none;
}
h2#url_realisation{
	display:block;
	float:right;
	width:300px;
	height:16px;
	line-height:16px;
	margin:0;
	padding:0 5px 0 0;
	text-align:right;
	color:#FFFFFF;
	font-size:13px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-family:"trebuchet MS";
}



/****************************
 * Contenu texte droite 
 ******/
 
div#contenu_realisation_droite {
	float:right;
	width:228px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
}
div#contenu_realisation_droite img { border:#333333 4px solid; }

div#contenu_realisation_droite h3 {
	display:block;
	width:200px;
	height:18px;
	line-height:18px;
	margin:8px 0 10px 0;
	padding:0 10px;
	color:#666666;
	text-align:left;
	font-size:15px;
	font-weight:bold;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-family:"trebuchet MS";
}
div#contenu_realisation_droite p { padding:0 15px 0 20px; }
div#contenu_realisation_droite ul {
	margin:0;
	padding:0;
}
div#contenu_realisation_droite ul li { margin:0 0 0 10px; }
div#contenu_realisation_droite ul li a { color:#FFFFFF; }
div#contenu_realisation_droite ul li a:hover { color:#999999; }

li.design, li.developpement, li.gestion_contenu, li.webmarketing { font-size: 12px; }
li.design { background:url(../images/epingle_noir.jpg) no-repeat center left; }
li.developpement { background:url(../images/epingle_bleu.jpg) no-repeat center left; }
li.gestion_contenu { background:url(../images/epingle_gris.jpg) no-repeat center left; }
li.webmarketing { background:url(../images/epingle_blanc.jpg) no-repeat center left; }


/****************************
 * Contenu du div#titre
 ******/
p.design { background:url(../images/epingle_noir.jpg) no-repeat center right; }
p.developpement { background:url(../images/epingle_bleu.jpg) no-repeat center right; }
p.gestion_contenu { background:url(../images/epingle_gris.jpg) no-repeat center right; }
p.webmarketing { background:url(../images/epingle_blanc.jpg) no-repeat center right; }
p.design a, p.developpement a, p.gestion_contenu a, p.webmarketing a { color:#FFFFFF; }



/*******************************
 ** Styles type réalisations
 *******************************/
 
/*
	1234	ok
	
	1034	ok
	1230	ok	
	1204	ok
	0234	ok
	
	0034	ok
	0204
	1004
	0230
	1030
	1200
	
	0004	ok
	0030
	0200
	1000
*/

ul#sous_menu li a.e1234 {							
	background-image:url(../images/epingles/1234a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1234:hover{
	background-image:url(../images/epingles/1234.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////////////////////////////////*/
ul#sous_menu li a.e1034 {							
	background-image:url(../images/epingles/1034a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1034:hover{
	background-image:url(../images/epingles/1034.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1230 {							
	background-image:url(../images/epingles/1230a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1230:hover{
	background-image:url(../images/epingles/1230.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1204 {							
	background-image:url(../images/epingles/1204a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1204:hover{
	background-image:url(../images/epingles/1204.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e0234 {							
	background-image:url(../images/epingles/0234a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0234:hover{
	background-image:url(../images/epingles/0234.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////////////////////////////////*/
ul#sous_menu li a.e0034 {							
	background-image:url(../images/epingles/0034a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0034:hover{
	background-image:url(../images/epingles/0034.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e0204 {							
	background-image:url(../images/epingles/0204a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0204:hover{
	background-image:url(../images/epingles/0204.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1004 {							
	background-image:url(../images/epingles/1004a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1004:hover{
	background-image:url(../images/epingles/1004.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e0230 {							
	background-image:url(../images/epingles/0230a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0230:hover{
	background-image:url(../images/epingles/0230.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1030 {							
	background-image:url(../images/epingles/1030a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1030:hover{
	background-image:url(../images/epingles/1030.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1200 {							
	background-image:url(../images/epingles/1200a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1200:hover{
	background-image:url(../images/epingles/1200.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////////////////////////////////*/
ul#sous_menu li a.e0004 {							
	background-image:url(../images/epingles/0004a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0004:hover{
	background-image:url(../images/epingles/0004.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e0030 {							
	background-image:url(../images/epingles/0030a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0030:hover{
	background-image:url(../images/epingles/0030.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e0200 {							
	background-image:url(../images/epingles/0200a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e0200:hover{
	background-image:url(../images/epingles/0200.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/*//////////////////////////////////*/
ul#sous_menu li a.e1000 {							
	background-image:url(../images/epingles/1000a.gif);
	background-repeat:no-repeat;
	background-position:right;
}
ul#sous_menu li a.e1000:hover{
	background-image:url(../images/epingles/1000.gif);
	background-repeat:no-repeat;
	background-position:right;
}