/**********************************************************/
/* =RESET *//*1821*/
/**********************************************************/
/* eric meyer v1.0 | 20080212 */

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

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

/**********************************************************/
/* =CSS */
/**********************************************************/

/* CSS Document */

body { font-family:Verdana, Geneva, sans-serif; font-size:11px; background-color:#c6001f; color:#707070; background-image:url(../images/bg.png); background-repeat:repeat-x; background-position:top; }

a { text-decoration: none; }
a:link, a:visited { color: #FFF; }
a:hover, a:active { color: #FFF; text-decoration: underline; }


#wrapper { width: 820px; margin: 0 auto 0 auto; position: relative; }
#logo { position: absolute; top: 10px; left: 0px; width: 188px; height: 84px; }
#live-bt { position:absolute; top: 75px; right: 30px; width: 270px; height:51px;}

#content { background-image: url(../images/contener.png); background-repeat: no-repeat; background-position: center; width: 820px; height: 430px; top: 110px; position:absolute; z-index:1; }

#img-content { position:absolute; left: -30px; top: 10px;}

#news { position: absolute; top: 10px; right: 45px; height:145px; width:375px; }
.news { height:25px; padding:2px; border-bottom : 1px solid #d3d3d3; }
#news-slide { position: absolute; top: 155px; right: 40px; height:130px; letter-spacing:1px; }
#news-img { width:170px; height:100px; border:1px solid #ccc; margin:7px 5px 5px 0; float:left; }
.button { background:#d2001f; color:#fff; padding:1px; font-weight:100; display:block; float:right; margin-top:3px; cursor:pointer; }
.more { cursor:pointer; }
.more:hover { font-weight:bold; }
.title { color:#d2001f; text-transform:uppercase; font-weight:bold; font-size:16px; margin-top:6px; margin-bottom:5px; display:block; }

#sponsors { background-image: url(../images/footer.png); background-repeat: no-repeat; background-position: center; width: 821px; height: 95px; top: 460px; position:absolute; z-index:1; }

div #sponsors a, div.nav a:link, div.nav a:visited { display:block;}
div #sponsors a:hover img { visibility: hidden;}

#villereims { position: absolute; width: 47px; height: 54px; top: 20px; left: 15px; z-index: 30; background-image: url(../images/sponsors-over_03.gif);}
#sanei { position: absolute; width: 109px; height: 54px; top: 20px; left: 68px; z-index: 30; background-image: url(../images/sponsors-over_05.gif);}
#caillot { position: absolute; width: 98px; height: 54px; top: 20px; left: 180px; z-index: 30; background-image: url(../images/sponsors-over_07.gif);}
#kappa { position: absolute; width: 71px; height: 54px; top: 20px; left: 290px; z-index: 30; background-image: url(../images/sponsors-over_09.gif);}

#triangle { position: absolute; width: 55px; height: 54px; top: 20px; left: 375px; z-index: 30; background-image: url(../images/sponsors-over_11.gif);}
#caisse-e { position: absolute; width: 44px; height: 54px; top: 20px; left: 450px; z-index: 30; background-image: url(../images/sponsors-over_13.gif);}
#leclerc { position: absolute; width: 151px; height: 54px; top: 20px; right: 165px; z-index: 30; background-image: url(../images/sponsors-over_15.gif);}
#frey { position: absolute; width: 145px; height: 54px; top: 20px; right: 15px; z-index: 30; background-image: url(../images/sponsors-over_17.gif);}
#schuller { position: absolute; width: 123px; height: 54px; top: 20px; right: 0px; z-index: 50; background-image: url(../images/sponsors-over_19.gif);}

#footer { color:#FFF; top: 670px; position:absolute; left: 532px; display:block; text-align:right; }

h1 { border-bottom : 5px solid #bababa; font-size:22px; color:#bababa; margin-top: 5px;}
h1 p { color: #c6001f; display:inline; margin:0; padding:0; }

#boutique { position: absolute; height:93px; top:315px; right:340px; }
#classement { position: absolute; height:93px; top:315px; right:40px; }
#calendrier { position: absolute; height:93px; top:315px; right:140px; }
#billeterie { position: absolute; height:93px; top:315px; right:245px; }
.big-button { width:93px; height:93px; float:left; margin:3px; }

#feuille-reims {
	float: left;
	margin:15px;
	width: 250px;
}

#feuille-visiteur {
	float: left;
	margin:15px;
	width: 250px;
}

.clear { clear:both; }

/* =DIAPO */
/*////////////*/
#main_slide {
	height: 140px;	
}
	
#diapo_btns {
	overflow:hidden;
	position:absolute;
	right: 0px;
}
	
.diapo_btn {
	float:left;
	width: 13px;
	height: 13px;
	cursor: pointer;
	margin-right:3px;
	background: url(../images/dot.png) no-repeat -13px 0px;								
}

.diapo_btn:hover {
	background: url(../images/dot.png) no-repeat 0px 0px;								
}


.panels {
	height: 130px;
	width: 375px;
	padding: 5px;						
}

/** DatePicker **/
.datepicker {
	position: absolute;
	border: 2px solid #1C3262;
	font-size: 11px;
	width: 194px;
	padding: 3px;
	height: 221px;
	background: #fff;
	line-height: normal;
}

/* header
********************************************************/
.datepicker .header {
	position: relative;
	background: #1C3262;
	height: 21px;
	padding-top: 4px;
	margin-bottom: 3px;
}

.datepicker .header .title {
	text-align: center;
	padding-top: 1px;
	margin: 0px 42px 0 20px;
}

.datepicker .header .titleText {
	color: #fff;
	font-weight: bold;
}
.datepicker .header .next,
.datepicker .header .previous,
.datepicker .header .closeButton {
	position: absolute;
	width: 15px;
	height: 15px;
	background: #fff;
	text-align: center;
	color: #666;
	top: 5px;
	cursor: pointer;
}
.datepicker .header .previous {
	left: 5px;
}
.datepicker .header .next {
	right: 28px;
}
.datepicker .header .closeButton {
	right: 5px;
}

/* body
********************************************************/
.datepicker .body {
	position: relative;
	top: 0px;
	left: 0px;
	width: 194px;
	border-right: 2px solid #fff;
	height: 193px;
	overflow: hidden;
}

/* time
********************************************************/
.datepicker .time {
	width: 100%;
	height: 100%;
	background: #eee;
}

.datepicker .time .hour,
.datepicker .time .separator,
.datepicker .time .minutes {
	border: 1px solid #ccc;
	background: #fff;
	width: 50px;
	font-size: 32px;
	position: absolute;
	top: 50px;
	text-align: center;
	padding: 2px;
}

.datepicker .time .hour {
	left: 30px;
}
.datepicker .time .separator {
	background: transparent;
	border: 0px;
	width: 10px;
	left: 91px;
}

.datepicker .time .minutes {
	left: 110px;
}
.datepicker .time .ok {
	position: absolute;
	top: 105px;
	width: 136px;
	left: 30px;
	font-size: 20px;
}

/* days-grid
********************************************************/
.datepicker .days .day {
	float: left;
	background: #ccc;
	cursor: pointer;
	text-align: center;
	padding-top: 4px;
	width: 25px;
	overflow: hidden;
	height: 21px;
	margin: 0 3px 3px 0;
}

.datepicker .days .day0 {
	margin-right: 0;
}

.datepicker .days .week5 .day {
	margin-bottom: 0;
}

/* days-colors
********************************************************/
.datepicker .days .title {
	background: #5D6E95;
	font-weight: bold;
	color: #fff;
	cursor: default;
}

.datepicker .days .otherMonth {
	background: #eee;
	color: #aaa;
}

/* months
********************************************************/
.datepicker .months .month {
	float: left;
	background: #eee;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	width: 62px;
	height: 31px;
	padding-top: 15px;
	margin: 0 3px 3px 0;
}

.datepicker .months .month3,
.datepicker .months .month6,
.datepicker .months .month9,
.datepicker .months .month12 {
	margin-right: 0;
	width: 64px;
}

.datepicker .months .month10,
.datepicker .months .month11,
.datepicker .months .month12 {
	margin-bottom: 0;
}

/* years
********************************************************/
.datepicker .years .year {
	float: left;
	background: #eee;
	cursor: pointer;
	text-align: center;
	padding-top: 11px;
	width: 46px;
	overflow: hidden;
	height: 25px;
	margin: 0 3px 3px 0;
}

.datepicker .years .year3,
.datepicker .years .year7,
.datepicker .years .year11,
.datepicker .years .year15,
.datepicker .years .year19 {
	margin-right: 0;
	width: 47px;
}

.datepicker .years .year16,
.datepicker .years .year17,
.datepicker .years .year18,
.datepicker .years .year19 {
	margin-bottom: 0;
	height: 26px;
}

/* global
********************************************************/
.datepicker .selected {
	background: #8C929F !important;
	color: #fff !important;
}

.datepicker .unavailable {
	background: #edd !important;
	color: #b88 !important;
	cursor: default !important;
}

.datepicker .days .week .day:hover,
.datepicker .months .month:hover,
.datepicker .years .year:hover {
	background: #5D6E95 !important;
	color: #fff !important;
}

/**
 * SqueezeBox - Expandable Lightbox
 *
 * Allows to open various content as modal,
 * centered and animated box.
 *
 * @version		1.1 rc4
 *
 * @license		MIT-style license
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	Author
 */

#sbox-overlay {
	position: absolute;
	background-color: #000;
	left: 0px;
	top: 0px;
	zoom: 1;
}

#sbox-window {
	position: absolute;
	background-color: #fff;
	text-align: left;
	overflow: visible;
	padding: 10px;
	/* invalid values, but looks smoother! */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#sbox-btn-close {
	position: absolute;
	width: 30px;
	height: 30px;
	right: -15px;
	top: -15px;
	background: url(../images/closebox.png) no-repeat center;
	border: none;
}

.sbox-window-ie6 #sbox-btn-close {
	background-image: url(../images/closebox.gif);
}

.sbox-loading #sbox-content {
	background-image: url(../images/spinner.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#sbox-content {
	clear: both;
	overflow: auto;
	background-color: #fff;
	height: 100%;
	width: 100%;
}

.sbox-content-image#sbox-content {
	overflow: visible;
}

