/*------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;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* accessibility */

/* accessibility divs are hidden by default, text, screenreaders and such will show these */
.accessibility, hr {
	position: absolute;
	top: -999em;
	left: -999em;
}


/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* LAYOUT */

body {
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 75.01%;
	line-height: 1.4em;
}

a, a:link a:active {
	text-decoration: underline;
	background-color: inherit;
	color: #999999;
}
a:visited {
	text-decoration: underline;
	background-color: inherit;
	color: #999999;
}
a:hover {
	text-decoration: none;
	background-color: inherit;
	color: #666;
}
/*****************basic layout *****************/
body {
	color: #333;
	background:white url(../images/header.png) repeat-x  top;
}
div#pagewrapper {
width:960px;
margin: 0 auto;
}
div#summit {color:white;height:20px;text-align:right;padding:0 50px 0 0 ;}
div#summit a{font-size:.8em;color:white;}
div#content {}
div#sidebar {
	float: left;
	width: 300px;
	display: inline;
	margin: 0 0 0 40px;
	padding:  0;
	background: url(../images/csssprite.png) no-repeat -496px 510px;
}


#sidebar .box{background:transparent url(../images/box-dte_02.png) left bottom no-repeat;margin: 0 0 2em 0;padding:0 0 10px 0;}
#sidebar .box h3{background:transparent url(../images/box-dte_01.jpg) left top no-repeat;padding:.5em;text-align:center;font-weight:normal;font-size:2em;color:white;}
#sidebar h3.rdv{background: url(../images/rdv.png) left top no-repeat;padding:.5em 0 1em 4em;text-align:left;font-weight:normal;font-size:2em;color:white;}
#sidebar h3.rdv a{color:white;text-decoration:none;background:#58CC00;}
#sidebar h3.rdv a:hover{text-decoration:underline;}

#main .box{background:transparent url(../images/boxg_02.png) left bottom no-repeat;margin: 0 0 2em 0;padding:0 0 20px 0;}
#main .atout li{background:none;padding:0;}
#main  .box h3{background:transparent url(../images/boxg_01.jpg) left top no-repeat;padding:.5em;text-align:left;font-weight:normal;font-size:2em;color:white;}
.diagmoto{font-weight:bold;font-size:1.1em;color:#58cc00;text-transform:uppercase;font-style:italic;}

#main  .box h4{background:transparent url(../images/boxgh4.png) left top no-repeat;padding:.5em;text-align:left;font-weight:normal;font-size:1.5em;color:#58cc00;}
#main  .box p,#main  .box li{margin:1em 2em;}
#main  .box p{text-align:justify;}

#main ol{list-style:decimal;}
#main ol li{font-weight:bold;}

#main p{margin:1em 0 .5em;text-align:justify;line-height:1.6em;}
#main li{margin:1em 0em .5em 2em;line-height:1.6em;}

#main ul li{/*background:url(../images/puce.png) left 4px no-repeat;*/background:url(../images/puce_13.png) left 8px no-repeat;padding-left:15px;font-weight:normal;}



#main ul.nobkg li{font-weight:bold;font-size:1.2em;background-position:left -100px;}
#main ul.nobkg li li{font-size:.8em;background-position:left 8px;font-weight:normal;}
#main span.ol {color:#58cc00;font-weight:bold;margin:0 1em 0 0 ;}

div#main{width:565px;margin: 0 0 0 40px;float:left;display:inline;}
div#header {
	margin: 0 0 20px 0;
	padding: 0;
	height:1%;
	overflow:hidden;
}
div#header h1 a {
	background:transparent url(../images/logo.png) no-repeat left top;
	display: inline;
	float:left;
	margin:36px 0 0 10px;
	height: 115px;
	width:349px;
	text-indent: -999em;
	text-decoration: none;
}
div#header h1 {
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
}
div#header h2 {
	float: right;
	text-indent: -999em;
	line-height: 1.2em;
	font-size: 1.5em;
	margin: 20px 50px 0px 0px;
	height: 40px;
	width:275px;
	background: url(../images/csssprite.png) no-repeat right -650px;
}

ul.ptmenu{
	float: right;
	margin:130px 0px 0px 200px;
	width:400px;
	height:18px;
}
ul.ptmenu li{
	float:left;
	margin:0 10px 0 0;
	display:inline;
}
div.breadcrumbs {
	font-size:.8em;
	margin:0 0 15px 50px;
}
div.breadcrumbs span.lastitem {
	font-weight: bold;
}

blockquote {
margin:22px 40px;
padding:3px;
color:#575757;
padding: 10px 50px;
background: #efefef url("../images/blockquote.gif") no-repeat 15px 15px;
}

