/*
** www.huetehundfotos.de
**
** (C) Claudia Traeger, 2008-2011
*/

/* Letzte Aenderung: 13.09.2011 */

@import url("huetehundfotos_farben.css");

body
{
    font-size: 100%;
    margin: 0.5em;
    padding: 0;
}
/* end body */

h2 { text-align: center;}
h4 { text-align: left;}

img.landscape
{
    height: 300px;
    width: 451px;
}
/* end img.landscape */

img.portrait
{
    height: 451px;
    width: 300px;
}
/* end img.portrait */

img.landscape-small
{
    height: 80px;
    width: 120px;
}
/* end img.landscape-small */

img.portrait-small
{
    height: 120px;
    width: 80px;
}
/* end img.portrait-small */

img.landscape-tiny
{
    height: 40px;
    width: 60px;
}
/* end img.landscape-tiny */

img.portrait-tiny
{
    height: 60px;
    width: 40px;
}
/* end img.portrait-tiny */

img.arrow
{
    height: 32px;
    width: 32px;
}
/* end img.arrow */

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

/*
** Header
*/

div#header
{
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
}
/* end div#header */

/* ------------------------------------------------------------------ */

div#logo
{
    float: left;
    font-family: cursive;
    border: 0;
    margin: 0;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
    width: 10em;
}
/* end div#logo */

div#logo img
{
    vertical-align: middle;
}
/* end div#logo img */

div#logo a
{
    text-decoration:none;
}
/* end div#logo a */

/* ------------------------------------------------------------------ */

div#banner
{
    border-left-style: solid;
    border-left-width: 0.5em;
    margin-left: 11em;
    min-height: 3em;
    padding: 1em;
}
/* end banner */

div#banner h1
{
    font-family: cursive;
    font-size: 250%;
    font-weight: bold;
    margin: 0;
    text-align: center;
}
/* end div#banner h1*/

div#banner h1 a
{
    text-decoration:none;
}
/* end div#banner h1 a */

ul#navigation
{
    font-weight: bold;
    list-style-position: outside;
    margin: 0;
    padding: 0;
    text-align: center;
}
/* end ul#navigation */

ul#navigation li
{
    display: inline;
    margin: 0;
    padding: 0;
}
/* end ul#navigation li */

ul#navigation li:before { content: "\2022 \0020"; }
ul#navigation li:first-child:before { content: ""; }

/* Workaround for IE */

* html ul#navigation li
{
    padding: 0 0.4em 0 0.4em;
    margin: 0 0.4em 0 -0.4em;
}
/* end * html ul#navigation li */

/* End of workaround for IE */

ul#navigation a
{
    text-decoration: none;
}
/* end ul#navigation a */

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

/*
** Main
*/

div#main
{
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
}
/* end div#main */

/* ------------------------------------------------------------------ */

div#sidebar
{
    float: left;
    margin: 0;
    padding: 0.5em;
    width: 10em;
}
/* end div#sidebar */

div#sidebar a.image:hover
{
    direction: ltr; /* workaround for IE */
}
/* end div#sidebar a.image:hover */

div#sidebar ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* end div#sidebar ul /*

/* ------------------------------------------------------------------ */

div#content
{
    border-left-style: solid;
    border-left-width: 0.5em;
    margin-left: 11em;
    height: 512px; /* for IE */
    padding: 1em;
    position: relative;
    vertical-align: middle;
    text-align: center;
}
/* end div#content */

div#content[id]
{
     min-height: 512px;
     height: auto;
}
/* end div#content[id] */

div#content p, ul
{
    text-align: left;
    vertical-align: bottom;
}
/* end div#content p, ul */

div#content img
{
    vertical-align: middle;
}
/* end div#content img */

div#thumbsleft
{
    position: relative;
    float: left;
    vertical-align: top;
    height: 512px; /* IE */
    width: 10%;
}
/* end div#thumbsleft */

div#thumbsleft[id]
{
     height: auto;
     min-height: 512px;
}
/* end div#thumbsleft[id] */

div#thumbsleft ul
{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
}
/* end div#thumbsleft ul */

div#thumbsright
{
    position: relative;
    float: right;
    height: 512px; /* IE */
    width: 10%;
    text-align: right;
}
/* end div#thumbsright */

div#thumbsright[id]
{
     height: auto;
     min-height: 512px;
}
/* end div#thumbsright[id] */

div#thumbsright ul
{
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
}
/* end div#thumbsright ul */

ul#thumbnails
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* end ul#thumbnails */

ul#thumbnails li
{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: center;
}
/* end ul#thumbnails li */

ul#thumbnails img
{
    vertical-align: middle;
}
/* end ul#thumbnails img */

div#content-photo
{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    width: 100%;
}
/* end div#content-photo */

div#content img.arrow#arrow-up
{
    height: 16px;
    width: 16px;
    z-index: 3;
}
/* end div#content img.arrow#arrow-up */

div#content-photo img.arrow#arrow-up
{
    height: 16px;
    width: 16px;
    left: 50%;
    z-index: 3;
}
/* end div#content-photo img.arrow#arrow-up */

div#content-photo img.arrow#arrow-left
{
    top: -16px;
    left: 15%;
    position: absolute;
    z-index: 1;
}
/* end div#content-photo img.arrow#arrow-left */

div#content-photo img.arrow#arrow-right
{
    top: -16px;
    right: 15%;
    position: absolute;
    z-index: 2;
}
/* end div#content-photo img.arrow#arrow-right */

div#content-photo img.portrait
{
    top: -225px;
    left: 50%;
    margin-left: -150px;
    position: absolute;
    z-index: 3;
}
/* end div#content-photo img.portrait */

div#content-photo img.landscape
{
    top: -150px;
    left: 50%;
    margin-left: -225px;
    position: absolute;
    z-index: 3;
}
/* end div#content-photo img.landscape */

div#content-index
{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    width: 98%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
}
/* end div#content-index */

div#content-index img.arrow#arrow-left
{
    top: -16px;
    left: 1%;
    position: absolute;
    z-index: 1;
}
/* div#content-index img.arrow#arrow-left */

div#content-index img.arrow#arrow-right
{
    top: -16px;
    right: 1%;
    position: absolute;
    z-index: 2;
}
/* end div#content-index img.arrow#arrow-right */

table#index
{
    text-align: center;
    margin-top: -256px;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    width: 90%;
    position: relative;
}
/* end table#index */

table#index td
{
    height: 128px;
}
/* end table#index td */

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

/*
** Footer
*/

div#left-foot
{
    float: left;
    margin: 0;
    padding: 0.5em;
    width: 10em;
}
/* end div#left-foot */

span#copyright
{
    float: left;
    text-align: left;
}
/* end span#copyright */

span#date
{
    float: right;
    text-align: right;
}
/* end span#date */

div#right-foot
{
    border-left-style: solid;
    border-left-width: 0.5em;
    margin-left: 11em;
    height: 1em;
    padding: 0.5em;
}
/* end div#right-foot */

div#right-foot[id]
{
     height: auto;
     min-height: 1em;
}
/* end div#right-foot[id] */

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

/* huetehundfotos.css ends here */