/* STYLESHEET */

/* ---------- RESET --------- */

html,body,div,applet,object,iframe,blockquote,pre,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary, time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; font-family:Arial, sans-serif; vertical-align:baseline;}
html {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
table {border-collapse:collapse; border-spacing:0;}

/* ---------- ALL ELEMENTS ---------- */

* {margin: 0; padding: 0;}

body {background-color: #f6f7f8;}

/* ---------- TEXT ELEMENTS ---------- */

h1, h2, h3 {
	margin: 0 0 0.1em 0;
	font-weight: bold;
	line-height: 0.7;
	}

h1 {
	font-size: 1.5em;
	color: #757985;
	}

h2 {
	font-size: 1em;
	color: #00693f;
	}

h3 {
	font-size: 0.875em;
	color: #666666;
	}

p {
	margin: 0 0 1.25em 0;
	font-size: 0.875em;
	line-height: 1.5;
	color: #333;
	}

/*.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form label {
	width: 175px;
}*/

span.currency.balance.negative {
	color: #ff0000;
}

span.credit {
	color: #4F8A10;
}

a {color: #006940; text-decoration: none;}
a:hover {color: #9abf34;}

a, img {border: 0;}

img {max-width: 100%;}

/* div {display: block;} */

hr {
	margin-bottom: 0.625em;
	width: 100%;
	height: 1px;
	background-color: #ccc;
	border: 0;
	}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

.clearfix {display: inline-block;}

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/* ---------- CONTANER --------- */

#login {background: #f6f7f8 url(../images/backdrop2.jpg?rev=20171130) no-repeat -820px -160px;}

#login #container {background: none;}

#container {
	margin: 0 auto;
	max-width: 100%;
	background: url(../images/backdrop2.jpg?rev=20171130) repeat-y center 80px;
	}

/* ---------- TOP BAR ---------- */

#login #top-bar {display: none;}

#top-bar {
	padding: 0.5em 1.25em;
	line-height: 1.5;
	color: #fff;
	background: url(../images/top-bar-bg.png) repeat-x top left;
	background-color: #16753e;
	}

.date-name {
	float: left;
	font-size: 0.875em;
	}

.top-nav {
	float: right;
	font-size: 0.875em;
	}

.top-nav a {
	display: inline-block;
	padding: 0 0.5em 0 2.0em;
	color: #fff;
	border-left: 1px solid #aaa;
	}

.top-nav .my-profile {background: url(../images/top-icon-profile.png) no-repeat 0.75em center; border: 0;}
.top-nav .alerts {background: url(../images/top-icon-alerts.png) no-repeat 0.75em center;}
.top-nav .help {background: url(../images/top-icon-help.png) no-repeat 0.75em center;}
.top-nav .sign-off {background: url(../images/top-icon-signoff.png) no-repeat 0.75em center;}
.top-nav .print {background: url(../images/printer-icon.png) no-repeat 0.75em center;}

/* ---------- HEADER ----------- */

.logos {
	background: url(../images/header-bg2.jpg) repeat-x center top;
	}

.pull-left {float: left;}

.atc-logo {
	float: left;
	padding: 0.8em 0.8em;
}
.ww-logo {
	float: right;
	padding: 1.125em 1.25em;
}

.pull-right {float: right;}

/* ---------- NAV ---------- */

#login #nav {
	margin: 0;
	height: 14px;
	background: url(../images/nav-hidden.png) repeat-x;
	box-shadow: 0px 2px 4px #999;
	}

#nav {margin-bottom: 1.75em;}

#login .menu {display: none;}

.menu {
	position: relative;
	padding: 0 2.5em;
	background: url(../images/nav-bg.png) repeat-x;
	border-top: 2px solid #006940;
	z-index: 50;
	}

.menu li {
	float: left;
	display: inline;
	}

.menu li a {
	display: block;
	margin-bottom: 8px;
	padding: 0 1.125em 0 1.125em;
	font-size: 0.9375em;
	line-height: 2.333;
	color: #fff;
	border-right: 1px solid #eee;
	}

.menu li:first-child a {border-left: 1px solid #eee;}

.menu li a.active {
	margin: 0;
	padding-bottom: 9px;
	line-height: 2.200;
	color: #9abf34;
	background: url(../images/nav-hover-bg.png) repeat-x;
	border: 0px;
	}
	
/* Sick of the menu twerking worse than miley cyrus */
.menu li:first-child a.active {margin-right: 1px;}

.menu ul {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 100%;
	background-color: #006940;
	z-index: 100;
	}

/* THIS IS A FIX FOR NAV MENU */

#nav ul {
	margin: 0;
/* 	padding: 0; */
}

#nav ul ul {
	padding: 0;
}

