/*----------------------------------------*
**  Kiosque
**----------------------------------------*/
/* Hauteur du panel GalleryView : 250px ; on fait coincider : #kiosque h3 (50) + #widgetDatepicker .widgetField (26)+ #widgetDatepicker .widgetCalendar (174)*/
#kiosque.contentBox h3 {
	color					: #f3f3e8;
	background				: transparent url('graphics/box_afa992.png') no-repeat left top;
	}
#kiosque.contentBox {
	/*content				: url('graphics/box_footer_afa992.png');*/
	background				: transparent url('graphics/box_afa992.png') left bottom;
	}
#kiosque.contentBox h3>strong {
	width					: 130px;
	background				: transparent url('graphics/t_kiosque_f0f0e5.png') no-repeat left 2px;
	}
#kiosque.contentBox h3>a {
	margin-left				: 1ex;
	font-size				: 20px;
	font-weight				: normal;
	vertical-align			: -2px;
	}
#kiosque.contentBox h3>a:link,
#kiosque.contentBox h3>a:visited,
#kiosque.contentBox h3>a:active,
#kiosque.contentBox h3>a:hover {
	color					: #f3f3e8;
	}

#kiosque {
	position				: relative;
	width					: 100%;
	}
/*----------------------------------------*
** chargement
**----------------------------------------*/
#kiosque .loadingPanel {
	display				: block !important;
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
	background			: url('graphics/transparent-bg.png');
	z-index				: 1;
	}
/*----------------------------------------*
**  GalleryView
**----------------------------------------*/
#kiosque .buttons {
	position				: absolute;
	bottom					: 0;
	margin					: 0 0 130px 20px;		
	width					: 450px;
	height					: 0;
	z-index					: 1;
	/left					: 0;
	}
#kiosque .buttons .prev,
#kiosque .buttons .next {
	display					: block;
	margin-top				: -11px;
	width					: 22px;
	height					: 22px;
	text-indent				: 22px;
	overflow				: hidden;
	}
#kiosque .buttons .prev{
	float					: left;
	margin-left				: -20px;
	background				: transparent url(graphics/prev.black.png) no-repeat left top;
	}
#kiosque .buttons .next {
	float					: right;
	margin-right			: -20px;
	background				: transparent url(graphics/next.black.png) no-repeat left top;
	}

#kiosque .switch {
	position				: absolute;
	top						: -25px;
	right					: 5px;		
	width					: auto;
	height					: 20px;
	}
	
/*----------------------------------------*
**  GalleryView
**----------------------------------------*/
#kiosque .jgallery {
	position				: relative;
	padding-bottom			: 28px;
	width					: 100%;
	height					: 450px; /* 200+250 */
	background				: #afa992 url(graphics/box_viewPanel_top.png) no-repeat left top;
	overflow				: hidden;
	}
	
#kiosque .jgallery.light {
	height					: 230px;
	background				: transparent url();
	}
#kiosque .jgallery.light.navPanel {
	position				: relative !important;
	bottom					: -3px !important;
	/*margin					: 0 0 0 215px;*/
	}
	
#kiosque .legend {
	position				: absolute;
	left					: 15px; /* 22 + 52-22/2*/
	bottom					: 10px;
	padding					: 2px 10px;
	width					: 432px;
	height					: 28px;
	font-size				: 0.8em;
	font-weight				: bold;
	line-height				: 28px;
	overflow				: hidden;
	background				: transparent url(graphics/box_legend.png) no-repeat center center;
	z-index					: 1;
border:0px solid red;
	}

#kiosque .navPanel {
	position				: absolute !important;
	left					: 0 !important;
	bottom					: 25px !important;
	margin-left				: 20px;
	padding					: 0 0 3px 10px;	/* pour laisser respirer le curseur */
	width					: 440px; /* (150+10) *4 */
	height					: 200px;
	z-index					: 1;
	}

#kiosque .navPanel ul {
	display					: block;
	/* horizontal */
	white-space				: nowrap;
	/* vertical */
	/*display					: block;*/
	/* hack ie7 */
	/* horizontal alternative : ne connait pas inline-block */
	/width					: 99999px;
	}

#kiosque .navPanel ul>li {
	/* horizontal */
	/* hack mozilla 2- */
	display					: -moz-inline-stack;
	display					: inline-block;
	/* vertical */
	/*display					: block;*/
	/* hack ie7 */
	/* horizontal alternative : ne connait pas inline-block */
	/display				: block;
	/float					: left;
	}

#kiosque .navPanel ul>li {
	margin					: 0 5px;
	/*height					: 150;*/
	vertical-align			: bottom;
	border					: 1px #555 solid;
	cursor					: pointer;
	}
	
#kiosque .navPanel ul>li img {
	display					: block;
	margin					: 0;
	padding					: 0;
	width					: 130px;
	max-height				: 180px;
	}

