﻿
/* ------------------------------------------------------------
NRT Gateway CSS

- MAIN COLORS ------------------
NRT Green: 			#006A53
Background Gray:	#dfdfdf
Dark Gray (text):	#3f3f3f

------------------------------------------------------------ */

/* Basic ========================================================================== */

html {
	overflow-y: scroll;	
}

body {
	padding: 10px 0 20px 0;
	background: #dfdfdf url("../images/NRTGateway/bg.gif") 0 0 repeat-x;
	font-size:12px;
	font-family: "arial", sans-serif;
	color:#3f3f3f;
}

h1, h2, h3, h4, h5, h6, p, address, blockquote, table, dl, fieldset {margin:15px 0;}

a {
	color: #006A53;
	text-decoration:underline;
	outline: none;
}

div.clear {clear:both;}

/* Layout ========================================================================== */

#main,
#main-modal {
	padding:10px;
	margin:0 auto;
	overflow:hidden;
	background:#ffffff;	
}

#main {
	width: 950px;
}

#main-modal  {
	width: 650px;
}

#main-fullscreen {
	padding-bottom: 10px;
	margin:0 auto;
	overflow:hidden;
	background:#ffffff;
}

#main-container,
#main-container-modal {
	border: 5px solid #ffffff;
	overflow:hidden;
	margin: 0 auto;	
}

#main-container {
	width: 940px;
}

#main-container-modal {
	width: 600px;
}

#main-container #content-container {
	padding: 0 15px 0 15px;
}

#header {
	position:relative;
	height:95px;
	padding:0 0 0 20px;
	background:url("../images/NRTGateway/bg-header.gif") 0 0 repeat-x;
	overflow:hidden;
	background-color:#ffffff;	
	text-align:left;
}

#header #logo {
	position:absolute;
	top:20px;
	margin:0;
}
    
#header #logo-brand {
	position:absolute;
	top:15px;
	right:20px;
	width:275px;
	padding:0;
	color:#FFFFFF;
	text-align:right;
}
    
#nav {
	position:relative;
	padding:0 20px;
	background: #fff url("../images/NRTGateway/bg-nav.gif") 0 0 repeat-x;
	border-top:1px solid #FFFFFF; 
	height: 38px;
}

#nav a {
	color: #006A53;
	text-decoration:none;
}

#nav a:hover {
	text-decoration:underline;
}

#nav #nav-right {
	position:absolute;
	top:9px;
	right:25px;
	margin:0;
	padding:0;
	font-weight:bold;
}

#nav #nav-welcome {
	position:absolute;
	top:9px;
	left:20px;
	margin:0;
	padding:0;
	font-weight:bold;
	font-size: 14px;
}

#nav .icon-secure {
	padding-left:20px;
	background:url("../images/NRTGateway/icon-secure.gif") 0 50% no-repeat;
}

#nav .icon-profile {
	padding-left:20px;
	background:url("../images/NRTGateway/icon-profile.gif") 0 50% no-repeat;
}

#nav .icon-home {
	margin-left:10px;
	padding-left:20px;
	background:url("../images/NRTGateway/icon-home.gif") 0 50% no-repeat;
}

#footer {
	border-top:2px solid #dfdfdf;
	margin: 30px 0 0 0;
	padding:10px 10px 35px 10px;	
}

#footer a { color:#5F5F5F; }
#footer a:hover {color:#3f3f3f;}

#footer p {margin:0px;}
    
#footer .legal {
	font-size:10px;
}
#footer .legal a {
	color: #3f3f3f;
	text-decoration: none;
}

#footer .helpdesk {
	font-size:16px;
	margin:0px;
	padding:0px;
	text-align:left;
}
#footer .helpdesk .small {
	font-size:11px;
}

div.hrule.dotted {
	color:#fff;
	width:100%;
	height:1px;
	border-bottom: 1px dotted #383838;
	padding:0;
	margin: 6px 0 6px 0;	
}

div.form-container div.hrule.dotted {
	color:#fff;
	width:100%;
	height:1px;
	border-bottom: 1px dotted #383838;
	padding:0;
	margin: 0 0 15px 0;	
}

/* Standard Buttons ========================================================================== */

a.defaultButton,
a.disabledButton
{
	/* Sliding right image */
    background: transparent url('../images/NRTGateway/button-bg2-right.gif') no-repeat scroll top right; 
	display: block;
	float: left;
	height: 35px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	margin-right: 6px;
	padding-right: 20px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
}

a.defaultButton {
 	color: #000000;
}

a.disabledButton {
	color: #999999;
	cursor: default;
}

a.defaultButton span,
a.disabledButton span {
	/* Background left image */ 
	background: transparent url('../images/NRTGateway/button-bg2-left.gif') no-repeat; 
	display: block;
	line-height: 29px; /* CHANGE THIS VALUE ACCORDING TO BUTTON HEIGHT */
	padding: 3px 0 3px 20px;
} 
a.defaultButton:hover span {
	text-decoration:none;
	color: #000;
}

a.defaultButton:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.defaultButton:active span {
    background-position: bottom left;
    padding: 4px 0 2px 20px; /* push text down 1px */
} 

/* Other Styles ========================================================================== */

.floatleft { float:left; }
.floatright { float:right; }


/* Main Application Buttons ========================================================================== */

#button-container {
	padding: 15px 20px 10px 20px;
	text-align:center;
	overflow:hidden;	
}

