/* 
Base Vexray StyleSheet
*/

/* Super Global Style */
body, form, p, div, fieldset, legend,
input, select, textarea, ul, li, button, h1, h2, h3, h4 {
    margin: 0; padding: 0;
}

/* Global Styles */
body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    background: #B7B7B7;
}
h3 {font-size: 13px; margin: 10px 0;}
p {margin-bottom: 1em;}
img {border: none;}
form {display: inline; width: 1px; border: none; height: auto;}
i {font-style: normal;}
a {color: #163977; text-decoration: none; cursor: pointer;}
a.link, span.link {
	text-decoration: none;
	color: #163977;
}
a.button {color: inherit; text-decoration: none;}
a:hover {
	text-decoration: none;
}
a.button:hover {
	color: #333333;
	text-decoration: none;
}
th {text-align: left;}
.align_center{clear:both; float:none; position: static; margin: inherit auto; text-align: center;}
.error {color: red; text-transform: capitalize;}
.blue {color: #0b77b7; font-weight: bold;}
.upper {text-transform: uppercase;}
.capital {text-transform: capitalize;}
div.blue_box {background-color: #e6EEEE; padding: 10px; position: relative;}
div.blue_box label {position: relative;}
div.formError, span.formError {margin: 0 1em 0 12.3em; color: red; text-align: left;}
fieldset {
    position: relative;
    border:1px solid #ddd;
    padding:0.5em;
    margin-bottom: 1em;
    width: 31em;
}
div.fieldset {
    border:1px solid #ddd;
    padding:0.5em;
    margin-bottom: 1em;
    position: relative;
    float: left;
    display: inline;
    padding: 5px;
    margin-right: 15px;
}
legend {color: #0b77b7; font-size: 1.2em;}
div.fieldset span.legend {
    background-color: #FFF;
    position: absolute;
    top: -10px;
    left: 3px;
    padding: 0 5px;
    white-space: nowrap;
}
fieldset div {margin:1em 0; clear:both;}
label {
    float:left;
    width:11em;
    text-align:right;
    margin-right:1em;
    -moz-user-select: none;
}
label.req:before, p.req:before, span.req:before {
    font-size: 10px;
    color: red;
    content: "*";
}
input, select, textarea {
    padding:0.15em;
    border:1px solid #ccc;
    width: 15em;
    background:#fafafa;
    font:bold 1em arial, sans-serif;
    -moz-border-radius: 5px;
    -khtml-border-radius: 0.5em;
}
select {width: 14.5em;}
input.radchk { /* use for radio and checkbox input elements */
    width:auto;
    vertical-align:center;
    border:none;
    background: transparent; /* ie fix */
}
input:hover, input:focus, select:hover, select:focus, textarea:hover, textarea:focus {
    border-color: #aaa;
    background: #f6f6f6;
}
input[disabled=true]:hover {
    background: #fafafa;
    border-color: #ccc;
}
input[disabled=true]:hover {
    background: #fafafa;
    border-color: #ccc;
}

/* Roundede Corners */
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}




/* Main  */
div.wrap {
	position: relative;
	margin: 25px auto 0 auto;
	width: 800px;
	height: auto;
	border: 2px solid #AAA;
	padding-bottom: 25px;
	overflow-x: hidden;
	background-color: #FFF;
	background-image: url(images/bottom_grad.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	/*background-image: url(images/right_body_shadow.gif);
	background-repeat: repeat-y;
	background-position: left top;*/
}

/* header */
#header {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 2px;
	margin-left: 10px;
	background-attachment: scroll;
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 60px;
}
#header img{
    top: 0px;
    left: 0px;
}
#header div.links {
	float: right;
	text-align: center;
	margin-top: 30px;
	text-transform: none;
	font-size: 13px;
	width:585px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	color: #0c2753;
	font-family: "Lucida Grande, Arial, Helvetica";
	font-style: normal;
	font-weight: 500;
	word-spacing: 3px;
}
#header a {
	color: #0c2753;
	margin: 0px 7px;
}
div.graphic {
	background-image: url(images/bannergraphic.gif);
	background-repeat: no-repeat;
	background-position: left center;
	height: 90px;
	padding: 0px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

/* menu */
#menu {
    height: 15px;
    width: 792px;
    background: url(../img/layout/menu_gradient.png) 0px 2px repeat-x;
    border-top: 2px solid #AAA;
    border-bottom: 2px solid #AAA;
    padding: 4px;
    color: #FFF;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
}
#menu ul {white-space: nowrap; margin: 0 auto;}
#menu li {display: inline; list-style: none; padding: 0 45px;}
#menu a {color: #FFF; font: bold 11px verdana;}

