/* layout-photography.css -- CSS style file for Hulubei.Net's
   Photography section.  */

/*
 * Copyright (C) 2005-2009 Tudor Hulubei <tudor@hulubei.net>.
 * Distributed under the GNU General Public License.
 */

a.PhotoIndexThumbnail:link img,
a.PhotoIndexThumbnail:visited img,
a.PhotoIndexThumbnail:hover img,
a.PhotoIndexThumbnail:active img,
a.PhotoIndexThumbnail:focus img
{
    clear: both;
    display: block;
    border: 5px;
    margin: 20px 0 20px 0px;
}

a.PhotoIndexThumbnail:link img,
a.PhotoIndexThumbnail:visited img,
a.PhotographThumbnail:link img,
a.PhotographThumbnail:visited img
{
    text-decoration: none;
    background-color: transparent;
    border-color: black;
    border-style: solid;
}

a.PhotoIndexThumbnail:hover img,
a.PhotographThumbnail:hover img
{
    text-decoration: none;
    background-color: transparent;
    border-color: #ff6600;
    border-style: solid;
}

a.PhotoIndexThumbnail:active img,
a.PhotoIndexThumbnail:focus img,
a.PhotographThumbnail:active img,
a.PhotographThumbnail:focus img
{
    text-decoration: none;
    background-color: transparent;
    border-color: #ff6600;
    border-style: solid;
}

div.PhotoContent
{
    margin: 3px 0px 3px 162px;
    border: 0;
    padding: 0 0 0 8px;
}

div.PhotoNavigation
{
    /* Make the bottom margin at least 6px to make sure that when Safari
       places the focus on the buttons the focus border is not cut off.
       Unlike Firefox, Safari's focus is a bit thicker.  */
    margin: 2px auto 6px auto;
    display: block;
    border: 0;
    padding: 1em 0 0 5px;
    clear: both;
    text-align: center;
    /* Encapsulate all floating children.  */
    overflow: visible;
}

div.PhotoFrame
{
    border: 0;
    padding: 0;
    margin: 0 auto 1em auto;
    text-align: center;
    display: block;
    clear: both;
    /* Encapsulate all floating children.  */
    overflow: visible;
}

div.PhotoInfo,
div.PhotoDescription
{
    font-size: 90%;
    display: block;
    color: #eeeeee;
    background-image: url('../graphics/background-strip.jpg');
    background-color: transparent;
    border: dashed 1px #888888;
    margin: 5px 2% 5px 2%; /* More than 2% is bad for 1024x768.  */
}

div.PhotoInfo
{
    padding: 0.5em 5px 0.5em 5px;
    text-align: center;
}

div.PhotoDescription
{
    padding: 0.5em 1em 0.5em 1em;
    overflow: auto;
}

div.PhotoTitle
{
    margin: 1em;
    border: 0;
    padding: 0;
    text-align: center;
    font-size: 120%;
}

div.PhotoDetails
{
    margin: 1em;
    border: 0;
    padding: 0;
    text-align: center;
    font-size: 90%;
    clear: both;
}

div.PhotoCopyright
{
    padding: 2px 5px 2px 5px;
    border: solid 1px gray;
    margin: 0px 2% 5px 2%; /* More than 2% is bad for 1024x768.  */
    text-align: left;
    display: block;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: #cccccc;
}

a.PhotoButton
{
    font-weight: bold;
}

a.PhotoButton:link,
a.PhotoButton:visited,
a.PhotoButton:hover,
a.PhotoButton:active,
a.PhotoButton:focus
{
    display: inline;
    border: dashed 1px gray;
    margin: 0 1em 0 1em;
    padding: 0 2em 0 2em;
    font-size: 125%;
    font-variant: small-caps;
    background-image: url('../graphics/background-strip.jpg');
    text-decoration: none;
}

a.PhotoButton:link img,
a.PhotoButton:visited img,
a.PhotoButton:hover img,
a.PhotoButton:active img,
a.PhotoButton:focus img
{
    background-color: transparent;
    text-decoration: none;
}

a.MediumSizePhoto:link img,
a.MediumSizePhoto:visited img,
a.MediumSizePhoto:focus img,
a.MediumSizePhoto:hover img,
a.MediumSizePhoto:active img
{
    margin: 0;
    border: 0;
    padding: 0;
    background-color: transparent;
    text-decoration: none;
}

a.MediumSizePhoto
{
    /* We don't want that pesky outline when clicking on the image, the
       damn image already has two borders!  */
    outline: none;
}

div.PhotoSeparator
{
    border: 0;
    margin: 0 10px 0 10px;
    padding-top: 5px; /* Top + bottom ~= the height of the corner images.  */
    padding-left: 0;
    padding-bottom: 5px;
    display: inline;
}

hr.PhotoTop
{
    border: 0;
    margin: 5px 0 5px 0;
    padding: 0;
    display: block;
    width: 0;
    height: 0;
}

