/* matthias stuff */
.lineAtBottomHeadline h1, .lineAtBottomHeadline h2, .lineAtBottomHeadline h3, .lineAtBottomHeadline h4, .lineAtBottomHeadline h5 { border-bottom:solid 1px #bcbcbc; padding-bottom:8px; margin-bottom:7px; }
.csc-form-element-textblock { margin-top: 15px !important; }

/* frank stuff */
.configurator #main { width:1035px; }

.configurator .nextButton { display:inline-block; color:#fff; font-size:16px; width:47px; height:50px; line-height:50px; text-decoration:none; text-align:right; padding-right:20px; background:url(../img/bg-green-next-button.png) center center no-repeat; }
.configurator .textLink { font-size:16px; color:#7f7f7f; line-height:50px; }
.configurator .backLink { font-size:16px;  display:inline-block; color:#fff; width:50px; height:50px; line-height:50px; text-decoration:none; text-align:left; padding-left:17px; background:url(../img/bg-orange-prev-button.png) center center no-repeat; }

.configuratorTopBox { color:#929191; font-size:14px; }
.configuratorTopBox .stepBox { height:33px; padding-left:58px;  }
.configuratorTopBox .stepBox.step0 { background:url(../img/bg-step-0.png) top left no-repeat; }
.configuratorTopBox .stepBox.step1 { background:url(../img/bg-step-1.png) top left no-repeat; }
.configuratorTopBox .stepBox.step2 { background:url(../img/bg-step-2.png) top left no-repeat; }
.configuratorTopBox .stepBox.step3 { background:url(../img/bg-step-3.png) top left no-repeat; }
.configuratorTopBox .stepBox.step4 { background:url(../img/bg-step-4.png) top left no-repeat; }
.configuratorTopBox .stepBox .step { float:left; line-height:32px; width:200px; padding-left:29px; }
.configuratorTopBox .stepBox .step:first-child { width:212px; padding:0 0 0 17px; }
.configuratorTopBox .stepBox .step.active { color:#fff; }
.configuratorTopBox .headline { line-height:32px; padding-left:105px; text-transform:uppercase; }
.configuratorTopBox .subline { line-height:32px; padding:0 0 4px 105px; }


.configuratorContentBox { width:1035px; min-height:510px; position:relative; background-color:#eeeeef; }
.configuratorContentBox.step2 { background:url(../img/bg-configurator-content-step-2.png) bottom center no-repeat #f9b232; }
.configuratorContentBox .headline { font-size:12px; color:#777; }
.configuratorContentBox .checkbox .headline label { color: #c4004a; }
.configuratorContentBox.step2 .headline { position:absolute; top:43px; left:58px; color:#fff; font-size:24px; }

.configuratorContentBox .optionBox { padding:59px 72px 19px 0; }
.configuratorContentBox .optionBox a { display:block; float:right; clear:right; width:342px; height:60px; line-height:60px; text-transform:uppercase; text-decoration:none; font-size:16px; color:#8f8f8f; margin-bottom:12px; background:url(../img/configurator-category-option-bg.png) top left no-repeat; position:relative; }
.configuratorContentBox .optionBox .text { padding-left:24px; }
.configuratorContentBox .optionBox .icon { position:absolute; top:0; right:53px; line-height:60px; }

.configuratorContentBox .optionBox2 { padding:75px 86px 0 0; }
.configuratorContentBox .optionBox2 .box { float:right; width:130px; margin-left:24px; }
.configuratorContentBox .optionBox2 a { display:block; background-color:#fff; }
.configuratorContentBox .optionBox2 .icon { margin-bottom:24px; opacity:0.5; transition:all 0.8s; }
.configuratorContentBox .optionBox2 a:hover .icon { opacity:1; transition:all 0.8s; }

.configuratorContentBox .boxLeft { width:509px; float:left; min-height:640px; background:#fcfcfc; background: -moz-linear-gradient(45deg,  #fcfcfc 0%, #b8b9b9 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fcfcfc), color-stop(100%,#b8b9b9)); background: -webkit-linear-gradient(45deg,  #fcfcfc 0%,#b8b9b9 100%); background: -o-linear-gradient(45deg,  #fcfcfc 0%,#b8b9b9 100%); background: -ms-linear-gradient(45deg,  #fcfcfc 0%,#b8b9b9 100%); background: linear-gradient(45deg,  #fcfcfc 0%,#b8b9b9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#b8b9b9',GradientType=1 ); }
.configuratorContentBox .boxRight { width:526px; float:right; min-height:640px;  }

.configuratorContentBox .preview { position:relative; background:url(../img/bg-preview-frame.png) top left no-repeat; }
.configuratorContentBox .preview .headline { position:absolute; top:18px; left:20px; }
.configuratorContentBox .preview .image { position:absolute; top:60px; left:101px; }
.configuratorContentBox .preview .nextButtonBox { position:absolute; top:567px; left:435px; }
.configuratorContentBox .preview .backButtonBox { position:absolute; top:566px; left:33px; }
.configuratorContentBox .preview .widthValue { position:absolute; top:534px; left:102px; width:348px; background:url(../img/bg-preview-width-value.png) top left no-repeat; text-align:center; }
.configuratorContentBox .preview .widthValue .text { padding-top:10px; }
.configuratorContentBox .preview .widthValue .formatTitle { font-weight:bold; font-size:16px; padding-top:4px; }
.configuratorContentBox .preview .heightValue { position:absolute; top:61px; left:0; width:97px; height:468px; background:url(../img/bg-preview-height-value.png) top left no-repeat; }
.configuratorContentBox .preview .heightValue .text { position:absolute; top:49%; right:0; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

.configuratorContentBox .configGroup { border-bottom:dashed 2px #929191; margin:18px 22px; clear:both; }
.configuratorContentBox .configGroup:hover { z-index:100; }
.configuratorContentBox .configGroup:last-child { border-bottom:none; }
.configuratorContentBox .configGroup .headline { padding:0 0 14px 4px; }
.configuratorContentBox .configItemList { margin:0 0 20px 4px; width:462px; overflow-y:auto; }
.configuratorContentBox .configItemList.height-1 { max-height:280px; }
.configuratorContentBox .configItemList.height-2 { max-height:202px; }
.configuratorContentBox .configItem { float:left; border:solid 1px #929191; padding:6px 12px; margin:5px 8px 5px 0; cursor:pointer; }
.configuratorContentBox input[type="checkbox"].configInput.inputItem { width: auto; margin-top: -10px; }
.configuratorContentBox .configItem:hover,
.configuratorContentBox .configItem.active { border:solid 3px #929191; padding:4px 10px; }

.configuratorContentBox .configItemText { height:172px; float:left; margin:5px 10px 5px 0; cursor:pointer; }
.configuratorContentBox .configItemText .title { border:solid 1px #929191; padding:7px 13px; text-align:center; font-weight:bold; line-height:16px; font-weight:bold; font-size:15px; text-transform:uppercase; }
.configuratorContentBox .configItemText:hover .title,
.configuratorContentBox .configItemText.active .title { border:solid 3px #929191; padding:5px 11px; }
.configuratorContentBox .configItemText .frame { border:solid 1px #bdbdbd; padding-top:13px; height:85px; width:70px; }
.configuratorContentBox .configItemText .formatTitle { text-align:center; line-height:16px; font-weight:bold; font-size:16px; padding-top:7px; }
.configuratorContentBox .configItemText .format { font-size:12px; line-height:12px; text-align:center; }

.configuratorContentBox .inputBox { padding:0 0 14px 4px; position:relative; }
.configuratorContentBox .configInput { background-color:rgba(255,255,255,0.4); border:solid 1px #8f8f8f; height:28px; line-height:28px; width:308px; padding:0 10px; color:#8f8f8f; }
.configuratorContentBox .configTextarea { background-color:rgba(255,255,255,0.4); border:solid 1px #8f8f8f; height:36px; line-height:18px; width:308px; padding:5px 10px; color:#8f8f8f; }
.configuratorContentBox .inputOptions { display:none; position:absolute; top:30px; left:4px; padding:1px 1px 0 1px; background-color:#fff; -webkit-box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); z-index:100; }
.configuratorContentBox .inputOptions.forTextarea { top:48px; }
.configuratorContentBox .optionItem { height:28px; line-height:28px; width:306px; padding:0 10px; background-color:#fff; overflow:hidden; white-space:nowrap; border:solid 1px #8f8f8f; margin-bottom:1px; cursor:pointer; }
.configuratorContentBox .optionItem.active,
.configuratorContentBox .optionItem:hover { background-color:#eee; }
.configuratorContentBox .formatBox { display:none; position:absolute; top:-14px; left:344px; padding:10px 10px 20px; background-color:#dedede; border:solid 1px #6c6c6c; border-radius:9px; -webkit-box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); z-index:100; }
.configuratorContentBox .formatBox .arrow  { position:absolute; top:13px; left:-22px; width:22px; height:35px; background:url(../img/bg-format-layer-arrow.png) top left no-repeat; }
.configuratorContentBox .formatBox .headline { font-size:12px; color:#777; line-height:26px; padding:0 0 0 8px; }
.configuratorContentBox .formatBox .dropdownBox { position:relative; }
.configuratorContentBox .dropdown { width:314px; height:28px; line-height:28px; border:solid 1px #6c6c6c; font-size:14px; padding-left:14px; margin-bottom:14px; background:url(../img/bg-dropdown-fullwidth.png) top left no-repeat; cursor:pointer; position:relative; }
.configuratorContentBox .formatBox .dropdown { width:184px; background:url(../img/bg-dropdown-text-wide.png) top left no-repeat; }
.configuratorContentBox .small .dropdown { width:59px; background:url(../img/bg-dropdown-text-small.png) top left no-repeat; }
.configuratorContentBox .dropdownBox img { vertical-align:baseline; }
.configuratorContentBox .formatBox .inputOptions { left:0; width:99%; }
.configuratorContentBox .formatBox .optionItem { width:auto; }
.configuratorContentBox .closeOptions { position:absolute; bottom:-19px; right:0; background-color:#e6bd4c; font-size:12px; color:#fff; line-height:16px; padding:1px 12px; cursor:pointer; border:1px solid #fff; -webkit-box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); box-shadow: 8px 8px 8px -2px rgba(0,0,0,0.2); }

.configuratorContentBox .colorPicker .dropdown .color { position:absolute; top:4px; left:14px; width:20px; height:20px; }
.configuratorContentBox .colorPicker .color-red { background-color:#a61e2c; }
.configuratorContentBox .colorPicker .color-911863 { background-color:#911863; }
.configuratorContentBox .colorPicker .color-cbc3a9 { background-color:#cbc3a9; }
.configuratorContentBox .colorPicker .color-db9e27 { background-color:#db9e27; }

.configuratorContentBox .colorPicker .inputOptions { border:0; padding:0; }
.configuratorContentBox .colorPicker .optionItem { margin:0; float:left; height:auto; padding:3px; border:solid 1px #a7a8a8; }
.configuratorContentBox .colorPicker .optionItem .color { width:17px; height:17px; }
.configuratorContentBox .formatBox .colorPicker .inputOptions { width:75px; }

.configuratorContentBox .floatLeft { float:left; }
.configuratorContentBox .floatright { float:right; }
.configuratorContentBox .halfWidth { width:75%; }

.configuratorContentBox .radioBox { position:relative; }
.configuratorContentBox .radioBox .headline { position:absolute; top:-32px; left:-4px; }
.configuratorContentBox .radioItem { float:left; margin-right:7px; cursor:pointer; }
.configuratorContentBox .radioItem:hover,
.configuratorContentBox .radioItem.active { background-color:#fff; }
.formatBox .radioBox .headline { display: none; }

.configuratorContentBox .uploadBox { min-height:50px; }

.configuratorContentBox .yellowButton { height:30px; background-color:#e6bd4c; font-weight:bold; color:#fff; line-height:30px; cursor:pointer; }
.configuratorContentBox .yellowButton.okButton {  width:40px; text-align:center; }
.configuratorContentBox .yellowButton.uploadButton { background:url(../img/bg-file-upload-icon.png) center right no-repeat #e6bd4c; padding:0 78px 0 12px; margin:0 0 14px 0; float:left; }

/* fixes line-height but on MacOS */
.mac-os .configuratorTopBox .stepBox .step {  position:relative; top:2px; }
.mac-os .configuratorContentBox .dropdown,
.mac-os .configuratorContentBox .optionItem { height:26px; padding-top:2px; }
.mac-os .configuratorContentBox .colorPicker .dropdown,
.mac-os .configuratorContentBox .fontSelect .dropdown,
.mac-os .configuratorContentBox .fontSelect .optionItem { height:28px; padding-top:0; }
.mac-os .configuratorContentBox .colorPicker .optionItem { height:auto; padding-top:3px; }
.mac-os .configuratorContentBox .closeOptions { padding-top:2px; bottom:-20px; }
.mac-os .configuratorContentBox .yellowButton { height:28px; padding-top:2px; }