#sbox-image {
	display: block;
}

.sbox-content-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.sbox-content-iframe#sbox-content {
	overflow: visible;
}

/* Hides scrollbars */
.body-overlayed {
	overflow: hidden;
}
/* Hides flash (Firefox problem) and selects (IE) */
.body-overlayed embed, .body-overlayed object, .body-overlayed select {
	visibility: hidden;
}
#sbox-window embed, #sbox-window object, #sbox-window select {
	visibility: visible;
}

/* Shadows */
.sbox-bg {
	position: absolute;
	width: 33px;
	height: 40px;
}

.sbox-bg-n {
	left: 0;
	top: -40px;
	width: 100%;
	background: url(../images/bg_n.png) repeat-x;
}
.sbox-bg-ne {
	right: -33px;
	top: -40px;
	background: url(../images/bg_ne.png) no-repeat;
}
.sbox-bg-e {
	right: -33px;
	top: 0;
	height: 100%;
	background: url(../images/bg_e.png) repeat-y;
}
.sbox-bg-se {
	right: -33px;
	bottom: -40px;
	background: url(../images/bg_se.png) no-repeat;
}
.sbox-bg-s {
	left: 0;
	bottom: -40px;
	width: 100%;
	background: url(../images/bg_s.png) repeat-x;
}
.sbox-bg-sw {
	left: -33px;
	bottom: -40px;
	background: url(../images/bg_sw.png) no-repeat;
}
.sbox-bg-w {
	left: -33px;
	top: 0;
	height: 100%;
	background: url(../images/bg_w.png) repeat-y;
}
.sbox-bg-nw {
	left: -33px;
	top: -40px;
	background: url(../images/bg_nw.png) no-repeat;
}

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#fff ;
	color:#000;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
	margin:0;
	float:left;	
}

/* Just sub menu links */
#subMenusContainer a, #nav li li a{
	text-align:left;
}

/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	color:#444;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
#nav a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{

}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../img/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../img/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../img/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../img/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {	
	background:#fff;
	color:#000;	
	border:1px solid #C3D46A;
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
#nav li { 
	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
	position:relative;
	float:left;
}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
#nav{
	display:block;
	position: absolute;
	list-style:none;
	margin:0 0 0 0;
	z-index:5;
	top:15px;
	left:50px;
	text-align: center;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{	float:none; }

#nav li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
#nav li:hover ul{	margin-left: 0; }
#nav li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }