* {
    /* With these codes padding and border does not increase it's width and gives intuitive style.*/

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin:0;
    padding:0;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
}
div#envelope{
    width: 55%;
    margin: 10px 30% 10px 25%;
    padding:10px 0;
    border: 2px solid gray;
    border-radius:10px;
    overflow: auto;
}
form{
    width:70%;
    margin:4% 15%;
}
.header{
   
	clear: right;
	margin-left: auto;
	margin-right: auto;
		
	}

.logo1{
	float: left;
	
	}

.logo2{
	
	float: right;
	}


/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
    margin-bottom: 20px;
    margin-top: 10px;
    width:100%;
    padding: 15px;
    border-radius:5px;
    border:1px solid #7ac9b7;
}
input[type=submit]
{
    margin-bottom: 20px;
    width:25%;
    padding: 15px;
    border-radius:5px;
    border:1px solid #7ac9b7;
    background-color: #4180C5;
    color: aliceblue;
    font-size:15px;
    cursor:pointer;
    float: right;

}

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

.symbol {
    font-size: 0.9em;
    border-radius: 1em;
    padding: .1em .6em .1em .6em;
    font-weight: bolder;
    color: white;
    background-color: #4E5A56;
}

.icon-error { background: #e64943;
    font-family: Consolas, serif; }
.icon-ok { background: #13c823; }

.icon-error:before { content: 'X'; }
.icon-ok:before { content: '\002713'; }

.notify {
    background-color:#e3f7fc;
    color:#555;
    border: .1em solid #8ed9f6;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;
    font-size:1.1em;
    padding:10px 10px 10px 10px;
    margin:10px;
    cursor: default;
}

.notify-error { background: #ffecec; border-color: #fad9d7; }
.notify-ok { background: #e9ffd9; border-color: #D1FAB6; }