#main .atout{height:1%;overflow:hidden;margin:0 0 0 20px;padding:1em 0;}
#main .atout li{float:left;width:150px;margin: 0 0 0 15px;display:inline;text-align:center;padding:0;}
#main .atout li a{text-decoration:none;font-size:2em;text-transform:uppercase;}

ul.hplist{margin: 0 0 0 3px;padding:0 0 1em 0;}
ul.hplist  li{height:60px;background:transparent url(../images/hplist.png) left top no-repeat;padding:0 0 0 100px;}
ul.hplist li.cyclo{background-position:left -2px;}
ul.hplist li.moto{background-position:left -62px;}
ul.hplist li.scoot{background-position:left -122px;}
ul.hplist li.spe{background-position:left -182px;}
ul.hplist li a{font-size:1.8em;color:#58CC00;text-decoration:none;line-height:60px;}
ul.hplist li a:hover{text-decoration:underline}

ul#hpnews{padding:0 0 1em 0;margin:0 5px;}
ul#hpnews li{padding:0 0 0 20px ;margin:.5em 0;}
ul#hpnews li a{padding:0 0 0 0;text-transform:uppercase;}

div#mediaspace{width:510px; margin:0 auto;}

div#footwrapper{
	background-image: url(../images/bkg-foot.gif);
	background-repeat:repeat-x;
	background-position:right 60px;
}

div#footer {
	margin:0 auto;
	width:960px;
}

div#footer ul{float:left; display:inline;width:200px;padding:100px 0 0 0;margin:0 0 0 10px;}
div#footer ul.social{width:300px;padding:140px 0 30px 0 ;text-align:right;background:transparent url(../images/footer-logo.gif) center 15px no-repeat;}
div#footer ul.social li{padding:0 100px 1em 0;background:transparent url(../images/social.png) right top no-repeat;line-height:1em;}
div#footer ul.social li.twitter{background-position:210px 4px;}
div#footer ul.social li.facebook{background-position:210px -50px;}
div#footer ul.social li.rss{background-position:210px -105px;}
div#footer ul li a{font-size:.9em;text-decoration:none;}
div#footer ul li li a{font-size:.9em;}
div#footer ul ul{float:none;padding:0}
div#footer ul li {font-weight:bold;color:#58CC00;}
div#footer ul li li{margin:.3em 0 0 1em;}

div.error_message li{color:red;}

dl.partenaires{margin:2em;height:1%;overflow:hidden;}
dl.partenaires dt{float:left;diplay:inline;width:150px;text-align:center;}
dl.partenaires dd{overflow: hidden;margin:0 0 0 180px;width:335px;}


dl.presse{margin:20px 0;height:1%;overflow:hidden;border-bottom:1px solid #eee;padding:10px 0;}
dl.presse dt.image{float:left;diplay:inline;width:220px;text-align:center;display:block;height:110px;border:1px solid #EEE;;}
dl.presse dt.image img{margin:5px;}
dl.presse dd{float:left;width:200px;margin-left:20px;}

.contactform div{height:1%;overflow:hidden;padding:6px  0;}
.contactform .civ label, .contactform label{margin:.5em 0;float:left;display:inline;width:15em;text-align:right;color:#333;}
.contactform input,.contactform textarea {
	color:#666;
	font-size:1.4em;
	margin:2px 10px 0px 20px;
	float:left;
	display:inline;	
	width:240px;
	background: #ffffff url("../images/bg_ombre.gif")  repeat-x 0pt 1px;
	border-top-width: 1px;
border-right: 1px solid #a2a4a7;
border-left: 1px solid #9b9da0;
border-top: 1px solid #9d9fa1;
border-bottom: 1px solid #c4c5c8;
}
.radioclass{height:1%;overflow:hidden;}
.radioclass label, .checkclass label{float:none;display:block;width:auto;text-align:left;margin:.5em 2em;}
.radioclass input,.radioclass div label,.radioclass div{display:inline;float:none;width:auto;margin:0;border:none;margin:0;}
.radioclass input{margin:0 .5em 0 1em;}
.radioclass div{margin:0 0 0 3em;}

.checkclass input,.checkclass div label{display:inline;float:none;width:auto;margin:0;border:none;margin:0;}
 .checkclass div{margin:0 0 0 200px;width:auto;display:block;}

.marge{margin:0 0 0 180px;width:auto;display:block;}

.contactform .civ input,.contactform .civ div label,.contactform .civ div{display:inline;float:none;width:auto;margin:0;border:none;margin:0;}
.contactform .civ input{margin:0 .5em 0 1em;}
.contactform .civ div{margin:0 0 0 3em;}


/* as we hid all hr for accessibility we create new hr with div class="hr" element */
div.hr {
	height: 1px;
	padding: 1em;
	border-bottom: 1px dotted black;
	margin: 1em;
}
/* relational links under content */
div.left49 {
/* combined percentages of left+right equaling 100%  might lead to rounding error on some browser */
	width: 70%;
}
.right49 {
	float: right;
	width: 29%;
/* set right to keep text on right */
	text-align: right;
	margin-right:2em;
}
/********************CONTENT STYLING*********************/
/* HEADINGS */
div#content h1 {
/* font size for h1 */
	font-size: 2em;
	line-height: 1em;
	margin: 0;
}
div#content h2 {
	color:#58CC00;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	text-align: left;
	padding:0 0 1px .5em;
	line-height: 1.5em;
	text-transform:uppercase;
	font-weight:normal;
	margin: 0 0 0.5em 0;
}
div#content h3 {
	font-size: 1.3em;
	padding:0;
	line-height: 1.3em;
	margin: 0 0 0.5em 0;
	line-height: 1.3em;
	color:#58cc00;
}
div#content h4 {
	color: #919191;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
