@font-face {
    font-family: 'Liberation Sans Narrow';
    src: url('fonts/liberationsansnarrow-regular-webfont.eot');
    src: url('fonts/liberationsansnarrow-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/liberationsansnarrow-regular-webfont.woff') format('woff'),
         url('fonts/liberationsansnarrow-regular-webfont.ttf') format('truetype'),
         url('fonts/liberationsansnarrow-regular-webfont.svg#LiberationSansNarrowRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Liberation Sans Narrow';
    src: url('fonts/liberationsansnarrow-bold-webfont.eot');
    src: url('fonts/liberationsansnarrow-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/liberationsansnarrow-bold-webfont.woff') format('woff'),
         url('fonts/liberationsansnarrow-bold-webfont.ttf') format('truetype'),
         url('fonts/liberationsansnarrow-bold-webfont.svg#') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/***** zk theme reset */

.z-a, .z-label, .z-radio-cnt, .z-checkbox-cnt, input.button, input.file, .z-loading, div.z-column-cnt,
div.z-row-cnt, div.z-grid-header th.z-column, div.z-grid-header th.z-auxheader, .z-textbox, .z-decimalbox,
.z-intbox, .z-longbox, .z-doublebox, .z-tab-seld .z-tab-text, .z-tabs-cnt li, .z-tab .z-tab-text,
div.z-listfooter-cnt, div.z-listcell-cnt, div.z-listheader-cnt,
.z-toolbarbutton-cnt {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
.z-tabs .z-tabs-cnt, .z-tabpanel, .z-tabbox-ver .z-tabpanels-ver {
	border: none;
}
.z-textbox-readonly, .z-intbox-readonly, .z-longbox-readonly, .z-doublebox-readonly, .z-decimalbox-readonly {
	background: inherit
}
.z-popup .z-popup-cl {
	background: none;
	border: none;
	padding: 10px;
}
.z-popup.z-errbox .z-popup-cl {
	padding: 0;
}
.z-popup .z-popup-cnt {
	margin: 0;
	padding: 0;
	line-height: inherit;
	zoom: inherit;
	font-family: 'Roboto', 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Condensed', sans-serif;
}

.z-button-os {
	font-family: inherit;
}


/* misc. ========== */

h1 {
	font-size: 1.5em;
	text-align: center;
}
h4 {
	font-weight: 400;
	color: #0452CC;
}
a {
	text-decoration: none;
	color: #0452CC;
}

a:hover {
	cursor: pointer;
}
hr.clear {
	clear: both;
	height: 0;
	border: none;
	margin: 0;
	padding: 0;
}
hr.clearleft {
	clear: left;
	height: 0;
	border: none;
}
p {
	margin: 0.5em 0;
}
textarea {
	line-height: 20px;
}
.downArrow {
	background-image: url('img/tablink-down.png');
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

input[type="checkbox"] {
	-moz-appearance:    none;
	-webkit-appearance: none;
	width:              24px;
	background:         transparent;
	vertical-align: middle;
}

input[type="checkbox"]:checked {
	background: url(img/check.svg) center no-repeat;
	background-size: 12px;
}

input[type="checkbox"] + label {
	vertical-align: middle;
}

input[type="checkbox"], input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"] {
	border:      1px solid #e5e5e5;
	height:      24px;
	line-height: 22px;
}

input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"] {
	background: #fff;
	color:      #0452CC;
	text-align: center;
}

.z-textbox-inplace, .z-decimalbox-inplace, .z-intbox-inplace, .z-longbox-inplace, .z-doublebox-inplace {
	background-color: #fff;
}

.z-textbox {
	color: #000;
}

/* button ========== */

button, input[type='submit'], input[type='file'] {
	color: white;
	background: #0452CC;
	border: none;
	font-weight: bold;
	font-family: inherit;
	font-size: 15px;
	padding: 8px;
	cursor: pointer;
	line-height: 22px;
}
button:hover {
	background-color: #003399;
	text-decoration: none;
}
button.light {
	color: #0452CC;
	background: #fff;
	border: 1px solid #99CCFF;
}

button.light:hover {
	border-color: #0452CC;
	background: #0452CC;
	color: #fff;
}

button.small {
	font-size:      12px;
	letter-spacing: 0.5px;
	line-height: 18px;
}

button.z-button-os-disd, button[disabled] {
	background-color: #ccc;
}

.big-button {
	width: 100%;
	height: 40px;
	font-size: 17px;
	font-weight: normal;
}

.z-button-tl, .z-button-tm, .z-button-tr,
.z-button-bl, .z-button-bm, .z-button-br,
.z-button-cl, .z-button-cr {
	display: none;
}
.z-button-os-disd, .z-button.z-button-disd .z-button-cm {
	cursor: default;
}

.z-button-os.z-button-os-disd:hover, .z-button.z-button-disd:hover .z-button-cm {
	text-decoration: none;
}

button.z-button-os-disd, button[disabled], button.z-button-os-disd:hover, button[disabled]:hover {
	background-color: #e5e5e5;
	color: #555;
	border-color: #aaa;
}

.z-button, .z-button tr td {
	font-family: inherit;
}
.z-button-os.cartButton, .z-button.cartButton tr td {
	font-size: 18px;
}
.bold-spacer {
	display:block;
	font-weight:normal;
	height:1px;
	color:transparent;
	overflow:hidden;
	visibility:hidden;
	margin-bottom:-1px;
}

.modeller-header {
	text-transform: uppercase;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 5px;
	font-size: 12px;
	margin: 0 0 20px 0;
	letter-spacing: 2px;
	line-height: 20px;
	font-weight: normal;
}

.select-menu {
	display: inline-block;
	position: relative;
	cursor: pointer;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
}

.select-menu:after {
	display: block;
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	margin-top: -6px;
	background: url(img/caret-right.svg) no-repeat;
	height: 12px;
	width: 12px;
	transform: rotate(90deg);
}

.select-menu > *:not(.menu) {
	font-size:      20px;
	letter-spacing: .5px;
	margin-right:   16px;
	font-weight:    normal;
	min-width:      92px;
	display:        inline-block;

	max-width: 100%;
	/* overflow-x: hidden; */
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
	box-sizing: border-box;
}

.select-menu.opened {
	box-shadow: rgba(107, 107, 107, 0.2) 5px 5px 12px 0px;
}

.select-menu .menu {
	position:         absolute;
	max-height:       539px;
	width:            100%;
	overflow-x:       hidden;
	overflow-y:       auto;
	z-index:          2;
	background-color: #fff;
	box-shadow:       rgba(107, 107, 107, 0.2) 5px 5px 12px 0px;
	top:              100%;
	left:             0;
	display:          none;
	font-weight:      300;
	font-size:        14px;
	list-style-type:  none;
	padding:          0;
	margin:           0;
	min-width:        200px;
	border:           1px solid #e5e5e5;
	box-sizing:       content-box;
	margin-left:      -1px;
}

.select-menu.right-aligned .menu {
	left: auto;
	right: 0;
}

.select-menu.opened .menu {
	display: block;
}

.select-menu .menu li {
	line-height: 1.5;
	padding: 3px 16px;
}

.select-menu .menu li:not(.heading) {
	cursor: pointer;
}

.select-menu .menu li:not(.heading):hover {
	background-color: #f8f8f8;
	color: #0452CC;
	font-weight: normal;
	position: relative;
	top: -1px;
}

.select-menu .menu li.heading {
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-top: 12px;
}

.select-menu .select-button {
	width: 100%;
	height: 100%;
}

.select-menu .select-button:hover {
	background-color: #f8f8f8;
}

.ox-tab {
	cursor: pointer;
}

/* skeleton ========== */

body {
	font: 14px/normal 'Roboto', 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Condensed', sans-serif;
	color: #333;
	background: #fff;
	padding: 0;
	margin: 0;
	font-weight: 300;
	font-style: normal;
}

.header {
	position:    relative;
	z-index:     1;
	background:  #f8f8f8;
	font-size:   18px;
	line-height: 22px;
	border-bottom: 1px solid #e5e5e5;
}

.content{
	margin-top: 70px;
}

.content, .content .z-popup {
	position: relative;
	z-index: 0;
	padding: 10px;
}
.footer {
	position: relative;
	margin: 10px 0;
	padding: 16px 10px 5px 10px;
	font-size: 14px;
	background:  #FFF;
	height: 93px;
	clear: both;
}
.footer > .aligned {
	position: relative;
}
.aligned {
	width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.header .title {
	position: relative;
	padding: 0 10px;
}
.header .title p, .footer p, .footer ul {
	padding: 0;
	margin: 0;
}

.header .title .primary {
	position: absolute;
	left: 0;
	bottom: 0;
}
.header .title .primary > * {
	display: inline-block;
}
.header .title .logo {
	margin-right: 10px;
}

.header .title .secondary {
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: right;
}
.header .title .primary .menu li > a {
	border-bottom: 2px solid transparent;
	letter-spacing: 0.5px;
}
.header .title .primary .menu li > a:hover, .header .title .primary .menu li.selected > a {
	padding-bottom: 12px;
	border-bottom: 2px solid #0452CC;
}
.header .title .secondary .menu li > a:hover span, .header .title .secondary .menu li.selected > a span {
	position: relative;
	top: -1px;
}

.header .title .menu {
	list-style-type: none;
	vertical-align: bottom;
}
.header .title .menu li {
	display: inline-block;
	vertical-align: bottom;
}
.header .title .menu li > a {
	display: block;
	padding: 11px 21px;
	text-align:center;
	font-weight: 300;
}
.header .title .menu li > a:hover, .header .title .menu li.selected > a {
	font-weight: normal;
	color: #0452CC;
}

.header .title .menu li > a .onnothover, .header .title .menu li > a:hover .onhover {
	display: inline-block;
}

.header .title .menu li > a:hover .onnothover, .header .title .menu li > a .onhover {
	display: none;
}

.header .secondary .menu li {
	text-align: center;
	font-size: 12px;
}

.header .secondary .menu li span {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
}

.header .secondary .menu li .langSelect img {
	margin-bottom: 10px;
}

.header .secondary .menu li a {
	padding:    0;
	width:      80px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.footer .primary > * {
	display: inline-block;
	margin-right: 10px;
}
.footer .menu {
	list-style-type: none;
	line-height: 28px;
}
.footer .menu li {
	display: inline-block;
	padding: 0 8px;
	vertical-align: middle;
}
.footer .secondary {
	text-align: right;
	float: right;
}

.footer .feedback {
	font-weight: bold;
}
.poweredBy {
	color: #999999;
}
.poweredBy span {
	position: relative;
	top: -7px;
	margin-right: 10px;
}


/* login ========== */

.header .personalArea div.selected {
	background: white;
	color: #444;
}
.header .personalInfo {
	z-index: 1;
}
.header .personalInfo.open .personalInfoButton {
	color: #0452CC;
}
.header .personalInfo.open .personalInfoButton .onhover {
	display: inline-block;
}
.header .personalInfo.open .personalInfoButton .onnothover {
	display: none;
}
.personalMenu {
	margin-top: 21px;
	text-align: left;
	position: absolute;
	right: 0;
	width: 400px;
	min-height: 250px;
	background: #fff;
	border: 1px solid #e5e5e5;
	text-align: left;
}
.header .menu .personalMenu li {
	display: block;
}
.personalInfo .personalInfoButton {
	cursor: pointer;
}
.personalInfo.open .personalInfoButton {
	position: relative;
	z-index: 2;
	/*background: #fff;*/
}
.personalInfo .personalMenu a {
	clear: both;
}
form.personalMenu {
	display: block;
	 border:           1px solid #e5e5e5;
}
.header .secondary .menu .personalMenu a {
	display: block;
	width: auto;
	margin-bottom: 0;
	line-height: 1.5;
	padding: 6px 2px;
	font-size: 14px;
}
.header .secondary .menu ul.personalMenu a:hover {
	top: -1px;
	position: relative;
	background-color: #f8f8f8;
}
.personalMenu .email {
	margin-bottom: 5px;
}

.personalMenu .left-column, .personalMenu .right-column {
	float: left;
	height: 65px;
}

.personalMenu .left-column {
	width: 170px;
}

.personalMenu .right-column {
	width: 80px;
}


/* tabs ========== */

.tabs {
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
}
.tabs li {
	display:        inline-block;
	padding:        11px 21px;
	text-align:     center;
	font-weight:    300;
	vertical-align: bottom;
	position: 		relative;
	color: #0452CC;
}
.tabs > li > a:visited{
	color: #0452CC;
}

.tabs li.selected, .ox-selected-tab, .tabs li.ox-selected-tab, .tabs li:hover {
	font-weight: normal;
	color: #0452CC;
	border-bottom: 2px solid #0452CC;
	padding-bottom: 8px;
}
.tabs a:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: -2px;
	right: 0;
}

.tabseparator {
	height: 10px;
	margin: 0;
	padding: 0;
	background: #ece7e4;
	border: none;
}

.tab-container {
	background-color: #f8f8f8;
}


/* sidetabs ========== */

.sidetabs {
	margin: 0;
	padding: 0;
	list-style-type: none;
	/*font-size: 18px;*/
	/*line-height: 22px;*/
}
.sidetabs > li {
	position:    relative;
	display:     block;
	font-size:   16px;
	line-height: 24px;
}
.sidetabs > li > a {
	display: block;
	padding: 2px 0;
}
.sidetabs > li.selected > a {
	cursor: default;
	color: #0452CC;
	font-weight: normal;
}
.sidetabs > li.selected > a:hover {
	text-decoration: none;
}
.sidetabs > li.clickable {
	cursor:              pointer;
	background-image:    url('img/tablink.png');
	background-position: right center;
	background-repeat:   no-repeat;
}

.sidetabs > li.heading {
	background:     none;
	padding:        5px 0;
	margin-top:     25px;
	font-size:      20px;
	font-weight:    normal;
	letter-spacing: .5px;
}

.sidetabs > li.heading:first-child {
	margin-top: 0;
}


/* teaser ========== */

.teaser {
	padding-bottom: 10px;
	font-weight: bold;
	border-left: 1px solid #e5e5e5;
}
.teaser p {
	margin: 0 !important;
	padding: 8px 10px 0 10px;
}
.teaser ul {
	margin: 0;
	padding: 0 10px;
	list-style-type: none;
	font-weight: bold;
}
.teaser li {
	margin-top: 10px;
	padding: 3px;
}
.teaser li img {
	vertical-align: middle;
	margin: 0 10px;
}
.teaser .title {
	color: white;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 2px 0;
}
.teaser .title a {
	color: white;
}


/* boxes ========== */

.box {
	position: relative;
	z-index: 1;
	padding: 10px;
	background: #f8f8f8;
}

.lightbox {
	position: relative;
	z-index: 1;
	padding: 10px;
	background: white;
	border: 10px solid #ece7e4;
}

.box .title, .lightbox .title, .helpbox .title {
	font-size: 18px;
	font-weight: bold;
}

.kit {
	width: 220px;
	float: left;
	margin: 6px 10px 0 0;
	padding: 10px;
	background: #f8f8f8;
	border-radius: 10px;
	font-weight: bold;
}
.kit img {
	vertical-align: middle;
	margin: 0 10px 5px 0;
}


/* layout info ========== */

.layoutTab {
	/*height: 170px;*/
	background-position: 100% 10px !important;
	margin: 0 0 10px;
}
.layoutInfo {
	position:   relative;
	min-height: 196px;
	padding:    20px;
	box-sizing: border-box;
	border: 1px solid #f8f8f8;
}

.layoutInfo .left-column {
	width:        250px;
	/*margin-right: 10px;*/
	float: left;
}

.layoutInfo .right-column {
	float: right;
	width: 80px;
	text-align: right;
}

.layoutInfo .layoutPreview {
	background: white;
	max-width: 100%;
	max-height: 63px;
}
.layoutInfo .mMaterialDescription {
	font-weight: 500;
	font-size:   16px;
	line-height: 24px;
	display: block;
}
.layoutInfo .mMaterialProperties {
	display: inline-block;
	font-size:    14px;
	font-weight:  300;
	line-height:  21px;
	width:        140px;
	vertical-align: top;
	margin-bottom: 0;
}
.layoutInfo .mMaterialProperties > * {
	display: block;
}
.layoutInfo .mMaterialPrice {
	display:        inline-block;
	width:          100px;
	float:          right;
	vertical-align: top;
	text-align:     right;
	margin-top: -9px;
}
.layoutInfo .mMaterialPrice .info {
	display:     block;
	font-size:   10px;
	line-height: 18px;
	margin: 0;
}

.layoutInfo .adminSvgButton {
	margin-top: 10px;
	display: inline-block;
	color: #0452CC;
	text-decoration: underline;
}
.layoutInfo .cartButton {
	margin-top: 10px;
}
.layoutInfo .materialInfo img {
	vertical-align: center;
}
.layoutInfo .controls {
	position:                absolute;
	top:                     0;
	right:                   0;
	visibility:              hidden;
	cursor:                  pointer;
	height:                  18px;
	width:                   18px;
	background-image:        url(img/remove.svg);
	-webkit-background-size: 12px;
	background-size:         12px;
	background-repeat:       no-repeat;
	background-position:     center;
}
.sidetabs > li:hover .controls {
	visibility: visible;
}


/* login ======== */

.login {
	text-align: center;
}
.login .z-textbox {
	padding: 5px;
}
.errorlabel {
	text-align: center;
	margin-top: 30px;
	color: maroon;
}


/* results of designs ========== */

.results > .z-label {
	display: block;
	margin-top: 150px;
	text-align: center;
	font-style: italic;
}
.design {
	float: left;
	position: relative;
	width: 146px;
	height: 168px;
	overflow: hidden;
	margin: 10px 10px 0 0;
	cursor: pointer;
}
.design:hover {
	border-color: #A28780;
}
.design img {
	display: block;
}
.design .designFooter {
	visibility: hidden;
	position: absolute;
	top: 146px;
	left: 0;
	right: 0;
	font-weight: bold;
	text-align: center;
}
.design:hover .designFooter {
	visibility: visible;
}
.design .title {
	display: block;
	padding: 3px 8px;
}
.design .open {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 8px;
	background: #A28780;
	color: white;
}
.design .price {
	display: none;
}
.design .creator {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}


/* design page ========== */

.partTransformCtrl td {
	padding: 1px 3px;
}

.mainImageContainer .modeller-header {
	margin-top: 0;
}


/* tooltip ========== */

.tool-tip {
	position: absolute;
	max-width: 250px;
	border: 1px solid gray;
	padding: 0px 5px;
	color: gray;
	font-weight: normal;
	background-color: #FFFFED;
	z-index: 1000001;
}

.paging {
	float: right;
	margin: 15px 10px;
	width: 750px;
	text-align: right;
}
.paging span, .paging a {
	padding: 2px 4px;
	font-weight: bold;
}

.paging .selected {
	background: #e5e5e5;
}


/* pulldown menu ========== */

.pulldown .menu {
	position: absolute;
	left: 0;
	right: 0;
}
.pulldown .menu .z-button-os {
	display: block;
	width: 100%;
}

.gallery {
	position: absolute;
	top: 520px;
	left: 180px;
	padding: 0px;
	font-size: 0px;
	white-space: nowrap;
	width: 1013px;
	overflow: hidden;
	text-indent: -173px;
}
.gallery li {
	display: inline-block;
	vertical-align: top;
	text-indent: 0;
	width: 173px;
}
.gallery img {
	border: 1px solid #e5e5e5;
}

.mDescription {
	font-size: 17px;
	line-height: 31px;
}
.mDescription h2 {
	display: none;
}
.mDescription h4 {
	font-size: 17px;
	font-weight: normal;
	margin: 15px 0;
}
.mDescription p {
	margin: 15px 0 55px;
}