@import url("fonts/quango/stylesheet.css");

body {
background-color: white;
color: black;
font-family: 'quangobold','sf_slapstick_comicregular', Verdana, sans-serif;
}

.wrapper {
max-width: 800px !important;
margin: 0 auto;
}

#header {
margin-top: 60px;

letter-spacing: 1px;
height: 45px;
border-bottom: 3px solid black;
}

#header h1 {
font-size: 2.1em; 
padding-left: 4px;
font-weight: normal !important;
}

#nav {
display: block;
padding-top: 4px;
text-align: right;
}

#nav ul {
float: right;
}

#nav ul li {
display: inline;
float: left;
text-align: right;
font-size: 1.55em;
}

#nav a {
display: block;
padding: 2px 10px 2px 10px;
color: #a9a9a9;
text-decoration: none;
margin-left: 30px;
}

#nav a.active,
#nav a:hover,
#nav a:active {
color: black;
background-color: transparent;
text-decoration: none;
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

/* thumbs */

#thumbs {
padding-top: 50px;
clear: both;
}

.thumb {
margin-bottom: 15px;

}

.thumb h2 {
margin-top: 5px;
font-size: 1.4em;
color: #a9a9a9;
letter-spacing: 0.05em;

font-weight: normal;
text-align: center;
}

.thumb img {
display: block;
margin: 0 auto;
}

.thumb img:hover,
.thumb img:active {
filter:     alpha(opacity = 75);    /* IE 6, 7, 8 */
-ms-filter: "alpha(opacity = 75)";  /* ab IE 8 zusätzlich möglich */
opacity:    .75;                    /* alle anderen Browser einschließlich IE 9 */
}




/* image */

#img {
text-align: center;
margin: 0 auto;

}

#image { 
z-index: 500;
text-align: center;
/* -moz-border-radius: 16px;
-khtml-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px; */
border: 0px solid black;
}

.image-white {
background-color: white;
}

.image-black {
/* background-color: black; */
}

#image img {
margin: 0 auto;
display: block;
padding-top: 0px;
padding-bottom: 0px;
max-width: 100%;
}

#imgnav {
/*-moz-border-radius: 18px;
-khtml-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px; */
border: 0px solid black;
height: 70px;
/* background: url(images/imgnav.jpg) no-repeat top center; */
}


#imgnav a {
display: block;
height: 70px;
}

#imgnav a.previous,
#imgnav a.portfolio,
#imgnav a.next {
	text-indent: -10000em;
}

#imgnav a.previous {
background: url(images/buttons.png) no-repeat left -244px;
}

#imgnav a.previous:hover {
background: url(images/buttons.png) no-repeat left -320px;

}
#imgnav a.previous:active {
background: url(images/buttons.png) no-repeat left -404px;
}

#imgnav a.portfolio {
background: url(images/buttons.png) no-repeat center -480px;
}

#imgnav a.portfolio:hover {
filter:     alpha(opacity = 55);    /* IE 6, 7, 8 */
-ms-filter: "alpha(opacity = 55)";  /* ab IE 8 zusätzlich möglich */
opacity:    .55;                    /* alle anderen Browser einschließlich IE 9 */
}

#imgnav a.portfolio:active {
filter:     alpha(opacity = 75);    /* IE 6, 7, 8 */
-ms-filter: "alpha(opacity = 75)";  /* ab IE 8 zusätzlich möglich */
opacity:    .75;                    /* alle anderen Browser einschließlich IE 9 */
}

#imgnav a.next {
background: url(images/buttons.png) no-repeat right -4px;
}

#imgnav a.next:hover {
background: url(images/buttons.png) no-repeat right -84px;
}
#imgnav a.next:active {
background: url(images/buttons.png) no-repeat right -164px;
}

#imgnav a.hidden {
visibility: hidden !important;
}

/* pages */
#page {
padding-top: 50px;
text-align: left;
clear:both;
font-size: 1.2em;
font-weight: normal;
}

#page * {
color: black;
letter-spacing: 0.05em;

}

#page h3 {
color: #7e7e7e;
font-weight: normal;
}

.portrait {
text-align: right;
}

.portrait img {
display: inline;
}

#page p {
margin-bottom: 30px;
}

#page ul {
list-style: none;
}

#page h2 {
text-align: left;
margin-bottom: 25px;
font-size: 1.2em;
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
	.wrapper {
	padding: 0 10px 0 10px;
	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	#header {
		margin-top: 0px;
	}
	.wrapper {
	padding: 0 15px 0 15px;
	}
	h2 { 
		font-size: 1.1em;
	}
	
	#nav {
	margin-top: 10px;
	}
	
	#nav a {
	margin-left: 10px;
	}
	
	
	#img { 
		margin-top: 50px;
	}

	
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#header {
		margin-top: 0px;
	}
	.wrapper {
	padding: 0 10px 0 10px;
	}

	
	#nav {
	margin-top: 10px;
	}
	
	#nav ul li {
		font-size: 1em;
	}

	#nav a {
	margin-left: 5px;
	}
	
	#page img {
	display: block;
	margin: 0 auto;
	margin-bottom: 25px;
	}	

	.thumb h2 { 
		font-size: 1em;
		word-break: normal;
	}
	
}

@media only screen and (max-width: 300px) { 
	#header h1 {
	font-size: 1.5em;
	}
	
	#nav {
	margin-top: 15px;
	}
	
	#nav ul li {
		font-size: 1em;
	}
}