/* FORM STYLES------------------------------------------------------------*/

.contactform {
  position: relative;
  margin: 1em auto;
  
  padding-right: 32px;
  font-weight: 300;
  color: #a8a7a8;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.contactform p {
  margin: 0 0 10px;
}


label { 
  width: 10em;
  line-height: 4em;
  padding-right: 10px;
  font-weight: 100;
  text-align: right;
  letter-spacing: 1px;
}

input, button, label, div#message {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



input[type=text] {
	padding: 0 10px;
	width: 300px;  
	color: #cccccc;
	text-shadow: 1px 1px 1px black;
	background: rgba(0, 0, 0, 0.16);
	border: 0;
	border-radius: 5px;
    -webkit-transition: box-shadow 1s ease;  
    -moz-transition: box-shadow 1s ease;  
    -o-transition: box-shadow 1s ease;  
    -ms-transition: box-shadow 1s ease;  
    transition: box-shadow 1s ease;  
}

input[type=text]#senderemail {
	height: 40px;
}

input[type=text]:focus, div#message:focus{

	color: white;
  	background: rgba(0, 0, 0, 0.1);
  	outline: 1;
  	outline-color: #645850;
	box-shadow : 0px 0px 20px #645850;
	border : 1px solid #645850;   
	
} 

input[type=text]:hover, div#message:hover{

	color: white;
  	background: rgba(0, 0, 0, 0.1);
  	outline: 1;
  	outline-color: #645850;
	/*box-shadow : 0px 0px 100px #000000;*/
} 

div#message{

	height : 25%;
	width: 300px;
	padding: 0 10px;
	color: #cccccc;
	text-shadow: 1px 1px 1px black;
	background: rgba(0, 0, 0, 0.16);
	border: 0;
	
    -webkit-transition: box-shadow 1s ease;  
    -moz-transition: box-shadow 1s ease;  
    -o-transition: box-shadow 1s ease;  
    -ms-transition: box-shadow 1s ease;  
    transition: box-shadow 1s ease;  
    -webkit-transition: border 1s ease;  
    -moz-transition: border 1s ease;  
    -o-transition: border 1s ease;  
    -ms-transition: border 1s ease;  
    transition: border 1s ease;  
}

.message-button {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0 0 48px;
  /* Fix wrong positioning in Firefox 9 & older (bug 450418) */
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  /* Must use another pseudo element for the gradient background because Webkit */
  /* clips the background incorrectly inside elements with a border-radius.     */
}
.message-button:before {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;

  border-radius: 24px;

}
.message-button:hover:before {
  background: #5e5245;
  background-image: -webkit-linear-gradient(top, #8a7966, #5e5245);
  background-image: -moz-linear-gradient(top, #8a7966, #5e5245);
  background-image: -o-linear-gradient(top, #8a7966, #5e5245);
  background-image: linear-gradient(to bottom, #8a7966, #5e5245);
}
.message-button:after {
  content: '';
  position: absolute;
  top: 15px;
  left: 12px;
  width: 25px;
  height: 19px;
  background: url("../images/arrow.png") 0 0 no-repeat;
}