/* Localized */
html, body {height: 100%;}
body {color: #fff; width: 100%; min-width: 960px; background: url(../img/bg.jpg) top left repeat-x; background-color: #0b1321;}

/* typography.css */
body {font: 12px/16px Arial, sans-serif; color:#111;}
h1 {font-size: 34px; line-height:1.2; margin-bottom:0em; color: #fff; font-weight: bold; text-shadow: 0px 1px #2693cd}
h2 {font-size: 22px; line-height:1; margin-bottom:0.5em; color: #fff; text-shadow: 0px 1px #000}
h3 {font-size: 20px; line-height:1.2; margin:0; color: #fff; font-weight: normal;}
h4 {font-size: 18px; line-height:1.2; margin:0; color: #fff; font-weight: normal; text-shadow: 0px 1px #2693cd}
h5 {font-size: 16px; line-height:1.2; margin:0; color: #fff; font-weight: normal; text-shadow: 0px 1px #2693cd}
h6 {font-size: 18px; font-weight: normal; color: #fff; margin: 0em; padding: 5px 0px 2px 0px;}
h4.title {font-size: 16px; line-height:1; margin-bottom: 0.1em; color: #5a8dd4;}


/* padding - margin */
.p-5 {padding: 5px}
.p-10 { padding: 10px}
.p-15 {padding: 15px}
.p-20 {padding: 20px}
.p-30 {padding: 30px}

.pt-5 {padding-top: 5px}
.pt-10 {padding-top: 10px}
.pt-15 {padding-top: 15px}
.pt-20 {padding-top: 20px}
.pt-30 {padding-top: 30px}

.pb-5 {padding-bottom: 5px}
.pb-10 {padding-bottom: 10px}
.pb-15 {padding-bottom: 15px}
.pb-20 {padding-bottom: 20px}
.pb-30 {padding-bottom: 30px}

.pl-5 {padding-left: 5px}
.pl-10 {padding-left: 10px}
.pl-15 {padding-left: 15px}
.pl-20 {padding-left: 20px}
.pl-30 {padding-left: 30px}

.pr-5 {padding-right: 5px}
.pr-10 {padding-right: 10px}
.pr-15 {padding-right: 15px}
.pr-20 {padding-right: 20px}
.pr-30 {padding-right: 30px}

.m-5 {margin: 5px}
.m-10 { margin: 10px}
.m-15 {margin: 15px}
.m-20 {margin: 20px}
.m-30 {margin: 30px}

.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-15 {margin-top: 15px}
.mt-20 {margin-top: 20px}
.mt-30 {margin-top: 30px}

.mb-5 {margin-bottom: 5px}
.mb-10 {margin-bottom: 10px}
.mb-15 {margin-bottom: 15px}
.mb-20 {margin-bottom: 20px}
.mb-30 {margin-bottom: 30px}

.ml-5 {margin-left: 5px}
.ml-10 {margin-left: 10px}
.ml-15 {margin-left: 15px}
.ml-20 {margin-left: 20px}
.ml-30 {margin-left: 30px}

.mr-5 {margin-right: 5px}
.mr-10 {margin-right: 10px}
.mr-15 {margin-right: 15px}
.mr-20 {margin-right: 20px}
.mr-30 {margin-right: 30px}

.floatLeft {float: left}.floatRight {float: right}
.small {font-size: 12px}
.strong {font-weight: bold}
.displayNone {display: none}
.visibleNone {visibility: hidden}
.italic {font-style: italic;}
.note {color: #b7bba4; font-style: italic}
.bold {font-weight: bold}
.white, .white:hover {color: #fff;}
.black, .black:hover {color: #333;}

/* links */
a {color: #cceaf8; text-decoration: underline;}
a:link {text-decoration: underline}
a:hover {text-decoration: none}
a:active {text-decoration: none}
a:visited {text-decoration: underline}
a:focus, a:hover {color:#cceaf8;}
a:hover {text-decoration: none}
a.select {text-decoration: none; color: #cceaf8}
a:-moz-any-link:focus {outline: none;} /* firefox focus fix */

#wrap {position: relative; color: #fff; background: transparent; display: block; width: 1100px; margin: 0px auto; padding: 0px 15px;}

.main-content { width: 1100px; height: auto; display: block; background: transparent; padding-top: 25px; min-height: 270px; }
.main-content .logo { background: url(../img/logo.png) top left no-repeat; width: 180px; height: 40px; display: block; position: relative; top: 50px; left: 10px; }
.ship { background: url(../img/ship.png) top left no-repeat; width: 600px; height: 280px; display: block; position: absolute; top: -20px; left: 440px; }
.logo-small { background: url(../img/logo-small.png) center left no-repeat; width: 90px; height: 30px; display: block; padding: 20px 0px;}

.main-content .remain {/* background: rgba(255, 255, 255, 0.04);*/ width: 330px; position: relative; top: 80px; font-weight: normal; padding: 10px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.main-content .remain h1 { font-size: 28px; line-height:1.2; margin-bottom:0em; color: #fff; font-weight: normal; text-shadow: 0px 1px #0b1321}
.main-content .remain h1 span { color: #ffbd41; }
.main-content .remain .quantity { background: url(../img/quantity.png) top left no-repeat; width: 190px; height: 80px; margin-left: -10px; }

.main-content .photos {width: 300px; height: 260px; display: block; position: absolute; left: 800px; top: -60px;}
.main-content .photos .photo-block {background: url(../img/photo-bg.png) top left no-repeat; width: 220px; height: 180px; display: block;}

.middle-content { width: 1100px; display: table; background: transparent; height: auto;}
.middle-content .left { width: 700px; min-height: 1850px; float: left; display: block; height: auto; padding: 30px; font-size: 14px; line-height: 1.4; background-color: rgba(20, 20, 50, 0.3); background-image: url(../img/ship-crop.png); background-repeat: no-repeat; background-position: 0px 50px; -moz-box-shadow: inset 0 0 2px #111f3c; -webkit-box-shadow: inset 0 0 2px #111f3c; box-shadow:inset 0 0 2px #111f3c; border: 1px solid #050d1e; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.middle-content .left p { padding: 3px 0px; font-size: 14px; line-height: 1.4; display: block; }
.middle-content .left .js {  width: 370px; display: table; position: relative; top: 20px; left: 310px; }
.middle-content .left .net { width: 370px; display: table; position: relative; top: 70px; left: 310px; }
.middle-content .left .qa { width: 370px; display: table; position: relative; top: 110px; left: 310px; }
.middle-content .left .web {  width: 370px; display: table; position: relative; top: 140px; left: 310px; }
.middle-content .left .tasks {font-size: 12px; padding: 10px 20px; color: #D9F1FF}
.middle-content .left .salary { font-size: 16px; font-style: italic; color: #88d0f1; }
.middle-content .left .yes { background: url(../img/yes.png) left no-repeat; padding-left: 20px;} 
.middle-content .left .no { background: url(../img/no.png) left no-repeat; padding-left: 20px;}
.middle-content .left .start { background: url(../img/btn-java.png) top left no-repeat; width: 180px; height: 70px; display: block; }
.middle-content .left .start-java { background: url(../img/btn-java.png) top left no-repeat; width: 230px; height: 66px; display: block; }
.middle-content .left .start-net { background: url(../img/btn-net.png) top left no-repeat; width: 240px; height: 66px; display: block; }
.middle-content .left .start-qa { background: url(../img/btn-qa.png) top left no-repeat; width: 220px; height: 66px; display: block; }
.middle-content .left .start-web { background: url(../img/btn-web.png) top left no-repeat; width: 230px; height: 66px; display: block; }

.middle-content .right { z-index: 20; width: 300px; float: right; padding-top: 30px;}
.middle-content .right p { padding: 3px 0px; font-size: 14px; line-height: 1.4;}
.middle-content .right h4 { font-size: 18px; line-height: 1.2; margin:0; padding: 20px 0px 0px 0px; color: #cceaf8; font-weight: normal; text-shadow: 0px 1px #0b1321}
.middle-content .right ul li {list-style: none; padding: 5px 0px; font-size: 14px; line-height: 1.4; }
.middle-content .right li:before { content: "―  "; }


.form { margin-bottom: 50px;}
.form h1 {font-size: 34px; line-height:1.2; margin-bottom: 3px; color: #333; font-weight: normal; text-align: center; text-shadow: none;}
.form h3 {font-size: 16px; line-height:1.2; margin-bottom: 3px; color: #999; font-weight: normal; text-align: center;}
.form .success, .form .error{color: #fff; font-weight: bold; text-align: center; padding: 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.form .success {display: none; background: #7fbe34;}
.form .error {background: #d54a4a;}

.form input[type="text"] { padding: 8px; width: 500px; height: 20px; color: #222; font: 18px "Helvetica Neue",Arial,sans-serif; outline: none; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #ddd; text-align: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.form textarea { padding: 8px; width: 500px; height: 250px; color: #222; font: 18px "Helvetica Neue",Arial,sans-serif; outline: none; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #ddd; text-align: left; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

.form .send {background: url(../img/send.png) top left no-repeat; width: 190px; height: 80px; border: none; cursor: pointer; text-indent: -99999px;}

.line {border-bottom: 1px solid #f7f7f7; width: 100%; margin: 10px 0px 10px 0px; height: 1px; line-height: 1px; }

.footer {padding: 10px 0px; display: block; width: 100%; height: 90px; background: url(../img/footer-bg.png) left bottom repeat-x;}
.footer .footer-block {margin: 0px auto 0px; width: 1100px; height: 30px; padding: 70px 10px 0px 10px; display: block;}
.footer p {color: #666; font-weight: normal; font-size: 12px; }
.footer .contact {color: #2585d3}