/*
	Style Sheet pour le site Web de l'Orchestre symphonique de Drummondville
	info@solutions-zen.com

*/

* {margin:0;padding:0;}

html {
  height : 100.1%;
  margin:0; padding:0;
} /* pour Opera qui met les marges dans le tag HTML */


body {
   /*background : transparent url(images/Design_pagehauteur.jpg) repeat-x 0px 0px;*/
   background-color : #2c2824;
	font : 14px 'Times New Roman',Georgia,times,serif;
	text-align:center;
   height : 100.1%;
   margin-bottom : 1px;
   color : #000000;
}

input, select, button, textarea	{
	font : 12px arial,verdana,tahoma,sans-serif;
	padding : 2px;
}

/*   COULEURS   */
.orange {color: #7f230f;}   
.vert {color: rgb(57,120,0);}   /*  #397800    */ 
.beigepale {color:#c9bca9;}


/*
textarea, input, select {
	border-top : 1px solid #222222;
	border-right : 1px solid #444444;
	border-bottom : 1px solid #555555;
	border-left : 1px solid #333333;
}
*/

/* ****************************  Formatage du texte  ***********************************/

h1 {
   font-size:32px;
   margin: 10px 0px;
   padding : 0px;      
   color: #000030;
   /*font-weight : normal;*/
}

h2 {
   font-size:26px;
   margin: 8px 0px 4px 0px;
   padding : 0px;   
   color: #333344;
   /*font-weight : normal;*/
}

h3 {
   font-size:20px;
   margin: 6px 0px 4px 0px;
   padding : 0px;
   color: #7f230f;
   /*font-weight : normal;*/
}

h4 {
   font-size:18px;
   margin: 4px 0px;
   padding : 2px 0px;
   color: #000030;
   /*background-color : #9b9285;/* pour tests*/

}
/*
p, td, th, div, blockquote, ol, ul {
	font-size : 12px;
} 						  
*/
p {
	margin : 0 0 8px 0;
	text-align : left;	
}

table {   /* équivalent à "cellspacing 0 et padding 0"*/
    border-collapse: collapse;
    border : 2px solid #333333;
    margin : 4px;
    font : 14px 'Times New Roman',Georgia,times,serif;
    text-align : left;
}

td {
   border : 1px solid #777777;
   padding: 4px;   
   vertical-align : top;
}

ul {
	margin:  6px 0px;
   list-style-type : square;
   padding: 0px;	
}

ol {
	margin:  6px 0px;
   padding: 0px;	
}

li {	
	margin : 0 0 6px 50px;
   padding: 0px;	
}		 


/* ******************************  classes pré-définies   *************************/

#overlay_filtre {
   z-index:150;
   background-color : #9999aa;
   position:absolute;
   top:0px;
   left:0px;
   display:none;
}

.note {
   background-color: #e8e2da;
   color: #7f230f;
   border : 1px solid #333333;
   /*font-weight: bold;*/
   padding:6px;
   margin: 10px 50px;
}

.img_gauche {
   float : left;
   margin :  4px 8px 4px 0px;
}

.img_droite {
   float : right;
   margin :  4px 0px 4px 8px;
}
.flotte_gauche {
   float : left;
   margin :  0px 12px 10px 0px;
}
.flotte_droite {
   float : right;
   margin :  0px 0px 10px 12px;
}



/* ******************************  les LIENS   ************************************/

a {font-weight : bold; outline : none;}
a:link {color:#003978;}
a:visited {color:#003978;}
a:hover {color:#c9bca9;} /* 998866*/
a:active {color:#aa4e0f; border:none; }

a:focus {-moz-outline-style: none;}
/* *****************************  Formatage des images   *********************************/

img {
    margin : 0px;
    padding : 0px;
    border : none;
}

/* *********************************************************** */

#complet {
   /*background : transparent url(images/contenu_vertical.jpg) repeat-y 0px 0px;*/
   background : #ffffff url(images/contenu_vertical.jpg) repeat-y top right;
	position:relative;	
	background-color : #ffffff;
   color : #000000;
	width : 900px;

	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	margin-bottom : 0px;
	padding:0px;
	text-align : left;
}

/* ******************************************************************************* */
/*                               ENTETE                                            */
/* ******************************************************************************* */

#entete {
   background : #ffffff url(images/logo_entete.gif) no-repeat  5px 1px;
   color : #000000;
   font : 12px arial,verdana,tahoma,sans-serif;
   position : relative;
   padding : 0px;
   margin : 0px;
	width : 900px;
   height :  70px;
   z-index : 25;
}
#joindre {
   float:right;
   margin:50px 4px 0px 0px;
   /*position : absolute;
   bottom : 4px;
   right : 4px;*/
   font-size : 14px;
}
#joindre a {font-weight : normal; text-decoration:none; outline : none;}
#joindre a:link {color:#000000;}
#joindre a:visited {color:#000000;}
#joindre a:hover {color:#d0c0a0;} /* 998866*/
#joindre a:active {color:#aa4e0f; border:none; }

#pied_page {
   height : 28px;
   overflow : visible;
   position  : relative;
   clear:both; 
   margin : 0px; 
   padding: 8px 8px 3px 8px;
   background-color : #2e88aa; 
   color : #ffffff;
   font-size : 12px;
}

#programmation {
   /*background : transparent url(images/Design_entete.gif) no-repeat  -60px 0px;*/
   background-color : #9b9285;
   font : 12px arial,verdana,tahoma,sans-serif;
   position : relative;
   padding : 0px;
   margin : 0px;
	width : 900px;
   /*height :  280px;*/
   z-index : 7;
}

