@import url(reset.css);

/* v1.2 | 20080630 */
/* pitcom.net relaunch */
/* WEB styles */

/* Basics
_____________________________________________________________________________________ */

body {
    font: 75% Arial;
    line-height: 1.5;
    color: #333;			/* TextFarbe */
    background: #FFF;
}

hr, caption {
    display: none;
}

a, a:link, a:visited {
    text-decoration: none;
    color: #000;
}

a:focus {
    text-decoration: underline;
}

.column {
    float: left;
}

.clear {
    clear: both;
}

/* Zentrieren
_____________________________________________________________________________________ */

#body {
    width: 960px;
    padding-top: .5em;
    margin: 0 auto;
}

/* Header
_____________________________________________________________________________________ */

#header, #navbar  {
    background: #CBB9AE;						/* Banner BG Farbe */
}

#header {
    height: 4.5em;
    padding-left: 1.2em;
    margin-bottom: .5em;
}

/* pitcom Logo */

#header h1 {
    float: left;
    width: 140px;
    margin-top: 1.2em;
}

/* Mehrsprachigkeit und Metanavigation */

#lang, #topnav {
    font-size: .8em;
    line-height: 1.8em;
    clear: right;
    float: right;
    margin-right: 5px;
}

#lang {
    margin-top: 1.5em;
}

#lang li, #topnav li {
    float: left;
}

#lang li a, #topnav li a {
    display: block;
    padding: 0 4px;
}

#lang li a:hover, #topnav li a:hover {
    text-decoration: underline;
}

/* Navigation und Suche
_____________________________________________________________________________________ */

#navbar {
    float: left;
    width: 100%;
    margin-bottom: .5em;
}

#nav li {
    float: left;
    line-height: 2em;
}

#nav li a {
    font-size: 12px;
    display: block;
    overflow: hidden; 	
    color: #000;
    padding: 0 9px;
    border-right: 1px solid #FFF;
}

/* fuer .hover und .focus wird nav.js bentigt; das Men funktoniert ohne JavaScript in modernen Browsern mit der Maus */
/* .hover - hover fuer IE6 */
/* .focus - fuer Barrierearmut; Zugang via Tab-Taste etc. */

#nav li a:focus {
    text-decoration: none;
}

#nav li a:focus, #nav li a.focus, ul#nav li a:hover {
    color: #313184;
}

#nav li ul, #nav li:hover li ul, #nav li.hover li ul {
    position: absolute;
    left: -1000em;
    background: #CBB9AE;
}

#nav li:hover ul, #nav li.hover ul, #nav li li:hover ul, #nav li li.hover ul {
    border: 1px solid #FFF;
    border-top: 0;
    left: auto;
	margin-left: -1px;
}

#nav li a.focus + ul, #nav li li a.focus + ul {
    border: 1px solid #FFF;
    border-top: 0;
    left: auto;	
	margin-left: -1px;
}

#nav li li:hover ul, #nav li li.hover ul {
    margin-top: -2.05em;
    left: 18em;
    background: #E5DCD7;
	margin-left: 0;
}

#nav li li a.focus + ul {
    margin-top: -2.05em;
    left: 18em;
    background: #E5DCD7;
	margin-left: 0;
}

#nav li ul, #nav li li {
    width: 18em;
}

#nav li li a {
    border-top: 1px solid #FFF;
    border-right: 0;
}

#nav li li a:focus, #nav li li a.focus, #nav li li a:hover {
    background-color: #E5DCD7;
}

#nav li li li a {
    color: #000;
    background: #CBB9AE;
}

#nav li li li a:focus, #nav li li li a.focus, #nav li li li a:hover {
    background: #E5DCD7;
}

#nav li a.on {
	color: #333;
}

#nav li li a.more {
	background-image: url(../img/more.gif);
	background-repeat: no-repeat;
	background-position: 16em center;
}

/*Suchfeld */

#search {
    float: right;
    margin: .25em 9px 0 0;
}

#search #input {
    font-size: .75em;
    width: 18em;
    background: #E5DCD7;
    border: 1px solid #999;
}

/* Hauptinhaltsbereich (2 bzw. 3 Spalten)
_____________________________________________________________________________________ */

#main, #home {
    clear: left;
    float: left;
    width: 960px;
    border-bottom: .5em solid #FFF;
}

#main {
    background: url(../img/bg-main.gif) repeat-y;
}

