@charset "UTF-8";


/* RESET */


/* http://meyerweb.com/eric/tools/css/reset/  -----*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent; }

body { line-height : 1; }

ol, ul { list-style : none; }

:focus { outline : 0; }

ins { text-decoration : none; }

del { text-decoration : line-through; }

table { border-collapse : collapse; border-spacing : 0; }

/* Modified from: http://code.google.com/p/blueprintcss/ ----- */

body { font : 75%/1.5 "Lucida Grande", Helvetica, "Lucida Sans Unicode", Arial, Verdana, sans-serif;color: #444;}

h1, h2, h3, h4, h5, h6 { font-family : "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight : normal;color: #444;letter-spacing:.1em; }

h1 { font-size : 3em; line-height : 1; margin-bottom : 0.5em; }

h2 { font-size : 2em; margin-bottom : .75em; }

h3 { font-size : 1.5em; line-height : 1; margin-bottom : 1em; }

h4 { font-size : 1.2em; line-height : 1.25; margin-bottom : 1.25em; }

h5 { font-size : 1em; font-weight: bold; margin-bottom : 1.5em; }

h6 { font-size : 1em; font-weight : bold; }

p { margin : 0 0 1.5em; }

ul, ol { margin : 0 1.5em 1.5em 0; }

ul { list-style-type : none; }

ol { list-style-type : decimal; }

dl { margin : 0 0 1.5em 0; }

dt { font-weight : bold; }

dd { margin-left : 1.5em;}

abbr, acronym { border-bottom : 1px dotted #666; }

address { margin-top : 1.5em; font-style : normal; }

del { color : #666; }

blockquote { margin : 1.5em 0; color : #fff; }

strong { font-weight : bold; }

dfn { font-weight : bold; }

pre, code { margin : 1.5em 0; white-space : pre; }

pre, code, tt { font : 11px 'andale mono', 'monotype.com', 'lucida console', monospace; line-height : 1.5; } 

tt { display : block; margin : 1.5em 0; line-height : 1.5; }

table { margin-bottom : 1.4em; }

th { border-bottom : 2px solid #ccc; font-weight : bold; }

td { border-bottom : 1px solid #ddd; }

th,td { padding : 4px 10px 4px 0; }

tfoot { font-style : italic; }

caption { background : #ffc; }


/* DEBUT ----------------------------------------- */

.categoryitems {
	display: none;
}

html,
body {
	background : transparent;
}

/* STRUCTURE -------------------------------------*/


#container {
	width: 960px;
	margin: 0 auto;
	background : #fff;
}

.wrapper {
	float: left;
	width: 100%;
}

#contentcolumn {
	position:relative;
	margin: 0 40px 80px 250px; /*Set left margin to LeftColumnWidth*/
	height: 450px;
}

#leftcolumn {
	float: left;
	width: 220px; /*Width of left column*/
	margin-left: -960px; /*Set left margin to -(MainContainerWidth)*/
}

#texte {
	margin: 0 0 0 20px;
}

a.lien {
	text-decoration:underline;
	color: #444;
}

a:hover.lien {
	text-decoration: none;
	color:#0F7ECD;
}

em {
	font-style: normal;
	font-weight:bold;
}

/* MENU LOGIN --------------------------------------- */

.login {
	margin : 0 auto;
	width : 100%;
	font: normal 11px Arial;
	width :960px;
	background : transparent;
}

ul#navbar {
	list-style : none;
	display:inline;
	margin:0;
	padding:0;
}

#first {
	border-left : 1px solid #ddd;
	margin: 0 0 0 20px;
}
#navbar li{
    float:left;
    padding:0px;

		}

#navbar li a {
    display:block;
	padding : 8px 12px 5px 12px;
	color : #666;
	border-right : 1px solid #ddd;
	background : transparent;
	text-decoration: none;
	text-align:center;
	float : left;
}

#navbar li.current a,
#navbar li.current a:hover,
#navbar li.current a:focus,
#navbar li a:hover,
#navbar li a:focus {
	color : #0F7ECD;
	background-color : #f0f0f0;
}


.login a img{
	font: normal 11px Arial;
	position : relative;
	display: block;
	top : -1px;
	left : -10px;
	float : left;
	margin: 0 0 0 10px;
}

#test{
	position : relative;
	display: block;
	top : 0px;
	left : 20px;
}
/* BRANDING -------------------------------------------------- */

