/* RESPONSIVE */
*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

body, html { height:100%; width:100%; margin:0; background:#ddd; font-family:'Helvetica', Verdana, Arial; color:#000;  }

/*
REM
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
*/

.global_box { max-width:1280px; }
.global_box { background:#fff;  margin:0 auto; margin-top:0; border:1px solid #ddd; }

/* Logo  Neu */
#titelLogo { float:left; margin:0 auto; padding-top:12px;
font-family:'Helvetica', Verdana, Arial; color:#f5f5f5; font-weight:bold; letter-spacing:1px;
text-shadow:0px 2px 3px #222; }

#titelSlogan {
 margin-top:-2px; padding:2px 2px 2px 8px;
font-family:'Helvetica', Verdana, Arial; color:#f70; font-weight:bold; letter-spacing:3px;
text-shadow:0 1px 1px #222; }

#lang_icon_box { position:relative; top:0px; left:100%; padding:4px; max-width:70px;}
#lang_icon { position:absolute; top:60px; right:76px; width:70px; height:20px; }
.lang_icon, .lang_icon:hover { width:24px;height:auto; opacity:1; filter: opacity(1); margin:1px; }
.lang_icon:hover { -webkit-filter: opacity(.8); filter: opacity(.8); }

/* *** Header - Logo, Globale-Box, Menue-Box, Content-Box *** */
#hd_top {  background:#2F5E8C; width:100%; margin:0; padding:0 0 0 0; }

#logo_box_top { background:transparent; max-width:1280px; height:100%; margin:0 auto; padding:1px 4px 1px 12px;}

#navi_box_bg { max-width:1280px; margin:0 auto; border:0; }


/* Eingabefelder *** */
input, textarea, select, .eingabe, .eingabe_reg, .button, .button_red, .but_reg, .but_reg_ov, .tab_r4 {
-moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; }

#bn_text { width:99%; height:180px; }
textarea, .eingabe { background:#fdfdfd; font-size:0.875rem; padding:.5rem; border:1px solid #ddd;}
.eingabe_reg { background:#fdfdfd; font-size:0.875rem; padding:.5rem; margin:2px 0; border:1px solid #ddd;}

.eingabe:focus, .eingabe_reg:focus, select:focus, textarea:focus { 
background:#fefefe; border:1px solid #cacaca; box-shadow:0 0 5px #cacaca; 
-webkit-transition:box-shadow .5s, border-color .25s ease-in-out; 
transition: box-shadow .5s,border-color .25s ease-in-out;}

.eingabe:hover, .eingabe_reg:focus, select:hover, textarea:hover { 
background:#fefefe; box-shadow:0 0 5px #cacaca;
-webkit-transition:box-shadow .5s, border-color .25s ease-in-out; 
transition: box-shadow .5s, border-color .25s ease-in-out;
}

input, textarea, select, optgroup, option { width:80%;}
input[submit], .button { font-size:0.875rem; max-width:180px; }

input[type="checkbox"], input[type="radio"] { width:auto; margin:2px; vertical-align: middle; }

.inp_login { width:115px; font-size:0.75rem;}

.inp_datum { width:210px;}

.div1, .div2 {padding:5px 1px 5px 1px; text-align: left;}

.div10 { float:left; width:10%; padding:2px; }
.div20 { float:left; width:20%; padding:2px; }
.div50 { float:left; width:50%; padding:2px; }

/* Media Querys */
@media screen and (max-width: 40em), screen and (max-device-width: 30em) {
body, html { font-size:1.125rem; /*18*/}
table, td, div, span, a { font-size:1.25rem; /*20*/}

  #hd_top {height:76px;}
  .tabelle_form { width:100%; }

   input, textarea, select, optgroup, option { width:95%;}
  .inp_login { width:106px; font-size:0.75rem;}
  .inp_vname { width:34%}
  .inp_name { width:60%}
  .inp_plz { width:25%}
  .inp_ort { width:68%}

  #titelLogo { font-size:1.5rem; } /* 24 */
  #titelSlogan { font-size:0.6875rem; } /* 12 */
  #navi_box_bg, #navi_box_top { margin-top:0; }
  #login_box_top { clear:left; padding:2px 4px; margin-top: 1px;}
  #lang_icon { top:48px; right:70px; padding:4px}

    .div1, .div2, .div10, .div20, .div50 { width:100%;}
}

@media print, screen and (min-width: 40em) {
body, html { font-size:1.1rem; /*12*/}

  #hd_top {height:89px;}
  .tabelle_form { width:80%; }
   input, textarea, select, optgroup, option { width:90%;}
  .inp_vname { width:34%}
  .inp_name { width:55%}
  .inp_plz { width:18%}
  .inp_ort { width:71%}

  #titelLogo { font-size:2rem; } /* 32 */
  #titelSlogan { font-size:0.8125rem; } /* 13 */
  #navi_box_bg, #navi_box_top { margin-top:2px; }
  #login_box_top { clear:left; padding:2px 4px; margin-top: 1px;}
  #lang_icon { top:56px; right:76px; }
  .div1, .div2 {float:left; width:50%;}

    .div10 { float:left; width:9%; padding:1px; }
    .div20 { float:left; width:27%; padding:1px; }
    .div50 { float:left; width:46%; padding:1px; }
}

@media print, screen and (min-width: 64em) {
  body, html { font-size:1rem; }

  #hd_top {height:100px;}
  .tabelle_form { width:60%; }

  .inp_vname { width:34%}
  .inp_name { width:55%}
  .inp_plz { width:12%}
  .inp_ort { width:77%}

  #titelLogo { font-size:2.625rem; } /* 42*/
  #titelSlogan { font-size:1rem; }
  #navi_box_bg, #navi_box_top { max-width:1280px; margin:0 auto; margin-top:2px; border:0; }
  #navi_box_top { margin-top:0; }
  #login_box_top { float:right; padding:2px 6px; margin-top: -34px;}
  #lang_icon { top:65px; right:76px; }

  .div1, .div2 {float:left; width:50%; }

  .div10 { float:left; width:8%; padding:2px; }
  .div20 { float:left; width:26%; padding:2px; }
  .div50 { float:left; width:50%; padding:2px; }
}


/* *** Allgemeine Links *** */
a:link, a:active, a:visited {  color:#369; text-decoration:none; font-size:0.875rem; font-weight:normal; }
a:hover { color:#47b; text-decoration:none; font-size:0.875rem; font-weight:normal; }


/* CONTENT */
#content_box { width:100%; margin-top:14px; }

td, th, span, div { vertical-align:top; color:#333; font-size:0.875rem; }
hr { background-color:#666; height:1px; line-height:1px;}
form { display:inline; }
li { padding:1px 0 1px 0;}
img { border:0; }
.img_ctr { vertical-align:middle; padding:0; margin:0px 4px 0px 4px; }
.img_navi { vertical-align:middle; padding:0; margin:0px 2px 1px 0px; }

.titel { background:transparent; font-size:1.5rem; text-align:left; color:#369;
font-weight:500; text-shadow:0 1px 2px rgba(0,0,0,0.25); padding:8px 2px 8px 6px; margin-top:-20px;  }

.titel2 { background-color:#fff; font-size:0.875rem;text-align:left;color:#D75600;font-weight:bold;
padding:4px 3px 4px 3px; margin-top:1px;border:1px solid #e0e0e0; }

.titel3 {
background:#fff; font-size:0.8125rem; color:#4A576F; font-weight:bold;
padding:3px 2px 3px 8px; border-top:1px solid #F7FAFD; border-bottom:1px solid #86A3BF; } /* #4A576F; #25518C; */

/* *** Untertitel Bestellform, Preisausgabe *** */
.bm_subtitle { background-color:transparent;
font-size:1.1rem; font-weight:500; color:#f60; padding:10px 2px 10px 4px; } /* text-shadow:0px 1px 1px #950;  */

.tabelle, .tabelle_form { /* Neu:padding:5px; margin:0 auto; */
background-color:#fff; color:#333; font-size:0.875rem; padding:8px; margin:0 auto; }


.tabelle_u { color:#222; border:1px solid #ccc; }

.tab_bg  { background-color:#e0e0e0; width:99%; margin:0 auto; border-collapse:separate; border-spacing:1px; }

.td_bg, .td_bg3, .td_bg4, .td_bg5, .td_bg6, .td_bg7, .bg_blue, .bg_green, .bg_red, .bg_yel {
background-color:#fff; font-size:0.875rem; color:#222; padding:3px; }

/* Neu 2.0 */
.td_bg2 { background-color:#e5e5e5; padding:5px 2px 5px 5px; }
.td_bg3 { width:30%;}
.td_bg4 { width:40%;}
.td_bg5 { width:50%;}
.td_bg6 { width:60%;}
.td_bg7 { width:70%;}



.bg_blue { background-color:#D7E6F4; color:#369; padding:2px; }
.bg_green, .tab_green { background-color:#DFB; color:#070; padding:2px; }
.bg_red, .tab_red  { background-color:#FDD; color:#B00; padding:2px; }
.bg_yel { background-color:#FFFFB3; color:#333; padding:2px; }

.tab_green, .tab_red { font-weight:normal; padding:10px 14px; border:1px solid #ADA; }
.tab_red { border:1px solid #fbb; }

.lp6, .cp6 { padding:6px 4px 6px 4px; }
.cp6, .ta_c  { text-align:center; margin:0 auto; }
.ta_m, .ta_mr { vertical-align:middle; }
.ta_mr { text-align:right; padding-right:5px;}
.ta_l { text-align:left; }
.ta_r { text-align:right; }

.tab_navi { background-color:#E8F2FF;
color:#369; font-weight:bold; padding:5px 2px 5px 5px; border:1px solid #e0e0e0;}

.spanInfo { padding:12px 22px 12px 22px; }

.divInfo { position:relative; width:100%; height:0px; text-align:center;
top:10px; left:0px; z-index:2; display:block; padding:0; margin:0 auto; }

.hits_in_top { background:none; color:#444; FONT-SIZE:0.6875rem;}

.error {color:#e00; font-weight:500; }

/* Seitenweises blättern */
.menue { background:#DFE6F4; padding:0; border:1px solid #86A3BF; }

.menuediv {font-size:0.8125rem;}

.menuediv a { display:block;
background-color:transparent; color:#265694; font-size:0.8125rem; text-decoration:none; padding:4px 2px 4px 5px;
border-top:1px solid #f5f5f5; border-bottom:1px solid #ACBFD2; }

.menuediv a:hover { background-color:#F7F7F7; font-size:0.8125rem; color:#e00; text-decoration:none; }

.button, .button_login, .button_red {
-moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; }

.button, .button_login {
background:#E8EDF7; background:linear-gradient(#EFF4FA, #B4CDE7); /* blau: #EFF4FA, #B4CDE7 grau: #EFF4FA, #B4CDE7 */
cursor:pointer;
font-weight:normal; font-size:0.8125rem; color:#369; padding:7px 9px 7px 9px;
border:1px solid #ccc; text-shadow:0 1px 1px rgba(0,0,0,0.25); }

.button_login { font-size:0.8125rem; padding:8px; }

.button_red {
background:#DFE6F4; cursor:pointer;
font-weight:normal; font-size:0.8125rem; color:#e00; padding:7px 9px 7px 9px;
border:1px solid #ccc; text-shadow:0 1px 1px rgba(0,0,0,0.25); }

/* Button Hover */
.button:hover, .button_login:hover, .button_red:hover { background:#EFF4FA; }

.tabelle_u, .tab_red, .tab_green {
-moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; }

.button, .button_red, .but_reg, .but_reg_ov {
-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 1px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 1px 3px 3px rgba(0, 0, 0, 0.3); }


/* *** Deaktivierte Selectfelder ****************** */
input[disabled], select[disabled], input[disabled]:hover, select[disabled]:hover, optgroup[disabled], option[disabled] {
background-color:#ffd5d5; border:1px solid #c0c0c0; }
/* ****************** */

.small {color:#333; font-size:0.75rem; font-weight:500;}

/* --- Navigation Seitenweises Blättern ----------*/
.img_navi, .vsbm_navi {font-size:0.8125rem; padding:0; }

.img_navi a, .vsbm_navi a, .img_navi a:hover, .vsbm_navi a:hover, .img_navi_ov, .vsbm_navi_ov {
display:inline; font-size:0.8125rem; text-decoration:none; margin:1px; padding:4px 8px; border:1px solid #ccc;
-moz-border-radius:4px; -webkit-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; }

.img_navi a, .vsbm_navi a {
background:#E8EDF7; background:linear-gradient(#EFF4FA, #B4CDE7); color:#265694;}

.img_navi a:hover, .vsbm_navi a:hover { background:#EFF4FA; color:#265694; }

/* *** Aktive Seite -- Seitenweise Blättern */
.img_navi_ov, .vsbm_navi_ov { background:#EFF4FA; color:#F50; border:1px solid #aaa; }

/* *** Hintergrund Statistikbalken *** */
.bm_stat_grafik { background:#fff; height:16px; width:95%; margin:2px 0;} /* border:1px solid #e5e5e5; */
.bm_stat_grafik_or, .bm_stat_grafik_red { height:16px; margin:1px 0;
border-width:1px; border-style:solid; border-color:#fff #999 #999 #fff;}

/* Green: (#3d3, #393); #B7E8B7, #A2E1A2, Red: (#fb0, #d65600), Blue: (#7195FF, #3F7EBE) #6289FF, Orange  (#f95, #f83) */
.bm_stat_grafik_or { background:#B7E8B7; background:linear-gradient(#B7E8B7, #A2E1A2);
/* < IE 10*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B7E8B7', endColorstr='#A2E1A2'); }
.bm_stat_grafik_red { background:#f95; background:linear-gradient(#f95, #f83);
/* < IE 10*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f95', endColorstr='#f83'); }
.stat_count { font-size:12px; text-align:right; padding:0 2px 2px 0; color:#000; }

/* *** Buttons - Zeit, Klick & View Preisliste *** */
.vsbm_but_blue a {
display:block; float:left; background-color:#E8EDF7; background:linear-gradient(#EFF4FA, #B4CDE7);
font-size:0.875rem; font-weight:normal; color:#369; padding:5px 8px; margin:0;
border:1px solid #ccc; overflow:visible; white-space:nowrap; text-align:center; }

.vsbm_but_blue a:hover { background:#EFF4FA; color:#47a; text-decoration:none; }

.vsbm_but_ov a {
display:block; float:left; background-color:#fbfbfb;
font-size:0.875rem; font-weight:normal; color:#369; padding:5px 8px; margin:0;
border:1px solid #ccc; overflow:visible; white-space:nowrap; text-align:center; }

.vsbm_but_ov a:hover {color:#47a; text-decoration:none;}

/* *** Preislist/Details *** */
.vsbm_pl_td1 { background-color:#f9f9f9; color:#333; font-size:0.875rem; padding:5px; }
.vsbm_pl_td2 { background-color:#fdfdfd; color:#333; font-size:0.875rem; padding:5px; }
.vsam_pl_camp_titel { color:#111; font-size:0.875rem; font-weight:bold; padding:3px 2px 3px 5px; }
.vsam_pl_camp_content { color:#333; font-size:0.875rem; padding:3px; }

/* *** IE 10 *** */
.ie10 .button { padding:5px 5px 4px 5px; }

.am_footer { background:#274F76; background:linear-gradient(#2F5E8C, #274F76, #274F76); width:100%; height:auto; color:#ddd;
padding:12px 2px 2px 2px; margin:0; border-top:2px solid #bbb; border-bottom:2px solid #222;}

.am_footer a:link, .am_footer a:active, .am_footer a:visited { color:#e9e9e9; font-size:0.875rem; }
.am_footer a:hover { color:#b9b9b9; text-decoration:underline; }

.footer_box_title { color:#f9f9f9; font-weight:bold; font-size:0.875rem; padding:2px 4px 4px 0;}

.footer_box_first { float:left; min-width:150px; width:25%; padding:4px 6px 4px 6px;
border-left:1px solid #666; border-right:1px solid #666;}
.footer_box_middle { float:left; min-width:150px; width:25%; padding:4px 6px 4px 6px; border-right:1px solid #666;}
.footer_box_last { float:left; min-width:150px; width:25%; padding:4px 6px 4px 6px; border-right:1px solid #666;}

/* Checkbox V2 CSS only */
.checkbox {display:none;}

.checkbox + label {
position:relative; display:inline-block; background-color:#fafafa;
box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding:9px; border:1px solid #cacece;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; }

.checkbox + label:active, .checkbox:checked + label:active {
box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }

.checkbox:checked + label {
background-color:#e9ecee; color:#393; /* 99a1a7 */border:1px solid #adb8c0;
box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); }

.checkbox:checked + label:after { position:absolute; top:0px; left:3px;
content:'\2714'; font-size:14px; color:#393; font-weight:bold; }

.big-checkbox + label {	padding:18px;}
.big-checkbox:checked + label:after { font-size:28px; left:6px; }

.div_checkbox { position:relative; left:0; top:0; width:100%; height:28px; width:auto; vertical-align:middle;}
.txt_checkbox { float:left; padding:4px 6px; margin-top:-3px; }
.label_checkbox { float:left; }

/* Media Querys - Checkbox */
@media screen and (max-width: 40em), screen and (max-device-width: 30em) {
  .div_check_box { width:100%; height:54px; }
  #titelSlogan { letter-spacing:1px; }
  .hide_for_small { display:none; }
}

@media print, screen and (min-width: 40em) {
  .div_check_box { width:100%; height:34px; }
  #titelSlogan { letter-spacing:2px; }
  .hide_for_small { display:block; }
}

@media print, screen and (min-width: 64em) {
  .div_check_box { width:100%; height:34px; }
  .hide_for_small { display:block; }
}


