@import url(reset.css);
@import url(typography.css);
@import url(classes.css);


/*

	-- -- -- -- -- -- -- --
	Date : 22/02/2008
	Auteur : Mad Media
	
	http://www.madmedia.fr
	-- -- -- -- -- -- -- --
	
*/


html 	{
	text-align: center;
	background: #999 url(../img/bg_accueil.gif) left top repeat-x
	}

body { 
	position : relative; 
	width: 800px; 
	margin: 0 auto; 
	text-align: left;
	background: #e3e3e3 url(../img/bg_body.gif) left top repeat-x
	}
	
/*  1. En-tête
-----------------------------------------------------------------*/

#header {
	zoom:1;
	position: relative;
	padding-top: 29px; /*margin-bottom: 7px;*/
	/*background: url(../img/branding_v2.jpg) 8px 30px no-repeat*/
	}
	
#header h1 {
	position: absolute;
	top: 8px; left: 28px;
	width: 123px; height: 57px;
	background: url(../img/logo-manchettes-sports.gif) left top no-repeat
	}

#header h1 span {
	display: block;
	text-indent: -9000px
	}

#header .cross-media a {
	display: block;
	position:absolute;
	top: 161px;
	right: 18px;
	width: 167px;
	height: 73px
	}

#header .cross-media a span {
	display: block;
	text-indent: -9000px
	}
#header .cross-media2 a {
	display: block;
	position:absolute;
	top: 70px;
	right: 17px;
	width: 167px;
	height: 73px
	}

#header .cross-media2 a span {
	display: block;
	text-indent: -9000px
	}
#header .form {
	position: absolute;
	top: 5px; right: 9px;
	width: 330px
	}
	
#form_newsletter .form .form_input {
	width:162px;
	height:16px;
	color:#999999;
	font-size:12px;
	border:#999999 1px solid;
	text-indent:3px;
	vertical-align: middle
	}

#nav {
	background: url(../img/bg_nav.gif) left top no-repeat;
	width: 785px; height: 22px;
	margin-left: 8px
	}
	
#nav li {
	margin: 2px 22px 0;
	display: inline;
	float: left
	}

#nav li a {
	display: block;
	height: 13px;
	background-position: 0 0;
	background-repeat: no-repeat;
	}

#nav li a:hover {
	background-position: 0 -13px;
	}

#nav li a span {
	display: block;
	text-indent: -9000px
	}

#nav li.accueil a {
	background-image: url(../img/btn_accueil.gif);
	width: 54px
	}	

#nav li.chiffres a {
	background-image: url(../img/btn_chiffres.gif);
	width: 88px
	}

#nav li.tarifs a {
	background-image: url(../img/btn_tarifs.gif);
	width: 37px
	}

#nav li.rdv a {
	background-image: url(../img/btn_rdv.gif);
	width: 140px
	}
	
#nav li.calendrier a {
	background-image: url(../img/btn_calendrier.gif);
	width: 126px
	}

#nav li.contacts a {
	background-image: url(../img/btn_contact.gif);
	width: 66px
	}

#nav li a.navOn {
	background-position: 0 -13px;
	}


/*  2. Contenu principal
-----------------------------------------------------------------*/

#content_main {
	margin-bottom: 13px;
	margin-top:7px;
	}

#content_main .box {
	width: 254px;
	background: #fff url(../img/bg_img_box.gif) left bottom no-repeat;
	padding-bottom: 26px;
	float: left;
	display: inline
	}

#content_main .box img {
	padding: 5px 32px 10px;
	background: #fff url(../img/bg_img.gif) left top no-repeat;
	}

#content_main .box h2 {
	width: 229px; height: 25px;
	border-top: 1px dotted #000;
	margin: 0 auto 10px
	}

#content_main .box ul {
	padding: 0 10px 18px;
	min-height: 100px
	}

#content_main .box li {
	margin-bottom: 5px;
	padding-left: 7px;
	background: url(../img/puce_content_main.gif) left 3px no-repeat
	}

#content_main .box li a {
	color: #000
	}

#content_main .box h2 span {
	display: block;
	text-indent: -9000px
	}

