/* FICHE_SPECTACLE COMMUN*/

#content{
    padding-bottom: 34px;

}

#spectacle-header{
    height: 240px;
    padding-top: 4px;
    background: url(../images/flash-bg.gif) top left repeat-x;
}

    #spectacle-header #spectacle-info{
        float: left;
        width: 218px;
        color: white;
        padding: 0 21px 0 21px;
    }
    #spectacle-header #spectacle-info h3{
        font: 24px Times New Roman, Times;
        padding: 6px 10px 5px 0;
        margin: 0;
    }
    #spectacle-header #spectacle-info span.date{
        display: block;
        padding: 0 0 7px 0;
        border-bottom: 1px solid #888787;
    }
    #spectacle-header #spectacle-info span.icone-musique{
        display: block;
        height: 15px;
        padding:2px 0 6px 21px;
        margin: 6px 0 0 0;
        border-bottom: 1px solid #888787;

        background: url(../images/spectacle-icone-musique.gif) top left no-repeat;
    }
    #spectacle-header #spectacle-info span.commanditaire{
        display: block;
        padding:0 0 0 0;
        margin: 5px 0 0 0;

    }
    #spectacle-header #spectacle-info span.salle{
        display: block;
        padding: 8px 0 0 0;
    }
    #spectacle-header #spectacle-img{
        float: left;
        width: 483px;
        height: 240px;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    #spectacle-header #spectacle-img img{
        vertical-align:bottom;
    }
    #spectacle-header #spectacle-img div.credit{
		position: absolute;
		bottom: 0;
		left: 0;

        padding: 0px;
        margin: 0px;
		width: 473px;
        padding: 4px 5px 0 5px;
        height: 17px;
		filter:alpha(opacity=70);
		opacity:.70;

        text-align: right;
        color: #fff;
        background-color: #000;
        font-size: 9px;
        overflow: hidden;
    }

    #spectacle-header #spectacle-video{
        float: left;
        width: 251px;
        padding: 1px 1px 0 1px;
        background-color: #fff;
    }
	
	#spectacle-header #spectacle-video img {
		border: 0;
	}
	
    #spectacle-header #spectacle-video #boutons{
        /* SPÉCIFICATIONS DANS LE CSS PROPRE À LA LANGUE */
    }
    #spectacle-header #spectacle-video #boutons a.linked-audio{
        font-weight: normal;
        padding: 0 20px 0 0;
        background: url( ../images/audio-icon.gif) top right no-repeat;
        /* SPÉCIFICATIONS DU POSITIONNEMENT DANS LE CSS PROPRE À LA LANGUE */
    }
    #spectacle-header #spectacle-video #boutons a.linked-diapo{
        font-weight: normal;
        padding: 0 20px 0 0;
        background: url( ../images/diaporama-icon.gif) top right no-repeat;
        /* SPÉCIFICATIONS DU POSITIONNEMENT DANS LE CSS PROPRE À LA LANGUE */
    }
    #spectacle-header #spectacle-video #boutons a.nodata{
        color: #bbb;
        background: none;
    }