/* Startseiten */

#home {
    background: url(../img/bg-home.gif) repeat-y;
}

#home #content {
    width: 678px;
    padding: 1.5em 18px;
}

#home #content .news {
    border-bottom: 1px solid #CCC;
    margin-bottom: 1.5em;
}

#home #content .meta {
    font-size: .833em;
    line-height: 1.8em;
    font-style: normal;
    text-align: right;
    margin-bottom: -1.8em;
}

#home #content .news a {    
    padding-left: 15px;
    background: url(../img/list.gif) no-repeat left 0em;
    margin: 0 5px 0 0;
}

#home #content .news a:hover {
    /*background-color: #F6EDE8;*/
}

#home #content h2 {
    /*font: Arial;*/	
    font-size: 1em;
	font-weight: bold;
    line-height: 2em;
    color: #000;
    text-transform: none;
    border: 0;
    margin-bottom: 0;
}

#home #thig {
    margin-top: 0;
}

/* Banner Image */

#img {
    overflow: hidden;
    border-bottom: .5em solid #FFF;
}

#main #img {
    height: 144px;
    padding-left: 204px;
}

#main #img img {
    width: 756px;
    height: 144px;
}

#home #img {
    height: 240px;
}

#home #img img {
    width: 960px;
    height: 240px;
}

/* Linke Spalte mit Quicknavigation und Ansprechpartner */

#main #leftbar {
    width: 198px;
    margin-right: 6px;
}

#leftbar .quicknav {
    padding: 0 0 2.5em;
    background: #D0C0B6;
    border-bottom: .5em solid #FFF;
}

#leftbar .quicknav h3 {
	font-size: 0.9em;
    line-height: 2em;
    text-align: left;
    font-weight: bold;
    color: #000;
    background: #D0C0B6;
    padding: 0 9px;
    border-bottom: 1px solid #999;
    margin-bottom: 1em;
}

#leftbar .quicknav li a {
    display: block;
    width: 165px;
    padding-left: 15px;
    background: url(../img/list.gif) no-repeat left .1em;
    margin: 0 9px;
}

#leftbar .quicknav li a:hover {
    background-color: #F6EDE8;
}

#leftbar .contact {
    font-size: .9em;
    line-height: 1.8em;
}

#leftbar .contact h3 {
	font-size: 1.0em;
    line-height: 2em;
    text-align: left;
    font-weight: bold;
    color: #000;
    background: #D0C0B6;
    padding: 0 9px;
    border-bottom: 1px solid #999;
}

#leftbar .contact p {
  	padding: 0 9px 1em 9px;
}

#leftbar .contact a:hover {
    text-decoration: underline;
}

#leftbar .contact img {
    margin: 0 -9px .8em -9px;
}

/* Inhaltsspalte mit Brotkrumen und Hauptinhalt */

#main #center {
    width: 492px;
    padding: .75em 9px;
}

/* Brotkrumen */

#breadcrumb {
    font-size: .8em;
    line-height: 1.8em;
    height: 2em;
    list-style: none;
    padding-left: 0;
    margin-bottom: 1em;
}

#breadcrumb li {
    float: left;	
	display: block;    
    padding: 0 6px;
    border: 0;
    background: url(../img/list.gif) no-repeat -7px center;
}

#breadcrumb li a {    
    color: #666;    
}

#breadcrumb li a:hover {
    text-decoration: underline;
}

/* Hauptinhalt - Artikeltext - Produktseite */

#content h1 {
	font-size: 2em;
    font-weight: normal;
    clear: both;
    color: #C33;
    margin-bottom: .75em;
}

#content h1 img {
	margin-top: .25em;
	margin-bottom: -.5em;
}

#content h2 {
    border-bottom: 1px solid #999;
    margin-bottom: 1.5em;
}

#content hr {    
	display: block;
	height: 0;
	border: 0;
	border-top: 1px solid #CCC;
	margin-bottom: 1.5em;	
}

#content p, #content h3, #content h4, #content div.illu {
    margin-bottom: 1.5em;
	text-align: left;	
}

#content a {    
	color: #C33;
}

#content a:focus, #content a:hover {
    text-decoration: none;    
    border-bottom: 1px solid #C33;
}

#content ul, #content ol {
    padding-left: 36px;
    margin-bottom: 1.5em;
}

#content ul {
    list-style: square;
}

#content ol {
    list-style: decimal;
}

