@charset 'utf-8';
/* ----- generic ----- */


* { margin: 0px; padding: 0px; }

html {
	background: #E3E8EC;
	color: #000;
	direction: ltr;
	font: normal 12px/16px verdana, arial, helvetica, sans-serif;
}

* { 
    background-repeat: no-repeat; /* Better for Opera 7 */
    line-height:       inherit;
    margin:            0px; 
    padding:           0px; 
}
h1 {
	color: #000;
	font: bold 16px/21px verdana, arial, helvetica, sans-serif;	
	margin-bottom: 15px;
	padding-top: 10px;
}

h2 {
	font: bold 14px/18px verdana, arial, helvetica, sans-serif;
	margin: 15px 0 5px;
} 

h3 {
	font:bold 12px/16px verdana, arial, helvetica, sans-serif;
	margin: 15px 0 5px;
}

p {
	font:normal 12px/16px verdana, arial, helvetica, sans-serif;
	margin-bottom: 10px;
}


/* ----- Hypertext Module ----- */
a         { color:#14C; text-decoration:none; }
a:visited { color:#57F; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: none; }
a img     { border:0; }




/* ----- Auxiliary Module ----- */
#main    { 
	background:url(../img/bg/bg-main2.gif) repeat-y; 
	position:relative;
	margin: 0px 10px;
	padding:0px 13px 0px 12px;
	width: 790px;
}
* html #main {width /**/: 815px;} /* IE 5.x */

/* ----- Header Modul ----- */

#header {
	background: url(../img/bg/topreiter_produkte_v4.jpg) top left no-repeat;
	height: 96px;
	margin: 0px 10px;
	position:relative;
	width: 815px;
}

#header-end { 
	background:url(../img/bg/bg-main-start2.gif) no-repeat; 
	height:13px; 
	margin:0px 10px;
	overflow: hidden;
	width:815px; 
}

a#logo {
    background: url(../img/bg/logo-webde.gif) no-repeat left top;
	display:    block;
    height:     60px;
    left:       54px;
	position:   absolute;
	top:        22px;
    width:      64px;
	z-index:    10;
}

a#service {
    background:    url(../img/bg/icon-service.gif) no-repeat left top;
	border-right:  1px solid #97A3C0;
	display:       block;
	height:        16px;
	left:          755px;
    padding-right: 4px;
	position:      absolute;
	top:           18px;
	width:         16px;
    z-index:       10;
}
* html a#service {width /**/: 21px;} /* IE 5.x */
a#help {
    background:   url(../img/bg/icon-help.gif) no-repeat left top;
	display:      block;
	height:       16px;
	left:         781px;
	position:     absolute;
	top:          18px;
	width:        16px;
    z-index:      10;
}

a#portal {
	display:  block;
	height:   80px;
	left:     4px;
	position: absolute;
	top:      12px;
	width:    807px;
	z-index:  1;
}
#header a span { display:none; }



/* toplevelnavi */
#nav #navPortal {
    padding-left:  5px;
    margin-bottom: 10px;
}
#nav #navPortal {
    font-size:     0.85em;
}
#nav #navPortal {
    position:  absolute;
    top:       56px;
    left:      173px;
    xfont-size: 13px; /* Dependent on the header image */
}

#nav #navPortal ul {
    width:       662px; /* 815 (#container=>width) - 163 (#navPortal=>left) */
    margin-left: 4px;
}
#nav #navPortal li {
    float:        left;
    display:      inline;
    width:        auto;
    height:       37px;
    he\ight:      34px;
    margin-right: 1px;
    padding:      2px 1px 1px 1px;
    border:       0px solid #000000;
    xbackground: red;
}
x#nav #navPortal li:hover {
    opacity: 0.2;
}
#nav #navPortal li a {
    display: block;
    width:   100%;
    height:  100%;
    xbackground: purple;
}
#nav #navPortal li a:hover {
    text-decoration: none;
    border-bottom:   0px solid;
}
#nav #navPortal li a span {
    xvisibility: hidden;
    display: none;
}

