@charset "utf-8";
/* CSS Document */

/*
///////////////////////////////////
GLOBAL
///////////////////////////////////
*/

*{
margin:0;
padding:0;
}

body{
background:url(../images/background_lighter.png) top left repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
}

#global{
background:url(../images/shadow.png) top left repeat-y;
position:relative;
margin:0 auto 12px auto ;
width:955px;
}

a{
outline:none;
color:#294de9;
}

a:hover{
text-decoration:none;
}

a img{
border:none;
}

a.back{

}

br{
clear:both;
}

br.clear-left{
clear:left;
}

/*SearchHighlight*/
span.hilite{
background:yellow;
text-decoration:underline;
}

/*
///////////////////////////////////
FORM
///////////////////////////////////
*/

input{
float:left;
background:url(../images/input.jpg);
border:none;
height:19px;
padding:2px 10px 0 10px;
}

#news input{
width:110px;
}

#search-menu input{
width:108px;
}

#news input.btn{
background:url(../images/input-submit-newsletter.jpg);
border:none;
width:37px;
height:21px;
cursor:pointer;
}

#search-menu span.select{
position:absolute;
background:url(../images/select.png);
border:none;
width:98px;
height:21px;
padding:0 20px 0 10px;
color:#000000;
font-size:11px;
overflow:hidden;
line-height:20px;
}

#search-menu select{
position:relative;
width:195px;
}

#search-menu input{
background:url(../images/input.png);
width:81px;
}

#search-menu input.btn{
background:url(../images/search-btn.png);
border:none;
width:27px;
height:21px;
cursor:pointer;
}

#search-menu p{
margin:15px 0;
}

#search-materiel-form option{
margin:0 0 0 12px;
}

.rss{
display:block;
height:22px;
float:right;
padding-left:20px;
background:url(../images/rss.gif) top left no-repeat;
}

#paypal-form input{
background:none;
width:90px;
height:27px;
margin:8px 0 0 0;
padding:0;
}

/*
///////////////////////////////////
BANNER
///////////////////////////////////
*/

#banner{
background:url(../images/banner.jpg) top left no-repeat;
width:900px;
height:163px;
margin:auto;
}

h1#zone-logo{
float:left;
margin-top:30px;
height:120px;
width:250px;
}

h1#zone-logo a{
display:block;
height:120px;
width:250px;
text-indent:-5000px;
}

#search-menu{
float:right;
width:150px;
height:100px;
margin:20px 5px 0 0;
}


/*
///////////////////////////////////
CONTENT
///////////////////////////////////
*/

#content{
display:inline;
float:right;
margin:5px 25px 0 0;
width:670px;
}

#content #slideshow{
margin-bottom:35px;
}

#content .box-promo{
float:left;
width:326px;
height:120px;
margin:0 6px 40px 0;
}

#content .box-article{
float:left;
width:530px;
margin:0 6px 26px 0;
}

#content p{
line-height:16px;
}

#content h1{
font-size:18px;
margin:0 0 25px 0;
color:#333;
}

#content h1 span{
font-size:12px;
vertical-align:middle;
padding:0 0 3px 0;
}

#content table.img{
float:left;
margin:0 16px 0 0;
height:90px;
width:90px;
}

#content table.img td{
vertical-align:middle;
}


#content .logo{
margin:0 0 4px 0;
}

#content .box-promo h2, 
#content .box-promo h2 a{
font-size:12px;
color:#294de9;
margin:4px 0 4px 0;
text-transform:uppercase;
text-decoration:none;
}

#content .box-article h2 a, #content .box-article h2{
font-size:14px;
color:#ff0000;
margin:0 0 4px 0;
text-transform:uppercase;
font-weight:normal;
margin:0 0 6px 0;
}

#content .box-article h2 a{
text-decoration:none;
}

#content .box-article h2 a span, #content .box-article h2 span{
color:#666;
font-style:italic;
}

#content .box-article h3 a, #content .box-article h3{
text-align:justify;
overflow:hidden;
width:420px;
}

#content .box-article h3 a{
text-decoration:none;
}

