/* Projekt:                   Novoferm		*/
/* Dateiname:             optik.css   	*/
/* erstellt am | von:   24.08.2007 HsC  */
/* validiert am:           28.08.2007 HsC */
 
 
/* ----- Inhaltsverzeichnis ----- */

/* ----- Core Module -----  */
/* ----- Quernavigation ------ */
/* ----- Subnavi ----- */
/* ----- Content ----- */
/* ----- Zuhause ----- */
/* ----- Technik ----- */
/* ----- Energie ----- */
/* ----- Design ----- */
/* ----- Vielfalt ----- */
/* ----- Produkte ----- */
/* ----- Aluminium ----- */
/*  ----- Kunststoff ----- */
/* ----- Glas und Farben Produkte ----- */
/* ----- Kontakt ----- */
/* ----- Footer ----- */
/* ----- Sub-Footer ----- */



/* ----- Core Module -----  */
 
body {
text-align: center;
background: #878889 url('../images/background.gif') 50% 0 repeat-y;
font-size:69%
}

li, a, p, span, input, label, h1, h2, h3 {
font-family: arial, sans-serif;
}

a {
outline: 0;
}

.clear {
clear: both;
}

.float-left {
float: left;
}

.invisible {
visibility: hidden;
}

#wrapper {
margin: 0 auto;
text-align: left;
width: 812px;
background: #fff;
border-left: #fff 4px solid;
border-right: #fff 4px solid;
}

* html #wrapper {
border-right: #fff 2px solid;
}

#header {
height: 75px;
width: 813px;
background: #dedfe0;
border-bottom: #fff 4px solid;
}

#logo {
display: block;
float: left;
margin: 20px 0 0 20px;
}

/* ----- Quernavigation ------ */

.mainnavi {
display: block;
float: right;
margin-top: 29px;
margin-right: 13px;
}

* html .mainnavi {
margin-bottom: -5px;
margin-right: 6px;
}

.mainnavi li {
float: left;
}

* html .mainnavi li {
height: 25px;
padding-top: 5px;
}

.mainnavi li a {
color: #333;
font-size: 1.1em;
font-weight: bold;
}

a.nav1 {
padding: 5px 10px 5px 7px;
}

a.nav2 {
padding: 5px 11px 5px 11px;
}

a.nav3 {
padding: 5px 10px 5px 10px;
}

a.nav4 {
padding: 5px 10px 5px 10px;
}

a.nav1.on1, 
a.nav1:hover {
color: #000;
padding: 5px 10px 5px 7px;
background: url('../images/navi1.gif') top left no-repeat;
}

a.nav2.on2,
a.nav2:hover {
color: #000;
padding: 5px 11px 5px 11px;
background: url('../images/navi2.gif') top left no-repeat;
}

a.nav3.on3,
a.nav3:hover {
color: #000;
padding: 5px 10px 5px 10px;
background: url('../images/navi3.gif') top left no-repeat;
}

a.nav4.on4 ,
a.nav4:hover {
color: #000;
padding: 5px 10px 5px 10px;
background: url('../images/navi4.gif') top left no-repeat;
}

/* ----- Subnavi ----- */

.subnavi {
display: block;
float: right;
margin: -1px 15px 0 0;
}

* html .subnavi {
margin: -2px 7px 0 0;
}

.subnavi li {
float: left;
}

* html .subnavi li {
padding: 6px 0;
}

.subnavi li a {
color: #333;
font-size: 1em;
padding: 6px 7px;
background: #e7e7e7;
}

.subnavi li a:hover {
background: #fff;
}

.subnavi li a.on {
background: #fff;
}

/* ----- Content ----- */

.teasercontainer {
width: 813px;
}

* html .teasercontainer {
margin-top: -3px;
}

.teaser {
float: left;
}

#content li {
list-style-type: none;
font-size: 1.1em;
line-height: 1.4em;
margin: 15px 0 0 10px;
padding: 0 0 0 16px;
background: url('../images/dot.gif') 0 7px no-repeat;
}

/* ----- Zuhause ----- */

* html .zuhause {
display: inline;
}

.zuhause h2 {
display: block;
width: 615px;
height: 23px;
margin: 20px 0 20px 90px;
background: url('../images/zuhause_headline.gif') no-repeat;
}

.impressum p,
.farben p,
.aluminium p,
.kontakt p,
.kunst p,
.zuhause p,
.technik p,
.energie p,
.design p,
.vielfalt p {
font-size: 1.1em;
line-height: 1.4em;
}

.zuhause p {
padding: 0 90px 20px 90px;
}

.zuhause .teasercontainer {
display: inline;
margin-left: 90px;
}

.vier-teaser {
margin-right: 26px;
}

/* ----- Technik ----- */

.technik,
.energie,
.design,
.vielfalt {
float: left;
width: 330px;
margin-left: 40px;
}

.technik h2 {
display: block;
width: 167px;
height: 30px;
margin: 30px 0;
background: url('../images/technik_headline.gif') no-repeat;
}

/* ----- Energie ----- */

.energie h2 {
display: block;
width: 170px;
height: 30px;
margin: 30px 0;
background: url('../images/energie_headline.gif') no-repeat;
}

/* ----- Design ----- */

.design h2 {
display: block;
width: 156px;
height: 30px;
margin: 30px 0 30px 1px;
background: url('../images/design_headline.gif') no-repeat;
}

/* ----- Vielfalt ----- */

.vielfalt h2 {
display: block;
width: 157px;
height: 30px;
margin: 30px 0 30px 2px;
background: url('../images/vielfalt_headline.gif') no-repeat;
}

/* ----- Produkte ----- */

