@charset "utf-8";
/**
 **************************************************
 * HDNET / hdnet.de
 * main.css
 *
 * @author: HDNET GmbH & Co. KG
 * @version: 3.0
 * @updated: 2011-07-07 (AH)
 **************************************************
**/




/**
 **************************************************
 GENERAL DEFINITIONS
 *
 * @description: define the basic appearance of the site
 **************************************************
**/
html {
	height:100%;
	/*Defaults to ~16px across browsers*/
	/*font-size:100.01%;*/
	/*Defaults to ~12px across browsers*/
	font-size:75.01%;
}

body {
	height:100%;
	font-family:verdana,arial,tahoma,sans-serif;
	font-size:1.0em;
	/*line-height calculates to 18px (~12px * 1.5 = ~18px)*/
	line-height:1.5em;
	color:#333;
	/*Testing the text-rythm at ~18px*/
	background:#e4e4e4;
}

h1 {
	font-family:'Regular',verdana;
	font-size:1.8em; /*~22px*/
	line-height:1.1em; /*~25px*/
	margin-bottom:0.75em;
	color:#ca1d28;
}

h2 {
	font-size:1.5em; /*~18px*/
	line-height:1.3em; /*~23,4px*/
	margin-bottom:0.25em;
	color:#ca1d28;
}

h3 {
	font-size:1em; 
	line-height:1.1em;
	font-weight:bold;
	margin-bottom:0.25em;
}

h4,h5,h6 {
	font-size:1.0em;
	font-weight:bold;
	margin-bottom:0.25em;
}

h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {
	display:none;
}

p,ol,ul,dl {
	margin-bottom:1.5em;
}

ul {
	padding-left:13px;
	list-style:disc outside;
}

ol {
	padding-left:26px;
	list-style:decimal-leading-zero outside; 
}

dt {
	font-weight:bold;
}

a {
	color:#ca1d28;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a.arrow {
	padding-left:10px;
	background-image:url(../img/ico-arrow-ca1d28-5.gif);
	background-repeat:no-repeat;
	background-position:0 5px;
	text-decoration:underline;
}

a.arrow strong,
a.arrow b,
a.arrow:hover {
	text-decoration:none;
}


strong,b {
	font-weight:bold;
}

em,i {
	font-style:italic;
}

hr {
	clear:both;
	/*Only chance to get the standard visuals away*/
	border-width:0;
	border-bottom:1px dotted #c4c4c4;
}

table {
	font-size:1em;
}

table caption {
	font-weight:bold;
	padding:0 0 3px 3px;
}

table tr {
}

table th,
table td {
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:1px solid #fff;
	vertical-align:top;
}

table th {
	padding-right:17px;
	border-right:1px solid #fff;
	font-weight:bold;
	color:#ca1d28;
}

table td {
	padding-left:17px;
	padding-right:15px;
}

table tr.first th,
table tr.tr-0 th,
table tr.first td,
table tr.tr-0 td {
	padding-top:0;
}

table tr.last th,
table tr.tr-last th,
table tr.last td,
table tr.tr-last td {
	padding-bottom:0;
	border-bottom:0;
}

table p {
	margin-bottom:0;
}

table a {
	text-decoration:underline;
}

form {
}

form legend {
	display:none;
}

form label {
	display:block;
	margin-bottom:6px;
	font-size:1.15em;
}

form label.send {
	float:left;
	width:245px;
	margin:5px 0 0 25px;
	font-size:1em;
	line-height:1.2em;
	color:#959595;
}

form label em {
	font-style:normal;
	color:red;
}

form input.text,
form input.checkbox,
form input.radio,
form select,
form textarea {
	width:auto;
	height:35px;
	padding:5px 15px 0 15px;
	border:1px solid #fff;
	margin:0 0 8px 0;
	font:inherit; /* takes lucida here */
	font-size:20px;
	color:#666;
	background:url(../img/buttons.png) no-repeat;
}

form textarea {
	width:370px;
	height:101px;
	padding:0;
	border:0;
	margin:0;
	line-height:1em;
	background:transparent;
}

/* BEN: FF 3.6X seems to have std-bg-color now. Overriding */
form select {
	background-color:#fff;
}

form input.text {
	width:370px;
	background-position:0 -269px;
}

form input.hover {
	background-position:0 -312px;
}

form div.textarea {
	width:370px;
	padding:15px;
	height:101px;
	border:1px solid #fff;
	margin:0;
	margin-bottom:8px;
	background:url(../img/textarea-small-bg.png) 0 0 no-repeat;
}

form div.hover {
	background-position:-402px 0;
}

form input.checkbox,
form input.radio {
	width:auto;
	height:auto;
	border:0 none;
	margin:3px 0 5px 1px;
}

form select {
	/* Selects have wrong box model. Add all paddings/margins/borders from above */
	width:200px;
	height:21px;
	padding:0;
}

/* Selects with a defined size (listboxes) */
form select.listbox {
	height:auto;
}


form input.submit,
form input.reset,
form input.button {
	float:left;
	height:40px;
	padding-left:15px;
	padding-right:15px;
	line-height:40px;
	border:1px solid #0f5500;
	margin:0 0 5px 0;
	font-weight:bold;
	font-size:1.2em;
	color:#fff;
	outline:none;
	background:url(../img/buttons.png) 0 -1301px no-repeat;
}

form .upload {
	position:relative;
	width:402px;
}

.realupload {
	position:absolute;
	top:26px;
	right:0;
	height:41px;
	/* start of transparency styles */
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity:0);
	/* end of transparency styles */
	z-index:2; /* bring the real upload interactivity up front */
	width:270px;
}

form .fakeupload {
	height:42px;
	background:url(../img/buttons.png) right -1382px no-repeat;
}

form .fakeupload input.text {
	float:left;
	width:229px;
	background:url(../img/buttons.png) 0 -1342px no-repeat;
}

