/* CSS-Stylesheet for schnickschnacksystems by Thomas Müller @ www.tm-webentwicklung.com */


/*=====================================
# Styles for basic layout & centering #
=====================================*/

/* mac hide \*/
html, body {
	height:100%;
	width:100%;
	font-family:Arial,Lucida Sans,Helvetica,sans-serif;
	margin:0px;
	padding:0px;
	font-size: 0.625em;
	
	/*scrollbar-arrow-color: #ffffff;
	scrollbar-base-color: #A2B8C2;
	scrollbar-track-color: #A2B8C2;
	scrollbar-face-color: #A2B8C2;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #999;
	scrollbar-darkshadow-color: #ccc;
	scrollbar-shadow-color: #999;*/
}
/* end hide */

body { 
	background-color:#fff;
	text-align:center;
	color:#58585a;
	font-size: 1em;
	min-width:950px;/* for good browsers*/
	min-height:55em;/* for good browsers*/
}

body#startpage {
	background-color:#adadb0;
}

#outer {
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}

#container {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height:55em;
}

#inner {
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	padding:0px;
	background-color:#adadb0;
	border:1px solid #333; /* Total height & width = +2px */
	background-image:url(../images/logo.gif);
	background-position:left top;
	background-repeat:no-repeat;
	width: 950px;
	height: 550px;
	/* Tan Hack for IE 5.5 */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 950px;
	height: 55em;
}
/* Dummy, damit IE5 die nächste Regel nicht überspringt */
.dummy {line-height:0px;}

body#startpage #inner {
	/*border:1px solid #adadb0;*/
}

img {
	border:none;
}

a {
	outline:none;
	color:#58585A;
}

ul, ul li {
	padding:0px;
	margin:0px;
	list-style-type:none;
}

div.clearer {
	height:0px;
	clear:both;
	line-height:0px;
	font-size:1px;
	margin:0px;
	padding:0px;
}

/*=====================================
# Styles for navigation               #
=====================================*/
/* Der IE bis V6 bekommt das PNG über MS-Alpha-Filter zugewiesen, siehe styles4ie.css
Alle anderen PNG-fähigen Browser (inkl. IE 7) verstehen das! */
html>body #navigation {
	background-image:url(../images/navi-bg.png);
}

div#navigation {
	float:left;
	width:143px;
	height:100%;
	background-position:right top;
	background-repeat:repeat-y;
}

div#navigation a#logo {
	display:block;
	height:107px;
	width:142px;
}

div#navigation a#logo span {
	display:none;
}

/* Language Navigation */
div#navigation ul#navilang {
	margin:2px 0px 0px 10px;
}

div#navigation ul#navilang li {
	padding:0px 10px 0px 10px;
	float:left;
}

div#navigation ul#navilang li#en {
	border-left:1px solid #fff;
}

div#navigation ul#navilang li a {
	color:#FFFFFF;
	font-weight:normal;
	font-size:1.1em;
	text-decoration:none;
}

div#navigation ul#navilang li a:hover {
	color:#58585a;
}

div#navigation ul#navilang li a.active {
	text-decoration:underline;
}

/* Main Navigation */
div#navigation ul#navimain {
	margin:23px 10px 0px 5px;
}

div#navigation ul#navimain li {
	padding:0px 0px 0px 0px;
	margin:14px 0px 0px 0px;
	font-size:1.3em;
	font-weight:bold;
}

div#navigation ul#navimain li a {
	display:block;
	padding:2px 0px 2px 9px;
	color:#FFFFFF;
	text-decoration:none;
}

div#navigation ul#navimain li.active a {
	background-color:#ffffff;
}

div#navigation ul#navimain li a:hover, div#navigation ul#navimain li.active a {
	color:#58585a;
}

/* Level 2 */
div#navigation ul#navimain li.active ul.level2 li {
	margin:1px 0px 0px 0px;
	font-size:1em;
}

div#navigation ul#navimain li.active ul.level2 li a {
	background-color:transparent;
	color:#FFFFFF;
	font-weight:normal;
	padding:2px 0px 2px 18px;
}

div#navigation ul#navimain li.active ul.level2 li.active {
	margin:1px 0px 0px 0px;
	font-size:1em;
}

div#navigation ul#navimain li.active ul.level2 li.active a {
	background-color:#ffffff;
}

div#navigation ul#navimain li.active ul.level2 li a:hover, div#navigation ul#navimain li.active ul.level2 li.active a {
	color:#58585a;
}

/* Level 3 */
div#navigation ul#navimain li.active ul.level2 li.active ul.level3 li a {
	background-color:transparent;
	color:#FFFFFF;
	font-weight:normal;
	padding:2px 0px 2px 25px;
}