#content .box-article h3 span.designation{
font-size:11px;
color:#294de9;
margin:0 4px 4px 0;
text-transform:uppercase;
font-weight:bold;
text-decoration:underline;
}

#content .box-article h3 p, #content .box-article h3 p a{
display:inline;
font-size:11px;
color:#666;
text-decoration:none;
text-transform:none;
font-weight:normal;
}

#content .box-prix{
background:url(../images/filet.jpg) top left no-repeat;
text-align:center;
float:right;
width:105px;
padding:0 0 0 15px;
min-height:85px;
}

#content .box-prix h4{
color:#294de9;
text-transform:uppercase;
font-weight:normal;
font-size:14px;
}

#content .box-prix .prix-barre{
text-decoration:line-through;
font-size:12px;
padding:8px 0 0 0;
}

#content .box-prix .prix{
position:relative;
font-size:24px;
color:#ff0000;
font-weight:bold;
letter-spacing:1px;
margin:14px 0 0 0;
padding:2px; /*Bug IE*/
}

#content .box-promo .prix-barre{
float:left;
text-decoration:line-through;
font-size:12px;
padding:8px 0 0 0;
margin:0 16px 0 0;
}

#content .box-promo .prix{
position:relative;
font-size:24px;
color:#ff0000;
font-weight:bold;
letter-spacing:1px;
padding:2px; /*Bug IE*/
}

#content .prix sup{
font-size:14px;
}

#content .box-rando{
margin:0 0 35px 0;
overflow:hidden;
}

#content .box-rando h3{
color:#294de9;
text-transform:uppercase;
font-weight:normal;
font-size:14px;
margin:0 0 3px 0;
}

#content .box-rando p{
margin:0 0 3px 0;
}


#content .box-rando p span{
font-weight:bold;
color:#333;
}

#content .box-rando .rando-date{
font-size:12px;
font-weight:bold;
color:#ff0000;
margin:0 0 6px 0;
}

#content .box-rando div{
float:left;
}

#content .box-rando div.rando-right{
float:right;
}

#content .box-lien{
margin:0 0 8px 0;
}

#content .box-lien span{
color:#333;
font-weight:bold;
}

#content .box-contact h2{
color:#294de9;
margin:0 0 8px 0;
}

#content .box-contact p{
margin:0 0 6px 0;
}

#content .info-contact{
float:right;
}

#content .contact-italic{
font-size:10px;
font-style:italic;
}

#img-contact{
position:relative;
display:inline;
float:left;
margin:15px 0 0 25px;
}

iframe{
float:left;
}

.detail-link{
background:url(../images/puce.gif) 0 3px no-repeat;
display:block;
margin:6px 0 0 0;
padding-left:14px;
color:#FF9900;
font-size:10px;
}


/*
///////////////////////////////////
NEWS & NEWSLETTER
///////////////////////////////////
*/

#news {
float:left;
list-style-type:none;
display:inline;
margin:26px 0 0 37px;
width:185px;
clear:left;
}

#news ul#newsflash{
list-style-type:none;
}

#news ul#newsflash li{
background:#fff;/*bug opacity*/
text-align:justify;
min-height:80px;
}

* html #news ul#newsflash li{
height:80px;/*HACK ie6*/
}

#news h2{
font-size:14px;
text-transform:uppercase;
margin:0 0 8px 0;
color:#294de9;
}

#news h2.red{
color:#ff0000;
}

#news h3{
font-size:12px;
font-weight:bold;
margin:0 0 4px 0;
}

/*
///////////////////////////////////
MENU TOP
///////////////////////////////////
*/

ul#menu-top{
display:inline;
list-style-type:none;
overflow:hidden;
float:right;
margin:5px 35px 0 0;
}

ul#menu-top li{
float:left;
}

ul#menu-top li a{
display:block;
height:17px;
text-indent:-5000px;
}

ul#menu-top li a.accueil{
background:url(../images/menu-top/accueil.gif) top left no-repeat;
width:62px;
}

ul#menu-top li a.promo{
background:url(../images/menu-top/promo.gif) top left no-repeat;
width:64px;
}

ul#menu-top li a.rando{
background:url(../images/menu-top/rando.gif) top left no-repeat;
width:65px;
}

