* { margin:0; padding:0; }
html {height: 100%;}
body {height: 100%;font-family: 'Open Sans', sans-serif;font-size: 12px; background-image: url('./optimus-portal-bg-no-logo.png'); background-repeat:repeat-y; background-position:left top; background-size:100%;}

/* ----- Optimus brand colors ----- */

.purple {color:#7A45F0;}
.navy {color:#1E153F;}
.grey {color:#74717C;}
.mediumgrey {color: #BABABA;}
.lightgrey {color: #F0F0F0;}
.black {color: #161616}
.green {color: #48EB64}
.lime {color: #D4F938}
.blue {color: #C8F5F5}
.pink {color: #FFD6EB}



/* ---------------------- layout ---------------------- */
#wrapper {text-align:center; height:100%; width:100%; background-image: url(‘./optimus-portal-bg-no-logo.png’); background-repeat:repeat-y; background-position:left top; background-size:100%; position:relative; padding-bottom: 67px;}

#subwrapper {text-align:center; height:100%; width:100%;}

#top {text-align:left; height:140px; width: 100%; margin:0 auto;}

#subtop {text-align:left; width: 100%; margin:0 auto;}

#logo {
    float: none;
    text-align: center;
    height: 83px;
    width: 801px;
    margin: 20px auto -20px auto;
    padding: 0;
    background: url(./optimus-portal-logo-800px.png) center center no-repeat;
}
#branch-name {
text-align: left;
margin-top: 20px;
clear:left;
border-left: 20px solid #fff;
color: #1E153F;}

#cuplus-logo { float:left;margin-right:20px;}

#middle {
    text-align: left;
    height: 65%;
    width: 100%;
    margin: 0 auto;
    min-height: 450px;
}

#middlelogin {
    text-align: left;
    height: auto;
    width: 100%;
    padding-top: 2px;
    /* padding-top: 10px;
	margin-left: 20px; */
    margin: 0 auto;
    text-align: center;
}

#middlelogin label {
    display: block;
}

#middlelogin input {
    margin-bottom: 30px;
}


#signinholder {
    text-align: left;
    height: auto;
    width: 100%;
    position: relative;
}

#bottom {text-align:center; height:30px; width: 100%; margin:0 auto;}

#footer {
    clear: both;
    text-align: left;
    margin-top: 0;
    height: auto;
    overflow: auto;
    padding: 0 10px;
    font-size: 10px;
    color: #fff;
    background-color: #74717C;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 67px;
}
#footer p {padding:20px 0 0 0;}

#bottomright {padding-bottom: 20px;}

#sub { cursor:pointer;float:left; margin-left:20px; margin-right:20px;}

#menuholder { float:left; text-align:left;}

#menulogos {
    float: none;
    text-align: right;
    height: auto;
    width: auto;
    margin-top: 0;
    position: fixed;
    top: 10px;
    right: 30px;
}

#submiddle {text-align:left; height:auto; width: 100%; margin:0 auto;display:block;overflow:auto;}

#title {text-align:left; height:35px; width: 100%;}

#product { float:left; text-align:left; width: 99%;
padding: 15px 0 15px 1%; background-color:#F0F0F0;text-transform:uppercase; color:#1E153F;font-size:20px;}

#main {text-align:left; height:100%; width: 100%;overflow:auto;background-color:rgba(255, 255, 255, 0.5)}

#menumain {float: left;
text-align: left;
height: auto;
width: 15%;
padding:0;
}

#middlemain, #middlemain2 {text-align:left; height: 100%; width:80%; padding:1px; overflow:auto; position:relative;}

#iconsright { float:right; text-align:center; height:155px; width:229px; background-image:url(../pics/icons_bg.png); background-repeat:no-repeat;}

#iconsright-logo { text-align:center; height:125px; width:128px; margin-right:70px; margin-left:70px;}

#submenu { float:left;text-align:left;height:100%;width:98%;border:0;position:relative;padding:1%;}

#payment { float:left; text-align:center; height:40px; width:147px; padding-top:20px;}
#subbranchlogo { float:left; text-align:center; height:95px; width:147px;}
#recentlist { position:relative;}
#mainlist { position:relative;}
#helpdiv { margin:auto; width:auto;height:200px;background-color:#fff;overflow:auto;text-align:left;}
#modala { margin:auto; height:260px; width:auto; background-color:#fff;text-align:left;}
#modalc { margin:auto; width:auto; background-color:#fff; overflow:auto; position:relative; text-align:left;}
#modald { margin:auto; width:auto; background-color:#fff; position:relative;}
#terms { text-align:center;height:290px;width:auto; background-color:#fff; overflow:auto;}
#chscr { text-align:left;background-color:#fff;padding:10px}
#infotran { text-align:center;  width:100%; background-color:#fff;}
#errbox { font-size:12px;color:#FF0000;text-align:left;padding-left: 250px;width:100%}
#statbox { font-size:14px;height:20px;text-align:center;}
#empty { font-size:14px;color:#FF0000;padding:5px}
#web { text-align:center; height:460px; width:520px; background-color:#fff;overflow : auto;}
#middleright { float:right; text-align:left; height:auto; width:229px;}
#admadv { text-align:left; height:160px; width:auto;}
#advadm1 { float:left;text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 20px 20px;}
#advadm2 { float:left;text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 20px 20px;}
#advadm3 { float:left;text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 0px 20px;}
#adv1 { float:right; text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 20px 20px;}
#adv2 { float:right; text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 20px 20px;}
#adv3 { float:right; text-align:center; height:160px; width:229px; background-color:#fff; margin:0px 0px 0px 20px;}
#mainhint { width:100%;color: #7A45F0; text-align:center; text-decoration: none;}
#subhint { width:100%;color: #7A45F0; text-decoration: none; text-align:center;}
#act { color: #7A45F0; font-size: 10px; border:0; text-align:center; width:60px;}
#helptext { color: #7A45F0; font-size: 10px;float:right;}

/* ---------------------- rounded box ---------------------- */
.box-title{
	color:#1E153F;
	font-size: 14px;
}
.help{
	position:absolute;
	z-index:1;
	font: bold 12px Arial;
	color:#1E153F;
	background-color:#FFF;
	top: 2px;
    right:3px;
}
.help a {
	color: #7A45F0;
	font-size: 16px;
	text-decoration: none;
}
.help a:hover {
	color: #BABABA;
	font-size: 16px;
	text-decoration: none;
}
.box {
	position:relative;
	padding:2px;
	margin:0 5px;
}
.box-nor {
	position:relative;
	background-color:#FFF;
	padding:5px;
	border-radius: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border: 3px solid #161616;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
}
/* ---------------------- type styles ---------------------- */
  .signoff {
	font-size:10px;
	color:#fff;
  padding: 20px 20px 0px 20px;
}
  .branch {
	font-size: 41px;
	font-weight: bold;
	font-style: normal;
	color:#fff;
}
  .branch-info {
	font-size: 28px;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	color:#fff;
}
   .name {
	font-size: 22px;
	font-weight: lighter;
	font-style: normal;
	text-decoration: none;
	color:#1E153F;
	padding: 15px 10px;
	display: block;
}

.menu{
	padding-left:5px;
	padding-top:18px;
}
.menusub{
	padding:4px 0 4px 15px;
}

.menusub:hover {background-color:#74717C;}
.menusub:hover a {color:#fff;}

  .tabletitme {
	font-size:9px;
	color:#BABABA;
}
  .login {
	font-size:18px;
	color:#BABABA;
}

  .product {
	font-size:16px;
	color:#BABABA;
}

  .form {
	font-size:12px;
	width:200px;
}

.tabtitle {
	font-size:18px;
	color: #000;
}

.infotran {
	font-size:12px;
	color: #000;
}
td.acctr {
	cursor:pointer;
	font-size:10px;
	height: 18px;
	width:70px;
	background-color:#EFEFEF;
}
td.acctitle {
	width:120px;
	height: 16px;
	font: bold 12px Arial;
	background-color:#393939;
}
tr.acctr {
	cursor:pointer;
	font-size:11px;
	height: 16px;
	background-color:#EFEFEF;
}
tr.acctr:hover {
	color:#000066;
	background-color:#CDCDCD;
}
tr.acctitle {
	height: 30px;
	font: bold 11px Arial;
	color: #fff;
	background-color:#7A45F0;
}
tr.rectr {
	font-size:11px;
	color:#000;
	background-color:#EFEFEF;
}
table.acclist{
	width:100%;
}
table.acclist td{
	padding:1px;
}
table.modaltab {
	width:100%;
	text-align:left;
}
table.modaltab td {
	padding-left:2px;
	height:28px;
	border-color: #FFF;
	background-color:#EFEFEF;
}
table.loantab {
	width:100%;
	text-align:left;
}
table.loantab td {
	font-size:11px;
	padding-left:2px;
	height:21px;
	border-color: #FFF;
	background-color:#EFEFEF;
}
input.err,select.err {
	border: 2px solid #FF0000;
}
td.authtd {
	font-size:12px;
	font-weight: bold;
	color:#000;
	background-color:#EFEFEF;
}
td.srch {
	color:#333;
	font-size:12px;
	height:18px;
}

td.srchlbl {
	color:#333;
	font-size:14px;
	height:18px;
}


select {appearance: none; -webkit-appearance: none;-moz-appearance: none;padding:5px 25px 5px 5px;border:1px solid #BABABA;font-size:12px;width:auto !important;background: url("./Arrow-down.png") right no-repeat #fff;margin-right:20px;}

input {padding:5px;border:1px solid #BABABA;font-size:12px;width:auto !important;background-color:#fff;}

td.loan{
	background-color:#C8F5F5;
	font-size: 10px;
	width:55px;height:18px;
	text-align:center;
	font-weight: bold;
}
td.loansel{
	background-color:#EFEFEF;
	font-size: 10px;
	width:55px;height:18px;
	text-align:center;
	font-weight: bold;
}
td.loan-step{
	background-color:#C8F5F5C8F5F5;
	font-size: 10px;
	width:90px;height:18px;
	text-align:center;
	font-weight: bold;
}
td.loan-stepsel{
	background-color:#EFEFEF;
	font-size: 10px;
	width:90px;height:18px;
	text-align:center;
	font-weight: bold;
}
td.loan-skip{
	background-color:#C8F5F5;
	font-size: 10px;
	color:#868686;
	width:90px;height:18px;
	text-align:center;
	font-weight: bold;
}
a.footerlink {
	color: #fff;
	font-size: 10px;
	text-decoration: none;
  padding: 0px 20px;
}
a.footerlink:visited {
	color: #fff;
	font-size: 10px;
	text-decoration: none;
}
a.footerlink:hover {
	color: #BABABA;
	font-size: 10px;
	text-decoration: none;
}
.mainlink {
	padding-left:15px;
	font-size: 16px;
	font-weight: lighter;
	color: #fff;
	text-transform: uppercase;
  background-color:#7A45F0;
  margin-top:10px;
}
 a.mainlink {
	color: #7A45F0;
	font-size: 12px;
	text-decoration: none;

}
 a.sublink {
	color: #7A45F0;
	font-weight: lighter;
	font-size: 12px;
	text-decoration: none;
	text-transform: uppercase;
}
a.sublink:visited {
	color: #7A45F0;
	text-decoration: none;
}
a.sublink:hover {
	color: #000;
	text-decoration: none;
}
a.sublink2 {
	color: #333;
	font-size: 13px;
	text-decoration: none;
	width:100%;
	height:100%;
	display:block;
	text-indent: -10px;
	padding-left:10px;
}
a.sublink2:before {content:"» ";}

a.sublink2:visited {
	color: #7A45F0;
	text-decoration: none;
}
a.sublink2:hover {
	color: #fff;
	text-decoration: none;
}
a.tabhead {
	font-size:18px;
	color: #000;
	text-decoration: none;
}
a.tabhead:hover {
	color: #BABABA;
}
a.doc {
	color: #000000;
	font-size: 16px;
	text-decoration: none;
}
a.doc:hover {
	color: #000000;
	text-decoration: underline;
}

/* ---------------------- main menu ---------------------- */

a {
	cursor:pointer;
	text-decoration: none;
	color: #161616;
}

a:hover {
	text-decoration: underline;
}

:focus {
	-moz-outline-style: none;
}

#navtabs {
	list-style: none;
	padding: 0;
	height: 35px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

#navtabs li {
	padding: 10px;
	margin:2px;
	border:1px solid #F0F0F0;
	display: inline-block;
	-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.35);
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.35);
}

#navtabs li a {
	text-align: center;
}
#navtabs li:hover {
	background-color:#BABABA;
}
#navtabs li:hover a {
	color:#fff;
	text-decoration:none;
}