form .fakeupload span {
	display:inline-block;
	float:right;
	width:101px;
	height:42px;
	padding-left:15px;
	padding-right:15px;
	line-height:42px;
	font-family:lucida grande, verdana;
	font-weight:bold;
	font-size:1.2em;
	color:#fff;
	text-align:center;
}

form p {
	clear:left;
	margin-bottom:0;
}

form p.formNotice,
form p.error {
	margin-top:29px;
	font-size:1em;
	line-height:1.2em;
}



/**
 **************************************************
 LAYOUT
 *
 * @description: building the design
 **************************************************
**/
#page {
	position:relative;
	width:950px;
	padding-left:40px;
	padding-bottom:25px;
	margin:0 auto;
}

#header {
	position:relative;
	width:950px;
	height:auto;
	padding:60px 0 20px 0;
	z-index:5;
}

h1#logo {
	position:absolute;
	top:29px;
	left:-40px;
	z-index:2;
}

ul#navMain {
	position:relative;
	width:950px;
	height:40px;
	background:transparent url(../img/navigation-bg.png) no-repeat;
	z-index:5;
}

#navSubWrap {
	position:relative;
	width:950px;
	height:42px;
	margin-top:-3px;
	background:transparent url(../img/navigation-bg.png) 0 -85px no-repeat;
}

ul#navBreadcrumb {
	float:left;
	width:auto;
	height:23px;
	padding:0 25px 0 25px;
	margin:8px 20px 0 0;
	list-style:none;
	font-size:.9em;
	font-weight:bold;
	color:#333;
	background:url(../img/navigation-bg.png) 0 -130px no-repeat;
}

ul#navSub {
	float:left;
	width:auto;
	margin:10px 0 0 0;
	list-style:none;
	font-size:.9em;
	font-weight:bold;
}

.media {
	position:relative;
	width:950px;
	height:175px;
	background:url(../img/media-red.jpg) top left no-repeat;
}

#contentArea {
	position:relative;
	width:900px;
	padding:20px 25px 25px 25px;
	background:#fff;
	z-index:2;
}

body.alt #contentArea {
	background:#fff url(../img/box-bg.png) -8210px 0 no-repeat;
}

#footer {
	position:relative;
	width:900px;
	padding:25px;
	margin-top:20px;
	background:#fff;
}




/**
 **************************************************
 LAYOUT SPECIFIC (LOGO,NAVIGATION...)
 *
 * @description: detailed formatting of the basic elements
 **************************************************
**/
/* *** LOGO *** */
h1#logo a {
	border:0;
}


/* *** MAIN NAVIGATION *** */ 
ul#navMain,
ul#navMain ul {
	padding:0;
	margin-bottom:0;
	list-style:none;
	font-family:'Demi Bold Cond',verdana;
}

ul#navMain li {
	position:relative;
	float:left;
	width:136px;
	height:40px;
}

ul#navMain li.last {
	width:134px;
}

ul#navMain a {
	display:block;
	width:136px;
	height:27px;
	padding-top:13px;
	border:0;
	color:#fff;
	font-size:1.1em;
	line-height:1.1em;
/*	font-weight:bold;*/
	text-align:center;
	text-decoration:none;
	background:transparent;
}

ul#navMain li.last a {
	width:134px;
}

ul#navMain a:hover,
ul#navMain a.act {
	color:#333;
	text-decoration:none;
	background:url(../img/navigation-bg.png) -136px -45px no-repeat;
}

ul#navMain li.first a:hover,
ul#navMain li.first a.act {
	background:url(../img/navigation-bg.png) 0 -45px no-repeat;
}

ul#navMain li.last a:hover,
ul#navMain li.last a.act {
	background:url(../img/navigation-bg.png) -816px -45px no-repeat;
}

/* level 2 */
ul#navMain li ul {
	display:none;
	position:absolute;
	font-family:verdana,arial,tahoma,sans-serif;
}

ul#navMain li ul.lvl2 {
	top:40px;
	left:0;
}

ul#navMain li:hover ul.lvl2,
ul#navMain li.hover ul.lvl2 {
	display:block;
}

ul#navMain li ul.lvl2 li {
	position:relative;
	float:none;
	width:225px;
	height:auto;
	padding:0;
	border:1px solid #a6a6a6;
	border-top:0;
	margin:0;
}

ul#navMain ul.lvl2 li.first {
	border-top:1px solid #a6a6a6;
}

ul#navMain li ul.lvl2 li a {
	width:190px;
	height:auto;
	padding:5px 15px 5px 20px;
	text-align:left;
/*	font-weight:bold;*/
	font-size:.9em;
	color:#333;
	background:#efefef;
}

ul#navMain li ul.lvl2 li a:hover,
ul#navMain li ul.lvl2 li a.act {
	background:#ffffff url(../img/ico-arrow-right-a6a6a6-5.gif) left 7px no-repeat;
}


/* level 3 */
ul#navMain ul.lvl3 {
	display:none;
	top:-1px;
	left:225px;
}

ul#navMain ul.lvl2 li:hover ul.lvl3,
ul#navMain ul.lvl2 li.hover ul.lvl3 {
	display:block;
}

ul#navMain li ul.lvl3 li a {
	font-weight:normal;
}


/* *** BREADCRUMB NAVIGATION *** */ 
ul#navBreadcrumb li {
	float:left;
	margin:2px 10px 0 0;
}

ul#navBreadcrumb li.last {
	margin-right:0;
	background:none;
}

ul#navBreadcrumb a {
	padding-right:16px;
	color:#333;
	background:url(../img/navigation-bg.png) right -235px no-repeat;
}

ul#navBreadcrumb li.last a {
	padding-right:0;
	background:none;
}


/* *** SUB NAVIGATION *** */ 
ul#navSub {
	padding:0;
	margin-bottom:0;
	list-style:none;
	background:#fff;
}

