@bgcolor: #fff; @font: 'Open Sans', Arial, Helvetica, sans-serif; @font-color: #37383a; @main-color: #f89c21; @stan-color: #18315a; @bg-inputs: #f1f1f1; @button-color: #fff; *{margin:0px;padding:0px;} html,body{height:100%;} body{ background: url(../images/bg.jpg) @bgcolor; font-family: @font; font-size:14px; color:@font-color; } img{border:none;} a{text-decoration:none;color: inherit;} a img{border:0px;} ul{list-style-type:none;} form{display:inline;} .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* IE6 */ *:first-child+html .group { zoom: 1; } /* IE7 */ article, aside, figure, footer, header, hgroup, menu, nav, section {display: block;} fieldset{border:none;} textarea, input, select{ font-family:inherit; font-size: inherit; color: inherit; border:none; } h1, h2, h3, h4{font-weight: normal; font-size: inherit;} em{font-style:normal;font-weight:600;} .br(@radius) { -moz-border-radius: @radius; -webkit-border-radius: @radius; -khtml-border-radius: @radius; border-radius: @radius; } .bs{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .hsize(@hsize:30px){ height: @hsize; line-height: @hsize; } .input-error{ background: #ffe4e1; } .content{ width: 1160px; padding: 0 20px; margin: 0 auto; &:after{ visibility: hidden; display: block; content: ""; clear: both; height: 0; } } h1,h2{ font-weight: 800; color: @stan-color; font-style: italic; font-size: 24px; padding-bottom: 10px; } h3{ color: @main-color; font-weight: 300; padding-bottom: 24px; } fieldset{ input, select, textarea, label{ float: left; margin-bottom: 10px; } label{ clear: left; font-weight: 300; width: 190px; &.che-lab{ width: auto; padding-left: 190px; cursor: pointer; font-weight: 400; input{ width: auto; margin-right: 10px; cursor: pointer; } } } input, select, textarea{ .bs; .br(5px); background-color: @bg-inputs; width: 970px; padding: 0 10px; } input, select, label{ .hsize; } textarea{ padding: 4px 10px; height: 160px; max-width: 970px; min-width: 970px; min-height: 80px; } } dl{ &:after{ visibility: hidden; display: block; content: ""; clear: both; height: 0; } dt,dd{ float: left; line-height: 30px; em{ color: @main-color; } a{ text-decoration: underline; &:hover{ text-decoration: none; } } } dt{ clear: left; width: 190px; font-weight: 300; } dd{ color: @stan-color; span{ display: block; margin-top: -10px; } } } .actions{ a{ display: block; .bs; .br(5px); width: 970px; text-align: center; .hsize(40px); font-weight: 800; color: 800; border: 1px solid darken(@main-color, 30%); background-color: @main-color; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); color: @button-color; -webkit-box-shadow:inset 0px 0px 1px 1px rgba(255,255,255,0.6); box-shadow:inset 0px 0px 1px 1px rgba(255,255,255,0.6); &:hover{ background-color: lighten(@main-color, 5%) } &:active{ background-color: darken(@main-color, 5%) } } } header{ background-color: @bgcolor; padding: 20px; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); #logo{float: left;} #claim{float: right;} position: fixed; width: 100%; } main{ padding: 180px 0 80px; .actions{ padding-left: 190px; padding-top: 20px; .br(5px); } } footer{ padding-bottom: 80px; dl{ float: left; margin-right: 80px; } p{ float: left; width: 660px; padding-bottom: 30px; line-height: 25px; color: @stan-color; &:last-child{ padding: 0; } } } #ajax{ position: fixed; left: 50%; padding: 10px; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); background-color: #fff; top: 200px; display: none; width: 400px; margin-left: -210px; .headl{ color: #18315a; font-size: 18px; font-style: italic; font-weight: 800; } .content{ padding: 10px 0px; } .controls{ text-align: right; a{ display: inline-block; padding: 5px 20px; background: #f89c21; color: #fff; border-radius: 5px; border: 1px solid #555; font-weight:bold; } } }