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


/* 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(81,133,164);
}

.top-bar .title-area li a {
  color: #DEDEDE;
  font-weight: bold;
}

.top-bar .title-area li.nohome a {
  padding-left:      3rem;
  margin-left:       1.5rem;
  background-image:  url(../img/zz2-64x64.png);
  background-size:   auto 100%;
  background-repeat: no-repeat;
  color: transparent;
}

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

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

.panel p small {
  font-size: 90%;
}

.zmapanel {
  background:          url(../img/bridge-to-water-640x825.jpeg);
  background-repeat:   no-repeat;
  background-position: top;
  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;
}

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

.zmmpanel {
  background-image:    url(../img/bridge-to-water-1024x400.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);
  max-width: 40rem;
}


/* ****** 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(81, 133, 164, 0.2);
}
.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/zz2-256x256.png) no-repeat center 11px;
	background-size: 48px 48px;
}

.navigation .home a {
  /* 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
{
  color: white;
	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: white;
}


/* content */

#content li > p.text {
  margin-bottom: 0px;
}
.text, .text ul li {
  line-height: 1.8em;
  font-family: Verdana, "trebuchet MS", Helvetica, Sans-Serif;
  text-align:  justify;
}
p.text, .text ul li {
  font-size:   10pt;
}
.text, .text ol li {
  line-height: 1.8em;
  font-family: Verdana, "trebuchet MS", Helvetica, Sans-Serif;
  text-align:  justify;
}
p.text, .text ol li {
  font-size:   11pt;
}
.text h3, .text h4 {
  color: #666;
  font-weight: bold;
  display:     inline;
}
.text span.sectiontitle {
  font-weight: bold;
}
#content div blockquote {
  padding-top: 0px;
  margin-top:  -1rem;
}

.text .fi-dislike, .text .fi-x, .text .fi-torso, .text .fi-dollar {
  color: rgb(81,133,164);
}
.text .fi-like, .text .fi-check, .text .fi-arrow-right {
  color: rgb(102, 167, 203);
}

#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;
}

ul.vcard li {
  white-space: nowrap;
}
#imprint table tr td:first-child {
  /* white-space: nowrap; */
}

.aboutpanel p {
  margin-bottom: 0.5rem;
}


/* colored ZeeZide text */

span.zz                    { font-weight: bold; white-space: nowrap; }
span.zz span:first-of-type { color: rgb(81,133,164);   }
span.zz span:last-of-type  { color: rgb(102, 167, 203); }


/* override default link style */

a { color: rgb(81,133,164); }


/* color links */

#homepage div a:hover h4 {
  color: rgb(81,133,164);
}


/* products */

div.products h4, div.products h5, div.products h6 {
	text-align: center;
}
div.products h4 a, div.products h5 a, div.products h6 a {
	color: black;
}
div.products h4 a:hover, div.products h5 a:hover, div.products h6 a:hover {
	text-decoration:       underline;
	text-decoration-style: dashed;
	text-decoration-color: rgb(81,133,164);
}
div.products div.icon {
	text-align: center;
	margin-bottom: 1em;
}
div.products div.icon img {
	height: 128px;
	width: 128px;
}
div.products div.icon img.iosicon {
  border-radius: 24px;
}


/* screenshots */

div.screenshots img {
  margin-top:    0.5em;
  margin-bottom: 0.5em;
  padding:       1em;
  border-width:  1px;
  border-color:  #AAA;
  border-style:  solid;
  border-radius: 8px;
}

div.codecows-orbit {
  border-width:  1px;
  border-color:  #AAA;
  border-style:  solid;
	margin-bottom: 1em;
	text-align:    center;
}
@media only screen and (min-width: 40.0625em) {
	div.codecows-orbit {
	  padding:       1em 1em 0em 1em;
	  border-radius: 8px;
	}
}
@media only screen and (max-width: 40.0624em) {
	div.codecows-orbit {
	  padding:       4px;
	}
}

/* polaroid */

.gallery {
  background-color: #EDEDED;
  margin-top:       1rem;
  text-align:       center;
}
.gallery ul li, .gallery ul li div {
  text-align: center;
}