ul#navSub li {
	float:left;
	margin:0 10px 0 0;
}

ul#navSub li.last {	
	margin-right:0;
}

ul#navSub a {
	padding-right:12px;
	color:#adadad;
	background:url(../img/navigation-bg.png) right -249px no-repeat;
}

ul#navSub li.last a {	
	padding-right:0;
	background:none;
}

ul#navSub li.act a {
	color:#ca1d28;
}


/* *** FOOTER *** */
#footer p.copy {
	position:absolute;
	top:25px;
	left:25px;
	font-weight:bold;
	color:#585858;
}

/* social nav */
ul#navSocial {
	position:relative;
	padding-left:0;
	margin-top:20px;
	margin-bottom:0;
	list-style:none;
}

ul#navSocial li.fbLike {
	float:right;
	width:420px;
	height:30px;
	margin:54px 0 0 15px;
}

ul#navSocial li.tuev {
	float:left;
	width:85px;
	height:81px;
	margin:0 9px 0 0;
	background:url(../img/navigation-bg.png) left -165px no-repeat; 
}

ul#navSocial li.googlecert {
	float:left;
	width:52px;
	height:49px;
	margin:30px 9px 0 0;
	background:url(../img/navigation-bg.png) -99px -194px no-repeat; 
}

ul#navSocial li.google {
	float:left;
	margin-top:54px;
	margin-left:200px;
}

ul#navSocial li a {
	display:block;
	text-indent:-9999em;
}

ul#navSocial li.tuev a {
	width:85px;
	height:81px;
}

ul#navSocial li.googlecert a {
	width:52px;
	height:49px;
}


/* misc nav */
ul#navMisc {
	position:absolute;
	top:25px;
	right:25px;
	padding:0;
	margin-bottom:0;
	list-style:none;
	font-size:0.95em;
}

ul#navMisc li {
	float:left;
	margin-right:70px;
	font-weight:bold;
}

ul#navMisc li.last {
	margin-right:0;
}

ul#navMisc a {
	color:#717171;
}

ul#navMisc ul {
	padding-left:0;
	margin-bottom:0;
	list-style:none;	
}

ul#navMisc ul li {
	float:none;
	margin-right:0;
	font-weight:normal;
}




/**
 **************************************************
 CSS STYLED CONTENT
 *
 * @description: just a copy from the extension output
 * @beware: margins to text that are set here have to be changed in TS constants too
 **************************************************
**/
div.csc-textpic-caption-c .csc-textpic-caption {
	text-align:center;
}
div.csc-textpic-caption-r .csc-textpic-caption {
	text-align:right;
}
div.csc-textpic-caption-l .csc-textpic-caption {
	text-align:left;
}
/* Needed for noRows setting */
div.csc-textpic div.csc-textpic-imagecolumn {
	float:left;
	display:inline;
}
/* Border just around the image */
div.csc-textpic-border div.csc-textpic-imagewrap .csc-textpic-image img {
	border:2px solid black;
	padding:0px 0px;
}
div.csc-textpic-imagewrap {
	padding:0;
}
div.csc-textpic img {
	border:0 none;
}
/* DIV:This will place the images side by side */
div.csc-textpic div.csc-textpic-imagewrap div.csc-textpic-image {
	float:left;
}
/* ul:This will place the images side by side */
div.csc-textpic div.csc-textpic-imagewrap ul {
	list-style:none;
	margin:0;
	padding:0;
}
div.csc-textpic div.csc-textpic-imagewrap ul li {
	float:left;
	margin:0;
	padding:0;
}
/* DL:This will place the images side by side */
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image {
	float:left;
}
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dt {
	float:none;
}
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd {
	float:none;
}
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd img {
	border:0 none;
}
/* FE-Editing Icons */
dl.csc-textpic-image {
	margin:0;
}
dl.csc-textpic-image dt {
	margin:0;
	display:inline;
}
dl.csc-textpic-image dd {
	margin:0;
}
/* Clearer */
div.csc-textpic-clear {
	clear:both;
}
/* Margins around images:*/

/* Pictures on left, add margin on right */
div.csc-textpic-left div.csc-textpic-imagewrap .csc-textpic-image,div.csc-textpic-intext-left-nowrap div.csc-textpic-imagewrap .csc-textpic-image,div.csc-textpic-intext-left div.csc-textpic-imagewrap .csc-textpic-image {
	display:inline; /* IE fix for double-margin bug */
	margin-right:10px !important;
}
/* Pictures on right, add margin on left */
div.csc-textpic-right div.csc-textpic-imagewrap .csc-textpic-image,div.csc-textpic-intext-right-nowrap div.csc-textpic-imagewrap .csc-textpic-image,div.csc-textpic-intext-right div.csc-textpic-imagewrap .csc-textpic-image {
	display:inline; /* IE fix for double-margin bug */
	margin-left:10px;
}
/* Pictures centered, add margin on left */
div.csc-textpic-center div.csc-textpic-imagewrap .csc-textpic-image {
	display:inline; /* IE fix for double-margin bug */
	margin-left:10px;
}
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption {
	margin:0;
}
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image img {
	margin:0;
}
/* Space below each image (also in-between rows) */
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image {
	margin-bottom:10px;
}
div.csc-textpic-equalheight div.csc-textpic-imagerow {
	margin-bottom:0px;
	display:block;
}
div.csc-textpic div.csc-textpic-imagerow {
	clear:both;
}

div.csc-textpic div.csc-textpic-imagerow div.csc-textpic-image {
	margin-bottom:10px;
}
/* No margins around the whole image-block */
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-firstcol {
	margin-left:0px !important;
}
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-lastcol {
	margin-right:0px !important;
}
/* Add margin from image-block to text (in case of "Text w/ images") */
div.csc-textpic-intext-left div.csc-textpic-imagewrap,div.csc-textpic-intext-left-nowrap div.csc-textpic-imagewrap {
	margin-right:10px !important;
	margin-top:2px;
}
div.csc-textpic-intext-right div.csc-textpic-imagewrap,div.csc-textpic-intext-right-nowrap div.csc-textpic-imagewrap {
	margin-left:10px !important;
	margin-top:2px;
}
/* Positioning of images:*/