/*
#saison_titre {
   float : right;

   padding: 8px 0px 2px 8px;
   margin:0px;
   color:#000000;
}
*/
#saison_sommaire {
   position : relative;
   clear: both;
   margin:0px 0px 0px 0px;
   padding : 0px;
   border-bottom : 1px solid #000000;
}
#saison_sommaire h4 {   
   /*text-align : right;*/
   margin : 0px 8px 0px 0px
}
#saison_sommaire ul {
   background-color : #9b9285;
   color : #c9bca9;
   float:right;
   margin: 4px 20px 0px 0px;
}
#saison_sommaire li {
   margin : 2px 2px 2px 16px;
   padding : 0px;
   font-size : 11px;
   float:left;
}

.img_concert {
   float : left;
   padding: 5px;
   margin : 10px 5px 5px 0px;
   background-color: rgb(201, 188, 169);
}
#concert_presentation {
   position : relative;
   /*float:right;
   width:615px;*/
   border-top : 1px solid #ffffff;/* pour tests*/
   margin: 0px 0px 5px 0px;
   padding : 0px 10px;
}
#concert_presentation_serie {   
   float : right;
   margin: 0px 10px 5px 15px;
  /* margin : 4px 0px 5px 0px;*/
}
#concert_presentation h3 {
   color : #277693;
   float : right;
   margin : 0px;
   padding : 8px 0px 15px 0px;
   width: 410px;
   /*text-align : center;*/
}
#concert_presentation_contenu {
   /*clear : both;*/
   color :#ffffff;
   font-size : 11px;
}
#concert_presentation ul {
   float : left;
   width : 395px;
   color : #000000;
   background-color : #c9bca9;
   padding: 1px 5px;
   margin : 0px 0px 6px 10px;
   /*font-weight : bold;*/
}
#concert_presentation li {
   margin : 2px 2px 2px 16px;
   padding : 0px;
}
#concert_presentation .details {
   float: right; 
   width: 640px;
   padding : 3px;
   margin : 4px 10px 0px 0px;
}
#concert_presentation .presentateur {
   /*  background-color : #968681;  */
   float : right;
   /*clear : right;*/
   width : 225px;
   margin: 0px 10px 5px 0px;
   text-align : right;
   font-size : 10px;
   font-style : italic;
}
#concert_presentation .programme {
   /*  background-color : #928275;  */
   float : left;
   /*clear : right;*/
   /*background-color : #000000;*/
   margin : 0 10px;
   padding : 3px;
   font-size : 11px;
}

#concert_presentation .compositeurs {
   float : left;
   /*width : 120px;*/
   padding : 0px 10px;
   font-weight: bold;
   text-align:right;
}
#concert_presentation .pieces {
   float : left;
   margin-left : 20px;
   padding : 0px 10px;
}
#concert_presentation a:hover {
   color : #000000;
}
/* ******************************************************************************* */
/*                                    MENU                                         */
/* ******************************************************************************* */

#menu_sections {   
   position : relative;
   /*float : left;*/
   background : #444444 url(images/menu_sections.jpg) repeat-x 0px 0px;
   font-family : arial,verdana,tahoma,sans-serif;
   width : 900px;
   z-index   : 10;
   padding : 1px 0px 0px 0px;
   margin : 0px;   
   height : 31px;
   margin : 0px;
}

.menu_sections_item {
   position : relative;      
   background-color : transparent;
   float:left;
   font-size : 16px;

   /*height : 30px;*/
   padding : 0px; /* pas de padding, IMPORTANT !!!*/
   margin : 0px;
   text-align : center;	
   border-right : 1px solid #9b9285;

}

.menu_sections_item span { /* éléments sans liens, padding ICI, important  !!!! */
   position : relative;
   display : block;
   text-decoration : none;
   margin  : 0px;
   padding : 4px 20px;
   overflow : hidden;
   /*height : 30px;*/
   font-weight : bold;
   
   color : #ffffff;
}

