/* Standard-CSS IT-Service Diedrich/

/* Farben
Hintergrundfarbe: transparent
Schriftfarbe: #666
Navigation green: #9fb03e

*/

/* Schriften
Schriftfamilie: Trebuchet MS, Arial, Helvetica, sans-serif
Schriftgroessen:
headline_01: 1.2em/1.4em/normal
headline_02:
headline_03:  0.70em/1.4em/bold
Fliesstext: 0.66em/1.6em/normal

*/


* {margin: 0;  padding: 0; border: none; background-color: transparent;}

html, body {height: 100%; font: normal 100.01% Trebuchet MS, Arial, Helvetica, sans-serif; color: #666; background-color: transparent;}

H1 {font-size: 1.4em; font-weight: bold; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #0057a6; background-color: transparent; padding-bottom: 0.6em; line-height: 1.4em;}
.head {width: 354px; padding-top: 40px; line-height: 1.2em;}
.angebote {width: 354px; padding-top: 0px; line-height: 1.2em;}
.headerdetail {font-size: 1.2em; color: #77c6f0; padding-top: 6px; line-height: 1.2em;}

H2 {font-size: 0.90em; font-weight: bold; color: #454d50; background-color: transparent; padding-top: 2em; padding-bottom: .2em; line-height: 1.8em;}
.projekte {padding-top: 10px;}

H3 {font-size: 0.80em; font-weight: bold; color: #454d50; background-color: transparent; padding-top: .3em; padding-bottom: .2em; line-height: 1.4em;}
H6 {font-size: 0.66em; font-weight: normal; color: #454d50; background-color: transparent; padding: .4em .2em .4em .2em; line-height: 1.4em;}

p {font-size: 0.72em; font-weight: normal; line-height: 1.6em; color: #4e565a; padding-bottom: 0.8em; padding-right: 20px;}
.startseite {float: left; font-size: 0.66em; font-weight: normal; line-height: 1.2em; color: #4e565a; padding-bottom: 0.8em;}
.small {line-height: 1.2em;}
.subnavblue, .subnavorange, .subnavgray {font-size: 0.84em; font-weight: bold; padding-left: 3px; padding-bottom: 3px; line-height: 4px; padding-top: 26px;}
.subnavblue a {text-decoration: none; color: #6fc0ff;}
.subnavorange a {text-decoration: none; color: #fe6d4c;}
.subnavgray a {text-decoration: none; color: #4e565a;}


b {font-weight: bold}

i {font-style: italic}

hr {width: 151px; height: 1px; color: #494e4f;}


img {border: none;}
.fachhandelspartner {float: left; padding-right: 3px; padding-bottom: 3px;}


img a {border: none;}
.left {float: left;}
.stories {float: left; padding-top: 20px;}
.print {float: right; margin-right: 10px;}
.store {float: left; margin-right: 10px;}
.projekt {float: left; margin-right: 10px; margin-bottom: 20px;}

blockquote {margin-top: 1.5em; padding: 4px 0px 0px 15px; background: url(../images/zitatbild.gif) no-repeat top left;}
blockquote p {width: 325px; margin-bottom: 1em; font-style: italic; color: #454d50; background: none;}
cite {width: 320px; display: block; margin-left: 15px; font-weight: bold; background: transparent;}

a.text:link {color: #0057a6; background-color: transparent; font-weight: bold; text-decoration: none; border-bottom: 0.12em dotted}
a.text:visited {color: #999; background-color: transparent; font-weight: bold; text-decoration: none; border-bottom: 0.12em dotted}
a.text:hover {color: #fe6d4c; background-color: transparent; font-weight: bold; text-decoration: none; border-bottom: 0.12em dotted}

a.article:link {color: #626262; background-color: transparent; font-weight: bold; text-decoration: none;}
a.article:visited {color: #626262; background-color: transparent; font-weight: bold; text-decoration: none;}
a.article:hover {color: #fe6d4c; background-color: transparent; font-weight: bold; text-decoration: none;}

a.links:link {color: #626262; background-color: transparent; font-weight: bold; text-decoration: none;}
a.links:visited {color: #626262; background-color: transparent; font-weight: bold; text-decoration: none;}
a.links:hover {color: #fe6d4c; background-color: transparent; font-weight: bold; text-decoration: none;}

a.sitemap:link {color: #0057a6; background-color: transparent; font-weight: bold; text-decoration: none;}
a.sitemap:visited {color: #0057a6; background-color: transparent; font-weight: bold; text-decoration: none;}
a.sitemap:hover {color: #fe6d4c; background-color: transparent; font-weight: bold; text-decoration: none;}

a.valide:link {color: #fff; background-color: transparent; font-weight: normal; text-decoration: none;}
a.valide:visited  {color: #fff; background-color: transparent; font-weight: normal; text-decoration: none;}
a.valide:hover {color: #fe6d4c; background-color: transparent; font-weight: normal; text-decoration: none;}

.cleaner {clear: both; float: none; padding: 0; height: 0px; width: 1px; background: none transparent scroll repeat 0% 0%; margin: 0;}

.spacer12 {width: 1px; height: 0px; margin-top: 12px; background-color: transparent;}
.spacer24 {width: 1px; height: 24px; background-color: transparent;}
.spacer36 {width: 1px; height: 36px; background-color: transparent;}
.spacer48 {width: 1px; height: 48px; background-color: transparent;}

/*Boxen*/

/*Wrapper: Aufbau*/
#page {width: 100%; min-height: 100%; height: auto !important; height: 100%; position: relative; margin-top: 0; background-image: url(../images/pagebck3.jpg); background-repeat: repeat-x; background-color: #D8E9F1;}
#wrapper {width: 943px; height: auto; text-align: center; margin-right: auto; margin-left: auto; background-color: transparent;}


/*HEADER NAVIGATION: */
#header {width: 943px; height: 39px; margin-top: 0px; text-align: center; background-color: #2a3135;}
#headernavigation {width: 935px; margin-left: 4px; margin-right: 4px;}
#headernavigation #left {width: 680px; text-align: left; margin-top: 0px; float: left;}
#headernavigation #right {width: 255px; text-align: left; float: left;}

#bookmarks {width: auto; height: auto; margin-top: 0px; text-align: right;}


/*START NAVIGATION: */
#startnavigation {width: 579px; text-align: left;}



/*CONTENT*/
#main {width: 943px; height: auto; clear: left; margin-top: 25px;}

.headangebote {width: 575px; height: 29px; background-image: url(../stories/head-angebote.gif); position: absolute; top: 251px;}

.headitservices {width: 579px; height: 149px; background-image: url(../stories/it-services.png);}
.headkunden {width: 579px; height: 149px; background-image: url(../stories/head-kunden.gif);}
.headsupport {width: 579px; height: 149px; background-image: url(../stories/head-support.png);}
.headloesungen {width: 579px; height: 149px; background-image: url(../stories/head-loesungen.png);}
.headvertrieb {width: 579px; height: 149px; background-image: url(../stories/head-vertrieb.png);}
.headprojekte {width: 579px; height: 149px; background-image: url(../stories/head-projekte.png);}
.headprofil{width: 579px; height: 149px; background-image: url(../stories/head-profil.gif);}
.headpartner{width: 579px; height: 149px; background-image: url(../stories/head-partner.png);}
.headfachhandel{width: 579px; height: 149px; background-image: url(../stories/head-fachhandel.gif);}
.headfernwartung{width: 579px; height: 149px; background-image: url(../stories/head-fernwartung.png);}
.headnetzwerkcheck {width: 579px; height: 149px; background-image: url(../stories/head-netzwerkcheck.gif);}
.headkomplettpaket {width: 579px; height: 149px; background-image: url(../stories/head-komplettpaket.gif);}
.headreferenzen {width: 579px; height: 149px; background-image: url(../stories/head-referenzen.gif);}
.headwebkonzept {width: 579px; height: 149px; background-image: url(../stories/head-webkonzept.gif);}
.headwebsitecheck {width: 579px; height: 149px; background-image: url(../stories/head-websitecheck.gif);}
.headwebservices {width: 579px; height: 149px; background-image: url(../stories/head-webservices.gif);}
.headwebkreation {width: 579px; height: 149px; background-image: url(../stories/head-webkreation.gif);}
.headwebdesign {width: 579px; height: 149px; background-image: url(../stories/head-webdesign.gif);}
.headwebprojekte {width: 579px; height: 149px; background-image: url(../stories/head-webprojekte.gif);}
.headkooperationen {width: 579px; height: 149px; background-image: url(../stories/head-kooperationen.gif);}

#extrawrapper  {width: 540px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 16px; border: 1px dotted; background-color: #f4f8fc}
#extra  {font-size: 12px; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #454d50; background-color: transparent;}

.projektwrapper  {width: 575px; font-size: 12px; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #454d50; background-color: transparent;}

.subnavheader {padding-left: 0px; padding-right: 5px; color: #454d50; background-color: transparent;}
.subnavigation {padding-left: 5px; font-size: 12px; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #454d50; background-color: transparent;}
.subnavline {width: 151px; height: 1px; margin-top: 10px; margin-bottom: 6px; background-image: url(../images/subheaderline.gif); background-position: top left; background-color: transparent;}

.leftcol {width: 580px; text-align: left; float: left; height: 100%; margin: 0; background-image: url(../images/it-service-diedrich2.gif); background-position: top left; background-repeat: no-repeat;}
.leftleft {width: 285px; float: left; margin-right: 8px; margin-top: 20px;}
.leftright {width: 285px; float: left; margin-top: 20px;}
.referenzen {width: 203px; float: left; margin-left: 8px; margin-bottom: 0px;}

.it-service-screen {width: 579px; height: 188px;}
.it-service-print {width: 579px; display: none;}
img.windowprint {width: auto;}

.webprojekt {width: 580px; float: left; margin-bottom: 18px;}
.imagebox {float: right; padding-right: 24px; margin-top: 20px;}

.rightcol {width: 358px; text-align: left; float: left; height: 100%; margin-top: 0px;}
.rightcolleft {width: 163px; float: left; margin-left: 10px; margin-top: 5px; border-right: 1px dotted;}
.centercol {width: 1px; height: 500px; border-right: 1px dotted; float: left; margin-top: 15px;}
.rightcolright {width: 173px; float: left; margin-top: 5px; margin-left: 10px;}

.news {width: 173px; margin-top: 30px;}
.news20 {width: 173px; margin-top: 20px;}

.angebotbox {width: 575px; margin-top: 20px; background-color: #fff; border: 1px dotted;}
.boximage {float: left; width: 124px;  background-color: #fff; padding-right: 12px; padding-top: 8px;}
.boxcontent {float: left; width: 300px; padding-top: 6px; background-color: #fff;}
.boxspecial {float: left; width: 100px; padding-top: 6px; background-color: #fff; padding-right: 6px; padding-bottom: 12px; text-align: right;}
.boxpreis {float: left; width: 120px; font: bold 2.4em Trebuchet MS, Arial, Helvetica, sans-serif; color: #ff693a; text-align: right; padding-right: 12px; padding-bottom: 12px; padding-top: 8px;}

.boxtelefon {float: right; width: auto; font: normal 0.8em Trebuchet MS, Arial, Helvetica, sans-serif; color: #333;}
.boxtelefon span {font-size: 22px; color: #333; font-weight: normal; line-height: 28px;}

.sitemapbox {width: 579px;}
.sitemap {width: 110px; margin-top: 40px; padding-right: 5px; float: left; font-size: 0.9em; font-weight: bold; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #0057a6; background-color: transparent; padding-bottom: 0.6em; line-height: 1.4em;}

.kontaktbox {width: 579px; margin-top: 30px;}
.kontakt {float: left; font-size: 0.72em; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #333; background-color: transparent;}

.loginbox {width: 575px; margin-top: 30px;}
.login {float: left; font-size: 0.72em; font-weight: normal; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; color: #333; background-color: transparent;}

#bottom-spacer {height: 203px;}

/*Kontaktformular*/
form#kontaktform {margin: 0; padding: 0; color: #333;}
form#kontaktform input[type=checkbox] {margin: 4px 4px 4px 0px; vertical-align: middle;}
form#kontaktform textarea {width: 555px; padding: 0; margin: 0; height: 80px; border: 1px solid #464B59; background-color: transparent;}
form#kontaktform fieldset {width: 579px;}
form#kontaktform fieldset label {height: 20px;  width: 90px; margin-top: 0; margin-bottom: 2px; line-height: 25px;}
form#kontaktform fieldset input {height: 20px; width: 225px; margin-top: 0; margin-bottom: 2px; border: 1px solid #333; line-height: 20px;}
form#kontaktform input#senden {width: 578px; border: none;}

/*Rückrufformular*/
form#callback {margin: 0; padding: 0; color: #333;}
form#callback input[type=checkbox] {margin: 4px 4px 4px 0px; vertical-align: middle;}
form#callback textarea {width: 225px; padding: 0; margin: 0; height: 80px; border: 1px solid #464B59; background-color: transparent;}
form#callback fieldset {width: 575px;}
form#callback fieldset label {height: 20px;  width: 90px; margin-top: 0; margin-bottom: 2px; line-height: 25px;}
form#callback fieldset input {height: 20px; width: 225px; margin-top: 0; margin-bottom: 2px; border: 1px solid #333; line-height: 20px;}
form#callback input#senden {width: 578px; height: 17px; padding-top: 20px; border: none;}

/*LogIn*/
form#login {margin: 0; padding: 0; color: #333;}
form#login input[type=checkbox] {margin: 4px 4px 4px 0px; vertical-align: middle;}
form#login textarea {width: 225px; padding: 0; margin: 0; height: 80px; border: 1px solid #464B59; background-color: transparent;}
form#login fieldset {width: 575px;}
form#login fieldset label {height: 20px;  width: 90px; margin-top: 0; margin-bottom: 2px; line-height: 25px;}
form#login fieldset input {height: 20px; width: 225px; margin-top: 0; margin-bottom: 2px; border: 1px solid #333; line-height: 20px;}
form#login input#senden {width: 578px; height: 17px; padding-top: 20px; border: none;}

/*Footer*/
#footer {clear: both; height: 235px; width: 100%; background-color: transparent; position: absolute; bottom: 0; overflow: hidden; z-index: 100;}
#upperfooter {width: 943px; height: 151px; background-color: transparent; margin-right: auto; margin-left: auto; text-align: center; text-transform: uppercase;}
#upperbox {width: 943px; height: 151px;}
#upperboxleft {float: left; margin-top: 0px;}
#upperboxright {float: right;}

#lowerfooter {width: 100%; height: 84px; position: relative; margin-bottom: 0; background-image: url(../images/footerbck.jpg); background-repeat: repeat-x;}
#lowerbox {width: 943px; height: 82px; text-align: center; margin-right: auto; margin-left: auto; background-image: url(../images/footerfront.jpg); background-repeat: no-repeat;}
#lowerbox p a {text-align: left; padding: .2em .4em; position: absolute; bottom: 16px; border: 1px solid}



/* +++ FORMATIERUNG HEADER MAIN MENUE  links   +++ */
#main-left, ul {height: 39px; padding: 0; margin-top: 0px;}
#main-left li {list-style-type: none; display: block; float: left; font: bold 10px/34px verdana, sans-serif; letter-spacing: .04em; text-align: center;}
#main-left li a {text-decoration: none; display: block; width: 136px; height: 39px; color: #ccc; background-image: url(../images/leftnavbck.jpg); background-repeat: no-repeat;}
#main-left li a:hover {color: #85d7fe;}
#main-left li#current a {color: #85d7fe;}

/* +++ FORMATIERUNG HEADER MAIN MENUE PULLDOWN  links   +++ */
#main-left li ul {height: 25px; display: none; position: relative; top: 0; left: 0; background: #52585C;}
#main-left li li {float: none; font-weight: normal; line-height: 23px; height: 25px;}
#main-left li li a {background-image: url(../images/pullbck.gif); background-repeat: no-repeat;}
#main-left li:hover ul, #main-left li.sfhover ul {display: block;}


 /* +++ FORMATIERUNG HEADER MAIN MENUE LEVEL 1 rechts   +++ */
ul.main-right {height: 39px; padding: 0; margin-top: 0px;}
ul.main-right li {list-style-type: none; display: block; float: left; font: bold 10px/34px verdana, sans-serif; letter-spacing: .04em; text-align: center;}
ul.main-right li a {text-decoration: none; display: block; width: 136px; height: 39px; color: #ccc; background-image: url(../images/rightnavbck.jpg); background-repeat: no-repeat;}
ul.main-right li a:hover {color: #85d7fe;}
ul.main-right li#current a {color: #85d7fe;}

/* +++ FORMATIERUNG SUB MENUE IT-SERVICE  +++ */
ul.it-subnavi {height: auto; list-style: none; margin: 0; padding: 0px 0px 0px 0px;}
ul.it-subnavi li {list-style-type: none;}
ul.it-subnavi li a {display: block; padding-left: 17px; text-decoration: none; color: #454d50; line-height: 1.6em; background-image: url(../images/bluebullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}
ul.it-subnavi li a:hover {color: #77ccf0;}
ul.it-subnavi li #current {color: #1791d2; line-height: 1.6em; background-image: url(../images/bluebullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}

/* +++ FORMATIERUNG SUB MENUE WEB-SERVICE  +++ */
ul.web-subnavi {height: auto; list-style: none; margin: 0; padding: 0px 0px 0px 0px;}
ul.web-subnavi li {list-style-type: none;}
ul.web-subnavi li a {display: block; padding-left: 17px; text-decoration: none; color: #454d50; line-height: 1.6em; background-image: url(../images/orangebullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}
ul.web-subnavi li a:hover {color: #fe6d4c;}
ul.web-subnavi li #current {color: #FE3F16; line-height: 1.6em; background-image: url(../images/orangebullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}

/* +++ FORMATIERUNG SUB MENUE DIEDRICH-SERVICE  +++ */
ul.diedrich-subnavi {height: auto; list-style: none; margin: 0; padding: 0px 0px 0px 0px;}
ul.diedrich-subnavi li {list-style-type: none;}
ul.diedrich-subnavi li a {display: block; padding-left: 17px; text-decoration: none; color: #454d50; line-height: 1.6em; background-image: url(../images/graybullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}
ul.diedrich-subnavi li a:hover {color: #7C8687;}
ul.diedrich-subnavi li #current {color: #7C8687; line-height: 1.6em; background-image: url(../images/graybullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}

/* +++ FORMATIERUNG Liste im Kasten vom Content  +++ */
ul.copy   {height: auto; list-style: none; margin: 0; padding: 0;}
ul.copy li {padding-left: 20px; display: block; text-decoration: none; color: #454d50; line-height: 1.6em;  background-image: url(../images/bluebullet.gif); background-repeat: no-repeat; background-position: 0 .3em;}

/* +++ FORMATIERUNG Liste Projekte  +++ */
ul.list   {height: auto; list-style: none; margin: 0; padding: 0;}
ul.list li {padding-left: 14px; padding-bottom: 0px; display: block; text-decoration: none; color: #454d50; line-height: 1.6em; background-image: url(../images/projektbullet.gif); background-repeat: no-repeat; background-position: 0 .3em; background-color: #f4f8fc; border-bottom: 2px solid; border-color: #ccc;}

/* +++ FORMATIERUNG Liste Sitemap  +++ */
ul.map   {height: auto; list-style: none; margin: 0; padding: 0;}
ul.map li {padding-bottom: 0px; display: block; text-decoration: none; color: #333; font-size: 0.9em; font-weight: normal;}
ul.map li a {text-decoration: none; color: #333;}
ul.map li a:hover {color: #fe6d4c;}

/* +++ FORMATIERUNG Liste Datenschutz  +++ */
ul.simple   {height: auto; list-style: none; margin: 0; padding: 0;}
ul.simple li {font-size: 0.72em; font-weight: normal; line-height: 1.6em; color: #333; padding-bottom: 12px;}

/* +++ FORMATIERUNG MENUE FOOTER  +++ */
ul.footer {list-style: none; padding-top: 128px; margin: 0; text-transform: uppercase;}
ul.footer li {display: inline; font: normal 0.60em Verdana, sans-serif;}
ul.footer li a {text-decoration: none; color: #666;}
ul.footer li a:hover {background-repeat: no-repeat; color: #000;}
ul.footer li#current a {background-repeat: no-repeat; color: #9fb03e;}

a.footer:link {color: #666; background-color: transparent; text-decoration: none;}
a.footer:visited {color: #999; background-color: transparent; text-decoration: none;}
a.footer:hover	{color: #000; background-color: transparent; text-decoration: none;}