П.3. Исходный код Style.Css

body, html{

font-size: 16px;

font-family: MyFont;

width: 100%;

height: 100%;

line-height: 20px;

background-image: url(img/background.jpg);

background-size: 100%;

-o-background-size: 100%;

-moz-background-size: 100%;

-ms-background-size: 100%;

-webkit-background-size: 100%;

}

@font-face {

font-family: MyFont;

src: url(font/MyFont.otf);

}

a{

text-decoration: none;

}

a:hover{

cursor: pointer;

}

input, textarea{

font-family: MyFont;

}

.wrapper{

min-height: 300px;

height: 100%;

}

.wrapper, .header, .menu ul, .menu_footer ul, .dev{

width: 1000px;

margin: auto;

}

.prosperity, .content{

width: 1000px;

float: left;

}

.logo{

width: 150px;

float: left;

padding: 20px 30px;

}

.header .phone_number{

width: 200px;

float: left;

margin: 30px 90px 20px 90px;

}

.number, .number_bold{

font-weight: bold;

float: left;

}

.number_bold{

font-size: 28px;

margin: 3px 0 3px 5px;;

color: #185ca1;

}

.contacts{

width: 410px;

float: left;

}

.mail{

float: left;

color: #185ca1;

margin-top: 5px;

font-weight: bold;

}

.search{

background-image: url(img/parallelogram.png);

background-size: 100% 100%;

-o-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-ms-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

width: 90px;

float: left;

padding: 3px 105px;

display: block;

font-weight: bold;

text-transform: uppercase;

font-size: 12px;

color: #fff;

font-style: italic;

}

.header .address{

float: left;

width: 235px;

font-weight: bold;

}

.social img{

float: left;

margin-left: 15px;

}

.social{

float: left;

}

.header .contacts .section {

float: left;

margin-bottom: 15px;

}

.menu{

width: 100%;

background: #424242;

float: left;

}

menu_footer{

width: 100%;

float: left;

}

.menu li, .menu_footer li{

float: left;

width: 16.5%;

color: #fff;

padding: 20px 0;

text-align: center;

}

.menu a{

color: #fff;

}

.menu_footer a{

color: #000;

}

.slider, #carousel img{

width: 1000px;

float: left;

height: 440px;

}

.slider{

position: relative;

background: #000;

}

.bonus{

position: absolute;

z-index: 1;

color: #fff;

font-size: 32px;

font-weight: bold;

width: 315px;

line-height: 40px;

font-style: italic;

top: 200px;

left: 120px;

}

.caroufredsel_wrapper{

opacity: 0.6;

-o-background-size: 0.6;

-moz-background-size: 0.6;

-ms-background-size: 0.6;

-webkit-background-size: 0.6;

}

.detailed{

background: #185ca1;

background-image: url(img/detailed.png);

background-repeat: no-repeat;

background-position: 145px 10px;

width: 110px;

font-size: 18px;

color: #fff;

padding: 10px 50px;

}

.slider .detailed{

left: 140px;

top: 320px;

position: absolute;

z-index: 1;

}

.arrow_left, .arrow_right{

position: absolute;

z-index: 1;

}

.arrow_left{

right: 90px;

bottom: 20px;

}

.arrow_right{

right: 50px;

bottom: 20px;

}

.prosperity{

float: left;

margin: 11px 11px 0 0;

background: #ff5555;

width: 326px;

height: 90px;

}

.prosperity:nth-child(3n+3){

margin-right: 0px;

}

.prosperity img{

width: 50px;

float: left;

margin: 20px;

}

.prosperity span{

color: #fff;

width: 205px;

display: block;

float: left;

margin: 25px 25px 25px 0;

}

.info{

width: 100%;

float: left;

margin-top: 15px;

padding-bottom: 30px;

background: #fff;

}

.info .block_left{

width: 500px;

float: left;

padding: 30px 0 30px 30px;

box-sizing: border-box;

}

.info .block_right{

width: 440px;

float: left;

padding: 30px;

}

.info .block_left h2, .info .block_right h2{

color: #909090;

font-size: 42px;

margin-bottom: 40px;

}

