/*
 * Theme Tiaret
 ***********************************************************************************************************/

HTML
{
    height:100%;
    overflow:hidden;
}

BODY
{
    font-family:"DejaVu Serif Condensed", "Bitstream Vera Serif", serif;
    height:100%;
    font-size:10pt;
    overflow:hidden;
    margin:0;padding:0;
    color:black;
    background-image:url('illus/blason-bleu.gif');
}

/*
 * Titre
 ***********************************************************************************************************/

div#BildoTitle
{
    position:absolute;
    width:100%;
    height:6%;
    z-index:2;
    background-image:url('illus/carre-ble.gif');
    background-repeat:repeat-x;
    background-position:0 100%;
    padding-bottom:5px;
}

div#BildoTitle h2
{
    text-align:center;
    font-size:12pt;
    font-weight:bold;
    margin:0;padding:0;
    font-variant:small-caps;
    z-index:2;
    font-family:"Courrier", "Courrier New", monospace;
    font-stretch:extra-expanded;
    letter-spacing:3px;
}

/*
 * Thumbnails
 ***********************************************************************************************************/

div#ThumbnailsInfos
{
    position:absolute;
    left:0%;top:90%;
    height:5%;width:100%;
    z-index:2;
    background-color:#64a2ed;
    background:url('illus/bar-blue.gif') scroll repeat-x 0% 0% ;
    padding-top:5px;
}

div#ThumbnailsControls
{
    position:absolute;
    left:0%;top:95%;
    height:5%;width:100%;
    vertical-align:middle;
    z-index:2;
    background:url('illus/bar-blue.gif') scroll repeat-x 0% 50% ;
}

div#ThumbnailsControls a
{
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-attachment:scroll;
}

div#ThumbnailsControls a#nav_startstopdiapo { background-image:url('illus/startstopdiapo.png') ; }
div#ThumbnailsControls a#nav_startstopdiapo:hover { background-image:url('illus/startstopdiapo-hover.png') ; }
div#ThumbnailsControls a#nav_firstpage { background-image:url('illus/first.png') ; }
div#ThumbnailsControls a#nav_firstpage:hover { background-image:url('illus/first-hover.png') ; }
div#ThumbnailsControls a#nav_previouspage { background-image:url('illus/previous.png') ; }
div#ThumbnailsControls a#nav_previouspage:hover { background-image:url('illus/previous-hover.png') ; }
div#ThumbnailsControls a#nav_nextpage { background-image:url('illus/next.png') ; }
div#ThumbnailsControls a#nav_nextpage:hover { background-image:url('illus/next-hover.png') ; }
div#ThumbnailsControls a#nav_lastpage { background-image:url('illus/last.png') ; }
div#ThumbnailsControls a#nav_lastpage:hover { background-image:url('illus/last-hover.png') ; }

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

div#ThumbnailsBox
{
    position:absolute;
    left:30%;top:7%;
    width:70%;height:82%;
    overflow:auto;
    z-index:2;
    text-align:center;
}

table#ThumbnailsGrid
{
    border-collapse:collapse;
}

table#ThumbnailsGrid td
{
    background-image:url('illus/cadre-bleu-dore.gif');
    width:170px;
    height:170px;
    text-align:center;
    vertical-align:middle;
}

a.Thumbnail img
{
    border-style:none;
}

/*
 * Vue des vignettes horizontalement
 ***********************************************************************************************************/

table#ThumbnailsList
{
    width:95%;
    margin-left:1%;
    margin-top:1em;
    margin-bottom:1em;
    border-collapse:collapse;
}

table#ThumbnailsList tr
{
    height:170px;
    width:170px;
    z-index:1;
}

table#ThumbnailsList td.ThumbnailImage
{
    vertical-align:middle;
    background:url('illus/blueframe-left.gif') no-repeat 0% 0%;
    width:170px;
    height:170px;
    text-align:center;
    padding-top:4px;
}
/*
  170 - 2x10 = 150 pixels de haut disponibles ( bordures hautes et basse )
  30 - Titre de la photo
  20 - Sous titre
  10 - Marge
  100 : description
*/
table#ThumbnailsList td.ThumbnailInfos
{
    background:url('illus/blueframe-middle.gif') repeat-x 0% 0%;
    vertical-align:top;
}

table#ThumbnailsList td a
{
    color:gold;
}

table#ThumbnailsList td.ThumbnailInfos span.location
{
    display:block;
    font-size:120%;
    color:gold;
}

.ThumbnailInfos h3
{
    font-size:14px;
    margin-bottom:0;
    margin-top:10px;
    font-family:"DejaVu Serif Condensed", "Bitstream Vera Serif", serif;
    text-align:center;
}

.ThumbnailInfos h3 span.photoNumber
{
    display:none;
    color:#55b;
    padding-right:10px;
}

.ThumbnailInfos p.fileInfos
{
    font-size:10px;
    color:#336;
    margin-top:0;
    margin-bottom:10px;
    text-align:center;
}