#content table {
    width: 100%;
    border: 1px solid #999;
    border-right: 0;
    margin-bottom: 1.5em;
}

#content th, #content td {
    padding: .3em 9px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

#content th {
    font-variant: small-caps;
    background: #E5DCD7;
    border-bottom: 2px solid #999;
}

#content dd {
    width: 300px;
    padding: 0 9px;
    border-bottom: 1px dashed #CCC;
    margin-left: 150px;
}

#content div.highlight {
    background: #F9F9F9;
    padding: .75em 9px 0;
    border: solid #C99;
    border-width: .5em 6px;
    margin-bottom: 1.5em;
}

#content div.highlight.half {
    float: left;
    width: 210px;
    margin: .25em 18px .75em 0;
}

#content div.highlight.half.right {
    float: right;
    margin: .25em 0 .75em 18px;
}

#content div.highlight ul {
    padding-left: 18px;
}

#content a.mb, #content a:hover.mb {
    text-decoration: none;
	background: none;
    border-bottom: 0px solid #FFF;	
}

#content p img.right {
    float: right;
    margin: .25em 0 .5em 18px;
}

#content div.illu p {
    font-size: .833em;
    line-height: 1.8em;
    font-style: italic;
    color: #666;
    border-top: 1px dotted #999;
    margin: .6em 0 1.2em;
}

#content div.illu p em {
    font-style: normal;
    font-weight: bold;
}

#content div.illu p em:after {
    content: ":";
}

#content div.illu.half {
    float: left;
    max-width: 246px;
    margin: .25em 18px .75em 0;
}

#content div.illu.half.right {
    float: right;
    margin: .25em 0 .75em 18px;
}

/* Rechte Spalte mit Teasern und Thought in Germany Logo */

#rightbar {
    font-size: .833em;
    line-height: 1.8em;
    width: 240px;
    padding: 0 0 .9em;
    margin-left: 6px;
}

#rightbar .box {
    margin-bottom: 1.8em;
}

#rightbar .box img {
    margin: -11px -9px -18px -9px;
}

#rightbar a.rightbar-image {
    display: block;
    padding: 0px;    
}

#rightbar a.rightbar-image:hover {
    text-decoration: none;
}

#rightbar h3 {
	font-size: 1.1em;
    line-height: 2em;
    text-align: left;
    font-weight: bold;
    color: #000;
    background: #D0C0B6;
    padding: 0 9px;
    border-bottom: 1px solid #999;
    margin-bottom: 1em;
}

#rightbar h4 {
    text-align: left;
    font-weight: normal;
    color: #000;    
    padding: 0;
    border-bottom: 1px solid #666;
    margin: 0 9px 0.5em;
}

#rightbar p {
    padding: 0 9px;
}

#rightbar a {
    display: block;
    padding: 0 9px;
    background: url(../img/list.gif) no-repeat -6px center;
}

#rightbar a:hover {
    text-decoration: underline;
}

#rightbar li a {
    height: 1.8em;
    margin: 0 9px;
}

#thig {
    text-align: center;
    padding: 1.8em 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    margin: 7.2em 0 1.5em;
}

#thig a {
    display: inline;
    padding: 0;
    background-image: none;
}

#thig a img {
    border: 1px solid #E5DCD7;
}

#thig a:hover img {
    border: 1px solid #000;
}

#valid {
    padding-left: 28px;    
}

#valid #xhtml, #valid #css {
    float: left;
    width: 80px;
    height: 15px;
    line-height: 15px;
    padding: 0;
    text-indent: -9999px;
}

#valid #xhtml {
    margin-right: 6px;
    background: url(../img/xhtml.gif) no-repeat left top;
}

#valid #css {
    background: url(../img/css.gif) no-repeat left top;
}

#valid #xhtml:hover, #valid #css:hover {
    background-position: left bottom;
}

/* Footer
_____________________________________________________________________________________ */

#footer {
    font-size: .8em;
    line-height: 1.8em;
    height: 2em;
    text-align: right;
    clear: both;
    padding: 1em;
    border-top: .667em solid #FFF;
    margin: 0 246px 0 204px;
    background: #CCC;
}

#footernav li {
    display: inline;
}

#footernav li a {
    padding: 0 3px 0 6px;
    background: url(../img/list.gif) no-repeat -7px center;
}

#footernav li a:hover {
    text-decoration: underline;
}