.info .block_left h3{

color: #000;

font-size: 28px;

font-weight: bold;

line-height: 30px;

}

.info .detailed{

float: right;

margin: 30px 30px 0 0;

}

.set{

border-right: 1px solid #909090;

padding-right: 30px;

}

.comment_block{

width: 440px;

float: left;

margin-bottom: 15px;

}

.comment_block:last-of-type{

margin-bottom: 0px;

}

.comment{

width: 305px;

float: left;

padding-left: 50px;

background-image: url(img/comma.png);

background-repeat: no-repeat;

background-position: 10px 45px;

}

.comment .date{

float: left;

color: #909090;

width: 300px;

}

.comment .name{

color: #185ca1;

width: 300px;

float: left;

font-size: 24px;

margin-bottom: 10px;

}

.comment .response{

width: 390px;

float: left;

}

.footer{

width: 100%;

float: left;

padding-bottom: 20px;

border-top: 1px solid #959595;

margin-top: 20px

}

.copy{

float: left;

width: 155px;

font-size: 12px;

color: #909089;

margin-left: 5px;

}

.copy img{

width: 138px;

margin-top: 5px

}

.footer .phone_number{

width: 200px;

float: left;

margin: 0px 20px 0 45px;

}

.call{

width: 286px;

background: #ff5555;

float: right;

transform: rotate(90deg);

position: absolute;

z-index: 1;

top: 150px;

right: -173px;

cursor: pointer;

padding: 5px;

}

.call img{

float: left;

padding: 10px;

}

.tabs, .car {

width: 250px;

}

.ui-tabs-nav {

overflow: hidden;

width: 250px;l

}

.call span{

float: left;

width: 100px;

padding: 0px 30px;

color: #fff;

}

.call span:first-child{

border-bottom: 1px solid #fff;

}

.call .text{

float: left;

width: 160px;

margin: 0 20px;

}

.content{

position: relative;

}

.response_form textarea{

width: 205px;

float: left;

height: 200px;

}

.response_block{

width: 1000px;

float: left;

border: 1px solid #959595;

box-sizing: border-box;

padding: 20px;

background: #fff;

margin-top: 10px;

}

.response_block .name, .response_block .date{

color: #ff5555;

font-size: 22px;

font-weight: bold;

}

.response_block .name{

width: 500px;

float: left;

}

.response_block .date{

width: 110px;

float: right;

}

.response_block p{

margin-top: 15px;

color: #959595;

float: left;

}

.response_block:first-child{

margin-top: 20px;

}

.response_form{

width: 600px;

float: left;

background: #ff5555;

left: 100px;

margin: 30px 200px 20px 200px;

}

.response_form .header{

width: 600px;

float: left;

background: #7d2a2a;

margin-bottom: 10px;

}

.response_form span{

padding: 15px 40px;

display: block;

color: #fff;

background: #ff5555;

width: 115px;

}

.response_form .field1{

width: 240px;

margin: 5px 50px 5px 20px;

padding: 5px;

float: left;

}

.response_form .field2{

padding: 5px;

float: left;

width: 546px;

margin: 5px 20px;

}

.response_form .send{

background: #424242;

color: #fff;

padding: 10px 40px;

font-family: MyFont;

border: none;

margin: 10px 229px 20px 229px;

float: left;

}

.contacts_block{

width: 250px;

float: left;

margin-top: 50px;

}

.contacts_block span{

float: left;

width: 200px;

}

.contacts_block .heading{

font-weight: bold;

margin-top: 30px;

}

.contacts_block .heading:first-child{

margin-top: 0px;

}

.red{

color: #ff5555;

font-style: italic;

}

.map{

float: left;

width: 650px;

margin: 50px 0 50px 100px;

border: 1px solid #b84141;

box-sizing: border-box;

}

.filling{

width: 1000px;

float: left;

}

.text_block{

width: 1000px;

float: left;

padding: 30px;

box-sizing: border-box;

background: #fff;

}

.text_block h1{

font-size: 36px;

text-align: center;

margin-bottom: 30px;

color: #646464;

}

.text_block .text{

-moz-column-count: 2;

-webkit-column-count: 2;

column-count: 2;

}

