@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I global tags I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

* {
	border:0;
	font-weight:normal;
	list-style-type: none;
	margin: 0;
	outline:0;
	padding: 0;
	text-decoration: none;
}

html { background:black url(../img/sprite-rptx.png) 0 -25px repeat-x; }

html.warning { margin-top:25px; /* if errormessage appears */ }

body {
	background:url(../img/bg-body.jpg) top center no-repeat;
	color:#a3b0ad;
	font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
}

hr { display:none; }

a:focus {
	outline:none;
	border:0;
}

address {
	font-style:normal;
	margin:0 0 15px 30px;
}

strong { font-weight:bold; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I global ids I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#sitemeta {
	color:#666;
	font-size:10px;
	margin:20px auto 10px;
	width:900px;
	padding:0 0 0 20px;
}

#sitemeta a:link,
#sitemeta a:hover,
#sitemeta a:active,
#sitemeta a:visited {
	color:#666;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I global classes I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.right { float:right; }

.left { float:left; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I buttons I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.btn:link,
.btn:visited {
	display:block;
	height:22px;
	background-image:url(../img/sprite-btn.png);
	background-repeat:no-repeat;
	text-indent:-9999px;
}

/* ----------I view all I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.view-all:link,
.view-all:visited {
	width:64px;
	background-position:0 0;
	margin:0 0 0 10px;
}

.view-all:hover { background-position:0 -22px; }

.view-all:active { background-position:0 -44px; }

/* ----------I download I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.download:link,
.download:visited {
	width:110px;
	margin:7px 0 0 0;
	background-position:-169px 0;
}

.download:hover { background-position:-169px -22px; }

.download:active { background-position:-169px -44px; }

/* ----------I twitter I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.follow:link,
.follow:visited {
	width:149px;
	margin:5px 0 0 0;
	background-position:-279px 0;
}

.follow:hover { background-position:-279px -22px; }

.follow:active { background-position:-279px -44px }

/* ----------I amazon I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.amazon:link,
.amazon:visited {
	width:105px;
	margin:5px 0 0 0;
	background-position:-64px 0;
}

.amazon:hover { background-position:-64px -22px; }

.amazon:active { background-position:-64px -44px; }

/* ----------I back to overview I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.overview:link,
.overview:visited {
	width:128px;
	margin:5px 0 40px 0;
	background-position:-484px 0;
}

.overview:hover { background-position:-484px -22px; }

.overview:active { background-position:-484px -44px; }


/* ----------I back to overview I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.visit:link,
.visit:visited {
	width:128px;
	margin:5px 0 40px 0;
	background-position:-612px 0;
}

.visit:hover { background-position:-612px -22px; }

.visit:active { background-position:-612px -44px; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I container I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#container {
	position:relative;
	width:980px;
	margin:0 auto;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I header I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#header {
	position:relative;
	height:300px;
}

/* ----------I branding I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#header h1 a:link,
#header h1 a:visited {
	float:left;
	width:230px;
	height:50px;
	display:block;
	text-indent:-9999px;
	background:url(../img/sprite-nav.jpg) -510px 0 no-repeat;
}

#header h1 a:hover { background:url(../img/sprite-nav.jpg) -510px -50px no-repeat; }

#header h1 a:active { background:url(../img/sprite-nav.jpg) -510px -100px no-repeat; }

/* ----------I claim I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#claim-home {
	position:absolute;
	top:100px;
	left:45px;
	height: 128px;
	width:409px;
	text-indent:-9999px;
	background:url(../img/bg-claim.png) 0 0 no-repeat;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I navi I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#navi {
	float:right;
	width:510px;
	margin:0 28px 0 0;
}

* html #navi { margin:0 14px 0 0; }

#navi li { float:left; }

#navi li a {
	height:51px;
	display:block;
	background-image:url(../img/sprite-nav.jpg);
	background-repeat:no-repeat;
	text-indent:-9999px;
}

/* ----------I home I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#home:link,
#home:visited {
	width:66px;
	background-position:0 0;
}

#home:hover { background-position:0 -51px; }

#home:active { background-position:0 -102px; }

#home-active {
	width:66px;
	background-position:0 -153px;
}


/* ----------I webdesign I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#webdesign:link,
#webdesign:visited {
	width:92px;
	background-position:-66px 0;
}

#webdesign:hover { background-position:-66px -51px; }

#webdesign:active { background-position:-66px -102px; }

#webdesign-active {
	width:92px;
	background-position:-66px -153px;
}



/* ----------I illustration I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#illustration:link,
#illustration:visited {
	width:95px;
	background-position:-158px 0;
}

#illustration:hover { background-position:-158px -51px; }

#illustration:active { background-position:-158px -102px; }

#illustration-active {
	width:95px;
	background-position:-158px -153px;
}



/* ----------I print-design I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#print-design:link,
#print-design:visited {
	width:99px;
	background-position:-253px 0;
}

#print-design:hover { background-position:-253px -51px; }

#print-design:active { background-position:-253px -102px; }

#print-design-active {
	width:99px;
	background-position:-253px -153px;
}



/* ----------I icon-design I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#icon-design:link,
#icon-design:visited {
	width:97px;
	background-position:-352px 0;
}

#icon-design:hover { background-position:-352px -51px; }

#icon-design:active { background-position:-352px -102px; }

#icon-design-active {
	width:97px;
	background-position:-352px -153px;
}



/* ----------I blog I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#blog:link,
#blog:visited {
	width:61px;
	background-position:-449px 0;
}

#blog:hover { background-position:-449px -51px; }

#blog:active { background-position:-449px -102px; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I content I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#container .content {
	width:640px;
	float:left;
	margin:98px 40px 0 20px;
	position:relative;
	font-size:13px;
}

.content p { margin:0 30px 15px 29px; }

.content a:link,
.content a:visited { color:#c9c9c9; }

.content a:hover { color:#ebebeb; }

.content a:active { color:#ebebeb; }


/* ----------I headlines 3 I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.content .topic {
	width:600px;
	margin:25px 30px 15px 30px;
	text-indent:-9999px;
	background-image:url(../img/bg-h3.png);
	background-repeat:no-repeat;
	height:13px;
	font-size:1px; /* for IE to lose height */
}

