/*
    CSS 2.0 stylesheet for thomas-lotze.de
*/

/* degradation */

hr, .hidden {
    display:none;
}

/* colors */

body {
    background-color:#f6f6f6;
    color:#000000;
}

h1#h1 {
    background:url('/lib/bg.jpg') bottom left no-repeat;
    color:#993300;
}

#topbar, #bottombar {
    background-color:#e0e0e0;
    border-color:#990000;
}

#nav li:hover {
    background-color:#c0c0c0;
}

#nav li:hover dl {
    background-color:#f0f0f0;
    border-color:#c0c0c0;
}

h2, h3, h2 a[href], h2 a[href]:visited {
    color:#990000;
}

#footer h3 {
    color:#000000;
}

a[href] {
    color:#000066;
}

a[href]:visited {
    color:#330033;
}

a[href]:hover, a[href]:focus {
    color:#0000ff;
}

a[href]:active {
    color:#cc0000;
}

#language a[href], #language a[href]:visited {
    color:#999999;
}

#bottombar, #bottombar a[href], #bottombar a[href]:visited, #nav, #footer {
    color:#666666;
}

#nav a[href], #footer a[href] {
    color:#333388;
}

#nav a[href]:visited, #footer a[href]:visited {
    color:#553355;
}

/* fonts */

body {
    font-family:Helvetica, sans-serif;
}

#main {
    line-height:150%;
}

h1, h2, h3, h4, h5, h6 {
    font-family:Palatino, Georgia, serif;
    font-weight:normal;
}

h1#h1 {
    font-size:207%;
}

#topbar, #nav, #language, #bottombar, #footer {
    font-size:80%;
}

#nav a, #language a, #bottombar a, #footer a, h2 a {
    text-decoration:none;
    white-space:nowrap;
}

#main dt {
    font-weight:bold;
}

.code {
    font-family:monospace;
}

address {
    font-style:normal;
}

/* layout */

body {
    margin:0px;
}

h1#h1, #body, #main, #bottombar, #footer {
    position:relative;
    clear:both;
}

h1#h1 {
    min-height:90px;
    padding-left:320px;
    padding-right:3%;
    padding-top:60px;
    padding-bottom:30px;
    margin:0px;
}

#language {
    position:absolute;
    top:12px;
    right:2%;
}

#nav ul {
    position:absolute;
    top:1px;
    left:1%;
}

#topbar:after, #bottombar:after {
    content:'\0000a0';
}

#topbar, #bottombar {
    border-style:solid;
    border-width:0px;
    border-top-width:1px;
    padding:12px;
    padding-left:2%;
    padding-right:2%;
}

#main {
    min-height:500px;
    max-width:800px;
    margin:auto;
    padding:9%;
    padding-top:2%;
    padding-bottom:4%;
    text-align:justify;
}

#date {
    float:right;
}

#footer {
    text-align:center;
}

.portlet {
    margin:2em 5%;
    display:inline-block;
    text-align:left;
    vertical-align:top;
}

.portlet h3 {
    margin-top:0px;
    margin-bottom:0.5em;
}

.portlet ul {
    padding-left:0em;
    margin-top:0em;
    margin-bottom:1.5em;
}

.portlet li {
    margin-top:0.4em;
    margin-bottom:0.5em;
    list-style:none;
}

.portlet dd {
    margin:0pt;
    margin-bottom:1em;
}

/* general borders */

img {
    border:0px;
}

pre.filecontent {
    border:1px solid black;
    padding:5px;
}

/* lists */

dl {
    margin:0px;
}

dt {
    margin-top:0.5em;
}

dd {
    margin-top:0.2em;
    margin-left:1.5em;
    margin-bottom:0px;
    margin-right:0px;
}

dd > p:first-child {
    margin-top:0pt;
}

/* navigation */

#nav h2 {
    display:none;
}

#nav ul {
    padding:0px;
    margin:0px;
}

#nav {
    white-space:nowrap;
}

#nav li {
    display:inline-block;
    position:relative;
    padding:12px 1em 12px 0px;
}

#nav li:before {
    content:'▹';
    margin-left:0.25em;
}

#nav li.has_submenu:before {
    content:'▾';
}

#nav li > dl {
    display:none;
}

#nav li:hover > dl {
    display:block;
    min-width:80%;
    position:absolute;
    padding:2em;
    padding-top:0.5em;
    margin-top:12px;
    border-style:solid;
    border-width:1px;
    border-top:none;
}

#nav dt {
    margin-top:0.4em;
}

#nav dl {
    margin-bottom:1.5em;
}

#nav dl dl {
    margin-bottom:0.5em;
}

#nav dd {
    margin-top:0px;
}

a.more {
    color:#990000;
    font-size:80%;
    float:right;
    position:relative;
    top:1.5em;
    text-decoration:none;
}

a.more:before, a.more:after {
    content:"…";
}

/* photo pages */

a.thumbnail, a.thumbnail:hover, a.thumbnail:focus, a.thumbnail:visited {
    position:relative;
    display:inline-block;
    width:172px;
    height:172px;
    margin:2px;
    overflow:hidden;
    text-align:center;
    color:#f6f6f6;
    text-decoration:none;
}

a.thumbnail span {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    bottom:0px;
    display:block;
    width:100%;
    padding:3px;
    background-color:rgba(0, 0, 0, 0.55);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

a.thumbnail:hover span, a.thumbnail:focus span {
    background-color:rgba(0, 0, 0, 0.2);
}

.gallery {
    clear:both;
    text-align:center;
    margin-left:-12%;
    margin-right:-12%;
}

.leaf-navigation {
    font-size:80%;
}

.leaf-navigation a, .leaf-navigation span {
    margin-right:1em;
    text-decoration:none;
}

.leaf-navigation .ellipsis {
    margin-left:-0.8em;
    margin-right:0.2em;
}

.current-batch {
    font-weight:bold;
}

.photoview img {
    background-color:#f6f6f6;
    padding:15px;
    margin-left:-15px;
    margin-right:-15px;
}

.copyright {
    text-align:center;
    font-size:80%;
    color:#666666;
}

.stockphoto-hint {
    margin-top:8ex;
    margin-left:-20px;
    padding-left:1em;
    border-left:20px solid #dddddd;
    color:#666666;
}

.image-links {
    margin-top:2em;
    text-align:center;
}

.image-links ul, .image-links li {
    display:inline;
    margin:0pt;
    padding:0pt;
}

.image-links ul li:after {
    content:',';
}

.image-links ul li:last-child:after {
    content:'';
}

/* Peecho */

#peecho {
    margin-top:2em;
    text-align:center;
}

/* Narrow screen */

@media (max-width:320px) {
    h1#h1 {
        padding-left:5%;
        background:none;
        min-height:0px;
    }
}

@media (min-width:321px) and (max-width:480px) {
    h1#h1 {
        padding-left:160px;
        background-position:-160px bottom;
    }
}