#kiosque .viewPanel {
	margin					: 5px;
	width					: 680px;
	height					: 240px;
	}
#kiosque .viewPanel ul {
	/* horizontal */
	/* hack mozilla 2- */
	/*display					: -moz-inline-stack;*/
	/*display					: inline-block;
	white-space					: nowrap;*/
	/* vertical */
	display					: block;
	}
#kiosque .viewPanel ul>li {
	/* horizontal */
	/*display				: inline-block;*/
	/* vertical */
	display					: block;
	/**/
	position				: relative;
	width					: 680px;
	height					: 240px;
	overflow				: hidden;
	}
#kiosque .viewPanel ul>li img {
	/* on zoome dans l'image pour rogner les bords (éviter les bordures noires) */
	position				: absolute;
	top						: -20px;
	left					: -20px;
	width					: 730px;
	clip					: rect( 20px, 710px, 260px, 20px) !important;
	}
#kiosque .viewPanel .panel-overlay {
	display					: block;
	position				: absolute;
	bottom					: 0;
	margin					: 5px;
	padding					: 5px;
	width					: 660px;
	height					: 40px;
	color					: #f3f3e8; 
	font-size				: 0.8em;
	background				: url('graphics/transparent-bg.png');
	-moz-border-radius		: 5px;
	z-index					: 1;
	}
#kiosque .viewPanel .panel-overlay a { 
	color					: #f3f3e8; 
	text-decoration			: underline; 
	font-weight				: bold;
	}
#kiosque .viewPanel .panel-overlay h5 {
	font-size				: 1em;
	}
#kiosque .navPanel .viewfinder {
	display					: block;
	margin-top				: -2px;
	margin-left				: -2px;
	border					: 3px solid #18b3dd;
	cursor					: pointer;
	/* hack animate : whenever an animation is executed on an element's width or height, the element wil get overflow:"hidden"*/
	overflow				: visible !important;
	z-index					: 1;
	}
#kiosque .navPanel .viewfinder>div {
	display					: block;
	position				: absolute;
	top						: -13px;
	padding-top				: 13px;
	width					: 100%;
	height					: 100%;
	background				: transparent url('graphics/pointer_18b3dd.png') no-repeat center top;
	}
#kiosque .jgallery.light .viewfinder>div {
	background				: transparent url();
	}
/*----------------------------------------*
**  Affichage du widget 
**----------------------------------------*/
#widgetDatepicker {
	position				: absolute;
	right					: 0;
	bottom					: 0;
	margin-bottom			: 55px;
	margin-right			: 10px;
	z-index					: 1;
	}
#widgetDatepicker .widgetField {
	display					: block;
	position				: absolute;
	top						: -265px;
	margin					: -30px 0 0 150px;
	width					: 250px;
	height					: 30px;
	/*background			: url(graphics/field.png);*/
	display					: none;
	}
#widgetDatepicker .widgetField a {
	display					: none;
	}
#widgetDatepicker .widgetField span {
	width					: 174px;
	height					: 30px;
	line-height				: 30px;
	/*font-family			: Verdana, Arial, Helvetica, sans-serif;*/
	font-size				: 22px;
	font-weight				: bold;
	color					: #efefe3;
	text-align				: center;
	}

#widgetDatepicker .widgetCalendar {
	/* quand l'objet est positionné : */
	overflow				: hidden;
	}
#widgetDatepicker .widgetCalendar .datepicker {
	position				: absolute;
	bottom					: 0;
	top						: auto;
}
.widgetCalendar .datepickerContainer,
.widgetCalendar .datepickerBorderT,
.widgetCalendar .datepickerBorderB,
.widgetCalendar .datepickerBorderL,
.widgetCalendar .datepickerBorderR,
.widgetCalendar .datepickerBorderTL,
.widgetCalendar .datepickerBorderTR,
.widgetCalendar .datepickerBorderBL,
.widgetCalendar .datepickerBorderBR {
	/*background			: transparent !important;*/
}
.widgetCalendar .datepicker a:hover{
	color					: #18b3dd;
	text-decoration			: underline;
}
/*----------------------------------------*
**  datepicker
**----------------------------------------*/
div.datepicker {
	/*display				: none;*/
	position				: absolute;
	top						: 0;
	left					: 0;
	font-family				: Arial, Helvetica, sans-serif;
	font-size				: 11px;
	width					: auto;
	height					: 147px;
	cursor					: default;
	}
.datepickerContainer {
	position				: absolute;
	top						: 10px;
	left					: 10px;
	background-color		: #f3f3e8;
	}
div.datepicker {
	/*display				: none;*/
	position				: absolute;
	top						: 0;
	left					: 0;
	font-family				: Arial, Helvetica, sans-serif;
	font-size				: 11px;
	width					: auto;
	height					: 147px;
	cursor					: default;
	}
