body{
margin:0;
padding:0;
FONT-SIZE: small;
LINE-HEIGHT: normal;
font: normal 12px Verdana,Arial,Helvetica,Sans-Serif;
}

b{font-size: 110%;}
em{color: red;}


#header{
width: 970px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
height: 93px;
background: #000000 url(../images/banniere.jpg);
border-right: solid 1px #000000;
border-left: solid 1px #000000;
}

#maincontainer{
width: 970px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
border-right: solid 1px #000000;
border-left: solid 1px #000000;
BACKGROUND: #EAEAEA url(../images/bg.jpg) ;
}

#ajaxcontainer{
margin: 0 auto; /*Center container on page*/
height: 340px;

}

#topsection{
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#topmenu h1{
margin: 0;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column in pixel*/
margin-left: -970px; /*Set margin to that of -(MainContainerWidth)*/
}

#rightcolumn{
float: left;
width: 210px; /*Width of right column*/
margin-left: -210px; /*Set left margin to -(RightColumnWidth)*/

}

#videotheque{
clear: left;
width: 100%;
padding: 4px 0;
text-align: center;
height: 180px;
margin: 20px auto;

}

#espace{
clear: left;
width: 100%;
padding: 4px 0;
text-align: center;
height:10px;
margin: 20px auto;

}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
padding: 4px 0;
height: 70px;
margin: auto;
font: normal 10px Verdana,Arial,Helvetica,Sans-Serif;
line-height: 1.4;
}



.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/*---------------------------------------------------------------------------------------*/
/*                                   Barre de menu                                       */
/*---------------------------------------------------------------------------------------*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 700px;
margin-left: 45px;
margin-top: 4px;
}

* html #aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 700px;
margin-left: 45px;
margin-top: 4px;
}

#aerobuttonmenu ul{
margin: 0;
padding: 0;
}

#aerobuttonmenu li{
display: inline;
margin: 0;
}

#aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('../images/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Verdana,Arial,Helvetica,Sans-Serif;
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 5px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

#aerobuttonmenu a.aero:link, #aerobuttonmenu a.aero:visited, #aerobuttonmenu a:active{
color: #000000; /*button text color*/
}

#aerobuttonmenu a.aero span{
background: transparent url('../images/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/

}

#aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

#aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: #FF9900;
}

.black a.aero{
background-image: url('../images/aeroleftblack.gif');
}

.black a.aero span{
background-image: url('../images/aerorightblack.gif');
}

#aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

#aerobuttonmenu .rightsection a{
color: navy;
}


/*---------------------------------------------------------------------------------------*/
/*                                  Menu gauche                                     */
/*---------------------------------------------------------------------------------------*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cadrelistmenu {
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
padding: 4px 0 4px 10px; /*header text is indented 10px*/
border-left: 1px solid #dadada;
border-right: 1px solid #dadada;
}

.cadrelistmenutop {
background-image: url(../images/main_one.png);
height: 24px;
width: 180px;
color:#FFFFFF;
text-align:center;
font-weight:bold;
}

.cadrelistmenubas {
background-image: url(../images/main_two.png);
height: 24px;
width: 180px;
color:#FFFFFF;
margin-top: -24px;
}

.arrowlistmenu{
width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(../images/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(../images/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

/*---------------------------------------------------------------------------------------*/
/*                               siute menu gauche                                  */
/*---------------------------------------------------------------------------------------*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: url(../images/main_one.png) no-repeat; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: -2px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .bottombar{
font: bold 13px Verdana;
color: white;
background: url(../images/main_two.png) no-repeat; /*last 2 values are the x and y coordinates of  /*last 2 values are the x and y coordinates of bullet image*/
margin-top: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}


/*---------------------------------------------------------------------------------------*/
/*                                img publicite                                   */
/*---------------------------------------------------------------------------------------*/

.pub 
{

padding-top: 15px}

.pub img 
{
border: solid 1px #CCCCCC;
}

/*---------------------------------------------------------------------------------------*/
/*                               defilement   et ecran                              */
/*---------------------------------------------------------------------------------------*/

#ecran	{
color:#000000;
	}


div#wn	{ 
    position:relative; 
    WIDTH: 858px; 
	height:150px; 
    overflow:hidden;
	margin: 10px;
	background:  url(../images/videothek.jpg); margin-top: 35px;
	}
	
