/*INFO*/
/*============================================================================*/
/*
2010 © copyright Timo Renz www.timo-renz.com
*/
/*============================================================================*/

body, html {padding: 0px; margin: 0px;}
html {height: 101%;}
body {background:url(../img/viewport/background-left.png) left repeat-y; background-attachment:fixed; background-color:#bec3c6; color:#444444;height:100%; font-family:Verdana, Helvetica, sans-serif; font-size:100.01%; text-align:left; line-height:1.5;}

.background-right,
.background-top,
.background-bottom {min-width: 1016px;}

.background-right {background:url(../img/viewport/background-right.png) top right repeat-y; _height: 100%; min-height:100%; padding-bottom:0px;}
.background-top {background:url(../img/viewport/background-top.png) top repeat-x; margin-bottom:-450px; min-height:450px;}
.background-bottom{background:url(../img/viewport/background-bottom.png) bottom repeat-x; height:87px; margin-top:-87px;}

/* body
----------------------------------------------------------------------------- */
.wrapper-all {width:968px; margin-left:auto; margin-right:auto; font-size:0.8em; position:relative; z-index:100; padding-top:20px;}
.wrapper-header {background:url(../img/site/webdesign_header_2.png) top no-repeat; width:968px; height:200px;}
.wrapper-content {background:#fff; width:960px; float:left; padding-top:60px;}
.wrapper-footer {background:url(../img/site/webdesign_footer.png) top no-repeat; width:960px; height:60px; float:left;padding-top:20px;}

/* tags
----------------------------------------------------------------------------- */
table, tr, td, th,
ul, li,
div, span, p,
h1, h2, h3, h4, h5, h6,
img,
a {background-color:transparent; padding:0; margin:0; font-weight:normal; font-style:normal; border:none;}

a {color:#0093dc; display:inline; text-decoration:none;}
a:hover {text-decoration:underline;}
a:active, a:focus {outline: none;}
a span {color:#ff6b6b;}
table, tr, td, th {border-collapse:collapse;}
td {vertical-align:top;}
ul, li {list-style:none;}
h1, h2, h3, h4, h5, h6 {margin-bottom:0.1em; text-decoration:none;}
h1 {color: #505050; font-size: 1.5em;}
h2 {color: #505050; font-size: 1.5em;}
h3 {color: #505050; font-size: 1.2em;}
h4 {color: #505050; font-size: 1.1em;}
h5 {color: #505050; font-size: 1.1em;}
h6 {color: #505050; font-size: 1.1em;}
p {padding-bottom:0em; margin: 0px;}
b { font-weight: normal;}
form, input, select, textarea {padding:0px; margin:0px; font-size:1em; font-family:Verdana, Helvetica, sans-serif;}
fieldset {padding:0; margin:0;}
hr {background: url(../img/site/line.png) repeat-x; height:2px; border:none; padding-bottom:10px;}
br {padding-top:0.5em; margin:0px;}

/* standard
----------------------------------------------------------------------------- */
.clear{clear:both;}

/* col
----------------------------------------------------------------------------- */
#col1,
#col2,
#col3 {font-size:0.9em;}

#col1{float:left;  margin:10px 10px 0 10px; padding:0 10px 30px 10px; width:150px; z-index:200;}
#col2{float:right; margin:10px 10px 0 10px; padding:0 10px 30px 10px; width:150px; z-index:300;}
#col3{margin:10px 0px 0 0px; padding:0 230px 30px 201px; z-index:100;}

	/* col1
	------------------------------------------------------------------------- */


	/* col2
	------------------------------------------------------------------------- */


	/* col3
	------------------------------------------------------------------------- */
	#col3 .content {padding:0;}

/* header
----------------------------------------------------------------------------- */
#headline {position:relative; top:60px; right:20px; font-weight:normal; font-variant:small-caps; font-size:25px; letter-spacing:2px; text-align:right;}

/* info
	------------------------------------------------------------------------- */
	.infobox li.info ul p,
	.infobox li.info ul h2 {color:#fff;}
	.infobox li.info ul p {padding:5px 0 0 20px;}
	.infobox li.info ul h2 {padding:35px 0 0 20px;}
	.infobox li.info {color: #555; font-size:10px; width:115px; text-align:left; vertical-align:bottom; padding:0 0 0 20px; cursor:help;}
	.infobox {margin:-30px 0; width:120px; height:16px; position:relative; left:810px; top:149px;}
	.infobox li.info {background:url(../img/site/arrow_info.png) left bottom no-repeat transparent; height:16px; width:115px;}
	.infobox li.info ul {background:url(../img/site/info_content.png) repeat; cursor:auto; float:left; position:absolute; left:-10000px; top:-159px; height:300px; width:500px; z-index:500}
	.infobox li.info:hover > ul {left:-787px;}

	/* search
	------------------------------------------------------------------------- */
	.wrapper-header #search {position:absolute; top:35px; right:80px;}
	.wrapper-header #searchfield {outline:none; background:transparent url("../img/site/search_field.png") no-repeat 0 0; border:0px; color:#777; padding:5px; height:23px; width:178px; font-size:10px; position:absolute; right:25px; top:0px;}
	.wrapper-header #searchbutton {position:static; right:0; top:0;}

/* footer
----------------------------------------------------------------------------- */
#footer {float:left; color:#777; font-size:10px; margin:-35px 0 0 10px; padding:10px 0px 10px 0px; width:940px; z-index:400;}
#footer ul.arrows_top li {float:right; position:relative; top:-17px; right:2px;}

/* menu
----------------------------------------------------------------------------- */
#menu {position:relative; top:160px; left:0px; width:700px; height:22px;}
#menu ul li {background:url(../img/site/button_menu.png) no-repeat; float:left; display:block; height:22px; width:100px;}
#menu ul li a {color:#555; display:block; text-align:center; padding:2px 0 0 0;}
#menu ul li a:hover {display:block; text-decoration:none;}
#menu ul li:hover {background:url(../img/site/button_menu_hover.png) no-repeat;}
#menu ul li.active {background:url(../img/site/button_menu_active.png) repeat-x; float:left; display:block; height:53px; width:100px;}

/* arrows
----------------------------------------------------------------------------- */
ul.arrows > li {background:url(../img/site/arrow.png) 0 7px no-repeat; margin:0; padding-left:15px;}

	/* arrows col1
	------------------------------------------------------------------------- */

	/* arrows col2
	------------------------------------------------------------------------- */

	/* arrows col3
	------------------------------------------------------------------------- */

	/* arrows footer
	------------------------------------------------------------------------- */
ul.arrows_top li {background:url(../img/site/arrow_top.png) no-repeat 0 6px; margin:0; padding:2px 0 0 15px;}

/* home
----------------------------------------------------------------------------- */
#home #col3 p.versatz {padding:0 0 0 15px;}

	/* teaser
	------------------------------------------------------------------------- */
	#teaser {background:url(../img/content/teaser_content.png) no-repeat; margin:30px 0; width:700px; height:300px;}
	#teaser a {color: #505050; display:block; padding:35px 0px 35px 0px; text-align:center;}
	#teaser a:hover {text-decoration:none;}
	#col3 > p,
	#teaser ul h2,
	#teaser ul p {color:#fff; letter-spacing:2px; font-variant:small-caps;}
	#teaser ul h2 {padding:35px 0 0 20px;}
	#teaser ul p {padding:5px 0 0 20px;}
	#col3 > p {float:left; position:absolute; left:421px; top:378px; width:400px;}

	#teaser li.webdesign {background:url(../img/content/teaser.png) no-repeat; height:100px; width:200px;}
	#teaser li.webdesign ul {background:url(../img/content/teaser_content_webdesign.png) no-repeat; cursor:auto; float:left; position:absolute; left:-10000px; top:310px; height:300px; width:500px;}
	#teaser li.webdesign:hover > ul {left:401px;}
	#teaser li.webdesign:hover {background:url(../img/content/teaser_hover.png) no-repeat;}

	#teaser li.printdesign {background:url(../img/content/teaser.png) no-repeat; height:100px; width:200px;}
	#teaser li.printdesign ul {background:url(../img/content/teaser_content_printdesign.png) no-repeat; cursor:auto; float:left; position:absolute; left:-10000px; top:310px; height:300px; width:500px;}
	#teaser li.printdesign:hover > ul {left:401px;}
	#teaser li.printdesign:hover {background:url(../img/content/teaser_hover.png) no-repeat;}

	#teaser li.fotodesign {background:url(../img/content/teaser.png) no-repeat; height:100px; width:200px;}
	#teaser li.fotodesign ul {background:url(../img/content/teaser_content_fotodesign.png) no-repeat; cursor:auto; float:left; position:absolute; left:-10000px; top:310px; height:300px; width:500px;}
	#teaser li.fotodesign:hover > ul {left:401px;}
	#teaser li.fotodesign:hover {background:url(../img/content/teaser_hover.png) no-repeat;}