#nav #navPortal li#navPortalDsl { width: 55px; w\idth: 53px; }
#nav #navPortal li#navPortalProducts { width:  90px; w\idth:  88px; }
#nav #navPortal li#navPortalChannels { width: 90px; w\idth:  88px; }
#nav #navPortal li#navPortalShopping { width:  90px; w\idth:  88px; }
#nav #navPortal li#navPortalGames    {display: none; width:  124px; w\idth:  122px; }

/* ----- Advertisement Module ----- */

#adv-header {
	background: url(../img/bg/bg-adv-header2.gif) top left no-repeat;
	display: table;
	height: 106px;
	margin: 0px 10px ;
	position: relative;
	text-align: center;	
	vertical-align:middle;
	width: 815px;
    z-index:        100;
}


/* ----- workaround fuer die Zentrierung des Banners ----- */
#adv-header .wrOuter { display:table-cell; vertical-align:middle; }
/* Hides from MacIE \*/
* html #adv-header   { display:block;}
* html #adv-header .wrOuter { display:inline; left:50%; top:50%; position:absolute; }
* html #adv-header .wrInner { left:-50%; top:-50%; position:relative; }
/* End hide */
#adv-header img { vertical-align:bottom; }


/* ----- Navigation Module (Sub) ----- */
#nav-sub {
	float: left;
	position: relative;
	width: 150px;
    padding-bottom: 40px;
    overflow: hidden;
}
	
#nav-sub div div { padding:0px; }
#nav-sub div div div { padding:0px; }

#nav-sub ul { 	background-color:#FFF; list-style:none; margin:0px; padding:0px; }
#nav-sub li { 
	background-repeat:no-repeat; 
	font-size:11px;
	vertical-align:bottom; /* fixes the gaps in IE 5.0 */
	width:150px;	
}

#nav-sub a, #nav-sub strong {
	background-repeat:no-repeat;
	color:#000;
	display:block;
	font-size:11px;
	text-decoration:none;
}
* html #nav-sub a, * html #nav-sub strong {
	height:1%; /* fixes IE margin-Bug by giving "has_layout" to the links */
}
#nav-sub a:hover { text-decoration:underline; }

#nav-sub .l1 div.end { display:none; }
#nav-sub #nav-sub-bin div.end {
	height:4px;
	overflow:hidden;
	width:100%; /* fixes IE Mac to show the div as block */
}

/* ----- Neu und Tipp-Stoerer ----- */
#nav-sub span.new { 
    background:  url(../img/marker-neu.gif) left top no-repeat;
    margin-left: 5px;
    margin-top:  4px;
    position:    absolute;
}
#nav-sub span.tip { 
    background:url(../img/marker-tipp.gif) left top no-repeat;
    margin-left: 5px;
    margin-top:  4px;
    position:    absolute;
}
#nav-sub .l4 span.new,
#nav-sub .l4 span.new        { margin-top: 2px; }
* html #nav-sub span.new,
* html #nav-sub span.tip,
* html #nav-sub .l4 span.new,
* html #nav-sub .l4 span.new { margin-top: -1px; }
*+html #nav-sub span.new,
*+html #nav-sub span.tip,
*+html #nav-sub .l4 span.new,
*+html #nav-sub .l4 span.new { margin-top: -1px; }

#nav-sub span.new img,
#nav-sub span.tip img { border: 0px solid; height: 9px; width: 20px; }

/* ----- Level 1-4 Abstaende + Rahmen ----- */
#nav-sub .l1 a, 
#nav-sub .l1 strong  { border-bottom:1px solid #D8DFE5; line-height:23px; padding-left:5px; }
#nav-sub .l1 strong  { font-weight:bold; }

#nav-sub .l2         { border-top:1px solid #D8DFE5; margin-top:4px; }
#nav-sub .l2 a       { padding-left:15px; }
#nav-sub .l2 strong, 
#nav-sub .l2 .open   { font-weight:bold; padding-left:5px; }
#nav-sub .l2 a,
#nav-sub .l2 strong  { border-bottom:1px solid #D8DFE5; }

