@charset "UTF-8";
/* CSS Document */

img, div {
	behavior: url(iepngfix.htc)
}
/* body */

html, body {
	border: 0;
	margin: 0;
	padding: 0;
}
body {
	font: 90% arial, helvetica, sans-serif;
	background:#efefef url('../images/content_bg_med.png') repeat-x 0 0;
	line-height: 130%;
	width: 100%;
	min-width: 850px;
	color: #222222;
}
/* end */

* {
	behavior: url(iepngfix.htc);
	margin: 0;
	padding: 0;
	font-size: 1em;
	text-decoration: none;
	border: none;
	list-style: none;
	outline: none;
}
a {
	text-decoration:none;
}
h1 {
}
h2 {
}
/* list */

ul.list {
	margin-top: 15px;
	padding-left: 20px;
	margin-bottom: 20px;
}
ul.list li {
	list-style: disc;
	margin-bottom: 5px;
}
/* end */

/*  --tooltip box--  */
#tooltip {
	display:none;
	background:transparent url('../images/black_arrow-sml-btm-l.png') no-repeat;
	font-size:11px;
	text-align:center;
	height:19px;
	width:159px;
	padding:20px 20px 10px 0px;
	color:#fff;
	z-index:500000;
}
/*  --FAQ Accordion--  */
.technology {
	cursor: hand;
	cursor: pointer;
	font: bold 12px Arial;
	margin: 10px 10px;
}
.closedlanguage { /*class added to contents of 2nd demo when they are closed*/
	color: #333;
}
.openlanguage { /*class added to contents of 2nd demo when they are open*/
	color: #0033cc;
	text-decoration:underline;
}

/* Login and Register buttons */
input.bt_login, input.bt_register, input.bt_lostpw {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 5px 0;
}
input.bt_login {
	width: 74px;
	background: transparent url('../images/bt_login.png') no-repeat 0 0;
}
input.bt_register {
	width: 94px;
	color: white;
	background: transparent url('../images/bt_register.png') no-repeat 0 0;
}
input.bt_lostpw {
	width: 120px;
	color: white;
	background: transparent url('../images/bt_120_b.png') no-repeat 0 0;
	margin: 10px 0 0 0;
}
.lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 18px 0 0 15px;
	font-size: 0.7em;
	text-decoration: underline;
}


/* Main Layout */
.col_1, .col_2, .col_3, .col_box_1, .col_box_2, .separator {
	float:left;
}
.col_b {
	float:right;
}
.separator {
	width:110px;
}
#container {
	width: 880px;
	min-height:246px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;/* center the page in Firefox */
	text-align: center;/* IE fix to center the page */
	font: 85%/1.2 arial, helvetica, sans-serif;
}
#container .col_a {
	width:220px;
	float:left;
	margin:65px 0 20px 0px;
	clear:left;
}
#container .col_b {
	position: relative;
	top:-30px;
	width:650px;
	margin:0 0 0 0px;
	float:right;
	z-index:990;
}
#container .col_1 {
	width:220px;
	float:left;
	margin:0px 0 0 0;
	clear:left;
}
#content {
	width: 740px;
	margin-right: auto;
	margin-left: auto;/* center the page in Firefox */
	text-align: left;
	padding: 20px;
}
#wrapper {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.menu {
	width:674px;
	height:42px;
	margin-left:auto;
	margin-right:auto;
}
#headerHolder {
	width:800px;
	vertical-align:top;
	margin: 0 auto;
	z-index:5;
	clear:both;
}
#headerHolder .col_1 {
	width:480px;
}
#headerHolder .col_2 {
	width:300px;
	float:right;
	margin:20px 0 0 0;
	vertical-align:bottom;
}
.header {
	padding-top:64px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	z-index:700;
}
.headerThin {
	width:741px;
	height:40px;
	margin-left:auto;
	margin-right:auto;
	float:inherit;
}
.flashwrapper {
	position: relative; /*leave as is*/
	overflow: hidden; /*leave as is*/
	width: 450px; /*width of featured content slider*/
	height: 170px;
	right:85px;
	padding: 5px;
	float:right;
}
/* --content-- */

/* WEA */

#icons {
	padding:0px 0px 0 15px;
}

