html, body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  height: 100%;
  min-height: 100%;  
}
div.page { /* all pages except index */
  background: -webkit-linear-gradient(#CED1D6, #333D47); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#CED1D6, #333D47); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#CED1D6, #333D47); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#CED1D6, #333D47); /* Standard syntax */
  min-height: 100%;
}
div.page-index { /* index only */
  background-color: #000000;
  min-height: 100%;
}

/* all pages */

div.content {
  width: 90%;
  min-width: 320px;
  margin: auto;
  padding-bottom: 1.5em; /*20px*/
}

/* h1 tag is outside of wrap div */
h1 { /* hint: same style as ul.navigation li div */
  font-weight: bold;
  color: #FFFFFF;
  font-size: 3.9em;
  background-color: #3B3B3B;
  margin-top: 0.4em; /*20px*/
  margin-bottom: 0.3em; /*20px*/
  text-align: center;
  padding-bottom: 2px;
}

/* all pages except index */

div.head {
  background-color: #000000;
  padding: 5px 0;
  /* fix position on top */
  /*TODO: activate only if javascript activated */
  width: 100%;
  position: fixed;
  top: 0px;
  z-index:999;
}
/* div behind the fixed head to control the dynamic space until content div */
div.head-spacedummy {
  background-color: #000000;
  padding: 5px 0;
}
div.head-center { /* except index */
  width: 90%;
  min-width: 320px;
  margin: auto;
}
div.head-center div.left {
  float: left;
  width: 60%;
}
div.head-center div.right {
  float: right;
  width: 20%;/*10 (28.8.)*/
  text-align: right;
}

div.head-center div.right div.left,
div.head-center div.right div.right {
  width: 50%;
}

div.head div.left img,
div.head-spacedummy div.left img {
  width: 100%;
  /* = 500px / 2 */
  min-width: 250px;
}
div.head div.right img {
  width: 100%;
  /* = 84px / 2 */
  min-height: 42px;
  min-width: 42px;
}


/* index page */

div.page-index div.logo {
    min-width: 320px;
	margin: auto;
/*    max-width: 500px;*/
}
div.page-index div.logo img {
  width: 100%;
  height: auto;
  padding: 0px;
}


/* navigation page start */
ul.navigation,
ul.navigation-bottom {
  list-style-type: none;
}
ul.navigation {
  margin-top: 1.5em;
}
ul.navigation li,
ul.navigation-bottom li {
	font-weight: bold;
	color: #FFFFFF;
}
ul.navigation-bottom li.left {
	float:left;
	width: 48%;
}
ul.navigation-bottom li.right {
	float:right;
	width: 48%;
}
ul.navigation li a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	font-size: 3.9em;
}
ul.navigation-bottom li a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	font-size: 2.5em;
}
ul.navigation li div,
ul.navigation-bottom li div {
	background-color: #3B3B3B;
	margin-bottom: 0.4em; /*20px*/
	text-align: center;
	/* 2 pix for a small space between text underline and div */
    padding-bottom: 2px;
}
ul.navigation div:active,
ul.navigation-bottom div:active {
	background-color: #FC561C;
	box-shadow: 5px 5px 5px #F5AB30,
               -5px 5px 5px #F5AB30,
                5px -5px 5px #F5AB30,
               -5px -5px 5px #F5AB30;
}
/* navigation page end */

/* add navigation for index page 2015-01-31 */
ul.navigation li a div p {
/*	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;*/
	font-size: 0.5em;
}


/* content pages with white wrap */

/* tatorte page */
div.wrap {
  padding: 1em;
/*    padding: 10px;*/
	background-color: #EAEBED;
}


/* content pages with wrap div, e.g. tatorte list */
/* 10px = 0.2em here */
div.wrap h2 {
  font-size: 3.6em;
  font-weight: bold;
  margin-top: 0.1em;
  margin-bottom: 0.2em;
}
div.wrap h3 {
  font-size: 3em;
  margin-bottom: 0.3em;
}
/* spielplan-tatorte, agb, impressum */
div.wrap h4 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.2em;
}
/* spielplan-tatorte */
div.wrap h5 {
  font-size: 2.5em;
  margin-bottom: 0.2em;
}

