/* default styles */	
/* Farben:
660000 (rot) 
505070 (blau)
666 (logo grau)
bbb (helles header grau)
*/

/* ### basic stuff ### */

@import url(menu2.css);
@import url(content-styles.css);
@import url(forms.css);
@import url(tt_news.css);

body {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
    /* for all browsers except for IE5 */
	font-size: normal;
	background-color: #efefef;
	}
* html body {
	font-size: small; /* for IE5/Win */
	f\ont-size: normal; /* for othe IE5 versions */
	}

#header {
	background: #000;
	position: absolute;
	top: 0;
	width: 100%;
	max-width: 1280px;
	min-width: 800px;
	height: 320px;
	top: 0;
	margin:0;
	padding:0;	
	}
	
ul#header-1 { 
	position: absolute;
	top: 0;
	left: 2%;
	z-index:10;
	}

ul#header-2 { 
	position: absolute;
	top: 0;
	right: 0;
	}
	
ul#header-1, ul#header-2 { 
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
.header ul li {	
	list-style: none;
	}
ul#header-1 li {
	float: left;
	}
ul#header-2 li {
	float: left;
	}
	
ul#header-2 li.tabs a {
	display: block;
	padding: 0;
	margin: 0;
	height: 29px;
	width: 102px;
	border: none !important;
	}
	
ul#header-2 li.tabs a#tab-hardware {
	background: url(../html/media/tab-header.jpg) no-repeat 0 0;
	}
	
ul#header-2 li.tabs a#tab-hardware:hover {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -29px;
	}
	
ul#header-2 li.tabs a#tab-software {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -58px;
	}
	
ul#header-2 li.tabs a#tab-software:hover {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -87px;
	}
	
ul#header-2 li.tabs a#tab-store {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -116px;
	width: 72px;
	}
	
ul#header-2 li.tabs a#tab-store:hover {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -145px;
	width: 72px;
	}
	
ul#header-2 li.tabs a#tab-blog {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -174px;
	width: 72px;
	}
	
ul#header-2 li.tabs a#tab-blog:hover {
	background: url(../html/media/tab-header.jpg) no-repeat 0px -203px;
	width: 72px;
	}
	
ul#header-2 li.language-active a {
	color: #fff !important;
	font-weight: bold;
	}
	
ul#header-2 li.language-active a:hover {
	text-decoration: none;
}

ul#header-2 li.language-selector a {
	color: #fff !important;
	padding: 0.6em 0.5em 0 30px;
}

ul#header-2 li.de a {
	background: url(/fileadmin/templates/html/media/germany-flag.gif) 10% 70% no-repeat;
}

ul#header-2 li.uk a {
	background: url(/fileadmin/templates/html/media/uk-flag.gif) 10% 70% no-repeat;
}


	
ul#header-2 li.language-selector p.language-notavailable {
	float: left;
	margin: 0;
	padding: 0.8em 0.7em 0 0.7em;
	text-decoration: line-through;
	font-size: 60%;
	font-weight: normal;
	letter-spacing: 0.05em;
	border-right: solid #666 1px;	
	}
	
.header ul#header-2 li a {
	font-weight: bold;
	}
		
.header li {
	float: left;
	}
	
.header li a {
	display: block;
	float: left;
	color: #ccc;
	margin: 0;
	padding: 0.6em 0.5em 0 0.5em;
	text-decoration: none;
	font-size: 60%;
	font-weight: normal;
	letter-spacing: 0.05em;
	border-right: solid #ccc 1px;	
	}
	
.header li a:hover {
	color: #fff;
	text-decoration: underline;
	}
	
#header #soundperformancelab-logo {
	position: absolute;
	top: 1.3em;
	left: 2.5%;
	}
	
#header #menu1 {
	position: absolute;
	bottom: 0;
	left: 2%;
	padding-bottom: 0.4em;
	}
	
#header #product {
	position: absolute;
	top: 2em;
	left: 25%;
}

/* sonst gibts im IE verschiebungen */
#header #product .csc-textpic-text p {
	margin: 5px 0 0 0;
	padding: 0;
	/* border: red 1px solid; */
}

