/* Allgemeines CSS fuer www.com-vision.de
Start 01. März 2007
Letzte Aenderung am 30. April 2007
*/

/*allgemeine Definitionen
***********************************/
*{padding:0; margin:0;}

body {background:#E3E3E3 url("../images/template/wrap.gif") top center repeat-y;}

*html body {margin-left:1px;}

/* Zeichensätze allgemein */ 
h1,h2,h3,h4,h5,h6,ol,ul,li,p,form,input,textarea,select,span,caption,th,td,button {
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:1em;
}
/* Überschriften */
h1 {
	font-size:0.8em;
	color:#FFF;
	background:#FF3333;
	padding:2px 0 2px 10px;
	border-bottom:1px solid #CCCCCC;
}
h2 {
	font-size:1em;
	margin:5px 10px 0 10px;
}
h3 {
	font-size: 0.9em;
	margin:5px 10px 0 10px;
}

h4, h5, h6 {
	font-size: 0.8em;
	margin:5px 10px 0 10px;
}

/* Fliesstext */
p {
	font-size:0.8em;
	line-height:1.4em;
	text-align:justify;
	margin:5px 10px 0 10px;
}

/*Klassen
********************************************************/
/* Nur ohne css im Browser zu sehen */
.none {
	display:none;
}
/* Auf- und Zuklappen - moreInfo */
.off {
	display:none;
	font-size:0.6em;
}
.on {
	display:block;
	font-size:0.6em;
}
/* Hebt float auf */
.clear {
	clear:both;
}
p.back {
	margin:10px 10px 0 0;
	text-align:right;
	font-weight:bold;
}
p.kleiner {
	font-size:0.6em;
}
p.fehler {
	color:#FF3333;
}
span.kleiner {
	font-size:0.7em;
}
/*Links*/
a:link, a:visited, a:hover, a:active {text-decoration:none;}

/* wenn Headline h1 einen Link hat */
h1 a:link, h1 a:visited, h1 a:active {
	color: #000;
	text-decoration: none;
	background: url("../images/template/link_h1.gif") right no-repeat;
	padding-right:20px;
}
h1 a:hover {
	color: #FFF;
	text-decoration: none;
	background: url("../images/template/link_hover.gif") right no-repeat;
	padding-right:20px;
}
/* wenn Headline h3 einen Link hat - hier "nach oben" - Ankerpunkt */
h3 a:link, h3 a:visited, h3 a:active {
	color: #000;
	text-decoration: none;
	background: url("../images/template/totop.gif") right no-repeat;
	padding-right:10px;
}
#infos #content h3 a:link, #infos #content h3 a:visited, #infos #content h3 a:active {
	border-top: 1px solid #CCCCCC;
	margin:5px 0 0 0;
	padding:5px 0 0 0;
	display:block;
}
h3 a:hover {
	color: #FF3333;
	text-decoration: none;
	background: url("../images/template/totop_hover.gif") right no-repeat;
	padding-right:10px;
}
/* wenn Headline h5 einen Link hat - hier "nach oben" - Ankerpunkt */
h5 a:link, h5 a:visited, h5 a:active {
	color: #000;
	text-decoration: none;
	background: url("../images/template/totop.gif") right no-repeat;
	padding-right:10px;
}
h5 a:hover {
	color: #FF3333;
	text-decoration: none;
	background: url("../images/template/totop_hover.gif") right no-repeat;
	padding-right:10px;
}
#faq #content h5 a:link, #faq #content h5 a:visited, #faq #content h5 a:active {
	border-top: 1px solid #CCCCCC;
	margin:5px 0 0 0;
	padding:5px 0 0 0;
	display:block;
}

/*Image allgemein*/
img {border:none;}



span.border {
 display:block;
 border-bottom: 1px solid #CCCCCC;
 margin:5px 10px 5px 10px;
}
#home span.border {
 display:block;
 border-bottom: 1px solid #CCCCCC;
 margin:15px 10px 15px 10px;
}