/* generelles, krimis, ... */
div.wrap p {
  font-size: 3em;
  margin-bottom: 1em;
}

/* agb, impressum: <p> sitze a bit smaller */
div.agb p,
div.impressum p {
  font-size: 2.5em;
  margin-bottom: 1em;
}
/* <p> in guestbook: size smaller */
div.guestbook p {
  font-size: 2em;
  margin-bottom: 0.5em;
}
/* <p> in event list: size smaller */
div.events p {
  font-size: 1.8em;
  margin-bottom: 0.5em;
}
/* <p> class = subline */
div.wrap p.subline {
  font-size: 2.2em;
  margin-bottom: 0.5em;
}

/* a visible black line by hr tag */
div.wrap hr {
  height: 0.2em;
  margin-top: 0px;
  margin-bottom: 1em;
  background-color: #000000;
}
/* an invisible space by hr tag */
div.wrap hr.space {
	visibility: hidden;
}



/* images in wrap (full and half size) */
div.wrap img {
  margin-bottom: 2em;
}
/* images in wrap (half size) */
div.wrap div.left {
	float:left;
	width: 49%;
}
div.wrap div.right {
	float:right;
	width: 49%;
/*	text-align: right;*/
}
div.wrap div.left img,
div.wrap div.right img,
div.wrap div.full img {
  margin-bottom: 0px;
  width: 100%;
}
/* optional text on top of img */
div.wrap div.left p,
div.wrap div.right p,
div.wrap div.full p {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 0.2em;
}



/* events lists only start / availability options */
div.wrap span.available {
  font-size: 1.2em;
  font-weight: bold;
  color: #009900;
}
div.wrap span.remaining {
  font-size: 1.2em;
  font-weight: bold;
  color: #E88B00;
}
div.wrap span.full {
  font-size: 1.2em;
  font-weight: bold;
  color: #CC0000;
}
div.wrap span.past {
  font-size: 0.8em;
  color: #000;
}
/* events lists only end */

/* div which acts as link-button start */
div.wrap .div-button-spielplan {
	text-align: center;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
div.wrap .div-button-krimis {
	text-align: center;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
}
div.wrap .div-button-spielplan a {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 3px;
	background-color: #3B3B3B;
	font-size: 3.2em;
}
div.wrap .div-button-krimis a {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 0px;
	padding-bottom: 3px;
	background-color: #3B3B3B;
	font-size: 2.5em;
}

div.wrap .div-button-spielplan a:link,
div.wrap .div-button-spielplan a:visited,
div.wrap .div-button-spielplan a:hover,
div.wrap .div-button-spielplan a:active,
div.wrap .div-button-krimis a:link,
div.wrap .div-button-krimis a:visited,
div.wrap .div-button-krimis a:hover,
div.wrap .div-button-krimis a:active {
	color: #FFFFFF;
	text-decoration: none;
}
div.wrap .div-button-spielplan a:active,
div.wrap .div-button-krimis a:active  {
	background-color: #FC561C;
	box-shadow: 5px 5px 5px #F5AB30,
               -5px 5px 5px #F5AB30,
                5px -5px 5px #F5AB30,
               -5px -5px 5px #F5AB30;
}
/* div which acts as link-button end */


/* helpers */

div.clear {
  clear: both;
}

table.status {
  width: 100%;
  margin-bottom: 1em;
  font-size: 1.9em;
}
table.status td {
  text-align: center;
  padding: 0.5em; 
  background-color: #eaebed;
}

/*
@media only screen and (max-width: 768px) {
   div.wrap {
      font-size: 1.5em;
   }
}
@media only screen and (max-width: 320px) {
   div.wrap {
     font-size: 2em;
   }
}
*/