/*
 *
 *  Style sheet for www.gabriele-schweizer.de
 *  2007, lars burgstahler
 *
 */


/******************************** 
 * Box model, visual formatting
 ********************************/

a, body, div, h1, h2, h3, html, img, p, span, tr {
   margin: 0;
   padding: 0;
   border: none;
}

div#container {
   /* Initial containing block - no positioned ancestor boxes */
   position: absolute;
   top: 220px;
   width: 100%;
   min-height: 250px;

   /* IE<7 hack2
    * IE doesn't support min-height 
    * Indent of content gets messed up because of previous hacks.
    */
   height: auto;
   _height: 250px;
   /*
    * End of IE hack
    */
}

div#container.firstpage {
   padding: 90px 0 20px 0;
}

div#maincontent {
   margin: 0 20px 0 480px;
   padding: 0 0 20px 20px;
   position: relative;
   z-index: 20;
}

div#maincontent.commonpage {
   padding: 20px 0 20px 20px;
   border-left: #583e27 solid 1px;
   border-right: #583e27 solid 1px;
   min-height: 320px;

   /* IE<7 hack2
    * IE doesn't support min-height 
    * Indent of content gets messed up because of previous hacks.
    */
   height: auto;
   _height: 320px;
   /*
    * End of IE hack
    */
}

div#maincontent.commonpage p.newscontinued {
   margin-bottom: 1em;
}

div#maincontent.commonpage p.news {
   margin-bottom: 2em;
}

div#menu {
   border-top: #e38f15 solid 1px;
   position: absolute;
   top: -50px;
   left: 0;
   width: 100%;
}

div#menu.commonmenu {
   border-top: #583e27 solid 1px;
}

div#menu ul {
   margin: 0 20px 0 480px;
   padding: 0 0 29px 20px;
   border-top: #583e27 solid 1px;
   border-left: #583e27 solid 1px;
   border-right: #583e27 solid 1px;
   position: relative;
   left: 0;
}

div#menu.commonmenu ul {
   border-top: #e38f15 solid 1px;
   border-left: #e38f15 solid 1px;
   border-right: #e38f15 solid 1px;
}

div#menu ul li {
   padding: 0 4px;
   display: inline;
   position: relative;
   top: -0.7em;
}

div#illustration {
   padding: 0 0 10px 20px;
   position: absolute;
   top: 20px;
   left: 0px;
   width: 460px;
}


img.firstpageillustration {
   margin: 70px 0 0 0;
   width: 140px;
   height: 140px;
}

img.commonpageillustration {
   height: 300px;
}

h1 {
   position: relative;
   top: -6px;
}

h1, h2, h3 {
   padding: 0 0 8px 4px;
}

h2, h3 {
   display: block;
}

div#maincontent ul {
   margin-top: 2em;
}

div#maincontent ul li {
   margin-bottom: 3em;
}

div#maincontent a.weiter, div#maincontent p.navi span.weiter a {
   padding-right: 30px;
}

div#maincontent p.intro span.audio a, div#maincontent p span.pdf a {
   padding-right: 20px;
}

div#maincontent p.navi span.zurueck a {
   padding-left: 30px;
}

table {
   width: 80%;
}

td {
   padding: 0.2em 0.3em;
   vertical-align: top;
}

p {
   padding: 0.5em 1em 0 4px;
}

p.intro {
   padding: 32px 0 0 40px;
   width: 80%;
}

.vcard {
   margin: 0.4em 0 1.5em 0;
   padding-left: 4px;
}

p.navi {
   position: absolute;
   bottom: 20px;
}

p.navi span.zurueck {
   margin-right: 1em;
   float: left;
}

p.navi span.weiter {
   margin-right: 20px;
   margin-left: 1em;
   float: right;
}

div#selection {
   position: relative;
   top: 1em;
   z-index: 100;
}

div#selection a.gallery, #menu a.gallery:visited {
   margin-right: 10px;
   display: inline;
   top: 0;
   left: 0;
   height: 100px;
}

div#selection a img.preview {
   height: 100px;
}

div#selection a span {
   display: none;
}

div#selection a .view {
   display: block;
   position: absolute;
   top: -1px;
   left: -1px;
   width: 1px;
   height: 1px;
}

div#selection a.gallery:hover img.view {
   display: block;
   position: absolute;
   top: -30px;
   left: -460px;
   width: auto;
   height: 300px;
}

div#selection a:hover span {
   display: block;
   position: absolute;
   top: 150px;
   left: 0;
   width: auto;
   height: 300px;
}


/********************************
 * Colors, Background
 * ------------------
 * dunkelbraun   : #583e27
 * orange-gelb   : #e38f15
 * sand-gelb     : #ddccbb
 ********************************/

body, div#menu ul li {
   color: #e38f15;
   background: #583e27;
}

div#container, div#illustration, div#maincontent a, h1, h2, h3 {
   color: #583e27;
   background: #e38f15;
}

div#container.firstpage {
   background: #e38f15 url("striche.jpg") left bottom repeat-x;
}

div#menu ul li a {
   color: #ddccbb;
   background: #583e27;
}

div#maincontent a.weiter, div#maincontent p.navi span.weiter a {
   background: transparent url("arrowright.png") right no-repeat;
}

div#maincontent p.navi span.zurueck a {
   background: transparent url("arrowleft.png") left no-repeat;
}

div#maincontent p.intro span.audio a {
   background: transparent url("audiolink.gif") right no-repeat;
}

div#maincontent p span.pdf a {
   background: transparent url("page_white_acrobat.png") right no-repeat;
}

div#selection a.gallery:hover {
   /*
    * Hover doesn't work for #e38f15 as a bg color in IE5.5
    * This color does ... at least, it isn't visible in IE5.5
    */
   color:#583e27;
   background-color: #8c97a3;
}

div#maincontent > div#selection a.gallery:hover {
   /*
    * Fix the color-hack, because the bg color _is_ visible 
    * in other browsers (at least Firefox)
    */
   background-color: #e38f15;
}


/********************************
   Fonts, Styling
 ********************************/

html {
   font-family: "courier new", monospace;
}

ul {
   list-style-type: none;
}

div#menu ul li a {
   font-size: 80%;
   text-decoration: none;
}

h1 {
   font-weight: bolder;
   font-size: 24pt;
}

h2 {
   font-size: 14pt;
}

h3 {
   font-size: 12pt;
}

div#maincontent a {
   font-size: 100%;
   text-decoration: none;
}

.vcard {
   font-size: 90%;
}

.vcard .org .organization-name {
   font-variant: small-caps;
   font-weight: bold;
   font-size: x-large;
}

.country-name:after {
   content: " -";
}

.impressum {
   font-size: 90%;
}

a, div#selection a.gallery, div#selection a.gallery:visited, div#selection a.gallery:hover  {
   text-decoration: none;
}