/* Chamber */
.chamber {
	position: relative;
	left:-15px;
	width:607px;
	height:428px;
	padding:10px 0 0 10px;
	background:url('http://systenomics.com/tinroof/images/tinroof-girl2-box.png') no-repeat;
	overflow: hidden;
}
.chamber #text {
	font:normal 13px/14px Arial, Helvetica, sans-serif;
	text-align:justify;
	color:#171717;
	font-weight:normal;
	margin:0px 30px 0 280px;
}
.chamber #textTitle {
	font:normal 14px/15px Arial, Helvetica, sans-serif;
	text-align:justify;
	color:#171717;
	font-weight: bold;
	margin:110px 30px 0 280px;
}
.chamber h2{
	font:bold 24px/34px Verdana, Arial, Helvetica, sans-serif;
	color:#0045b6;
	margin-left:180px;
}

/* Merchant & WEA */
.merchant {
	position: relative;
	left:-15px;
	width:607px;
	height:370px;
	padding:10px 0 0 10px;
	background:url('http://systenomics.com/tinroof/images/tinroof-girl-box.png') no-repeat;
	overflow: hidden;
}
.merchant #text {
	font:normal 13px/14px Arial, Helvetica, sans-serif;
	text-align:justify;
	color:#171717;
	font-weight:bold;
	margin:130px 25px 0 180px;
}
.merchant h2{
	font:bold 24px/34px Verdana, Arial, Helvetica, sans-serif;
	color:#0045b6;
	margin-left:180px;
}

#contentText {
	width:590px;
	margin: 5px 20px 20px 15px;
	text-align: left;
	padding: 0px;
}
#contentTextR {
	float:right;
	margin: 5px 15px 0px 0px;
	text-align: left;
	padding: 0px;
}
#contentTextR  ul{
	list-style:disc;
	list-style-type:disc;
}
#flv {
	width:550px;
	height:350px;
	margin:10px auto;
}
#mavensidepanel {
        margin:0 auto 0 auto;
        line-height: 100%;
        overflow: visible;
        position: relative;
        z-index: 3;
}
#mavensidepanel .left {
        width:200px;
        text-align:left;
        padding:0 10px 0 10px;
        margin:0 auto 0 auto;
}
#mavensidepanel .panelTop {
        text-align:left;
        margin:0 0 10px 10px;
}
#mavensidepanel input.field {
        border: 1px #ccc solid;
        background: #efefef;
        margin: 4px 5px 5px 0;
        width: 160px;
        color: #333;
        height: 16px;
}
#mavensidepanel input:focus.field, #vertpanel input:focus.field, #lostpanel input:focus.field, #mavinpanel input:focus.field {
        background: #dae5ff;
}

/* buttons */
#mavensidepanel input.bt_register{
        font-size:12px;
        display: block;
        float: left;
        clear: left;
        height: 24px;
        text-align: center;
        cursor: pointer;
        border: none;
        font-weight: normal;
        margin: 5px 0 0 0;
}
#mavensidepanel input.bt_register {
	width: 94px;
	color: white;
	background: transparent url('http://systenomics.com/tinroof/images/bt_register.png') no-repeat 0 0;
}

.content input.bt_login, .content input.bt_register, .content input.bt_register_s, .content input.bt_ok, .content input.bt_120_s, .content input.bt_120_b {
	font-size:12px;
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: normal;
	margin: 0px 0;
}
.content input.bt_120_br, .content input.bt_loginr {
	font-size:12px;
	display: block;
	float: right;
	clear: right;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: normal;
	margin: 0px 0;
}
.content input.bt_login, .content input.bt_loginr {
	width: 74px;
	background: transparent url('../images/bt_login.png') no-repeat 0 0;
}
.content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url('../images/bt_register.png') no-repeat 0 0;
}
.content input.bt_register_s {
	width: 94px;
	background: transparent url('../images/bt_register_s.png') no-repeat 0 0;
}
.content input.bt_120_s {
	width: 120px;
	background: transparent url('../images/bt_120_s.png') no-repeat 0 0;
}
.content input.bt_120_b, .content input.bt_120_br {
	width: 120px;
	color: white;
	background: transparent url('../images/bt_120_b.png') no-repeat 0 0;
}
.content input.bt_ok {
	width: 50px;
	color: white;
	background: transparent url('../images/bt_ok.png') no-repeat 0 0;
}
/*  --screenshot shadow--  */