/* Above */
div.csc-textpic-above div.csc-textpic-text {
	clear:both;
}
/* Center (above or below) */
div.csc-textpic-center {
	text-align:center; /* IE-hack */
}
div.csc-textpic-center div.csc-textpic-imagewrap {
	margin:0 auto;
}
div.csc-textpic-center div.csc-textpic-imagewrap .csc-textpic-image {
	text-align:left; /* Remove IE-hack */
}
div.csc-textpic-center div.csc-textpic-text {
	text-align:left; /* Remove IE-hack */
}
/* Right (above or below) */
div.csc-textpic-right div.csc-textpic-imagewrap {
	float:right;
}
div.csc-textpic-right div.csc-textpic-text {
	clear:right;
}
/* Left (above or below) */
div.csc-textpic-left div.csc-textpic-imagewrap {
	float:left;
}
div.csc-textpic-left div.csc-textpic-text {
	clear:left;
}
/* Left (in text) */
div.csc-textpic-intext-left div.csc-textpic-imagewrap {
	float:left;
}
/* Right (in text) */
div.csc-textpic-intext-right div.csc-textpic-imagewrap {
	float:right;
}
/* Right (in text, no wrap around) */
div.csc-textpic-intext-right-nowrap div.csc-textpic-imagewrap {
	float:right;
	clear:both;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.csc-textpic-intext-right-nowrap .csc-textpic-text {
	height:1%;
}
/* End hide from IE5/mac */

/* Left (in text, no wrap around) */
div.csc-textpic-intext-left-nowrap div.csc-textpic-imagewrap {
	float:left;
	clear:both;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.csc-textpic-intext-left-nowrap .csc-textpic-text {
	height:1%;
}
/* End hide from IE5/mac */
div.csc-textpic div.csc-textpic-imagerow-last {
	margin-bottom:0;
}

div.csc-textpic div.csc-textpic-imagerow-last div.csc-textpic-image {
	margin-bottom:0;
}

/* Subheader */ 
p.csc-subheader {
	margin-top:-15px;
	font-weight:bold;
}



/**
 **************************************************
 LAYOUT SPECIFIC CHANGES OF BASE FORMATS
 *
 * @description: overwrite base formats depending on layout
 **************************************************
**/
#contentArea h2 {
	font-size:1.1em;
	font-weight:bold;
}

#contentArea .c215 h2 {
	font-size:1em;
}

#contentArea .lastCol h2 {
	padding-left:13px;
}

#contentArea ul {
	padding-left:0;
	list-style:none;
}

#contentArea ul li {
	padding:0 0 5px 20px;
	background-image:url(../img/ico-circle-arrow-ca1d28-13.gif);
	background-repeat:no-repeat;
	background-position:0 4px;
}

#contentArea p {
	line-height:1.75em;
}

p.csc-textpic-caption {
	font-size:.9em;
	color:#717171;
}


.c440 .csc-frame-frame2 div.csc-textpic-imagewrap {
	position:relative;
	margin-left:-25px;
	margin-bottom:15px;
}

#contentArea .c440 .csc-frame-frame2 div.csc-textpic-imagewrap p.csc-textpic-caption {
	position:absolute;
	left:25px;
	bottom:10px;
	padding:2px 5px 2px 5px;
	margin-right:25px;
	line-height:1.3em;
	background:#ffffff;
}




/**
 **************************************************
 BOX GENERAL
 *
 * @description: defines all general boxes for the
 * different columns
 **************************************************
**/
.box {
	position:relative;
	margin-bottom:10px;
	background:#f3f3f3;
}

#contentArea .box .content ul {
	padding-left:0;
	list-style:none;
	font-size:.9em;
	line-height:1.3em;
}

#contentArea .box .content ul li {
	padding-left:15px;
	background-image:url(../img/ico-arrow-ca1d28-5.gif);
	background-repeat:no-repeat;
	background-position:0 5px;
}

#contentArea .box .content p {
	line-height:1.5em;
}

.box .content p.csc-textpic-caption {
}

.box .content {
	padding:15px 15px 0 15px;
	background:url(../img/box-bg.png) -4310px 0 no-repeat;
}

.box .foot {
	height:10px;
	font-size:0;
	background:url(../img/box-bg.png) -5215px 0 no-repeat;
}


/* *** 585 *** */
.c585 .box .content {
	background:url(../img/box-bg.png) -3130px 0 no-repeat;
}

.c585 .box .foot {
	background:url(../img/box-bg.png) -3720px 0 no-repeat;
}


/* *** 440 *** */
.c440 .box .content {
	background:url(../img/box-bg.png) 0 0 no-repeat;
}

.c440 .box .foot {
	background:url(../img/box-bg.png) -445px 0 no-repeat;
}


/* *** 360 *** */
.c360 .box .content {
	background:url(../img/box-bg.png) -2400px 0 no-repeat;
}

.c360 .box .foot {
	background:url(../img/box-bg.png) -2765px 0 no-repeat;
}


/* *** 295 *** */
.c295 .box .content {
	background:url(../img/box-bg.png) -1800px 0 no-repeat;
}

.c295 .box .foot {
	background:url(../img/box-bg.png) -2100px 0 no-repeat;
}


/* *** 230 *** */
.c230 .box .content {
	background:url(../img/box-bg.png) -890px 0 no-repeat;
}

.c230 .box .foot {
	background:url(../img/box-bg.png) -1125px 0 no-repeat;
}

.c230.firstCol .box .content {
	padding-left:25px;
	background:url(../img/box-bg.png) -6120px 0 no-repeat;
}