div#content h5 {
	color: #333;
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
h6 {
	color: #294B5F;
	font-size: 1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}



/* menu */
#menu_vert {
/* no margin/padding so it fills the whole div */

}
.clearb {
/* needed for some browsers */
	clear: both;
}
#menuwrapper {
	margin:5px 0 0 0;
	padding: 0;
	float:left;
	display:inline;
	width:600px;
	height:42px;
	/*background:transparent url(../images/menu.gif) left top no-repeat;*/
}
ul#primary-nav {
	list-style-type: none;
	margin: 0px;
	padding-top: 10px;
	padding-left: 10px;
}
#primary-nav ul {
/* remove any default bullets */
	list-style-type: none;
/* sets width of second level ul to background image */
	width: 210px;
	margin: 0px;
	padding: 0px;
/* make the ul stay in place so when we hover it lets the drops go over the content instead of displacing it */
	position: absolute;
/* top being the bottom of the li it comes out of */
	top: auto;
/* keeps it hidden till hover event */
	display: none;
/* room at top for li so image top shows correct */
	padding-top: 9px;
/* set your image here, tall enough for the ul */
/*	background: url(../uploads/ngrey/ultopup.png) no-repeat left top;*/
}
/* IE6 hacks on the above code */
* html #primary-nav ul {
	padding-top: 13px;
/*	background: url(../uploads/ngrey/ultopup.gif) no-repeat left top;*/
}
#primary-nav ul ul {
/* insures no top margins */
	margin-top: 0px;
/* pulls the last ul back over the preceding ul */
	margin-left: -1px;
/* keeps the left side of this ul on the right side of the preceding ul */
	left: 100%;
/* negative margin pulls the left centered in li next to it */
	top: -3px;
/* set your image here, tall enough for the ul, this is the left arrow for third level ul */
	background: url(../uploads/ngrey/ultoprt.png) no-repeat left top;
}
/* IE6 hacks on the above code */
* html #primary-nav ul ul {
	margin-top: 0px;
	padding-left: 5px;
	left: 100%;
	top: -7px;
/* IE6 gets gif as it can't handle transparent png */
	background: url(../uploads/ngrey/ultoprt.gif) no-repeat right top;
}
#primary-nav li {
/* a little space to the left of each top level menu item */
/* floating left will set menu items to line up left to right else they will stack top to bottom */
	float: left;
/*	border:1px solid yellow;*/
}
#primary-nav li li {
/* a little more space to the left of each menu item */
	margin-left: 8px;
/* keeps them tight to the one above, no missed hovers */
	margin-top: -1px;
/* removes the left float set in first li so these will stack from top down */
	float: none;
/* relative to the ul they are in */
	position: relative;
}
/* IE6 hacks on the above code */
* html #primary-nav li li {
	margin-left: 6px;
/* helps hold it inside the ul */
	width: 171px;
}
ul#primary-nav li a {
/* specific font size, this could be larger or smaller than default font size */
	font-size: 1em;
/* make sure we keep the font normal */
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	width:115px;
/* set default link colors */
	color: #fff;
	line-height:40px;
	text-align:center;
	height:40px;
/* doing tab menus require a bit different padding, this will give room on right for image to show, adjust to width of your image */
/*	padding: 0px 11px 0px 0px;*/
/* makes it hold a shape */
	display: block;
/* remove default "a" underline */
	text-decoration: none;
}

