/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    border-left:0px none; border-right:0px none; border-bottom:0px none; display: block;
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0px none;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    background: #fff url('../img/bg_main.jpg') no-repeat center 165px;
    text-align:center;
    color:#b1b1b1
}
p, h1, h2 {
    font-family:Georgia, sans-serif;
    font-size:16px;
}
a:focus {outline: none;}
a, a:visited {text-decoration:none;}
ul, li {list-style-type:none;}
ul{overflow:hidden;margin:0;padding:0;width:100%;}

header img {margin:36px;}
header a{display:inline-block;}

h1 {
    background: url('../img/img_border_bottom.gif') repeat-x 0 bottom;
    color:#b1b1b1;
    font-weight: normal;
    height:33px;
    line-height:30px;
    margin:0;
    width:814px   
}
h1:before{
    content: "";
    display: block;
    background: url('../img/img_border_bottom.gif') repeat-x 0 bottom;
    height: 1px;
    width: 100%
}
h2 {color:#b1b1b1;font-weight: normal;}
#impressumBody {
    background: #fff url('../img/impressum_bg.png') no-repeat center 0;
    text-align:center;
    color:#b1b1b1
}

#wrapper {
    padding-bottom: 75px;
    position:relative;
    width:814px;;
    margin:auto;
}
.select {
    display:inline;
}
.select div {
    width:330px;
    height:448px;
    padding:0;
    border:0px none;
    display:block;
    background-color:transparent;
    transition: all 1s ease-in-out; 
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s
}
h1,
.select div h2{text-transform: uppercase;}
.select div:hover {
    background-image:url('../img/rollover.png');
    transition: all 1s ease-in-out; 
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s
}
footer a:hover,
.select div:hover h2{color: #ac8d58;}
header{
    background: url('../img/img_border_bottom.gif') repeat-x 0 bottom;
}
.klavier {
    float:right;
    margin-right:41px;
}
.flugel {
    float:left;
    margin-left:41px;
}
.flugel img {
  margin-top:41px;
}
.flugel h2 {
  margin-top:-20px;
}
.klavier img {
  margin-top:94px;
}
.klavier h2 {
  margin-top:-24px;
  }
}
#content {
    width:auto;
    height:300px;
}
#impressumContent {
    padding-left: 24px;
    text-align:left;
    width:auto;
    min-height:331px;  
}
#impressumContent p {
  font-size:12px;
  font-family:Arial;
}
#impressumContent
#col1 {
  width:450px;
  margin-right:24px;
  float:left;
}
#col2 {
  width:292px;
  float:left;
}
#content ul {
  margin-top:45px;
}
#devider {
  height:100px;
}
footer{
    background: url('../img/img_border_bottom.gif') repeat-x 0 top;
    float: left;
    margin-top: 25px;
    padding-top: 15px
}
#footerLink {
    height:51px;
    width:814px;
}
footer a {
  color:#b1b1b1;
}
footer p {
  color:#b1b1b1;
  line-height:2;
  font-size:10px;
  opacity: 1;
  margin:0;
  width:auto;
  float:left;
}
footer #right {
  float:right;
}
/*************************************
                DETAIL 
**************************************/
#groupNavi,
#productNavi {
    background: url('../img/img_border_bottom.gif') repeat-x 0 bottom;
    display: table;
    margin:0;
    width: 766px;
    text-align: justify;  
    font-size: 0;
    font-size: 12px\9; padding-left:24px; padding-right:24px; padding-top:0; padding-bottom:0
}
#groupNavi{margin-top:0px;}
#groupNavi a,
#productNavi a {
    color:#b1b1b1;
    display: table-cell;
    font-family: Georgia, Times, serif;
    font-size: 14px;
    line-height: 14px;
    margin:0;
    opacity:0.8;
    padding:10px 0px;

    zoom: 1;
    *display: inline;

}
#groupNavi a{
    
    text-align: center;
    text-transform: uppercase;
}
/* Hack still not working */
/*
#productNavi:after {
    box-sizing: border-box;
    position: relative;
    line-height: 15px;
    background:#f00;

    content: ".";
    width: 100%;
    display: inline-block;

    zoom: 1;
    *display: inline;
}
*/
#productNavi a.disabled,
#productNavi a.disabled:hover {color:#b1b1b1;cursor: default;opacity:0.3;}
#groupNavi a:hover,
#groupNavi a.active,
#productNavi a:hover {color:#A58E67;}
#productNavi a.active {color:#A58E67;font-weight:bold;}


#details{background-color: #fff;float:left;text-align: left;padding:30px 24px;width:150px;}
#details h3, #details h4{font-family:Georgia,Times,serif;font-weight: normal;}
#details h3{color:#a58e67;margin-bottom:3px;margin-top:0;font-size: 30px;}
.detailDimensions{font-size: 12px;font-style: italic;}
.detailDimensions strong{font-style: normal;}
#detailtext{color:#acacac;font-size: 13px;margin:0;}
#detailtext p{font-family:Arial,Helvetica,sans-serif;font-size: 13px;opacity:1;margin-top:0;}

.selectTile{overflow:hidden;padding-bottom:33px;width:100%;}
#finishesTitle,
.selectTile h4{color:#808080;font-size:15px;margin:0;}
.selectTile .tile h4{margin:0;opacity:0.6;}
.selectTile .tile{float:left;}

.detailImgContainer{float:left;padding-top:5px;text-align:center;width:10px;}


#finishes{margin-bottom: 15px;margin-left:-4px;margin-top: 5px;}
#finishes a img{height:53px;width:54px;}
#finishes li, .formatList li{float:left;padding-bottom:5px;padding-left:4px;}
#format3D li:first-child{padding-left:0px;}
#finishes a, .formatList a{display:block;height:53px;position: relative;width:54px;}
.formatList{margin-top:5px;}

#finishes a:before, 
.formatList a:before {
  background: url('../img/bg_overlay_white.png');
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  opacity: 0.6;
  position: absolute;
  left: 0px;
  height: 53px;
  top: 0px;
  width: 54px
}
#finishes a:hover:before, 
#finishes a.active:before,
.formatList a:hover:before,
.formatList a.active:before {
  /*background-color: transparent;*/
  background-image: url('none');
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  opacity: 1;
  position: absolute;
  left: 0px;
  height: 45px;
  top: 0px;
  width: 46px;
  border: 4px solid #c5a977

}
    }
}