@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&v2);

body {
    /*
    // fonts supplied with windows xp: http://www.microsoft.com/typography/fonts/winxp.htm
    // cross-system fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
    // http://www.xvsxp.com/system/fonts_view.php
    // Linux fonts: http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/
    // even more cross-browser: http://my.opera.com/area42/blog/css-font-matching-windows-mac-and-linux
    // http://www.apaddedcell.com/web-fonts
    // http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
    // http://www.codestyle.org/css/font-family/
    // vertikale gesamtzentrierung: http://d-graff.de/fricca/center.html
    */
    font-family: 'Open Sans', Verdana, sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #222;
    text-transform: lowercase;
    background: white;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 21px;
}

h1, h2 {
	color: #000;
}

acronym {
    text-transform: none;
}

div.container {
    float: none;
    position: relative;
    border: 0;
    padding: 0;
}

div.main {
    padding-top: 14px;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid white;
    margin: 0 auto;
    width: 970px;
    background: white;
    position: relative;
    min-height: 620px;
}

div.header {
    font-size: 18px;
    font-weight: normal;
    clear: both;
    border-bottom: 1px solid #eee;
    padding-bottom: 14px;
    margin-bottom: 7px;
    color: #ccc;
    margin-top: 0;
    padding-top: 14px;
}

h1 {
    font-size: 18px;
    font-weight: 400;
    clear: both;
    margin-top: 0;
    padding-top: 21px;
}

body.start h1 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 14px;
    margin-bottom: 21px;
    padding-top: 14px;
}

h1.project {
    margin-bottom: 7px;
    text-transform: none;
}

h2 {
    font-weight: 400;
    color: #000;
}

h2.section {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px;
}

h2.news-head {
    display: none;
}

ul.news-list {
    padding-left: 0;
    margin-left: 0;
    list-style-type:none;
    margin-bottom: 3ex;
}

ul.news-list li {
    display: block;
}

.news-date {
    margin-right: 0.6em;
    color: #999;
}

a.news-subject {
    text-decoration: none;
}

.news-subject-arrow {
    color: red;
}

.arrow {
    color: #ddd;
}

/* Galerie auf der Start-Seite und auf der Rubrik-Indexseite */