#nav-sub .l3 a, 
#nav-sub .l3 strong, 
#nav-sub .l3 .open   { font-weight:normal; padding-left:15px; }
#nav-sub .l3 a,
#nav-sub .l3 strong  { border-bottom:1px solid #D8DFE5; }
#nav-sub .l3 .open   { border-bottom:0px solid #D8DFE5; }

#nav-sub .l4         { background:#FFF; border-bottom:1px solid #D8DFE5; padding-bottom:1px; } 
#nav-sub .l4 a,
#nav-sub .l4 strong  { border-bottom:0px solid #D8DFE5; line-height:19px; padding-bottom:1px; padding-left:15px; }

#nav-sub .l5 a, 
#nav-sub .l5 strong  { padding-left:27px; }


/* ----- Level 1-4 Hintergrund Produkte + Fallback ----- */
#nav-sub .product strong { background:#EEF3F7; }
#nav-sub .product .l2 a  { 
    background: url(../img/navi/pfeil.gif) 5px 9px no-repeat;  
    position:   relative; 
}
#nav-sub .product .l2 a img.marker { 
    position:    absolute; 
    margin-left: 5px; 
    margin-top:  4px;
}
* html #nav-sub .product .l2 a img.marker { 
    margin-top: -1px; 
}

#nav-sub .product .l2 a.open { background:none; }
#nav-sub .product .l2 strong,
#nav-sub .product .l3 #focus { background:#EEF3F7; }
#nav-sub .product .l3 strong { background:url(../img/navi/pfeil.gif) 5px 9px no-repeat; }
#nav-sub .product .l3 a.open,
#nav-sub .product .l3 strong.open { background:url(../img/navi/pfeil_open.gif) 5px 9px no-repeat; }
#nav-sub .product .l4 #focus { background:#FFF !important; }
#nav-sub .product .l4 a,
#nav-sub .product .l4 a.open { background:none !important; } 
#nav-sub .product .l4 strong,
#nav-sub .product .l4 strong.open { background:#EEF3F7; }
#nav-sub .product .l5 a,
#nav-sub .product .l5 strong { background:url(../img/navi/punkt.gif) 20px 9px no-repeat !important; } 
#nav-sub .product .l5 #focus { background:#EEF3F7 !important; }


/* ----- Level 1-4 Hintergrund Extra + Fallback ----- */
#nav-sub .extra {
    border-top:0pt none;
    margin-top:0pt;
    padding-top:5px;
}

#nav-sub .extra strong { background:#EEF3F7; }
#nav-sub .extra .l2 a  { 
    background: url(../img/navi/pfeil.gif) 5px 9px no-repeat;  
    position:   relative; 
}
#nav-sub .extra .l2 a img.marker { 
    position:    absolute; 
    margin-left: 5px; 
    margin-top:  4px;
}
* html #nav-sub .extra .l2 a img.marker { 
    margin-top: -1px; 
}

#nav-sub .extra .l2 a.open { background:none; }
#nav-sub .extra .l2 strong,
#nav-sub .extra .l3 #focus { background:#EEF3F7; }
#nav-sub .extra .l3 strong { background:url(../img/navi/pfeil.gif) 5px 9px no-repeat; }
#nav-sub .extra .l3 a.open,
#nav-sub .extra .l3 strong.open { background:url(../img/navi/pfeil_open.gif) 5px 9px no-repeat; }
#nav-sub .extra .l4 #focus { background:#FFF !important; }
#nav-sub .extra .l4 a,
#nav-sub .extra .l4 a.open { background:none !important; } 
#nav-sub .extra .l4 strong,
#nav-sub .extra .l4 strong.open { background:#EEF3F7; }
#nav-sub .extra .l5 a,
#nav-sub .extra .l5 strong { background:url(../img/navi/punkt.gif) 20px 9px no-repeat !important; } 
#nav-sub .extra .l5 #focus { background:#EEF3F7 !important; }

