/* -----------------------------------------------------------------------Cadre global-------------------------------------------------------------------*/
/* cadre principal */
#cadre {
    height:310px;
    width: 522px;
    float:left;
    background-image:url('../../fr/images/fond_videos.png');
    background-repeat:no-repeat;
    background-position:left bottom;
    margin-left:20px;
    top: -450px;
    position:relative;
   */
}


/* -----------------------------------------------------------------------Onglets------------------------------------------------------------------------*/
/*
Balise UL onglets
*/

#onglets {
height: 46px;
}


#onglets ul {
    float: left;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px;
    list-style: none;
    width:521px;
    height:44px

}

/*
Balise LI onglets
*/
#onglets ul li {
    float: left;
    margin-left: 0px;
    width:162px;
    height:44px;
    background-image:url('../../fr/images/bande_menu.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;

}

/*
Balise LI - actif de l onglets
*/
#onglets ul li.actif {
    height:44px;
    width: 160px;
    float:left;
    text-decoration:none;
    text-align:center;
    background-image:url('../../fr/images/onglet_actif.gif');
    background-repeat:no-repeat;
    background-position:left bottom;
    color:#518cac;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold

}

/*
Balise LI - Bord gauche de l onglets
*/
#onglets ul li#bord_gauche {
  float: left;
  margin-left: 0px;
  width:18px;
  height:44px;
  background-image:url('../../fr/images/bord_arrondi_gauche.jpg');
  background-repeat:no-repeat;
  background-position:bottom right;
  border:0px
}

/*
Balise LI - Bord droite de l onglets
*/
#onglets ul li#bord_droite {
  float: left;
  margin-left: 0px;
  width:18px;
  height:44px;
  background-image:url('../../fr/images/bord_arrondi_droite.jpg');
  background-repeat:no-repeat;
  background-position:bottom right;
  border:0px
}


/*
Balise A onglets
*/
#onglets ul li a {
    height:44px;
    width: 160px;
    float:right;
    text-align:center;
    margin-top:0px;
    text-decoration:none;

}

/*
Balise SPAN onglets
*/
#onglets ul li a span {
    height:20px;
    float:right;
    margin-top:20px;
    margin-right:60px;
    text-decoration:none;
    text-align:center;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    }

/*
Balise SPAN - ACTIF   de l onglets
*/
#onglets ul li.actif a span {
    height:20px;
    width:160px;
    float:left;
    margin-top:20px;
    text-decoration:none;
    text-align:center;
    color: #518cac;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold
    }

/*
Balise A de l onglets avec l element hover = reaction au passage du curseur sur l element
*/
#onglets ul li a:hover {
    height:44px;
    width: 160px;
    float:left;
    background-image:url('../../fr/images/onglet_actif.gif');
    background-repeat:no-repeat;
    background-position:left bottom;
}

/*
Balise A de l onglets avec l element hover = reaction au passage du curseur sur l element + Element SPAN
*/
#onglets ul li a:hover span {
    height:44px;
    width: 160px;
    float:left;
    text-decoration:none;
    text-align:center;
    color:#518cac;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold
}

/*
Balise A de l onglets avec l element focus = reaction à l acces à l element , par clavier
*/
#onglets ul li a:focus {
    height:44px;
    width: 160px;
    float:left;
    text-decoration:none;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#518cac;
}

#onglets ul li a:focus span {
    height:44px;
    width: 160px;
    float:left;
    text-decoration:none;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#518cac;
}

#onglets span.inactif {
    height:20px;
    width: 160px;
    float:left;
}



/* -----------------------------------------------------------------------cadre contenu-------------------------------------------------------------------*/
/*
Cadre du contenu central
*/
#cadrecontenu {
    height:245px;
    width: 500px;
    float:left;
    margin-left:0px;
    margin-top:0px
}


