/* =============================================================================
   CSS Styles 
   
   designed by: www.scheel-service.de
   ========================================================================== */
/* =============================================================================
   Reset Pattern
   ========================================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
abel,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
b,
strong {
  font-weight: bold;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  vertical-align: middle;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  overflow: visible;
}
button[disabled],
input[disabled] {
  cursor: default;
}
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
/* =============================================================================
   from HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  display: inline;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
svg:not(:root) {
  overflow: hidden;
}
/* ===== Primary Styles ========================================================
   
   ========================================================================== */
/**************** sticky footer *********************/
#stickyfooterspace,
footer {
  height: 88px;
}
/* 110 -22 */
html,
body {
  height: 100%;
}
#stickyfooterwrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}
body {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #140f11;
  background: url(../png/ARLD_Hintergrund.jpg) top left repeat;
  position: relative;
}
.line {
  height: 10px;
  width: 100%;
  background: #da9026;
}
.page-centered {
  width: 954px;
  /* 960 - 4 */

  margin: 0 auto;
  border: 2px solid #ffffff;
}
.toprounded {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-top-left-radius: 2px;
}
.bottomrounded {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
}
.rounded3 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.topmargin26 {
  margin-top: 26px;
}
header {
  height: 98px;
  /* 102 -4 */

}
.greygradient {
  background: #e9e9e9 ;
  /* Old browsers */

  background-image: linear-gradient(bottom, #e9e9e9 40%, #fefefe 67%, #ffffff 86%);
  background-image: -o-linear-gradient(bottom, #e9e9e9 40%, #fefefe 67%, #ffffff 86%);
  background-image: -moz-linear-gradient(bottom, #e9e9e9 40%, #fefefe 67%, #ffffff 86%);
  background-image: -webkit-linear-gradient(bottom, #e9e9e9 40%, #fefefe 67%, #ffffff 86%);
  background-image: -ms-linear-gradient(bottom, #e9e9e9 40%, #fefefe 67%, #ffffff 86%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E9E9E9, endColorstr=#ffffff)";
}
.greyline {
  background: #c6c7c8;
  width: 954px;
  /* 960 - 4 */

  margin: 0 auto;
  height: 1px;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
div#logo {
  background: url(../png/logo-arld.png) top left no-repeat;
  width: 100%;
  height: 100%;
}
/*   top navigation */
.topnav {
  padding-top: 40px;
  margin-left: 515px;
}
.topnav ul li {
  position: relative;
  color: #140f11;
  font-size: 13px;
  font-weight: bold;
  float: left;
  display: inline;
  text-align: left;
  padding-top: 2px;
}
.topnav ul li a {
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  color: #140f11;
  font-size: 12px;
  font-weight: bold;
  float: right;
  padding-bottom: 5px;
}
.topnav ul li a:hover {
  color: #E27100;
}
.topnav ul ul {
  display: none;
  position: absolute;
  top: 20px;
  left: 0px;
  background: #ffffff;
  padding: 0px;
  border: 1px solid #dddddd;
  z-index: 999;
}
.topnav ul li:hover > ul {
  display: block;
}
.topnav ul li ul li a.last {
  border: none;
}
.topnav ul ul li:hover {
  background: #E27100;
  background-image: linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -o-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -moz-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -webkit-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -ms-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
}
.topnav ul ul a {
  color: #140f11;
  font-size: 12px;
  font-weight: bold  !important;
  text-align: left;
  border-bottom: 1px solid #dddddd;
  display: block;
  width: 109px;
  padding-top: 5px;
}
.topnav ul li ul li a:hover {
  color: #140f11;
}
.title {
  font-size: 12px;
  font-weight: bold;
  display: inline;
  padding-left: 10px;
  line-height: 18px;
}
/*  footer */footer {
  background: #da9026;
  text-align: center;
  padding-top: 22px;
}
footer p,
footer a {
  font-family: Arial, sans-serif;
  color: #3e3d40;
  font-size: 13px;
}
footer a:hover {
  text-decoration: none;
}
/* header picture with sub nav */
.header-pic {
  height: 310px;
}
.header-pic#start {
  background: url(../png/arld-top.png) top left no-repeat;
}
.header-pic#impressum {
  background: url(../png/Impressum-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#geschichte {
  background: url(../png/Firmengeschichte-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#uebersicht {
  background: url(../png/Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#kontakt {
  background: url(../png/Kontakt-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#portfolio {
  background: url(../png/Portfolio-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#produktion {
  background: url(../png/Produktion-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#varianten {
  background: url(../png/Varianten-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#uebersicht {
  background: url(../png/Sonderanfertigung-Leistungen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#kfz {
  background: url(../png/Sonderanfertigung-KFZ-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#industrie {
  background: url(../png/Sonderanfertigung-Industrie-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#muster {
  background: url(../png/Muster-Ronden-und-Muenzen-ARLD-GmbH.jpg) top left no-repeat;
}
.header-pic#Datenschutz {
  background: url(../png/Datenschutz-ARLD-GmbH.jpg) top left no-repeat;
}





.subnav {
  padding-top: 16px;
  padding-left: 12px;
}
.subnav ul {
  border: 1px solid #dddddd;
  background: #f1f1f1 ;
  /* Old browsers */

  background-image: linear-gradient(bottom, #f1f1f1 40%, #fdfbfc 86%);
  background-image: -o-linear-gradient(bottom, #f1f1f1 40%, #fdfbfc 86%);
  background-image: -moz-linear-gradient(bottom, #f1f1f1 40%, #fdfbfc 86%);
  background-image: -webkit-linear-gradient(bottom, #f1f1f1 40%, #fdfbfc 86%);
  background-image: -ms-linear-gradient(bottom, #f1f1f1 40%, #fdfbfc 86%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#fdfbfc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#fdfbfc)";
  height: 35px;
  width: 928px;
}
.subnav ul li {
  position: relative;
}


.subnav ul li {
  width: 111px;
  text-align: center;
  float: left;
  display: inline;
  height: 35px;
}
.subnav li.home { width: 40px;}
.subnav li:hover,
.subnav li.focus {
  background: #E27100;
  background-image: linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -o-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -moz-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -webkit-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -ms-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
}
.subnav ul li a {
  color: #140f11;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding-top: 10px;
  padding-bottom: 6px;
  border-right: 0px solid #dddddd;
  margin-top: 1px;
}

.subnav a.kontakt {
  border: none;
}
.subnav ul li ul {
  display: none;
  position: absolute;
  top: 35px;
  left: 0px;
  background: #ffffff;
  padding: 0px;
  border: 1px solid #dddddd;
  z-index: 999;
  width: 110px;
  height: 140px;
}
.subnav ul li:hover > ul {
  display: block;
}
.subnav ul li ul li a.last {
  border: none;
}
.subnav ul li ul li {
  width: 110px;
  text-align: left;
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}
.subnav ul li ul li:hover {
  background: #E27100;
  background-image: linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -o-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -moz-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -webkit-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -ms-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
}
.subnav ul li ul a {
  color: #140f11;
  font-size: 12px;
  font-weight: bold  !important;
  text-align: left;
  border: none;
  border-bottom: 0px solid #dddddd;
  display: block;
  padding: 0;
  padding-top: 9px;
  margin: 0;
  height: 26px;
  padding-left: 15px;
}
.subnav ul li ul li a:hover {
  color: #140f11;}



a.home {background: url(../png/home.png) center 9px no-repeat;height: 17px;}
/* li.home { padding-right:0px; padding-left:0px;}  */


a.last {background: url(../png/land/uk-klein.png) center 0px no-repeat;height: 33px;padding-top: 0px;
  padding-bottom: 0px;margin-top: 0px;}
/* li.last { padding-right:0px; padding-left:0px;}  */


/* main */
.main {
  padding: 17px 17px 20px 17px;
  width: 926px;
  /* 960 - 17 -17*/

  margin: 0 auto;
  margin-top: 27px;
  background: #ffffff;
}
.left {
  width: 730px;
  float: left;
}
.right {
  width: 178px;
  float: right;
}
.no-bottom-padding {
  padding-bottom: 0px !important;
}
.teaser.small {
  width: 46%;
  float: left;
}
.teaser.huge {
  width: 96.2%;
  float: left;
}
.teaser.margin-left {
  margin-left: 10px;
}
.teaser .fl-right {
  float: right;
  width: 49%;
}
/* teaser box */
.teaser {
  background: #eceded;
  border: 1px solid #c8c9ca;
  padding: 10px;
  overflow: hidden;
  height: 408px;
  position: relative;
}
.teaser.noborder {
  background: transparent;
  border: none;
}
.teaser h1,
h2.produktion {
  font-size: 18px;
  font-weight: bold;
  color: #140f11;
  padding-bottom: 10px;
}
.teaser.nopadding {
  padding: 0;
}
h2.produktion {
  color: #3e3d40;
  padding-top: 45px;
  padding-left: 10px;
  padding-bottom: 0px;
}
.teaser h2 {
  font-size: 15px;
  font-weight: bold;
  color: #da9026;
  padding-bottom: 20px;
}
.teaser h2.padding-top {
  padding-top: 14px;
  padding-bottom: 8px;
}
.teaser h2.black {
  color: #000000;
}
.teaser p,
.teaser li,
.teaser h3 {
  font-size: 12px;
  font-weight: normal;
  color: #140f11;
  line-height: 19px;
}
.teaser h3 {
  font-weight: bold;
}
.teaser p > span {
  width: 102px;
  float: left;
}
.teaser p > span.last {
  width: 80px;
}
.teaser p a,
.teaser li a {
  font-size: 12px;
  font-weight: normal;
  color: #da9026;
  text-decoration: underline;
}
.teaser li a {
  font-size: 12px;
}
.teaser p a:hover,
.teaser li a:hover {
  text-decoration: none;
}
.teaser img {
  padding-bottom: 10px;
}
.teaser ul {
  list-style: outside;
  list-style-image: url(../png/pfeil-mit-ring-klein.png);
  padding-left: 320px;
}
.teaser ul.short-padding {
  list-style: outside;
  list-style-image: url(../png/pfeil-mit-ring-klein.png);
  padding-left: 40px;
  padding-top: 10px;
}
.teaser li {
  line-height: 18px;
}
.teaser.margin-top {
  margin-top: 23px;
}
.mehr-button {
  background: #E27100;
  background-image: linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -o-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -moz-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -webkit-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -ms-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  float: right;
  /* border: 1px solid #e1cdb5; */

}
.mehr-button a.mehr-button {
  display: block;
  font-size: 19px;
  font-weight: bold;
  color: #140f11;
  padding-top: 5px;
  padding-bottom: 5px;
  text-decoration: none;
  background: url(../png/pfeil-schwarz2.png) 10px 5px no-repeat;
  text-align: left;
  padding-left: 40px;
  width: 80px;
}
/* muster */
.muster {
  background: #000000;
  padding: 20px 12px 20px 12px;
  text-align: center;
  height: 134px;
  /* 174 - 20 -20 */

  overflow: hidden;
}
.muster p {
  color: #da9026;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.muster p span {
  font-size: 20px;
  letter-spacing: 0.05em;
}
.muster div.button,
div.kontakt-button {
  background: #E27100;
  background-image: linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -o-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -moz-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -webkit-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  background-image: -ms-linear-gradient(bottom, #e27100 40%, #f2a32c 67%, #f2a32c 86%);
  margin-top: 12px;
}
.muster a.button,
a.kontakt-button {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #140f11;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  padding-left: 5px;
  background: url(../png/pfeil-schwarz2.png) 2px 6px no-repeat;
}
a.kontakt-button {
  padding-left: 30px;
}
div.kontakt-button {
  width: 38%;
  float: right;
}
/* telefon */
.telefon {
  background: #000000 url(../png/telefon.png) 8px 12px no-repeat;
  padding: 30px 12px 20px 12px;
  text-align: left;
  margin-top: 10px;
  height: 93px;
  /* 158 -30 -20 */

  overflow: hidden;
}
.telefon p {
  font-size: 12px;
  font-weight: bold;
  color: #da9026;
  padding-left: 50px;
  letter-spacing: 0.05em;
}
.telefon p span {
  font-size: 25px;
  font-weight: bold;
}
.telefon p#tel {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0em;
  text-align: center;
  padding: 0;
  padding-top: 5px;
}
.telefon p#zeit {
  font-size: 10px;
  font-weight: normal;
  text-align: right;
  letter-spacing: 0.04em;
  padding: 0;
  color: #ffffff;
  padding-right: 3px;
  line-height: 15px;
}
/* firma */
.firma {
  background: #000000;
  padding: 11px 12px 11px 12px;
  text-align: center;
  margin-top: 0px;
  height: 46px;
  /* 68 -11 -11 */

  overflow: hidden;
}
.firma p {
  font-size: 12px;
  font-weight: bold;
  color: #da9026;
  letter-spacing: 0.05em;
}
.firma p.white {
  color: #ffffff;
}
/* leistungen */
.leistungen {
  text-align: left;
  padding: 10px 12px 20px 12px;
  border: 1px solid #cacbcc;
  background: #eceded;
  height: 460px;
  /* 500 -20 -20 */

  overflow: hidden;
  margin-top: 10px;
}
.leistungen.noborder {
  background: transparent;
  border: none;
}
.leistungen h2 {
  font-size: 13px;
  font-weight: bold;
  color: #da9026;
  padding-bottom: 10px;
}
.leistungen h2.padding-top {
  padding-top: 18px;
}
.leistungen ul,
.t-leistungen ul {
  list-style: outside;
  list-style-image: url(../png/pfeil-schwarz.png);
  padding-left: 20px;
}
.t-leistungen {
  margin-left: 15px;
  margin-top: 15px;
  width: 300px;
  float: left;
}
.leistungen img {
  border: none;
  padding-bottom: 3px;
}
.leistungen li,
.leistungen p {
  font-size: 12px;
  font-weight: normal;
  color: #000000;
  padding-top: 10px;
}
.leistungen a.link_leistungen {
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  background: url(../png/pfeil-schwarz.png) top right no-repeat;
  padding-right: 15px;
  display: block;
  margin-top: 10px;
}
/* impressum */
.impressum h2 {
  padding-bottom: 0px;
  padding-top: 10px;
}
.table-col {
  float: left;
  width: 300px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 11px;
}
.table-col.first {
  width: 170px;
  border-right: 1px solid #9c9e9f;
  padding-left: 0px;
}
.table-col.head {
  border-bottom: 1px solid #9c9e9f;
  padding-top: 0px;
}
/************** FORMULARE **********************/
.overlay {
  background: #000000;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.form-outer {
  background: #ffffff;
  width: 780px;
  opacity: 0.7;
  height: 780px;
  z-index: 101;
  position: absolute;
  top: 35px;
  left: 50%;
  margin-left: -390px;
}
.form-kontakt {
  background: #000000 url(../png/haken.jpg) 40px 30px no-repeat;
  padding: 40px 90px 30px 90px;
  opacity: 1;
  width: 560px;
  /* 740 -90 -90 */

  position: absolute;
  z-index: 102;
  top: 55px;
  left: 50%;
  margin-left: -370px;
  height: 670px;
  /* 720 - 40 - 30 */

}
.teaser .form-kontakt {
  position: relative;
  margin-left: 0px;
  top: 0px;
  left: 0px;
  width: 550px;
  /* 720 -90 -90 */

  height: 830px;
}
.form-kontakt h1 {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #c6c7c8;
  padding-bottom: 30px;
}
.form-kontakt h2 {
  font-size: 13px;
  color: #da9026;
  padding-bottom: 17px;
}
.form-kontakt h3 {
  font-size: 13px;
  color: #c6c7c8;
  padding-bottom: 5px;
}
.form-kontakt input[type=checkbox] {
  background: #c6c7c8;
  border: none;
  display: inline;
  width: 20px;
  height: 20px;
  border: none;
  margin-bottom: 5px;
}
.form-kontakt label {
  color: #c6c7c8;
  font-size: 13px;
}
.form-kontakt input[type=text] {
  background: #c6c7c8;
  display: inline;
  border: none;
  color: #3e3d40;
  font-weight: bold;
  margin-bottom: 18px;
  padding: 2px;
}
.form-kontakt input[type=text].shortfield {
  background: #c6c7c8;
  display: inline;
  border: none;
  color: #3e3d40;
  font-weight: bold;
  margin-bottom: 18px;
  padding: 2px;
  width: 50px;
  margin-top: 14px;
}
.form-kontakt .first-in-row,
.form-kontakt .second-in-row {
  float: left;
  width: 47%;
}
.form-kontakt .second-in-row {
  float: right;
}
.form-kontakt .second-first {
  float: left;
  width: 30%;
}
.form-kontakt .second-second {
  float: right;
  width: 65%;
}
.form-kontakt div.vertrauen {
  background: url(../png/vertrauen.png) top left no-repeat;
  height: 45px;
  padding-top: 3px;
  padding-left: 50px;
}
.form-kontakt div.vertrauen p {
  font-size: 10px;
  color: #c6c7c8;
}
.form-kontakt textarea {
  width: 555px;
  /* 559 - 2- -2*/

  height: 180px;
  background: #c6c7c8;
  border: none;
  display: inline;
  color: #3e3d40;
  font-weight: bold;
  margin-bottom: 18px;
  padding: 2px;
}
.form-kontakt div.kontakt-button {
  width: 145px;
}
fieldset {
  margin-bottom: 20px;
}
.abbrechen-button {
  background: #696a6a;
  background-image: linear-gradient(bottom, #696a6a 40%, #838484 67%, #bcbdbe 86%);
  background-image: -o-linear-gradient(bottom, #696a6a 40%, #838484 67%, #bcbdbe 86%);
  background-image: -moz-linear-gradient(bottom, #696a6a 40%, #838484 67%, #bcbdbe 86%);
  background-image: -webkit-linear-gradient(bottom, #696a6a 40%, #838484 67%, #bcbdbe 86%);
  background-image: -ms-linear-gradient(bottom, #696a6a 40%, #838484 67%, #bcbdbe 86%);
  float: left;
  /* border: 1px solid #e1cdb5; */
}
.abbrechen-button a.abbrechen-button {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #140f11;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  padding-left: 40px;
  width: 80px;
  background: url(../png/pfeil-mit-ring-links.png) 2px 6px no-repeat;
}
h2.grey {
  color: #3e3e3e;
}
div.design {
  float: left;
  width: 220px;
  position: relative;
  margin-right: 10px;
  /* height:200px; */

  padding-top: 10px;
}
div.design h1 {
  font-size: 14px;
}
div.design-inner {
  border: 5px solid #c7c7c9;
  height: 150px;
  width: 210px;
  position: relative;
}
div.design-tip {
  position: absolute;
  top: 197px;
  left: 0px;
  z-index: 999;
  display: none;
  width: 204px;
  border: 5px solid #ffffff;
  font-size: 12px;
  padding: 3px;
  background: #ffffff;
  background-image: linear-gradient(bottom, #ebebeb 0%, #ffffff 67%);
  background-image: -o-linear-gradient(bottom, #ebebeb 0%, #ffffff 67%);
  background-image: -moz-linear-gradient(bottom, #ebebeb 0%, #ffffff 67%);
  background-image: -webkit-linear-gradient(bottom, #ebebeb 0%, #ffffff);
  background-image: -ms-linear-gradient(bottom, #ebebeb 0%, #ffffff 67%);
}
div.design:hover > div.design-tip {
  display: block;
}
/* =============================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
/* =============================================================================
   
   ========================================================================== */
/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden;
}
.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clear {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* =============================================================================
   Print Styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -ms-filter: none !important;
  }
  /* Black prints faster: h5bp.com/s */
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  /* Don't show links for images, or javascript/internal links */
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}