body
{background: url(charte/bg_body_NY.jpg) repeat-y center #eee; margin: 0; font: normal 80% Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif; color:#333;}

a {color: #3366ff;}
a img {border: 0;}
h3 {color: #000033; font-size: 1.12em;}
h2, h3 {margin: 10px 0 5px 0;}
form {padding: 5px;}
fieldset {margin-top: 10px; font-weight: bold; border: 1px solid #ccc; padding: 5px;}
fieldset p {font-weight: normal;}
legend {font-style: italic; color: #aaa;}

@font-face {
   font-family: 'Kingthings Organica';
   src: url('Kingthings_Organica.eot');
   src: local('Kingthings Organica'), local('Kingthings Organica'), url('Kingthings_Organica.ttf') format('truetype');
}
h1.fontface2, h2.fontface {font: 30px/25px 'Kingthings Organica', Arial, sans-serif; letter-spacing: 0; color: #000033;}


@font-face2 {
   font-family: 'Gabrielle';
   src: url('Gabrielle.eot');
   src: local('Gabrielle'), local('Gabrielle'), url('Gabrielle.ttf') format('truetype');
}
h1.fontface2, h2.fontface2 {font: 30px/25px 'Gabrielle', Arial, sans-serif; letter-spacing: 0; color: #6e081d; margin-bottom: 25px;}



#bandeau, #bandeau_bou, #corps {width: 950px; margin: 0 auto 0 auto;}

/*================= LOGIN =================*/
#log {height:25px; padding-top:3px;background: black;}
#log form {padding: 0 0 0 20px;}
#log form, #log form p, #log form p label {margin:0;line-height: 20px;}
#log, #log form p a {color: #888;}
#log form p a:hover {color: white;}
#log #conec, #log #decon, #log #pass, #log #mail {height: 20px; border: none; margin: 0; color: white; vertical-align: top; font-weight: bold;}
#log #conec {width: 36px; padding: 0;  color: white; background:  url(charte/btn_ok.png) left top no-repeat; cursor: pointer;}
#log #decon {width: 150px; padding: 0; background:  url(charte/fd_trans.png) left top no-repeat; cursor: pointer;}
#log #pass, #log #mail {width: 150px; padding: 4px; background:  url(charte/fd_trans.png) left top no-repeat; cursor: auto;}

/*================= BANDEAU TOP =================*/
#bandeau {background: url(charte/stripblue.png) repeat-x #fff;}
#bandeau_bou {background: url(charte/stripred.jpg) repeat-x #fff;}
#bandeau , #bandeau_bou {height: 150px;}

/*LOGO*/
#logo {position: absolute;}
#logo h1 {margin: 0 0 0 5px;}

#hori ul#strech, #hori ul#strech li, #bandeau ul#menu, #bandeau ul#menu li, #bandeau_bou ul#menu, #bandeau_bou ul#menu li
{margin: 0;}
/*MENU  STRECH*/
#hori ul#strech, #bandeau ul#menu, #bandeau_bou ul#menu {list-style: none;}
#hori ul#strech {float: right;}
#hori ul#strech li {float: left; display: block; margin-left: -18px;}
#hori ul#strech li a {display: block; width: 43px; height: 100px;}
#hori ul#strech li a:hover {width: 170px;}

/*MENU Principal*/
#bandeau ul#menu {background: url(charte/bgmenu.jpg) no-repeat;}
#bandeau_bou ul#menu {background: url(charte/bgmenu_bou.jpg) no-repeat;}
#bandeau ul#menu, #bandeau_bou ul#menu {clear: right; width: 950px; height: 50px; padding-left: 0; font-size: 90%;}
#bandeau ul#menu li, #bandeau_bou ul#menu li{float: left; display: block; text-align: center;}
#bandeau ul#menu li a, #bandeau_bou ul#menu li a {display: block; width: 102px; height: 20px; background: url(charte/bdmenu.jpg) repeat-y right; margin-top: 20px; color: #000; font-weight: bold;}
#bandeau ul#menu li a:hover, #bandeau_bou ul#menu li a:hover {color: #fff;}

/*MENU DEROULANT*/
#bandeau ul#menu li .menudel {top: 177px;}
#bandeau_bou ul#menu li .menudel2  {top: 148px;}
#bandeau ul#menu li .menudel, #bandeau_bou ul#menu li .menudel2 {position: absolute; display: none; overflow: hidden; background: url(charte/bggold.png) repeat; padding:0; border: 1px solid #333300; z-index: 100;}
#bandeau ul#menu li .menudel li, #bandeau ul#menu li  .menudel li a, #bandeau_bou ul#menu li .menudel2 li, #bandeau_bou ul#menu li  .menudel2 li a{ display: inline; clear:left; background: none; text-align: left; padding: 5px;}
#bandeau ul#menu li  .menudel li a:hover, #bandeau_bou ul#menu li  .menudel2 li a:hover {background: #000;}
#bandeau ul#menu li .menudel li .sous_menudel, #bandeau_bou ul#menu li .menudel2 li .sous_menudel {display: none; padding: 0; margin-left: 10px; margin-top: 10px;}
#bandeau ul#menu li .menudel li .sous_menudel li , #bandeau_bou ul#menu li .menudel2 li .sous_menudel li {margin: 1px; width: 300px; font-size: 0.85em; background: url(charte/bggold.png) repeat; border: 1px solid #dee290;}

/*RESEAU SOCIO*/
#socio, #socio2{position:absolute;margin-left:870px;}
#socio{top:155px;}
#socio2{top:185px;}
#socio p, #socio2 p {margin:0 0 0 5px;float:right;}

/*================= CORPS =================*/
#corps {clear: left; padding-top: 10px;}
#corps ul {list-style-image: url("charte/puce.png");}
#corps table {margin-top: 10px; margin-bottom: 15px; border-spacing: 0px; border-collapse: collapse;}
#corps table tr td {vertical-align: top;}

.darkr {font-weight:bold;}
.droite {text-align: right;}
.centre {text-align: center;}
.barre {text-decoration: line-through;}
.rouge {margin-bottom: 5px; color: red; font-weight: bold;}
.vert {color:green; font-weight: bold;}
.pvert {color:green; font-size: 70%;}
.bordeaux {color:#6e081d; font-weight: bold;}
.petit{font-size: 70%;}
.h35 {height: 35px;}
.box  {margin: 15px 10px 15px 145px; padding: 5px;}
.box3 {margin: 2px 20px 20px 20px; padding: 5px;}
.box2  {margin: 15px 10px 15px 220px; padding: 5px; border: 1px solid #ccc}
.box4 {margin: 2px 10px 15px 220px; padding: 5px;}
.decal, .box3 ul {margin-left: 140px;}
.boxcom {clear: left; clear: right; margin: 20px 5px 20px 145px; padding: 10px; background: #eeeeee; border: 1px solid #cccc33;}
.boxcom  ul li {margin: 5px; padding: 5px; background: #fff; border: 1px solid #ddd;}
.iconflo {float: right;}
.prix{float: right; width:100px; color: #3366ff; margin: 0 5px 10px 10px; text-align: center;}
.iconflo100 {float: right; width: 100px;}
.iconflo400 {float: right; width: 400px; margin-left: 15px;}
.cell104 {border: 5px solid white; width: 104px; padding: 2px; background-color: #eeeeee; font-size: 0.8em; vertical-align: top;}
.cell_bou {width:112px; border: 1px #ddd solid; padding: 5px 0 5px 0;}
.cell_bou span, .cell_bou strong, .cell_bou img {margin: 6px;}
.carre_coul{float:left;width:20px;height:20px;margin:2px;border:1px solid #ccc;}

.jaune /*s'applique aux champs obligatoires*/
{background-color: #ffffaa; border: 1px solid grey;}
.subtitle /*pour la récaop du profil*/
{background-color:#eeeeee; font-size:1.3em; font-weight: bold; color: #000033;}
.opacity {filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.50; opacity:0.5;}
/*class pour afficher les couleurs avec les checkbox dans la page de recherche*/
.checkbox  {clear: right; margin: 2px; border-bottom: 1px solid #ddd;}
.checkbox div {float: right; height:20px; width:20px;}
.checkbox img {float: right;}

/*Elément du bloc couverture*/
#flottant, #flot400 {float: right; margin: 5px; background-color : #fff;}
#flottant {width:300px;border-right: 1px solid #ddd;}
#flottant ul {list-style: none;}
#flottant form label {line-height:25px; font-weight: bold;}
#flottant #couv {width:300px; height: 400px;}
#flot400 {width:400px; text-align: right;}

/*div qui premet de mettre des infos dans une colonne à gauche */
#niveau {float: left; width: 125px; height: 830px; margin: 0 20px 0 0; background: url(charte/blanc.jpg) repeat-y right;}
#niveau div.iconflo100 p, #niveau div.iconflo100 p img, #niveau p, #niveau p img {margin: 0;}

/*div qu permet de placer le menu du profil à gauche*/
#menprof {float: left; width: 200px; margin: 0 20px 0 5px; border-right: 1px solid #ccc; background-color: #fff;}
#menprof h3 {color: #cccc33;}

/*Les gros titres des COUV*/
h5{width: 290px; margin: 0px; margin-top: 180px; padding: 5px; font-size: 1.5em;}
h5 span {width: 290px; position: absolute; margin: -1px 0 0 -1px;}

/*bloc avec ligne dorée TOP*/
.blocor {clear: right; width: 950px; height: 300px; background: url(charte/bg_blocor.jpg) top repeat-x #cccc33;}
.blocor #flottant {background : none;}

.journal, .cell100 /*pour des celllules contenant un avatar*/
{width: 100px; padding: 0px; vertical-align: top;}
.journal900 {width: 900px;}

/*pour le journal des chevaux*/
.journal tr, .journal900 tr  {border-top: 1px dashed grey; border-bottom: 1px dashed grey;}
.journal tr td, .journal900 tr td {padding-left: 3px; padding-right: 3px;}
.cal {text-align: right; width: 15px; border-right: 1px solid grey;}
.caldet {font-size: 0.95em;}
.stattd {width: 250px; vertical-align: center;}
.recJ {border: 1px solid #ccc; text-align: center;}
.recJ tr td, .recJ tr th {width:80px; border: 1px solid #ccc;}
.recJ tr th {padding-bottom: 15px; background-color: #ffffaa;}
.recJ tr .recnom 
{padding: 5px; font-weight: bold; background-color: #eee; font-size: 1.10em; text-align: left;}
.recJ tr .recnom  a {color: #000033; text-decoration: none;}
.recJ tr td {padding-bottom: 15px; font-size: 0.95em;}

/*titres en couleur*/
.titcol { width: 100%; height: 50px; *overflow: hidden; text-align: center;}
.titcol h2 {position: relative; top: -50px; margin: 0 0 0 30px;}

/*Origines des chevaux*/
#origine {clear:right; margin: 15px 10px 15px 145px;}
.oritab /*pour le tableau des origines des chevaux*/
{width: 600px;}
.ori1 {width: 50px; font-weight: bold;}
.ori2 {width: 250px; border: 1px solid grey; padding: 5px;}
.ori3 {width: 300px; border: 1px solid grey; padding: 5px;}
.ori4 {padding: 15px; background: url('charte/test.jpg') repeat-y; border: 1px solid grey;}

/*tableau de récap du profil*/
.recap tr {border:1px solid #333333;}
.recap tr td {padding: 7px;}
/*tableau de récap de la page perso et du site*/
.recap2 tr td {padding: 7px; width: 20%; text-align: center; vertical-align: top; background-color: #eee;}

.plan tr td /*pour le tableau planning*/
{width: 102px; vertical-align: top; padding: 3px;}
.plan tr th {text-align: center;}
.plancell /*div dans le tableau planing*/
{margin-top: 10px;margin-bottom: 10px;}

/*Div pour l'abum  photo*/
#diapo {text-align: center; margin: 20px;}
#diapo2 {font-weight: bold; font-style: italic; margin: 50px;}
#diapo p img, #diapo2 p {background: url(charte/shadow.gif) no-repeat right bottom; padding: 5px 10px 10px 5px;}

/*PUB bandeau top*/
#pub {height: 100px; margin: 0px 0 0 400px;}
#pub_bou {height: 100px; margin: 0px 0 0 300px;}
#pub #google_add {padding-top: 10px;}
#pub h2, #pub p, #pub_bou h2, #pub_bou p {color: #fff;}
#pub h2, #pub_bou h2 {margin:0; padding-top: 10px;}

/*-----------------*/
#listimg, #listsmall {list-style-type: none; padding: 0 10px 0 0;}
/*Les liste avec une image à gauche*/
#listimg li, #listimg li p {clear: left; margin: 5px 0 25px 0;}
#listimg li p  {font-size: 80%; font-weight: bold;}
#listimg li a.vign
{float: left; clear: left; width: 100px; height: 100px; display: bloc; margin: 0 5px 0 0; text-align: right;}
/*Les liste en petit*/
#listsmall  li {clear: right; font-size: 85%; margin: 0 0 10px 0;}
#listsmall li .vign2 {float: right; clear: right;}

/*------Bloc DIV avec PUB pour la Boutique------*/
.pub_bou {margin: 50px 5px 5px 145px; padding: 10px; background: url(charte/stripred.jpg) bottom repeat-x #6e081d; border: 1px solid #000;}
.pub_bou h3 a, .pub_bou h3 {color: #fff;}
.pub_bou img {border: 1px solid #000;}
.pub_bou p.text_pub {background-color: #ccc033; padding: 5px; margin-right: 115px; border: 1px solid #333300; font-size: 0.85em;}

/*-------pour la boutique------*/
.menu_sell {width: 200px; list-style-image: none; list-style-type: none; padding: 0 5px 0 5px; margin: 0;}
.menu_sell li {display: block;}
.menu_sell li ul {padding: 0; display: none;}
.menu_sell li a {display: block; padding: 5px; color: #6e081d; text-decoration: none; font-weight: bold; font-size: 85%; background: #6e081d url(charte/stripgrey.jpg) repeat-x; border-bottom: 1px solid #bbb; cursor: pointer;}
.menu_sell li ul li a {padding-left: 20px; color : #fff; background: #6e081d url(charte/stripred.jpg) repeat-x;}
.menu_sell li a:hover {color: #000; background: #6e081d url(charte/bg_blocor.jpg) repeat-x;}

.vignette {float: left; width: 200px; margin: 12px; padding: 5px; border: 1px solid #ccc; color: #666;}
.vignette p {margin: 0;}

.vignet_b {height: 120px;}
.vignet {height: 200px;}
.vignet, .vignet_b {float: left; width: 120px; margin: 5px; border: 1px solid #eee;}
.vignet p, .vignet_b p {padding: 10px; margin: 0; font-size: 75%;}
.vignet p img, .vignet_b p img  {cursor: pointer;}
.lightbox 
{position: absolute; top: 0; left: 0; width: 0; height: 0; background: url(charte/border.png); overflow: hidden;}
.lightbox div {margin: 100px auto 50px auto; text-align: center;}
.lightbox div p {font-weight: bold; color: #fff;}
.lightbox div  img {border: 15px solid #fff; cursor: pointer;}

/*panier marchand*/
#panier{width: 900px;}
#panier tr th {background-color: #ccc033; border: 1px solid #ccc033;}
#panier td{border: 1px solid #ddd; padding: 5px;}
#panier .total {background-color:#eee; font-weight: bold; color: #000;}

#small_pan
{position: absolute; width: 113px; height: 73px; top: 5px; 
margin-left: 830px; background: url(charte/bg_pan.png) no-repeat 0px 7px; text-align: center;}
#small_pan p a {display: block; width: 100%; height: 100%; color: #000;}

#qtepan
{background: url(charte/b_vide.png) no-repeat center; height: 40px; color: #333300; padding-top: 3px;}

/*IMAGE GALERIE*/
/* defaults required for IE */
a, a:visited, a:hover, a:active, a:focus {color:#3366ff;}

#holder {position:relative; background:transparent url(charte/logo2.png) 90px center no-repeat; margin:30px auto 10px auto; width:720px; height:800px;}
#scrollbox {padding:0; margin:0; width:110px; list-style:none; height:400px; overflow:auto; float:right;}
#scrollbox li {float:left;}

#scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid #fff; width:75px; height:75px; float:left; padding:5px;}

#scrollbox a span {display:block; position:absolute; left:-9999px; top:0; text-align: center;}
#scrollbox a span img {border:0;}

#scrollbox a:hover {border:1px solid #888;}
#scrollbox a:hover span {width:610px; height:800px; left:0px; background:#fff; z-index:100;}

#scrollbox a:active {border:1px solid #000;}
#scrollbox a:focus {border:1px solid #000; outline:0;}

* html #scrollbox a:active span {width:610px; height:800px; top:0; left:0px; color:#000; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:610px; height:800px; top:0; left:0px; color:#000; background:#fff; z-index:10; outline:0;}
/*---------------------*/




/*================= PIED DE LE PAGE=================*/
#pied
{width: 950px; margin: 0 auto 0 auto; clear: right; clear: left; font-size: 0.7em; text-align: center; border-top: 1px solid #cccc33;}
#pied ul {width: 500px; margin: 10px auto 0px auto; list-style-type:none;}
#pied ul li {padding: 5px; display: inline;}
#pied #google_barre {margin: 10px;}