#content_main .b1 h2 {
	background-image: url(../img/title_marque.gif)
	}

#content_main .b2 h2 {
	background-image: url(../img/title_thematiques.gif)
	}

#content_main .b3 h2 {
	background-image: url(../img/title_specialises.gif)
	}

#content_main .b1 h2, #content_main .b2 h2, #content_main .b3 h2 {
	background-position: center 7px;
	background-repeat: no-repeat
	}

#content_main .b1, #content_main .b2, #content_main .b3  {
	margin-left: 9px
	}
    
#content_main .b1{padding-bottom:48px;}
#content_main .b2{padding-bottom:49px;}


/*  3. Contenu secondaire
-----------------------------------------------------------------*/

#content_sub {
	padding: 0 9px;
	}

#content_sub .box {
	width: 186px; height: 141px;
	float: left;
	display: inline
	}

#content_sub .b1 {
	background: url(../img/accueil/vignette-equipeMarque.gif) left top no-repeat
	}
#content_sub .b1 a {
	bottom:82px;
	_bottom:60px;
	height:141px;
	position:absolute;
	right:605px;
	width:186px;
	}
	
#content_sub .b1 a span {
	display: block;
	text-indent: -9000px;
	}
#content_sub .b1 h2, #content_sub .b1 p, #content_sub .b1 ul {
	display: none
	}

#content_sub .b2 {
	background: url(../img/accueil/vignette-pleinCadre.gif) left top no-repeat;
	position: relative
	}

#content_sub .b2 h2, #content_sub .b2 p {
	display: none
	}

#content_sub .b2 a {
	position: absolute;
	width: 186px; height: 141px;
	right: 0px; bottom: 0px
	}
	
#content_sub .b2 a span {
	display: block;
	text-indent: -9000px;
	}

#content_sub .b3 {
	background: url(../img/accueil/vignette-Immobilier.gif) left top no-repeat;
	position: relative
	}

#content_sub .b3 h2, #content_sub .b3 p {
	display: none
	}

#content_sub .b3 ul {
	position: absolute;
	left: 20px; top: 85px
	}
#content_sub .b3 a {
	background: url(../img/accueil/vignette-Immobilier.gif) left top no-repeat;
	position: absolute;
	width: 186px; height: 141px;
	right: 0px; bottom: 0px
	}
#content_sub .b3 a span {
	display: block;
	text-indent: -9000px;
	}
#content_sub .b3 li {
	background: url(../img/puce_content_sub_box4.gif) left 4px no-repeat;
	padding-left: 7px
	}
	
#content_sub .b3 li a {
	color: #001d88
	}


#content_sub .b4 {
	background: url(../img/accueil/vignette-towin.gif) left top no-repeat;
	position: relative;
	}

#content_sub .b4 a {
	background: url(../img/accueil/vignette-towin.gif) left top no-repeat;
	position: absolute;
	width: 186px; height: 141px;
	right: 0px; bottom: 0px
	}

#content_sub .b4 h2 {
	display: none
	}

#content_sub .b4 ul {
	position: absolute;
	left: 20px; top: 85px
	}
	
#content_sub .b4 li {
	background: url(../img/puce_content_sub_box4.gif) left 4px no-repeat;
	padding-left: 7px
	}
	
#content_sub .b4 li a {
	color: #001d88
	}

#content_sub .b1, #content_sub .b2, #content_sub .b3 {
	margin-right: 12px
	}
	

/*  4. Les sponsors
-----------------------------------------------------------------*/

#sponsors {
	padding: 20px 0
	}

#sponsors li {
	float: left;
	position: relative;
	height: 20px;
	margin: 0 6px;
	_margin:0 6px;
	}
	

/*  5. Le pied de page
-----------------------------------------------------------------*/

#footer {
	background: #999 url(../img/rounder_footer.gif) left top no-repeat;
	padding: 5px 0;
	text-align: right;
	color: #fff
	}

#footer ul li {
	display:inline;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	}

#footer ul li a {
	color: #fff;
	font-size: 10px;
	text-decoration: none
	}

#footer ul li span {
	margin: 0
	}