ul#menu-top li a.liens{
background:url(../images/menu-top/liens.gif) top left no-repeat;
width:59px;
}

ul#menu-top li a.contact{
background:url(../images/menu-top/contact.gif) top left no-repeat;
width:62px;
}

ul#menu-top li a.promo:hover,
ul#menu-top li a.rando:hover,
ul#menu-top li a.liens:hover,
ul#menu-top li a.contact:hover,
ul#menu-top li a#active{
background-position:0 -17px;
}

/*
///////////////////////////////////
MENU LEFT
///////////////////////////////////
*/

div#corner{
display:inline;
float:left;
width:208px;
margin:25px 0 0 25px;
}

div#menu-left{
background:url(../images/menu-left/menu-middle.jpg) top left repeat-y;
}

div#corner div#corner-top{
background:url(../images/menu-left/menu-top.jpg) top left no-repeat;
width:208px;
height:19px;
}

div#corner div#corner-bottom{
background:url(../images/menu-left/menu-bottom.jpg) top left no-repeat;
width:208px;
height:20px;
}

div#menu-left ul#nav{
background:url(../images/menu-left/velo-menu.jpg) 100% 100% no-repeat;
/background:url(../images/menu-left/velo-menu.jpg) 90% 100% no-repeat;
width:206px;
list-style-type:none;
overflow:hidden;
}

div#menu-left ul#nav li{
margin:0 0 4px 12px;
}

div#menu-left ul#nav li span{
display:block;
height:20px;
width:200px;
text-indent:-5000px;
cursor:pointer;
}

div#menu-left ul#nav li span#velos{
background:url(../images/menu-left/velos.png) top left no-repeat;
}

div#menu-left ul#nav li span#composants{
background:url(../images/menu-left/composants.png) top left no-repeat;
}

div#menu-left ul#nav li span#peripheriques{
background:url(../images/menu-left/peripheriques.png) top left no-repeat;
}

div#menu-left ul#nav li span#roues-pneus{
background:url(../images/menu-left/roues-pneus.png) top left no-repeat;
}

div#menu-left ul#nav li span#accessoires{
background:url(../images/menu-left/accessoires.png) top left no-repeat;
}

div#menu-left ul#nav li span#habillement{
background:url(../images/menu-left/habillement.png) top left no-repeat;
}

/*
///////////////////////////////////
MENU LEFT (SS MENU)
///////////////////////////////////
*/

div#menu-left ul#nav ul.ss-menu,
div#menu-left ul#nav ul.open_at_load{
list-style-type:none;
margin:6px;
}

div#menu-left ul#nav ul.ss-menu li,
div#menu-left ul#nav ul.open_at_load li{
list-style-type:none;
margin:0;
padding:0;
}


div#menu-left ul#nav ul.ss-menu a,
div#menu-left ul#nav ul.open_at_load a{
background:url(../images/puce-menu.gif) 0 4px no-repeat;
display:block;
color:#999;
font-size:10px;
text-indent:0;
text-decoration:none;
height:16px;
margin:4px 0 4px 0;
padding-left:10px;
}

div#menu-left ul#nav ul.ss-menu a:hover,
div#menu-left ul#nav ul.open_at_load a:hover,
div#menu-left ul#nav ul.open_at_load a.active
{
text-decoration:underline;
color:#fff;
}

/*
///////////////////////////////////
FOOTER
///////////////////////////////////
*/

#footer{
background:url(../images/footer.jpg) bottom left no-repeat;
display:inline-block;
clear:both;
text-align:center;
padding:55px 0 28px 0;
font-size:10px;
width:100%;
}

#footer #barre{
position:relative;
background:#333;
height:9px;
width:900px;
margin:0 25px 6px 25px;
}

#velo-footer{
position:absolute;
display:block;
top:-52px;
left:835px;
}

/*
///////////////////////////////////
PIXFACTORY
///////////////////////////////////
*/

#pixfactory{
margin:0 auto 8px auto;
}

#pixfactory a{
padding-top:6px;
margin:auto;
display:block;
height:20px;
width:200px;
color:#999;
font-size:10px;
text-decoration:none;
}

#pixfactory a:hover{
text-decoration:underline;
}