.c230.firstCol .box .foot {
	background:url(../img/box-bg.png) -6355px 0 no-repeat;
}

.c230.lastCol .box .content {
	padding-right:25px;
	background:url(../img/box-bg.png) -6590px 0 no-repeat;
}

.c230.lastCol .box .foot {
	background:url(../img/box-bg.png) -6825px 0 no-repeat;
}


/* *** 215 *** */
.c215 .box .content {
	background:url(../img/box-bg.png) -1360px 0 no-repeat;
}

.c215 .box .foot {
	background:url(../img/box-bg.png) -1580px 0 no-repeat;
}


/* *** SPECIAL BOX for references on content pages *** */
.csc-frame-indent6633 .box .foot {
	display:none;
}

.csc-frame-indent6633 .box,
.csc-frame-indent6633 .box .content {
	background:none;
}

.csc-frame-indent6633 .box .content {
	padding:0;
}

.csc-frame-indent6633 .box .content .csc-textpic-image {
	position:relative;
	padding:5px;
	background:#f3f3f3 url(../img/box-content-references-bg.gif) left bottom no-repeat;
}

.csc-frame-indent6633 .box .content .csc-textpic-image p {
	padding:5px 0 5px 0;
	color:#333333;
}

.lastCol .csc-frame-indent6633 {
	width:230px;
	margin-right:-35px;
}

.lastCol .csc-frame-indent6633 .box,
.lastCol .csc-frame-indent6633 .box .content .csc-textpic-imagewrap {
	margin-right:-10px;
}

.lastCol .csc-frame-indent6633 .box,
.lastCol .csc-frame-indent6633 .box .content {
	padding:0;
	background:none;
}

.lastCol .csc-frame-indent6633 .box .content .csc-textpic-image {
	padding:2px 0 2px 2px;
	background:#e4e4e4;
}

.lastCol .csc-frame-indent6633 .box .content .csc-textpic-image p {
	display:inline-block;
	position:absolute;
	bottom:2px;
	left:2px;
	padding:2px 5px 2px 10px;
	margin-right:5px;
	background:#e4e4e4;
}




/**
 **************************************************
 BOX LISTING
 *
 * @description: for feature listings on entry pages
 **************************************************
**/
.listing .content {
	padding:20px 20px 0 20px;
}

.listing .content h2 {
	margin-bottom:20px;
	font-size:1.1em;
	font-weight:bold;
}

.listing .content h3 {
	font-size:1em;
	font-weight:bold;
	margin-bottom:3px;
}

#contentArea .listing .content ul {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
	font-size:1em;	
}

#contentArea .listing .content ul li {
	padding-left:45px;
	background-image:url(../img/ico-tick-ca1d28-28.png);
	background-repeat:no-repeat;
	background-position:0 3px;
}

/* *** 215 (benefits and solutions) *** */
.c215 .listing .content {
	padding-right:10px;
	font-size:.9em;
}

.c215 .listing .content h2,
.c215 .listing .content h3 {
	padding-left:0;
	font-size:1em;
	font-weight:bold;
}




/**
 **************************************************
 BOX FEEDBACK
 *
 * @description: defines client feedback boxes for the
 * different columns - overriding box general
 **************************************************
**/
.feedback .content {
	padding-left:20px;
	padding-right:20px;
}

.feedback .content .client {
	position:absolute;
	top:10px;
	right:20px;
}

#contentArea .feedback .content h2,
.feedback .content h3 {
	margin-bottom:5px;
	text-align:right;
	font-size:1em;
	color:#333;
	line-height:1em;
	font-weight:bold;
}

.feedback .content h3 {
	margin-bottom:0;
	font-weight:normal;
}

.feedback .content blockquote {
	margin-top:60px;
}

.feedback .content p {
	margin-bottom:0;
	font-size:.9em;
	line-height:1.4em;
	font-style:italic;
}

/* *** 230 *** */
.c230 .feedback .content {
	background:url(../img/box-bg.png) -7060px 0 no-repeat;
}

.c230.firstCol .feedback .content {
	background:url(../img/box-bg.png) -7295px 0 no-repeat;
}

.c230.lastCol .feedback .content {
	background:url(../img/box-bg.png) -7530px 0 no-repeat;
}

/* *** 440 *** */
.c440 .feedback .content {
	background:url(../img/box-bg.png) -7765px 0 no-repeat;
}




/**
 **************************************************
 BOX CONTACTPERSON
 *
 * @description: defines contact person boxes in
 * general - for color overrides look into the 
 * specified css files
 **************************************************
**/
.contactPerson {
	padding-top:0;
	color:#fff;
	background:none;
}

.contactPerson a {
	padding-left:20px;
	background:url(../img/ico-circle-arrow-right-13.png) 0 2px no-repeat;
	color:#fff;
	font-weight:bold;
	line-height:1.4em;
	text-decoration:underline;
}

.c215 .contactPerson img {
	float:none;
	margin-bottom:0;
	margin-right:0;
}

.c215 .contactPerson .content {
	float:none;
	padding-top:10px;
	background:#ca1d28;
}

.c215 .contactPerson .foot {
	background:url(../img/box-colored-bg.png) -220px 0 no-repeat;
}

#contentArea .contactPerson h2,
.contactPerson h3 {
	font-size:1em;
	line-height:1.2em;
	font-weight:normal;
	color:#fff;
}

#contentArea .contactPerson h2 {
	padding-left:0;
	line-height:1.3em;
	font-weight:bold;
}

.contactPerson p {
	margin-bottom:.4em;
	line-height:1.3em;
}

#contentArea .contactPerson .content ul {
	padding-left:0;
	margin-bottom:5px;
	list-style:none;
	font-size:1em;
}

#contentArea .contactPerson .content ul li {
	float:left;
	padding:0 6px 0 0;
	border-right:1px solid #fff;
	margin-right:6px;
	line-height:1.05em;
	background-image:none;
}