.webdesign { background-position:0 0; }

.print-design { background-position:0 -13px; }

.detailed-view { background-position:0 -26px; }

.illustration { background-position:0 -39px; }

.icon-design { background-position:0 -52px; }

.contact { background-position:0 -65px; }

.more { background-position:0 -78px; }

.imprint { background-position:0 -91px; }

.error { background-position:0 -104px; }

.thanks { background-position:0 -117px; }

h3 {margin:0 0 5px 29px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I gallery I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.gallery { margin:0 0 0 20px; }

.gallery li {
	float:left;
	padding:11px 11px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I slide gallery I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.slide-gallery-viewport {
	float:left;
	width:580px;
	overflow: hidden !important;
	position:relative;
}

.slide-gallery-container {
	height:155px;
	float:left;
}

.slide-gallery-container li {
	height:155px;
	float:left;
}

/* ----------I images (ul > li) I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

ul li img {
	opacity: 0.6;
}

/* we need IDs to activate theese galleries. */

#slide-gallery-webdesign,
#slide-gallery-print-design,
#slide-gallery-icon-design,
#slide-gallery-illustration {
	position:relative;
	left:-200px;
	width:9999px;
}

#slide-gallery-webdesign li,
#slide-gallery-print-design li,
#slide-gallery-icon-design li,
#slide-gallery-illustration li {
	float: left;
	width:178px;
	height:140px;
	margin:0 22px 0 0;
}

/* ----------I slide gallers I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* slide left */