.photo {
  border-width:     1px;
  border-color:     black;
  border-style:     solid;
  margin-bottom:    2px;
}

.polaroid {
	-webkit-transition: -webkit-transform .15s linear;
	-moz-transition:    -moz-transform    .15s linear;
	transition:         transform         .15s linear;
}
.polaroid img {
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow:    0 3px 6px rgba(0,0,0,.25);
	box-shadow:         0 3px 6px rgba(0,0,0,.25);
  margin-left:  auto;
  margin-right: auto;
}

.polaroid img {
	display: block;
	border:  8px solid white;
}

.gallery ul li:nth-of-type(1) div {
	-webkit-transform: rotate(-2deg);
	-moz-transform:    rotate(-2deg);
	transform:         rotate(-2deg);
}
.gallery ul li:nth-of-type(1):hover div {
	-webkit-transform: rotate(2deg);
	-moz-transform:    rotate(2deg);
	transform:         rotate(2deg);
}
.gallery ul li:nth-of-type(2) div {
	-webkit-transform: rotate(5deg);
	-moz-transform:    rotate(5deg);
	transform:         rotate(5deg);
}
.gallery ul li:nth-of-type(2):hover div {
	-webkit-transform: rotate(-5deg);
	-moz-transform:    rotate(-5deg);
	transform:         rotate(-5deg);
}
.gallery ul li:nth-of-type(3) div {
	-webkit-transform: rotate(1deg);
	-moz-transform:    rotate(1deg);
	transform:         rotate(1deg);
}
.gallery ul li:nth-of-type(3):hover div {
	-webkit-transform: rotate(-1deg);
	-moz-transform:    rotate(-1deg);
	transform:         rotate(-1deg);
}
.gallery ul li:nth-of-type(4) div {
	-webkit-transform: rotate(-4deg);
	-moz-transform:    rotate(-4deg);
	transform:         rotate(-4deg);
}
.gallery ul li:nth-of-type(4):hover div {
	-webkit-transform: rotate(4deg);
	-moz-transform:    rotate(4deg);
	transform:         rotate(4deg);
}
.gallery ul li:nth-of-type(5) div {
	-webkit-transform: rotate(3deg);
	-moz-transform:    rotate(3deg);
	transform:         rotate(3deg);
}
.gallery ul li:nth-of-type(5):hover div {
	-webkit-transform: rotate(-3deg);
	-moz-transform:    rotate(-3deg);
	transform:         rotate(-3deg);
}
.gallery ul li:nth-of-type(6) div {
	-webkit-transform: rotate(-8deg);
	-moz-transform:    rotate(-8deg);
	transform:         rotate(-8deg);
}
.gallery ul li:nth-of-type(6):hover div {
	-webkit-transform: rotate(8deg);
	-moz-transform:    rotate(8deg);
	transform:         rotate(8deg);
}
.gallery ul li:nth-of-type(7) div {
	-webkit-transform: rotate(-3deg);
	-moz-transform:    rotate(-3deg);
	transform:         rotate(-3deg);
}
.gallery ul li:nth-of-type(7):hover div {
	-webkit-transform: rotate(3deg);
	-moz-transform:    rotate(3deg);
	transform:         rotate(3deg);
}
.gallery ul li:nth-of-type(8) div {
	-webkit-transform: rotate(2deg);
	-moz-transform:    rotate(2deg);
	transform:         rotate(2deg);
}
.gallery ul li:nth-of-type(8):hover div {
	-webkit-transform: rotate(-2deg);
	-moz-transform:    rotate(-2deg);
	transform:         rotate(-2deg);
}
.gallery ul li:nth-of-type(9) div {
	-webkit-transform: rotate(-4deg);
	-moz-transform:    rotate(-4deg);
	transform:         rotate(-4deg);
}
.gallery ul li:nth-of-type(9):hover div {
	-webkit-transform: rotate(4deg);
	-moz-transform:    rotate(4deg);
	transform:         rotate(4deg);
}