#contentArea .contactPerson ul li.last {
	padding-right:0;
	border-right:0;
	margin-right:0;
}

.c440 .referenceContact {
	height:165px;
	background:url(../img/box-reference-contact-bg.png) top right no-repeat;
}

.c440 .referenceContact .media {
	float:left;
	width:215px;
	height:auto;
	padding:0;
}

.c440 .referenceContact .content {
	position:relative;
	float:left;
	width:190px;
	height:130px;
	padding-left:20px;
	background:none;
}

#contentArea .referenceContact h2,
#contentArea .referenceContact h3 {
	margin-bottom:10px;
}

#contentArea .referenceContact .content a {
	position:absolute;
	bottom:0;
}



/**
 **************************************************
 BOX ACCORIDON
 *
 * @description: for feature listings on pages
 **************************************************
**/
.accordion {
	background:none;
}

.accordion h3 {
	height:24px;
	margin-top:0;
	margin-bottom:1px;
	font-size:1em;
	line-height:1em;
	font-weight:normal;
	color:#fff;
	background:url(../img/buttons.png) 0 -162px no-repeat;
}

.accordion h3 a {
	display:block;
	height:19px;
	padding:5px 25px 0 13px;
	margin-right:10px;
	color:#fff;
	text-decoration:none;
	background:url(../img/ico-circle-arrow-up-13.png) right 5px no-repeat;	
}

.accordion h3.current a {	
	background:url(../img/ico-circle-arrow-down-13.png) right 5px no-repeat;	
}

.accordion div {
	display:none;
	padding:5px 10px 5px 13px; 
	font-size:.9em;
	background:#f3f3f3 url(../img/box-bg.png) -1580px bottom no-repeat;
}




/**
 **************************************************
 BOX IMAGES
 *
 * @description: for images of references
 **************************************************
**/
.images {
	background:none;
}

.referenceImages {
	margin-top:-15px;
	margin-right:-25px;
	margin-left:-25px;
	z-index:2;
}

.images .detail {
	position:relative;
	width:440px;
	height:275px;
	margin-bottom:7px;
}

.images .detail .item {
	display:none;
	position:absolute;
	width:440px;
	height:275px;
	overflow:hidden;
}

.images .detail .item a {
	display:block;
	width:438px;
	height:273px;
	overflow:hidden;
	border:1px solid #e4e4e4;
}

.referenceImages .detail,
.referenceImages .detail .item,
.referenceImages .detail .item a {
	width:950px;
	height:345px;
	border:0;
	z-index:10;
}

#contentArea .images ul {
	padding-left:0;
}

#contentArea .referenceImages ul {
	display:inline-block;
	position:relative;
	float:right;
	z-index:15;
	padding:10px;
	margin:-50px 15px 0 0;
	background:#fff;
}

#contentArea .noThumbs ul {
	display:none;
}

#contentArea .images ul li {
	position:relative;
	float:left;
	width:105px;
	height:71px;
	padding:0;
	margin-right:7px;
	overflow:hidden;
	background:none;
}

#contentArea .images ul li.last {
	margin-left:-1px;
	margin-right:0;
}

.images ul li a {
	display:block;
	width:103px;
	height:69px;
	border:1px solid #e4e4e4;
	overflow:hidden;
	cursor:pointer;
}

.images ul li div {
	position:absolute;
	top:1px;
	left:1px;
	width:103px;
	height:69px;
	cursor:pointer;
}

.images ul li div.act {
	background:url(../img/box-images-thumb-over.png) top left no-repeat;
}

.images ul li div.hover {
	display:none;
	top:0;
	left:0;
	border:1px solid #9a9c9c;
}




/**
 **************************************************
 BOX REFERENCE / TEAMMEMBER TEASER
 *
 * @description: describes the reference and the
 * teammember teaser
 **************************************************
**/
.referenceTeaser {
	height:255px;
	background:#eeeeee;
}

.teamTeaser {
	height:210px;
}

.referenceTeaser .media {
	position:relative;
	width:310px;
	height:175px;
	padding:0;
	cursor:pointer;
}

.referenceTeaser .media a {
	display:block;
	width:310px;
	height:175px;
}

.teamTeaser .media,
.teamTeaser .media a {
	width:230px;
	height:130px;
}

.referenceTeaser .media div.mask {
	position:absolute;
	top:0;
	left:0;
}

.referenceTeaser .media div.mask {
	width:310px;
	height:175px;
	background:url(../img/reference-mask.png) no-repeat;
}	

.teamTeaser .media div.mask {
	width:230px;
	height:130px;
	background:url(../img/teammember-mask.png) no-repeat;
}

.referenceTeaser .content {
 	cursor:pointer;
	background:none !important;
}

.firstCol .referenceTeaser .content {
	padding-left:25px;
}

.lastCol .referenceTeaser .content {
	padding-right:25px;
}

#contentArea .referenceTeaser h2 {
	font-size:1.2em;
	line-height:1.2em;
	font-family:'Medium Cond',verdana;
}

#contentArea .teamTeaser h2 {
	margin-bottom:2px;
}

#contentArea .lastCol .referenceTeaser h2 {
	padding-left:0;
}

.referenceTeaser .content p {
	font-size:.9em;
}

.referenceTeaser .content span {
	float:left;
	margin-left:0;
	text-decoration:underline;
}

.teamTeaser .content span.info {
	font-weight:bold;
}

.referenceTeaser .content span.arrow {
	display:block;
	width:13px !important;
	height:16px !important;
	padding-left:0;
	margin-left:7px;
	float:left;
	text-indent:-9999px;
	background:url(../img/buttons.png) -120px 0 no-repeat;
}

/* special overrides for 2 column boxes without padding to contentArea 
 * using csc-frame-frame1 for the wrapping 25/25 fce */
.csc-frame-frame1 .gridConNoPad {
	margin-top:-20px !important;
}

