/*This software is governed by a creative commons license whose terms of use are explained in the readme file */

/* *************************************
*  This file governs the default styles of the Album.php page integrated in your site as well as the styles of the Diaporama.php and Picture.php pages. The style selectors are prefixed by  #PJGallery so that  this file should be  unobtrusive w.r.t. your existent styles. 

Normally, little update here should be necessary if you're happy with the rendering. You may just have to define the dimensions of #PJGalleryAlb .thumbnail. Also, define the font-family property of #PJGalleryDiap and  #JGalleryPict identical to your web page for consistency. 

For the viewAlbum.php page, we use common html tags (<h1>, <a>, <p>) that are supposed to be defined in the style sheet(s) that govern your site.  If you do not have a style sheet for your site, you can fully define these tags in this file. Alternatively, you can define a new theme, import this file and define the properties that are missing here (see theme sample for an illustration).
****************************************/

#PJGalleryAlb .thumbnail{
/* customize width/height according to your thumbnail size*/
width: 135px;  /* minimum: max image width(133px) + 2px (border)*/
height: 145px; /* minimum: max image height(vertical image) + 10px + 2px (border)*/
}

body#PJGalleryDiap, body#PJGalleryPict {
	/*customize font-family to the same as your standard web page*/
font-family: "Trebuchet MS", Verdana, Arial, sans-serif, "Arial Unicode MS";
background-color:#5f5f5f;
margin:0px;
padding:0px;
color: white;
font-size: 81.25%;
} 

html{ 
/* this will  apply to the viewAlbum.php, and viwPicture.php although it is only intended for viewDiaporama.php. (Not necessary for IE but better for Mozilla when displaying slides.)*/
overflow-y: scroll; 
overflow: -moz-scrollbars-vertical;
}

#PJGalleryAlb *, #PJGalleryDiap *, #PJGalleryPict *{
margin:0px;
padding:0px;
}

#PJGalleryAlb h1{/* for album titles*/
}

#PJGalleryAlb a {
}

#PJGalleryAlb a:link {
}

#PJGalleryAlb a:visited {
}

#PJGalleryAlb a:hover,  a:focus {
}

#PJGalleryAlb a:active {
}

#PJGalleryAlb#thumbnaillist{
/* wrapper for the thumbnail list of a page */
}

#PJGalleryAlb .thumbnail{
float:left;
margin: 10px 10px;
text-align:center;
overflow: visible;/*overflow: if dimensions are exact, this is not necessary*/
font-size: 10px;
}

#PJGalleryAlb .thumbnail a img {
text-align: center;
display: block;
margin: 0 auto;
border: 1px solid black;
}

#PJGalleryAlb .thumbnail p{/* thumbnail caption*/
margin:0px;
font-size:10px;
height:10px;
line-height:10px;
text-align: center;
}

#PJGalleryAlb .clearfix{
clear: both;
}

#PJGalleryAlb .thumbnail a:hover img, #PJGalleryAlb .thumbnail a:focus img  {
border: 0px;
}

#PJGalleryAlb .error, #PJGalleryDiap .error, #PJGalleryPict .error{
color:red;
font-size:0.9em;
}

#PJGalleryAlb #numberthumbnails, #PJGalleryPict #numberthumbnails{/*position of the thumbnails listed in the current page*/
text-align:center;
font-weight: bold;
font-size: 0.9em;
margin-bottom: 0.5em;
}

#PJGalleryAlb #links{/* for links on previous and next thumbnail pages*/
text-align:center;
font-weight:normal;
}

#PJGalleryAlb #version{/*copyright PJGallery*/
margin-top: 1.2em;
font-size: 0.85em;
text-align:center;
}

#PJGalleryDiap a:visited, #PJGalleryPict  a:visited{
/* This is for the alt attribute of the icons images if images are not shown in the browser: (limited interest)*/
color: yellow;
}


#PJGalleryDiap *, #PJGalleryPict * {
text-align: center;
}


#PJGalleryDiap #position, #PJGalleryPict #position {
font-weight: bold;
font-size:0.8em;
height:1.2em;
}

#PJGalleryDiap #links, #PJGalleryPict #links{
font-weight:bold;
margin-bottom: 2px;
margin-top:0px;
padding:0px;
list-style-type : none;
}

#PJGalleryDiap #links li{
padding: 0em 0.3em;
display:inline;
}

#PJGalleryDiap #links form, #PJGalleryDiap #links form div{
display: inline;
}

#PJGalleryDiap #links form input{/*input slideshow value*/
text-align: center;
font-size:0.75em;
font-weight: bold;
width: 11em;
}

#PJGalleryDiap #description,  #PJGalleryPict #description {/*caption of the picture*/
margin: auto;
margin-top: 0.5em;
width: 60%;
line-height:1.1em;
}

#PJGalleryDiap #picture{
/* creates a reference for images  0 and 1 that are positioned in absolute*/
position:relative;
width:100%;
}

#PJGalleryDiap #picture0, #PJGalleryDiap #picture1{
position:absolute;
top:0px;
left:0px;
width:100%;
display:none;
}

#PJGalleryDiap  .image01 {
display: none;
margin: 0 auto;/*center the image*/
}


#PJGalleryDiap a, #PJGalleryPict a {
cursor: pointer;
text-decoration: none;
}

#PJGalleryDiap  img, #PJGalleryPict  img{
border: 1px solid black;
}

#PJGalleryPict #picture{
display: block;
margin: 0 auto;
}

#PJGalleryDiap a:focus, #PJGalleryPict a:focus{
outline: 0px;
}