@import url(font.css);
@import url(menu.css);
@import url(calendar.css);

/* ------- PNG fixed ---*/
* html img,* html .png{
behavior: expression((this.runtimeStyle.behavior="none")
(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "img/include/pixel.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().
replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); border:0;} 

/* ------ RESET ------ */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0;}


/* ------ BASE ------ */
body{ background: #000 url(../images/include/bkgd-body.jpg) repeat-x;}
#mettet{ width: 1000px; margin: 0 auto;}
#content{ background: #eaeaea url(../images/include/shadow-menu.jpg) repeat-x; border-bottom: 1px solid #959595; padding: 1%;}
#footer{ background: #b6b5b5 url(../images/include/bkgd-footer.jpg) no-repeat right bottom; border-top: 1px solid #FFF; padding: 1em; position:relative; margin-bottom: 3em;}
#banner{ width: 100%; height: 290px;}

.leftcontent, .rightcontent{ margin-top: 10px; z-index:20}
.leftcontent, .rightcontent, .toc{ float: left;}
.leftcontent{ width: 68%; margin-right: 1%;}
*HTML .leftcontent{ margin-right: 0.5%;}
.rightcontent{ width: 30.5%;}


/* ------ GENERAL ------ */
h2{ background:url(../images/include/bullet-h2.jpg) no-repeat right 0.3em; border-bottom: 1px solid #4b4a4a; padding-right: 3em; padding-bottom: 0.2em;}
h4{ margin-top: 1em;}
h4 span{ color: #dc002e;}

ul{ list-style: none;}
a.more{ background:url(../images/include/bullet-event.png) no-repeat left 0.4em; padding-left: 1.3em; color: #dc002e;}
a.next{ background: url(../images/include/bullet-next.gif) no-repeat left 0.4em; padding-left: 1em; color: #eb8205;}
a:hover.next{ text-decoration: none;}
p{ margin-top: 1em;}

a img{ border: 0;}
a.help{ background:url(../images/include/help-off.gif) no-repeat; width: 15px; height: 15px; display:block; text-indent: -9999px;}
a:hover.help{ background:url(../images/include/help-on.gif) no-repeat;}

a.paiement{ color: #fff; text-decoration: none; padding: 5px 10px;}
a.ogone{ background: #0d74bc url(../images/include/logo-ogone.gif) no-repeat; padding-left: 116px;}
a.paypal{ background: #114378 url(../images/include/logo-paypal.gif) no-repeat left bottom; padding-left: 105px;}
a.continue{ background: #666;}


input.input{ border: 2px solid #b5b5b5; padding: 3px;}
input.btn{ background: #666; color:#FFF; padding: 1px 10px; border: 2px solid #666;}
select.input{ border: 2px solid #b5b5b5; padding: 1px 3px;}
input.error{ border: 2px solid #dc002e; padding: 1px 3px;}
input.size37{ width: 37px;}
input.size40{ width: 40px;}
input.size200{ width: 200px;}
input.size210{ width: 210px;}
input.size300{ width: 300px;}
select.size200{ width: 200px;}
input:focus{ border: 2px solid #f93;}
input:focus.btn{ border: 2px solid #666;}
textarea.error{ border: 2px solid #dc002e; padding: 1px 3px;}

.erreur{ color:#dc002e;}

.mt{ margin-top: 20px;}
.clear{ clear:both;}

/* ------ CRUMBTRAIL ------ */
ul.crumbtrail{ margin-bottom: 1em;}
ul.crumbtrail li{ background:url(../images/include/crumbtrail.jpg) no-repeat 0 5px; padding-left: 1.3em; display: inline; margin-right: 0.75em; color: #dc002e; float: left;}
ul.crumbtrail li.first{ background: none; padding-left: 0; color: #666;}
ul.crumbtrail li a{ color: #666; text-decoration: none;}
ul.crumbtrail li a:hover{ text-decoration: underline;}
ul.crumbtrail li.member{ float: right; background: none; padding-left: 0;}
ul.crumbtrail li.member a{ background: url(../images/include/crumb-login.jpg) no-repeat; color: #666; padding: 0.35em 0.35em 0.5em 2.2em; display:block; border-bottom: 1px solid #f93;}
ul.crumbtrail li.member a:hover{ text-decoration: none; color: #f93; border-bottom: 1px solid #666;}
ul.crumbtrail li.deconnect{ float: right; background: none; padding-left: 0;}
ul.crumbtrail li.deconnect a{ background: url(../images/include/deconnect.gif) no-repeat; color: #666; padding: 0.35em 0.35em 0.5em 2.2em; display:block; border-bottom: 1px solid #f93;}
ul.crumbtrail li.deconnect a:hover{ text-decoration: none; color: #f93; border-bottom: 1px solid #666;}


/* ------ CHANGEMENT PHOTO ------ */
#imageContainer { margin:0px auto; height:150px; width: 285px; position: relative; }
#imageContainer img { display:none;	position:absolute; top:0; left:0;}

#imageContainer2 { margin:0px auto; height:180px; width: 285px; position: relative; }

/* ------ IMU CHANGEMENT PHOTO ------ */
#imu{ margin:0px auto; height:250px; width: 300px; position: relative;}
#imu img { display:none;	position:absolute; top:0; left:0;}

/* ------ EVENT ------ */ 
.event{ padding: 2%;}
.event img{ float: right; margin-left: 1em;}
.event p a:hover{ text-decoration: none;}
.event.line{ background: #c9c9c9;}
.event.first{ margin-top: 1em;}

/* ------ RIGHTCONTENT ------ */ 
.bloc, .IMU{ margin-bottom: 2em;}
.bloc{ background:url(../images/include/bloc.jpg) repeat-x left bottom; padding: 0 2% 6% 2%; width: 96%;}
.bloc img{ float: left; margin-right: 1em;}
.bloc p a.more{ float:right;}
.bloc h3, .bloc h5{ float: left; margin: 0.5em 0;}
.bloc h3{ margin-right: 0.5em;}
.bloc h5{ padding-top: 0.3em;}
.bloc ul li{ margin-bottom: 0.3em;}
.bloc ul li a{ background:url(../images/include/bullet-bloc.png) no-repeat left 0.4em; padding-left: 1.2em; text-decoration: none;}
.bloc ul li a:hover{ text-decoration: underline;}

/* ------ INSIDE ------ */
.inside .leftcontent p img{ float: left; margin: 1em 1.5em 0.3em 0;}
.inside .leftcontent p img.firstimg{ margin-top: 0.2em;}
.inside .leftcontent p img.rightimg{ float: right; margin: 1em 0 0.3em 1.5em; }
.inside .leftcontent .showhide{ display: none;}

/* ------ TOC ------ */ 
.toc{ position: relative; background: #d3d2d2; padding: 20px; width: 260px; margin-bottom: 10px;}
.toc h2{background:url(../images/include/bullet-h2-grey.jpg) no-repeat right 0.3em; margin-bottom: 1em;}
.toc ul{}
.toc ul li{ background:url(../images/include/line-toc.gif) repeat-x left bottom; padding: 1em 0;}
.toc ul li a{ text-decoration: none; background:url(../images/include/bullet-toc-off.gif) no-repeat left 0.4em; padding-left: 1.5em;}
.toc ul li a:hover, .toc ul li a.selected{ background:url(../images/include/bullet-toc-on.gif) no-repeat left 0.4em; color: #eb8205;}
.toc span{ width: 10px; height: 10px; position: absolute; display: block;}
.toc span.lefttop{ left: 0; top: 0; background: url(../images/include/corner/corner-left-top.gif) no-repeat;}
.toc span.righttop{ right: 0; top: 0; background: url(../images/include/corner/corner-right-top.gif) no-repeat;}
.toc span.leftbot{ left: 0; bottom: 0; background: url(../images/include/corner/corner-left-bot.gif) no-repeat;}
*HTML .toc span.leftbot{ bottom: -4px;}
.toc span.rightbot{ right: 0; bottom: 0; background: url(../images/include/corner/corner-right-bot.gif) no-repeat;}
*HTML .toc span.rightbot{ bottom: -4px;}

.toc .calendar{ background:#FFF; padding: 8px;}
.toc .calendar table th h4{ margin: 0; padding-bottom: 4px; color:#999;}
.toc .calendar td{ border-bottom: 1px solid #999; border-right: 1px solid #999; color:#333; text-align: center;}
.toc .calendar td.last{ border-right: none;}
.toc .calendar td.tdtxt{ color:#999; border: none; height: 23px;}
.calendar td a{ height: 23px; text-align: center; display: block; padding-top: 10px; text-decoration: none;}
.calendar td span{ height: 23px; display: block; padding-top: 10px; text-decoration: none; position: relative; text-align: center; width: 33px;}
.calendar td em{ height: 23px; text-align: center; display: block; padding-top: 10px; text-decoration: none;}
.calendar td a.rumesm{ background:#060; color:#FFF;}
.calendar td a.oqp{ background:#02cf02; color: #fff;}
.calendar td a.maintenance{ background: #ff99cc; color: #d71920;}
.calendar td a.option{ background: #daebfe;}
.calendar td a.compet{ background: #0742ba; color: #fff;}
.zoomcalendar { text-align: center; margin-top: 2px;}
.zoomcalendar a{ color: #c03; background: url(../images/include/bullet-arrow-calendar.gif) no-repeat left 0.4em; padding-left: 1em; }

/* ------ RESERVATION ------ */
ul.reservation { margin-top: 20px;}
ul.reservation li{ float:left;}
ul.reservation li a{ width: 218px; height: 94px; text-indent: -9999px; display: block; background-repeat: no-repeat; float: left;}
ul.reservation li a.moto_fr{ background-image:url(../images/reservation/vignette-calendrier-moto-off.jpg);}
ul.reservation li a:hover.moto_fr{ background-image:url(../images/reservation/vignette-calendrier-moto-on.jpg);}
ul.reservation li a.auto_fr{ background-image:url(../images/reservation/vignette-calendrier-auto-off.jpg);}
ul.reservation li a:hover.auto_fr{ background-image:url(../images/reservation/vignette-calendrier-auto-on.jpg);}
ul.reservation li a.other_fr{ background-image:url(../images/reservation/vignette-calendrier-autres-off.jpg);}
ul.reservation li a:hover.other_fr{ background-image:url(../images/reservation/vignette-calendrier-autres-on.jpg);}

ul.reservation li a.moto_nl{ background-image:url(../images/reservation/vignette-calendrier-moto-nl-off.jpg);}
ul.reservation li a:hover.moto_nl{ background-image:url(../images/reservation/vignette-calendrier-moto-nl-on.jpg);}
ul.reservation li a.auto_nl{ background-image:url(../images/reservation/vignette-calendrier-auto-nl-off.jpg);}
ul.reservation li a:hover.auto_nl{ background-image:url(../images/reservation/vignette-calendrier-auto-nl-on.jpg);}
ul.reservation li a.other_nl{ background-image:url(../images/reservation/vignette-calendrier-autres-nl-off.jpg);}
ul.reservation li a:hover.other_nl{ background-image:url(../images/reservation/vignette-calendrier-autres-nl-on.jpg);}

ul.reservation li a.moto_en{ background-image:url(../images/reservation/vignette-calendrier-moto-en-off.jpg);}
ul.reservation li a:hover.moto_en{ background-image:url(../images/reservation/vignette-calendrier-moto-en-on.jpg);}
ul.reservation li a.auto_en{ background-image:url(../images/reservation/vignette-calendrier-auto-en-off.jpg);}
ul.reservation li a:hover.auto_en{ background-image:url(../images/reservation/vignette-calendrier-auto-en-on.jpg);}
ul.reservation li a.other_en{ background-image:url(../images/reservation/vignette-calendrier-autres-en-off.jpg);}
ul.reservation li a:hover.other_en{ background-image:url(../images/reservation/vignette-calendrier-autres-en-on.jpg);}

/* ------ FORMULAIRE ------ */
.form{ padding: 10px 55px;}
.form h4{ margin: 10px 0 20px 0;}
.form table td{ padding: 5px; padding-right: 7px;}
.form table td.tdsep{ background:url(../images/include/td-sep.gif) no-repeat right 9px; padding-right: 45px;}
.form table td.tdvalid{ width: 25px;}
.form table td span{ color: #dc002e;}
.form table td span.light{ color: #999;}
.form table.recap td{ padding: 7px 3px; padding-right: 7px;}

.contact .form{ padding: 20px;}
.contact textarea{ width: 300px; height:150px; border: 2px solid #b5b5b5; padding: 1px 3px;}
.contact .menu-page{ width: 400px;}

.form .total{ margin-top: 10px; padding: 10px; border: 2px solid #f7941d; float: left;}
.form .total table{}
.form .total table tr{ padding: 20px;}
.form .total table td{ padding: 7px 10px; padding-right: 20px;}
.form .total table tr.montant td, .form table tr.montant td{ border-top: 2px solid #666; background:#e0dddd;}
.form .total table tr.montant td span, .form table tr.montant td span{ font-weight: bold; color:#333;}
.form .linesep{ background:url(../images/include/linesep.gif) repeat-x; height: 20px; margin-top: 10px;}

.menu-form{ background:url(../images/include/left-menuform.gif) no-repeat; padding-left: 15px; margin: 0 20px;}
.menu-form.mt{ margin-top: 30px}
.menu-form ul{ background: #b6b5b5 url(../images/include/right-menuform.gif) no-repeat right top; padding: 7px 0 6px 0;}
.menu-form ul li{ display: inline; background:url(../images/include/sep-menuform.gif) no-repeat right 2px; padding-right: 20px; margin-left: 10px;}
.menu-form ul li.dernier{ background: none; padding-right: 0;}
.menu-form ul li a{ color: #fff; text-decoration: none; background: url(../images/include/member-menu-off.gif) no-repeat left 1px; padding-left: 18px;}
.menu-form ul li a.here{ color: #c4161c; background: url(../images/include/member-menu-on.gif) no-repeat left 1px;}
.menu-form ul li a:hover{ color: #666;}
.menu-form ul li a:hover.here{ color: #c4161c;}

.menu-page{ border-top: 2px solid #d0cfcf; margin: 10px 20px; width: 95%; padding-top: 10px;}
.menu-page td{ padding: 15px 0;}
.menu-page td a{ background: #f7941d; color: #fff; padding: 5px 10px; text-decoration: none;}
.menu-page td a.stepnext{background: #f7941d url(../images/include/stepnext.gif) no-repeat right 8px; padding-right: 30px;}
.menu-page td a.stepback{background: #f7941d url(../images/include/stepprec.gif) no-repeat left 8px; padding-left: 30px;}
.menu-page td a:hover{ background: #dc002e;}
.menu-page td a:hover.stepnext{background: #dc002e url(../images/include/stepnext-hover.gif) no-repeat right 8px;}
.menu-page td a:hover.stepback{background: #dc002e url(../images/include/stepprec-hover.gif) no-repeat left 8px;}

.mandatory{ margin: 0 20px;}
.mandatory span{ color: #dc002e;}

/* ------ ERREUR 404 ------ */
.error404{ background:url(../images/error/cones-error.jpg) no-repeat; padding-left: 220px; padding-top: 30px; width: 500px; height: 170px; margin-top: 20px; margin-left: 60px;}
.error404 h2{ background: none; border: none; margin: 0; padding: 0;}
.error404 h4{ margin: 0;}
.error404 a{ color:#F90; line-height: 1.8em;}

/* ------ SHOP ------ */
.shop{ margin-top: 15px; border-bottom: 1px dashed #666; padding-bottom: 15px;}
.shop h4{ color: #f90; margin-bottom: 10px;}
.shop .img{ float: left; width: 150px; height: 100px; overflow: hidden;}
.shop .txt{ float: left; padding-left: 15px;}
.shop .txt p{ margin: 0; margin-bottom: 10px;}
.shop .txt a:hover{ color:#f90;}
.shop .description{ padding: 0 10px;}
.shop .description h4{ color:#666;}

.shopevent { margin-top: 15px; border-bottom: 1px dashed #666; padding-bottom: 15px;}
.shopevent h4{ color: #f90; margin-bottom: 10px;}
.shopevent .img{ float: left; width: 150px; min-height: 100px; overflow:visible; min-height: 100px;}
* html .shopevent.img{height: 100px;}
.shopevent .txt{ float: left; padding-left: 15px; width: 500px; }
.shopevent .txt p{ margin: 0; margin-bottom: 10px;}
.shopevent .txt a:hover{ color:#f90;}
.shopevent .description{ padding: 0 10px;}
.shopevent .description h4{ color:#666;}

/* ------ MSG-INFO ------ */
.helpbloc{ position: relative;}
.msg-info{ background: #fff; padding: 15px; width: 300px; position: absolute; z-index: 101; left: 10px; top: 10px; border: 3px solid #666;}


/* ------ FOOTER ------ */
#footer span{ position: absolute; background:url(../images/include/corner-footer.jpg) no-repeat; width: 11px; height: 11px; left: 0; bottom: 0;}