#header #product a {
	color: #666;
	text-decoration: none !important;
}

#header #product a:hover {
	color: #fff;
	text-decoration: underline;
}

#header #logo {
	position: absolute;
	top: 4em;
	right: 5%;
	width: 100px;
	height: 100px;
	background: url(../html/media/spl-logo.jpg) no-repeat 50% 50%;
}

#header #search {
	position: absolute;
	right: 0;
	bottom: 0;
	background: url(../html/media/runde-ecken-dunkelgrau.gif);
	height: 1.5em;
	width: 20%;
	text-align: left;
	padding: 0;
	margin: 0 0 0 0;
	}

/* IE6 */	
* html #header #search {
	height: 1.6em;
	overflow: hidden;
	margin: 0;
	padding: 0;
	}

#header #search form{
	/* background: url(../html/media/search.gif) no-repeat 8% 30%;	*/
	}
	
#header #search form input{
	margin: 0.3em;
	margin-left: 0.5em;
	border: none;
	width: 60%;
	}

/* IE7 */	
*+html #header #search form input{
	height: 1em;
	}
	
#header #search #searchbutton-small {
	width: 15%;
	margin: 0.3em;
	}
	
/* IE7 */	
*+html #header #search #searchbutton-small {
	height: 1.1em;
	}
	
/* IE6 */	
* html #header #search #searchbutton-small {
	height: 1.4em;
	}
	
#header #search #searchbutton-small:hover {
	color: #fff;
	background-color: #333;
	}
	
#header #search #searchbutton-small:active {
	color: #fff;
	background-color: red;
	}

/* ### header end ### */

/* ### contentarea start ### */

#contentarea {
	position: absolute;
	top: 320px;
	width: 100%;
	height: 320px;
	max-width: 1280px;
	margin:0;
	padding:0;
	background: #000 url(../html/media/back-bottom.jpg) repeat-x;
	background-color: #efefef;
	z-index: 0;
}

#contentarea #menu2 {
	position: absolute;
	top: 0;
	left: 2%;
	padding: 0;
	}
	
#menu2 h2, #menu2 p {
	padding: 0.4em;
	background: none !important;
	}

/* ### center ### */
#contentarea #center {
	position: absolute;
	top: 1em;
	left: 25%;
	/* border: 1px solid red; */
	width: 50%;
	padding-bottom: 2em;
}

.kasten {
	text-align: left;
	}
	
.kasten-body {
	background: url(../html/media/runde-ecken-mittelgrau.png) no-repeat 0 0 #cccccc;
	}
	
.kasten p {
	margin: 0 1em 0 1em;
	color: #333 !important;
	font-weight: bold;
	text-align: left;
	}
	
.kasten .oben, .kasten .unten {
	width: 100%;
	height: 10px !important;
	margin: 0;
	padding: 0;
	text-align: right;
	}
	
.kasten .oben {
	/*background: url(../html/media/runde-ecken-mittelgrau.gif) no-repeat 0% 0%;*/
	}
	
.kasten .oben em.left {
	display: block;
	float: left;
	height: 10px ;
	width: 50%;
	background: url(../html/media/runde-ecken-mittelgrau.png) no-repeat top left;
	font-size: 1px; /* Sonst packt er unter Win irgenwelche paddings oben und unten ran */
	}
	
.kasten .oben em.right {
	display: block;
	float: right;
	height: 10px ;
	width: 50%;
	background: url(../html/media/runde-ecken-mittelgrau.png) no-repeat top right;
	font-size: 1px; /* Sonst packt er unter Win irgenwelche paddings oben und unten ran */
	}
	
.kasten .unten em.left {
	display: block;
	float: left;
	height: 10px ;
	width: 50%;
	background: url(../html/media/runde-ecken-mittelgrau.png) no-repeat bottom left;
	font-size: 1px; /* Sonst packt er unter Win irgenwelche paddings oben und unten ran */
	}
	
.kasten .unten em.right {
	display: block;
	float: right;
	height: 10px ;
	width: 50%;
	background: url(../html/media/runde-ecken-mittelgrau.png) no-repeat bottom right;
	font-size: 1px; /* Sonst packt er unter Win irgenwelche paddings oben und unten ran */
	}
	
