/* Stylesheet for mail pages */

.mailBox {
	margin: 10px 10px 0px 10px;
	padding: 20px;
}

.mailBox p {
	font-family: 'Allerta', sans-serif;
	font-size:1.1em;
	color: #707070; /* #707070 */
	text-align: center;
	text-shadow: 1px 1px 0px #bbbbbb;
}

.mailBox a {
	text-decoration: none;
}

.send,.mailBox a p {
	position: relative;
	font-family: 'Oswald', sans-serif;
	font-size:1.4em;
	color: white;
	background-color: #777777; /* #3f6a87 */
	text-shadow: 2px 2px 0px #505050;
	text-align: center;
	border:0;
	margin: 0 auto 0 auto;
	padding: 2px 10px 4px 10px;
	-webkit-box-shadow: 3px 3px 0px 0px #333333;
    box-shadow: 3px 3px 0px 0px #333333;
}

.send,.mailBox a p:hover {
	cursor:pointer;
}

.mailBox a p {
	width:3.5em;
}

.send{
	display:block;
	-webkit-appearance:none;
	-webkit-border-radius:0;
}

.mailDecoration {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 10px;
}

h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 1.9em;
	text-align: center;
	color: #707070;
	text-shadow: 2px 2px 0 #bbbbbb;
	margin: 0;
}

.message,.emailinput{
	display:block;
	font-family: 'Allerta', sans-serif;
	font-size:0.9em;
	-webkit-appearance:none;
	-webkit-border-radius:0;
	border-radius:0;
	border-width:1px;
	color: #777777;
	background-color: #e7e0d7; /* #87b8d8 */
	margin: 10px 0 10px 0;
	width:100%;
}

.emailinput{
	height: 1.6em;
}

.message{
	height: 5em;
	border-color:grey;
}

::-webkit-input-placeholder {
   color: #999999; /* #cee1ee */
}

:-moz-placeholder { /* Firefox 18- */
   color: #999999;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #999999; 
}

:-ms-input-placeholder {  
   color: #999999;
}

@media screen and (min-width: 720px) {

.mailBox {
	float: right;
	margin: 10px 0 10px 0;
	padding: 20px;
	width: 57%;
}

.mailBox p {
	text-align: left;
	margin: 10px 0 10px 0;
}

.mailBox a p {
	margin: 0;
}

h2 {
	text-align: left;
}

.message,.emailinput{
	font-size:1em;
}

.emailinput{
	width: 250px;	
}

.send{
	margin: 0;
}

}

@media screen and (min-width: 760px) {

.mailBox {
	width: 57.2%;
}

}

@media screen and (min-width: 815px) {

.mailBox {
	width: 58%;
}

}

@media screen and (min-width: 910px) {

.mailBox {
	width: 59%;
}

}

@media screen and (min-width: 1040px) {

.mailBox {
	margin: 10px 0 10px 0;
	padding: 25px 20px 25px 20px;
	width: 576px;
}

.send:hover {
	background-color:#999999;
	top: 2px;
	left: 2px;
	-webkit-box-shadow: 1px 1px 0px 0px #333333;
    box-shadow: 1px 1px 0px 0px #333333;
}

.mailBox a p:hover {
	background-color:#999999;
	top: 2px;
	left: 2px;
	-webkit-box-shadow: 1px 1px 0px 0px #333333;
    box-shadow: 1px 1px 0px 0px #333333;
}

}