.branding {
	position:relative;
	margin: 10px 0 0 20px;
}

h1 {
	position : absolute;
	display: block;
	top : 10px;
	left : 0px;
	width : 60px;
	height : 68px;
	background :url(/img/logo.gif) no-repeat;
	text-indent:-9999px;
}

h2#titre,
h2#titre2 {
	text-align:right;
}

h2#titre {
	margin:0 40px 0 100px;
	font-size:20px;
	font-weight: 900;
	letter-spacing:12px;
	border-bottom: 1px solid #000;
	color: #000;
}

h2#titre2 {
	font-weight: 100;
	margin:0 40px 50px 0;
	font-size:16px;
	letter-spacing:12px;
	color: #000;
}

#contentcolumn h3 {
	font-weight: 900;
}

/* COLONE GAUCHE MENU ------------------------------------ */

a {
	color: #000;
	text-decoration: none;
}

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

.menu {
	margin:114px 0 20px 20px;
	width: 190px; /*width of the menu*/
	font: bold 14px Arial;
	color: #000;
	padding: 0 0 8px 0;
	
}

.menu .current {
	border-bottom: 4px solid #000;
}


.menu ul {
    border-top: 1px solid #000;
}

.menu ul li a {
	color: #000;
	display: block;
	padding: 8px 0 8px 0;
	text-decoration: none;
	border-bottom: 1px solid #000;
}

.menu ul li a:hover { /*hover state CSS*/
	color: #888;
}



/* recherche par couleurs */
ul.color{
	height: 80px;

}
ul.color li{
	float:left;
}
p.searchImageText{
	color:#ffffff;
	text-align:center;
	font: bold 12px Arial;
	position:relative;
	width:150px;
	left: 10px;
	top:-35px;
	
}
ul.code{
	height: 400px;
}
ul.code li{
	float:left;
	height: 170px;
	width: 170px;
}
.color img , .code img{
	padding : 4px;
	border: 1px solid #fff;
	vertical-align: middle;
	
}

#contentcolumn .color a:hover img , .code a:hover img {
	border: 1px solid #ccc;
}

/* COLONE GAUCHE BLOC-TEXTE ------------------------------------ */

#bloctexte {
	width: 170px; /*width of the menu*/
	margin: 0 0 40px 20px;
	padding:8px 0 8px 0;
	background-color:#eee;
}

#bloctexte h3 {
	padding:8px 0 0 8px;
	color:#333;
}

#bloctexte h4 {
	padding:8px 0 0 8px;
	color:#666;
	font-weight:bold;
}

#bloctexte h4,
 #bloctexte p {
	margin:8px 0 0 0;
	padding:0 8px 0 8px;
	color:#333;
}

/* FOOTER ------------------------------------------ */

#footer {
	width: 100%;
	background: #eee;
	clear: both;
}

#info_footer {
	width: 960px;
	margin: 0 auto;
	padding:2px 0;
}

div#notices {
	padding-top: 20px;
	clear: both;
}

#info_footer p {
	font-size: 0.9em;
	margin-left: 270px;
}

#optimisez {
	color : #aaa;
	font-size: 0.9em;
	
}

#optimisez a.liens {
	color : #aaa;
	text-decoration:underline;
}

#optimisez a:hover.liens {
	color :#0F7ECD;
	text-decoration:none;
}

div#information-list {
	margin-left: 270px;
	margin-top: 20px;
	clear: both;
	font-size: 1em;
}

ul#information-list-list {
	width: 650px;
}

ul#information-list-list li {
	float: left;
	border-bottom: 1px solid #DDD;
}

ul#information-list-list h3 {
	font-size: 0.9em;
	padding: 0;
	margin: 0;
}

ul#information-list-list a {
	display: block;
	padding: 8px 0;
	width: 215px;
}

/* CONTENU-PAGE INDEX ------------------------------------------ */

#image_accueil {
	width:645px;
	margin-left:20px;
	padding : 1px;
	border : 1px solid #ccc;
}

li#image1-3 img,
li#image2-3 img,
li#image3-3 img {
	position : absolute;
	width:203px;
	height:132px;
	padding : 1px;
	border : 1px solid #cccccc;
}

#contentcolumn li#image1-3 img {
	top : 383px;
	left : 20px;
}

#contentcolumn li#image2-3 img {
	top : 383px;
	left : 241px;
}

#contentcolumn li#image3-3 img {
	top : 383px;
	left : 462px;
}