.produkte {
display: block;
float: left;
width: 270px;
}

.produkte p {
padding-left: 130px;
padding-top: 40px;
}

.produkte p img {
margin: 8px 10px 8px 0 ;
}

.produkte .icons {
margin: 5px 0 0 125px; 
}

.produkte .zoom {
margin-right: 4px;
}

/* ----- Aluminium ----- */

.alu-oben {
height: 230px;
background: #d9dadb url('../images/alu_tuer1.jpg') 15px 40px no-repeat;
}

.alu-unten {
height: 230px;
border-top: #fff 4px solid;
border-bottom: #fff 4px solid;
background: #d9dadb url('../images/alu_tuer2.jpg') 15px 40px no-repeat;
}

.aluminium {
display: block;
float: left;
width: 230px;
}

.aluminium p {
padding-left: 20px;
}

.aluminium h2 {
display: block;
width: 215px;
height: 42px;
margin: 55px 0 45px 20px;
background: url('../images/aluminium_headline.gif') no-repeat;
}

/*  ----- Kunststoff ----- */

.kunst {
display: block;
float: left;
width: 230px;
}

.kunst p {
padding-left: 20px;
}

.kunst-oben {
height: 230px;
background: #d9dadb url('../images/kunst_tuer1.jpg') 15px 40px no-repeat;
}

.kunst-unten {
height: 230px;
border-top: #fff 4px solid;
border-bottom: #fff 4px solid;
background: #d9dadb url('../images/kunst_tuer2.jpg') 15px 41px no-repeat;
}

.kunst h2 {
display: block;
width: 215px;
height: 45px;
margin: 55px 0 42px 20px;
background: url('../images/kunststoff_headline.gif') no-repeat;
}

/* ----- Glas und Farben Produkte ----- */

.farben {
float: left;
width: 436px;
}

.farben h2 {
display: block;
width: 370px;
height: 18px;
margin: 30px 0 30px 20px;
background: url('../images/glas_headline.gif') no-repeat;
}

.farben p {
padding: 0 20px;
}

/* ----- Griffe Produkte ----- */

.griffe {
float: left;
width: 436px;
}

.griffe h2 {
display: block;
width: 410px;
height: 20px;
margin: 30px 0 30px 10px;
background: url('../images/griff_headline.gif') no-repeat;
}

.griffe p {
padding: 0 10px;
}

/* Zweispaltig */

.produkte-zweispaltig {
display: block;
float: left;
width: 372px;
border-right: #fff 4px solid;
border-bottom: #fff 4px solid;
background: #d9dadb;
padding: 0 0 46px 0;
}

*html .produkte-zweispaltig {
display: block;
float: left;
width: 370px;
border-right: #fff 4px solid;
border-bottom: #fff 4px solid;
background: #d9dadb;
padding: 0 0 46px 0;
}

.zweispaltig-links,
.zweispaltig-rechts {
width: 135px;
float: left;
margin-top: 40px;
}

.zweispaltig-links {
margin-left: 30px;
}

* html .zweispaltig-links {
margin-left: 15px;
}

.zweispaltig-rechts {
margin-left: 42px;
}

/* ----- Impressum ----- */

.impressum {
float: left;
width: 436px;
}

.impressum h2 {
display: block;
width: 143px;
height: 31px;
margin: 30px 0 30px 40px;
background: url('../images/impressum_headline.gif') no-repeat;
}

.impressum p {
padding: 0 20px 20px 40px;
}

.impressum p a {
color: #0072b8;
}

.impressum p a:hover {
text-decoration: underline;
color: #0072b8;
}

/* ----- Kontakt ----- */

.kontakt {
float: left;
width: 450px;
}

.kontakt h2 {
display: block;
width: 95px;
height: 23px;
margin: 25px 0 25px 55px;
background: url('../images/kontakt_headline.gif') no-repeat;
}

.kontakt p {
padding-left: 55px;
}

.kontaktformular {
margin: 20px 0 0 55px;
}

.border-bottom {
border-bottom: #fff 4px solid;
}

label {
display: block;
float: left;
width: 130px;
padding-top: 3px;
font-size: 1.2em;
}

input,
textarea {
width: 215px;
padding: 3px 0 0 5px;
border: #717173 1px solid;
background: url('../images/input_bg.gif') left bottom no-repeat;
margin-bottom: 7px;
}

input {
height: 18px;
}

textarea {
height: 162px;
}

.street {
width: 156px;
}

.nr {
width: 45px;
margin-left: 7px;
}

.plz {
width: 75px;
}

.ort {
width: 126px;
margin-left: 7px;
}

.send {
width: 92px;
height: 26px;
border: 0;
margin-left: 255px;
}

* html .send {
margin-left: 260px;
}

/* ----- Footer ----- */

#footer ul {
float: right;
margin: 20px 0;
}

* html #footer ul {
margin: 10px 0;
}

#footer ul li {
float: left;
}

#footer ul li a {
font-size: 1.1em;
color: #8f8f8f;
margin-right: 12px;
}

#footer ul li a:hover {
color: #333;
}

/* ----- Sub-Footer ----- */

#sub-footer ul {
float: right;
margin: 4px 0 5px 0;
}

* html #sub-footer ul {
margin: 2px 0 4px 0;
}

#sub-footer ul li {
float: left;
background: 0;
margin: 0;
padding: 0;
}

#sub-footer ul li a {
font-size: 1.1em;
color: #8f8f8f;
margin-right: 12px;
}

#sub-footer ul li a:hover {
color: #333;
}

#sub-footer hr {
height: 4px;
border: 0;
color: #dbdcdd;
background: #dbdcdd;
}