@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
 
 /*with these codes padding and border does not increase it's width.Gives intuitive style.*/
 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
 
body {
 margin:0;
 padding:0;
 font-family: 'Droid Sans', sans-serif;
 
 }
div#envelope{
 width:80%;
 margin: 10px 20% 10px 10%;
 background-color:#fff5db;
 padding:10px 0;
 border:1px solid gray;
 border-radius:10px;
 } 
 
form{
width:90%;
margin:0 5%;
} 
 
form header {
 text-align:center;
 font-family: 'Roboto Slab', serif;
 }
 
/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
}

input[type=password]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
}
 
input[type=submit]
{
margin-bottom: 20px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
 background-color:#b2b2b2;
 font-size:1.6em;
 font-weight:bold;
}
textarea{
 width:100%;
 padding: 10px;
 margin-top: 10px;
 border:1px solid #7ac9b7;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 }

select{
 width:100%;
 padding: 10px;
 margin-top: 10px;
 border:1px solid #7ac9b7;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 font-size:1.1em;
 }
 
input[type=text]:focus,
textarea:focus {
 border-color: #4697e4;
}
 
/* By using @ media form can have different layout for screen, mobile phone, tablet.*/
 
/* Sets the form layout for mobile phone, tablet*/
@media screen and (max-device-width: 800px){
 
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
 
 /*with these codes padding and border does not increase it's width.Gives intuitive style.*/
 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
 
body {
 margin:0;
 padding:0;
 font-family: 'Droid Sans', sans-serif;
 
 }
div#envelope{
 width:90%;
 margin: 10px 30% 10px 5%;
 background-color:#fff5db;
 padding:10px 0;
 border:1px solid gray;
 border-radius:10px;
 } 
 
form{
width:90%;
margin:0 5%;
} 
 
form header {
 text-align:center;
 font-family: 'Roboto Slab', serif;
 }
 
/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
}

input[type=password]{
margin-bottom: 20px;
margin-top: 10px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
}
 
input[type=submit]
{
margin-bottom: 20px;
 width:100%;
 padding: 10px;
 border-radius:5px;
 border:1px solid #7ac9b7;
 background-color:#b2b2b2;
 font-size:1.6em;
 font-weight:bold;
}
textarea{
 width:100%;
 padding: 10px;
 margin-top: 10px;
 border:1px solid #7ac9b7;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 }

select{
 width:100%;
 padding: 10px;
 margin-top: 10px;
 border:1px solid #7ac9b7;
 border-radius:5px;
 margin-bottom: 20px;
 resize:none;
 font-size:.8em;
 }
 
input[type=text]:focus,
textarea:focus {
 border-color: #4697e4;
}
}


table.reports 
{
font-family: "Arial";
font-size: .8em;
}
table.reports tr:nth-child(odd)  {background-color:#eee; }
table.reports tr:nth-child(even) {background-color:#fff; }
table.reports tr:hover {background-color: yellow;}


.myButton {
margin: 5px;
-moz-box-shadow:inset 0px 1px 0px 0px #f9eca0; 
-webkit-box-shadow:inset 0px 1px 0px 0px #f9eca0;	
box-shadow:inset 0px 1px 0px 0px #f9eca0;	
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));	
background:-moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);	
background:-webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);	
background:-o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);	
background:-ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);	
background:linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);	
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e',GradientType=0);	
background-color:#f0c911;	
-moz-border-radius:6px;	
-webkit-border-radius:6px;	
border-radius:6px;	
border:1px solid #e65f44;	
display:inline-block;	
cursor:pointer;
color:#c92200;	
font-family:Arial;	
font-size:15px;	
font-weight:bold;	
padding:6px 24px;	
text-decoration:none;	
text-shadow:0px 1px 0px #ded17c;
}

.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
background:-moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:-ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background:linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911',GradientType=0);
background-color:#f2ab1e;
}

.myButton:active {
position:relative;
top:1px;
}