/* ----- Login-Box  ----- */
#nav-sub .login   {margin:10px 0px 10px 0px; background-color: #ffffff; width:150px;}
#nav-sub .login * {font:normal 11px/14px verdana, arial, helvetica, sans-serif;}
#nav-sub .login a {color:#1144CC !important; border:0px; display:inline; line-height:14px; padding:0px;}
#nav-sub .login .index {background:#EBF6FC url(../img/bg-top150.gif) no-repeat top left; border-width:0px; font-weight:bold; line-height:23px; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}
#nav-sub .login .index .help {float:right; padding: 3px 0px 0px 0px; } /* wird derzeit nicht verwendet */
#nav-sub .login .box {background:url(../img/bg-bottom150.gif) no-repeat bottom left; padding: 0px 1px 5px 1px;}
#nav-sub .login .box div      {margin:5px 7px;}
#nav-sub .login .box form     {background-color:#EBF6FC; margin:0; padding:5px 7px 5px;}
#nav-sub .login .box form div {margin:0 0 5px;}
#nav-sub .login .box form .error {padding:0px; color:#FF0000;}
#nav-sub .login .box .form-control a {line-height:18px;}
#nav-sub .login .box label {display:block;}
#nav-sub .login .box input {margin:0 0 5px;}
#nav-sub .login .box input.field {width:130px; font:normal 11px verdana, arial, helvetica, sans-serif; }
#nav-sub .login .box input.action {float:right; font-size:11px !important; line-height:12px; margin:0; padding:0; text-align:center;}
#nav-sub .login .box input.field {width:130px;}
* html #nav-sub .login .box input.field { width:133px; width/**/: /**/130px;}
#nav-sub .login .box input.field {width:133px#} /* for Safari*/

/* ----- ServiceBox DSL  ----- */
#nav-sub #dslServicebox {background:#ffffff url(//img.web.de/v/produkte/dsl/img/typ.gif) no-repeat left; height:242px; width:150px; margin:0;}
#nav-sub #dslServicebox .box {padding: 0px 1px 5px 5px; width:145px;}
#nav-sub #dslServicebox .box ul {margin-top:7px; background:transparent;}
#nav-sub #dslServicebox .box li { background: url(//img.web.de/v/produkte/dsl/img/haeckchen.gif) no-repeat 0px 2px; width:136px; padding-left: 14px; margin-bottom:5px; }
#nav-sub #dslServicebox .box strong {font-weight:bold; background:transparent; border:0; line-height:14px; padding:0; margin:0;}
#nav-sub .service * {font:normal 11px/14px verdana, arial, helvetica, sans-serif;}
#nav-sub .service a {color:#1144CC !important; border:0px; display:inline; line-height:14px; padding:0px;}
#nav-sub .service .index {border-width:0px; font-weight:normal; line-height:23px; color:#004374; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}

/* ----- ServiceBox Gruenes Postfach  ----- */
#nav-sub #gruenesPostfachServicebox {margin:10px 0px 0px 0px; background-color:#FFFFFF; width:150px;}
#nav-sub #gruenesPostfachServicebox .index {background:url(../img/bg-top150.gif) no-repeat top left; border-width:0px; font-weight:normal; line-height:23px; color:#000000; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}
#nav-sub #gruenesPostfachServicebox .box {background:url(../img/bg-bottom150.gif) no-repeat bottom left; padding: 5px 7px;}
#nav-sub #gruenesPostfachServicebox a {color:#1144CC !important; border:0px; display:inline; line-height:14px; padding:0px;}
#nav-sub #gruenesPostfachServicebox .relatedlink   {display: block; background: url(../img/navi/pfeil.gif) no-repeat 0px 5px; font-size:11px;margin-left: 6px; margin-top: 3px; border: none;}
#nav-sub #gruenesPostfachServicebox .relatedlink a {padding-left:10px; font-size:11px; border-bottom: none; font-weight: 400;}



#nav-sub .service * {font:normal 11px/14px verdana, arial, helvetica, sans-serif;}
#nav-sub .service a {color:#1144CC !important; border:0px; display:inline; line-height:14px; padding:0px;}
#nav-sub .service .index {border-width:0px; font-weight:normal; line-height:23px; color:#004374; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}
/* Service-Box */
#nav-sub .verfuegbarkeit   {margin:10px 0px 0px 0px; background-color:#FFFFFF; width:150px;}
#nav-sub .verfuegbarkeit * {font:normal 11px/14px verdana, arial, helvetica, sans-serif;}
#nav-sub .verfuegbarkeit .index {background:url(../img/bg-top150.gif) no-repeat top left; border-width:0px; font-weight:normal; line-height:23px; color:#004374; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}
#nav-sub .verfuegbarkeit .box {background:url(../img/bg-bottom150.gif) no-repeat bottom left; padding: 5px 7px;}
#nav-sub .verfuegbarkeit .box img {float:right; margin-top:5px;}

#nav-sub .verfuegbarkeit .box a      {display:inline;line-height:14px;color: #990000; font-weight:bold; text-decoration: underline; border:0px; padding:0px;}
#nav-sub .verfuegbarkeit .box .text1 {position:absolute;font-weight:bold; width: 60px; padding:0px; margin:0px;}
#nav-sub .verfuegbarkeit .box .text2 {padding-top:115px;}
* html #nav-sub .verfuegbarkeit .box .text2 {padding-top:101px;}

/* ----- Video-Hilfe-Box  ----- */
#nav-sub .videohelp                {margin:10px 0px 10px 0px; background-color: #ffffff; width:150px;}
#nav-sub .videohelp *              {font:normal 11px/14px verdana, arial, helvetica, sans-serif;}
#nav-sub .videohelp a              {color:#1144CC !important; border:0px; display:inline; line-height:14px; padding:0px;}
#nav-sub .videohelp .index         {background:url(../img/bg-top150.gif) no-repeat top left; color:#56738a; line-height:23px; height:23px; margin:0; overflow:hidden; padding: 1px 8px 0px 8px;}
* html #nav-sub .videohelp .index  {height /**/: 24px;} /* IE 5.x  */
#nav-sub .videohelp .box           {background:url(../img/bg-bottom150.gif) no-repeat bottom left; padding:5px 7px; }
#nav-sub .videohelp .relatedlink   {background: url(../img/navi/pfeil.gif) no-repeat 0px 4px; font-size:11px;}
#nav-sub .videohelp .relatedlink a {padding-left:10px; font-size:11px;}
#nav-sub .videohelp .item          {margin-bottom:5px;}
#nav-sub .videohelp .item a        {background:url(../img/icons/icon-videotour.gif) 0px -1px no-repeat; padding-left:21px; }

/* ----- Channels (Zusatznavigation links)  ----- */
#nav-sub .channels      {border-top:1px solid #D8DFE5; margin-top:40px;}
#nav-sub .channels span {
    border-bottom:1px solid #D8DFE5; 
    background:url(../img/navi/bg-channels.gif) top left repeat-x; 
    color:#888; 
    display:block;
    font-weight:bold; 
    line-height:23px; 
    padding-bottom:1px; 
    padding-left:5px;
}

#nav-sub .channels a { position:relative; }
#nav-sub .channels a img.marker { 
    float:    none;
    position: absolute; 
    margin:   5px 0px 0px 5px; 
    height:   auto;
    width:    auto;
}
* html #nav-sub .channels a img.marker { margin: -1px 0px 0px 5px; }

#nav-sub .channels li  {background:url(../img/navi/bg-channels.gif) top left repeat-x; border-bottom:1px solid #D8DFE5; height:26px;}
#nav-sub .channels li a     {border-bottom:0px solid #D8DFE5; font-weight:normal; line-height:25px; padding:0 0 1px 5px; color:#888;}
#nav-sub .channels li a:hover {color:#888;}
#nav-sub .channels .l2      {border-top:0px solid #D8DFE5; margin-top:0px;}
#nav-sub .channels .l2 img  {float:left; height:16px; margin:5px; width:16px;}
#nav-sub .channels .end     {background:#F6F8FA;}

/* ----- Content Module ----- */
#content-start  { float:right; width:630px; }
#content        { float:right; width:630px; }
#content-end    { float:right; width:630px; }

/* ----- Grid Module B (Unit pattern) ----- */
.x1 {width: 70px;}
.x2 {width: 150px;}
.x3 {width: 230px;}
.x4 {width: 310px;}
.x5 {width: 390px;}
.x6 {width: 470px;}
.x7 {width: 550px;}
.x8 {width: 630px;}

/* ----- Footer Module ----- */
#footer { 
	background:url(../img/bg/bg-footer2.gif) top left no-repeat; 
	clear: both;
	font-size:11px;
	height:55px; 
	margin:0px 10px; 
	padding-top:23px; 
	text-align:center;
	width:825px;
}
#footer li {display:inline;}
#footer a  { color:#000; }


/* Containing Floats */
/****************************************************************/
.clearfix:after {
	content: "."; /* This dot is the actual appended content */
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	}
.clearfix {display: inline-block;} /* Fixes MacIE */
/* Hides from MacIE \*/
.clearfix {*height: 1%;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */



#breadcrumb {
    float: left;
    font-size: 10px;
    height: 12px;
    line-height: 12px;
    padding: 1px 0px 10px 10px;    
}

#breadcrumb * {
    float: left;
    font-size: 10px;
    line-height: 12px;
    font-weight: normal;
    margin: 0px;
}

#breadcrumb h3 {
    margin-right: 4px;
}

#breadcrumb li {
    display:block;
    background: url(../img/icons/arrow-breadcrumb.gif) no-repeat 100% 3px;
    padding-right: 12px;
    margin-right: 4px;
}

#breadcrumb li.last {
    background: none;
    padding-right: 0px;
}

#breadcrumb a {
    color: #1244CC;
}


/* MOD socialbookmarks */
#content #socialbookmarks {
    background:transparent url(../img/bg/bg-socialbookmarks.png) no-repeat scroll left top;
    height:120px;
    padding:7px 7px 0;
    width:300px;
    z-index:50;
}

#content #socialbookmarks div.close {
    margin-left:270px;
    position:absolute;
}

#content #socialbookmarks ul,
#content #socialbookmarks32 ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding: 0;
}

#content #socialbookmarks ul li,
#content #socialbookmarks32 ul li {
    background:transparent none repeat scroll 0 0;
    display:block;
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
}

#content #socialbookmarks ul li {
    font-size:11px;
    height:22px;
    width:95px;
}

#content #socialbookmarks li img {
    margin-right:2px;
    vertical-align:top;
}
/* MOD socialbookmarks32 */
#content #socialbookmarks32 {
    border-top:1px solid #CED4DA; 
    border-bottom:1px solid #CED4DA; 
    position:relative;
    display:block;
    padding:6px 0px 6px 0px;
    height:32px;
}

#content #socialbookmarks32 ul { float:right; }
#content #socialbookmarks32 li img { margin-left:5px;}
#content #socialbookmarks32 li span {display:none}
#content #socialbookmarks32 strong {
    padding-top:8px;
    float:left; 
    display:inline-block; 
}
    
/* MOD Themenliste */
#content .relatedPageLinks {
   border-top:1px solid #CED4DA;
   padding:6px 0px 6px 0px;
   color:#888;
   font-size:11px;
   line-height:14px;   
}

#content .relatedPageLinks ul {margin-top:5px; margin-left:2px;}
#content .relatedPageLinks li  {
    display: block; 
    background: url(../img/navi/pfeil.gif) no-repeat 0px 5px; 
}
#content .relatedPageLinks a {
    padding-left:10px; 
    color:#888;
}