﻿/** all-media styles */



/* common styles */
html {
	/* always show scrollbar */
	overflow: scroll;
	overflow-x: auto;
}

body {
	color: #000000;
	background-color: #ffffff;
	font-size: 8pt;
	margin: 0;
	padding: 0;
}

body, input, select, table, textarea {
	font-family: 'Lucida Grande', Verdana, sans-serif;
}

input, select, textarea {
	background-color: #ffffff;
	border: 1px solid #cccccc;
	font-size: 1.0em;
	margin-bottom: 0.8em;
}

a {
	outline: none;
}

td, th {
	padding: 0;
	text-align: left;
	vertical-align: top;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}

p {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
}

ul.none li {
	list-style-type: none;
}

/* global block style */

html {
	height:100%;
}

#main {
	position: relative;
	width:100%;
}

#nav, #thesis {
	left: 8px;
	margin-left:10px;
}

#lateral {
	clear: both;
	padding-left: 49px;
	position: absolute;
	bottom: 7px;
	z-index:4;
}

html > body #lateral {
	font-size: 88%;
}

#lateral,
#nav #lateral a, #nav #lateral a:hover, #nav #lateral a:active, #nav #lateral a:visited {
	color: #aaaaaa;
}
#nav #lateral a, #nav #lateral a:visited {
	text-decoration: underline;
}
#nav #lateral a:hover, #nav #lateral a:active {
	text-decoration: none;
}

/* #cards2 is identical to #cards: when content is morphed between old and new cards, #cards2 is needed */
#nav, #thesis {
	position: absolute;
	width: 478px;
	height: 318px;
	margin-bottom: 14px;
}

#cards {
	position: absolute;
	left: 530px;
}

.cardcolumn {
	float:left;
	width:490px;
}

#nav {
/*	z-index:-1; */
	top: 342px;
}

#thesis, #cards {
	top: 10px;
}

.theme {
	display: none;
}

/* card style */

.card {
	margin-bottom: 14px;
	width: 478px;
	float:left;
}

.hiddencard {
	display: none;
}

.cardtype {
	background-color: white;
	width: 470px;
}
.imagecard, .wideimagecard, .smallimagecard, .ar4x3imagecard {
	background-color: transparent;
}

.cardcontainer {
	position: relative;
}

.cardcontent {
	position: relative;
	width: 468px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	min-height: 308px;
}

.wideimagecard .cardcontent {
	min-height: 0;
}
.smallimagecard .cardcontent {
	min-height: 0;
}
.imagecard .cardcontent, .wideimagecard .cardcontent, .smallimagecard .cardcontent, .ar4x3imagecard .cardcontent {
	border: 0 none;
	width: 470px;
}
.imagecard .cardcontent {
	height: 310px;
}
.wideimagecard .cardcontent {
	height: 294px;
}
.smallimagecard .cardcontent {
	height: 184px;
}
.ar4x3imagecard .cardcontent {
	height: 352px;
}
.closedcard .cardcontent,
.staticcard .cardcontent {
	height: 308px;
}

.card img.minheight {
	float: right;
	width: 0px;
}

.js .dynamiccard .contentfadeout {
	background: url('http://s2.cdn.4wd-media.de/images/sprite-bottom.png') no-repeat 0 0;
	height: 15px;
	left: 1px;
	position: absolute;
	width: 468px;
	top: 295px;
}

.card .rightshadow {
	background: url('http://s1.cdn.4wd-media.de/images/sprite-cards-x.png') no-repeat 0 -650px;
	height: 100%;
	width: 8px;
}
.card .bottomshadow {
	background: url('http://s2.cdn.4wd-media.de/images/sprite-bottom.png') no-repeat -478px 0;
	height: 8px;
	width: 478px;
}

.anchor {
	display: block;
	height: 0px;
	position: relative;
	top: -25px;
	width: 10px;
	line-height:0;
	font-size:0;
}

.cardcontent ul {
	margin-left:0;
	margin-bottom:0.8em;
	list-style-position: outside;
	list-style: none;
	background:none;
}
.cardcontent ul li {
	list-style-position: outside;
	list-style: none;
	padding-left:10px;
	background: transparent url('http://s2.cdn.4wd-media.de/images/listenelement.png') 2px 7px no-repeat;
}
.cardcontent ul.none {
	margin-left: 0;
	margin-bottom: 0.8em;
}
.cardcontent ul.none li {
	list-style-type: none;
	background:none;
	padding-left:0;
}

