﻿/** Базовый стиль формы **/

popup-form {}
.popup-form  form {
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 30px 6px 30px;
    min-width: 80%;
    max-width: 100%;
    width: 100%;
    border: 1px solid rgba(120,120,120,.7);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(107,152,194,0.9); 
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.1);
}
/* общие стили для полей ввода */
.popup-form input{
    display:block;    
    margin-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box; 
    color: #0;
    font-weight: 300;
    font-size:18px;
    font-family: 'Open Sans', sans-serif;
}
/* поле текстового сообщения */
.popup-form  textarea{
    overflow:hidden;
    width: 100%;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(219,237,255,0.4); 
}
/* формируем поля ввода */
.popup-form input {
    width: 100%;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
}
.popup-form input[type=submit] {
    cursor:pointer;
}
.popup-form input.name {
    background: rgba(255, 255, 255, 0.5); 
    padding-left:25px;
}
.popup-form input.email {
    background: rgba(255, 255, 255, 0.5);
    padding-left:25px;
}
.popup-form input.message {
    background: rgba(255, 255, 255, 0.5);
    padding-left:25px;
}
.popup-form ::-webkit-input-placeholder {
    color: #FFFFFF;
}
.popup-form :-moz-placeholder{ 
    color: #FFFFFF; 
}
.popup-form ::-moz-placeholder {
    color: #FFFFFF;
}
.popup-form :-ms-input-placeholder {  
    color: #FFFFFF; 
}
/* поля ввода при фокусе */
.popup-form input:focus, textarea:focus { 
    background-color: rgba(255, 255, 255, 0.7);
    
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden; 
}
/* скрываем текст полей ввода при фокусе */
.popup-form :focus::-webkit-input-placeholder { color:transparent; }
.popup-form :focus::-moz-placeholder { color:transparent; }
.popup-form :focus::placeholder { color:transparent; }
 
/* Стили для кнопки отправить */
.popup-form .btn {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #253737;
    background: #34495E;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #34495E);
    background: -moz-linear-gradient(top, #6da5a3, #34495E);
    background: -ms-linear-gradient(top, #6da5a3, #34495E);
    background: -o-linear-gradient(top, #6da5a3, #34495E);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #34495E 100%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #e1e1e1;
    outline: none;
}
.popup-form .btn:hover {
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #34495E);
    background: -moz-linear-gradient(top, #77b2b0, #34495E);
    background: -ms-linear-gradient(top, #77b2b0, #34495E);
    background: -o-linear-gradient(top, #77b2b0, #34495E);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #34495E 100%);
    color: #fff;
 }
.popup-form .btn:active {
    margin-top:1px;
    border: 1px solid #333333;
    background: #ffCC00;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600));
    background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
    background: -moz-linear-gradient(top, #ffcc00, #ff6600);
    background: -ms-linear-gradient(top, #ffcc00, #ff6600);
    background: -o-linear-gradient(top, #ffcc00, #ff6600);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    color: #fff;
}
/* конец формы */