div#wn .titre	{
color:#A70303;
font-weight: bold;
}


div#wn	img 
{
border: solid 3px #CCCCCC;
}

/*------------------ DEBUT -----------------------------*/

div#wn2	{ 
	position:relative; 
    WIDTH: 858px; 
	height:150px; 
    overflow:hidden;
	margin: 10px;
	background:  url(../images/videothek.jpg); margin-top: 35px;
	}
    
 
/* for glide onclick scrolling to glide image into center of scroll area, 
set table width = width of td's X number of td's (images) */   
table#t2 {
    width:800px;
    }
table#t2 td {
    width:200px; vertical-align:bottom; text-align:center;
    }
    
table#t2 td img { 
    vertical-align:bottom; 
    }
    
div.scroll_controls {
    display:block; /* display:none initially */
    position:relative;
    margin:8px 0 2em 6px;
    width:184px;
    }
    
div#scrollLinks2 {
    margin-top:0;
    }
    
/* to position right arrows */
div.scroll_controls a.rt {
    position:absolute;
    right:0;
    }

/* needed for gecko-based browsers when using strict doctype (image gap issue) */   
div#scrollbar img {
    display:block;
    }
div#scrollbar { 
  position:relative; 
  width:184px; height:11px;
  font-size:1px; /* for ie5.5 */
  }
div#track { 
  position:absolute; left:12px; top:0;
  width:160px; height:11px; 
  background: #336;
  }
div#dragBar {
  position:absolute; left:1px; top:1px;
  width:20px; height:9px; 
  background-color:#ceced6
  }  
div#left { position:absolute; left:0; top:0; }  
div#right { position:absolute; right:0; top:0;  }

/*---------------------- FIN --------------------------*/

/*----------------------------------------------*/	
/* NAVIGATION: =nav
----------------------------------------------- */
.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}

/*---------------------------------------------------*/
/*   galerie										 */
/*---------------------------------------------------*/

#gallery {
  height:320px;
  display:none;
}
#slideshow {
  display:none;
}
.gcap {
  font-size:xx-small;
  margin:3px; padding:0;
}
.scap {
  font-size:xx-small;
  margin:3px; padding:0;
}
.gcon { /* gallery image/caption container */
  width:114px;
  height:120px;
  margin:10px;
  background:#FFFFFF;
  border:1px solid #FFCC00;
  float:left;
}
.scon { /* slideshow image/caption container */
  width:480px;
  margin:10px;
  background:#CFD4E6;
  border:1px solid #BF8660;
}
#gallery img {
  margin:6px 6px 3px 6px;
  background: #FFFF66;
}
#slideshow img {
  margin:6px 6px 3px 6px;
  background:#CFD4E6;
}
#navigation {
/*  text-align:center; */
}
#prev, #next, #back, #auto, #time {
  color:#BF8660;
  cursor:pointer;
  font-weight:bold;
  margin-right:20px;
}
.clearAll {
  clear:both;
  margin:0; padding:0;
}

/*---------------------------------------------------*/
/*   Grille										 */
/*---------------------------------------------------*/
#grille 
{
margin-left: 25px;
}


/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
    font-size: 12px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url(../images/tab.png) no-repeat;
	}
.ui-tabs-nav a {
    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    color: #000;
}
.ui-tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-bottom: 1px;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
    background-position: 100% -150px;
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
    background-position: 100% -100px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
    background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
    background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-panel {
    border-top: 1px solid #97a5b0;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}

#programme
{
font: 13px Arial, Helvetica, sans-serif;

}


#orange
{
background-color:#EFEFEF;
}

#gris
{

}