hr.PhotoBottom
{
    border: 0;
    margin: 5px 0 5px 0;
    padding: 0;
    display: block;
    width: 0;
    height: 0;
}

div.PhotoFrameTopLeft,
div.PhotoFrameTopRight,
div.PhotoFrameBottomLeft,
div.PhotoFrameBottomRight
{
    border: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: inline;
    /* The following padding amounts to a size of 9x9.  */
    padding: 4px 5px 5px 4px;
}

div.PhotoFrameTopLeft,
div.PhotoFrameTopRight
{
    margin: 0 0 10px 0;
    border: 0;
}

div.PhotoFrameBottomLeft,
div.PhotoFrameBottomRight
{
    margin: 0;
    border: 0;
}

div.PhotoFrameTopLeft
{
    background-image: url('../photography/graphics/top-left.gif');
}

div.PhotoFrameTopRight
{
    background-image: url('../photography/graphics/top-right.gif');
}

div.PhotoFrameBottomLeft
{
    background-image: url('../photography/graphics/bottom-left.gif');
}

div.PhotoFrameBottomRight
{
    background-image: url('../photography/graphics/bottom-right.gif');
}

div.PhotoHolder
{
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
    z-index: 3;
    background-image: url('../graphics/loading.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

a.PhotographThumbnail
{
    margin: 0;
    border: 0;
    padding: 0;
}

img.PhotographThumbnail
{
    margin: 0;
    border: solid 5px;
    padding: 0;
}

img#ThePhoto
{
    margin: 0 auto 0 auto;
    /* Older Firefox browsers used to display this border with strange
       colors.  Should that reoccur, increase thickness to 2px.  */
    border: solid 1px #cdcdcd;
    padding: 0;
    z-index: 1;
    /* Because of this, browsers will treat the image as text and leave
       some empty space after it.  Turning it into a block element,
       however, seems to cause Safari to display the decorative focus
       border around the enclosing div (PhotoHolder).  Argh...  */
    display: inline;
}

#map
{
    margin: 0;
    border: solid 1px black;
    padding: 0;
    width: 100%;
    height: 400px;
    /* This is to cut off the copyright text on the map,
       which would otherwise exceeding the map's width.  */
    overflow: auto;
}

#MapReframe
{
    margin: 0;
    border: 0;
    padding: 0;
    float: left;
    text-align: left;
}

#MapCoordinates
{
    margin: 0;
    border: 0;
    padding: 0;
    text-align: right;
    float: right;
}

#map,
#MapReframe,
#MapCoordinates
{
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 12px;
}


/* This contains the ads, the statistics and maybe some more extras.  */
div#PhotoExtras
{
    /* In most browsers, except IE, we can set this to "fixed". We do
       it in main(), to degrade nicely in case JavaScript is disabled.  */
    position: absolute;
    top: 3px;
    /* Most productive ads are in the individual photographs,
       because they get the most hits.  Statistically, it's
       better if they're placed on the right.  */
    left: 3px;
    z-index: 0;
    margin: 0;
    border: 0;
    padding: 0;
    width: 162px;
}

div.PhotoSearchBox
{
    display: inline;
    position: relative;
    top: 0.5em;
    right: 0.5em;
    float: right;
    margin: 0;
    border: 0;
    padding: 0;
}

input.PhotoSearchBox
{
    width: 16em;
    padding: 2px;
    float: right;
    font-size: 12px;
    margin: 3px 3px 0 0;
    color: black;
    border: solid 1px gray;
    background-color: #eeeeee;
}

div.PhotoIndexTableHolder
{
    margin: 20px auto 0 auto;
    border: 0;
    padding: 0;
    clear: both;
    z-index: -2;
    overflow: hidden;
}

span.PhotoIndexDescription
{
    font-size: 14px;
    font-style: italic;
    float: left;
    width: 20em;
    margin: 0 0 1em 0;
}

table.PhotoIndex
{
    margin: auto;
    border: 0;
    padding: 0;
}

tr.PhotoIndex
{
    margin: 0;
    border: 0;
    padding: 0;
}

td.PhotoIndexImage
{
    margin: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: solid 1px red;
    padding: 20px;
    vertical-align: middle;
}

hr.PhotoIndexInfoSeparator
{
    margin: 20px 0 20px -35px;
    border: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

td.PhotoIndexSeparator
{
    margin: 0;
    border: 0;
    padding: 0;
}

hr.PhotoIndexSeparator
{
    display: block;
    margin: 2px 0 20px auto;
    border: 0;
    padding: 0;
    float: right;
    clear: both;
    width: 50%;
}

div.PhotoNumber
{
    margin: 0;
    border: 0;
    padding: 0;
    float: right;
    font-size: 75%;
    font-style: italic;
}

div.PhotoIndexTableOfContents
{
    display: inline;
    margin: 0.5em 0 0 0;
    border: 0;
    padding: 0;
    float: left;
    font-size: 120%;
}

div.MapStyles
{
    font-size: 12px;
    clear: both;
}

a.MapStyleLink
{
    text-decoration: none;
}