/* card overlay style */

.overlay {
	bottom: 1000px;
	left: 0px;
	position: absolute;
	width: 470px;
}

* html .overlay,
.cardcontent:hover .overlay {
	bottom: 0;
}

.js .cardcontent:hover .overlay,
.js .overlay,
* html .js .overlay {
	bottom: 1000px;
}
.js .static {
	bottom: 0px;
}

.overlayheader {
	background: url('http://s1.cdn.4wd-media.de/images/sprite-cards-x.png') repeat-x 0 0;
	color: #fffffe;
	padding: 6px 10px 6px 15px;
}

.card .overlayheader h1 {
	font-weight: normal;
}

.overlaytext {
	padding: 8px 10px 10px 15px;
}

.overlaytext {
	background: url('http://s1.cdn.4wd-media.de/images/sprite-cards-x.png') repeat-x 0 -310px;
	color: #fffffe;
}

.cardcontent .overlaytext a {
	color: #fffffe;
	border-bottom: 1px dotted #fff;
}

.cardcontent .overlaytext a:hover {
	color: #0061A1;
	border-bottom: 1px dotted transparent;
	background-color: #fffffe;
}

.opencard, .closecard {
	bottom: -21px;
	display: none;
	height: 21px;
	position: absolute;
	right: 20px;
	width: 44px;
}

/* ie6 */
* html .closecard {
	bottom: -22px;
}

.opencard a, .closecard a {
	display: block;
	width:44px;
	height:21px;
}
.opencard a:hover, .closecard a:hover {
	background-position: 0 -21px;
}

.openedcard .closecard,
.closedcard .opencard {
	display: block;
}
.opencard a, .closecard a {
	text-decoration: none;
}

/* navigation specific style */

#nav {
	font-size: 1em;
}

#nav a.logo,
#nav div.logo {
	width: 140px;
	height: 40px;
	background-image: url('http://s2.cdn.4wd-media.de/images/logo-4wd-media.png');
	margin-top: 15px;
	display: block;
}
#nav div.print {
	display: none;
}

#nav1, #nav2, #nav3 {
	display: inline;
	float: left;
	margin-top: 25px;
	margin-left: 38px;
}
#nav1 li, #nav2 li, #nav3 li {
	list-style-position: outside;
	list-style-type: none;
	margin-bottom: 10px;
	margin-left: 10px;
}
#nav1 {
	margin-right: 22px;
}
#nav2 {
	min-width: 100px;
}
#nav3 li {
	margin-left: 0px;
}
#nav3 span {
	color: #bbbbbb;
}

/* filter overlay style */

#filteroverlaywrap, #filteroverlaybottom {
	display: block;
	position: absolute;
	width: 394px;
	right: 0px;
	z-index:3;
}

#filteroverlaywrap {
	height: 290px;
	top: 0;
}

#filteroverlaybottom {
	height: 15px;
}

#filteroverlaywrap, #filteroverlaybottom {
	overflow: hidden;

}
.js #filteroverlaywrap {
/*	z-index: -1; */
	z-index:1;
}

.js #filteroverlaybottom {
	z-index: 0;
}

#filteroverlay {
	position: absolute;
	width: 394px; /* 2px less because of border */
	top: 0px;
	background: transparent url('http://s1.cdn.4wd-media.de/images/sprite-cards-x.png') 387px -650px no-repeat;
}

#innerfilter {
	width: 353px; /* 2px less because of border */
	background-color: #fff;
	border: 1px solid #e5e5e5;
	padding: 16px;
	overflow:auto;
	height: 259px;
}

.overlayhidden #filteroverlay,
.js #filteroverlay {
	top: 284px;
}

.js #innerfilter {
	overflow: hidden; }

.overlayhidden #filteroverlay {
	overflow: hidden;
}

.spalte {
	display: inline;
	float: left;
	width: auto;
}

#actualize {
	background-image: url('http://s3.cdn.4wd-media.de/images/filteroverlay/rotator.gif');
}

#actualize {
	display:none;
}

.js #actualize {
	position: absolute;
	right: 14px;
	top: 7px;
	width: 30px;
	height: 30px;
	display: block;
	line-height: 30px;
	font-size: 1px;
	background-image: url('http://s2.cdn.4wd-media.de/images/filteroverlay/rotator.png');
	/* background-image: url('../images/filteroverlay/rotator.gif') !important; */
	background-position: 0 -30px;
	background-repeat: no-repeat;
}

