﻿/* 

  CSS Photo Web Style from www.suodenjoki.dk 

  (C) 2003-2005 Michael Suodenjoki
  
*/

/************************************************

                   PHOTOS

   -- .imgblock ------------------------------
   | - .photoshadow------------------------- |
   | | - .photo -------------------------- | |
   | | |                                 | | |
   | | |                                 | | |
   | | |                                 | | |
   | | |                                 | | |
   | | |                                 | | |
   | | |                                 | | |
   | | ----------------------------------- | |
   | --------------------------------------- |
   | - .caption ---------------------------- |
   | | - 1 ---- - 2------------ - 3------- | | 
   | | |      | |             | |        | | |
   | | -------- --------------- ---------- | |
   | --------------------------------------- |
   -------------------------------------------
   
   Where:
   
   1) .caption-marker
   2) .caption-text
   3) .copyright
   4) .exif
   
************************************************/
div.imgblock
{
  vertical-align: top;
  margin-bottom: 0.5em;
  max-width: 100% !important;
  height: auto;
}
.photoshadow
{
  xbackground: url(../images/photoshadow_css2.png) no-repeat bottom right;
}
div.imgblock img
{
  max-width: 100% !important;
  height: auto;
}
.photo
{
  padding: 10px; 
  
  background-color: white;
  border: 1px rgb(204,204,204) solid;
  margin: -5px 5px 5px -5px;
  position: relative;
  vertical-align: bottom;
 
}
.imgcaption
{
  color: #808080;

  font-family: "Franklin Gothic Book",Tahoma,Geneva,sans-serif;
  font-size: 9pt;
  line-height: 12pt;
  xborder: 1px solid red;
}
div.captionmarker
{
  display: table-cell;
  xdisplay: inline;
  padding-right: 0.2em;
  
  text-align: left;
}
div.captiontext
{
  margin: 0;
  padding: 0;
  display: table-cell;
  xdisplay: inline-block;
  text-align: left;
}
div.copyright
{
  xdisplay: table-cell;
  xdisplay: inline;
  float: right;
  text-align: right;
  font-variant: normal;
}
div.exif,div.exif2
{
  text-align: right;
  float: right;
  font-variant: normal;
  clear: right;
  white-space: nowrap;
}

/* Additional copyright class used in older images, photos, articles etc. */
.copyright
{
  white-space: nowrap;
  xcolor: #A9A9A9;
  text-align: right;
}
img.darkborder
{
  background-color: rgb(48,48,48);
}
.leftjust
{
  xfloat: left;
  xmargin-right: 1em;
  xmargin-left: 0em;
  display: table-cell;
  display: inline-block;
  padding-right: 1em;
}
.leftjust-t
{
  display: table-cell;
  padding-right: 2em;
}
.leftfloat
{
  float: left;
  margin-right: 1em;
  margin-left: 0em;
}
.rightjust, .rightfloat
{
  float: right;
  margin-left: 1em;
  margin-right: 0em;
}
.foto
{
  background: url(../images/frames/495frame.png) no-repeat;
  padding-left: 14px;
  padding-top: 15px;

  padding-right: 14px;
  padding-bottom: 14px;
}
.postcard
{
  background: url(../images/frames/495frame_torn.jpg) no-repeat;
  padding-left: 16px;
  padding-top: 15px;

  padding-right: 20px;
  padding-bottom: 20px;
}

/************************************************

               PHOTO GALLERY

************************************************/

div.gallery
{
  display: inline-block;
  width: 350px;
  float: left;
}

div.gallery-left
{
  float: left;
}

div.gallery-right
{
  margin-top: 1em;
}

div.gallery-right p
{
  margin:0;
  padding:0;
  font-size: 13px;
}

div.gallery-right p:first-child
{
  font-weight: bold;
  line-height: 110%;
  font-size: 100%;
  margin-bottom: 1em;
}

div.frame
{
  background: url(../images/frames/frame.png) no-repeat;
  padding: 25px;
}

div.frame img
{
  width: 150px;
  height: 100px;
}

.title
{
  font-weight: bold;
}

a.title
{
  font-family: Arial, Helvetica, sans-serif;
  xfont-size: 85%;
}