ul.gallery {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.gallery li, h2.gallery {
    border: 1px solid #ccc;
    width: 180px;
    height: 112px;
    position: relative;
    overflow: hidden;
    margin-right: 7px;
    margin-bottom: 5px;
    float: left;
}

ul.gallery li a, h2.gallery a {
    position: absolute;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

ul.gallery li img {
    border: 0;
    position: absolute;
}

ul.gallery .banner, h2.gallery .banner {
    position: absolute;
    bottom: 7px;
    width: 180px;
    height: 28px;
    line-height: normal;
    cursor: pointer; /* IE */
}

#info .banner {
    cursor: default;
}

ul.gallery .banner .text, h2.gallery .text {
    display: block;
    position: absolute;
    top: 5px;
    left: 7px;
    color: white;
    font-weight: 600;
    text-decoration: none;
	font-size: 13px;
    text-transform: none;
}

ul.gallery .banner .background, h2.gallery .background {
/* instead of this transparent span it would be better to have a transparent background color in the corresponding text span above, but this needs CSS3 */
    display: block;
    position: absolute;
    width: 180px;
    height: 28px;
    background: black;
    opacity: 0.5;
    filter: alpha( opacity = 50 ); /* IE */
}

ul.gallery .banner, ul.gallery .background {
    width: 240px;
}

h2.gallery .text {
    font-size: 13px;
    font-weight: normal;
    color: #666;
}

h2.gallery .arrow {
    font-size: 12px;
    position: absolute;
    right: 7px;
    top: 7px;
    color: red;
    font-weight: 600;
}

ul.gallery li.text-only .text {
    color: black;
    font-weight: normal;
}

ul.gallery li.text-only .background, h2.gallery .background {
    background: #eee;
}

ul.gallery li.empty {
    border: 1px solid #eee;
}

.navigator {
    clear: left;
    padding-top: 3ex;
}

h2 {
    margin-top: 0;
    x-padding-left: 7px; /* todo: padding wird der breite zugerechnet, daher inneren span machen mit padding, sonst zuviel rechnerei */
}

a, a:link, a:visited {
    color: black;
}

h2 a {
    text-decoration: none;
    display: block;
    height: 112px; /* keine Ahnung, warum wir hier 2px abziehen m�ssen... */
    x-border: 1px solid #606b73;
}

.footer-strut {
    height: 42px;
    clear: both;
}

.footer {
    margin-top: 5ex;
    font-size: 12px;
    clear: left;
    position: absolute;
    bottom: 0;
    margin-bottom: 7px;
}

.footer, .footer a {
    color: #888;
	font-weight: 400;
}

.separator {
    margin-left: 0.6em;
    margin-right: 0.6em;
}

/* news page */

h1.news {
    margin-left: 127px;
}

.news-block {
    margin-bottom: 5ex;
}

.news-block-date {
    float: left;
    width: 120px;
    text-align: right;
    padding-right: 7px;
    color: #333;
}

.news-block-date-arrow {
    display: none;
    margin-right: 7px;
}

.news-block:target .news-block-date, .target .news-block-date {
    font-weight: 600;
    color: red;
}

.news-block:target .news-block-date-arrow, .target .news-block-date-arrow {
    display: inline;
}

.news-block-subject {
    font-weight: 600;
    font-size: 100%;
    float: left;
    width: 600px;
    border-bottom: 1px solid #eee;
    margin-bottom: 7px;
    padding-bottom: 7px;
}

.news-block-subject a {
    text-decoration: none;
}

.news-block-body {
    margin-left: 127px;
    width: 600px;
    clear: left;
    x-padding-bottom: 5ex;
    x-border-bottom: 1px solid #ccc;
}

.news-block-clear {
    clear: both;
    height: 0;
}

/* photo pages */

.photo-block-container {
    text-align: center;
    margin-top: 49px;
}

.photo-block {
    x-margin-top: 21px;
    padding-top: 21px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.photo-block-title {
    font-size: 13px;
	font-weight: 400;
}

.photo-block-title .line1, .locator .line1, .locator span.project, .locator a.project {
    text-transform: none;
}

.photo-block-title .line2 {
    color: #555;
}

div.locator {
    float: left;
    margin-top: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
	color: #000;
	font-weight: 400;
}

.locator, .locator a {
    color: #666;
}

div.tour {
    float: right;
    font-size: 12px;
}

.tour .label, .tour .room, .tour .button, .tour .indicator {
    display: block;
    float: left;
    margin-top: 3px;
    padding: 2px 3px 4px 3px;
}

.tour .label {
    font-weight: 400;
}

a.start-tour {
    font-weight: 600;
    text-decoration: none;
}

.start-tour .arrow {
    color: red;
}

.tour .button, .tour .room, .tour .indicator {
    text-align: center;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    height: 18px;
}

.tour .indicator {
    padding-left: 7px;
    padding-right: 7px;
}

.tour .button, .tour .room {
    width: 18px;
}

.tour .room, .tour .indicator, .tour .prev {
    margin-right: 3px;
}

.tour .button {
    font-weight: 600;
}

.tour a {
    text-decoration: none;
}

.tour .current {
    color: red;
    font-weight: 600;
    border: 1px solid #ccc;
    background-color: #e8e8e8;
}

.ie-advice {
    background-color: #ffaeb9;
    border: 1px solid #ff3f59;
    font-family: Tahoma, sans-serif;
    font-size: 8pt;
    padding: 7px;
    text-transform: none;
}

/* links page */

dd {
    margin-bottom: 7px;
}

dd, dd a, dd a:link, dd a:visited {
    color: #444;
}

/* vita page */

dl.cv dt {
    display: block;
    float: left;
}

dl.cv dd {
    display: block;
    margin-left: 7em;
}

dl.cv {
    width: 350px;
    float: left;
}

dl.ausstellungen {
    margin-left: 2em;
    border-left: 1px solid #eee;
    padding-left: 3em;
}

dl.ausstellungen dd {
    margin-left: 4em;
}

dd .line1 {
    color: black;
    text-transform: none;
}

/* Photo index page */

ul.photo-frames {
    padding-left: 0;
    margin-top: 21px;
    margin-left: 0;
}

ul.photo-frames li {
    list-style: none;
    display: block;
    position: relative;
    width: 180px;
    height: 112px;
    border: 1px solid #eee;
    x-padding: 3px;
    float: left;
    margin-right: 7px;
    margin-bottom: 5px;
    overflow: hidden;
}

ul.photo-frames a {
    display: block;
    width: 100%;
    height: 100%;
}

ul.photo-frames img {
    border: 0;
    position: absolute;
}

body#imprint {
    font-size: 12px;
}

body#imprint h2 {
    font-size: 100%;
    font-weight: 600;
    margin-top: 14px;
    margin-bottom: 7px;
}

body#courses h2 {
    font-size: 100%;
    margin-top: 14px;
    margin-bottom: 7px;
}