.c440 .csc-frame-frame1 .c215 {
	width:230px !important;
	margin-left:-5px;
}

.c440 .csc-frame-frame1 .lastCol {
	margin-left:0;
	margin-right:-25px;
}

.c440 .csc-frame-frame1 .firstCol .teamTeaser,
.c440 .csc-frame-frame1 .lastCol .teamTeaser {
	width:230px;
	margin-top:25px;
}

.c440 .csc-frame-frame1 .firstCol .teamTeaser .content {
	padding-left:15px;
}




/**
 **************************************************
 BROWSE NAVIGATION // ALT HEADER
 *
 * @description: defines the browse navigation and
 * the headlines on the reference and team detail 
 * pages
 **************************************************
**/
h1.altHeader {
	margin-bottom:.5em;
	font-size:2.5em;
	font-weight:normal;
	/*text-transform:uppercase;*/
}

.teamHeader h1.altHeader {
	margin-bottom:0;
	color:#333333;
}

ul.navBrowse {
	float:right;
	position:relative;
	height:31px;
	padding:0;
	margin:0;
}

#contentArea ul.navBrowse li {
	float:left;
	height:31px;
	padding:0;
	background:transparent;
}

ul.navBrowse li.prev {
	margin-right:15px;
}

ul.navBrowse li.next {
	margin-left:15px;
}

ul.navBrowse li a {
	display:block;
	height:31px;
	text-indent:-9999px;
	background:transparent;
}

ul.navBrowse li.prev,
ul.navBrowse li.prev a,
ul.navBrowse li.next,
ul.navBrowse li.next a {
	width:31px;
}

ul.navBrowse li.up,
ul.navBrowse li.up a {
	width:132px;
}

#contentArea ul.navBrowse li.prev {
	background:url(../img/buttons.png) -177px 0 no-repeat;
}

#contentArea ul.navBrowse li.prev a:hover {
	background:url(../img/buttons.png) -177px -31px no-repeat;
}

#contentArea ul.navBrowse li.up {
	background:url(../img/buttons.png) -222px 0 no-repeat;
}

#contentArea ul.navBrowse li.up a:hover {
	background:url(../img/buttons.png) -222px -31px no-repeat;
}

#contentArea ul.navBrowse li.next {
	background:url(../img/buttons.png) -369px 0 no-repeat;
}

#contentArea ul.navBrowse li.next a:hover {
	background:url(../img/buttons.png) -369px -31px no-repeat;
}


/* *** TEAMPAGE browse *** */
#contentArea .teamHeader ul.navBrowse li.prev {
	background:url(../img/buttons.png) -177px -66px no-repeat;
}

#contentArea .teamHeader ul.navBrowse li.prev a:hover {
	background:url(../img/buttons.png) -177px -97px no-repeat;
}

#contentArea .teamHeader ul.navBrowse li.up {
	background:url(../img/buttons.png) -222px -66px no-repeat;
}

#contentArea .teamHeader ul.navBrowse li.up a:hover {
	background:url(../img/buttons.png) -222px -97px no-repeat;
}

#contentArea .teamHeader ul.navBrowse li.next {
	background:url(../img/buttons.png) -369px -66px no-repeat;
}

#contentArea .teamHeader ul.navBrowse li.next a:hover {
	background:url(../img/buttons.png) -369px -97px no-repeat;
}




/**
 **************************************************
 NEWS
 *
 * @description: css definitons for EXT: tt_news
 * @beware: is dependent on the modified template
 **************************************************
**/
.news {
}

.latest {
	margin-top:50px;
}

.latest h1 {
	margin-bottom:5px;
}

.news .item {
	margin-bottom:5px;
}

.news p.date,
.news p.timeData,
.news p.author,
.news p.imgCaption,
.news p.back {
	margin-bottom:0;
	font-size:0.9em;
	color:#a4a4a4;
}

.news span.more {
	white-space:nowrap;
}

.news span.more a {
	text-decoration:underline;
}

.news p.back {
	clear:both;
	border-top:1px solid #c4c4c4;
	margin-top:20px;
}

.news .images {
	float:left;
	margin:3px 10px 1.5em 0;
}

.news .images a {
	border-bottom:0;
}

.news .addInfo dl {
	padding-top:0.4em;
	border-top:1px dotted #c4c4c4;
}




/**
 **************************************************
 CONTACT FORMS / TMailform
 *
 * @description: css definitons for EXT: pil_mailform
 * @beware: is dependent on the modified template
 **************************************************
**/
.contact .content {
	padding:20px 25px 15px 25px;
}

#contentArea .contact .content h2,
#contentArea .lastCol .contact .content h2 {
	padding-left:0;
}

.contact .content .c440 {
	width:402px;
	margin-right:46px;
}

.contact .content .lastCol {
	margin-right:0;
}

.c440 .contact .content {
	padding-right:19px;
	padding-left:19px;
}

.contact .content form .c440 textarea {
	height:306px;
}

.contact .content form .c440 div.textarea {
	height:306px;
	margin-bottom:25px;
	background-image:url(../img/textarea-big-bg.png);
}

.c440 .contact .content form div.textarea {
	background-image:url(../img/textarea-small-bg.png);
}

.contact .content form div.submitWrap {
	margin-top:15px;
}

.contact .content form .submitWrap input.submit {
	float:right;
	margin-right:1px;
}

form .submitWrap label.send {
	width:260px;
	margin-left:0;
}




/**
 **************************************************
 TOOLTIP
 *
 * @description: css definitons the tooltip
 **************************************************
**/
#tooltip {
	position: absolute;
	z-index:3000;
	opacity:1;
	padding:3px 8px 3px 8px;
	border:1px solid #3b3b3b;
	font-size:.9em;
	color:#ffffff;
	text-align:center;
	-moz-box-shadow:1px 1px 12px #888;
	-webkit-box-shadow:1px 1px 12px #888;
	box-shadow:1px 1px 12px #888;
	background:#909090 url(../img/tooltip-bg.gif) bottom left repeat-x;
}