.screens {
	width:98%;
	min-height:380px;
	margin:0 auto 0 auto;
}
.screens .description {
	margin-left: 270px;
	margin-top: 20px;
}
.screens .descriptionL {
	margin-left:30px;
	margin-right: 230px;
	margin-top: 20px;
}
.screens dl dt {
	float: left;
	display: block;
	width: 50px;
	height: 50px;
}
.screens dl dd {
	margin-left: 40px;
	margin-bottom: 20px;
}
.screens .screenshot {
	margin-left:20px;
	display: block;
	width: 244px;
	height: 357px;
	margin-top:5px;
	background: url('../images/screenshot-shadow-sml.png') no-repeat;
	float: left;
	position: absolute;
	overflow: hidden;
}
.screens .screenshotR {
	display: block;
	left:355px;
	width: 244px;
	height: 357px;
	margin-top:5px;
	background: url('../images/screenshot-shadow-sml.png') no-repeat;
	float: left;
	position: absolute;
	overflow: hidden;
}
.screens .screenshot img {
	display: block;
	width: 221px;
	height: 319px;
	position: absolute;
	top: 3px;
	left: 12px;
}
.screens .screenshotR img {
	display: block;
	width: 221px;
	height: 319px;
	position: absolute;
	top: 3px;
	left: 12px;
}
.screens .description a {
	font-weight: bold;
}
/*  End Screens -- */

/* ridge start */
.ridgeBtm {
	background-image:url('../images/ridge-btm-thin.png');
	background-repeat:no-repeat;
	background-position:top;
	height:45px;
	width:593px;
	margin: -6px auto -15px auto;
	float:inherit;
	z-index:999;
}
/* footer start -- */
#footer {
	padding: 20px;
	margin-left:auto;
	margin-right:auto;
}
.footer {
	width:520px;
	margin-left:auto;
	margin-right:auto;
	padding:10px 0 0 0;
	text-decoration:none;
	text-align:center;
}
.footer a {
    font:normal 11px/20px Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#333333;
}
.footer a:hover {
    text-decoration:none;
    color:#808080;
}
.footer ul {
	width:350px;
	margin-left:auto;
	margin-right:auto;
}
.footer ul li {
	font:normal 11px/20px Arial, Helvetica, sans-serif;
	color:#aaa;
	float:left;
}
.footer ul li a {
	font:normal 11px/20px Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#333333;
	padding:0 8px;
}
.footer ul li a:hover {
	font:normal 11px/20px Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#808080;
	padding:0 8px;
}
.footer p {
	margin:0 auto;
	text-align:center;
	color:#808080;
	font:normal 10px/18px Arial, Helvetica, sans-serif;
	text-decoration:none;
}
/* footer end -- */

/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/

.dialog {
	position: relative;
	margin:0 auto;
	min-width:8em;
	max-width:850px; /* based on image dimensions - not quite consistent with drip styles yet */
	color:#336bff;
	z-index:5;
	margin-left:12px; /* default, width of left corner */
	margin-bottom:0em; /* spacing under dialog */
}
.dialog .content, .dialog .t, .dialog .b, .dialog .b div {
	background:transparent url('../images/dialog-W-800x1600.png') no-repeat top right;
}
.dialog .content {
	line-height:130%;
	text-align: left;
	color: #222222;
	min-height:250px;
	position:relative;
	zoom:1;
	_overflow-y:hidden;
	padding:10px 15px 4px 3px;
}
.dialog .content h1 {
	font:bold 21px arial, helvetica, sans-serif;
}
.dialog .content h2 {
	font:bold 18px arial, helvetica, sans-serif;
}
.dialog .content h3 {
	font:bold 15px arial, helvetica, sans-serif;
}
.dialog .t {
	/* top+left vertical slice */
 	position:absolute;
	left:0px;
	top:0px;
	width:12px; /* top slice width */
	margin-left:-12px;
	height:100%;
	_height:1600px; /* arbitrary long height, IE 6 */
	background-position:top left;
}
.dialog .b {
	/* bottom */
 position:relative;
	width:100%;
}
.dialog .b, .dialog .b div {
	height:12px; /* height of bottom cap/shade */
	font-size:1px;
}
.dialog .b {
	background-position:bottom right;
}
.dialog .b div {
	position:relative;
	width:12px; /* bottom corner width */
	margin-left:-12px;
	background-position:bottom left;
}
.dialog .hd, .dialog .bd, .dialog .ft {
	position:relative;
}
.dialog .wrapper {
	/* extra content protector - preventing vertical overflow (past background) */
    position:static;
	max-height:1000px;
	overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
.dialog h1, .dialog p {
	margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
	padding:0.5em 0px 0.5em 0px;
}
.dialog h1 {
	padding-bottom:0px;
}