@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,500|Roboto+Condensed:400,700&subset=latin,cyrillic);

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, sub, sup, ol, ul, li, form, label, input, select, button, textarea, table, tbody, tfoot, thead, tr, th, td, a { margin: 0; padding: 0;}
html, body { height: 100%;}
body { font: 12px/18px 'Open Sans', sans-serif; color: #333333; background: #ffffff;}
img { border: none;}
a { cursor: pointer; color: #2e93bd; text-decoration: underline;}
a:hover { text-decoration: none;}
p { margin-bottom: 8px;}
h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; font-family: 'Roboto', sans-serif; font-weight: 500; color: #333333; line-height: normal;}
h1 { font-size: 36px;}
h2 { font-size: 30px;}
h3 { font-size: 26px;}
h4 { font-size: 22px;}
h5 { font-size: 18px;}
h6 { font-size: 16px;}
input[type='submit'], input[type='button'] { cursor: pointer;}
ol, ul { margin-bottom: 25px;}

.head_container:after, .sport:after, .filter_list:after, .club_list:after, .club_info:after, .footer_cont:after, .option:after { content: ''; display: table; clear: both;}

.wrap {display: table; width: 100%; height: 100%; border-collapse: collapse; border: none;}
.head_wr {display: table-header-group;}
.head, .footer, .cont {display: table-cell; vertical-align: top;}
.footer, .head {height: 1px;}
.footer_wr {display: table-footer-group;}
.cont_wr {display: table-row-group;}

.head { background: url("../images/bg2.jpg") 50% 0 no-repeat; background-size: cover;}
.footer { background: #9fbc40;}

.head_strip { margin-bottom: 250px;}

.head_container { width: 920px; margin: 0 auto; padding: 20px 20px 18px;}
.logo { width: 308px; height: 62px; float: left;}

.order_info { width: 440px; min-height: 60px; padding: 7px 150px 0 0; box-sizing: border-box; float: right; font: 14px 'Roboto', sans-serif; color: #ffffff; position: relative; display: none;}
.order_info.active { display: block;}
.order_info span { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 500;}
.order_time { color: #ffffff;}
.status_accept, .status_reject, .timer { font-weight: 500; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; top: 0; right: 0;}
.status_accept, .status_reject { width: 136px; height: 56px; border-width: 2px; border-style: solid; text-align: center; font-size: 16px; line-height: 56px;}
.status_accept { display: block; color: #9fbc40; border-color: #9fbc40;}
.status_reject { display: none; color: #ff4e4e; border-color: #ff4e4e;}
.timer { width: 78px; height: 60px; padding-left: 62px; background: #2e93bd url("../images/timer.png") 16px 50% no-repeat; font-size: 30px; color: #ffffff; line-height: 62px; display: none;}
.reject .status_accept, .progress .status_accept { display: none;}
.reject .status_reject { display: block;}
.progress .timer { display: block;}

.sport { width: 920px; margin: 0 auto; padding: 0 20px 20px;}
.sport_icon { width: 100px; height: 100px; margin-right: 16px; background: #ffffff; float: left; text-align: center; line-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 12px 42px rgba(0, 0, 0, .1); -moz-box-shadow: 0 12px 42px rgba(0, 0, 0, .1); box-shadow: 0 12px 42px rgba(0, 0, 0, .1);}
.sport_icon img { max-width: 80px; max-height: 80px; vertical-align: middle;}
.sport h1 { margin: 0; padding-top: 16px; font-size: 48px; color: #ffffff; line-height: 52px; overflow: hidden;}
.sport h1 span { display: block; font-size: 18px; color: #ffffff; line-height: 22px; overflow: hidden;}

.cont_container { width: 960px; margin: 0 auto;}

.search { padding: 14px 0 61px;}

.filter { margin-bottom: 18px;}
.filter h2 { margin: 0 20px 15px; font-size: 16px;}

.filter_list { width: 940px; margin: 0 auto; overflow: hidden;}
.filter_list ul { width: 941px; margin: 0;}
.filter_list li { height: 30px; margin: 0 1px 1px 0; padding: 0 9px; float: left; font-size: 16px; line-height: 30px; list-style: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.filter_list li a { color: #777;}
.filter_list .active { background: #9fbc40;}
.filter_list .active a { color: #fefefe; text-decoration: none;}

.club_list { padding: 10px 9px 0; overflow: hidden;}
.club_list ul { width: 110%; margin: 0;}
.club_list li { width: 440px; margin: 0 18px 18px 0; padding: 13px 10px 10px; border: 1px solid #eaeaea; float: left; list-style: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .1);}

.club_list li h2  { margin-bottom: 18px; padding: 0 10px; font-size: 22px;}
.club_list li h2 a  { color: #333333; text-decoration: none;}

.club_info { margin-bottom: 10px; padding: 8px 20px 16px 10px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}
.club_img { width: 190px; height: 194px; margin-right: 29px; float: left; line-height: 190px; text-align: center;}
.club_img img { max-width: 190px; max-height: 190px; vertical-align: middle;}

.club_descr { height: 185px; padding-top: 9px; overflow: hidden;}
.club_descr h3 { margin: 0; padding-top: 2px; font: 600 14px/12px 'Open Sans', sans-serif;}

.bid { height: 60px; padding: 0 230px 0 10px; position: relative;}

.price { display: block; padding-top: 16px; font: 500 18px 'Roboto', sans-serif; text-align: right;}

.btn { display: block; width: 200px; height: 40px; padding: 0 5px; background: #9fbc40; box-sizing: border-box; font-size: 14px; font-weight: 600; line-height: 40px; color: #ffffff; text-align: center; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.blue { background: #2e93bd;}
.gray { background: #c8c8c8;}
.bid .btn { position: absolute; top: 10px; right: 10px;}

.leave { display: none; padding-top: 7px; font: 14px 'Roboto', sans-serif;}
.leave span { display: block; margin-bottom: 9px; font-size: 16px; font-weight: 500;}

.bid .timer { right: 10px;}

.club_list .active .price, .club_list .active .btn { display: none;}
.club_list .active .leave, .club_list .active .timer { display: block;}

.footer_cont { width: 944px; margin: 0 auto; padding: 52px 8px 48px;}

.cop, .all_locations, .support { font: bold 14px 'Roboto Condensed', sans-serif; color: #ffffff; text-transform: uppercase;}
.cop { margin-right: 60px; float: left;}
.all_locations { float: right;}
.all_locations a { color: #ffffff; text-decoration: none;}
.support { overflow: hidden;}

.popup_wr { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;}
.popup_cover { width: 100%; position: fixed; top: 0; bottom: 0; background: #000; opacity: .7;}

.add_time, .order { width: 490px; background: #ffffff; position: fixed; top: 50%; left: 50%;}
.add_time { margin: -130px 0 0 -245px;}

.popup_title { padding: 19px 45px 22px 20px; background: #9fbc40; font-size: 22px; color: #ffffff;}

.popup_cont { padding: 0 10px 20px;}

.option { padding: 0 10px 19px; border-bottom: 1px solid #ebebeb;}
.option_date , .option_time { float: left;}
.option_date { margin-right: 50px;}
.option_duration { float: right;}

.form_title { display: block; margin-bottom: 6px; font: 500 14px 'Roboto', sans-serif;}

.calendar_wr, .i_time, .s_duration { border: 1px solid #dddddd; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); box-shadow: 0 0 5px rgba(0, 0, 0, .1);}

.calendar_wr { display: block; width: 89px; padding-right: 29px; position: relative;}
.calendar_wr input { width: 100%; height: 28px; padding-left: 10px; box-sizing: border-box; background: none; border: none;}
.calendar_wr img { position: absolute; top: -1px; right: -1px;}

.calendar_wr input, .i_time, .s_duration { font: 14px/28px 'Open Sans', sans-serif; color: #333333; outline: none;}

.i_time { width: 58px; height: 28px; text-align: center;}

.s_duration { width: 100px; height: 28px;}

.button_wr { padding: 30px 0 10px;}
.button_wr .btn { margin: 0 auto;}

.close_popup { position: absolute; top: 25px; right: 20px;}
.close_popup a { display: block; width: 20px; height: 20px; background: url("../images/close.png") no-repeat;}

.order { margin: -115px 0 0 -245px;}
.order .popup_title { margin-bottom: 20px;}
.order .order_info { display: block; width: auto; height: 82px; padding: 3px 170px 0 10px; float: none; font-size: 18px; color: #333333; border-bottom: 1px solid #ebebeb;}
.order .order_info span { font-size: 18px; margin-bottom: 4px;}
 .order .progress .timer { right: 10px;}
.order .status_accept, .order .status_reject { right: 10px;}
.cancel { font-size: 14px; font-weight: 600; color: #ff4e4e;}
.order .button_wr { padding: 18px 10px 1px;}
.order_done .button_wr { padding: 18px 10px 1px;}
.order_done .btn { width: 180px;}
.order_declined .btn { width: 220px;}

.phone { width: 400px; margin: -145px 0 0 -200px; background: #ffffff; position: fixed; top: 50%; left: 50%;}

.phone_number { padding: 4px 0 29px; border-bottom: 1px solid #ebebeb; text-align: center;}
.phone_number p { margin-bottom: 13px;}
.phone_input { font-size: 18px; line-height: 40px;}
.phone_input input { width: 150px; height: 40px; box-sizing: border-box; margin: 0 20px 0 10px; padding: 0 7px; border: 1px solid #dddddd; font: 18px/38px 'Open Sans', sans-serif; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); box-shadow: 0 0 5px rgba(0, 0, 0, .1);}

.phone_input input::-webkit-input-placeholder, .pin_input input::-webkit-input-placeholder { font-size: 14px;}
.phone_input input::-moz-placeholder, .pin_input input::-moz-placeholder { font-size: 14px;}/* Firefox 19+ */
.phone_input input:-moz-placeholder, .pin_input input:-moz-placeholder { font-size: 14px;}/* Firefox 18- */
.phone_input input:-ms-input-placeholder, .pin_inputpin_input input:-ms-input-placeholder { font-size: 14px;}

.pin_cont { margin-bottom: 15px; padding: 4px 0 14px; border-bottom: 1px solid #ebebeb; text-align: center;}
.pin_cont p { margin-bottom: 13px;}
.phone_pin { margin-bottom: 22px; font-size: 18px; text-decoration: underline;}
.pin_input { margin-bottom: 17px;}
.pin_input input { width: 150px; height: 40px; box-sizing: border-box; padding: 0 7px; border: 1px solid #dddddd; font: 24px/38px 'Open Sans', sans-serif; color: #9fbc40; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); box-shadow: 0 0 5px rgba(0, 0, 0, .1);}
.pin_input input.error { color: #ff4e4e;}
.repeat { font-size: 14px; color: #aeaeae;}

.pincode .button_wr { padding: 5px 0 0;}
.pincode .button_wr .btn { width: 140px;}    
© TrueDev.org