a#slide-left-webdesign,
a#slide-left-print-design,
a#slide-left-icon-design,
a#slide-left-illustration {
	float:left;
	height:140px;
	width:24px;
	display:block;
	background:url(../img/sprite-nav.jpg) -740px 0 no-repeat;
	text-indent:-9999px;
	margin:0 5px 0 0;
}

a#slide-left-webdesign:hover,
a#slide-left-print-design:hover,
a#slide-left-icon-design:hover,
a#slide-left-illustration:hover {
	background:url(../img/sprite-nav.jpg) -788px 0 no-repeat;
	cursor:pointer;
}

a#slide-left-webdesign:active,
a#slide-left-print-design:active,
a#slide-left-icon-design:active,
a#slide-left-illustration:active {
	background:url(../img/sprite-nav.jpg) -836px 0 no-repeat;
	cursor:pointer;
}

/* slide right */

a#slide-right-webdesign,
a#slide-right-print-design,
a#slide-right-icon-design,
a#slide-right-illustration {
	float:left;
	height:140px;
	width:24px;
	background:url(../img/sprite-nav.jpg) -764px 0 no-repeat;
	text-indent:-9999px;
	display:block;
	margin:0 0 0 5px;
}

a#slide-right-webdesign:hover,
a#slide-right-print-design:hover,
a#slide-right-icon-design:hover,
a#slide-right-illustration:hover {
	background:url(../img/sprite-nav.jpg) -812px 0 no-repeat;
	cursor:pointer;
}

a#slide-right-webdesign:active,
a#slide-right-print-design:active,
a#slide-right-icon-design:active,
a#slide-right-illustration:active {
	background:url(../img/sprite-nav.jpg) -860px 0 no-repeat;
	cursor:pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I sidebar I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.sidebar {
	width:280px;
	float:left;
	font-size:11px;
	line-height:160%;
	color:#818b89;
}

.sidebar p {
	margin:0 0 10px 0;
}

