@charset "utf-8";


@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;
}



div#envelope {
    background-color: #f2f4fb;
    border: 1px solid #a39d60;
    border-radius: 10px;
    left: 28%;
    margin: 5px;
    padding: 5px 15px;
    position:fixed;
	margin-left:10px;
    top: 0%;
    width: 40%;
    z-index: 1050;
}

div#envelope1 {
    background-color: #f2f4fb;
    border: 1px solid #0BF4F4;
    border-radius: 10px;
    left: 28%;
    margin: 5px;
    padding: 5px 15px;
    position:fixed;
	margin-left:10px;
    top: -40%;
    width: 40%;
    z-index: 1050;
}

div#envelope2 {
    background-color: #f2f4fb;
    border: 1px solid #0BF4F4;
    border-radius: 10px;
    left: 28%;
    margin: 5px;
    padding: 5px 15px;
    position: absolute;
	margin-left:10px;
    top: -40%;
    width: 40%;
    z-index: 1050;
}
#layout{
	background: none repeat scroll 0 0 #333;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 989;
	opacity:0.5;
	}
	#layout1{
	background: none repeat scroll 0 0 #333;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 989;
	opacity:0.5;
	}
	
	#layout2{
	background: none repeat scroll 0 0 #333;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 989;
	opacity:0.5;
	}
	
form{
width:90%;
margin:5% 5%;
} 

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

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 5px;
margin-top: 5px;
 width:100%;
 padding: 5px;
 border-radius:5px;
 border:1px solid #a39d60;
}

insidetxt1{
margin-bottom: 5px;
margin-top: 5px;
 width:30%;
 padding: 5px;
 border-radius:5px;
 border:1px solid #7ac9b7;
}

input[type=submit]
{
margin-bottom: 5px;
 width:100%;
 padding: 15px;
 border-radius:5px;
 border:1px solid #a39d60;
 background-color:#f5f4e6;
}
textarea{
 width:100%;
 padding: 5px;
 margin-top: 1px;
 border:1px solid #a39d60;
 border-radius:5px;
 margin-bottom: 1px;
 resize:none;
 }

input[type=text]:focus,
textarea:focus {
 border-color: #a39d60;
}

/* 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: 600px){

@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;
}



div#envelope {
    background-color: #f2f4fb;
    border: 1px solid gray;
    border-radius: 10px;
    left: 28%;
    margin: 5px;
    padding: 5px 15px;
    position: absolute;
	margin-left:10px;
    top: -40%;
    width: 30%;
    z-index: 1050;
}

div#envelope1 {
    background-color: #f2f4fb;
    border: 1px solid gray;
    border-radius: 10px;
    left: 28%;
    margin: 5px;
    padding: 5px 15px;
    position: absolute;
	margin-left:10px;
    top: -40%;
    width: 30%;
    z-index: 1050;
}

form{
width:90%;
margin:5% 5%;
}  

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

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 5px;
margin-top: 5px;
 width:100%;
 padding: 5px;
 border-radius:5px;
 border:1px solid #a39d60;
}
insidetxt1{
margin-bottom: 5px;
margin-top: 5px;
 width:30%;
 padding: 5px;
 border-radius:5px;
 border:1px solid #a39d60;
}

input[type=submit]
{
margin-bottom: 5px;
 width:100%;
 padding: 15px;
 border-radius:5px;
 border:1px solid #a39d60;
 background-color:rgb(164, 230, 219);
}
textarea{
 width:100%;
 padding: 5px;
 margin-top: 1px;
 border:1px solid #a39d60;
 border-radius:5px;
 margin-bottom: 1px;
 resize:none;
 }

input[type=text]:focus,
textarea:focus {
 border-color: #a39d60;
}
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}


/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}
/* CSS Document */