.menu_sections_item a {  /* éléments avec liens, padding ICI,  important  !!!! */
   outline : none;
   position : relative;
   display : block;
   text-decoration : none;
   margin  : 0px;
   padding : 4px 24px;
   overflow : hidden;
   /*height : 30px;*/
   font-weight : bold;
   
   color : #ffffff;
}

#menu_sections a:visited { color : #ffffff; }
#menu_sections a:hover { color : #7f230f; }
#menu_sections a:active { color : #eeeeee; }

.sous_menu {                    /* pop up! */
   /*   border : 1px solid #133666; /*test*/
	/*background-color : #ffffff; /*test*/
	position  : absolute;
	left      : 2px; /* à partir du côté gauche des "menu_item" */
	top     : 30px;
    visibility: hidden;
    z-index   : 100;              /* s'assurer d'être sur le dessus */
	
	width      : 194px;
	
	text-align : left;
    overflow : hidden;  /* pour l'effet déroulant..*/
}

#menu_sections .sous_menu a {
    outline : none;
    text-decoration:none;
    display     : block;
    font-size   : 12px;
    font-weight : bold;
    height : auto;
    margin-bottom : 2px;
    padding     : 4px;
    color       : #ffffff;
    background-color : #444444;/*#91c04c;*/
}


#menu_sections .sous_menu a:visited {color:#ffffff;}
#menu_sections .sous_menu a:active {color:#eeeeee;}
#menu_sections .sous_menu a:hover {color:#ffffff; background-color:#7f230f;}


/* ******************************************************************************* */
/*                               CONTENU                                           */
/* ******************************************************************************* */

#contenu {
   background-color : transparent;
   /*width : 900px;*/
   overflow : visible;
   margin:0px;
   padding : 0px;
   z-index : 5;
}

#contenu_pages {
   /*background : transparent url(images/bg_contenu_pages.jpg) no-repeat bottom right;*/
   position : relative;
   background-color : transparent;
   color : #000000;
   float  : left;
   width  : 720px;
   padding: 0px;
   margin : 0px;
   z-index : 8;
   height : 100%;
}

.titre_pages {
   color : #000000;
   background-color : #2e88aa;
   text-align: left;
   padding : 10px 5px;
   margin : 0px 0px 7px 0px;
}

#sections_image {
   display : none;
 padding : 0px;
 margin : 0px;
 text-align:center;
 position : relative;
 
}
#sections_image img {
   position : absolute;
   top : 0px;
   left: 0px;
   width:230px;
   height : 360px;
   padding: 0px;
   margin : 0px;
}

/* *********************************************************** */

.elements {
   clear : both;
   width : 700px;
   position : relative;
   text-align : justify;
   margin : 0px 0px 10px 10px;
}
.colonne_gauche { /* pour les colonnes du layout */
   width: 255px;
   float : left;
   margin : 0px;
   padding: 0px;
}
.colonne_droite { /* pour les colonnes du layout */
   width: 455px;
   float : right;
   margin : 0px;
   padding: 0px;
}
.elements_colonnes { /* pour les colonnes du layout */
   clear : both;
   position : relative;
   margin: 0px 10px 10px 10px;
   padding : 0px;
   text-align: justify;      
}

/* pour les colonnes des utilisateurs (panneau de gestion) */
.colonne_moitie {
   margin: 0px 10px;
   text-align: justify;
   float: left;
   width: 330px;
}
.colonne_tier {
   margin: 0px 10px;
   text-align: justify;
   float: left;
   width: 212px;
}
.colonne_quart {
   margin: 0px 10px;
   text-align: justify;
   float: left;
   width: 154px;
}

/* *********************************************************** */

/** pour les onglets.. **/
.onglets {
   z-index : 10;
   clear : both;
   width : 690px;
   position : relative;
   text-align : justify;
   padding : 5px 5px 10px 5px;
   margin : 0px 0px 10px 10px;
   display : none;
   background-color : #eeeeee;
   border-top : 1px solid #2e88aa;
   border-right : 1px solid #99aabb;
   border-bottom : 2px solid #cccccc;

}

#onglet_actif {
   display:none;
}

#menu_onglets {
   background : transparent url(images/menu_onglets_bg.jpg) repeat-x 0px 25px;
   position : relative;
   z-index : 10;
   margin : 0px 10px;
   padding: 0px;
   height: 100%;
}

