/* 
  style.css
  
  CSS Contact Form
  
  v1.1
  
  Created by eucalyptuss
  Copyright 2012 Mikolaj Dobrucki. All rights reserved.
*/

#content { /* background */
 padding: 20px;
 margin-top: 20px;
/* decoration */
 background-color: #f6f6f6;
 border: solid 1px #ccc;
}

#content, .form input, .form textarea, .form select, .form .tooltip, .form .bubble, .box {
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}

.box, .form .tooltip, .form .bubble {
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;
}

/*
   ===============================
   =========== FIELDS ============
   =============================== 
*/

.form input[type="text"], .form textarea, .form select {
 padding: 6px;
 font: normal 14px/14px arial, helvetica, sans-serif;
 color: #000;
/* decoration */
 border: solid 1px #ccc;
 background: -moz-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -o-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -webkit-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -ms-linear-gradient(top, #f8f8f8, #fff  30px);
 background-color: #fff;
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.form p { position: relative; } /* neccessery to make tooltips working */ 

.form input[type="text"] { width: 250px; }
.form select { width: 264px }
.form textarea { width: 500px; height: 150px; } /* dementions of the fields */

.form label {
  font: normal 14px/14px arial, helvetica, sans-serif;
  color: #777;
  display: inline-block;
}

.form label span { color: red; } /* red mark on required fields */

.form .text label {
 float: left;
 margin-right: 4px;
 line-height: 30px;
}

input[type="text"]:hover, textarea:hover { /* hover effects */
 border: solid 1px #aaa;
}

input[type="text"]:focus, textarea:focus { /* focus effects */
 border: solid 1px #aaa;
 background: -webkit-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -o-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -moz-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -ms-linear-gradient(top, #f0f0f0, #fafafa  30px);
}

.form .error-input { /* error state */
 border: solid 1px #eb5339;
 -moz-box-shadow: 0 0 6px 1px #fccac2;
 -webkit-box-shadow: 0 0 6px 1px #fccac2;
 box-shadow: 0 0 6px 1px #fccac2;
}

/*
   ===============================
   ======== SUBMIT BUTTON ========
   =============================== 
*/

.submit input { /* normal state */
 height: 40px;
 width: 120px;
 margin-left: 598px;
/* backgorund */
 background: -webkit-linear-gradient(#fbfbfb, #c6c6c6);
 background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
 background: -o-linear-gradient(#fbfbfb, #c6c6c6);
 background: -ms-linear-gradient(#fbfbfb, #c6c6c6);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #ccc;
}

.submit input:hover { /* hover state */
 background: -webkit-linear-gradient(#fdfdfd, #d5d5d5);
 background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
 background: -o-linear-gradient(#fdfdfd, #d5d5d5);
 background: -ms-linear-gradient(#fdfdfd, #d5d5d5);
 background-color: #ddd;
}

.submit input:active { /* active state */
 background: -webkit-linear-gradient(#d5d5d5, #fafafa);
 background: -moz-linear-gradient(#d5d5d5, #fafafa);
 background: -o-linear-gradient(#d5d5d5, #fafafa);
 background: -ms-linear-gradient(#d5d5d5, #fafafa);
 background-color: #fbfbfb;
}

/*
   ===============================
   =========== TOOLTIP ===========
   =============================== 
*/

.form .tooltip:before { /* triangle's border */
 border: solid 8px red;
 border-color: transparent #4d8fcb transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 6px;
}
 
.form .tooltip:after { /* triangle */
 border: solid 7px red;
 border-color: transparent #d0e4f4 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 7px;
}

.form .tooltip {
 width: 200px;
 padding: 8px;
 padding-top: 9px;
 margin-left: 10px;
 font: normal 12px/12px arial, helvetica, sans-serif;
/* position */
 position: absolute;
 bottom:0;
 left: 468px;
 display: none;
/* background */
 background: #d0e4f4;
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #bbd9f1 inset;  
 -moz-box-shadow: 0 -2px 2px #bbd9f1 inset;  
 box-shadow: 0 -2px 2px #bbd9f1 inset;
/* border */
 border: 1px solid #4d8fcb;
}

form p:hover .tooltip { display: block; }  /* viseable on hover */

/*
   ===============================
   ======== ERROR BUBBLE =========
   =============================== 
*/

.form .bubble:before { /* triangle's border */
 border: solid 8px red;
 border-color: transparent #eb5339 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 6px;
 }
 
.form .bubble:after { /* triangle's */
 border: solid 7px red;
 border-color: transparent #fccac2 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 7px;
}

.form .bubble { /* main part of a tooltip */
 width: 200px;
 padding: 8px;
 padding-top: 9px;
 margin-left: 10px;
 font: bold 12px/12px arial, helvetica, sans-serif;
 position: absolute;
 bottom:0;
 left: 468px;
/* background */
 background: #fccac2;
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #fcb7ac inset;  
 -moz-box-shadow: 0 -2px 2px #fcb7ac inset;  
 box-shadow: 0 -2px 2px #fcb7ac inset;
/* border */
 border: 1px solid #eb5339;
}

/*
   ===============================
   ===== NOTIFICATION BOXES ======
   =============================== 
*/

.box {
 min-width: 100px;
 padding: 20px 50px;
 margin-bottom: 20px;
 font: normal 12px/12px arial, helvetica, sans-serif;
}

.box strong { margin-right: 10px; }