#navtabs li.current-cat {
	border-bottom: 4px solid #BABABA;
	background-color: #F0F0F0;
}

#navtabs li.current-cat a {
	color: #7A45F0;
}

/* Windows */
.overlay_dialog {
	background-color: #666666;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.overlay___invisible__ {
  background-color: #666666;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.top_draggable, .bottom_draggable {
  cursor:move;
}

.status_bar {
  font-size:12px;
}
.status_bar input{
  font-size:12px;
}

.wired_frame {
  display: block;
  position: absolute;
  border: 1px #000 dashed;
}

/* DO NOT CHANGE THESE VALUES*/
.dialog {
	display: block;
	position: absolute;
}

.dialog table.table_window  {
    border-spacing: 0;
    width: 100%;
	margin: 0px;
	padding:0px;
}
/* IE6 */
* html .dialog table.table_window  {
	border-collapse: collapse;
}
/* IE7 */
*+html .dialog table.table_window  {
	border-collapse: collapse;
}

.dialog table.table_window td , .dialog table.table_window th {
  padding: 0;
}

.dialog .title_window {
  -moz-user-select:none;
}

.overlay_alert {
	background-color: #A7A7A7;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.alert_nw {
  background: transparent url(srgcu/left-top.gif) no-repeat 0 0;
  width:10px;
  height:7px;
}