.kasten .unten {
	/*background: url(../html/media/runde-ecken-mittelgrau.gif) no-repeat 0% -90px;*/
	}
	
#contentarea a:hover {	
	color: #000;
	text-decoration: none !important;
	}

/* ### right ### */
#contentarea #right {
	position: absolute;
	top: 1em;
	right: 0;
	width: 20%;
	margin: 0;
	padding: 0;
	
}

#contentarea #right div.accordion {
	background: url(../html/media/runde-ecken-weiss.png) no-repeat 0% 0%;
}

#contentarea #right div.accordion-end {
	background: url(../html/media/runde-ecken-weiss.png) no-repeat 0 -590px;
	height: 10px;
}

#contentarea #right h2 {	
	margin: 0;
	padding: 0.5em 1.8em 0.2em 0.5em;
	border-bottom: 1px solid #efefef;
	font-weight: normal;
	color: #000;
	}
	
#contentarea #right div.accordion h2 {	
	background: url(../html/media/expand1.gif) no-repeat 98% 60%;
	border-bottom: 1px solid #efefef;
	}
	
#contentarea #right  div.accordion h2:hover, #contentarea #right a:hover {	
	background-color: #efefef;
	color: #000;
	text-decoration: underline;
	}

#right p {	
	margin:0;
	padding: 0.2em 0.5em 0.2em 0.5em;	
	}


#contentarea #footer {
	position: fixed;
	width: 75%;
	bottom:0;
	right:0;
	height: 1.5em;
	text-align: right;
	background: url(../html/media/footer-back.png) no-repeat;
	z-index: 1000;
	}
	
* html #contentarea #footer {
	display: none;
	}
	
#footer p {
	margin: 0 !important;
	padding: 0.4em 0.2em 0.2em 0.2em;
	text-align: right;
	font-size: 70%;
}
	
#footer p a {
	padding: 0.5em;
	text-decoration: none;
	color: #666;
	}
	
#footer p a:hover {
	text-decoration: underline;
	color: #000;
	}
	
ul#news {	
	list-style: none;
	float: left;
	margin: 0 0 0 1em !important;
	padding: 0.2em;
	}
ul#news li {
	float: left;
	font-size: 60%;
	}

/* Reiter Styles fŸr mittlere Spalte */

ul.reiter {
	float: left;
	border-bottom: 3px solid #fff;
	width: 100%;
	list-style: none; 
	padding: 0.3em 0 0.3em 0;
	margin: 0 0 0.8em 0;
	}
	
ul.reiter li{
	margin-right: 0.4em;
	list-style: none;
	float: left;	
	}
	
ul.reiter li a{
	color: #fff;
	margin: 0;
	margin-top: 0.2em;
	padding: 0.3em 0.3em 0.3em 0.6em;
	background: url(../html/media/runde-ecken-grau-grad.png) no-repeat 0% 0%;
	}
	
ul.reiter li em {
	padding: 0.3em 0 0.3em 0;
	background: url(../html/media/runde-ecken-grau-grad.png) no-repeat -420px 0;
	}
	
ul.reiter li a:hover{
	text-decoration: underline;
	color: #333 !important;
	}
	
ul.reiter li.active a {
	color: #333;
	background: url(../html/media/runde-ecken-weiss.png) no-repeat 0% 0%;
	}
	
ul.reiter li em {
	padding: 0.3em 0 0.3em 0;
	background: url(../html/media/runde-ecken-grau-grad.png) no-repeat -420px 0;
	}
	
ul.reiter li.active em {
	padding: 0.3em 0 0.3em 0;
	background: url(../html/media/runde-ecken-weiss.png) no-repeat -420px 0;
	}

br.clearer { width: 0; height: 0; clear: both; visibility: hidden; }

div.accordion h2 { background: url(../html/media/expand1.gif) no-repeat 98% 60%; }
div.accordion h2.exp { background: url(../html/media/expand2.gif) no-repeat 98% 60%; }

