@import url("reset.css");
@import url("fonts.css");
@import url("menu.css");


.iframe-wrapper{
	margin:auto;
	width:960px;
}

#header-container{
	background-color:steelblue;
	height:100px;
    background: #606c88; /* old browsers */
    background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* ie */
    -webkit-box-shadow:0 40px 40px -40px #AAA;
       -moz-box-shadow:0 40px 40px -40px #AAA;
            box-shadow:0 40px 40px -40px #AAA;

}



#menu-container{
    background: #ffffff; /* old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
    height:32px;
    border-bottom:1px solid #d0d0d0;
    margin-bottom:10px;
    -webkit-box-shadow:0 5px 5px -5px #AAA;
       -moz-box-shadow:0 5px 5px -5px #AAA;
            box-shadow:0 5px 5px -5px #AAA;

}

h2, h3{
	margin:30px 0;
}

#title, h2, h3{
	font-weight:normal;
}

#title{
	font-size: 250%;
	color:white;
	padding-top:20px;
	float:left;
}
#header-container a {text-decoration:none}

h2{
	font-size: 55px;
}

h3{
	font-size: 40px;
}

h4 {
    margin: 1.33em 0;
}

p {
    margin: 1em 0;
}
nav{
	float:right;
	margin-top:100px;
}

nav ul, nav ul li{
	display:inline;
}

nav a{
	padding:10px;
	color:white;
	text-decoration:none;
	background-color:#efefef;
}
<!-- #main {min-height:400px} -->

#main p{
	width:620px;
	text-shadow:none;
}

#main header h2{
	padding-bottom:30px;
}

article header{
	margin-bottom:50px;
	padding-bottom:30px;
	width:700px;
}

#footer-container{
	background-color:#606c88;
	height:240px;
	border-top:1px solid #d0d0d0;
	margin-top:50px;
	-webkit-box-shadow:0 -40px 40px -40px #AAA;
	   -moz-box-shadow:0 -40px 40px -40px #AAA;
	        box-shadow:0 -40px 40px -40px #AAA;
}

#footer-container footer{
	color:#FAFAFA;
    margin-top:20px;
}

.info{
	position:absolute;
	top:5px;
	background-color:white;
	padding:10px;
}

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-device-width: 480px) {

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}


.login-wrapper {
    width: 400px;
    margin: 20px auto;
}

.formLayout {
    background-color: #f3f3f3;
    border: solid 1px #a1a1a1;
    padding: 20px 40px;
    width: 400px;
    margin-top:70px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius: 5px;
}

.formLayout h2 {
    display: block;
    text-align: center;
    border-bottom: 1px solid #d0d0d0;
    padding: 5px;
}

.formLayout label {
    display: block;
    width: 120px;
    float: left;
    margin-bottom: 10px;

}

.formLayout input , .formLayout select{
    display: block;
    width: 250px;
    float: left;
    margin-bottom: 20px;

}

.formLayout label {
    text-align: right;
    padding-right: 20px;
}

br {
    clear: left;
}

.clear {
    clear: both
}

/*****************************************************************/
/** Header Styles **/
/*****************************************************************/
.header-section-right{
    float: right;
    margin-top:10px;
}

.header-section-right a ,.header-section-right a:hover,.header-section-right a:visited{color: #fff;text-decoration:none}


button.bluebutton {
  background: #d7e5f5;
  background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: inset 0 1px 0 0 #fff;
  -webkit-box-shadow: inset 0 1px 0 0 #fff;
  box-shadow: inset 0 1px 0 0 #fff;
  color: #1a3e66;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px;
}

button.bluebutton:hover {
  background: #ccd9e8;
  background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
  border-top: 1px solid #a1afbf;
  border-left: 1px solid #9caaba;
  border-bottom: 1px solid #96a3b3;
  border-right: 1px solid #9caaba;
  -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
  -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
  box-shadow: inset 0 1px 0 0 #f2f2f2;
  color: #163659;
  cursor: pointer;
}

button.cupid-blue:active {
  border: 1px solid #8c98a7;
  -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
}
#errors {
    background-color: wheat;
    border: 1px solid yellow;
    padding: 5px 10px;
    text-align: center;
    margin : 20px auto;
}

.app-loading-error .wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 5rem;
}
.app-loading-error .formLayout {
    display: flex;
    margin: auto;
    flex-direction: column;
    width: auto;
    background-color: #fff;
    padding: 30px 30px 40px;
    align-items: center;
    font-family: Open Sans,Arial,sans-serif;
}

.app-loading-error h1 {
    font-family: Lato,Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    box-sizing: border-box;
    margin: 0;
    max-width: 140rem;
    font-size: 2.8rem;
}

.app-loading-error img {
    max-width: 300px;
    height: auto;
}

#main  .formLayout p {
    width :auto;
}