/* footer */
div.copyright {
	width: 500px;
	margin: 0 auto;
	text-align: center;
	font-size: 9px;
	line-height: 15px;
	color: #000000;
}
div.copyright ul {white-space: nowrap; margin: 0 auto;}
div.copyright li {display: inline; list-style: none; padding: 0 10px;}

/* content */
div#content {
	margin: 5px 10px;
	min-height: 300px;
}
span.spacer {margin: 0 50px;}
div.box {
    display: inline;
    float: left;
    border: 1px solid #0b77b7;
    margin: 5px;
    padding: 10px;
    padding-bottom: 0px;
    background: #FFF;
    text-align: justify;
}
h1.dot {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0px;
}
div.box ul {margin: 0 50px;}
div.box p {margin: 10px 5px; line-height: 14px; color: #444;}

div.news {width: 265px;height: 132px;}
div.news p {font-weight: bold; font-size: 0.9em; margin: 10px 5px; color: #666;}
div.news a {font-style: italic; font-weight: normal; font-size: 1.1em;}
div.login {
    width: 265px;
    height: 124px;
    background: #E6E6E6;
    overflow: hidden;
    float: left;
    position: relative;
}
div.login p {margin: 5px; font-size: 10px; letter-spacing: -0.5px;}
div.login p.form {white-space: nowrap;}
div.login input.username {width: 140px;}
div.login input.password {width: 140px;}
div.login input.submit {width: 25px;}
div.login div.error {
    position: absolute;
    right: 0px;
    bottom: 40px;
}
div.logos {width: 452px; height: auto; /*260px;*/ padding: 2px; float:right;}
div.logos button {
    height: 65px;
    width: 150px;
    overflow: hidden;
    background: #C0C0C0;
    border: 5px solid #FFF;
    float: left;
    display: inline;
    color: #000;
}
div.logos div.joinVexray {float:left;margin: 10px;letter-spacing: -0.09em;line-height: 1.3em;}
div.fullbox {
    border: 1px solid #0b77b7;
    margin: 5px;
    padding: 10px;
    width: auto;
    float: none;
    clear: both;
    position: relative;
    overflow: hidden;
}
#hiw {margin: 10px 0;} /*how it works namespace*/
#hiw p.first-child {
    margin: 10px 0;
    line-height: 1.5em;
}
#hiw div.fullbox {margin-bottom: 20px;}
#hiw ul {padding-left: 15px; list-style-type: circ;}
#hiw li {margin-bottom: 20px;}
#hiw div.inner {padding: 15px;}

#newsinfo img {margin: 5px 0;}
#newsinfo div.fullNews {
    float: right;
    width: 360px;
    background: #e6EEEE; 
    padding: 5px; 
    margin-left: 10px; 
    height: 565px;
    overflow-y: auto;
}
#newsinfo div.fullNews h1 {font-size: 13px; font-weight: bold; margin-bottom: 10px;}
#newsinfo div.fullbox {margin-bottom: 20px;}

div.powered {
    float: right;
    padding: 0px 0px 10px 0px;
}
div.powered div {text-align: center;}