/* -----------------------------------------------------------------------Videos-------------------------------------------------------------------*/
/*
Cadre videos
*/
#videos {
    height:245px;
    width: 500px;
    float:left;
    margin-left:0px;
    margin-top:10px
}

#videos ul{
    height:245px;
    width: 500px;
    float:left;
    margin-left:0px;
    margin-top:0px
}

#videos ul li{
    height:245px;
    width: 500px;
    float:left;
    margin-left:-25px;
    margin-top:0px;
    list-style:none;
}




/* -----------------------------------------------------------------------Gallery------------------------------------------------------------------------*/
/* default link style - needed to make the :active work correctly in IE */

/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
	width:480px;
	height:230px;
	float:left;
	background:url("../../gallery/surlaroute_fond-gallerie_en.gif") no-repeat;
	margin:0px auto 20px 20px;
}

/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
	padding:0;
	margin:230px 20px 0 0;
	list-style-type:none;
	position:relative;
	width:480px;
}

/* remove the default image border */
.gallery img {
	border:0;
}

/* make the list horizontal */
.gallery li {
	float:left;
	margin-left:48px
}

/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
	float:left;
	text-decoration:none;
	color:#4591b5;
	background:#fff;
	text-align:center;
	width:26px;
	height:26px;
	line-height:24px;
/*	border:1px solid #444;*/
	margin-left:10px;
}

/* position the images using an absolute position and hide them from view */
.gallery li a img {
	position:absolute;
	top:-320px;
	left:0;
	visibility:hidden;
	border:0;
}

/* fix the top position for the landscape images */
.gallery li a img.landscape {
	top:-230px;
}

/* fix the left position for the portrait images */
.gallery li a img.portrait {
	left:0;
	border-left:40px solid #eee;
	border-right:40px solid #eee;
}

/* style the hover background color for the text boxes */
.gallery li a:hover {
	background:#ddd;
}

/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
	background:#4591b5;
	color:#fff;
}

/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
	visibility:visible;
}

.grandeimage {
	width:620px;
	height:432px;
	position:absolute;
	top:200px;
	left:50%;
	visibility:hidden;
}

.contenu_grandeimage {
	display:block;
	height:430px;
	width:620px;
	position:absolute;
	top:-150px;
	left:-470px;
}

.contourimage {
	border-style: solid;
	border-width: 20px;
	border-color:#4591b5;
	background-color:white;
	}

/*-----------------------------------------------------------------------Usages---------------------------------------------------------------*/

/*
Cadre videos
*/
#usages {
    height:245px;
    width: 500px;
    float:left;
    margin-left:0px;
    margin-top:10px;
}

#usages ul{
    height:245px;
    width: 475px;
    float:left;
    margin-left:0px;
    margin-top:0px;
    overflow:auto;
}

#usages ul li{
    height:120px;
    width: 460px;
    float:left;
    margin-left:-25px;
    margin-top:0px;
    list-style:none;
   	font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #4591b5;
    font-weight:normal;
    font-weight:bold;
    text-align:justify;

}

#usages ul li p{
	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#83837F;
    font-weight:normal;
    font-weight:bold;
    text-align:justify;
}

#usages ul li a{
	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#83837f;
    font-weight:normal;
   	text-decoration:none;
}


#usages ul li b{
	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:black;
    font-weight:normal;
    font-weight:bolder;
    text-align:justify;
}


#commentaires {
    height:245px;
    width: 500px;
    float:left;
    margin-left:0px;
    margin-top:10px;
}

#commentaires ul{
    height:245px;
    width: 475px;
    float:left;
    margin-left:0px;
    margin-top:0px;
    overflow:auto;
}

#commentaires ul li{
    height:145px;
    width: 260px;
    float:left;
    margin-left:80px;
    margin-top:70px;
    list-style:none;
   	font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #87A93E;
    font-weight:normal;
    font-weight:bold;
    text-align:justify;

}

#commentaires ul li p{
	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#83837F;
    font-weight:normal;
    font-weight:bold;
    text-align:justify;
}