.alert_n {
  background: transparent url(srgcu/top-middle.gif) repeat-x 0 0;
  height:7px;
}

.alert_ne {
  background: transparent url(srgcu/right-top.gif) no-repeat 0 0;
  width:10px;
  height:7px;
}

.alert_w {
  background: transparent url(srgcu/frame-left.gif) repeat-y top left;
  width:7px;
}

.alert_e {
  background: transparent url(srgcu/frame-right.gif) repeat-y top right;
  width:7px;
}

.alert_sw {
  background: transparent url(srgcu/bottom-left-c.gif) no-repeat 0 0;
  width:7px;
  height:7px;
}

.alert_s {
  background: transparent url(srgcu/bottom-middle.gif) repeat-x 0 0;
  height:7px;
}

.alert_se, .alert_sizer  {
  background: transparent url(srgcu/bottom-right-c.gif) no-repeat 0 0;
  width:7px;
  height:7px;
}

.alert_sizer {
	cursor:se-resize;
}

.alert_title {
	float:left;
	height:0px;
}

.alert_content {
	overflow:none;
	color: #161616;
	font-size: 12px;
	background:#FDFDFD;
}

/* For alert/confirm dialog */
.alert_window {
	border:1px solid #F00;
	background: #FFF;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	width:400px;
}