#agent_login, #client_login {height: 130px;}
#agent_login div.image {
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../img/login1.jpg) bottom left no-repeat;
    width: 300px;
    height: 150px;
    border-left: 1px solid #0b77b7;
}
#agent_login div.text_wrap, #client_login div.text_wrap, #agent_big_login div.text_wrap {
    width: 400px;
}

#client_login div.image {
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../img/login2.jpg) 0 0 no-repeat;
    width: 300px;
    height: 150px;
    border-left: 1px solid #0b77b7;
}

#agent_big_login {height: 260px;}
#agent_big_login div.image {
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../img/login3.jpg) 0 0 no-repeat;
    width: 300px;
    height: 300px;
    border-left: 1px solid #0b77b7;
}

#agent h1, #client h1 {position: relative; color: #000; font-size: 1.2em; font-weight: bold; padding: 5px 0;margin:0px;}
#agent h3, #client h3 {
    position: relative;
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
    width: 200px;
    padding: 5px;
    margin: 0px;
}
#agent .site_state , #client .site_state {display: inline; float: right; margin-left: 5px;}
#agent .legend, #client .legend {color: #0b77b7; font-size: 1.2em;}

/* 
Vexray Button Styles
*/
button.blank {background: none; width: auto; height: auto; margin: 0; padding: 0;}
button.disabled:hover {background: inherit; cursor: default;}
button {
    width:69px;
    height:23px;
    overflow:hidden;
    padding-bottom: 3px;
    border: none;
    background: url(../img/buttons/button.png) no-repeat 0 0;
    display: inline;
    cursor: pointer;
    font-family: Arial;
    font-weight: bold;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
}
button:hover, button:active, button:focus {
    background-position: 0 -25px;
    text-decoration: none;
}

button.medium {
    width:98px;
    height:43px;
    background: url(../img/buttons/button_medium.png) no-repeat 0 0;
    font-size: 1.3em;
}
button.medium:hover, button.medium:active, button.medium:focus {background-position: 0 -43px;}
button.red {background-position: -98px 0px;}
button.red:hover, button.red:active, button.red:focus {background: url(../img/buttons/button_medium.png) no-repeat -98px -43px;}
button.orange {background-position: -196px 0px;}
button.orange:hover, button.orange:active, button.orange:focus {background: url(../img/buttons/button_medium.png) no-repeat -196px -43px;}
button.disabled {cursor: default;background-position: -294px 0px;color: #DDD;}
button.disabled:hover, button.disabled:active, button.disabled:focus {background: url(../img/buttons/button_medium.png) no-repeat -294px 0;}

button.big {
    width:162px;
    height:84px;
    background:url(../img/buttons/button_big.png) no-repeat 0 0;
    font-size: 2.0em;
    margin: 0.5em;
}
button.big div {
    font-size: 0.7em;
}
button.big:hover, button.big:active, button.big:focus {
    background-position:0 -86px;
}
button.long {
    width:101px;
    height:23px;
    background:url(../img/buttons/button_long.png) no-repeat 0 0;
}
button.long:hover, button.long:active, button.long:focus {
    background-position:0 -25px;
}

/*Style for vexPopup.js*/
div.vexPopup {
    position: absolute;
    padding: 5px;
    padding-bottom: 10px;
    border: 2px solid #0b77b7;
    background: #FFF;
    z-index: 10000;
    display: none;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
}
div.vexPopup p {padding: 0;margin: 0;}
div.vexPopup_hdr {
    position: relative;
    height: 15px;
    font-weight: bold;
}
div.vexPopup_hdr div {
    position: absolute;
    color: #0b77b7;
    top: 0px;
    right: 5px;
    cursor: pointer;
}
div.vexPopup_hdr div:hover {
    text-decoration: underline;
}
div.vexPopup_content {
    height: auto;
    overflow: auto;
}
div.vexPopup_input {
    margin-top: 0px;
    text-align: right;
}