.accordion h2 {
	background: url(../html/media/expand1.gif) no-repeat 98% 60%;
	padding-right: 2em;
	}
	
.accordion h2:hover, .accordion h2.exp:hover {
	background: #ccc;
	}
	
/* link top */
p.csc-linkToTop {
	text-align: right;
	color: #666;
	}
	
/* Exhibit */
.exhibit-views-unplottableMessage {
	display: none;
	}
	
/* filelinks */
table.csc-uploads {
	width: 80%;
}

table.csc-uploads p, table.csc-uploads img {
	margin: 0;
	padding: 0.2em 0.5em 0.2em 0.5em;
}

table.csc-uploads .tr-even {
	background: #ccc;
	border-bottom: solid 1px #333;
}

/* Table distributors */

table#distributors {
	width: auto;
	text-align: left;
	margin-top: 2em;
}

/* Kasten schwarzer Bereich */

#product .csc-frame-frame1 {
	background: #666;
	padding: 1px 1em 0 1em;
	color: #fff;
	width: 500px;
}

#product .csc-frame-frame1 h1, #product .csc-frame-frame1 p.bodytext {
	color: #fff;
}

/* Vorschaltseite */

#product ul.main-buttons {
	margin: 6em 0 0 0;
	padding: 0;
	font-size: 100%;
}

#product ul.main-buttons li {
	float: left;
	list-style: none;
}

#product .main-buttons a {
	display: block;
	padding: 0;
	width: 213px;
	height: 181px;
}

#product .main-buttons a#main-buttons-hardware {
	margin: 0;
	background: url(../html/media/hardware.gif) no-repeat 0 0;
}

#product .main-buttons a#main-buttons-hardware:hover {
	background: url(../html/media/hardware.gif) no-repeat 0 -181px;
}

#product .main-buttons a#main-buttons-software {
	margin: 0 0 0 50px !important;
	background: url(../html/media/software.gif) no-repeat 0 0;
}

#product .main-buttons a#main-buttons-software:hover {
	background: url(../html/media/software.gif) no-repeat 0 -181px;
}

div#store-button a {
	display: block;
	width: 187px;
	height: 77px;
	background: url(../html/media/button-store.gif) no-repeat 0 0;
	/*background-color: #a4a4a4;*/
}

div#store-button a:hover {
	background: url(../html/media/button-store.gif) no-repeat 0 -77px;
	background-color: #a4a4a4 !important;
}

div#store-button2 a {
	display: block;
	margin-top: 5px;
	width: 187px;
	height: 57px;
	background: url(../html/media/button-store2.gif) no-repeat 0 0;
	/*background-color: #a4a4a4;*/
}

div#store-button2 a:hover {
	background: url(../html/media/button-store2.gif) no-repeat 0 -57px;
}

div#dealer-button a {
	margin-top: 5px;
	display: block;
	width: 187px;
	height: 46px;
	background: url(../html/media/button-dealer.gif) no-repeat 0 0;
	/*background-color: #a4a4a4;*/
}

div#dealer-button a:hover {
	background: url(../html/media/button-dealer.gif) no-repeat 0 -46px;
	background-color: #a4a4a4 !important;
}

/* de Version */
div#dealer-button-de a {
	margin-top: 5px;
	display: block;
	width: 187px;
	height: 46px;
	background: url(../html/media/button-haendler.gif) no-repeat 0 0;
	/*background-color: #a4a4a4;*/
}

div#dealer-button-de a:hover {
	background: url(../html/media/button-haendler.gif) no-repeat 0 -46px;
	background-color: #a4a4a4 !important;
}

div#trial-button {
	margin-top: 15px;
}

div#trial-button a {
	display: block;
	width: 187px;
	height: 45px;
	background: url(../html/media/button-trial.gif) no-repeat 0 0;
	/*background-color: #a4a4a4;*/
}

div#trial-button a:hover {
	background: url(../html/media/button-trial.gif) no-repeat 0 -45px;
	/*background-color: #a4a4a4 !important;*/
}

dt#buttons-left {
	background: #efefef;
	margin:0;
	padding-left: 0.5em;
	}