/* CSS (in case that isn't obvious ;-) */

.z1green {
  color: rgb(89, 195, 205);
}
.z1gray {
  color: rgb(119, 119, 119);
}

/* this doesn't work that easy, probably need to use the CSS preprocessor */
.top-bar,
.top-bar .top-bar-section, 
.top-bar .top-bar-section ul,
.top-bar .top-bar-section ul li,
.top-bar .top-bar-section ul li > a,
.top-bar .top-bar-section ul li > a:link,
.top-bar .top-bar-section ul li > a:active,
.top-bar .top-bar-section ul li > a:hover,
.top-bar .top-bar-section ul li > a:visited
{
  /* background-color: rgb(51,51,120); */
  background-color: #67798C; /* 103,121,141 */
}

#footer {
  background-color: rgb(51, 51, 51);
  color: #CCC;
}

.zfm {
  padding:    0px;
  text-align: center;
}

.zmapanel {
  background:          url(../img/haus-im-wald-port-640x852.jpeg);
  background-repeat:   no-repeat;
  background-position: bottom;
  background-size:     100% auto;
  border:              0px;
  box-shadow:          inset 0px 4px 20px -4px #67798C;
}
.zpansmall {
  background-color: rgba(103,121,141,0.4);
}
.zmapanel div.panel {
  background-color: rgba(255,255,255,0.9);
}
.zmapanel .row .panel {
  border-radius: 12px
}
.zpansmall a {
  padding-top:    4px;
  padding-bottom: 4px;
  display:        block;
  vertical-align: bottom;
  height: 64px;
}
.no-touch .zpansmall a {
  transition: background-color .2s linear;
}
.no-touch .zpansmall a:hover, .zpansmall a:active {
	/* background-color: rgba(103, 121, 0, 0.07); */
	background-color: rgba(133,161,195,0.5);
	box-shadow: inset 0 3px 5px -3px rgba(0, 0, 0, 0.5);
}


.zfmm:hover {
  position: relative;
  -webkit-transform: scale(1.25);
  -moz-transform:    scale(1.25);
  position: relative;
}

.quotes blockquote {
  display: none;
  margin: 0px;
  padding-top: 0px;
}
.panel .quotes blockquote {
  color: #404040;
}

.panel table {
  border: 0px;
}

td .panel {
  margin:        0px;
  height:        auto;
  border-radius: 12px;
}

.zmmpanel {
  background-image:    url(../img/haus-im-wald-1024x470.jpeg);
  background-repeat:   no-repeat;
  background-position: bottom;
  background-size:     100% auto;
  border:              0px;
  box-shadow:          inset 0px 4px 20px -4px #67798C;
}
.zmmpanel div.panel {
  background-color: rgba(255,255,255,0.9);
}


/* ****** navigation ****** */

.navigation ul li a {
	font-family:    'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-size:      0.9em;
}

.navigation {
	width:    100%;
	padding:  0px;
  background-color: rgba(103,121,141,0.4);
}
.navigation .columns {
	padding: 0px;
}

.navigation ul { /* neaty! make it a table ;-) */
	line-height:  40px;
	text-align:   center;
	display:      table;
	table-layout: fixed;
	width:        100%;
	margin:       0 auto;
}

.navigation li {
	position: relative;
	display:  table-cell;
}

.navigation li > a {
	display: block;
	color:   #EEE;
}

.navigation li a > i { /* those are the icons */
	display:       block;
	margin-bottom: -20px;
	color:         #444;
}

.navigation .home a {
	background:      url(../img/nachdenklich-128x128.png) no-repeat center 11px;
	background-size: 54px 54px;
  /* this moves the text content out of the way */
	text-indent: -9999px;
	color: transparent;
}

.navigation li > a:hover,
.navigation li > a:active,
.navigation li.active
{
	background-color: rgba(133,161,195,0.5);
	box-shadow: inset 0 3px 5px -3px rgba(0, 0, 0, 0.5);
}

.navigation li:hover    > a i,
.navigation li:active   > a i,
.navigation li.selected > a i,
.navigation li.active   > a i
{ 
  color: rgb(169, 192, 213); /* change color of icons */
}


/* content */

#content {
  padding-top: 0.7rem;
}
#content li > p.text {
  margin-bottom: 0px;
}
#content p.text {
  line-height: 1.8em;
  font-family: Verdana, "trebuchet MS", Helvetica, Sans-Serif;
  font-size:   10pt;
  text-align:  justify;
}
#content p.text h3 {
  /* this is not sufficient, would be better than the span below */
  color:       green;
  font-weight: bold;
  display:     inline;
}
#content p.text span.sectiontitle {
  color:       green;
  font-weight: bold;
}
#content p.text a, #content p.text a:visited, #content p.text a:link {
  color: green;
}
#content div blockquote {
  padding-top: 0px;
  margin-top:  -1rem;
}

#content #contactblocks div > blockquote {
  margin-top:  0;
}
#contactblocks tr:nth-of-type(even) {
  background-color: transparent;
}
#contactblocks table {
  width: 100%;
}
#contactblocks table tr td:first {
  width: 10%;
}
#contactblocks table td {
  padding: 7px 8px 7px 8px;
}