***********************************
  Dream'n Digital CSS for PBase

  Author: Michael Mount
  Date:   03 November 2006



  List of site image URLs
  -----------------------
  These are just for my convienence to easily change background images
  without having to refigure out the URLs.

  Sidebar Image:
  --------------
  url(https://www.pbase.com/image/69561952/original.jpg)

  Textured gray tiles (0 = brightest / 200 = darkest)
  ---------------------------------------------------
  0   = url(https://www.pbase.com/image/69484058/original.jpg)
  25  = url(https://www.pbase.com/image/69506438/original.jpg)
  50  = url(https://www.pbase.com/image/69506439/original.jpg)
  75  = url(https://www.pbase.com/image/69506440/original.jpg)
  100 = url(https://www.pbase.com/image/69506432/original.jpg)
  125 = url(https://www.pbase.com/image/69506433/original.jpg)
  150 = url(https://www.pbase.com/image/69506434/original.jpg)
  175 = url(https://www.pbase.com/image/69506435/original.jpg)
  200 = url(https://www.pbase.com/image/69506436/original.jpg)

  Gradient Lines
  --------------
  gradVertBlackTop   = url(https://www.pbase.com/image/69547980/original.jpg)
  gradHorzBlueLeft   = url(https://www.pbase.com/image/69573267/original.jpg)
  gradHorzBlueCenter = url(https://www.pbase.com/image/69648300/original.jpg)
  gradHorzGrayCenter = url(https://www.pbase.com/image/69648302/original.jpg)

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

/* Color Variable List */

/* Background Image Variable List */

/* Sidebar Image for background */
  top left no-repeat fixed;
  background-color:   ;
  left: 50px;
  margin-left: 52px;
  margin-right: 2px;
  margin-bottom: 20px;
  padding-bottom: 10px; }

/* Links */

a,
a:link,
a:visited,
a:active,
a:hover
{ color: #9098e8;
  font-weight: normal;
  text-decoration: none; }

a:hover
{ color: #dbe3ff; }

/* Take the bold off the links on the image pages */

#slideshow a,
#localmenu a
{ font-weight: normal; }

/* Thumbnails */

/* Anyplace a group of thumbnails is shown will
   draw with have this for a background. */

div.thumbnails
{ border:  #9098e8 3px double;
  margin-top: 2px;
  margin-bottom: 2px;
  background:  url(https://www.pbase.com/image/69484058/original.jpg) repeat; }

/* I want to keep the thumbnail table a constant
   width so spacing doesn't change because of
   the users screen size.  This setting of 200px
   is smaller than the table ever needs to be thus
   insuring that the final table will be the
   minimum possible width. */

.thumbnails table
{ width: 200px; }

/* The actual table cell that each thumbnail is in.
   I want a visual seperator to make sure the user
   can tell which caption goes with which thumbnail. */

.thumbnails td
{ border-bottom: #9098e8 1px dotted; }

/* Border and background of the actual thumbnail image */

img.thumbnail
{ border: black 1px solid;
  background:  #ececec;
  padding: 0px;
  margin: 0px;
  vertical-align: middle; }

/* Border and background of the area around the thumbnail
   that is linked to the gallery or image.  NOTE: The
   margin-bottom setting moves the gallery or image
   name text up closer to this box. */

a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active,
a.thumbnail:hover
{ background: url(https://www.pbase.com/image/69547980/original.jpg) repeat-x;
  border: #373737 1px solid;
  padding-top: 15px;
  margin-bottom: -5px;
  width: 200px;
  height: 200px;
  display: block; }

/* Change border color on mouse-over */

a.thumbnail:hover
{ border: #9098e8 1px solid; }

/* Gallery text under a thumbnail seems to always have
   a bold attribute.  This little gem allows me to change
   the font and color of the caption linking to a gallery
   instead of a thumbnail.  I feel this is important for
   users.  NOTE: If you use the   HTML code in your image
   captions they too will be drawn with this style! */

.thumbnail b
{ color: #9098e8;
  font-size: 12px;
  font-weight: bold; }

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

h2
{ background: url(https://www.pbase.com/image/69648300/original.jpg) top center repeat-y;
  color: #454d9d;
  border-top:  #9098e8 1px solid;
  border-bottom: #9098e8 1px solid;
  padding-bottom: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  font-variant: normal; }

h3
{ background: white;
  color: #9098e8;
  border-top: #9098e8 1px solid;
  border-bottom: #9098e8 1px solid;
  padding-bottom: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  font-variant: normal; }

/* The image page wraps up the h3 code a bit and ends up over-riding
   our settings (partially).  So here I want to force those h3 tags
   to also use my settings.  This is good in a way since I want the
   background to be gray based instead of blue anyway. */

h3.title
{ background: url(https://www.pbase.com/image/69648302/original.jpg) top center repeat-y;
  color: #e6e6e6;
  border-top: #373737 1px solid;
  border-bottom: #373737 1px solid;
  padding-bottom: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  font-variant: normal; }

/* This gets the h3 tag image text to MY font size */

span.title
{ font-size: 14px;
  font-weight: bold; }

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

img
{ border: #373737 1px; }

div.image
{ background: url(https://www.pbase.com/image/69506434/original.jpg) repeat;
  border: #373737 3px solid;
  margin-bottom: 2px;
  padding-top: 15px;
  padding-bottom: 10px; }

div.galleryheader
{ color: #828282;
  border-left: #9098e8 1px solid;
  border-right: #9098e8 1px solid;
  padding: 10px;
  text-align: center;
  font-size: 12px; }

td
{ background: none transparent scroll repeat 0% 0%;
  border: 1px;
  border-collapse: collapse;
  empty-cells: show; }



td.message_body
{ background: #ececec;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: #b4b4b4 1px dotted;
  font: 10px verdana, tahoma, helvetica, sans-serif;
  display: block; }


.caption
{ color: #828282;
  font: 12px verdana, tahoma, helvetica, sans-serif;
  border-bottom: #828282 1px dotted;
  padding-top: 5px;
  padding-bottom: 5px; }

.display
{ border:  0px; }

.message_body
{ margin: 5px 5px 10px;
  font: 8px verdana, tahoma, helvetica, sans-serif;
  color: #828282; }

/* EXIF Header */
.sb
{ background:  white;
  font: 12px verdana, tahoma, helvetica, sans-serif;
  color:  #9098e8;
  text-decoration: none; }

/* EXIF Cell */
.lid
{ background: #dbe3ff;
  font: 10px verdana, tahoma, helvetica, sans-serif;
  color:  #a9b1ff;
  text-decoration: none;
  border-bottom:   1px dotted; }

body table a img
{ display: inline; }

hr
{ position: relative; }

.date, .artist, .location
{ color: white;
  font-size: 10px;
  font-style: italic; }

table.comment tr td.date
{ color: #9b9b9b; }

.techinfo , .othersizes, .treepath, .localmenu
{ color:  #9b9b9b;
  font-size: 11px;
  font-weight: normal; }

.techinfo
{ margin-top: 10px }

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