div#navigation ul#navimain li.active ul.level2 li.active ul.level3 li.active a {
	background-color:#ffffff;
}

div#navigation ul#navimain li.active ul.level2 li.active ul.level3 li a:hover, div#navigation ul#navimain li.active ul.level2 li.active ul.level3 li.active a {
	color:#58585a;
}

/* Meta Navigation */
ul#navimeta {
	margin:15px 0px 0px 60px;
}

ul#navimeta li {
	float:left;
	padding:0px 21px 0px 0px;
	font-size:1.1em;
}

ul#navimeta li a {
	color:#58585a;
	text-decoration:none;
}

ul#navimeta li a:hover, ul#navimeta li.active a {
	text-decoration:underline;
}

/*=====================================
# Styles for content columns          #
=====================================*/
div#content-left {
	float:left;
	height:100%;
	width:435px; /* 442px - 7px border */
	background-color:#fff;
	border-right:7px solid #ececed;
	padding:0px 0px 0px 0px;
	/*text-align:justify;*/
	position:relative;
}

body#startpage div#content-left {
	width:100%;
	border-right:none;
	background-color:#adadb0;
	background-image:url(../images/start-bg.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
}

div#content-right {
	float:left;
	height:100%;
	width:365px;
	background-color:#c2c5c7;
}

div#scroll-container {
	overflow:auto;
	height:42em;
	padding:0px 25px 0px 60px;
	width:327px;
}

div.jScrollPaneContainer div#scroll-container {
	width:310px !important;
}

div#content {
	margin-top:90px;
}

body#startpage div#content {
	margin-top:40px;
}

/*=====================================
# Styles for fonts etc                #
=====================================*/
h1 {
	font-size:1.3em;
	font-weight:bold;
	margin:9px 0px 17px 0px;
}

h2 {
	font-size:1.3em;
	color:#000000;
	font-weight:bold;
	margin:15px 0px 10px 0px;
}

span.h3{
	background-color:#C2C5C7;
	padding: 2px 5px 2px 5px;
	font-weight: bold;
	color:#FFFFFF;
	position:relative;
	top:8px;
}

h3 {
	font-size:1.2em;
	font-weight:bold;
	line-height:1.5em;
	margin:15px 0px 0px 0px;
}

div#content p {
	font-size:1.2em;
	line-height:1.5em;
	margin:0px 0px 15px 0px;
}

div#content a {
	color:#58585A;
}

div#content ul, div#content ol {
	margin:0px 0px 12px 0px;
	padding:0px 0px 0px 0px;
}

div#content ol {
	padding:0px 0px 0px 20px;
}

div#content ul li, div#content ol li {
	font-size:1.2em;
	line-height:1.5em;
	padding-bottom:3px;
}

/* Single Elements */
div#content ul.ref-links {
	margin:-7px 0px 20px 0px;
}

div#content ul.ref-links li {
	float:left;
	padding:0px 30px 0px 0px;
}

div#content ul.ref-links li.last {
	float:right;
	padding:0px 10px 0px 0px;
}

div.product {
	clear:both;
	position:relative;
}

div.product p {
	text-align:left;
	padding-top:15px;
}

div.product img {
	clear:both;
	display:block;
	margin-bottom:5px;
}

div.product ul {
	position:absolute;
	top:10px;
	left:120px;
}

div.product ul li {
	padding:0px 0px 0px 0px;
}

div#javascript-warnung {
	position: absolute;
	top: 40px;
	left: 60px;
	z-index: 30;
	width: 280px;
	padding: 10px 15px 12px 10px;
	color: #cccccc;
	font-size:1.1em;
	border: 1px solid #cccccc;
}

div#javascript-warnung a {
	color: #cccccc;
}

img.illu {
	float:left;
	margin:3px 10px 5px 0px;
}

/* See http://www.alistapart.com/articles/cssdrop2/ */
.alpha-shadow {
  float: left;
  background: url(../images/shadow1.gif) no-repeat bottom right;
  margin: 0px 0px 0 0px !important;
  margin: 0px 0 0 0px;
}

.alpha-shadow div {
  background: url(../images/shadow2.png) no-repeat left top !important;
  background: url(../images/shadow2.gif) no-repeat left top;
  padding: 0px 6px 6px 0px;
}

.alpha-shadow div img {
  background-color: #fff;
  padding: 4px;
	display:block;
}

/* Startpage */
div#start-logo {
	margin-left:auto;
	margin-right:auto;
	width:204px;
}

div#start-images {
	margin-left:auto;
	margin-right:auto;
	width:792px;
	margin-top:30px;
}

div#start-1 {
	width:206px;
	margin-right:88px;
	float:left;
}

div#start-2 {
	width:206px;
	margin-right:86px;
	float:left;
}