ul#primary-nav li a:hover {
/* kind of obvious */
	background-color: transparent;
}
ul#primary-nav li.first {
background:  url(../images/menu.gif) no-repeat left top;
}
ul#primary-nav li {
background:  url(../images/menu.gif) no-repeat -115px top;
}
ul#primary-nav li.last {
background:  url(../images/menu.gif) no-repeat right top;
}

ul#primary-nav li:hover,
ul#primary-nav li.menuh,
ul#primary-nav li.menuparenth{
background-position:-115px bottom;
}

ul#primary-nav li:hover.first,
ul#primary-nav li.menuh first,
ul#primary-nav li.menuparenth first{background:  url(../images/menu.gif) no-repeat left -42px;}

ul#primary-nav li:hover.last,
ul#primary-nav li.menuh last,
ul#primary-nav li.menuparenth last, ul#primary-nav li.currentpage last{background-position:right bottom;}

ul#primary-nav li.currentpage {background-position:-115px bottom;}
ul#primary-nav li.currentpage.first  {background:  url(../images/menu.gif) no-repeat left -42px;}
ul#primary-nav li.currentpage.last {background:  url(../images/menu.gif) no-repeat  right bottom;}

ul#primary-nav li li {
/* remove any image set in first level li */
	background:  none;
}

ul#primary-nav li:hover,
ul#primary-nav li.menuh,
ul#primary-nav li.menuparenth {
/* set hover image, right side */
/*	background:  url(../uploads/ngrey/navrttest.gif) no-repeat right 0px;*/
}

/* IE6 hacks, the JS used for hover effect in IE6 puts class menuh on li, unless they have a class then just an "h" as seen above and below */
ul#primary-nav li li.menuh {
	background:  none;
	font-weight: normal;
}

/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuparenth {
	background:  none;
	color: #FFF;
	font-weight: normal;
}
ul#primary-nav li.menuactive a {
/* set your image here for active tab right */
/*	background:  url(../uploads/ngrey/navrttest.gif) no-repeat right 0px;*/
}

#primary-nav li li a {
/* second level padding, no image and not as big */
	padding: 5px 10px;
/* to keep it within li */
	width: 165px;
/* space between them */
	margin: 5px;
	background: none;
}
/* IE6 hacks to above code */
* html #primary-nav li li a {
	padding: 5px 10px;
	width: 165px;
	margin: 0px;
	color: #000;
}
#primary-nav li li:hover {
/* remove image set in first level */
	background: none;
}
#primary-nav li li a:hover {
/* set different image than first level */
	background:  url(../uploads/ngrey/darknav.png) repeat-x left center;
/* we need #FFF/white to contrast with dark background */
	color: #FFF;
}

#primary-nav li li.menuactive a.menuactive, #primary-nav li li.menuactive a.menuactive:hover {
/* set your image here, lighter than hover */
	background:  url(../uploads/ngrey/nav.png) repeat-x left 0px;
/* non active is #FFF/white, we need #000/black to contrast with light background */
	color: #000;
}

#primary-nav li.menuactive li a {
/* second level active link color */
	color: #0587A9;
	text-decoration: none;
	background: none;
}
#primary-nav li.menuactive li a:hover {
/* dark image for hover */
	background:  url(../uploads/ngrey/darknav.png) repeat-x left center;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
	display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
	display: block;
}
/* IE Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}

/* REQUIRED BUTTON STYLES: */		
button { 
	position: relative;
	border: 0; 
	margin:0 0 0 200px;
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

button span { 
	position: relative;
	display: block; 
	white-space: nowrap;	
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Safari and Google Chrome only - fix margins */
  button.submitBtn span {
    margin-top: -1px;
  }
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */		
button.submitBtn { 
	padding: 0 10px 0 0; 
	margin-right:15px; 
	font-size:1.3em; 	
	text-align: center; background-color: #58cc00 ;
	/*background: transparent url(../images/csssprite.png) no-repeat right -180px; */
}

button.submitBtn span {
/*	padding: 4px 0 0 20px; */
	height:25px; 
	line-height:25px;
	padding:0 30px;
	background-color: #58cc00 ; 
	color:#fff; 
	font-weight:bold;
}
	
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
/*	background-position: right -210px; */
}
	
button.submitBtn:hover span, button.submitBtnHover span {
/*background-position:right -154px;*/
}

#buttons{display:none;}

/* Most common stuff you'll need to change */
	.coda-slider-wrapper { padding: 0 0 }
	.coda-slider {}
	.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; }
	.coda-slider, .coda-slider .panel { width: 561px } 
	.coda-slider .panel-wrapper { padding: 0px }
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }