* {box-sizing: border-box;}

/* for "sticky footer", you must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
* {margin:0;padding:0;}

.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html, body {
    font-family: "Lucida Sans", sans-serif;
	height: 100%;
}
#wrap {min-height: 100%;}
#main {
	overflow:auto;
	padding-bottom: 60px;  /* must be same height as the footer */
}

.title {
	width: 100%;
	background-color: #eee;
	text-align: left;
	padding: 10px 15px;
}
.loginform {
	width: 100%;
	text-align: center;
}

.form_label {
	font-size:16px;
	padding-top:4px;
	padding-bottom:4px;
}

input[type=text], select {
	background-color: #FFFFFF;
	font-family: arial,tahoma,verdana,sans-serif;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 10px;
	margin: 7px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
}

input[type=email] {
	width: 50%;
	background-color: #FFFFFF;
	font-family: arial,tahoma,verdana,sans-serif;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 10px;
	margin: 7px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
}

input[type=password] {
	width: 50%;
	background-color: #FFFFFF;
	font-family: arial,tahoma,verdana,sans-serif;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 10px;
	margin: 7px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
}

input[type=number] {
	width: 50%;
	background-color: #FFFFFF;
	font-family: arial,tahoma,verdana,sans-serif;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 10px;
	margin: 7px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.header {
    text-align: center;
    background-color: #808080;
    color: #ffffff;
    padding: 15px;
}

#footer {
    background-color: #808080;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    position: relative;
	margin-top: -60px; /* negative value of footer height */
	height: 60px;
	clear:both;
	padding-top: 18px;
}

/* horizontal menu style
--------------------------------------------------------------- */

/* this sets the background color for the "current" tab */
#nav_step_1 a,
#nav_step_2 a,
#nav_step_3 a,
#nav_step_4 a {
	background-color: #111111;
}

.menu ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	background-color: #555555;
	border-top: 1px solid #111111;
	border-bottom: 1px solid #111111;
}

.menu li {
	float: left;
	padding: 0px 0px;
}

.menu li:last-child {
	float:right;
	/*border-left: 1px solid #111111;*/
}

.menu li a {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 13px 20px;
	text-decoration: none;
	border-right: 1px solid #111111;
}

.menu li a:hover {
	background-color: #111111;
}


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


a:link {font-size:16px; color:#808080; text-decoration:underline;font-weight:normal}
.white_link {}
.white_link a:link{font-weight:normal;font-style:normal;font-size:12px;text-decoration:underline;color:#ffffff;}
.white_text {font-weight:normal;font-style:normal;font-size:12px;color:#ffffff;}

.msg {
width:90%;
margin: 10px auto 10px auto;
color:#FFFFFF;
text-align:center;
border:0px solid #FF0000;
border-radius:5px;
background-color:#FF0000;
font:bold 14px arial,tahoma,verdana,sans-serif;
padding: 10px;
} 

.green_msg {
width:90%;
margin: 10px auto 10px auto; 
color:#FFFFFF;
text-align:center;
border:0px solid #00AA00;
border-radius:5px;
background-color:#00AA00;
font:bold 14px arial,tahoma,verdana,sans-serif;
padding: 10px;
} 

.button { 
	padding:10px 0px;	
}

.btnstyle {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #808080), color-stop(1, #808080) );
background:-moz-linear-gradient( center top, #808080 5%, #808080 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#808080');
background-color:#808080;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
border:1px solid #808080;
display:inline-block;
color:#ffffff;
font-family:arial,tahoma,verdana,sans-serif;
font-size:20px;
font-weight:bold;
padding:12px 12px;
margin-top: 10px;
text-decoration:none;
cursor: pointer;
}

.btnstyle:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #404040), color-stop(1, #404040) );
background:-moz-linear-gradient( center top, #404040 5%, #404040 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#404040');
background-color:#808080;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.forms_plain {
font-family:arial,tahoma,verdana,sans-serif;
font-weight: normal;
font-size: 18px;
color: #333;
}

.textstyle0 {
font-family:arial,tahoma,verdana,sans-serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
text-decoration: none;
color:#333;
}

.textstyle1 {
font-family: arial,tahoma,verdana,sans-serif;
font-weight: normal;
font-style: normal;
font-size: 16px;
text-decoration: none;
color: #000;
}

.textstyle2 {
font-family: arial,tahoma,verdana,sans-serif;
font-weight: bold;
font-style: normal;
font-size: 18px;
text-decoration: none;
color: #808080;
}

/* this is for the jquery validate error  */
.required .error {
background-color:#FFFFCC;
font-family:arial,tahoma,verdana,sans-serif;
font-weight:normal;
font-size:12px;
}

/* this is for the jquery validate error  */
.error {
background-color:#FFFFCC;
font-weight: bold;
color: red;
}

/* this is for the jquery validate error  */
.important_note {
background-color:#FFFFCC;
font-weight: bold;
color: red;
line-height: 1.5em;
}


/* When the screen (browser window) gets smaller than 768px, each column should have a width of 100% */
@media only screen and (max-width: 768px) {
    [class*="col-"] {
        width: 100%;
    }
}