#contentcolumn li a:hover img {
	border : 1px solid #cccccc;
	border: 1px solid #888888;
}

h3#legende1,
h3#legende2 {
	position:absolute;
	left : 25px;
	width:320px;
	height:17px;
	color: #000;
}

h3#legende1{
	top : 215px;
	border-bottom: 1px solid #000;
	font-size:13px;
	font-weight: 900;
}

h3#legende2{
	top : 235px;
	font-weight: 100;
	font-size:12px;

}



/* CONTENU-PAGE DEMARCHE ------------------------------------------ */

#textedemarche {
	margin: 40px 0 0 20px;
}

#image_demarche {
	position:relative;
	height:132px;
}

#image1-5 img,
#image2-5 img,
#image3-5 img {
	position:absolute;
	width:203px;
	height:132px;
	padding : 1px;
	border : 1px solid #ccc;
}

#image1-5 img {
	top : 0;
	left : 20px;
}

#image2-5 img {
	top : 0;
	left : 241px;
}

#image3-5 img {
	top : 0;
	left : 462px;
}

#photo_demarche_historique{
	float : left;
	padding: 1px;
	border : 1px solid #ccc;
	vertical-align:text-bottom;
	
}

p.historique{
	position : relative;
	
	left : 10px;
}
/* CONTENU-PAGE PORTFOLIO ------------------------------------------ */

#portfolio h4 {
	font-size : 1.2em;
	font-weight: bold;
	margin-bottom:10px;
	padding:20px 0 0 230px;
}

#portfolio {
	position : relative;
	margin: 20px 0 0 20px;
}

#portfolio li {
	height:140px;
	position : relative;
	margin: 20px 0 0 0;
}

#portfolio p {
	padding:0 0 20px 230px;
}

#portfolio img {
	float:left;
	padding : 1px;
	border : 1px solid #ccc;
}

/* CONTENU-PAGE CONTACT ------------------------------------------ */

 .contact {
	font-size : 1.2em;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#texte ul {
	margin: 0 0 20px 0;
}

/* CONTENU-PAGE BOUTIQUE ------------------------------------------ */
	
.boutique {
	position : relative;
	margin-left:20px;
}
div#bijou1{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	padding : 1px;
	top : 0;
	left : 0;
	z-index:1;

}
div#bijou1 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
	
}
div#bijou2{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 0;
	left : 170px;
	z-index:1;
	padding : 1px;
}
div#bijou2 img{
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou3{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 0;
	left : 340px;
	z-index:1;
	padding : 1px;
}
div#bijou3 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou4{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 170px;
	left : 0;
	z-index:1;
	padding : 1px;
}
div#bijou4 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou5{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 170px;
	left : 170px;
	z-index:1;
	padding : 1px;
}
div#bijou5 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou6{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 170px;
	left : 340px;
	z-index:1;
	padding : 1px;
}
div#bijou6 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou7{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 340px;
	left : 0;
	z-index:1;
	padding : 1px;
}
div#bijou7 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou8{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 340px;
	left : 170px;
	z-index:1;
	padding : 1px;
}
div#bijou8 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou9{
	position:absolute;
	width:160px;
	height:160px;
	border : 1px solid #ccc;
	top : 340px;
	left : 340px;
	z-index:1;
	padding : 1px;
}
div#bijou9 img {
	width:160px;
	height:160px;
	position : absolute;
	z-index:1;
}
div#bijou1vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 0;
	left : 0;
	z-index:0;
}

div#bijou2vide img{
	width:160px;
	height:160px;
	position : absolute;
	top : 0;
	left : 170px;
	z-index:0;
}

div#bijou3vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 0;
	left : 340px;
	z-index:0;
}

div#bijou4vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 170px;
	left : 0;
	z-index:0;
}

div#bijou5vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 170px;
	left : 170px;
	z-index:0;
}

div#bijou6vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 170px;
	left : 340px;
	z-index:0;
}

div#bijou7vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 340px;
	left : 0;
	z-index:0;
}

div#bijou8vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 340px;
	left : 170px;
	z-index:0;
}

div#bijou9vide img {
	width:160px;
	height:160px;
	position : absolute;
	top : 340px;
	left : 340px;
	z-index:0;
}

.boutique a:link,
.boutique a:visited,
.boutique a:active {
	text-decoration : underline;
	color : #000000;
}

.boutique a:hover {
	text-decoration : none;
	color : #333;
}

