@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);



div#envelope{
	width:95%;
	margin: 10px 1% 10px 2%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
form{
	width:100%;
	margin:0 0% 0 0%;
}  

form[name=callback]{
	width:90%;
	margin:0 0% 0 3%;
} 
form[name=formAddress] {
	width:100%;
	margin:0 0% 0 0%;
	border:1px solid gray;
} 
form header {
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }
 

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=text][name=user]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:95%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=password][name=pass]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:95%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
	background-color:#fff;
}
input[type=submit]{
	margin-bottom: 20px;
	margin-top: 10px;
	width:55%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #fff;
	background-color:#000;
	color:#fff;
}

input[name=letters_code_6]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=email]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=tel]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=number]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}

input[name=sfgDisplay]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	text-align:right;
	border:1px solid #000;
}
input[name=sfgTask]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[name=sgfActionNo]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	text-align:right;
	border:1px solid #000;
}
input[name=sgfAction]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[name=sfgCode]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[name=sfgDescription]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[name=sfgFreq]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}

select{
	margin-bottom: 10px;
	margin-top: 2px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
.weekLabel{
	float:left;
	width:10%;
	/*border:1px solid #000;*/
}
select[id=week]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;;
}

textarea{
	width:90%;
	padding: 10px;
	margin-top: 2px;
    border:1px solid #000;
	border-radius:5px; 
	margin-bottom: 10px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

input[type="text"]:invalid {
    color: #000;
	background-color:#fff;
}
input[type="tel"]:invalid {
    color: #000;
	background-color:#fff;
}
input[type="email"]:invalid {
   color: #000;
	background-color:#fff;
}
textarea:invalid {
    color: #000;
	background-color:#fff;
}
select:invalid {
    color: #000;
	background-color:#fff;
}



/* By using @ media form can have different layout for screen, mobile phone, tablet.*/

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);



div#envelope{
	width:95%;
	margin: 10px 1% 10px 2%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
form{
	width:100%;
	margin:0 0% 0 0%;
}  

form header {
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }
 

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=text][name=user]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=password][name=pass]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
	background-color:#fff;
}
input[type=password]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=submit] {
	background : url(../images/submit2.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit]:hover {
	background : url(../images/submit2a.jpg) no-repeat center center;
	cursor:pointer;
}
input[name=letters_code_6]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:40%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=email]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=tel]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[type=number]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}


select{
	margin-bottom: 10px;
	margin-top: 2px;
	width:50%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
.weekLabel{
	float:left;
	width:10%;
	/*border:1px solid #000;*/
}
select[id=week]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:90%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;;
}
select[name=title]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:50%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;;
}
/*input[type=submit] {
	background : url(../images/login.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit]:hover {
	background : url(../images/login.jpg) no-repeat center center;
	cursor:pointer;
}*/



input[type=submit][name=next] {
	background : url(../images/next.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=next]:hover {
	background : url(../images/nexta.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=reply] {
	background : url(../images/reply.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:right;
}
input[type=submit][name=reply]:hover {
	background : url(../images/replya.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=back] {
	background : url(../images/back.png) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=back]:hover {
	background : url(../images/backa.png) no-repeat center center;
	cursor:pointer;
}

input[name=Send] {
	background : url(../images/submit2.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[name=Service]:hover {
	background : url(../images/submit2.jpg) no-repeat center center;
	cursor:pointer;
}

input[name=Send] {
	background : url(../images/submit2.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[name=Send]:hover {
	background : url(../images/submit2a.jpg) no-repeat center center;
	cursor:pointer;
}
input[type=submit][name=remove] {
	background : url(../images/remove.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=remove]:hover {
	background : url(../images/removea.jpg) no-repeat center center;
	cursor:pointer;
}

input[name=button] {
	background : url(../images/submit2.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[name=button]:hover {
	background : url(../images/submit2.jpg) no-repeat center center;
	cursor:pointer;
}
textarea[name=message]{
	width:100%;
	height:25%;
	padding: 5px;
	margin-top: 50px;
    border:1px solid #000;
	border-radius:5px; 
	margin-bottom: 3px;
	resize:none;
}

textarea{
	width:100%;
	padding: 10px;
	margin-top: 2px;
    border:1px solid #000;
	border-radius:5px; 
	margin-bottom: 10px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
	border-color: #4697e4;
}
}
  
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);


div#envelope{
	width:95%;
	margin: 0px 1% 10px 2%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
form{
	width:85%;
	margin:0 15% 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: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=text][name=user]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=password][name=pass]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
	background-color:#fff;
}
input[type=password]{
	margin-bottom: 1px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=letters_code_6]{
	margin-bottom: 10px;
	margin-top: 2px;
	width:25%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #000;
}
input[name=firstName]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:70%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=assetName]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:45%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=assetQty]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:5%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=assetLocation]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:42%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=assetNotes]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=email]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=tel]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[type=number]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}

input[name=sfgDisplay]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgTask]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sgfActionNo]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgAction]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgText]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=workTaskCode]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=workTaskDescription]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:65%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=workTaskFreq]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=workTaskTask]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:65%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=workTaskAction]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgCode]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgDescription]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:96%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}
input[name=sfgFreq]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:10%;
	padding: 5px;
	border-radius:3px;
	border:1px solid #000;
}


select{
	margin-bottom: 3px;
	margin-top: 1px;
	width:98%;
	padding: 4px;
	border-radius:3px;
	border:1px solid #000;
}
select[name=title]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:25%;
	padding: 4px;
	border-radius:3px;
	border:1px solid #000;
}
select[name=sfgText]{
	margin-bottom: 3px;
	margin-top: 1px;
	width:25%;
	padding: 4px;
	border-radius:3px;
	border:1px solid #000;
}
/*input[type=submit]
{
margin-bottom: 20px;
margin-top: 10px;
  width:107%;
  padding: 10px;
  border-radius:5px;
  border:1px solid #7ac9b7;
  background-color:rgb(164, 230, 219);
}*/
input[type=submit] {
	background : url(../images/submit2.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit]:hover {
	background : url(../images/submit2a.jpg) no-repeat center center;
	cursor:pointer;
}



input[type=submit][name=next] {
	background : url(../images/next.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=next]:hover {
	background : url(../images/nexta.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=complete] {
	background : url(../images/complete.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=complete]:hover {
	background : url(../images/completea.jpg) no-repeat center center;
	cursor:pointer;
}


input[name=Send] {
	background : url(../images/send.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[name=Send]:hover {
	background : url(../images/senda.jpg) no-repeat center center;
	cursor:pointer;
}
input[type=submit][name=delete] {
	background : url(../images/delete.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=delete]:hover {
	background : url(../images/deletea.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=button]:hover {
	background : url(../images/submit2.jpg) no-repeat center center;
	cursor:pointer;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=button]:hover {
	background : url(../images/submit2a.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=add] {
	background : url(../images/add.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=add]:hover {
	background : url(../images/adda.jpg) no-repeat center center;
	cursor:pointer;
}

input[type=submit][name=login] {
	background : url(../images/login.jpg) no-repeat center center;
	width : 83px;
	height :30px;
	border : none;
	color : transparent;
	font-size : 0;
	float:left;
}
input[type=submit][name=login]:hover {
	background : url(../images/logina.jpg) no-repeat center center;
	cursor:pointer;
}


textarea[name=message]{
	width:96%;
	height:25%;
	padding: 5px;
	margin-top: 10px;
    border:1px solid #000;
	border-radius:3px; 
	margin-bottom: 3px;
	resize:none;
  }
textarea[name=work]{
	width:96%;
	height:25%;
	padding: 5px;
    border:1px solid #000;
	border-radius:3px; 
	margin-bottom: 3px;
	resize:none;
  }
textarea{
	width:96%;
	padding: 5px;
	margin-top: 1px;
    border:1px solid #000;
	border-radius:3px; 
	margin-bottom: 3px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
	border-color: #4697e4;
}

}