.datepickerContainer {
	position				: absolute;
	top						: 10px;
	left					: 10px;
	background-color		: #f3f3e8;
	}
.datepickerBorderT {
	position				: absolute;
	left					: 10px;
	top						: 0;
	right					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_t.png);
	}
.datepickerBorderB {
	position				: absolute;
	left					: 10px;
	bottom					: 0;
	right					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_b.png);
	}
.datepickerBorderL {
	position				: absolute;
	left					: 0;
	bottom					: 10px;
	top						: 10px;
	width					: 10px;
	background				: url(graphics/datepicker_l.png);
	}
.datepickerBorderR {
	position				: absolute;
	right					: 0;
	bottom					: 10px;
	top						: 10px;
	width					: 10px;
	background				: url(graphics/datepicker_r.png);
	}
.datepickerBorderTL {
	position				: absolute;
	top						: 0;
	left					: 0;
	width					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_tl.png);
	}
.datepickerBorderTR {
	position				: absolute;
	top						: 0;
	right					: 0;
	width					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_tr.png);
	}
.datepickerBorderBL {
	position				: absolute;
	bottom					: 0;
	left					: 0;
	width					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_bl.png);
	}
.datepickerBorderBR {
	position				: absolute;
	bottom					: 0;
	right					: 0;
	width					: 10px;
	height					: 10px;
	background				: url(graphics/datepicker_br.png);
	}
.datepickerHidden {
	display					: none;
	}

div.datepicker table {
	border-collapse			: collapse;
	}
div.datepicker a {
	color					: #f3f3e8;
	text-decoration			: none;
	outline					: none;
	cursor					: pointer;
	}
div.datepicker table td {
	padding					: 0;
	margin					: 0;
	}
div.datepicker th {
	text-align				: center;
	color					: #587077;
	font-weight				: normal;
	}
div.datepicker thead {
	}
div.datepicker thead th {
	color					: #555 !important;
	}
div.datepicker thead a{
	line-height				: 20px;
	height					: 20px;
	color					: #18b3dd;
	}
div.datepicker thead .datepickerMonth a {
	line-height				: 30px;
	height					: 30px;
	}
div.datepicker tbody th {
	color					: #f3f3e8;
	text-align				: left;
	}
div.datepicker tbody a {
	display					: block;
	}
.datepickerDays,
.datepickerYears,
.datepickerMonths {
	background-color: #587077; /* = bordure */
	}
.datepickerDays a {
	margin					: 1px;
	width					: 17px;
	line-height				: 18px;
	height					: 18px;
	padding-right			: 1px;
	text-align				: right !important;
	/*background-color: #587077 !important;*/
	background-color		: #afa992;
	}
.datepickerYears a,
.datepickerMonths a{
	margin					: 1px;
	width					: 38px;
	line-height				: 38px;
	height					: 42px;
	text-align				: center;
	background-color		: #afa992;
	}
td.datepickerNotInMonth a {
	color					: #21343b;
	background-color		: #587077;
	}
tbody.datepickerDays td.datepickerSelected{
	background-color		: #e5e5d2;
	}
tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
	background-color		: #e5e5d2;
	}
tbody.datepickerYears td.datepickerSelected,
tbody.datepickerMonths td.datepickerSelected{
	background				: #9db470;
	}
div.datepicker a:hover,
div.datepicker a:hover {
	color					: #88c5eb;
	}
div.datepicker td.datepickerNotInMonth a:hover {
	color					: #88c5eb;
	}
div.datepicker tbody th {
	text-align				: center;
	}
.datepickerSpace div {
	width					: 16px;
	}
.datepickerGoNext a,
.datepickerGoPrev a,
.datepickerMonth a {
	text-align				: center;
	height					: 20px;
	line-height				: 20px;
	}
.datepickerGoNext a {
	float					: right;
	width					: 20px;
	}
.datepickerGoPrev a {
	float					: left;
	width					: 20px;
	}
table.datepickerViewDays tbody.datepickerMonths,
table.datepickerViewDays tbody.datepickerYears {
	display					: none;
	}
table.datepickerViewMonths tbody.datepickerDays,
table.datepickerViewMonths tbody.datepickerYears,
table.datepickerViewMonths tr.datepickerDoW {
	display					: none;
	}
table.datepickerViewYears tbody.datepickerDays,
table.datepickerViewYears tbody.datepickerMonths,
table.datepickerViewYears tr.datepickerDoW {
	display					: none;
	}
td.datepickerDisabled a,
td.datepickerDisabled.datepickerNotInMonth a{
	color					: #333;

	}
td.datepickerDisabled a:hover {
	color					: #333;
	}
td.datepickerSpecial a {
	background				: #700;
	}
td.datepickerSpecial.datepickerSelected a {
	background				: #a00;
	}