.buttonrow {
	margin-bottom:20px;
	overflow:hidden;
	font-family: Arial, sans-serif;
	font-size:14px;
	color: #009832;
	border:1px solid #fff;
	clear:both;	
}

.buttonrow ul {
	padding:0;
	margin:0;
	display: inline;
	list-style: none;	
}

.buttonrow ul li {
	float:left;
	height:87px;
	width: 257px;
	line-height:87px;
	margin:0 18px;	
}

.buttonrow li a {
	background: url(../images/NRTGateway/appbutton-bg.gif) no-repeat;
	display:block;
	height:87px;
	text-align:center;
	text-decoration:none;
	color: #004A39;
	font-size:14px;
	font-weight:bold;
    outline: none; /* hide dotted outline in Firefox */    
}

.buttonrow li a:hover {
	background: url(../images/NRTGateway/appbutton-bg-hover.gif) no-repeat;		
	text-decoration:none;
	color: #004A39;
}

.buttonrow li img {
	border:0;
	padding:0;
	margin:12px 0 0 0;
	width:223px;
	height:58px;	
}


/* Main Links ========================================================================== */

#link-container {
	padding: 13px 10px 0 50px;
	text-align:center;
}

#link-container ul {
	margin:0;
	padding:0;
	list-style:none;	
}
#link-container ul li {
	display:inline;
}
#link-container ul li a {
	padding: 0 20px 0 0;
	text-decoration:none;
	outline: none;
}
#link-container ul li a:hover {
	text-decoration:underline;
}

/* Form styles  ========================================================================== */

	/* reference: http://nidahas.com/sandbox/form_template.html */

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors,
div.errors-modal,
div.success {
	margin: 0 0 10px 0;
	padding: 13px 10px 13px 70px;
	font-weight:bold;
	text-align: left;
}

div.errors ul,
div.errors-modal ul,
div.success ul {
	padding: 0px;
	margin: 0px;
	list-style-type: square;
}

li.error {
	color: #cc0000;
}

div.errors,
div.errors-modal {
	border: #cc0000 1px solid;
	background: #FFC url(../images/NRTGateway/icon-error.gif) no-repeat 10px center;
}

div.errors-modal 
{
	width: 400px; 
	margin: 40px auto;
}

div.success {
	border: #339933 1px solid;
	background: #FFC url(../images/NRTGateway/icon-success.gif) no-repeat 10px center;
}

div.form-container p,
div.form-container form p { 
	margin:0;
}
div.form-container p.instructions {
	margin: 0 0 10px 0;
}

div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
div.form-container fieldset { margin:0; padding:0; border: 0px;}
div.form-container form legend { font-weight: bold; color: #666; }

div.form-container div { margin-bottom: 15px; clear:both;}

div.form-container label, 
div.form-container span.label {
	position: relative;
}
/* To left align labels, add this:
	margin-right: 10px;
	padding-right: 10px;
	display: block;
	float: left;
	text-align: right;

   To left align labels, add this:
	width: 100px;
*/

div.form-container label.error, 
div.form-container span.error { color: #C00; }
div.form-container label em, 
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { border-color: #C00; background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus, 
div.form-container textarea:focus {	/* background-color: #FFC; border-color: #FC6; */ }
div.form-container div.controlset label, 
div.form-container div.controlset input { display: inline; float: none; }
div.form-container div.controlset div { margin-left: 170px; }

div.form-container span.data {
	padding: 5px 0 0 0;
	display:block;
	font-size:14px;
}

div.form-container div.instructions {
	font-size: 13px;
	padding-left: 30px;
	float: left; 
	clear: none; 
}
	
div.form-container div.instructions ul {
	list-style:square;
	margin: 0 0 10px 25px;
}

#content-container div.form-container {
	font-size:14px;
}

div.form-container div.password-controls {
	float: left; 
	clear: none;
	
}
/*
#content-container div.form-container label, 
#content-container div.form-container span.label {
	font-size:14px;
	font-weight:bold;
	color: #000;
	width:175px;
	text-align:right;
	margin-right: 10px;
	padding-right: 10px;
	padding-top:5px;
	display: block;
	float: left;
	text-align: right;

}

#content-container div.form-container label.nofield {
	padding-top:0;
}

#content-container div.form-container input {
	padding:5px;
	font-size:14px;
	border: 1px solid gray;
	display:block;
}
*/

#content-container div.form-container label, 
#content-container div.form-container span.label {
	font-size:14px;
	font-weight:bold;
	color: #000;
}

#content-container div.form-container input,
#content-container div.form-container select {
	font-size:15px;
	border: 1px solid gray;
	display:block;
	outline: none;
}

#content-container div.form-container input {
	padding:5px;	
}

/* Modal / HighSlide Styles  ========================================================================== */

.highslide-html-content {
	padding-bottom:5px;
	text-align: left;	
}

.highslide-html-content,
.highslide-html-content a,
.highslide-html-content h3 {
	font-family: Arial, sans-serif;
	font-size:13px;
	font-weight:normal;
}

.highslide-html-content,
.highslide-html-content h3 {
	color:#000000;
}
.highslide-html-content h3 {
	font-size:15px;
	font-weight:bold;
	margin:0;
	padding:0;
	border-bottom: 1px solid gray;		
}
.modal-branchselector {
	width:320px;
	height:120px;
}

.highslide-body {
	padding:5px;
	position:relative;
	height:120px;	
}
.highslide-body ul {
	list-style:none;
	margin:0;
	position:relative;
	height:120px;
}

.highslide-body li {
	padding-bottom:3px;
}