#nav .menu ul li:first-child {margin-left: 2.5em;}

#nav .menu ul li a {
	margin: 0;
	padding: 0 1.125em 0.5em 1.125em;
	font-size: 0.875em;
	line-height: 1.5;
	color: #fff;
	border: 0px !important;
	z-index: 100;
	}

#nav .menu ul li a.active {
	margin: 0;
	padding: 0 1.125em 0.5em 1.125em;
	line-height: 1.5;
	color: #9abf34;
	background: none;
	background-color: #006940;
	z-index: 100;
	}
	
.top-nav a:hover {color: #9abf34;}
 
.menu li a:hover {background-color: #a78100;}
 
#nav .menu ul li a:hover {color: #9abf34; background-color: transparent;}


/* ---------- CONTENT ---------- */

#content {padding: 0.5em 1.25em 0.5em 1.25em;}

/* ---------- LOGIN ---------- */

#login-left {
	display: table-cell;
	width: 400px;
	}

#login-left img {float:left; margin: 5px 4px 0 0;}

#login-left p {line-height: 2;}

.login {
	margin-bottom: 1.25em;
	padding: 0.625em 1.25em 1.25em 1.25em;
	width: 370px;
	height: 146px;
	background: url(../images/login-bg.png) no-repeat;
	}

.login label {
	display: block;
	margin-bottom: 0.0625em;
	font-size: 0.875em;
	font-weight: bold;
	line-height: 1.5;
	color: #666666;
	}

.login input {
	display: block;
	margin-bottom: 0.3125em;
	padding: 0.21em 0.42em;
	font-size: 0.875em;
	background-color: #fff;
	border: 1px solid #ccc;
	}

.login input[type=text], .login input[type=password] {width: 85%;}

.login input[type=password] {margin-bottom: 1.625em;}

.login .login-submit, .login .login-clear {
	float: left;
	margin-right: 1.25em;
	padding: 0.25em 1.0em;
	font-size: 0.875em;
	font-weight: bold;
	color: #fff;
	border-radius: 6px;
	border: 0px;
	box-shadow: 3px 3px 5px #999;

	}

.login .login-submit {background-color: #006940;}

.login .login-clear {background-color: #9abf34;}

#login-right {display: table-cell;}

/* ---------- BUTTONS --------- */

.button {
            border: 0;
            border-radius: 6px 6px 6px 6px;
            color: #FFFFFF;
            font-size: 0.875em;
            font-weight: bold;
            padding: 0.25em 1em;

}

.dk-green {background-color: #006940;}
.dk-green:hover {background-color: #008250;}
 
.lt-green {background-color: #9abf34;}
.lt-green:hover {background-color: #afd93b;}
 
.red {background-color: #e60000;}
.red:hover {background-color: #ff0000;}


/* ---------- MAIN ---------- */

#main {
	float: left;
	width: 85%;
	margin-right: -180px;
	}

/* ----- Search Bar ----- */

.search-bar {
	margin-bottom: 1.25em;
	padding: 0.25em 0.5em;
	min-height: 53px;
	background: #e3e4e6 url(../images/search-bar-bg.png) repeat-x;
	border-radius: 12px;
	border: 1px solid #ccc;
  
	}

.search-section {
	float: left;
	margin-right: 0.75em;
	}

.search-section label {
	display: block;
	margin-bottom: 0.125em;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 2;
	color: #666666;
	}

.search-section input {
	padding: 0.21em 0.42em;
	font-size: 0.75em;
	background-color: #fff;
	border: 1px solid #ccc;
	}

.search-from input, .search-to input {width: 54px;}
.search-amount input, .search-check-no input {width: 70px;}
.search-description input {width: 86px;}

.search-section select {max-width: 96px;}

.search-submit input {
	margin: -0.125em 0 0 0;
	padding: 0.25em 1.0em;
	font-size: 0.875em;
	font-weight: bold;
	color: #fff;
	background-color: #006940;
	border-radius: 6px;
	border: 0px;
  
	}

.search-section img {vertical-align: middle;}

/* ----- Table ----- */

table {
	margin-bottom: 1.25em;
	width: 100%;
	background-color: #fff;
	}

table tbody tr:nth-child(even) {background: #f0f0f0;}
table tbody tr.even {background: #f0f0f0;}

table tbody tr:nth-child(odd) {background: #fff;}
table tbody tr.odd {background: #fff;}

table tr:first-child {background: transparent;}

/*table tbody tr td {
	border-collapse: collapse;
	border-top-color: #DDD;
	border-top-style: solid;
	border-top-width: 1px;
}*/

table th, table td {
	padding: 0.333em 1em;
	font-size: 0.85em;
	line-height: 1.5;
	color: #333;
	vertical-align: middle;
	border-left: 1px solid #b4b9c5;
	border-right: 1px solid #b4b9c5;
	}

table th {
	padding: 0.625em 1em;
	text-align: left;
	color: #fff;
	background: #60646e url(../images/table-header-bg.png) repeat-x;
	}

table th.action {width: 25%;}

table th.table-header:first-child {border-radius: 9px 0 0 0; border-left: 0px !important;
	 }
table th.table-header:last-child {border-radius: 0 9px 0 0; border-right: 0px !important;
	 }
table th.table-footer:first-child {border-radius: 0 0 0 9px; border-left: 0px !important;
	 }
table th.table-footer:last-child {border-radius: 0 0 9px 0; border-right: 0px !important;
	 }

table td.td-action-cell {
	padding: 0.1em 1em 0.1em 0.1em;
	}

table img {margin: 0 0.5em 0 0; vertical-align: middle;}

/* ---------- SIDEBAR ---------- */

#sidebar {
	float: right;
	width: 180px;
	}

.last-login {
	margin-bottom: 1.0em;
	font-size: 0.6875em;
	line-height: 1.5;
	color: #898989;
	}

.sidebar-button {
	margin-bottom: 1.0em;
	line-height: 0;
	}

.sidebar-links {
	margin-bottom: 1.0em;
	background-color: #eee;
	border-radius: 9px;
  
	}

.sidebar-links h3 {
	padding: 0.5em 1.667em 0.5em 3.333em;
	font-size: 0.75em;
	line-height: 26px!important; /*I dislike you mountain media - please learn better CSS*/
	color: #006940;
	border-radius: 9px 9px 0px 0px;
  
	}

.open-new-account h3 {background: #dcdcdc url(../images/sidebar-icon-new-account.png) no-repeat 8px 6px;}
.quick-link h3 {background: #dcdcdc url(../images/sidebar-icon-quick-link.png) no-repeat 8px 6px;}

.sidebar-links ul {
	padding: 0.2em 1.0em 0.4em 2.3em;
	}

.sidebar-links li {
	font-size: 0.6875em;
	line-height: 2;
	color: #006940;
	}

.sidebar-photo {
	margin: 0 auto 1.0em auto;
	width: 157px;
	height: 92px;
	border-radius: 6px;
	box-shadow: 3px 3px 6px #aaa;
	overflow: hidden;
  
	}

.entrance img {margin: -35px 0 0 0;}

/* ---------- FOOTER ---------- */

#footer {
	padding: 0.5em 1.25em;
	color: #acacac;
	background-color: #000;
	}

#footer a {color: #9abf34;}

#footer img {vertical-align: middle;}

.ehl, .web-link, .copyright {
	float: left;
	width: 33%;
	font-size: 0.875em;
	line-height: 1.25;
	}

.web-link {text-align: center;}

.copyright {
	font-size: 0.6875em;
	line-height: 1.75;
	text-align: right;
	}

/* ---------- MEDIA QUERIES ---------- */

@media screen and (max-width: 950px) {
#main, #sidebar {float: none; width: 100%!important; margin-right: 0;}
	#sidebar {position: relative; min-height: 200px; margin-top: 1em;}
	.sidebar-links, .sidebar-button {width: 180px;}
	.sidebar-photo {margin: 0; width: 157px; height: 162px;}
	.sidebar-photo img {width: 180px; height: 162px;}
	.last-login {position: absolute; top: 177px; left: 0;}
	.open-new-account {position: absolute; top: 0; left: 0;}
	.remote-check-deposit {position: absolute; top: 130px; left: 0;}
	.quick-link {position: absolute; top: 0; left: 195px;}
	.get-insurance-quote {position: absolute; top: 200px; left: 195px;}
	.entrance {position: absolute; top: 0px; left: 393px;}
	.entrance img {margin: 0;}
	.autumn-of-giving {position: absolute; top: 0px; left: 393px;}
	.clock {position: absolute; top: 0px; left: 568px;}
}

@media screen and (max-width: 768px) {
	.ehl {width: 38%;}
	.copyright {width: 28%; text-align: left;}
}

@media screen and (max-width: 670px) {
	#login-left, #login-right {display: block; width: 100%;}
	#login-left {margin-bottom: 1.25em; border-bottom: 1px solid #ccc;}
}

@media screen and (max-width: 600px) {
	.date-name, .top-nav {float: none; margin: 0 auto 0.5em auto; width: 100%; text-align: center;}
	.clock {display: none;}
}