.ThumbnailInfos p.photoDesc
{
    margin-top:0;
    text-align:left;
    font-weight:normal;
    font-size:small;
    height:100px;
    overflow:hidden; /* fixme: firefox / ie conflict */
    line-height:1em;
}

table#ThumbnailsList td.ThumbnailControls
{
    background:url('illus/blueframe-right.gif') no-repeat 100% 0%;
    width:30px;
    vertical-align:top;
}

/*
 * SLIDE ***************************************************************************************************/

div#SlideTitle
{
    position:absolute;
    width:100%;height:6%;
    background:url('illus/carre-ble.gif') repeat-x 0% 100% ;
    margin:0;padding:0;
    visibility:hidden;
}

div#SlideTitle h2
{
    margin:0;padding:0;
    text-align:center;
    font-size:12pt;
    font-weight:bold;
    font-variant:small-caps;
    font-stretch:extra-expanded;
    letter-spacing:3px;
}

#SlideBox
{
    position:absolute;
    left:0%;top:6%;
    height:84%;width:100%;
    text-align:center;
    vertical-align:middle;
    background:url('illus/wait.png') no-repeat 50% 50% ;
    visibility:hidden;
}

#SlideBox a img
{
    height:auto;
    border-style:none;
    margin-left:auto;
    margin-top:auto;
}


#SlideBox a img
{
    border-style:none;
}

div#SlideInfos
{
    position:absolute;
    left:0%;top:90%;
    height:5%;width:100%;
    z-index:1;
    background:url('illus/bar-blue.gif') scroll repeat-x 0% 0% ;
    padding-top:5px;
    visibility:hidden;
}

div#SlideInfos span.FileTitle { display:none; }
div#SlideInfos span.ImageDims { }
div#SlideInfos span.FileWeight { }
div#SlideInfos span.FileDate { }

div#SlideControls
{
    position:absolute;
    top:95%;left:0%;
    width:100%;height:5%;
    vertical-align:middle;
    z-index:1;
    background:url('illus/bar-blue.gif') scroll repeat-x 0% 50% ;
    visibility:hidden;
}

/*
 * Slide controls
 */

div#SlideControls a
{
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-attachment:scroll;
}

div#SlideControls a#nav_backthumb { background-image:url('illus/up.png') ; } 
div#SlideControls a#nav_back_thumb:hover { background-image:url('illus/up-hover.png') ; } 
div#SlideControls a#nav_previousphoto { background-image:url('illus/previous.png') ; }
div#SlideControls a#nav_previousphoto:hover { background-image:url('illus/previous-hover.png') ; }
div#SlideControls a#nav_nextphoto { background-image:url('illus/next.png') ; }
div#SlideControls a#nav_nextphoto:hover { background-image:url('illus/next-hover.png') ; }
div#SlideControls a#nav_lastpage { background-image:url('illus/last.png') ; }
div#SlideControls a#nav_lastpage:hover { background-image:url('illus/last-hover.png') ; }
div#SlideControls a#nav_diaporama { background-image:url('illus/startstopdiapo.png') ; }
div#SlideControls a#nav_diaporama:hover { background-image:url('illus/startstopdiapo-hover.png') ; }
div#SlideControls a#nav_viewfullsize { background-image:url('illus/fullsize.png') ; }
div#SlideControls a#nav_viewfullsize:hover { background-image:url('illus/fullsize-hover.png') ; }
div#SlideControls a#nav_savefullsize { background-image:url('illus/heart.png') ; }
div#SlideControls a#nav_savefullsize:hover { background-image:url('illus/heart-hover.png') ; }

/*
 * CONTROLS & STATUS ***************************************************************************************/
.infos
{
    text-align:center;
    font-style:italic;
}

.controls, .infos
{
    font-size:9pt;
    padding:0;margin:0;
    vertical-align:middle;
}

div#ThumbnailsControls #ThumbnailsStatus, 
div#SlideControls #SlideStatus
{
    display:inline;
    padding-left:4pt;
    padding-right:2pt;
    float:left;
}

div#ThumbnailsControls a, div#SlideControls a
{
    text-decoration:none;
    margin:0;padding:0;
    margin-left:4px;
    float:left;
    width:30px;
    height:21px;
}


div#ThumbnailsControls #ThumbnailsPageProgress, div#SlideControls #SlidePhotoProgress
{
    display:inline;
    padding-right:2pt;
    float:right;
    font-style:normal;
}

div#ThumbnailsControls #ThumbnailsControlsButtons, div#SlideControls #SlideControlsButtons
{
    display:inline;
    clear:none;
}

/*
 * Logo de Bildo, non affiché par défaut
 ***********************************************************************************************************/

div#BildoInfos
{
    display:none;
    position:absolute;
    bottom:2%;left:2%;
    height:auto;width:16%;
    margin:0;padding:2px;
    overflow:hidden;
}

div#BildoInfos p
{
    display:none;
    font-size:7pt;
    color:#b26c38;
    text-align:center;
}

div#BildoInfos a
{
    color:#bbb;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
}

div#BildoInfos a:hover
{
    color:gold;
    text-decoration:none;
}