.boutique a:hover img {
	width:260px;
	height:260px;
	padding:5px;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	z-index:100;
}

  

/* CONTENU-PAGE COLLECTION ------------------------------------------ */

#portfolio h4 {
	font-size : 1.2em;
	font-weight: bold;
	margin-bottom:10px;
	padding:20px 0 0 230px;
}

#portfolio {
	position : relative;
	margin: 20px 0 0 20px;
}

#portfolio li {
	height:140px;
	position : relative;
	margin: 20px 0 0 0;
}

#portfolio p {
	position : relative;
	padding:0 0 20px 230px;
}

#portfolio img {
	width:203px;
	height:135px;
	float:left;
	padding : 1px;
	border : 1px solid #ccc;
}

/* pop-ups texte*/

div#links a span {
	display: none;
}

div#links a:hover span {
	display: block;
	position: absolute;
	top:0;
	left: 540px;
	width: 130px;
	background-color: #eee;
	padding: 8px 8px 8px 8px;
}

div#links h4 {
	color:#333;
	margin: 0 0 8px 0;
}


/* Tables */
table {
	background: #fff;
	border:1px solid #ccc;
	border-right:0;
	clear: both;
	color: #333;
	margin-bottom: 10px;
	width: 100%;
}
th {
	background: #f2f2f2;
	border:1px solid #bbb;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	text-align: center;
}
th a {
	background:#f2f2f2;
	display: block;
	padding: 2px 4px;
	text-decoration: none;
}
th a:hover {
	background: #ccc;
	color: #333;
	text-decoration: none;
}
table tr td {
	background: #fff;
	border-right: 1px solid #ccc;
	padding: 4px;
	text-align: center;
	vertical-align: top;
}
table tr.altrow td {
	background: #f4f4f4;
}
td.actions {
	text-align: center;
	white-space: nowrap;
}
td.actions a {
	margin: 0px 6px;
}
.cake-sql-log table {
	background: #f4f4f4;
}
.cake-sql-log td {
	padding: 4px 8px;
	text-align: left;
}

div.paging {
	position: absolute;
	top:510px;
	background:#fff;
	color: #ccc;
	margin-bottom: 2em;
}
div.paging div.disabled {
	color: #ddd;
	display: inline;
}
div.paging span {
}
div.paging span.current {
	color: #000;
}
div.paging span a {
}

/* Scaffold View */
dl {
	line-height: 2em;
	margin: 0em 0em;
	width: 60%;
}
dl.altrow {
	background: #f4f4f4;
}
dt {
	font-weight: bold;
	padding-left: 4px;
	vertical-align: top;
}
dd {
	margin-left: 10em;
	margin-top: -2em;
	vertical-align: top;
}


form {
	clear: both;
	margin-right: 20px;
	padding: 0;
	width: 80%;
}
fieldset {
	border: 1px solid #ccc;
	margin-top: 30px;
	padding: 16px 20px;
}
fieldset legend {
	background:#fff;
	color: #e32;
	font-size: 160%;
	font-weight: bold;
}
fieldset fieldset {
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 16px 10px;
}
fieldset fieldset legend {
	font-size: 120%;
	font-weight: normal;
}
fieldset fieldset div {
	clear: left;
	margin: 0 20px;
}
form div {
	clear: both;
	margin-bottom: 1em;
	padding: .5em;
	vertical-align: text-top;
}
form div.input {
	color: #444;
}
form div.required {
	color: #333;
	font-weight: bold;
}
form div.submit {
	border: 0;
	clear: both;
	margin-top: 10px;
	margin-left: 140px;
}
label {
	display: block;
	font-size: 110%;
	padding-right: 20px;
}
input, textarea {
	clear: both;
	font-size: 140%;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 2px;
	width: 100%;
}
select {
	clear: both;
	font-size: 120%;
	vertical-align: text-bottom;
}
select[multiple=multiple] {
	width: 100%;
}
option {
	font-size: 120%;
	padding: 0 3px;
}
input[type=checkbox] {
	clear: left;
	float: left;
	margin: 0px 6px 7px 2px;
	width: auto;
}
input[type=radio] {
	float:left;
	width:auto;
	margin: 0 3px 7px 0;
}
div.radio label {
	margin: 0 0 6px 20px;
}
input[type=submit] {
	display: inline;
	font-size: 110%;
	padding: 2px 5px;
	width: auto;
	vertical-align: bottom;
}