.js #actualize:hover {
	background-position: 0 0;
}

.js #actualize.loading {
	background-image: url('http://s3.cdn.4wd-media.de/images/filteroverlay/rotator.gif') !important;
	background-position: 0 0 !important;
}

.js #actualize.loading:hover {
	background-position: 0 0;
}

#filteroverlay fieldset {
	border: none;
	margin-left: 0;
	padding-left: 0;
	font-size: 10px;
	width: auto;
	display: inline;

}

#filteroverlay fieldset.fieldsetleft {
	margin-right: 30px;
}

#filteroverlay fieldset.marginbottom {
	margin-bottom: 10px;
}

#filteroverlay legend {
	color: #000;
}

#filteroverlay label {
	display: inline;
	color: #a9a9a9;
	font-size: 10px;
	width: auto;
}

#filteroverlay .label { /* span class for text inside label */
	cursor: pointer;
	width:auto;
}

#filteroverlay .hover,
#filteroverlay .active {
	color:#000;
	width: auto;
}

#filteroverlaybottom {
	width: 394px;
	position: absolute;
	bottom:7px;
	height:21px;
	background: transparent url('http://s2.cdn.4wd-media.de/images/sprite-bottom.png') no-repeat -966px 0;
}

#togglefilter {
	float:right;
	padding-right:0;
	margin-right:0;
	position: relative;
	display: inline;
	height: 14px;
	width: 38px;
	line-height: 14px;
	margin-right: 8px;
	font-size:0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 -14px;
}

#togglefilter:hover {
	background-position: 0 0;
}

.open {
	background-image: url('http://s3.cdn.4wd-media.de/images/closeit.png');
}

.closed {
	background-image: url('http://s1.cdn.4wd-media.de/images/openit.png');
}

/* linkline specific style */

#linkline {
	position: absolute;
	top: 674px;
	left: 8px;
	width: 390px;
	z-index: 1;
	background: url('http://s2.cdn.4wd-media.de/images/linkline/stoerer.png') no-repeat 0 0;
	padding: 20px 0 40px 17px;
	margin-left: 40px;
}
body.hasbackground #linkline {
	background-image: none;
}

.linklineitem {
	display: block;
	width: 28px;
	height: 28px;
	float: left;
	margin-right: 7px;
	margin-top: 34px;
}

.linklineitem a {
	text-decoration: none;
	display: block;
	width: 28px;
	height: 28px;
	background: url('http://s1.cdn.4wd-media.de/images/linkline/sprite-linkline.png') no-repeat 0 -150px;
	padding-top: 3px;
}

.linklinetwitteritem {
	display: block;
	width: 96px;
	height: 62px;
	margin-top: 0;
	margin-right: 40px;
}

.linklinetwitteritem a {
	width: 96px;
	height: 62px;
}

#linkline-digg        { background-position: -48px 3px;}
#linkline-fb          { background-position: -144px 3px;}
#linkline-icio        { background-position: -240px 3px;}
#linkline-linkarena   { background-position: -336px 3px;}
#linkline-mister-wong { background-position: -432px 3px;}
#linkline-stumbleupon { background-position: -528px 3px;}
#linkline-twitter     { background-position: -692px 3px;}

#linkline-digg:hover        { background-position: 0 0;}
#linkline-fb:hover          { background-position: -96px 0;}
#linkline-icio:hover        { background-position: -192px 0;}
#linkline-linkarena:hover   { background-position: -288px 0;}
#linkline-mister-wong:hover { background-position: -384px 0;}
#linkline-stumbleupon:hover { background-position: -480px 0;}
#linkline-twitter:hover     { background-position: -576px 0;}

/* link style */

#nav a, #nav a:visited,
.cardcontent a, .cardcontent:visited {
	color: #6cb4dc;
	text-decoration: none;
}

.cardcontent a/*, .cardcontent:visited */ {
	border-bottom: 1px dotted #6cb4dc;
}

#nav .active a, #nav .active a:visited,
#nav a.active, #nav a.active:visited,
#nav a:hover, #nav a:active,
.cardcontent a.active , .cardcontent a.active:active,
.cardcontent a:hover, .cardcontent a:active {
	color: #0061a1;
	text-decoration: none;
}

.cardcontent a.active , .cardcontent a.active:active,
.cardcontent a:hover, .cardcontent a:active {
	border-bottom: 1px dotted #0061a1;
}