.sidebar a:link,
.sidebar a:visited { color:#c9c9c9; }

.sidebar a:hover { color:#ebebeb; }

.sidebar a:active { color:#ebebeb; }

.sidebar .topic {
	width:260px;
	margin:25px 0 10px 0;
	text-indent:-9999px;
	background-image:url(../img/bg-h4.jpg);
	background-repeat:no-repeat;
	height:13px;
}

.infos-and-service { background-position:0 0; }

.about { background-position:0 -26px; }

#teaser-service {
	background:url(../img/bg-service.jpg) bottom no-repeat;
	padding:0 0 100px 0;
	float:left;
}

#teaser-service p { width:260px; }

/* ----------I teaser twitter I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#teaser-twitter {
	float:left;
}

.latest-tweets { background-position:0 -13px; }

#twitter_update_list li {
	margin:0 0 15px 0;
	width:240px;
	background:url(../img/sprite-icons.png) 0 -32px no-repeat;
	padding:0 0 0 33px;
	min-height:32px;
	overflow:hidden; /* fucking IE can't handle nonbranking links */
}

#twitter_update_list li a { display:none; }

#twitter_update_list li span a { display:inline !important; }

/* ----------I teaser book I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#teaser-book {
	background:url(../img/book.png) 0 0 no-repeat;
	padding:145px 0 0 0;
	z-index:20;
	height:101px;
	margin:0 0 40px 0;
	width:280px;
	float:left;
}

#teaser-book h4 { display:none; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I footer I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer {
	width:980px;
	margin:0 auto;
	background:url(../img/bg-footer.jpg) right bottom no-repeat;
	height:400px;
}

#footer .content {
	width:640px;
	float:left;
	margin:46px 40px 50px 20px;
	position:relative;
}

/* ----------I contact-form I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#contact-form {
	margin:0 30px;
	font-size:12px;
}

label {
	margin:0 0 2px 0;
	display:block;
	height:15px;
}

/* ----------I input I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

input {
	width:268px;
	padding:6px 5px 4px 5px;
	margin:0 0 10px 0;
	color:#999;
	font-size:12px;
	background:url(../img/bg-select.png) 0 -50px no-repeat;
}

input:active,
input:focus {
	color:#ccc;
	background:url(../img/bg-select.png) 0 -75px no-repeat;
}

/* ----------I textarea I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

textarea {
	overflow:auto;
	width:268px;
	padding:5px;
	margin:0 0 10px 0;
	color:#999;
	font-size:12px;
	height:176px;
	font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
	background:url(../img/bg-select.png) 0 -100px no-repeat;
	resize: none;
}

textarea:focus { color:#ccc; background:url(../img/bg-select.png) 0 -286px no-repeat;}

/* ----------I select I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.select {
	display: block;
	width: 278px;
	background:url(../img/bg-select.png) 0 0 no-repeat;
	position: relative;
	color: #999;
}

div.select:hover { background:url(../img/bg-select.png) 0 -25px no-repeat; }

div.select select {
	width: 278px;
	height:25px;
}

div.select.focus {
	border-color: #2c2c2c;
	color:#ccc;
}

div.select span {
	position: absolute;
	left: 6px;
	top: 0px;
	font-size: 1.1em;
	padding: 5px 20px 1px 0;
	display: block;
	right: 0;
}

div.select.focus span { left: 6px; }

div.select select {
	position: relative;
	font-size: 1.1em;
	padding: 0;
	line-height: 23px;
	border: 0;
	margin: 0;
	padding-right: 40px;
}

div.select select option { padding:1px 2px; }

/* ----------I errormessage I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#errormessage {
	background:url(../img/sprite-rptx.png) 0 0 repeat-x;
	border-bottom:1px solid black;
	border-top:1px solid white;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:19px;
	padding:6px 0 0 32px;
	color:black;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}

#errormessage:hover { cursor:pointer; }

#errorclose {
	text-indent:-9999px;
	height:16px;
	width:16px;
	background:url(../img/sprite-icons.png) -96px 0 no-repeat;
	position:absolute;
	top:5px;
	right:30px;
	margin:0 10px 0 0;
}

#errormessage span {
	text-indent:-9999px;
	height:16px;
	width:16px;
	background:url(../img/sprite-icons.png) -80px 0 no-repeat;
	position:absolute;
	top:5px;
	left:10px;
	margin:0 10px 0 0;
}

/* ----------I submit I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* only one class */

.submit {
	width:56px;
	border:0;
	outline:none;
	cursor:pointer;
	height:22px;
	background:transparent url(../img/sprite-btn.png) -428px 0 no-repeat;
	text-indent:-9999px;
}

.submit:hover {
	background:transparent url(../img/sprite-btn.png) -428px -22px no-repeat;
	cursor:pointer;
}

.submit:active,
.submit:focus {
	background:transparent url(../img/sprite-btn.png) -428px -44px no-repeat;
	border:0;
	outline:none;
	cursor:pointer;
}

/* ----------I sidebar I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer .sidebar { margin:90px 0 0 0; }

#footer .sidebar h4 { display:none; }

#footer .sidebar ul {
	margin:5px 0 25px 0;
}

#footer .sidebar ul li { float:left; }

#footer .sidebar ul li a:link,
#footer .sidebar ul li a:visited {
	height:16px;
	width:16px;
	margin:0 8px 0 0;
	text-indent:-9999px;
	background-image:url(../img/sprite-icons.png);
	background-repeat:no-repeat;
	display:block;
}

.twitter { background-position:0 0; }

.twitter:hover { background-position:0 -16px; }

.delicious { background-position:-16px 0; }

.delicious:hover { background-position:-16px -16px; }

.facebook { background-position:-32px 0; }

.facebook:hover { background-position:-32px -16px; }

.linkedin { background-position:-48px 0; }

.linkedin:hover { background-position:-48px -16px; }

.stumbleupon { background-position:-64px 0; }

.stumbleupon:hover { background-position:-64px -16px; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------I preloader I------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.QOverlay {
	background:black url(../img/preloader.gif) center no-repeat;
	z-index: 9999;
}