/*Header Inhalt
********************************************************/
/* Menu - Topnavi*/
#header ul {
	float:left;
	width:550px;
	padding-top:95px;
	margin-left:5px;
}
#header ul li {
	float:left;
	font-size:1.1em;
	font-weight:bold;
	padding:0 15px 0 5px;
	list-style-type:none;
}
#header ul li a, #header ul li a:link, #header ul li a:visited, #header ul li a:active {color:#000;}
#header ul li a:hover {color:#FF3333;}
#header ul li.auswahl a, #header ul li.auswahl a:link, #header ul li.auswahl a:visited, #header ul li.auswahl a:active {color:#FF3333;}
#header ul li.auswahl a:hover {color:#000;}

/* AGB-Link / Impressum-Link / Weiterempfehlen-Link */
#header_right ul {
	width:120px;
	padding:60px 0 0 0;
	margin:0;
}
#header_right ul li {
	float:none;
	font-size:0.6em;
	text-align:right;
	padding:5px 0 0 0;
	margin:0;
}
*html #header_right ul li {
	padding:0;
}
#header_right ul li a, #header_right ul li a:link, #header_right ul li a:visited, #header_right ul li a:active {
	color:#999999;
}

#header_right ul li a:hover {
	color:#FF3333;
}

/*linke Leiste Inhalt
********************************************************/
#left ul {
	width:120px;
	margin-top:8px;
	padding:0 0 5px 10px;
	border-bottom: 1px solid #CCCCCC;
}
#left ul li {
	font-size:0.8em;
	font-weight:bold;
	list-style-type:none;
	margin:0 0 5px 0;
}
#left ul li a, #left ul li a:visited {
	color:#000;
	display:inherit;
}

#left ul li a:hover {
	color:#FF3333;
}

#left img {
margin:1px 0 5px 0;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 1px;
}

/*Content Inhalt
********************************************************/
#content h1 {
	margin:0 1px 0 1px; /* hierdurch erscheint der graue Strich zwischen left-content-right */
}
#content p {
	margin:5px 20px 5px 10px;
}
#content p a, #content p a:link, #content p a:visited, #content p a:active {
	color: #000;
	text-decoration: none;
	background: url("../images/template/link.gif") right no-repeat;
	padding-right:20px;
}
#content p a:hover {
	color: #FF3333;
	background: url("../images/template/link_hover.gif") right no-repeat;
}

/* Listen im Inhalt */
#content ul {
	font-size: 0.8em;
	list-style-type: none;
	margin: 5px 10px 0 25px;
	display:block;
}
#content ul ul {
	margin: 5px 0 0 15px;
}
#content ul li, #content ol li {
	margin-top: 5px;
	list-style-image: url("../images/template/list.gif");
	text-align: justify;
}
/*Liste im Inhalt mit Link ****/
#content ul li a, #content ul li a:link, #content ul li a:visited, #content ul li a:active {
	color:#000;
	background: url("../images/template/link.gif") right no-repeat;
	padding-right:20px;
}
#content ul li a:hover {
	color:#FF3333;
	background: url("../images/template/link_hover.gif") right no-repeat;
}
/*Liste im Inhalt mit Ankerpunkten ****/
#content ul#anker {
	margin-left: 25px;
}
#content ul#anker li, #content ul#anker li a:link, #content ul#anker li a:visited, #content ul#anker li a:active {
	color: #000;
	list-style-image: url("../images/template/anker.gif");
}
#content ul#anker li:hover, #content ul#anker li a:hover {
	color: #FF3333;
/*	list-style-image: url("../images/template/anker_hover.gif");*/
}

/*Offer Inhalt
********************************************************/
/* Fliesstext im Angebotskasten */
#home #content #offer p {
	font-size:0.7em;
	text-align:left;
	margin:5px 5px 0 10px;
}
/* Produkt (Überschrift) in Angebotskasten */
#offer h3 {
	margin:10px 0 10px 0;
	padding:0 0 5px 10px;
	border-bottom:1px solid #000;
}
/* Anzahl und Preis im Angebot */
#offer h4 {
	font-size:1em;
	line-height:1.6em;
	text-align:left;
	float:right;
	margin:5px 5px 5px 0;
}
#offer h4 span.kleiner {
	font-size:0.7em;
	font-weight:normal;
}
#offer h4 a, #offer h4 a:link, #offer h4 a:visited, #offer h4 a:active {
	color:#FF3333;
}
#offer h4 a:hover {
	color:#CCCCCC;
}

