@charset "UTF-8";
/* CSS Document
   www.marcoheggen.com
   www.marcoheggen.de
   Start: 10/2012
*/



/* Farbschema
--------------------------------------------------------------------------------------- */
/* Grauton für Schriften: #5c5c5c
   Blauton: #72beff
   Verlauf von: #c0c0c0 nach #ffffff
   Links visited: #80a9cb


   Farbton (Element): #xxxxxx
*/



/* Reset
--------------------------------------------------------------------------------------- */
* {
	padding: 0;
	margin: 0;
	border: 0;
}



/* Globale Settings
--------------------------------------------------------------------------------------- */

body {
	background-color: #c0c0c0;
	background-image: url(../images/bg-body.jpg);
	background-repeat: repeat-x;
	font-size: 92%; /* Default 76% */
}

a:link {
	color: #72beff;
	text-decoration: underline;
}

a:visited {
	color: #80a9cb;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/* Macht die gepunktete Linie um geklickte Links unsichtbar */
a:focus {
    outline: none;
}



/* Typographie: Vertikaler Rhythmus basierend auf 12px Basisgröße für den Fließtext
--------------------------------------------------------------------------------------- */
@font-face {  
  font-family: Young;  
  src: url(../fonts/Young.ttf) format("truetype");  
}  

p, th, td, dt, dd, ul {
	font-family: "Georgia", "Times New Roman", Times, serif;
}

p {
	font: 1em/1.5em "Georgia", "Times New Roman", Times, serif;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

h1 {
	font: 1.67em/0.9em "Georgia", "Times New Roman", Times, serif;
	margin: 0px;
	text-indent: -5000px;
	float: left;
	font-weight: bold;
}

h2 {
	color: #5c5c5c;
	font: 1.8em/1em Young, Verdana, Geneva, sans-serif;
	margin-top: 1em;
	margin-bottom: 1em;
}

h3 {
	color: #5c5c5c;
	font: 1.33em/1.13em Young, Verdana, Geneva, sans-serif;
	margin-top: 1.13em;
	margin-bottom: 1.13em;
}

h4 {
	color: #5c5c5c;
	font: 1.17em/1.29em Young, Verdana, Geneva, sans-serif;
	margin-top: 1.29em;
	margin-bottom: 1.29em;
}



/* Layoutelemente (verwende overflow: hidden, um nötige Floats aufzulösen)
--------------------------------------------------------------------------------------- */
#wrapper {
	margin: 0 auto;	
	width: 960px;
}

#header {
	clear: both;
	height: 170px;
	position: relative;
}

#content {
	clear: both;
	display: inline;
	float: left;
	height: auto;
	position: relative;
	width: 960px;
}

#footer {
	background-image: url(../images/bg-contact.png);
	background-repeat: no-repeat;
	clear: both;	
	height: 250px;
	position: relative;
}



/* Home-Navigation
--------------------------------------------------------------------------------------- */
#header #navHome {
	height: 90px;
	width: 370px;
	position: absolute;
	left: 0px;
	top: 20px;
}

#header #navHome a {
	background-image: url(../images/img-logo-na.png);
	background-repeat: no-repeat;
	height: 90px;
	position: absolute;
	text-indent: -5000px;
	width: 370px;
}

#header #navHome a:hover {
	background-image: url(../images/img-logo-ha.png);
	background-repeat: no-repeat;
	height: 90px;
	position: absolute;
	text-indent: -5000px;
	width: 370px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}



/* Navigation
--------------------------------------------------------------------------------------- */
#navigation {
	float: left;
	list-style-type: none;
	position: absolute;
	left: 0px;
	bottom: 8px;
}

#navigation li {
	float: left;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 14px;
}

#navigation li a {	
	display: block;
	color: #555;
	padding: 0;
	text-decoration: none;
}

#navigation li a:hover {
}

/* Navigation w/o hover or active */
#navigation #navPeople a {
	background-image: url(../images/button-people-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 97px;
}

#navigation #navCitiesAndSpaces a {
	background-image: url(../images/button-cities_and_spaces-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 162px;
}

#navigation #navBusinessAndCommercials a {
	background-image: url(../images/button-business_and_commercials-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 237px;
}

#navigation #navBuildingsAndArchitecture a {
	background-image: url(../images/button-buildings_and_architecture-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 244px;
}


#navigation #navStreet a {
	background-image: url(../images/button-street-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 89px;
}

#navigation #navAboutMe a {
	background-image: url(../images/button-about_me-na.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 119px;
}



