@charset "utf-8";
/*
 *Contact Form CSS Document
 *Created By Jamie Cookson
 *Last edited 25/01/2013
 */

#contact-form input,  
#contact-form select,  
#contact-form textarea,  
#contact-form label {  
    font-size:15px;  
    margin-bottom:2px;  
    background: #EEE;
}  
#contact-form input,  
#contact-form select,  
#contact-form textarea {  
    width: calc(100% - 20px);
    border: 1px solid #831987;  
    margin-bottom:5px;  
    padding:4px;  
    font-weight: 800;
    font-style: normal;
}  
#contact-form input[type=text], #contact-form input[type=email], #contact-form textarea{
    width:300px; 
    padding: 10px 5px;
    border: none;
    border-bottom: 2px solid rgba(26, 188, 156,0.5);
    background: #FFF;
    margin-bottom: 20px;
}
#contact-form label{
    margin-bottom: 5px;
    width: 100%;
    float: left;
    background: #F2F2F2;
}
#contact-form input:focus,  
#contact-form select:focus,  
#contact-form textarea:focus {  
    border-bottom: 2px solid rgba(26, 188, 156,0.5);
    background-color: #FFF;  
    color:#000;
    font-style: normal;
    outline: -webkit-focus-ring-color auto 0px;
}  
#contact-form textarea {  
    width: calc(100% - 20px);
    padding: 10px 5px;
    height: 184px; 
    resize: none;  
    background-image: url(../img/text-back.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}  
#contact-form .required {  
    font-weight:bold;  
    color:#F00;  
}  
#contact-form #submit-button {  
    color:#FFF;   
    background-color: #831987;  
    float: right;
    background: rgba(26, 188, 156,0.5);
    border: none;
    padding: 10px 40px;
    width: auto;
    border-bottom: 2px solid rgba(26, 188, 156,0.75);
}  
#contact-form #submit-button:hover {  
     background: rgba(26, 188, 156,0.9);
    color: #FFF;
}  
input:required, textarea:required {  
    -moz-box-shadow:none;  
    -webkit-box-shadow:none;  
    -o-box-shadow:none;  
    box-shadow:none;  
} 
::-webkit-input-placeholder {  
    color:#CCC;  
    font-style:italic;  
}  
input:-moz-placeholder, textarea:-moz-placeholder {  
    color:#CCC;  
    font-style:italic;  
}  
input.placeholder-text, textarea.placeholder-text  {  
    color:#CCC;  
    font-style:italic;  
}  
#contact-form a{
    color: rgba(44, 62, 80,1.0);
    font-weight: 800;
}  
    #contact-form a:hover{
        text-decoration: underline;
    }





/*
    <div id="contact-form">
        <form method="post" action="form2mail.php">
            <p>Name:<br>
            <input type="text" id="name" name="name" value="" placeholder="John Doe" required autofocus/></p>
            
            <p>Email Address:<br>
            <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required /></p> 
            
            <p>Message:<br>
            <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea></p>

            <input type="submit" value="Submit" id="submit-button" />
        </form>
    </div>
*/