/*rechte Leiste Inhalt
********************************************************/
#right p {
	text-align:center;
	margin:-10px 0 0 0;
	padding:0 0 5px 0;
	border-bottom: 1px solid #CCCCCC;
}
#right p a, #right p a:link, #right p a:visited, #right p a:active {
	color:#000;
	text-align:center;
}
#right p a:hover {
	color:#FF3333;
}

/*Footer Inhalt
********************************************************/
#footer p {
	text-align:center;
	font-size:0.6em;
	margin:5px 0 20px 0;
	color:#999;
}

/**************************************************************************************
**************************************************************************************/
/*Boxen
****************************/
/*** Top- oder Wrapbereich  */
#top {
	width:760px; height:100%;
	margin:0 auto; padding:0;
	text-align:center;
	background:none;
}
/*** Kopfbereich  */
#header {
	width:760px; height:120px;
	background:transparent url("../images/template/logo.jpg") top center no-repeat;
	border-bottom:1px solid #000;
}
/*** der rechte Bereich im Kopfbereich */
#header_right {
	float:right;
	width:130px; height:115px;
}
/*** linke Spalte */
#left {
	float:left;
	width:130px; height:auto;
	background:none;
}
/*** Inhalt */	
#content {
	float:left;
	width:500px; height:auto;
	background:none;
	border-bottom:1px solid #CCCCCC;
	padding-bottom:10px; 
}
/*** Inhalt - Spezial */
#content #offer {
	float:left;
	width:153px;
	background:none;
	margin:5px 0 10px 9px;
	border:1px solid #003366;
}

*html #content #offer {
	width:154px;
	margin:5px 0 0 5px;
}
/*** Inhalt - Part/Row/Form */
#content #part {
	float:left;
	width:auto;
	height:auto;
	margin:5px 20px 5px 10px;
}
*html #content #part {
	margin:5px 5px 5px 5px;
	padding-right: 10px;
}
#content #row {
	float:left;
	width:500px;
	height:auto;
}
#content #form {
	float:left;
	width:215px;
	height:auto;
	margin:0;
}

/*** rechte Spalte */
#right {
	float:right;
	width:130px; height:auto;
	background:none;
}
/*** Footer */	
#footer {
	float:left;	
	width:760px;
	background:none;
}
* html #footer {
	margin:0 -3px 0 0;  /* Explorer Duplicate Characters Bug   */ 
}

/**************************************************************************************
**************************************************************************************/
/*Tabellen
/* ********************************** */
#produkte table {
	border-collapse: collapse;
	font-size:0.8em;
	line-height: 1.5em;
	float: left;
	width: 337px;
	margin: 10px 0 20px 0;
}
#produkte fieldset table {
	width: 395px;
	margin: 10px 0 20px 10px;
}
*html #produkte fieldset table {
	width: 400px;
	margin: 10px 0 20px 5px;
}

caption {
	font-weight: bold;
	font-size: 1em;
	text-align: left;
	padding: 5px 0 0 5px;
	margin: 0 0 0 5px;
}
#produkte thead td form {
	width:auto; margin:0;
}
#produkte thead td select {
	width:80px; height:auto;
	border: 1px solid #FF3333;
	padding:0; margin:0;
}
#produkte thead th {
	background:#FF3333;
	color:#FFF;
	padding-left: 5px;
}
#produkte thead td {
	background:#FF3333;
	color:#000;
	padding-left: 5px;
}

#produkte tbody th {
	padding-left: 5px;
}
#produkte tbody td {
	padding-left: 5px;
}
#produkte tbody tr.farb {
	background:#E6E6E6;
}

#produkte tfoot tr {
	background:#FF3333;
}
#produkte tfoot tr.farb {
	background:#FF9999;
}
#produkte tfoot tr.footer {
	background:#FBFBFB;
}
#produkte tfoot th {
	padding-left: 5px;
	color:#FFFFFF;
}
#produkte tfoot td {
	padding-left: 5px;
}
#produkte tfoot th.right, #produkte tfoot th.right input {
	text-align:right;
	padding:0 5px 0 0;
}

#produkte tfoot th form {
	width:auto; margin:10px 0 0 0;
	float:right;
}
/**************************************************************************************
**************************************************************************************/
/*Formulare
/* ********************************** */