div#start-3 {
	width:206px;
	float:left;
}

div#start-images h1 {
	color:#FFFFFF;
	margin:10px 0px 2px 0px;
}

div#start-images p {
	color:#FFFFFF;
	margin:0px 0px 0px 0px;
}

div#start-images a.more {
	color:#FFFFFF;
	float:right;
	margin-right:4px;
}

div#start-navi-container {
	text-align:center;
	/*padding-top:34px;*/
	position:absolute;
	bottom:2px;
	width:100%;
}

ul#start-navi {
	/*position:absolute;
	left:225px;
	bottom:2px;*/
}

ul#start-navi li {
	display:inline;
	margin-left:70px;
}

ul#start-navi li.first {
	margin-left:0px;
}

ul#start-navi li a {
	color:#FFFFFF;
	font-weight:bold;
}

a#start-lang {
	position:absolute;
	top:40px;
	right:89px;
	color:#FFFFFF !important;
	font-size:1.2em;
}

/* News */
div.news {
	width:300px;
}

div.news-line {
	border-bottom:1px solid #58585a;
}

div.news h2 {
	margin:20px 0px 5px 0px;
}

div.news img {
	margin-bottom:10px;
	display:block;
}

/*=====================================
# Marginal styles                     #
=====================================*/

div.example, div.design-technik {
	width:365px;
	height:100%;
	display:none;
}

div.inside-marginal {
	margin-top:119px;
	padding-top:9px;
	height:41.1em;
	overflow:auto;
}

div#content-right div.jScrollPaneContainer {
	top:119px;
}

div#content-right div.jScrollPaneContainer div.inside-marginal {
	margin-top:0px;
	height:42em;
	width:285px !important;
}

/* Galerien */
div.example {
	background-color:#000000;
}

div.example div.inside-marginal {
	margin-top:0px;
	padding:128px 0px 0px 0px;
}

div.example h2 {
	margin:0px 0px 0px 25px;
	color:#FFFFFF;
	font-size:1.3em;
	font-weight:bold;
}

p.gallery-navi {
	margin:10px 0px 0px 0px;
	text-align:center;
}

p.gallery-navi span {
	display:none;
}

p.gallery-navi a#back, p.gallery-navi a#forw {
	display:block;
	float:left;
	margin:0px 0px 15px 143px;
	height:15px;
	width:19px;
	background-image:url(../images/gallery-left.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

p.gallery-navi a#forw {
	float:right;
	margin:0px 143px 15px 0px;
	background-image:url(../images/gallery-right.gif);
}

div#gallery-navi-placeholder {
	height:40px;
}

div.example p.gallery-image {
	margin:0px 0px 20px 0px;
}

div.example p.caption {
	margin:0px 20px 0px 25px;
	color:#FFFFFF;
	font-size:1.1em;
	line-height:1.4em;
}

/* Bildgalerien */
div.gallery-container {
	display:none;
}

div.gallery-container-first {
	display:block;
}



/* Design- & Technikinfos */
div.design-technik div.inside-marginal {
	padding:9px 30px 0px 30px;
}

div.design-technik h2 {
	margin:0px 0px 30px -1px;
	color:#58585a;
}

div.design-technik p {
	font-size:1.2em;
	line-height:1.5em;
	margin:0px 0px 15px 0px;
}


/*=====================================
# Styles for forms                    #
=====================================*/
form {
	margin:0px;
}

fieldset {
	margin:0px 0px 15px 0px;
	padding:0 10px 15px 10px;
	border:1px solid #999;
	font-size:0.8em;
}

fieldset.fieldbutton{
	padding-bottom:6px !important;
}

legend {
	padding:2px 6px;
	color:#5F1A2D;;
	font-weight:bold;
	border: 1px solid #999;
}

label {
	font-size:0.85em;
	cursor:pointer;
	width:150px;
	float:left;
	clear:left;
	margin-left:10px;
}

span.innerlabel {
	font-size:0.85em;
	float:left;
	padding-top:2px;
}

input {
	border:1px solid #999;
	margin-bottom:5px;
	width:180px;
	margin-left:10px;
	font-size:1em;
	color:#333333;
	background-color:#F3F3F3;
}

input:focus, textarea:focus {
	background-color:#FFFFFF;
}

input.submit, input.csc-mailform-submit {
	border:1px solid #979797;
	background-color:#E1E1E1;
	width:100px;
	color:#333333;
	font-size:1em;
	font-weight:bold;
	margin-left:10px;
}

input.csc-mailform-submit {
	margin-top:10px;
	font-size:0.8em;
}

textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	border:1px solid #999;
	width:275px;
	height:85px;
	margin-left:10px;
	margin-bottom:5px;
	background-color:#F3F3F3;
	color:#333333;
}