#grid-button { display: none; position: fixed; top: 10px; left: 10px; border: solid 1px #777; background-color: white; z-index: 9999; padding: 10px; color: #777; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; } #grid-button:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #test-cnt { width: 960px; margin: 0 auto; } #test-cols { display: block; display: none; width: 960px; margin-left: auto; margin-right: auto; height: 1px; margin-top: -1px; margin-left: 0px; position: relative; z-index: 99999; } .test-cols-cnt { position: absolute; left: 0px; top: 1px; height: 100%; z-index: 99999; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; pointer-events: none; } .col-test { width: 64px; height: 500px; background-color: #3498db; margin-left: 8px; margin-right: 8px; display: inline-block; z-index: 99999; pointer-events: none; } .col { margin-left: 0; margin-right: 16px; display: inline-block; vertical-align: top; } .col0 { margin-left: 0; margin-right: 0px; display: inline-block; vertical-align: top; } .col.mb16, .col0.mb16 { margin-bottom: 16px; } .col:last-child { margin-left: 0; margin-right: 0; } .cols-1 { width: 64px; } .cols-2 { width: 144px; } .cols-3 { width: 224px; } .cols-4 { width: 304px; } .cols-5 { width: 384px; } .cols-6 { width: 464px; } .cols-7 { width: 544px; } .cols-8 { width: 624px; } .cols-9 { width: 704px; } .cols-10 { width: 784px; } .cols-11 { width: 864px; } .cols-12 { width: 944px; } #grid { pointer-events: none; display: block; display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999; } #grid .grid-center { margin: 0 auto; display: block; width: 960px; height: 100%; background-color: #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } #grid .col { display: inline-block; width: 64px; margin: 0 8px; height: 100%; background-color: black; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } img { vertical-align: top; } a img { border: none; } html *, body * { -webkit-appearance: none; } html, body { width: 100%; height: 100%; position: relative; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } html { } body { margin: 0; padding: 0 0 0 0; border: 0; outline: 0; -webkit-appearance: none; position: relative; font-size: 14px; min-width: 960px; } #body { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: 100%; display: block; position: relative; padding: 0 0 132px 0; } .relative { position: relative; } .block { display: block; } .center { text-align: center; } .right { text-align: right; } .center-cnt { margin: 0 auto; display: block; max-width: 944px; width: 944px; padding: 0 8px; } #header { height: 105px; } #header .logo { display: inline-block; width: 516px; height: 33px; position: absolute; top: 52px; left: 9px; } #header a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } #header .logo .img { width: 180px; height: 33px; display: inline-block; vertical-align: top; } #header .logo .txt { display: inline-block; vertical-align: top; text-transform: uppercase; margin: 2px 0 0 18px; font-size: 12px; font-weight: 300; line-height: 16px; color: #3a3e46; } #header div.phone { color: #3a3e46; text-decoration: none; white-space: nowrap; display: inline-block; position: absolute; top: 59px; right: 191px; font-size: 24px; font-weight: 300; line-height: 30px; } #header .phone a { color: #3a3e46; text-decoration: none; } #header .center-cnt { height: 105px; } footer { display: block; width: 100%; } #footer { width: 100%; height: 132px; background-color: #3a3e46; position: absolute; display: block; bottom: 0px; left: 0px; } #footer div.phone { white-space: nowrap; text-decoration: none; position: absolute; right: 8px; top: 15px; font-size: 24px; color: white; font-weight: 300; line-height: 30px; } #footer .phone a { white-space: nowrap; text-decoration: none; color: white; } #footer .logo { position: absolute; bottom: 16px; left: 8px; } #footer .logo .txt { position: absolute; white-space: nowrap; bottom: -2px; left: 85px; color: white; display: inline-block; margin: 0 0 0 20px; font-size: 13px; font-weight: 300; } #footer .center-cnt { height: 132px; } #top-menu { height: 40px; background-color: #f9e48c; } #top-menu ul { display: block; margin: 0; padding: 0; } #top-menu li { list-style-type: none; display: inline-block; } #top-menu li a:hover { color: #868062; } #top-menu li.current:hover span { border: none; } #top-menu li span span { display: inline-block; margin: 0 28px 0 0; line-height: 40px; font-size: 16px; font-weight: 300; text-decoration: none; } #top-menu li a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #3a3e46; display: inline-block; line-height: 40px; font-size: 16px; font-weight: 300; text-decoration: none; } #top-menu li.current a { } #top-menu li a span { margin: 0 28px 0 0; } #top-menu li.current a:hover span { color: #868062; } #top-menu li.current .f { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #3a3e46; } #top-menu li.current .f span { line-height: 40px; font-size: 16px; font-weight: 300; color: #3a3e46; border-bottom: solid 5px #f3cb4c; display: inline-block; height: 35px; } #top-menu li:hover .f span { line-height: 40px; font-size: 16px; font-weight: 300; color: #3a3e46; border-bottom: solid 5px #f3cb4c; display: inline-block; height: 35px; } #top-menu li a span { display: inline-block; line-height: 30px; } #top-menu li:hover a span, #top-menu li.current:hover a span { border-bottom: solid 5px #f5d566; } #btm-menu { height: 35px; margin-left: 5px; } #btm-menu ul { display: block; margin: 0px; padding: 0; } #btm-menu li { list-style-type: none; display: inline-block; } #btm-menu li span { border-top: solid 5px transparent; } #btm-menu li.current span { border-top: none; } #btm-menu li a:hover { color: #b0b1b5; } #btm-menu li:hover span, #btm-menu li:hover a { color: #b0b1b5; } #btm-menu li:hover span { border-top: solid 5px #bba049; color: #b0b1b5; } #btm-menu li.current:hover span { border: none; } #btm-menu li a, #btm-menu li span.f { display: inline-block; margin: 0 28px 0 0; line-height: 35px; font-size: 16px; font-weight: 300; text-decoration: none; } #btm-menu li a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: white; } #btm-menu li.current a:hover span { color: #b0b1b5; } #btm-menu li.current .f { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: white; } #btm-menu li.current .f span { line-height: 35px; font-size: 16px; font-weight: 300; color: white; border-top: solid 5px #f3cb4c; display: inline-block; height: 30px; } #btm-menu li.current:hover a span { border-top: solid 5px #bba049; } #main-section { padding: 55px 0 0px 0; } .field-block { margin: 2px 0 18px 0; } .data { display: none; } .error-text { display: none; color: red; } .error-text p { color: red; } input[type=text], textarea { width: 100%; resize: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: solid 3px white; color: #3a3e46; font-size: 16px; line-height: 18px; font-weight: 300; outline: none; margin: 0; padding: 11px 14px; font-family: 'Roboto', sans-serif; } input[type=text]:focus, textarea:focus { border: solid 3px #f3cb4c; } .error input[type=text], .error textarea { border: solid 3px red; } textarea { height: 147px; } input[type=text]::-webkit-input-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]::-moz-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:-moz-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:-ms-input-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:focus::-webkit-input-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:focus::-moz-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:focus:-moz-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:focus:-ms-input-placeholder { color: #888; text-overflow:ellipsis; } textarea::-webkit-input-placeholder { color: #888; text-overflow:ellipsis; } textarea::-moz-placeholder { color: #888; text-overflow:ellipsis; } textarea:-moz-placeholder { color: #888; text-overflow:ellipsis; } textarea:-ms-input-placeholder { color: #888; text-overflow:ellipsis; } input[type=text]:focus::-webkit-input-placeholder { color: #888; text-overflow:ellipsis; } textarea:focus::-moz-placeholder { color: #888; text-overflow:ellipsis; } textarea:focus:-moz-placeholder { color: #888; text-overflow:ellipsis; } textarea:focus:-ms-input-placeholder { color: #888; text-overflow:ellipsis; } table.popup { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 99; } table.popup td { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); vertical-align: middle; text-align: center; } table.popup .cnt { display: inline-block; max-width: 500px; background-color: white; border: solid 3px #e6e6e6; position: relative; text-align: left; -webkit-box-shadow: 0px 0px 15px #000; -moz-box-shadow: 0px 0px 15px #000; box-shadow: 0px 0px 15px #000; } table.popup .cnt p:first-child { margin-top: 20px; } table.popup .cnt .separator { overflow: hidden; width: 100%; height: 1px; background-color: #e6e6e6; margin: 15px 0 0 0; } table.popup .cnt table { width: 100%; border-collapse: collapse; } table.popup .cnt td { font-weight: 300; background-color: white; color: #3a3e46; } table.popup .cnt td.p { width: 50%; text-align: left; padding: 0 20px 0 0; } table.popup .cnt td.v { width: 50%; text-align: left; } table.popup.text .cnt { margin: 20px; padding: 10px 20px 20px 20px; } table.popup.image .cnt { margin: 0px; padding: 0; } table.popup.image .text { display: block; } table.popup .cnt .close { position: absolute; top: 5px; right: 3px; width: 20px; height: 20px; line-height: 20px; cursor: pointer; font-size: 28px; font-weight: 700; -webkit-transition: color 0.5s linear; -o-transition: color 0.5s linear; -moz-transition: color 0.5s linear; transition: color 0.5s linear; } table.popup.text .cnt .close { color: #bbbbbb; } table.popup.text .cnt .close:hover { color: #525252; } table.popup.image .cnt .close { color: #bbbbbb; } table.popup.image .cnt .close:hover { color: #ffffff; } table.popup .cnt h3 { font-size: 20px; font-weight: 300; fone-height: 28px; margin: 10px 0 15px 0; } table.popup .cnt p { font-size: 14px; line-height: 18px; font-weight: 300; margin: 0 0 15px 0; } table.popup .cnt p:last-child { margin: 0 0 0 0; }