/* 
Design: Smartphone
CCML-Anpassung:Webdesignconsult
Date:  17.02.2015
Description: Layout für Smartphone
===============================================================================
*/
/* gewählte Designfarben */
/*
picturebordercolor = "#ABABAB"
site.color.foreground = "#000000"
site.properties.design.MOD.pro.buttons.color = "#000000"
site.properties.design.MOD.pro.buttons.textcolor = "#EEEEEE"
site.color.foreground = "#000000"
&site.color.link = "#4966A0"
*/

html, body  {color:#000000;}
body {background-color:#D9D9D9;margin:0;padding:0;}
#logo {display:block;}
#youarehere {position:relative;width:640px;margin:5px 0 20px 0;padding:0;font-size:.8em;}
.youre_Color_bottom  {font-weight:bold;color:#900;background-color:transparent;}
.youre_Color   {font-weight:400;color:#900;background-color:transparent;}
#youarehere a.sel {color:#aaa;background-color:transparent;text-decoration:none;}
#youarehere a.sel:hover {color:#B4B4B4;background-color:transparent;border-bottom:1px dotted #000000;text-decoration:none;}
#youarehere a.sup {color:#900;background-color:transparent;font-weight:400 !important;text-decoration:none;}
#youarehere a.sup:hover {color:#B4B4B4;background-color:transparent;border-bottom:1px dotted #EEEEEE;}
#youarehere a.main {color:#B4B4B4;background-color:transparent;font-weight:400 !important;text-decoration:none;}
#youarehere a.main:hover {color:#666;background-color:transparent;}
#header {background:url(./pheader.gif) repeat-x center top #4562A4;margin:0;padding:0;height:96px;width:640px;}
#header ul {list-style:none;margin:0;padding:0;height:96px;width:640px;}
#header li {display:block;float:left;width:100px;text-align:center;}
#header li a {text-decoration:none;color:#eee;font-weight:bold;font-size:18px;line-height:20px;height:20px;padding:70px 0 6px 0;display:block;background-repeat:no-repeat;background-position:center 0;text-shadow:1px 1px 0 #000;}

#header li a.sel {background-position:center -96px;border-radius:10px;background-color:rgba(255,255,255,0.1);color:yellow;}
#header li a#linkhome {background-image:url(./phome.png);}
#header li a#linkback {background-image:url(./pback.png);}

#header li a#backhome  {background-image:url(./psmarthome.png);}
#header li a#linknav {background-image:url(./pnav.png);}
#header li a#linknav {background-image:url(./pnav.png);}
#header li a#linkshop {background-image:url(./pshop.png);width:200px !important;}
#header li a#linkartikel {background-image:url(./partikel.png);}
#header li a#linksearch {background-image:url(./psearch.png);}
#header li a#linkbottom {background-image:url(./pdownfooter.png);}
.togglebox {width:640px;background-color:#fafafa;overflow:hidden;height:0;}
.togglebox ul {margin:0;padding:0;list-style:none;}
.togglebox ul li {border-bottom:1px solid #ABABAB;color:#666;list-style-type:none;background:url(./parrow.gif) right center no-repeat;}
.togglebox ul li.divider {border-bottom:1px solid #ABABAB;color:#fff;list-style-type:none;background:#B7C0C7 url(./pdivider.gif) repeat-x;padding:4px 20px;font-weight:700;font-size:30px;text-shadow:1px 1px 0 #666B6F;}
.togglebox ul li a {color:#3A3A3A;text-decoration:none;font-size:30px;padding:20px;font-weight:700;display:block;text-shadow:1px 1px 0 #C2C2C2;}
#searchform {display:block;margin:0;padding:0;width:640px;height:96px;background-color:#000;position:relative;}
#searchsubmit {border:none;background:url(psearchsubmit.gif);width:185px;height:65px;padding:0;color:#eee;font-size:26px;font-weight:700;position:absolute;top:14px;right:14px;}
#searchcriteria {background:url(./psearchform.png);width:380px;font-size:32px;color:#000;position:absolute;left:16px;top:14px;padding:13px;line-height:38px;border:1px solid #B4B4B4;outline:0;border-radius:8px;}
#content {width:610px;padding:15px;background:#fff url(./pshadow.png) repeat-x;}
#innercontent {width:570px;padding:18px;background-color:#f7f7f7;margin-top:10px;border:1px solid #900;border-radius:8px;}
#footer {width:640px;padding:5px 0;background:url(./pshadow.png) repeat-x;text-align:center;color:#666;text-shadow:1px 1px 0 #eee;font-size:20px;}
#footer a {color:#666;text-shadow:1px 1px 0 #eee;text-decoration:none;font-weight:700;}
.clearer {clear:both;}

/* DWFormgenerator Warenkorbbutton - unterscheidet sich von der "normalen" Version*/
form.warenkorb  {font-family:tahoma;font-size:13px;}
form.warenkorb button {cursor:pointer;margin-top:6px;}
form.warenkorb select {font-family:tahoma;font-size:12px !important;}

/* Tabelle im html-Clip */
table.html {font-size:0.8em;width:100%;text-align:left;}

/* Tabelle Addition im html-Clip */
table.htmlright {font-size:0.8em;float:right;width:400px;position:margin-left:90px !important:}
.sidepictureaddition {margin-left:-10px;max-width:90px;float:left;padding:0;}


a.dwflink:link {text-decoration: underline; color: #0000FF}
a.dwflink:visited {text-decoration: underline; color: #0000FF}
a.dwflink:hover {text-decoration: underline; color: #0000FF}
.fieldset {
 width:90%;
 text-align:left;
 margin-bottom:10px;
}
.basket_head {
 background-image:url(http://www.dw-formmailer.de/images/basket/basket_bg_orange2_hg.png);
 color:black;
}
.font-big {
 font-family:Verdana, sans-serif;
 font-size:16px; font-weight:bold;
 color:#000;
}
.font-small {
 font-family:Verdana, sans-serif;
 font-size:10px; font-weight:normal;
 color:#000;
}

/* Tabelle */
td.tablepic {padding:1px;text-align:center;margin:0  auto;border:1px solid #ABABAB;}
#content table.standard {border:none;font-size:1.0em;}
#content td.cell {border:none;padding:4px;line-height:160%;}
#content td.headercell {color:#fff;padding:1px;font-weight:bold;background-color:#ccc;}

#content table.standard {text-align:left;border-collapse:collapse;border-spacing:0;background-color:transparent;margin-top:10px ;}
#content table.standard.medium{font-size:120%;}
#content table.standard.big{font-size:140%;}
.table {
 background-color:transparent;
 width:90%;
}
.table2 {
 background-color:transparent;
 width:100%;
}
.head {
 background-color:transparent;
}
.main {
 background-color:transparent;
 font-family:Verdana, sans-serif;
 font-size:12px; font-weight:normal;
 color:#000;
}
.foot {
 background-color:transparent;
}
.align {
 text-align:left;
}
.textarea {
 background-color:#fff;
 color:#000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size:10px;
 font-weight: normal;
 border : 1px solid #808080;
 border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
 padding: 2px;
 position:relative;
}
.input {
 background-color:#fff;
 color:#000;
 font-family : Verdana, Helvetica, sans-serif;
 border : 1px solid #808080;
 font-size:10px;
 border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
 padding: 2px;
 position:relative;
}
.select {
 background-color:#fff;
 color:#000;
 font-family : Verdana, Helvetica, sans-serif;
 border : 1px solid #808080;
 font-size:10px;
 border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
 padding: 2px;
 position:relative;
}
.textarea:hover, .textarea:focus, .input:hover, .input:focus, .select:hover, .select:focus {
 border : 1px solid #222222;
}
.button {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 position:relative;
 background-color:#FFDAA2;
 color:#000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size:12px;
 font-weight: bold;
 border : 1px solid #fff;
 min-width: 130px;
}
.button_send {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 position:relative;
 background-color:#83ADDD;
 color:#000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size:12px;
 font-weight: bold;
 border : 1px solid #fff;
 min-width: 130px;
}
.button:hover, .button:focus {
 border : 1px solid #fff;
 text-decoration:none;
 background: #FF944D;
}
.button_send:hover, .button_send:focus {
 border : 1px solid #fff;
 text-decoration:none;
 background: #456CFF;
}
/* Tabelle im html-Clip */
table.html {;font-size:0.8em;color:;}

/* Tabelle Addition im html-Clip */
table.htmlright {font-size:0.8em;;float:right;}
.sidepictureaddition {width:80px;float:left;padding-right:2px;padding-bottom:0;}



/* Picture */
.sidepicture_big {float:left;padding:0 10px 0 0;margin:5px 10px 10px 0;width:320px;}
span.picturecaption,span.sidepicturetext {visibility:hidden;}

/* Eigener Akkordeon von Harlekin (http://www.w2d-forum.de/allgemeine-themen-zu-web-to-date/plugins/registerkarten/18636-tipp-tabreiter-in-akkordeon-einschließen) */
.inhalt {padding:10px;}
.balken {background:url(pbar_closed.png) no-repeat;cursor:pointer;}
.recent {background:url(pbar_open.png) no-repeat;}
h2.balken {padding:4px 0 0 50px  !important;color:#fff !important;font-size:14px !important;text-transform:none;height:30px;width:90%;border-bottom:1px solid #000000;}

/* Tipp des Tages mit Bild */
.tipppicture {float:left;margin:7px 5px 3px 0;padding-right:10px;width:50px;}
ul.shopping  {font-size:.8em;list-style:none;padding:0;margin:0 0 10px 0  !important;}
ul.shopping  li {margin:0 0 2px 0 !important;padding:0 0 0 22px !important;background:url(../images/pbull.gif) no-repeat  0 -8px!important;line-height:160%;}
/* Positionierung der Shopelemente nach neuem Gesetz */
table#Checkinput {margin-top:-40px !important;}
table#AGB_lesen {margin-top:-20px !important;}
span.small {padding:10px 0 !important;font-size:.8em;}

h2.important  {margin:0 0 -20px 0 !important;width:70%;border:none;color:#D6300A !important;}
table#summary  {background-color:#F1F1F1;}
table#summary,table#AGB_lesen,table#billadress,table#personnal,table#account,table#email,table#AGB,table#Checkinput,a.s2d {font-size:.9em !important;}

div.more_oben, div.more_oben a {width:16px;margin-right:5px;margin-left:5px;padding-top:10px;float:right;z-index:100;}
#more_oben {margin:0 0 25px 0;min-height:1px;}
#more {margin:20px 0;padding:0;text-align:right;}
#more_bottom {margin:0;padding:20px 0 ;text-align:right;}
div.more_bottom, div.more_bottom a {width:16px;margin-right:5px;margin-left:5px;padding-top:10px;float:right;z-index:100;}
div.more_bottom a {text-decoration:none;border-bottom:none !important;}
div.more_bottom a:hover {text-decoration:none;}
div.more_bottom a:hover img {border:1px solid #000000;position:relative;margin:0;}

/* Diverses */
div.clearer, .clearer, .clear,h2.clear {clear:both;}
div.distance  {margin:0 0 0 4px;}
span.shop_id, .shop_preis,.price, shop,.error, .teaser_error  {color:#900  !important;font-weight:bold  !important;font-style:normal  !important;}
p.error  {margin-top:20px !important;}
.center {margin:0 auto !important;text-align:center!important;}
div.center  {text-align:center;margin:10px auto;}
span.none {display:none;visibility:hidden;}
span.color  {color:#900 ;}
a.email  {color:#900;background:transparent url(../images/email.gif)  0 5px no-repeat;padding:2px 0 2px 30px;}

/* Link nach oben im Content */
div.toplink  {float:right;line-height:20px;}

p,ul {font-size:1.1em;}

/* Textabsätze Spaltenlayout von harlekin8*/
.spaltenueberschrift {float:left;margin:5px 10px 5px 0;}
.spaltenueberschrift p {clear:left;margin:5px 10px 5px 0 !important;} 

div.zweispaltig, div.dreispaltig {float:left;margin:0 20px 5px 0 !important;}
p.zweispaltig, p.dreispaltig,ul.zweispaltig, ul.dreispaltig {float:left;margin:0 20px 5px 0 !important;}
/* Für alle Browser außer IE 6 und 7 */
.clearfix:after {content:".";display:block;clear:both;font-size:0;height:0;visibility:hidden;}

/* tab-mode */
p.border_bottom  {border-bottom:1px solid #000000;padding:2px 0;}
p.border_bottom_pic {width:360px;border-bottom:1px solid #000000;padding:2px 0;}
h3.h3right  {text-align:right;margin-right:5px;}
h3.h3center  {text-align:center;}


/* Icons für Downloadlinks */
/* CAVE:auf die Hintergrundgrafik von besuchten Links achten */
a.iconlink {padding-left:17px !important;display:inline-block;white-space:nowrap;background-repeat:no-repeat;}
.word  {background-image:url(../images/piconword.gif);background-position:0 2px;}
.web {background-image:url(../images/piconweb.gif);background-position:0 2px;}
.ppt   {background-image:url(../images/piconppt.gif);background-position:0 2px;}
.sound {background-image:url(../images/piconsound.gif);background-position:0 2px;}
.movie {background-image:url(../images/piconmovie.gif);background-position:0 2px;}
.text {background-image:url(../images/picontext.gif);background-position:0 2px;}
.zip {background-image:url(../images/piconzip.gif);background-position:0 2px;}
.pdf {background-image:url(../images/piconpdf.gif);background-position:0 2px;}
.exe {background-image:url(../images/piconexe.gif);background-position:0 2px;}

.home {background-image:url(../images/piconhome.gif);background-position:0 2px;}


#content .line {height:1px;background-color:#B4B4B4;border:none;padding:0;margin:10px 0 30px 0;overflow:hidden;}
#content h2 {font-size:20px;padding:0 0;margin:0;color:#000000;}
#content h3 {font-size:130%;font-weight:800;margin:12px 0 0 0;color:#900;padding:0;color:#CF0A2B;}
#content p {margin:0 0 10px 0;padding:0;line-height:160%;}

#content a {text-decoration:none;font-weight:700;color:#4966A0;}
#content a:hover {text-decoration:underline;}
#content .sidepictureright {float:right;padding:0;margin:10px 0 10px 20px;width:216px;}
#content .sidepicture {float:right;padding:0;margin:0 0 10px 20px;width:300px;}

#content .sidepictureleft {float:left;padding:0;margin:10px 20px 10px 0;width:216px;}
#content .sidepicture img {margin-bottom:8px;display:block;}

.table_sidepictureleft {float:left;padding:0;margin:0 20px 10px 0;width:200px;}
.table_text {padding:5px 0 0 0;}

/* Liste */
#content ul {list-style:none;padding:0;margin:0 0 0 -3px;}
#content li {margin:0 0 6px 0;padding:0 0 0 32px;background:url(../images/pbull.gif) no-repeat 0  -5px;line-height:140%;}
#content ol.count {padding:0;margin:6px 0 0 23px  !important;}
#content ol.count li {background:none;}

/* Picture */
#content img.picture {margin:8px;border-radius:8px;border:1px solid #000000;display:block;}


/* Teaser */
div.teaser {margin:40px 0;border:1px solid #ABABAB;border-radius:8px;background-color:#fafafa;}
div.teaser div.teaserelement {padding:20px;border-top:1px solid #ABABAB;}
div.teaser label.teaserelement {padding:20px;border-top:1px solid #ABABAB;display:block;}
div.teaser div.teaserelement:first-child, div.teaser label.teaserelement:first-child {border-top:none;}

div.teaserpicture {float:right;padding:0;margin:0 0 10px 10px;border:none;}
p.teasertext {margin:0;padding:4px 0;}

.teasernav {clear:both;padding:4px 0;margin:10px 0;text-align:center;border-bottom:1px solid #000000;}
.teasernav a {font-weight:400 !important;}
.buttoncaption {line-height:200%;}

/* Plugin-Styles */
P.s2d  {font-size:180%;color:#4966A0;font-weight:700;margin:0;padding:2px 0;line-height:200%;}
P.s2dsmall  {font-size:80%;}

/** Für Formulare und Shopseiten **/
/* Rahmen und Farbe Formularelemente */
table.formtab select.tx,table.formtab input.tx,table.formtab textarea.tx {border:1px solid #ABABAB;height:30px;}

/* Weitere Styledefinitionen fuer Formularelemente */
/* Rahmen und Farbe Formularelemente Highlight */
table.formtab select.txh,table.formtab input.txh,table.formtab textarea.txh,table.formtab td.txh,table.formtab table.txh {border:1px solid #A70C0C;background-color:#F5E5E5;height:30px;}

/* Tabellenbreite */
table.pluginwidth, table.formtab {width:100%;margin:auto;font-size:.9em;}

table.completewidth, td.completewidth {width:90%;}

/* Breite der Formularfelder */
table.formtab input.tx,table.formtab input.txh,table.formtab textarea.tx,table.formtab textarea.txh {width:86%;}


/* Höhe der Formularfelder */
table.formtab textarea.tx,table.formtab textarea.txh {height:116px;}

/* Farbliche Anzeige von Fehlermeldungen, immer identisch */
table#Onlineform .formtab td.h, .h {color:#A70C0C !important;font-weight:700;}

table.completewidth, td.completewidth {width:90%;}
/* Innenabstand von Formularelementen und Tabellenzellen, immer identisch */
table.formtab input,table.formtab textarea,table.formtab td {padding-left:3px;padding-right:3px;margin:0;font-size:.9em;}
/* Rahmen und Farbe Formularelemente */
table.formtab select.tx,table.formtab input.tx,table.formtab textarea.tx {border:1px solid #ABABAB;}

.formtab input[type=text], .formtab input[type=password], .formtab textarea {background:url(./psearchform.png);}
.formtab input[type=radio], .formtab input[type=checkbox]{width:36px;height:36px;}

/* Shop */
table.formtab select.txh,table.formtab input.txh,table.formtab textarea.txh,table.formtab td.txh,table.formtab table.txh {border:2px solid #ff0000 !important;}

/*Text- und Absatzhervorhebungen */
p:first-letter {
color:#900 !important;
background-color:transparent;
}
p i, li i, td i,
p i, li i, td i,
p em, li em, td em,
p em, li em, td em  {
color:#900 !important;
background-color:transparent;
font-size:1.1em;
}
p.emphasizeleft {
padding-left:10px;
border-left:10px solid #4966A0;
}
p.emphasizeright {
padding-right:10px;
border-right:10px solid #4966A0;
}
p.emphasize {
border-left:10px solid #4966A0;
padding-left:16px;
margin:10px 0;
}


/* Content-Elemente */
.extra {
display:block;
font-size:120%;
border-top:solid 2px #4966A0;
padding:10px 0;
margin:5px 0 0 0;
}
.line {
height:1px;
background-color:#4966A0;
border:none;
padding:0;
margin:0;
overflow:hidden;
}
.w2dptablinks {
padding:12px 0 0 0;
margin-bottom:10px;
border-bottom:1px solid #4966A0;
}
.w2dptablinks a {
font-size:100%;
font-weight:400;
padding:4px 12px;
border-left:1px solid  #4966A0;
border-top:1px solid  #4966A0;
border-right:1px solid #4966A0;
display:block;
float:left;
margin-right:3px;
color:#4966A0;
background-color:#fff;
outline:0;
border-radius:8px;
}
.w2dptablinks a.w2dptabsel {
color:#fff !important; 
background-color:#4966A0;
}
.w2dptablinks a:hover {text-decoration:none;}

.accordion {
border:none;
margin-bottom:0;
}
.accordiontab {
margin:0 -5px 20px 0 ;
padding:0 ;
}
.accordion a {
border-radius:8px 8px 8px 8px;
border-bottom:1px solid #4966A0;
}
.accordion a:hover {
color:#fff; 
background-color:#4966A0;
text-decoration:none;
}
/* Text */
.texttabs {
margin:10px 0;
padding:4px 0;
}
.texttab {
text-decoration:none;
padding:6px 10px;
background-color:#ccc;
color:#000000;
font-weight:400;
}
.texttab:hover {
text-decoration:none;
color:#fff !important;
}
.texttabsel {
background-color:#000000;
color:#fff;
}