.text_block p{

color: #646464;

float: left;

margin-bottom: 10px;

}

.question_answer{

float: left;

width: 1000px;

margin-bottom: 20px;

}

.question_answer:first-of-type{

margin-top: 50px;

}

.question, .answer{

float: left;

width: 1000px;

padding: 20px 150px 20px 20px;

box-sizing: border-box;

}

.question{

background: #ff5555;

background-image: url(img/question.png);

background-repeat: no-repeat;

background-position: 900px 45px;

}

.answer{

background: #ffffff;

background-image: url(img/answer.png);

background-repeat: no-repeat;

background-position: 900px 45px;

}

.question_answer span{

font-weight: bold;

font-size: 28px;

margin-bottom: 10px;

display: block;

}

.question span, .question p{

color: #fff;

}

.answer span, .answer p{

color: #000;

}

.news_block{

width: 235px;

float: left;

margin: 20px 20px 0 0;

}

.news_block:nth-of-type(4n+4){

margin-right: 0px;

}

.news{

width: 215px;

padding: 10px;

background: #fff;

}

.news img{

width: 215px;

float: left;

margin-bottom: 10px;

}

.news h3{

color: #185ca1;

font-size: 18px;

font-weight: bold;

margin-bottom: 5px;

}

.news p{

color: #424242;

}

.news_block .button{

display: block;

background: #ff5555;

width: 235px;

padding: 10px 0;

text-align: center;

}

.news_block a{

color: #fff;

}

.counter{

float: left;

padding-top: 50px;

width: 100%;

text-align: center;

}

.counter ul {

display: inline-block;

}

.counter img{

padding: 5px 5px 2px 5px;

display: inline-block;

}

.counter li{

display: inline-block;

padding: 5px;

}

.counter .activ{

color: #fff;

background: #ff5555;

}

table{

border-left: 3px solid #ff5555;

border-right: 3px solid #ff5555;

float: left;

width: 1000px;

background: #fff;

margin-top: 20px;

}

table caption{

text-align: center;

font-weight: bold;

color: #fff;

font-size: 20px;

text-transform: uppercase;

padding: 10px 0;

background: #ff5555;

}

th{

width: 130px;

padding: 5px;

border-right: 3px solid #ff5555;

border-bottom: 3px solid #ff5555;

text-align: center;

}

th:first-child{

width: 220px;

}

th:last-of-type{

border-right: none;

}

td{

width: 130px;

padding: 5px;

border-right: 3px solid #ff5555;

border-bottom: 3px solid #ff5555;

text-align: center;

vertical-align: middle;

}

td:first-child{

width: 220px;

}

td:last-of-type{

border-right: none;

}

.cost{

font-weight: bold;

font-size: 24px;

}

.tabs{

width: 0;

height: 295px;

background: #ff5555;

position: absolute;

z-index: 1;

overflow: hidden;

top: 28px;

right: 0px;

}

.tabs_contacts{

width: 250px;

height: 295px;

background: #ff5555;

overflow: hidden;

}

#tabs-1, #tabs-2{

width: 250px;

}

#tabs .field1{

padding: 5px;

width: 205px;

margin: 5px 15px;

}

#tabs .field1:first-of-type{

margin-top: 15px;

}

#tabs .field2{

padding: 5px;

width: 70px;

margin: 5px 5px 15px 15px;

}

#tabs .field3{

padding: 5px;

width: 108px;

margin: 5px 5px 15px 5px;

}

#tabs .send{

background: #424242;

color: #fff;

padding: 10px 40px;

font-family: MyFont;

border: none;

margin-left: 50px;

}

#tabs-1 .send{

margin-top: 33px;

}

#tabs li{

padding: 10px 15px;

width: 95px;

float: left;

color: #fff;

text-align: center;

}

#tabs li a{

color: #fff;

}

.ui-state-active{

background: #7d2a2a;

}

ui-tabs-nav{

width: 250px;

overflow: hidden;

}

#tabs-2 textarea{

width: 207px;

float: left;

height: 90px;

margin: 5px 15px 10px 15px;

padding: 5px;

}