/*
Template Name: Jengo
Description: A Business/Portfolio HTML Template
Author: Chris Creed
URL: http://www.chris-creed.com
*/

/* Colors: Orange - #FF7200 */

@import "reset.css";

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 800px; margin: 0 auto 50px; }
body { font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; background: url(../images/main-bg.jpg) repeat-x; color: #555; font-weight: normal; }
h1 { font-size: 38px; margin: 0 0 10px 0; }
h2 { font-size: 34px; margin: 0 0 10px 0; }
h3 { font-size: 24px; margin: 0 0 10px 0; }
h4 { font-size: 18px; margin: 0 0 10px 0; }
h5 { font-size: 16px; margin: 0 0 5px 0; }
h6 { font-size: 14px; margin: 0 0 5px 0; }
p { margin: 0 0 15px 0; }
a { text-decoration: none; color: #FF7200; }
a:hover { color: #222; }
em { font-style: italic; }
ul { margin: 0 0 15px 15px; list-style-type: circle; }
ol { margin: 15px 0 15px 20px; list-style-type: decimal; }
strong, b { font-weight: bold; }
.hide { display: none; }

#td-v-center {
    vertical-align: middle; /* ������������ �� �������� ���� */
    padding: 5px; /* ���� ������ ����������� ����� */
   }
   
#td-right {
    text-align: right; /* ������������ �� �������� ���� */
   }

/* ------------ */
/* -- Layout -- */
/* ------------ */
#main { margin: 40px 0 60px 0; overflow: hidden; }
#content { float: left; width: 550px; }
#sidebar { float: right; width: 200px; margin: 0 2px 0 0; height:320px; }
#sidebar-reg { float: right; width: 200px; margin: 0 2px 0 0; height:200px; }

/* ------------ */
/* -- Header -- */
/* ------------ */
#header { padding: 55px 0 0 0; margin: 0 0 40px 0; }
#header h1 { float: left; font-size: 30px; color: #555; letter-spacing: -1px; font-weight: bold; margin: 0 0 35px 0; }
#header h1 a { color: #555; }
#header h2 { float: right; font-size: 20px; color: #aaa; font-weight: normal; margin: 3px 0 0 0; }

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { clear: both; margin: 0; padding: 10px 0 9px 0; overflow: hidden; border-top: 1px #ddd dotted; border-bottom: 1px #ddd dotted; }
#nav li { float: left; list-style: none; }
#nav li span { padding: 0 10px; font-weight: bold; }
#nav li a { color: #555; font-weight: bold; font-size: 14px; }
#nav li a:hover { color: #FF7200; font-weight: bold; }
#nav li a.current { color: #FF7200; }

/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#intro { border-bottom: 1px #ddd dotted; }
#intro h3 { font-size: 22px; font-weight: normal; line-height: 34px; margin: 0 0 15px 0; }
.frontpage h4 { font-size: 14px; }

/* -- Featured Projects -- */
#featured-projects { border-bottom: 1px #ddd dotted; overflow: hidden; padding: 30px 0 25px 0; }
#featured-projects h4 { margin: 0 0 15px 0; }
#featured-projects .project-img { float: left; margin: 0 0 18px 22px; border: 1px #eee solid; }
#featured-projects .first { margin-left: 0; }

/* -- Overview -- */
#overview { margin: 35px 0 0 0; overflow: hidden; }
#overview h4 { margin: 0 0 15px 0; }
#overview .title { margin: 0 !important; }
#overview #services { float: left; width: 350px; }
#overview #articles { float: right; width: 350px; }

/* -------------- */
/* -- Sidebars -- */
/* -------------- */
#sidebar img { width: 200px; border: 1px #eee solid; margin: 0 0 20px 0; }
#sidebar .project-title { display: block; margin: 0 0 2px 0; }
#sidebar h5 { font-size: 14px; margin: 0 0 15px 0; }
.contact-sidebar { background-color: #f5f5f5; padding: 20px 20px 10px 20px; border: 1px #eee solid; }
.contact-sidebar p { line-height: 18px; }

#sidebar-reg img { width: 200px; border: 1px #eee solid; margin: 0 0 20px 0; }
#sidebar-reg .project-title { display: block; margin: 0 0 2px 0; }
#sidebar-reg h5 { font-size: 14px; margin: 0 0 15px 0; }
.contact-sidebar { background-color: #f5f5f5; padding: 20px 20px 10px 20px; border: 1px #eee solid; }
.contact-sidebar p { line-height: 18px; }

/* -------------- */
/* -- Services -- */
/* -------------- */
.service-title { margin: 30px 0 5px 0; font-size: 14px; }
.first { margin-top: 0; }

/* -------------- */
/* -- Articles -- */
/* -------------- */
.article { margin: 0 0 0 0; border-bottom: 1px #ddd dotted; padding: 30px 0; }
.article-title { font-size: 14px; font-weight: bold; margin: 0 0 4px 0; }
.article-overview { margin: 0 0 4px 0; }
.article-read-more { margin: 0; }
#article-nav p { margin: 8px 0 0 0; }
.articles .first { padding-top: 0; }

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
.portfolio .project-title { margin: 0; }
.portfolio .project-img { float: left; margin: 0 0 22px 22px; border: 1px #eee solid; }
.portfolio .first { margin-left: 0; }

/* ------------- */
/* -- Contact -- */
/* ------------- */
#contact-form { clear: both; margin: 24px 0 0 0; border: none; }
#contact-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#contact-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#contact-form input[type=password] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#contact-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#contact-form input[type=submit] { background: url(../images/submit-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: 15px 0 0 -5px; border: none; cursor: pointer; }
#contact-form input[type=submit]:hover { background: url(../images/submit-button-orange-hover.jpg) no-repeat; }
#response { padding: 10px; border: 1px #ddd solid; background-color: #eee; color: #9e0616; }

/* ------------- */
/* -- order -- */
/* ------------- */
#order-form { clear: both; margin: 24px 0 0 0; border: none; }
#order-form input[type=email] { width: 250px; border: 2px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#order-form input[type=text] { width: 250px; border: 2px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#order-form input[type=password] { width: 250px; border: 2px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#order-form textarea { width: 270px; height: 50px; border: 2px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#order-form input[type=submit] { background: url(../images/order-button-orange.jpg) no-repeat; width: 190px; height: 34px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#order-form input[type=submit]:hover { background: url(../images/order-button-orange-hover.jpg) no-repeat; }
#response { padding: 10px; border: 1px #ddd solid; background-color: #eee; color: #9e0616; }

/* ------------- */
/* -- confirm -- */
/* ------------- */
#confirm-form { clear: both; margin: 24px 0 0 0; border: none; }
#confirm-form input[type=submit] { background: url(../images/confirm-button-orange.jpg) no-repeat; width: 190px; height: 34px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#confirm-form input[type=submit]:hover { background: url(../images/confirm-button-orange-hover.jpg) no-repeat; }
#confirm-form input[type=password] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#response { padding: 10px; border: 1px #ddd solid; background-color: #eee; color: #9e0616; }

/* ------------- */
/* -- error -- */
/* ------------- */
#error-form input[type=button] { background: url(../images/back-button-orange.jpg) no-repeat; width: 190px; height: 34px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#error-form input[type=button]:hover { background: url(../images/back-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- form-pay-wm -- */
/* ------------- */
#form-pay-wm input[type=submit] { background: url(../images/wm1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-wm input[type=submit]:hover { background: url(../images/wm2.png) no-repeat; }

/* ------------- */
/* -- form-pay-qiwi -- */
/* ------------- */
#form-pay-qiwi input[type=submit] { background: url(../images/qiwi1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-qiwi input[type=submit]:hover { background: url(../images/qiwi2.png) no-repeat; }

/* ------------- */
/* -- form-pay-robo -- */
/* ------------- */
#form-pay-robo input[type=submit] { background: url(../images/robo1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-robo input[type=submit]:hover { background: url(../images/robo2.png) no-repeat; }

/* ------------- */
/* -- form-pay-VISA -- */
/* ------------- */
#form-pay-visa input[type=submit] { background: url(../images/visa1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-visa input[type=submit]:hover { background: url(../images/visa2.png) no-repeat; }

/* ------------- */
/* -- form-pay-sber -- */
/* ------------- */
#form-pay-sber input[type=submit] { background: url(../images/sbrf1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-sber input[type=submit]:hover { background: url(../images/sbrf2.png) no-repeat; }


/* ------------- */
/* -- form-pay-FREE -- */
/* ------------- */
#form-pay-free input[type=submit] { background: url(../images/fk1.png) no-repeat; width: 234px; height: 105px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#form-pay-free input[type=submit]:hover { background: url(../images/fk2.png) no-repeat; }


/* ------------- */
/* -- pay -- */
/* ------------- */
#pay-form input[type=submit] { background: url(../images/pay-button-orange.jpg) no-repeat; width: 190px; height: 34px; margin: 3px 0 0 3px; border: none; cursor: pointer; }
#pay-form input[type=submit]:hover { background: url(../images/pay-button-orange-hover.jpg) no-repeat; }


/* ------------- */
/* -- log -- */
/* ------------- */
#log-form { clear: both; margin: 24px 0 0 0; border: none; }
#log-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#log-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#log-form input[type=password] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#log-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#log-form input[type=submit] { background: url(../images/log-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: 15px 0 0 -5px; border: none; cursor: pointer; }
#log-form input[type=submit]:hover { background: url(../images/log-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- reg -- */
/* ------------- */
#reg-form { clear: both; margin: 1px 0 0 0; border: none; }
#reg-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#reg-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#reg-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#reg-form input[type=submit] { background: url(../images/reg-button-orange.jpg) no-repeat; width: 184px; height: 34px; margin: -5px 0 0 -5px; border: none; cursor: pointer; }
#reg-form input[type=submit]:hover { background: url(../images/reg-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- rempas -- */
/* ------------- */
#rempas-form { clear: both; margin: 1px 0 0 0; border: none; }
#rempas-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#rempas-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#rempas-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#rempas-form input[type=submit] { background: url(../images/rempas-button-orange.jpg) no-repeat; width: 184px; height: 34px; border: none; cursor: pointer; }
#rempas-form input[type=submit]:hover { background: url(../images/rempas-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- login -- */
/* ------------- */
#login-form { clear: both; margin: 1px 0 0 0; border: none; }
#login-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#login-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#login-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#login-form input[type=submit] { background: url(../images/login-button-orange.jpg) no-repeat; width: 184px; height: 34px; margin: -5px 0 0 -5px; border: none; cursor: pointer; }
#login-form input[type=submit]:hover { background: url(../images/login-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- orderparam -- */
/* ------------- */
#orderparam-form { clear: both; margin: 1px 0 0 0; border: none; }
#orderparam-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#orderparam-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#orderparam-form select { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#orderparam-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#orderparam-form input[type=submit] { background: url(../images/confirmorder-button-orange.jpg) no-repeat; width: 184px; height: 34px; border: none; cursor: pointer; }
#orderparam-form input[type=submit]:hover { background: url(../images/confirmorder-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- orderparam -- */
/* ------------- */
#deliveryparam-form { clear: both; margin: 1px 0 0 0; border: none; }
#deliveryparam-form input[type=email] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#deliveryparam-form input[type=text] { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#deliveryparam-form select { width: 250px; border: 1px #eee solid; margin: 0 0 15px 0; padding: 10px; color: #444; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
#deliveryparam-form textarea { width: 350px; height: 150px; border: 1px #eee solid; padding: 10px; font-size: 14px; line-height: 24px; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; }
#deliveryparam-form input[type=submit] { background: url(../images/orderparam-button-orange.jpg) no-repeat; width: 184px; height: 34px; border: none; cursor: pointer; }
#deliveryparam-form input[type=submit]:hover { background: url(../images/orderparam-button-orange-hover.jpg) no-repeat; }

/* ------------- */
/* -- loadmore -- */
/* ------------- */

.loadmore { background: url(../images/loadmore-button-orange.jpg) no-repeat; width: 184px; height: 34px; margin: -5px 0 0 -5px; border: none; cursor: pointer; }
.loadmore:hover { background: url(../images/loadmore-button-orange-hover.jpg) no-repeat; }

.confirmorder { background: url(../images/confirmorder-button-orange.jpg) no-repeat; width: 184px; height: 34px; margin: -5px 0 0 -5px; border: none; cursor: pointer; }
.confirmorder:hover { background: url(../images/confirmorder-button-orange-hover.jpg) no-repeat; }


/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { clear: both; border-top: 1px #ddd dotted; margin: 40px 0 0 0; padding: 5px 0 0 0; color: #aaa; }
#footer .twitter { float: right; }