/* Hover */
#navigation #navPeople a:hover {
	background-image: url(../images/button-people-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 97px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

#navigation #navCitiesAndSpaces a:hover {
	background-image: url(../images/button-cities_and_spaces-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 162px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

#navigation #navBusinessAndCommercials a:hover {
	background-image: url(../images/button-business_and_commercials-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 237px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

#navigation #navBuildingsAndArchitecture a:hover {
	background-image: url(../images/button-buildings_and_architecture-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 244px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

#navigation #navStreet a:hover {
	background-image: url(../images/button-street-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 89px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

#navigation #navAboutMe a:hover {
	background-image: url(../images/button-about_me-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 119px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}



/* Active */
#people #wrapper #header #navigation #navPeople a {
	background-image: url(../images/button-people-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 97px;
}

#cities_and_spaces #wrapper #header #navigation #navCitiesAndSpaces a {
	background-image: url(../images/button-cities_and_spaces-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 162px;
}

#business_and_commercials #wrapper #header #navigation #navBusinessAndCommercials a {
	background-image: url(../images/button-business_and_commercials-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 237px;
}

#buildings_and_architecture #wrapper #header #navigation #navBuildingsAndArchitecture a {
	background-image: url(../images/button-buildings_and_architecture-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 244px;
}

#street #wrapper #header #navigation #navStreet a {
	background-image: url(../images/button-street-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 89px;
}

#about_me #wrapper #header #navigation #navAboutMe a {
	background-image: url(../images/button-about_me-ha.jpg);
	height: 32px;
	text-indent: -5000px;
	width: 119px;
}



/* Footer
--------------------------------------------------------------------------------------- */
#footer #address {
	position: absolute;
	top: 85px;
}

#footer #address p {
	color: #5c5c5c;
	font-style: italic;
	margin-top: 0em;
	margin-bottom: 0em;
}

#footer #copyright {
	bottom: 0px;
	position: absolute;
	width: 960px;
}

#footer #copyright p {
	color: #5c5c5c;
	font-family: Young, Verdana, Geneva, sans-serif;
	margin-top: 0em;
	margin-bottom: 1em;
	position: relative;
	text-align: center;
}

#footer #facebook {
	position: absolute;
	right: 50px;
	top: 85px;
	width: 960px;
}

#footer #facebook p {
	color: #5c5c5c;
	float: right;
	font-family: Young, Verdana, Geneva, sans-serif;
	margin-top: 0em;
	margin-bottom: 0em;
}

#footer #facebook-button {
	position: absolute;
	height: 37px;
	width: 37px;
	top: 77px;
	right: 5px;
}

#footer #facebook-button a {
	background-image: url(../images/button-facebook-na.png);
	background-repeat: no-repeat;
	height: 37px;
	width: 37px;
	position: absolute;
	text-indent: -5000px;
}

#footer #facebook-button a:hover {
	background-image: url(../images/button-facebook-ha.png);
	background-repeat: no-repeat;
	height: 37px;
	width: 37px;
	position: absolute;
	text-indent: -5000px;
	-webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}



/* Gallery
--------------------------------------------------------------------------------------- */
.gallery {
	border-spacing: 15px;
}

.gallery td {
	box-shadow: 0px 2px 6px 0px #4a4a4a;
	height: 185px;
	width: 295px;
}

.gallery td a {
	background: #80a9cb;
	height: 185px;
	width: 295px;
}

.gallery td a:hover {
	background: #72beff;
	height: 185px;
	width: 295px;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}



/* INDEX
--------------------------------------------------------------------------------------- */
#index {
	background: #000;
}

#index #link {
	text-align: center;
}



/* HOME
--------------------------------------------------------------------------------------- */

/* Nivo-Slider */
#home .theme-default #slider {
	box-shadow: 0px 2px 6px 0px #4a4a4a;
    margin: 0px auto 0 auto;
    width: 960px; /* Make sure your images are the same size */
    height: 432px; /* Make sure your images are the same size */
}



/* IMPRESSUM
--------------------------------------------------------------------------------------- */
#impressum td {
	padding-right: 20px;
	vertical-align: top;
}

#impressum td p {
	font-style: italic;
}



/* ABOUT ME
--------------------------------------------------------------------------------------- */
#about_me #wrapper #content {
	background-image: url(../images/bg-about_me.jpg);
	box-shadow: 0px 2px 6px 0px #4a4a4a;
	height: 432px;
}