#nav a.spacer {
	margin-bottom:21px;
	display:block;
}

/* content style */

#thesis .cardtext {
	margin: 10px 10px 10px 15px;
}

#thesis h1 {
	color: #777;
	font-size: 1.8em;
	font-weight: normal;
}

#thesis b,
#thesis strong {
	color: black;
}

#thesis .special {
	position: absolute;
	bottom: 0px;
	width: 443px;
}

#thesis .special img {
	float: right;
	margin-left: 10px;
	margin-right: 30px;
	vertical-align: bottom;
}

#thesis .special span {
	position: absolute;
	bottom: 10px;
	width: 80%;
}

.cardtext {
	color: #777;
	margin: 13px 10px 15px 15px;
}

.card h1 {
	font-size: 1.25em;
}

.card h2, .cardtext h3 {
	font-size: 1em;
}

.card h1, .card h2, .card h3 {
	color: black;
	font-weight: bold;
}

.card h1 span,
.card h2 span,
.card h3 span {
	font-weight: normal;
}

.card h1.smallmargin {
	margin-bottom: 0;
}
.card h1 span.glossar {
	color: #777;
	font-size: 0.8em;
}

.overlay h1, .overlay h2, .overlay h3 {
	color: #fffffe;
}

.card,
.card h1,
.card h2,
.card h3 {
	line-height: 150%;
}

.card p,
.cardtext h1,
.cardtext h2,
.cardtext h3 {
	margin-bottom: 0.8em;
}

/* project list */
ul#projectlist {
	margin: 10px 0 0 0;
	padding: 0;
}
ul#projectlist li {
	list-style-type: none;
	margin-bottom: 8px;
	background:none;
	padding-left:0;

}
ul#projectlist li a i {
	font-style: normal;
	color: #777;
}

/* form style */

.js #submit {
	display:none;
}

#contactform label,
#customerareaform label,
#webmailform label {
	width: 150px;
}

#contactform input, #contactform textarea,
#customerareaform input,
#webmailform input {
	background-image: url('http://s1.cdn.4wd-media.de/images/input-control.jpg');
	background-repeat: no-repeat;
	border-top-width: 0;
	border-left-width: 0;
	padding: 5px;
	width: 300px;
}

#contactform textarea {
	height: 100px;
	resize: none;
}

#contactform .brochure textarea {
	height:36px;
	resize: none;
}



#contactform input.submit,
#customerareaform input.submit,
#webmailform input.submit {
	background-image: none;
	border-width: 0;
	color: #6cb4dc;
	padding: 0;
	width: auto;
}
#contactform input.submit:hover,
#customerareaform input.submit:hover,
#webmailform input.submit:hover {
	color: #0061a1;
}

.promoagentur .cardcontent {
	background: url('http://s1.cdn.4wd-media.de/images/promo-sprite.png') 0 0 no-repeat;
	padding-left: 140px;
	width: 328px;
}

.promoleistungen .cardcontent {
	background: url('http://s1.cdn.4wd-media.de/images/promo-sprite.png') -491px 0 no-repeat;
	padding-left: 140px;
	width: 328px;
}

.promonews .cardcontent {
	background: url('http://s1.cdn.4wd-media.de/images/promo-sprite.png') -980px 0 no-repeat;
	padding-left: 140px;
	width: 328px;
}

.promotwitter .cardcontent {
	background: url('http://s1.cdn.4wd-media.de/images/promo-sprite.png') -1959px 0 no-repeat;
	padding-left: 140px;
	width: 328px;
}

.promosponsoring .cardcontent {
	background: url('http://s1.cdn.4wd-media.de/images/promo-sprite.png') -1469px 0 no-repeat;
	padding-left: 140px;
	width: 328px;
}

.vcard .hide {
	display: none;
}

/* Team page */

.portrait .contentleft {
	float:left;
	width: 215px;
}

.portrait .contentright {
	float:right;
	width:215px;
}

.portrait h2 {
}

.portrait h3 {
	margin-bottom:0;
}

/* Sitemap */

.cardcontent .sitemap li {
	margin-bottom:10px;
	background:none;
	padding-left:0;
}

.cardcontent li .sitemap li {
	margin-bottom:0px;
	padding-left:15px;
}

.cardcontent .sitemap a, .sitemap a:hover {
	border-bottom:none;
}