#menu_onglets p {
   display : inline;
   margin : 0px;
   padding : 0px;
   line-height : 25px;
}
#menu_onglets a {
   outline : none;
   width : 100%;
   padding: 4px 12px;
   font-size : 16px;
   font-weight : normal;
   text-decoration : none;
   border-top : 1px solid #f4f4f4;
   border-right : 1px solid #cccccc;
   background-color : #e4e4e4;
}
#menu_onglets a:hover {
   border-top : 1px solid #cccccc;
   color : #000000;
   background-color : #2e88aa;
}
#menu_onglets a.onglet_selection {
   color : #ffffff;
   border-top : 1px solid #cccccc;
   background-color : #2e88aa;
}
#menu_onglets a.onglet_selection:hover {
   color : #ffffff;
   border-top : 1px solid #cccccc;
   background-color : #2e88aa;
   cursor : default;
}
/*

.onglets {
   clear : both;
   width : 690px;
   position : relative;
   text-align : justify;
   padding : 5px 5px 10px 5px;
   margin : 0px 0px 10px 10px;
   display : none;
   background-color : #eeeeee;
}

#onglet_actif {
   display:none;
}

#menu_onglets {
   margin : 0px 10px;
   padding: 0px;
}
#menu_onglets p {
   float : left;
   margin : 3px 0px;
   padding : 0px;
}
#menu_onglets a {
   outline : none;
   width : 100%;
   padding: 4px 12px;
   font-size : 16px;
   font-weight : normal;
   text-decoration : none;
   background-color : #eeeeee;
}
#menu_onglets a:hover {
   background-color : #003978;
}
#menu_onglets a.onglet_selection {
   color : #ffffff;
   background-color : #003978;
}
#menu_onglets a.onglet_selection:hover {
   color : #ffffff;
   background-color : #003978;
   cursor : default;
}


/* *********************************************************** */

/** pour la page des albums photo.. **/

#album_pres_thumbs {
   clear : both;   /* test */
   /*float : left; /* test*/
   /*width : 350px;*/
   margin : 12px 10px;
   padding : 10px 0px;
}

#album_pres_thumbs_titre {
   text-align:left;
   float:left;
   /*width : 240px;*/
   margin : 0px;
   padding: 3px 10px;
   
}
#album_table_matieres {
   float:right;
   width:320px;
}
#album_table_matieres li {
   margin : 4px 0px 6px 16px;
   padding : 0px;
   float : left;
   width : 135px;
   height: 36px;
   
}

.album_thumbs_pages {      
   display : none;   
   padding : 0px;
}

.album_thumbs {
   position : relative;
   float : left;
   width : 125px;
   height : 125px;
   margin: 0px 15px 5px 7px;
   padding: 0px;
   text-align : center;
   overflow : hidden;
   cursor : pointer;
}

.album_thumbs img {
   margin : auto;
   padding : 0px;
}

.album_photo_infos {
   display : none;
}

#album_pres_titre {
   text-align : center;
   margin : 2px;
}

#album_pres_photo {
   text-align : center;
   margin-top : 0px;
   margin-bottom : 0px;
   margin : auto;
   padding : 0px;
}

#album_pres_photo img {
   margin : 0px;
   padding : 0px;   
}


#album_pres_conteneur {
   width : auto;
   display : none;
   position : absolute;
   /*top  :-150px;
   left : -370px;*/
   top : 15px;
   left:15px;
   overflow : hidden; /* enlever pour l'ombrage */
   /*margin: auto;
   margin-top : 22px;*/
   background-color : #aaaa99;
   /*background : #000030 url(images/bois.png) repeat top left;*/
   border : 1px solid #000030;
   padding : 10px;
   z-index : 250;
   cursor : move;
}


#album_pres_contenu{   
   margin: auto;
   margin-top : 12px;
   padding: 4px;
   text-align:left;
   color : #000000;
}

#album_pres_contenu a {font-weight : bold; color:#397800;}
#album_pres_contenu a:link {color:#397800;}
#album_pres_contenu a:visited {color:#307033;}
#album_pres_contenu a:hover {color:#aa4e0f;}
#album_pres_contenu a:active {color:#112200; border:none;}


/* *********************************************************** */

/** pour les popups.. **/

#popup_conteneur {
   width : auto;
   display : none;
   position : absolute;
   /*top  :-150px;
   left : -370px;*/
   top : 15px;
   left:15px;
   overflow : hidden; /* enlever pour l'ombrage */
   width :600px;
   /*margin: auto;
   margin-top : 22px;*/
   background-color : #202030;
   /*background : #000030 url(images/bois.png) repeat top left;*/
   border : 2px solid #ffffff;
   color :  #ffffff;
   padding : 10px;
   z-index : 250;
   cursor : move;
}
#popup_titre{
   text-align : center;
   margin: 0px;
   padding: 4px;
   color : #ffffff;
}


#popup_contenu{
   margin: auto;
   margin-top : 12px;
   padding: 4px;
   text-align: justify;
}