.alert_message {
	font: 12px arial;
	text-align:center;
	width:100%;
}
.alert_buttons {
	text-align:center;
	width:100%;
	margin-top:2px;
}

.alert_buttons input {
	border:1px solid #999;
	border-top-color:#CCC;
	border-left-color:#CCC;
	padding:2px;
	background-color:#FFF;
	color:#333;
	background-image:url(srgcu/background_buttons.gif);
	background-repeat:repeat-x;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
}

.alert_buttons input.cancel_button.ok_button{
	width:100px;
	color:red;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	margin:0 10px;
}

.alert_buttons input.cancel_button{
	width:100px;
	color:red;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	margin:0 10px;
}
.alert_buttons input.back_button{
	width:100px;
	color:#161616;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	margin:0 10px;
}
.alert_buttons input.ok_button{
	width:100px;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	color:#48EB64;
	margin:0 10px;
}
.alert_buttons input.c_button{
	width:100px;
	color:#7A45F0;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	margin:0 10px;
}
.alert_buttons input.go_button{
	width:100px;
	font-size: 14px;
	font-weight:lighter;
	text-transform:uppercase;
	padding:5px 10px 5px 10px;
	color:#333;
	margin:0 10px;
}

.alert_buttons input:hover {
	background-color:#F0F0F0;
	color:#000;
}

.alert_buttons input {
	width:20%;
}

.alert_progress {
	float:left;
	margin:auto;
	text-align:center;
	width:100%;
	height:16px;
	background: #FFF url('alert/progress.gif') no-repeat center center
}

.alert_wired_frame {
	background: #FFF;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
.total{
	font-weight:bold;
	color:#161616;
}
.alert{
	font-size:14px;
	color:#161616;
}
.pass{
	font-size:18px;
	color:#BABABA;
}
.label{
	font-size:14px;
	color:#BABABA;
	width:250px;
	vertical-align: top;
    text-align: right;
}
.labelgauth{
	font-size:14px;
	color:#BABABA;
	width:600px;
	vertical-align: top;
    text-align: left;
	padding-left: 40px;
}
.tipslabel{
	font-size:14px;
	color:#BABABA;
	width:500px;
	vertical-align: top;
    text-align: right;
}
span#help_btn {
    width: 20px;
    height: 20px;
    display: block;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    color: #48EB64;
    padding: 2px;
    border: 3px solid #fff;
    opacity: .5;
}
span#help_btn:hover {
    background-color: #48EB64;
    color: white;
    opacity: 1;
}
span#help_btn {
    width: 20px;
    height: 20px;
    display: block;
    background-color: #48EB64;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    padding: 2px;
    border: 3px solid #fff;
    opacity: .5;
    cursor:pointer;
}
span#help_btn:hover {
	opacity: 1;
}