#ilike {
	position: fixed;
	left:1px;
	bottom: 0px;
	opacity: 1;
}

* html #ilike {
	position: absolute;
	bottom: auto;
	top: 636px;
}

/* zitatfarbe */

.citecolor {
	color: black;
}



/* Text Selection */

::-moz-selection {
	color:#fff;
	background-color:#6cb4dc;
}

::selection {
	color:#fff;
	background-color:#6cb4dc;
}


 /*****************/
/** no javascript styles */

.nojs #thesis, .nojs #nav {
	left: 35px;
}
.nojs #cardwrapper {
	left: 530px;
}
.nojs .lazyimg {
	display: none;
}

 /** end no javascript styles */
/*********************/


 /*****************/
/** print styles */
@media print{

#main {
	margin-left: 0 !important;
	width: auto;
}

#nav, #thesis, #cards {
	position: relative !important;
}

#nav, #lateral, #thesis {
	left: 0px !important;
}

#nav {
	top: 0px !important;
}

#nav {
	height: auto;
}
#nav div.logo {
	display: none;
}
#nav div.print {
	display: block;
	background-image: none;
}
#nav1, #nav2, #nav3 {
	float: none;
	margin-top: 5px;
}
#nav li {
	display: none;
}
#nav li.active {
	display: inline;
}

#lateral {
	position: relative;
	margin-top: 15px;
}
#lateral span {
	display: none;
}

#thesis {
	top: 0 !important;
}

#cards {
	top: 0;
}


/* reduce margin between block to fit three image cards on one page */

#nav {
	margin-bottom: 8px;
}
#thesis {
	margin-bottom: 8px;
}
.card {
	margin-bottom: 8px;
}


/* handle cards and hide overlays */

.contentfadeout {
	display: none;
}
.closedcard .cardcontent {
	height: auto;
}
.opencard, .closecard {
	display: none !important;
}
.overlay {
	display: none;
}

.cardcontent {
	overflow: visible;
}
.cardtext {
	padding-right: 15px;
}

.imagecard {
	page-break-inside: avoid;
}
.imagecard .cardcontent img {
	display: block;
	position: absolute;
}


/* text color back to black */

#nav a, #nav a:visited,
#nav .active a, #nav .active a:visited,
.cardcontent a, .cardcontent:visited {
	color: black;
	text-decoration: underline;
}

#lateral {
	color: black;
}

#thesis h1 {
	color: black;
}

.cardtext {
	color: black;
}
.card h1 span.glossar {
	color: black;
}

}
 /** end print styles */
/*********************/


 /*************************/
/* jquery-checkboxes.css */
.jquery-checkbox       { display: inline; font-size: 18px; line-height: 18px; cursor: pointer; cursor: hand; }
.jquery-checkbox .mark { display: inline; }

.jquery-checkbox img { vertical-align: middle; width: 15px; height: 18px; }
.jquery-checkbox img { background: transparent url('http://s1.cdn.4wd-media.de/images/filteroverlay/inputs.png') no-repeat; }

.jquery-checkbox img{
	background-position: 0px -54px;
}
.jquery-checkbox-hover img{
	background-position: 0px -72px;
}
.jquery-checkbox-checked img {
	background-position: 0px -90px;
}
.jquery-checkbox-checked .jquery-checkbox-hover img {
	background-position: 0px -90px;
}
/*
.jquery-checkbox-disabled img{
	background-position: 0px -80px;
}
.jquery-checkbox-checked .jquery-checkbox-disabled img{
	background-position: 0px -100px;
}
*/
.jquery-radio       { display: inline; font-size: 18px; line-height: 18px; cursor: pointer; cursor: hand; }
.jquery-radio .mark { display: inline; }

.jquery-radio img { vertical-align: middle; width: 15px; height: 18px; }
.jquery-radio img { background: transparent url('http://s1.cdn.4wd-media.de/images/filteroverlay/inputs.png') no-repeat; }

.jquery-radio img {
	background-position: 0px 0px;
}
.jquery-radio-hover img{
	background-position: 0px -18px;
}
.jquery-radio-checked img{
	background-position: 0px -36px;
}
.jquery-radio-checked .jquery-radio-hover img {
	background-position: 0px -36px;
}
/*
.jquery-radio-disabled img{
	background-position: 0px -80px;
}
.jquery-radio-checked .jquery-radio-disabled img{
	background-position: 0px -100px;
}
*/