form  {
	float:left;
	width: 480px;
	margin: 10px 10px 20px 10px;
	line-height: 1em;
	display: inline; /* kein Zeilenumbruch */
}
fieldset {
	border: 1px solid #999999;
/*	background: transparent url("../images/template/at.jpg") center center no-repeat;	*/
}
legend {
	padding:5px 13px;
	color: #999999;
	font-size:0.8em;
	letter-spacing:0.5em;
	font-weight:bold;
	text-transform:uppercase;
}

fieldset p {
	margin:5px 10px 0 20px;
	color: #000;
}
fieldset p label {	/* Bezeichnung vor Textfeld */
	cursor: pointer;
	font-weight: bold;
}

fieldset p input  { /* Textfeld */
	width:180px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
*html fieldset p input  { /* Textfeld */
	width:180px; 
	height:16px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}

fieldset th input  { /* Textfeld */
	width:110px;
	background:none;
	height:20px;
	border: none;
	padding:2px 0 0 0;
	color:#FFFFFF;
}
fieldset td input  { /* Textfeld */
	width:285px;
	background:none; 
	height:20px;
	border: none;
	padding:2px 0 0 0;
}

fieldset p input#schmal  { /* Textfeld in Anfrageformular */
	width:76px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
*html fieldset p input#schmal  { /* Textfeld in Anfrageformular */
	width:72px; 
	height:16px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
fieldset p input#plz  { /* Textfeld in Anfrageformular */
	width:50px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
fieldset p input#ort  { /* Textfeld in Anfrageformular */
	width:125px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
fieldset p input#breit  { /* Textfeld in Anfrageformular */
	width:395px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
fieldset p textarea { /* Textarea */
	width: 395px;
	padding:2px 0 0 3px;
	border: 1px solid #CCCCCC;
} 

fieldset p input[type=checkbox] {	/* Checkbox */
	width: auto;
	height: auto;
	cursor: pointer;
	border: 1px solid #CCCCCC;
}
*html fieldset p input#check {	/* Checkbox */
	width: auto;
	height: auto;
	cursor: pointer;
	border:none;
}

fieldset p input#radio {	/* Radiobutton */
	width: auto;
	height: auto;
	cursor: pointer;
	vertical-align:sub;
	border:none;
}
*html fieldset p input#radio {	/* Radiobutton */
	width:inherit;
	vertical-align:baseline;
}

fieldset p select {
	width:180px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
*html fieldset p select {
	width:185px; 
	height:16px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
fieldset p select#breit {
	width:395px; 
	height:20px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
*html fieldset p select#breit {
	width:400px; 
	height:16px;
	border: 1px solid #CCCCCC;
	padding:2px 0 0 3px;
}
input#send { /* Submit-Button */
	margin: 10px 0 20px 10px;
	padding: 1px 5px 1px 5px;
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: center;
	width: auto;
	cursor: pointer;
}
th input#send { /* Submit-Button in Tabelle */
	margin: 20px 0 20px 10px;
	padding: 1px 5px 1px 5px;
	font-size: 1em;
	line-height: 1.5em;
	text-align: center;
	width: auto;
	cursor: pointer;
}

/**************************************************************************************
Seitenbezogenes CSS
**************************************************************************************/
/*Downloads
/*******************************************/
#downloads img {
	vertical-align:bottom;
}
/*Produkte
/*******************************************/
#produkte #offer p {
	margin:5px 5px 5px 10px;
}
#produkte #content ul {
	font-size:0.7em;
	clear:both;
}
#produkte img {

}
/*Informationen, Agb, DIN etc.
/*******************************************/
#infos #content ol li {
	font-size:0.9em;
	font-weight:bold;
	list-style-type: upper-roman;
	list-style-image: none;
	margin:10px 0 0 40px;
}
*html #infos #content ol li {
	margin:10px 0 0 45px;
}
#infos #content ol ul li {
	font-size:1em;
	font-weight:normal;
	list-style-type: decimal;
	margin:0 10px 0 15px;
}

*html #infos #content ol ul li {
	margin:0 0 0 -25px;
}
#infos #content ul li {
	margin-right:10px;
}