#tooltip h3,
#tooltip div {
	margin:0;
	font-weight:normal;
	line-height:normal;
}





/**
 **************************************************
 MEDIA AREA (COVERFLOW, TABS, GOOGLE...)
 *
 * @description: css definitons for coverflow,
 * tabs and all other stuff inside the media area
 **************************************************
**/
/* *** GENERAL DEFINITIONS *** */
.media {
	color:#fff;
	background:url(../img/media-red.jpg) top left no-repeat;
}

.startpage {
	height:360px;
	margin-bottom:20px;
}

#contentArea .media {
	background:none;
}

.media h1 {
	margin-bottom:10px;
	color:#fff;
	font-size:3em;
	font-family:'Medium',verdana;
	line-height:1.1em;
	/*text-transform:uppercase;*/
	-webkit-text-shadow:#333 0 0 .25em;
    -moz-text-shadow:#333 0 0 .25em;
    text-shadow:#333 0 0 .25em;
}

.media h3 {
	width:545px;
	padding-top:10px;
	font-size:1em;
	line-height:1.5em;
	font-weight:normal;
}

.media .inner {
	position:relative;
	padding:25px;
}

.media .inner p {
	margin-bottom:0;
	font-size:1.3em;
	line-height:1.5em;
}


/* *** TABS *** */
.media .tabContent,
.media .tabContent .tabPanel {
	padding:0;
}

.media .tabContent {
	position:relative;
	width:950px;
}

.media .tabPanel {
	display:none;
	position:absolute;
	width:950px;
	height:280px;
} 

.media .tabContent h1 {
	padding-top:5px;
	margin-bottom:45px;
}

.media .tabContent .text {
	width:550px;
	padding:30px 0 0 25px;
	z-index:3;
}

.media .tabContent ul {
	position:absolute;
	left:0;
	top:280px;
	height:80px;
	padding:0;
	margin-bottom:0;
	list-style:none;
	z-index:5;
}

.media .tabContent li {
	float:left;
	width:226px;
	height:78px;
	border:2px solid #fff;
	border-top:0;
	margin:0 10px 0 0;
	font-size:.8em;
	text-align:center;
	font-weight:bold;
	color:#666666;
	background:#fff;
}

.media .tabContent li span {
	display:none;
	padding-top:60px;
	line-height:1.2em;
	font-weight:bold;
	color:#666666;
	text-align:center;
	text-decoration:none;
}

.media .tabContent li.hover,
.media .tabContent li.act {
	border-color:#930413;
}

.media .tabContent li.last {
	margin-right:0;
}

.media .tabContent li.hover span,
.media .tabContent li.act span {
	display:block;
}

.media .tabContent li a {
	display:block;
	width:226px;
	height:78px;
	padding:0;
	font-weight:bold;
	color:#666666;
	text-align:center;
}

.media .tabContent li a:hover {
	text-decoration:none;
}

.media .tabContent li.hover a,
.media .tabContent li.act a {
}

.media .tabContent li.hdnet {
	font-size:1em;
}

.media .tabContent li.hdnet p {
	padding:13px 15px 15px 23px;
	text-align:left;
	font-weight:bold;
	font-size:1em;
	line-height:1.4em;
	color:#999999;
}

.media .tabContent li i,
.media .tabContent li em {
	font-weigt:bold;
	font-style:normal;
	text-decoration:underline;
}

.media .tabContent li.hdnet i,
.media .tabContent li.hdnet em {
	color:#ca1d28;
	font-weight:bold;
	text-decoration:none;
}

.media .tabContent li.hdnet a {
	display:inline;
	font-size:.95em;
	color:#999999;
	text-decoration:underline;
}

.media .tabContent li.typo3 {
	background:#ffffff url(../img/tab-typo3-bg.gif) center 20px no-repeat;
}

.media .tabContent li.magento {
	background:#ffffff url(../img/tab-magento-bg.gif) center 20px no-repeat;
}

.media .tabContent li.suricata {
	background:#ffffff url(../img/tab-suricata-bg.gif) center 5px no-repeat;
}

.media .tabContent li.hover,
.media .tabContent li.act {
}


.media .tabContent .tabPanel p {
	padding-right:55px;
}

.media .tabContent .tabPanel p a {
	color:#fff;
	text-decoration:underline;
}

.media .tabContent .tabPanel p a.more {
	display:block;
	margin-top:15px;
	font-size:1.9em;
	line-height:1.1em;
	font-family:'Light',verdana;
	text-transform:uppercase;
	text-decoration:none;
}

.media .tabContent .tabPanel p a.more:hover {
	text-decoration:underline;
}




/**
 **************************************************
 BOX RSS FEED
 *
 * @description: displays the rss of the hdnet blog
 * on the startpage
 **************************************************
**/
.rss {
}

.rss .item {
	position:relative;
	margin-bottom:10px;
	background:none;
}

#contentArea .lastCol .rss h2 {
	padding-left:0;
}

#contentArea .rss .item p {
}

#contentArea .rss .item h2 {
	margin-bottom:8px;
	color:#333333;
}

#contentArea .rss .item h3 {
	margin-bottom:6px;
	color:#9a9c9c;
}

#contentArea .rss .item h3 a {

}

#contentArea .rss .item h2 a {
	color:#333333;
}

.rss .item a.arrow {
	color:#333333;
	background-image:url(../img/ico-arrow-333333-5.gif);
}


/* *** BLOG on TEAM MEMBER PAGE *** */
#contentArea .c440 .rss {
	margin-top:10px;
}

#contentArea .c440 .rss .item {
	font-size:.9em;
}

#contentArea .c440 .rss .item .text h3 a {
	display:block;
	margin-bottom:5px;
	line-height:1.4em;
}