/* ======================
Style sheet name - Subaquarf

     License Terms : Attribution-ShareAlike 1.0
                                  https://creativecommons.org/licenses/by-sa/1.0/

My first style sheet - pretty much built up from scratch but many influences and techniques from the pBase community.


Thanks to the following and their guides on stylesheets and trying to manipulate the different techniques

Baseline look and feel initiated by Michael Martin and his extensive style sheet gallery at 

https://www.pbase.com/pinemikey/pinescsslibrary

Thierry Malaval's contributions in the forum and stylesheet library for some ideas at 

https://www.pbase.com/thierry_malaval/mycss

Flemming Bo Jensen for helping with last minute hitches https://www.pbase.com/flemmingbo

and the extremely useful guide from the unofficial pbase wiki
https://pbasewiki.srijith.net/


GUIDELINES
----------
All the colours are defined at the top and the name indicates where they are used.
If you like the format of this gallery but just want to change the pallette then this is very easily done by 

manipulating the colours at the top rather than having to trawl through all of the cod

All fonts are described in 'point' size (pt) rather than px to ensure consistency in treatement
All spacing is descriped in px


 ======================= */

/* background */
/* contrasting back color for header, exif, contrast, etc. */
/* thumbnail border */


/* header first letter */
/* header rest*/


/* used for links and highlight underline for images when hovering */
/* link hover for text uses same */


/* default font colour */
/* font colour for comments, slideshow and gallery commentary */


/* comment separator colour */


/* underline for header */
/* derivative of contrast line but different saturation for text */


/* colour for image text header and borders */

/* Colours for the Exif info table */

/*   --------------------------
  First set the basic colour variables here
  Means you can use the style and just change the main colours to suit
--------------------------   */



/* === code to remove pbase header === */

body table td a img {display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table, .thumbnails table img, .display, p.small{display:inline;}



/* === Sets the basic body and font families === */

body
{
  background :  #000000;
  font-family: font-family: "Times New Roman", Times, serif,;
  font-weight: normal;
  margin-top: 0px; 
scrollbar-arrow-color:#FFCC00; 
scrollbar-track-color:#000000; 
scrollbar-face-color:#000000; 
scrollbar-highlight-color:#000000; 
scrollbar-3dlight-color:#000000; 
scrollbar-darkshadow-color:#000000; 
scrollbar-shadow-color:#000000; 
}

.galleryheader
{
  text-align:center;
  margin-bottom: 20px;
  color: #FFFFFF;
  letter-spacing: 1px;
}

#localmenu a  /* sets fonts for top menus */
{
  font: normal 10pt  "Times New Roman", Times, serif,;
}



/* === Font colour and styles for links === */

A                {text-decoration:none}
a:link{color: #FFCC00; text-decoration: none;}
a:hover{color: #FFCC00; text-decoration: underline;}
a:visited{color: #FFCC00; text-decoration: underline;}
a:active{color: #FFCC00; text-decoration: underline;}


/* === formatting thumbnail table === */

a.thumbnail{
  border: #FFFFFF 1px solid;
  width: 107px; hieght: 160px;
  width: 160px; hieght: 107px;
  horizontal-align: middle;
  vertical-align: middle;
  background: #000000;
  display: block;
  padding: 1px;
}



/* === set the basic font family and style === */

div,th,tr,table,li,ul,form,blockquote,p,b,i,h3,h4,h5,center,title
{
  font-family: "Times New Roman", Times, serif,;
  font-size: 10pt;
  color:  #FFFFFF;
  font-weight: normal;
}

font               /* font used for picture titles */
{
  font-family: "Times New Roman", Times, serif,;
  color:  #FFFFFF;
  font-size: 10pt;
  letter-spacing: 2px;
}

h1,h2               /* Header for the main page  */
{ 
  font-size:         20pt;
  font-weight:      normal;
  text-align:       center;
  letter-spacing:     15px; 
  padding-top:       5px;
  padding-bottom:    4px; 
  margin-left:      50px;
  margin-right:       0px;
  border-bottom: #004413 1px solid; 
  background-color:  #333333;
  color:  #CCCCCC;
}

h2:first-letter   /* Highlight the first character */
{
  color: #CCCCCC;
  font-weight: bold;
  font-size: 28pt
}



/* === This section formats the image display screen pieces === */

h3 .title                      /* image title */
{
  color: #868686;
  margin-top: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  font: normal 14pt "Times New Roman", Times, serif,;
  letter-spacing:10px;
  border-bottom: #363636 1px solid;
  border-top: #363636 1px solid
}

#image img
{
  border: white 1px solid
}

#imageinfo
{
  text-align:center;
  margin-bottom 30px;
}

.date
{
  font-size:8pt;
  font-weight:normal
}

.artist
{
  font-size:10pt;
  font-weight:normal
}

.location
{
  text-align:center;
  font: normal 12pt  arial narrow, sans-serif;
  letter-spacing:7px;
}

.caption
{
  color: #6075ff;
}

#imagecaption
{
  letter-spacing:1px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 40px;
}


#techinfo table   /* removes the border around the exif information */
{ 
  border: 0; 
} 

.techinfo
{
  font-size: 8pt;
  margin-top: 50px;
}

.camera
{
  font-style:normal
}

.othersizes
{
  letter-spacing:1px;
  font-size:8pt;
}

.copyright
{
  letter-spacing:2px;
  font-size:12pt;
  font-weight: normal;
}



/* === Here is the formatting for the exif information === */

.exif
{
  border:none;
  padding:2px 5px 20px 5px;
}

.sb
{
  color: #CCCCCC;
  font-size:8pt;
  background-color: #999999;
  border:none;
  padding:2px 5px 2px 5px
}

.lid
{
  color: #999999;
  font-size:8pt;
  background-color: #333333;
  border:none;
  padding:2px 5px 2px 5px
}

/* === menu indicating prev/next on the image display === */
/*     this is not the text in the slideshow itself       */

#slideshow td{
     padding:0px 50px 20px 0px;
     text-align:right
}

#slideshow a
{
  font: normal 12pt "Times New Roman", Times, serif,;
}



/* === Formatting for comments on the gallery and pics === */

.gallery_comments
{
  margin-top: 10px;
}

.message_body 
{
  background-color:  #000000;
  color:  #CCCCCC; 
  padding-bottom:    10px;
  border-bottom: #333333 1px solid;
}

#commentlist .from a
{
  font-weight: normal;
  color: #999999;
}



/* === controls the position and text for the slideshow === */

h3#slideshow_info
{
  margin-top: 20px;
}

a#slideshow_title
{
  color: #999999;
  font-weight: bold;
  margin: auto;
  text-decoration: none;
  padding-top: 36px;
  padding-bottom: 6px;
  font: normal 16pt "Century Gothic", verdana, arial, sans-serif;
  letter-spacing:7px;
}

a:hover#slideshow_title
{
  text-decoration: unerline;
}


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }




BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }