/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/

/* Breite der Nested-Grid-Elemente auf 99.9% gepatched wg. Bug in IE7 */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:99.9%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#hd:after,#bd:after,#ft:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#hd,#bd,#ft,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

/* Dotted Lines rund um Links entfernen */

* :focus { outline: 0; }


/* 

Font-Größen-Tabelle: 
=====================

Nutzt man wie wir YUI Fonts CSS, dann werden Schriften und Line-Heights in % angegeben. Für die gewünschte Größe in px jeweils den dahinterstehenden Wert in % wählen.

px  %
---------
10 	77
11 	85
12 	93 (was 93)
13 	100
14 	108 (was 107)
15 	116 (was 114)
16 	123.1 (was 122)
17 	131 (was 129)
18 	138.5 (was 136)
19 	146.5 (was 144)
20 	153.9 (was 152)
21 	161.6 (was 159)
22 	167
23 	174
24 	182
25 	189
26 	197

src: http://developer.yahoo.com/yui/fonts/

*/

/* Standard-Farben dikay51
Grau: #cccccc
Rot: #D30033
*/


/* 

Das CSS hat einen einfachen Aufbau:

    1. Formatierung für html und body
    2. Formatierung der Container und Menu(s)
    3. Vertikale Abstände der Standard-Blockelemente
    4. Formatierung der Standard-Blockelemente in alphabetischer Reihenfolge
    5. Formatierung der Formulare
    6. Formatierung der Standard-Inline-Elemente
    7. Seitenübergreifende Spezialitäten (hcard, buttons)
    8. Seitenindividuelle Formatierungen (auf das einzelne Projekt bezogen)

CSS soll so formuliert werden, dass Sonderfälle (beispielsweise ein speziell für das Menü formatiertes <ul>) nicht auf Standard-Elemente im Content durchschlagen. Im Content sollte man immer einfaches HTML mit möglichst wenig Klassen und IDs schreiben können ohne dabei optische Überraschungen zu erleben. 

*/

html {
	background-color: black;
}

body {
	font-family: Verdana,Geneva,sans-serif;
    color: #ffffff;
}

/* main-container */

.yui-gc .yui-u {
	min-height: 500px;
	overflow: auto;
	color: white;
}

#ft {
	color: white;
	margin: 25px 0px 20px 0px;
    padding: 0px;
    font-style: italic;
}

/* "Header" */

#hd {
	position: relative;
	border-bottom: 3px solid #D30033;
	height: 150px;
}

#hd * {
	color: #D30033;    
}

#hd a {
	text-decoration: none;
}

#partner {
	position: absolute;
}

#partner h3 {
	margin-top: 10px;
    font-size: 100%;
    font-weight: bold;
}

#dikay51logo {
    position: absolute;
    left: 417px;
    top: 58px;
}

#subnav {
    position: absolute;
    right: 0;
    top: 10px;
}

#subnav a {
    font-weight: bold;
}

#subnav a:hover, #subnav a:active {
 	color: white;   
}

#subnav li {
	padding: 0 10px;
	border-right: 1px solid white;
}

#subnav li.last {
    border: none;
}

#loginname {
	position: absolute;
	right: 0;
	top: 35px;
	color:#ffffff;
}

#hd li {
	float: left;
	list-style-type: none;
}


/* "Body" */

#mainnav {
    height: 50px;
    background: black;
    margin: 0 0 0 -10px;
    padding: 18px 0 0 0;
}

#mainnav li {
    float: left;
    padding: 4px 10px;
    list-style-type: none;
    border-right: 1px solid #D30033;
}

#mainnav a {
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

#mainnav a:hover, #mainnav a:active {
    color: #D30033;
}

#mainnav li.last {
    border: none;
}


/* Senkrechte Abstände von Standard-Block-Elementen im Content 

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, address, hr, table, form

Aufeinander folgende Elemente des gleichen Typs werden als Siblings selektiert ("p + p"). Ältere Internet Explorer erhalten die entsprechende Fähigkeit per IE8.js. 

*/

hr {
    margin-bottom: 32px;
}

h1, h2, form {
    margin-bottom: 9px;
}

h3, h4,  h5,  h6, table {
    margin-bottom: 7px;
}

p, ul, ol, dl, blockquote, address {
    margin-bottom: 4px;
}

li, dt, dd {
    margin-bottom: 2px;
}

p + h1, ul + h1, ol + h1, dl + h1, blockquote + h1, address + h1, table + h1, form + h1,
p + h2, ul + h2, ol + h2, dl + h2, blockquote + h2, address + h2, table + h2, form + h2,
p + h3, ul + h3, ol + h3, dl + h3, blockquote + h3, address + h3, table + h3, form + h3,
p + h4, ul + h4, ol + h4, dl + h4, blockquote + h4, address + h4, table + h4, form + h4,
p + h5, ul + h5, ol + h5, dl + h5, blockquote + h5, address + h5, table + h5, form + h5,
p + h6, ul + h6, ol + h6, dl + h6, blockquote + h6, address + h6, table + h6, form + h6, 
p + hr, ul + hr, ol + hr, dl + hr, blockquote + hr, address + hr, table + hr, form + hr {
    margin-top: 18px;
}

ul ul, ul ol, ul dl, ol ol, ol ul, ol dl, dl dl, dl ul, dl ol {
    margin-top: 2px;
}

ul ul, ul ol, ul dl, ol ol, ol ul, ol dl, dl dl, dl ol, dl ul {
    margin-bottom: 0;
}


/* 
 * Standard-Block-Elemente im Content 
 * alphabetisch sortiert
 */

address {

}

blockquote {
	margin-left: 20%;
	margin-right: 20%;
}

dl {

}

dl dl {
    margin-left: 22px;
}

dl ol, dl ul {
    margin-left: 44px;
}

dl.center {
	text-align: center;
	clear: both;
}

dl.left {
	float: left;
	margin-right: 20px;
}

dl.right {
	float: right;
	margin-left: 10px;
}

dt {
    font-weight: bold;
}

dd {
    
}

h1 {
	font-size: 153.9%;
	color: white;
	font-weight: bold;
}

h2 {
	font-size: 131%;
	color: white;
	text-transform: uppercase;
}

h3 {
	font-size: 123.1%;
	font-weight: normal;
	color: white;
}

h4 {
	font-size: 123.1%;
	font-weight: normal;
	color: white;
}

h5 {
	color: white;
	font-size: 116%;
	font-weight: bold;
}

h6 {
	color: white;
	font-size: 108%;
	font-weight: bold;
}

hr {
	border: 0;
    background-color: #B60000;
    color: #B60000;
    height: 1px;
}

ol {
	margin-left: 42px;
}

ol li {
    list-style-position: outside;
    list-style-type: decimal;
    line-height: 123.1%;
}

p, li {
	font-size: 100%;
	line-height: 138.5%;
}

li li {
	font-size: 100%;
}

ul#nav li, ul#subnav li, ul#mainnav li {
	font-size: 100%;
}

table {

}

td {
	padding: 4px;
	vertical-align: top;
}

table.withborder, table.withborder td, table.withborder th {
	border: 1px solid gray;
}

th {
	background: white;
	text-align: center;
	padding: 8px;
	color: #B60000;
}

ul {
	margin-left: 34px;    
}

ul li {
    list-style-position: outside;
    list-style-type: disc;
}


/* Formulare */

form {
	margin-top: 10px;
}

form dl {
    margin-left: 0;
}

textarea, input, select {
/*	Auskommentiert von BK width: 95%; */
	width: 400px;
	font-size: 100%;
	padding: 2px;
	border: 1px solid silver;
	margin-bottom: 8px;
/*
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
*/	
}

.input_submit {
    width: 170px;
}

.input_radio {
    width: 20px;
    border-width: 0px;
    color: #d30033;
    padding: 3x;
}

textarea:focus, input:focus {
	background-color: #feffaf;
}

label {
    cursor: pointer;
}

.kontaktformular_fehler {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #e00000;
	font-weight: bold;
}


/* Standard Inline-Elemente im Content */

a {
	color: white;
}

cite {
	font-style: italic;
}

em {
    font-style: italic;
}

img {

}

q {

}

strong {
    font-weight: bold;
}



/* Buttons */

.buttons a, .buttons button{
    display: block;
	/* float: left; */
	/* margin: 0 7px 0 0; */
    margin: 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    line-height: 130%;
    text-decoration: none !important;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 5px 10px 6px 7px; /* Links */
}

.buttons button{
    width: auto;
    overflow: visible;
    padding: 4px 10px 3px 7px; /* IE6 */
}

.buttons button[type]{
    padding: 5px 10px 5px 7px; /* Firefox */
    line-height: 17px; /* Safari */
}

*:first-child+html button[type]{
    padding: 4px 10px 3px 7px; /* IE7 */
}

.buttons button img, .buttons a img{
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}


/* Farben für die Buttons */

/* Button Neutral */

button:hover, .buttons a:hover{
    background-color: #dff4ff;
    border: 1px solid #c2e1ef;
    color: #336699;
}

.buttons a:active{
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: #fff;
}


/* Button Positiv */

button.positive, .buttons a.positive{
    color:#529214;
}

.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}

.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}


/* Button Negativ */

.buttons a.negative, button.negative{
    color: #d12f19;
}

.buttons a.negative:hover, button.negative:hover{
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
}

.buttons a.negative:active{
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: #fff;
}

/* hcard */

.vcard .url, .tel .type, .adr .type, .adr .region, .adr .country-name, .geo, .note {
	display: none;
}

.vcard {
	margin-bottom: 5px;
}

.vcard .street-address {
	display: block;
}

/* Seitenindividuelle Formatierungen */

pre { /* nützlich für das SVN-Log */
    color: white !important;
}

.produktfoto {
    float: left;
}

p.vorwaertsrueckwaerts {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.produktbeschreibung {
    margin-left: 275px;
    padding: 0 10px 0 0;
}

.produktklein {
    clear: left;
    margin-bottom: 20px;
}

.produktklein .produktbeschreibung {
    margin-left: 105px;
    padding: 0 10px 0 0;
}

.produktpreis {
    font-size: 227%;
    font-weight: bold;
    color: #D30033;
    margin-bottom: 10px;
}

.produktklein .produktpreis {
    font-size: 138.5%;
    margin-bottom: 7px;
}

.produktklein p {
    margin-bottom: 0px;
}

.moreandwarenkorb {
    font-size: 100%;
    line-height: 146.5%;
    font-weight: bold;
    width: 148px;
    text-align: center;
}

.produktklein .moreandwarenkorb {
    font-size: 69%;
    width: 102px;
    border-top:  1px solid #D30033;
}

.more {
    border-bottom: 1px solid #D30033;
    text-decoration: none;
}


/* Accessoires */

.accessoires {
    margin-left: -30px;
}

.accessoires .accessoireklein {
    position: relative;
    float: left;
    width: 120px;
    min-height: 250px;
    margin: 0px 0px 10px 30px;
}

.accessoireklein img {
    margin-bottom: 4px;
}

.accessoireklein h2 {
    font-size: 116%;
    margin: 0 0 3px 0;
    text-transform: none;
}

.accessoireklein .preis {
    font-size: 146.5%;
    color: #D30033;
    font-weight: bold;
    margin-bottom: 0;
}

.accessoireklein .moreandwarenkorb {
    text-align: center;
    width: 120px;
}

.accessoireklein .moreandwarenkorb .line1 {
	padding-bottom: 2px;
    border-bottom: 1px solid #D30033;
}

.accessoireklein .moreandwarenkorb a {
    text-decoration: none;
    font-size: 85%;
    font-weight: normal;
}

/* Ausmessen-Anleitung */

.ausmessen {
    width: 700px;
    table-layout: fixed;
}

.ausmessen label {
	line-height: 1.5em;
}

.ausmessen img {
	float: left;
	clear: left;
	margin-top: 5px;    
}

.ausmessen .howto div {
    margin: 0 0 4px 120px;
}

.ausmessen .howto_polo div {
    margin: 0 0 4px 180px;
}

.ausmessen .howto_bluse div {
    margin: 0 0 4px 180px;
}

.ausmessen td {
	padding: 10px 0;
    border-top: 1px solid #D30033;
    width: 300px;
}

.ausmessen td.howto {
    width: 400px;
}

.ausmessen td.mass_polo {
    width: 250px;
}

.ausmessen td.howto_polo {
    width: 450px;
}

.ausmessen td.mass_bluse {
    width: 250px;
}

.ausmessen td.howto_bluse {
    width: 450px;
}

/* Warenkorb */

.warenkorb {
    text-decoration: none;
    font-weight: bold;    
}

.news {
    background: url(../i/bgnews.jpg) no-repeat;
    min-height: 149px;
    padding: 40px 30px 0 25px;
}

.events {
    background: url(../i/bgevents.jpg) no-repeat;
    min-height: 236px;
    padding: 30px 30px 0 40px;
}

.news h2, .events h2 {
    text-align: center;
    color: black;
    font-weight: bold;
}

table.basket_display {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    border-color: #c0c0c0;
}

table.basket_display th {
    background-color: #808080;
    color: #ffffff;
    border-color: #c0c0c0;
    vertical-align: top;
}

table.basket_display td {
    background-color: #606060;
    color: #ffffff;
    border-color: #c0c0c0;
    vertical-align: top;
}

.basket_input_anzahl {
    width: 30px;
}

div.wk_error {
    margin-top: 10px; 
    margin-bottom: 10px; 
    color: #ff0000;
    font-weight: bold;
}

table.options {
    margin-bottom: 20px;
    text-align: center;
}

tr.options_names td {
    text-align: center;
}

tr.options_radios td {
    text-align: center;
}

#wk_monogramm_initialien {
    width: 50px;
}


#zweitfarbenauswahl img.zweitfarbe {
    margin: 0px;
    padding: 0px;
    border: 0px;
    cursor: pointer;
}

/* Der Container um die Grossversion der Zweitfarbe (#farbkombi_zweitbild). Schneiden den Ausschnitt zu */
div.farbcontainer_zweitfarbe {
/*    width: 230px; */
    height: 375px;
    overflow: hidden;
    margin-left: 1px;
}

/* Farbcode der Farbe */
div.farbcontainer_zweitfarbe p {
    text-align: center;
}

/*  Das Bild mit der Vollansicht der Erstfarbe */
#farbkombi_erstbild {
}

/*  Das Bild mit der Zweitfarbe bei der Erstfarbe. Verwendet für dHHTML */
#farbkombi_zweitbild {
}

/*  Der Link auf den Warenkorb. Verwendet für dHHTML */
#farbkombi_shoplink {
}

/*  Code der Nebenfarbe. Verwendet für dHHTML */
#farbkombi_farbcode2 {
}