@charset "utf-8";

/**
 * Stylesheet for Günter & Kuster, Zürich
 *
 * (c) silverfish ag, zürich, 2010 
 */


/* general definitions ******************************************/
body {
	margin: 0;
}

body, table, td {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 13px;
}

table, img, fieldset {
	border: 0px;
}

h1, h2, h3, h4, p, ul, li, fieldset {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 21px;
	text-transform: uppercase;
	margin-bottom: 5px;
}

h2 {
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	margin-bottom: 4px;
}

h3 {
	font-size: 12px;
	text-transform: uppercase;
}

img {
	border: none;
	vertical-align: middle;
}

p {
	margin: 0 0 12px 0;
}

.box {
	width: 810px;
	margin-top: 10px;
}

.toplink {
	margin-top: -10px;
	text-align: right;
}

	.toplink a, 
	.toplink a:hover {
		color: #c5c6cb !important;
	}

/* body classes *************************************************/
body.light {
	color: #000000;
	background: #ffffff;
}

body.dark {
	color: #ffffff;
	background: #000000;
}

body.links {
	background: #525255;
	color: #ffffff;
}

body.visual {
	background: #44413b;
	color: #ffffff;
}

body.references {
	background: #444443;
	color: #ffffff;
}

body.contact {
	background: #4a4b4d;
	color: #ffffff;
}

body.network {
	background: #374448;
	color: #ffffff;
}

body.team {
	background: #5b5852;
	color: #ffffff;
}