#colls{
    background: #fff url(../images/content-coll-bg.gif) top left repeat-y;
}
    /* COLONNE 1 */
    #colls .c1{
        float: left;
        width: 260px;
    }
    #colls .c1 h4{
         /* SPÉCIFICATIONS DANS LE CSS PROPRE À LA LANGUE */
    }
    #colls .c1 #calendrier{
        overflow: hidden;
        width: 260px;

    }

    #colls .c1 #calendrier div.mois-nav{
        float: left;
        display: block;
        width: 219px;
        height: 19px;
        padding: 5px 23px 0 18px;
        margin: 0px;
        border-bottom: 1px solid #A10709;
    }
    #colls .c1 #calendrier div.mois-nav span{
        display: block;
        float: left;

    }
    #colls .c1 #calendrier div.mois-nav span a{
        display: block;

        width: 20px;
        height: 19px;
    }
    #colls .c1 #calendrier div.mois-nav span.precedent{
        float: left;
        width: 20px;
        height: 19px;
        padding: 0 0px 0 0;
        margin: 0;
        background: url(../images/calendrier-icone-last.gif) left 2px no-repeat;
        cursor: pointer;
    }
    #colls .c1 #calendrier div.mois-nav span.mois-actuel{
       color: #A10709;
       font-weight: normal;
    }
    #colls .c1 #calendrier div.mois-nav span.prochain{
        float: right;
        width: 20px;
        height: 19px;
        padding: 0 0 0 0px;
        margin: 0;
        background: url(../images/calendrier-icone-next.gif) right 2px  no-repeat;
        cursor: pointer;
    }

    #colls .c1 #calendrier .mois{
        float: left;
        width: 226px;
        margin: 0;
        padding: 0 0 8px 15px;
        list-style: none;
    }
    #colls .c1 .mois li{
        float: left;
        width: 28px;
        margin: 2px;
        text-align: right;
    }
    #colls .c1 #calendrier li.jr{
        height: 28px;
        margin: 1px;
        border: 1px solid #E7E7E7;
        color: #A10709;
    }
    #colls .c1 #calendrier li.evenement{
        position: relative;
        background-color: #A10709;
        border: 1px solid #A10709;
        color: white;
    }
    #colls .c1 #calendrier li.evenement a{
        color: white;
        text-decoration: none;
        height: 28px;
        width: 28px;
        display: block;

    }
    #colls .c1 #calendrier li.evenement a:hover{
        border: 1px solid white;
        height: 26px;
        width: 26px;
    }

    #colls .c1 #calendrier li.evenement span.soir{
        position: absolute;
        bottom: 1px; right: 1px;
        height: 12px;
        width: 10px;

        background: url(../images/calendrier-icone-soir.gif) top left no-repeat;
    }
    #colls .c1 #calendrier li.evenement span.matin{
        position: absolute;
        bottom: 1px; left: 1px;
        height: 12px;
        width: 11px;

        background: url(../images/calendrier-icone-matin.gif) top left no-repeat;
    }
	#colls .c1 div.legend{
		height: 21px;
		padding: 0 0 5px 16px;
	}
	#colls .c1 div.legend .soir,
	#colls .c1 div.legend .matin{
		border: 1px solid #E7E7E7;
		width: 57px;
		padding: 2px 4px 2px 4px;
		margin: 0 10px 0 0;
		float: left;
	}
	#colls .c1 div.legend .matin span{
		padding-right: 15px;
		background: url( ../images/calendrier-icone-matin_surblanc.gif ) right top  no-repeat;
	}
	#colls .c1 div.legend .soir span{
		padding-right: 22px;
		background: url( ../images/calendrier-icone-soir_surblanc.gif ) right top  no-repeat;
	}

    #colls .c1 div.commenditaire-spectacle{
        float: left;
        width: 240px;
        clear: both;
        position: relative;
    	padding: 10px 10px 0 5px;
    	margin: 10px 0 10px 0;
    }
    #colls .c1 div.commenditaire-spectacle span.presente-par{
    	font-size: 9px;
        display: block;
    
        padding: 0 0 3px 0;
        
    }
    #colls .c1 div.commenditaire-spectacle div{
        padding: 5px 0 5px 0;
       display: block;
    }

    /* COLONNE 2 */
    #colls .c2{
        float: left;
        width: 483px;
    }

    #colls .c2 #spectacle-description-sup{
        display: block;
        float: left;
        width: 176px;
        padding: 15px 12px 17px 12px;
        margin: 0 10px 10px 0;
        background-color: #E0E0E0;
    }
    #colls .c2 #spectacle-description-sup a{
        text-decoration: underline;
        font-weight: normal;
    }
    #colls .c2 #spectacle-description-sup a:hover{
        text-decoration: none;
        color: #000;
    }
    #colls .c2 #spectacle-description-sup span{
        display: block;
    }
    #colls .c2 #spectacle-description-sup span.titre{
        color: #AD0408;
        padding:0 0 0 0;
        font-weight: bold;
    }
    #colls .c2 #spectacle-description-sup span.plain{
        padding: 0 0 5px 0;
        margin: 0 0 7px 0;
        background: url(../images/spec-separator.gif) bottom left no-repeat;
    }
    #colls .c2 #spectacle-description-sup span.noline{
        background: none;
    }
    #colls .c2 #spectacle-description{

        margin: 15px 12px 10px 12px;
        padding: 0 0 10px 0;
        border-bottom: 1px dotted #940D0E;
    }
    #colls .c2 #spectacle-description h3{
        margin: 0px;
        padding: 0px;
        color: #980A0B;
        font-size: 16px;
        font-weight: bold;
    }
    #colls .c2 #spectacle-description h4{
        margin: 0px;
        padding: 0px;
        color: #000;
        font-size: 12px;
        font-weight: bold;
    }
    #colls .c2 #spectacle-description p{
        padding: 14px  0 0 0;
        margin: 0px;
    }

    #colls .c2 #spectacle-description div.critique{
    	overflow: hidden;
        display: block;
        clear: both;
        padding:0px;
        margin: 8px 0 0 0;
        width: 458px;
        background: #E0E0E0 url(../images/spectacle-critique-bottom.gif) left bottom no-repeat;
    }
    #colls .c2 #spectacle-description .critique .ctn1{
    	overflow: hidden;
        padding: 0 8px 18px 8px;
        margin:0px;
        background:   url(../images/spectacle-critique-top.gif) left top no-repeat;
    }
    #colls .c2 #spectacle-description .critique p{

    	padding: 8px 0 0 0;
        margin: 0px;
    }
	
	#spectacle-header #spectacle-video .boutons{
	   width: 251px;
	   height: 32px;
	   padding: 8px 0 0 0;
	   background: white url(../images/spectacle-under-video-button.gif)  left top repeat-y;
	}
	
	#spectacle-header #spectacle-video .boutons a.linked-diapo span,
	#spectacle-header #spectacle-video .boutons a.linked-audio span{
		height:0;
		left:0;
		overflow:hidden;
		position:absolute;
		top:0;
		width:1%;	
	}
	
	#spectacle-header #spectacle-video .boutons a.linked-diapo:hover,
	#spectacle-header #spectacle-video .boutons a.linked-audio:hover	{ background-position: bottom; }