/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
≈ Base Resets
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;	
	box-sizing: border-box;  
	margin: 0;  
	padding: 0;	
	}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu,
nav, section, summary {
	display: block;
	}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Global Defaults 
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html, body {   
	position: relative;
	overflow: auto;
	height: 100%;
	color: #303030;
	font: 1em 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;	
	line-height: 1.7;
	background: #ffffff;
	}

::-moz-selection { color: #ffffff; background: #4db4e2; }
::selection { color: #ffffff; background: #4db4e2; }

a { 
	color: #2588ce;
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;   
	background-color: transparent;	
	}

a:active, a:hover {  
	color: #e86813;
  outline: none; 
	transition: 0.75s ease all;
  }

p { margin: 0 0 1.5em 0; 	}
ol, ul, li { list-style: none; }
ol { list-style: decimal; }
fieldset, img { border: 0; }
.txl, table th.txl, table td.txl { text-align: left; }
.txc, table th.txc, table td.txc { text-align: center; }
.txr, table th.txr, table td.txr { text-align: right; }


img.flexy, object.flexy { 
	width: 100%;
  max-width: 100%; 
	}

audio, canvas, iframe,
img, svg, video {
  vertical-align: middle;
  }

/* Headings */
h1, h2, h3,  h4, h5, h6 { color: #1b3240; line-height: normal; }
h1 { font-size: 2.7em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.90em; }

h1, h2 { margin-bottom: 0.25em; }
h3, h4 { margin-bottom: 0.25em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

h1 span, h2 span, h3 span, h4 span {  
  font-weight: normal;  
  }


/* Table List - common styling for all tables*/
.tbl-list {  
	border: 0px;
  border-collapse: collapse;  
  }

.tbl-list th {
  padding: .25em;  
  font-weight: normal;  	
	text-align: left;
	border-bottom: 1px solid #9946d8;		  
  }

.tbl-list td {
  padding: .25em;   
	border: 0px solid #e2e2e2;		  
  }

.tbl-list td a {
	color: #303030;
	border-bottom: 1px solid #303030;
	}

.wd-date { width: 140px;	}
.wd-amt { width: 110px;	}
.wd-stat { width: 70px;	 text-align: center; }
.wd-dnl { width: 120px;	text-align: right; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	≈ Form Defaults
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;	
	}

button {
	overflow: visible;
	}

button, select {
  outline: none;
	text-transform: none;
	}

button, html input[type=button],
input[type=reset], input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer;
	}

button[disabled], html input[disabled] {
	cursor: default;
	}

input, select, textarea {
	padding: 0.5em 1em;  
  font-size: 1em;
  outline: none; 
  border: 1px solid #17272e;  
	}

input[type=text]:focus,input[type=password]:focus, 
input[type=search]:focus,
select:focus, textarea:focus {
  color: #e16116;
  outline: none;  
  }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	height: auto;
	}

textarea {
	overflow: auto;
  resize: vertical;
	}

input[type=submit],
input[type=button] {
  padding: 0.5em;
  overflow: visible;
  color: #ebf0f2;
  font-weight: 600;
	font-size: 1em;  
  border: 0;
  cursor: pointer;  
  background: #9946d8;
  }

abbr {
  color: #ef0b61;
  font-weight: bold;
  }

/* Form Layout */
.fldRw {
  position: relative;  
  margin: 0;	
  }

.fldRw:after {
  content: "";
  display: table;
  clear: both;
	}

.fldRw input, 
.fldRw select, 
.fldRw textarea {  
	position: relative;
	margin: 0 0 0.125em;
	padding: 0.25em 0 0;
  display: inline-block;	
	font-size: 1.25em; 
	border: 0;	
	transition: all 0.3s;
	z-index: 50;
  }

.fldRw input[type=submit],
.fldRw input[type=button] {
	padding: 0.25em 0;
	background: #9946d8;
	}

.fldRw label { 
	position: absolute;
  left: -6px;
  top: 8px;
  color: #707070;
	font-size: 1.25em; 
  display: inline-block;
  padding: 0 6px;	
  background-color: transparent;
  pointer-events: none;  
  transition: width .3s ease, font-size .3s ease, color 0.3s, top 0.3s, background-color 0.8s;
	z-index: 60;
  }

.fldRw input:hover ~ label {
	color: #adadad;
	}

.fldRw label.active {
  top: -20px;
  color: #000000;
	font-size: 1em;	  
	}

.fldRw input:hover ~ label.active {
	color: #000000;
	}

.fldRw .fld-ico {
	float: left;
	display: block;	
	overflow: hidden;
	margin: 0 4px 0 0;	
	padding: 12px 11px;
	width: 48px;
	height: 53px;	
	background: #f3f3f3;
	}

.fldRw .fld-ico i {
	display: block;
	width: 26px;
	height: 26px;	
	background-repeat: no-repeat;
	background-position: 0 0;
	}

.fldRw .fld-ico i.ic-eml {	background-image: url(../uix/ico-email.png); 	}
.fldRw .fld-ico i.ic-pwd {	background-image: url(../uix/ico-password.png); 	}
.fldRw .fld-ico i.ic-usr {	background-image: url(../uix/ico-user.png); 	}

.fldRw .floatLabel {
	width: 100%;	
	}

.fldRw .fld-line {
	border-bottom: 1px solid #196273;
	}

.fldRw .fld-line:before {
	border-bottom: 3px solid #073a46;
	bottom: 0;
	content: '';
	display: block;
	left: 0;
	top: 0;
	position: absolute;
	transition: width .3s ease, border-color .3s ease;
	width: 0;
	}

.fldRw .ln-active:before {		
  width: 100%;	
	z-index: 0;
	}

#loginBtn,
#regbtn,
#btnSend {
	width: 100%;	
	}

.lnk-lost-pwd {	
	margin: 3em 0 0;
	text-align: center;	
	}

.lnk-lost-pwd a {
	display: inline-block;
	color: #303030;
	font-size: 0.875em;
	}

.lnk-lost-pwd a:after {
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	top: -0.125em;
	background: #196273;	
	}

.msg-login {
	margin: 0 0 2.5em;
	padding: 0 0.5em 0 0;	
	}

.lnk-send {
	display: block;
	padding: 0.3125em 1em;
  overflow: visible;
	width: 100%;
  color: #ebf0f2;
  font-weight: 600;
	font-size: 1.25em;    
  cursor: pointer;  
	text-align: center;
  background: #9946d8;
	}

.lnk-send:hover {
	color: #ebf0f2;
	}

.fldRw input[type=checkbox],
.fldRw input[type=radio] {
  margin: 9px 0 0;  
  }

.btn-main {
  padding: 0.75em 1.5em;
  color: #ffffff;
  font-size: .70em;
  font-weight: bold;
  letter-spacing: 1px;
  outline: none;
  text-transform: uppercase;  
  border-bottom: 2px solid #005522;
  background: #007133;
  }

.fld-bm { margin: 0 0 2em; }
.btn-bm { margin: 0 0 1em; }
.msg-tm { margin: 0 0 2.5em; }
.msg-md { margin: -1.5em 0 2em; }
.msg-bm { margin: -.5em 0 1em; }

.msg-error, 
.msg-error-top {
	display: none;
	position: relative;
	padding: 0.5em;
	color: #ffffff;
	font-size: 0.875em;
	background: #927f00;
	}

.msg-error-top:after {
	border-bottom: 8px solid;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	content: '';
	display: block;
	left: 24px;
	margin-left: -4px;
	position: absolute;
	top: -6px;
	width: 0;
	border-bottom-color: #927f00;
	}

.hd-forgot-pass {
	margin: 0 0 2em;
	}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Helper classes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
  }

.hidden { display: none !important; }

.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:after {
  content: "";
  display: table;
  clear: both;
	}

/* Debug */
.bg1 { background: #d1c27a; }
.bg2 { background: #d17ab9; }
.bg3 { background: #7ad1b5; }
.bg4 { background: #7ab8d1; }
.bg5 { background: #887ad1; }
.bg6 { background: #7ad1ab; }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Layout Containers + Sticky Footer
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.layer { 
  position: relative;  
  margin: 0 auto;
  padding: 0.5em;
  width: 1260px;		
  }

.layer:after {
  content: "";
  display: table;
  clear: both;		
	}

#pageLyr {
  min-height: 100%;
	margin:  0 0 -2.375em;  	
	}

#pageLyr:after {
  content: "";
  display: block;
	min-height: 3em;
	}

.bg-login {
	background: #f5f5f5;
	}

.main {
	padding: 1em 0;
	}

.main a {
	color: #303030;
	border-bottom: 1px solid #303030;	
	}

.main a:hover {
	color: #13a8e8;
	border-bottom: 1px solid #13a8e8;	
	}

#footer {
  position: relative;
	overflow: hidden;	
	min-height: 2.5em;
	background: #001118;
	}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Login Header
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.header-social {
	background: #fd883a;	
	}

.hdr-lst-contacts {
	position: relative;
	overflow: hidden;
	}

.hdr-lst-contacts li {
	float: left;
	margin: 0 0 0 1em;	
	}

.hdr-lst-contacts li:first-child {
	margin: 0;
	}

.hdr-lst-contacts li a {
	display: block;
	color: #303030;
	font-size: 0.875em;	
	}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Global Header
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.header-nav {	
	background: #b8bdbf;
	}

.usr-welcome {	
	float: left;	
	position: relative;
	}

.main-nav {
	float: right;
	position: relative;
	padding: 0.5em 0 0;
	}

.lst-top-nav li {
	float: left;	
	position: relative;	
	}

.lst-top-nav li a {
	position: relative;
	overflow: hidden;
	display: block;	
	margin: 0 1em 0 0;
	width: 2.25em;
	height: 2.25em;	
	text-indent: 100%;		
	white-space: nowrap;
	background-repeat: no-repeat;
	background-position: center center;
	}

.lst-top-nav li a.ic-msg { background-image: url(../uix/ico-message.png);  }
.lst-top-nav li a.ic-profile { background-image: url(../uix/ico-user-profile.png); }
.lst-top-nav li a.ic-logout { background-image: url(../uix/ico-logout.png); }

.logo-site {
	float: left;	
	}

.sub-nav {
	float: right;
	position: relative;
	margin: 0.5em 0 0;	
	}

a.ic-home {
	position: relative;
	overflow: hidden;
	display: block;	
	margin: 0 1em 0 0;
	width: 2.25em;
	height: 2.25em;	
	text-indent: 100%;	
	white-space: nowrap;
	background: url(../uix/ico-home.png) no-repeat center center;
	}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Login + Registration
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.box-login {
	position: relative;
	overflow: hidden;
	margin: 3em auto 0;
	padding: 0;
	width: 500px;
	}

.logo-login {
	position: relative;
	margin: 0 auto 2em;
	width: 320px;		
	}

.logo-login a, 
.logo-login a:hover {
	border: 0;
	}	

.fld-login {
	position: relative;	
	padding: 2em;
	background: #ffffff;
	}

.tabs-login {
	position: relative;
	overflow: hidden;
	margin: 0 0 1em;		
	}

.tabs-login li {
	float: left;
	margin: 0 0 0 2em;		
	}

.tabs-login li:first-child {
	margin: 0;
	}

.tabs-login li a {
	display: block;
	padding: 0;
	color: #acadb0;	
	font-size: 1.3125em;
	font-weight: 600;
	}

.tabs-login li a.active {
	color: #3d3d3d;		
	}

.tabs-login li a:after {
	content: "";
	display: block;
	height: 1px;
	width: 0;
	top: -0.125em;
	background: #acadb0;	
	transition: width .5s cubic-bezier(0.77, 0, .175, 1);
	}

.tabs-login li a:hover:after {
	width: 100%;	
	}

.tabs-login li a.active:after {
	width: 100%;
	background: #3d3d3d;
	}

.signin {
	display: none;
	position: relative;
	overflow: hidden;
	padding: 2em 0 0;		
	min-height: 15em;
	}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  ≈ Footer
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.site-footer {
	position: relative;
	overflow: hidden;
	color: #e4ebee;
	font-size: 0.875em;		
	}

.copyright {
	position: relative;
	float: left;		
	}

.ftr-lst-contacts {
	float: right;	
	}

.ftr-lst-contacts li {
	float: left;
	padding: 0 1em;
	}

.ftr-lst-contacts li a {
	color: #e4ebee;	
	}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
 ≈ Media Queries for Responsive Design 
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (max-width: 1259px) {

	.layer {
		width: 100%;
		}
	
}

ul.hdr-lst-contacts li.ico-mail a {
 color: #ffffff;
}

ul.hdr-lst-contacts li.ico-phone a {
 color: #ffffff;
}

@media only screen and (max-width: 499px) {

	.box-login {
		margin: 0 auto;
		width: 100%;
		}

	.logo-login {
		margin: 0 auto 1em;
		width: 280px;		
		}

	.fld-login {
    padding: 1em;
		}

	.signin {
    padding: 1em 0 0;
		}

	.tabs-login li a {
		font-size: 1.25em;
		}	

	.msg-login b {
		display: block;    
		}

}