/* links ********************************************************/
a, a:hover {
	color: #000000;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

body.dark .content a, 
body.dark .content a:hover {
	color: #ffffff;
	text-decoration: none;	
}
	

/* header ********************************************************/
.header {
	position: fixed;
	height: 120px;
	border-bottom: 1px dotted #64615d;
	background: #ffffff;
	z-index: 2;
	width: 900px;	
}

	.header-team { 
		background: #5b5852;
	}
	
	.header-network { 
		background: #374448;
	}
	
	.header-contact {
		background: #4a4b4d;
	}
	
	.header-references {
		background: #444443;
	}

	.header-visual {
		background: #44413b;
	}

	.header-links {
		background: #525255;
	}


.header-home {
	height: 94px;
	border-bottom: 1px dotted #15265b;
	margin: 25px 0 0 0;
	padding-left: 90px;
}

	.header-home h1 {
		color: #000000;
		font-weight: normal;
		margin-top: 5px;
	}

/* navigation ****************************************************/	
.navigation {
	padding: 5px 0 10px 90px;
	height: 85px;
	font-size: 9px;
	color: #ffffff;
	text-transform: uppercase;
}

.navigation-dark {
	background: #64615d;
}

.navigation-light {
	background: #a29c93;
}

	.navigation-column {
		float: left;
		margin-right: 15px;
		line-height: 12px;
	}
	
	.navigation-column-right {
		float: right;
		margin-right: 5px
	}
	
		.navigation-column h3 {
			font-size: 10px;
			font-weight: normal;
			margin: 0 0 8px 0;	
		}
		
		.navigation-column ul {
			list-style-type: none;
		}
		
		.navigation-column a,
		.navigation-column a:hover {
			color: #ffffff;
			text-decoration: none;
		}
			
	.agency {
		width: 90px;
	}
	
	.portfolio {
		width: 133px;
	}
	
	.contact {
		width: 100px;
	}
	
	.admin {
		width: 150px;
	}
	
	.news-title,
	a.news:hover,
	a.news-home:hover,
	a.news-active,
	a.news-active:hover {
		color: #d1001c;
	}
	
	a.visual:hover,
	a.visual-active,
	a.visual-active:hover {
		/*color: #d5008c;*/
		color: #bf1b42;
	}
	.visual-title {
		color: #bf1b42;
	}
	
	body.references h1,
	body.references .content a:hover,
	.references-title,
	a.references:hover,
	a.references-active,
	a.references-active:hover {
		color: #a71580;
	}
	
	body.team h1,
	.team-title,
	a.team:hover,
	a.team-active, 
	a.team-active:hover {
		color: #57145e;	
	}	
	
	body.magazines h1,
	.magazines-title,
	a.magazines:hover,
	a.magazines-active,
	a.magazines-active:hover {
		color: #7f8711;
		padding: 1px 0 0 0;
	}
	
	body.websites h1,
	.websites-title,
	a.websites:hover,
	a.websites-active,
	a.websites-active:hover {
		color: #60a522;
	}
	
	body.ads h1,
	.ads-title,
	a.ads:hover,
	a.ads-active,
	a.ads-active:hover {
		color: #389c51;
	}
	
	body.logos h1,
	.logos-title,
	a.logos:hover,
	a.logos-active,
	a.logos-active:hover {
		color: #0fa1dd;
	}
	
	body.packaging h1,
	.packaging-title,
	a.packaging:hover,
	a.packaging-active,
	a.packaging-active:hover {
		color: #004f9c;
	}
	
	body.exhibition h1,
	.exhibition-title,
	a.exhibition:hover,
	a.exhibition-active,
	a.exhibition-active:hover {
		color: #433782;
		padding: 1px 0 0 0;
	}
	
	body.client h1,
	body.contact .content a:hover,
	.contact-title,
	.navigation-light a.contact:hover,
	.navigation-light a.contact-active,
	.navigation-light a.contact-active:hover {
		color: #777470;
	}
	
	body.network h1,
	body.network .content a:hover,
	a.network:hover,
	a.network-active,
	a.network-active:hover {
		color: #069276;
	}
	
	.navigation-dark a.contact:hover,
	.navigation-dark a.contact-active,
	.navigation-dark a.contact-active:hover {
		color: #c4bdb2;
	}
	
	body.news-archive h1 {
		color: #d1001c;
	}
	
	
/* news box ******************************************************/
.news-wrapper {
	padding: 15px 10px 0px 90px;
	width: 800px;
	height: 275px;
	position: absolute;
	color: #000000;	
	z-index: 99;
}

.news-wrapper-light {
	background: #ffffff;
}

.news-wrapper-dark {
	background: #c4bdb2;
}

	div.news-navi {
		float: right;
		margin-top: -5px;
	}
		a.news-archive,
		a.news-archive:hover,
		a.news-close,
		a.news-close:hover {
			color: #000;
			text-decoration: none;			
		}
		
		a.news-close img {
			vertical-align: middle; 
		}
		
		a.news-close-home, 
		a.news-close-home:hover {
			color: #fff;
			text-decoration: none;
		}
		
	.news-wrapper h1 {
		font-size: 18px;
		color: #d1001c !important;
		float: left;
		margin: 0 0 20px 0;
	}
	
	.news-left-col {
		float: left;
		width: 387px;
		margin-right: 25px;
	}
	
	.news-right-col {
		float: left;
		width: 388px;
	}
	
		.news-header {
			float: left;
			margin-bottom: 5px;
			padding-bottom: 2px;
		}
		
			.news-header-dark {
				border-bottom: 1px dotted #a29c93;			
			}
		
			.news-header-light {
				border-bottom: 1px dotted #c4bdb2;			
			}
			
		.news-item {
			float: left;
			margin-bottom: 15px;
		}
		
		.news-item h3 {
			text-transform: uppercase;
			margin: 0 0 2px 0;
		}
		
		.news-item .news-date {
			font-family: Times;
			font-style: italic;
			font-size: 11px;
			margin: 0;
		}
		
		.news-item .news-body p {
			margin-top: 0;
		}

		
/* content *******************************************************/
.content-wrapper {
	position: absolute;
	top: 135px;
	z-index: 1;
}

.content {
	padding: 0 0 0 90px;	
}
	
	.content h1 {
		margin-top: 5px;
	}
	.content-top {
		height: 150px;
		border-bottom: 1px dotted #64615d;
	}
	
	.content-bottom {
		margin: 25px 0 0 0;
	}
	
		.content-column-small {
			float: left;
			margin-right: 20px;
			width: 145px;
		}
		
		.content-column {
			float: left;
			margin-right: 20px;
			width: 200px;
		}
		
			.content-column-inner {
				width: 250px;
				float: left;
			}
		
		.content-column-wide {
			float: left;
			width: 645;
		}
		
		.content-column-last {
			margin-right: 0;
		}
		
		.content-item {
			width: 100%;
			margin: 30px 0 40px 0;
		}
		
		.content-item-last {
			margin-bottom: 0;
		}
		
			.content-item h2 {
				font-size: 11px;
				font-weight: bold;	
			}
			
			.content-item h3 {
				font-family: Times;
				font-size: 12px;
				font-style: italic;
				font-weight: normal;
				text-transform: none;
			}
			
			.content-item a, 
			.content-item a:hover {
				color: #000;
				text-decoration: underline;
			}
			
			.content-item a:hover {
				text-decoration: none;
			}
		
			.content-item .work-image {
				margin: 20px 0 20px 0;
			}
			
		.content-bottom h2 {
			padding-bottom: 10px;
			margin-bottom: 10px;
			width: 100%;
			border-bottom: 1px dotted #64615d;
			font-size: 12px;
		}
		
		.content-bottom h3 {
			margin-bottom: 12px;
		}
		
		.content-bottom p em {
			font-size: 10px;
		}
		
.lead {
	font-size: 21px;
	font-weight: bold;
	line-height: 25px;	
	text-transform: uppercase;
	margin-bottom: 5px;	
}

.lead-home {
	margin-bottom: 0;
	color: #c4bdb2;
}


/* wrapper for google map  (contact page) */
.map-wrapper {
	width: 425px;
	height: 255px
}
		
	.map-overlay[class] {
		width: 425px;
		height: 255px;
		position: absolute;
		top: 211px;
		left: 475px;
		background: url('../img/bg-trans-map.png') repeat top left;
	}
	
	.map-overlay-hidden {
		visibility: hidden;
	}
			
				
/* homepage (images) *********************************************/
.images {
	width: 810px;
}	
	.image-loader {
		position: absolute;
		top: 250px;
		left: 845px;
	}
	
	.images-footer {
		position: absolute;
		top: 670px;
		left: 90px;
		width: 810px;
		height: 50px;
	}
	
	.images-footer[class] { /* for modern browser only */ 
		background: url('../img/bg-trans.png') repeat top left;
	}
	
		.thumbnails-navigation {
			float: left;
			width: 7px;
			height: 11px;
		}
		
			.thumbnails-navigation-left,
			.thumbnails-navigation-right {
				margin: 19px 20px 20px 20px;
			}

		.thumbnails-wrapper {
			float: left;
			position: relative;
			width: 716px;
			height: 30px;
			margin: 10px 0;
			overflow: hidden;
		}
		
		.thumbnails {
			padding-top: 2px;
			position: relative;
		}
		
			.thumbnails img {
				float: left;
				margin-right: 5px;
				border: 1px solid #a29c93;
			}
			
			.thumbnails .hover,
			.thumbnails .active {
				border: 1px solid #fff;
			}
		
	.images-caption {
		width: 810px;
		margin: 10px 0 20px 90px;
		color: #64615d;
		line-height: 16px;	
	}
	
		.caption-date {
			font-size: 16px;
		}
		
		.caption-text {
			font-family: Times;
			font-style: italic;
			font-size: 12px;
		}
		
	
/* footer ********************************************************/
.footer {
	width: 810px;
	margin: 20px 0 10px 0;
	padding: 5px 0 0 90px;
	font-size: 9.5px;
}

.footer-light {
	border-top: 1px dotted #15265b;
}

.footer-dark {
	border-top: 1px dotted #64615d;
}	

.text-required, .text-footnote {
	font-style: italic;
	margin-bottom: 0;
}


/* forms *********************************************************/
form {
	display: inline;
} 

	fieldset {
		border: 0;
	}
	
	legend {
		font-weight: bold;
		margin: 0 0 5px 0;
		padding: 0;
	}

	label {
		float: left;
		width: 125px;
		margin: 8px 0 0 0;
	}
	
	.form-item {
		margin-bottom: 12px;
	}
	
	.form-element {
		float: left;
		margin-left: 20px;
		text-align: left;
		width: 285px;
	}

	.form-element-input input,
	.form-element-select select,
	.form-element-textarea textarea,
	.form-element-wysiwyg textarea,
	.form-element-radio {
		font-family: Monaco, Courier New, Courier;
		font-size: 11px;		
		border: 1px solid #c4bdb2;
		padding: 4px;
		width: 175px;
		margin: 4px 0 0 0;
	}

	.form-element-select select {
		width: 185px;
		padding: 3px 2px;
	}
	
	.form-element-wysiwyg textarea,
	.form-element-textarea textarea {
		width: 275px;
		height: 80px;
	}
	
	.form-element-radio {
		padding: 3px;
		width: 177px;
		margin-left: 20px;
	}	
	
	.form-element-wysiwyg table td {
		padding: 0 !important; /* remove padding in wysiwyg-tables */
	}
	
	.form-element-button input {
		font-family: Monaco, Courier New, Courier;
		font-size: 11px;		
		margin-top: 8px;
	}
	
	.form-error {
		color: #dc0035;
	}

/* clearfix *****************************************************/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}