div.message {
	clear: both;
	color: #000;
	font-size: 140%;
	font-weight: bold;
	margin: 1em 0;
}
div.error-message {
	clear: both;
	color: #000;
	font-weight: bold;
}
p.error {
	background-color: #e32;
	color: #000;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
p.error em {
	color: #000;
	font-weight: normal;
	line-height: 140%;
}
.notice {
	background: #ffcc00;
	color: #000;
	display: block;
	font-family: Courier, monospace;
	font-size: 120%;
	line-height: 140%;
	padding: 0.8em;
	margin: 1em 0;
}
.success {
	background: green;
	color: #000;
}

div.actions ul {
	margin: 0px 0;
	padding: 0;
}
div.actions li {
	display: inline;
	list-style-type: none;
	line-height: 2em;
	margin: 0 2em 0 0;
	white-space: nowrap;
}
div.actions ul li a {
	background:#fff;
	color: #003d4c;
	text-decoration: none;
}
div.actions ul li a:hover {
	color: #333;
	text-decoration: underline;
}

div.related {
	clear: both;
	display: block;
}

/* Debugging */
pre {
	color: #000;
	background: #f0f0f0;
	padding: 1em;
}
pre.cake-debug {
	background: #ffcc00;
	font-size: 120%;
	line-height: 140%;
	margin-top: 1em;
	overflow: auto;
	position: relative;
}
div.cake-stack-trace {
	background: #fff;
	border: 4px dotted #ffcc00;
	color: #333;
	margin: 0px;
	padding: 6px;
	font-size: 120%;
	line-height: 140%;
	overflow: auto;
	position: relative;
}
div.cake-code-dump pre {
	position: relative;
	overflow: auto;
}
div.cake-stack-trace pre, div.cake-code-dump pre {
	color: #000;
	background-color: #F0F0F0;
	margin: 0px;
	padding: 1em;
	overflow: auto;
}
div.cake-code-dump pre, div.cake-code-dump pre code {
	clear: both;
	font-size: 12px;
	line-height: 15px;
	margin: 4px 2px;
	padding: 4px;
	overflow: auto;
}
div.cake-code-dump span.code-highlight {
	background-color: #ff0;
	padding: 4px;
}
div.code-coverage-results div.code-line {
	padding-left:5px;
	display:block;
	margin-left:10px;
}
div.code-coverage-results div.uncovered span.content {
	background:#ecc;
}
div.code-coverage-results div.covered span.content {
	background:#cec;
}
div.code-coverage-results div.ignored span.content {
	color:#aaa;
}
div.code-coverage-results span.line-num {
	color:#666;
	display:block;
	float:left;
	width:20px;
	text-align:right;
	margin-right:5px;
}
div.code-coverage-results span.line-num strong {
	color:#666;
}
div.code-coverage-results div.start {
	border:1px solid #aaa;
	border-width:1px 1px 0px 1px;
	margin-top:30px;
	padding-top:5px;
}
div.code-coverage-results div.end {
	border:1px solid #aaa;
	border-width:0px 1px 1px 1px;
	margin-bottom:30px;
	padding-bottom:5px;
}
div.code-coverage-results div.realstart {
	margin-top:0px;
}
div.code-coverage-results p.note {
	color:#bbb;
	padding:5px;
	margin:5px 0 10px;
	font-size:10px;
}
div.code-coverage-results span.result-bad {
	color: #a00;
}
div.code-coverage-results span.result-ok {
	color: #fa0;
}
div.code-coverage-results span.result-good {
	color: #0a0;
}

div#texteBijou1,div#texteBijou2,div#texteBijou3 {
display:none;
position:absolute;
top:260px;
width:258px;
background-color:white;
overflow:auto;
border : 1px solid #ccc;
}
div#texteBijou4,div#texteBijou5,div#texteBijou6 {
display:none;
position:absolute;
top:260px;
width:258px;
background-color:white;
overflow:auto;
border : 1px solid #ccc;
}
div#texteBijou7,div#texteBijou8,div#texteBijou9 {
display:none;
position:absolute;
top:260px;
width:258px;
background-color:white;
overflow:auto;
border : 1px solid #ccc;
}
div#imageViewItem{
width:260px;
}
div#texteItem{
position:relative;
top:-260px;
left:280px;
width:390px;
height:10px
}
div#itemPhoto{
width:800px
}

div.colonneContact{
width:50%;
float:left;
}

div#colonneContactDroite{
float:none;
}