/* CSS Document */

/* Size and center the page inside the body tag */
html, body {width:100%; background:#fff url(http://nsystems.com/dev/img/bg.jpg) repeat-x; text-align:center;}
div#page {margin:0 auto; width:900px; border:2px solid #fff; text-align:left; background:url(http://nsystems.com/dev/img/) repeat-y #fff;}

/* Font preferences */
* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#444;
	line-height:18px;
}
p, td, div,  {font-size:12px; line-height:16px;}

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

/* Header and bold tags */
h1 {line-height:21px; border-bottom:none; color:#0000a0; font-size:18px; font-weight:900; margin-top:0; text-transform:none;}
h2 {line-height:16px; padding-top:12px; padding-bottom:1px; color:#000; font-weight:900; font-size:15px; margin:0;}
h3 {line-height:15px; padding:4px 0; color:#000; font-weight:900; font-size:14px;}
h4 {line-height:14px; padding:4px 0; color:#000; font-weight:900; font-size:13px;}
strong {color:#000; font-weight:900;}
object, embed {display:block; text-align:center; margin:0 auto;}

/* Defualt unordered lists */

ul li {background:url(http://nsystems.com/dev/img/bullet.gif) no-repeat 0 6px; padding-left:15px; list-style:none; padding-bottom:8px;}
ul {margin:0px; padding:0 0 0 20px;}
li.nsi {background:url(http://nsystems.com/dev/img/nsi_logo_bullet.png) no-repeat 0 4px; padding-left:15px; list-style:none; padding-bottom:6px; font-weight:bold;}

/* Defualt definition lists */

dt {color:#0000a0;font-weight:900;margin:10px 0pt; border-bottom: #CCCCCC 1px solid;}
dd {text-indent:0pt; padding-bottom:30px;}

/* Default link and hover preferences */

a {color:#0000a0; text-decoration:underline;}
a:hover {color:#0066CC; text-decoration:underline;}

/* Main block elements */

#header {background:#fff; height:86px; position:relative;}
#header #headGraphic {background:url(http://nsystems.com/img/head.png) no-repeat; height:200px; position:absolute; z-index:5; width:900px; height:179; left:0; top:0;}
#left {vertical-align:top; border-right:#E6E6E6 2px solid;}
#right {vertical-align:top; padding-top:13px;}
#footer {height:10px; line-height:10px; font-size:10px; padding:2px 10px 10px 0 ; background:#003399 url(http://nsystems.com/dev/img/footer-bg.jpg) repeat-x; text-align:right; color:#FFFFFF;}
#footer a {color:#FFFFFF; text-decoration:none; font-size:10px;}
#footer a:hover {color:#FFFFFF; text-decoration:underline;}
#mainTable {display:block; width:900px;}
#seo {width:900px; margin:10px auto; text-align:center; font-size:10px; color:#479;}

#leftContent, #productMain #rightContent, #appMain #rightContent {padding:0 20px 20px 20px;}
#leftContent h1 {border-bottom:0px dashed #FF3300; color:#0000a0; font-size:18px; font-family:Futura,"Century Gothic",AppleGothic,"Trebuchet MS",sans-serif; font-weight:900; margin-top:0;}

#rightContent {padding-left:13px; padding-right:13px;}
#rightContentnew {padding-left:5px; padding-right:2px;}

/* Home Conditionals */
#home #left {width:581px; background:url(http://nsystems.com/dev/img/body-bg.jpg) repeat-x 0 340px;}
#home #single {width:870px; background:#fff; padding: 0px 5px 5px 5px; }
#home #center {width:900px; background:url(http://nsystems.com/dev/img/body-bg.jpg) repeat-x 0 340px;}
#home #right {width:321px; padding-top:55px;}
#home #rightContent {padding-right:0;}
#home h1 {line-height:21px; padding:4px 0; color:#0000a0; font-weight:900; font-size:19px; border-bottom:#0000a0 0px solid; text-transform:none;}

/*Home Page News */
#news {
	border: 0px solid #0000a0;
}

#news td {
	width:305px; height:36px; background: url(http://nsystems.com/dev/img/news_table_header.png) no-repeat;
	padding:8px;
}

#news h2 {
	line-height:10px; border-bottom:none; color:#0000a0; font-size:18px; font-weight:900; margin-bottom:20px; text-transform:none;
	text-align:center;
}

#news p.link {
	font-size: 14px; font-weight:bold;
	text-align:center;
}
/* Product Main Conditionals */
#productMain #left, #productSub #left, #appMain #left {width:244px; background:url(http://nsystems.com/dev/img/pm-left-bg.jpg) repeat-y;}
#productMain #leftContent, #productSub #leftContent, #appMain #leftContent {padding-top:15px;}
#productMain #right, #productSub #right, #appMain #right {width:654px; background:url(http://nsystems.com/dev/img/body-bg.jpg) repeat-x;}

/* NAV */

#header ul.nav {position:absolute; width: 900px; left:0px; top:69px; height:25px; overflow:visible; display:block; padding:0; margin:0; z-index:6;}
#header ul.nav li {display:inline; float:right; padding:0; margin:0; color:#000000; }
/* #header ul.nav li + li a {border-right:1px #000000 solid;} Replace with hover arrow */
#header ul.nav a {display:block; color:#fff; text-decoration:none; font-size:13px; height:15px; min-width:10px; line-height:15px; padding:2px 14px; font-weight:normal; text-align:center;}

div#header ul.nav a:hover {color:#FF3300; background:url(http://nsystems.com/dev/img/nav-arrow.gif) no-repeat 0 9px;}

#left ul.nav {display:block; margin:0; padding:0;}
#left ul.nav li {display:block; margin:0; padding:0;}
#left ul.nav a {display:block; color:#FFF; text-decoration:none; font-size:12px; height:12px; line-height:14px; padding:4px 10px; font-weight:900; color:#000;}
#left ul.nav a:hover {color:#666;}

	/* Sticky Nav */
	body.productPage a.productPage,
	body.companyPage a.companyPage,
	body.homePage a.homePage,
	body.appPage a.appPage,
	body.contactPage a.contactPage,
	body.supportPage a.supportPage,
	body.newsPage a.newsPage,
	#productMain a.productPage,
	#productSub a.productPage,
	#appMain a.appPage,
	#appSub a.appPage
	{background:url(http://nsystems.com/dev/img/nav-arrow.gif) no-repeat 0 9px;}


/* Paragraph classes (use sparingly - use tag globals whenever possible) */
p.caption {font-size:10px; color:#999999; line-height:normal;}
strong.red {color:#CC0000;}
em.red {color:#CC0000;}

/* Category Main - preferences here need to be customized for your needs */

/* category structure:
	<div class="category">
		<img>
		<h1></h1>
		<p> - for secondary text, not used in example below </p>
	</div>
*/

div.category {border-bottom:#999999 1px dashed; position:relative; padding:15px; height:250px; width:163px; float:left;}
div.category img {border:none; background:url(http://nsystems.com/dev/img/no-image.jpg) no-repeat; width:163px;}
div.category h1 {position:absolute; left:15px; top:185px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#666; font-weight:900; font-size:14px; overflow:hidden;}

/* adjust div.category height if you use this:
div.category h2 {position:absolute; left:15px; top:250px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#ccc; font-weight:500; font-size:12px; overflow:hidden;}



/* Products Main */
/* This is set up as 1-wide, set width and float left to make columns. */

/* product structure:
	<div class="product">
		<a><img>
		<h1>
		<h2> or <ul>
		<a.prodButton> needs "view" or "buy" button
	</div>
*/

div.product {border-bottom:#999 1px dashed; position:relative; padding:15px 0; height:200px;}
div.product img {border:none; background:url(http://nsystems.com/dev/img/no-image.jpg) no-repeat; width:100px;}
div.product h1 {position:absolute; left:175px; top:15px; width:420px; height:14px; line-height:14px; padding:4px 0; color:#000; font-weight:900; font-size:14px; border-bottom:#ccc 1px dotted; overflow:hidden;}
div.product h2, div.product ul {position:absolute; left:175px; top:45px; width:420px; height:120px; line-height:normal; padding:0; color:#ccc; font-weight:normal; font-size:11px; overflow:hidden;}
div.product ul li {padding-bottom:5px;}
div.product a.prodButton {position:absolute; left:488px; top:145px; background:url(http://nsystems.com/dev/img/view-button.jpg) no-repeat; display:block; height:30px; width:117px;}

/* Products Details */
/* To be elaborated... */

div.detail img {width:300px; border:none;}
div.detail {border-right:#999999 1px dashed; position:relative; width:300px; padding-right:14px;}
div.detail label {display:block; height:auto; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin-bottom:15px;}
div.detail p {line-height:normal; padding:0; color:#888; font-weight:normal; font-size:11px; overflow:hidden;}
div.detail form {display:block; padding:0; margin:0; position:relative; height:90px;}
div.detail input.submit 
{background:url(http://nsystems.com/dev/img/buy-now.jpg) no-repeat; display:block; height:30px; width:117px; position:absolute; top:45px; left:163px; border:none;}

div.detail select.ddl, div.detail select.ddm, div.detail select.ddr 
{width:80px;position:absolute; top:16px;}

div.detail label.ddl, div.detail label.ddm, div.detail label.ddr
{width:90px;position:absolute; top:0; display:block; font-size:12px; height:12px;}


/* Affiliated products */
/* use for related products on detail page */

#aff {float:right; width:265px; padding-right:15px;}
div.aff img {height:75px; width:75px; border:none;}
div.aff {border-bottom:#999999 1px dashed; position:relative; padding:15px 0; height:100px; margin:20px 0;}
div.aff label {display:block; height:auto; line-height:12px; padding:4px 0; color:#800000; font-weight:900; font-size:12px; border-bottom:#800000 1px dotted; margin-bottom:10px;}
#aff a {text-decoration:none; display:block; width:180px; height:14px; position:absolute; left:85px; top:107px; background:#FFFFFF url(http://nsystems.com/dev/img/view-more.jpg) no-repeat;}
#aff h1 {height:14px; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin:0 0 10px 0;}
div.aff p {position:absolute; left:85px; top:45px; width:180px; padding:0; margin:0; height:42px; line-height:14px; overflow:hidden;}

/* FORMS */
#form, #form li {display:block; list-style:none; margin:0; padding:0; position:relative; background:none;}
#form li label {display:block; width:155px; background:#E9E9E9; line-height:16px; padding:2px 5px; text-align:right;}
#form li input, #form li textarea , #form li select {position:relative; left:170px; width:370px; top:-21px;}

/* Top H1 element */

h1#title  {display:block; text-align:center; width:850px; margin:5px auto; border:none; font-size:10px; color:#666666; padding:0; text-transform:none;}

/* Newsfeed */

#newsfeed {padding:0 14px 0 5px; margin:0;}
#newsfeed li {padding:10px 5px 10px 0; margin:0; clear:both; border-bottom:#e6e6e6 0px dashed;}
#newsfeed li h1 {padding:0 0 3px 0; margin:0; font-size:12px; border:none; color:#000;}
#newsfeed li p {padding:0 0 3px 0; margin:0; font-size:12px; border:none; color:#0000a0}
#newsfeed li img {float:right;}

/* Product page left nav */
.productNav {padding:0 0 15px 5px; margin:0;}
.productNav li {padding:6px 0 6px 20px; margin:0; clear:both; border-bottom:#e6e6e6 0px dashed; background: url(http://nsystems.com/dev/img/left-bull.jpg) no-repeat 0 10px;}
.productNav li a {color:#0000a0; text-decoration:none}
.productNav li a:hover {text-decoration: underline}

#productList {position:relative; z-index:100; margin:0; padding-left:0px; height:346px; padding-top:52px}
#productList.productNav li {padding-bottom:0px;}
/*#productList.productNav li a {padding:0; margin:0; display:block; height:30px; text-decoration:none;}
*/
#productListnew {position:relative; z-index:100; margin:0; padding-left:10px; height:346px; padding-top:52px}
#productListnew.productNav li {padding:0; margin:0; }
#productListnew.productNav li a {padding:0; margin:0; text-decoration:none;}

.productNavNew {padding:0 0 0px 0px; margin:0;}
.productNavNew li {padding:0px 0 0px 0px; margin:0; clear:both;}
.productNavNew li a {color:#0000a0; text-decoration:none;}
.productNavNew li a:hover {text-decoration: none;}

/* Product page sub nav */
#subNav {display:block; padding:0 0 0 554px; margin:0; height:35px; position:relative; background:url(http://nsystems.com/dev/img/pm-sub-nav.jpg) no-repeat;}

		/* Product Classes*/
		#page.cm #subNav {background-image:url(http://nsystems.com/dev/img/sub/cm-sub-nav.jpg);}
		#page.mc #subNav {background-image:url(http://nsystems.com/dev/img/sub/mc-sub-nav.jpg);}
		#page.np #subNav {background-image:url(http://nsystems.com/dev/img/sub/np-sub-nav.jpg);}
		#page.npr #subNav {background-image:url(http://nsystems.com/dev/img/sub/np-r-sub-nav.jpg);}
		#page.npt #subNav {background-image:url(http://nsystems.com/dev/img/sub/np-t-sub-nav.jpg);}
		#page.ot #subNav {background-image:url(http://nsystems.com/dev/img/sub/ot-sub-nav.jpg);}
		#page.qd #subNav {background-image:url(http://nsystems.com/dev/img/sub/qd-sub-nav.jpg);}
		#page.qk #subNav {background-image:url(http://nsystems.com/dev/img/sub/qk-sub-nav.jpg);}
		#page.sp #subNav {background-image:url(http://nsystems.com/dev/img/sub/sp-sub-nav.jpg);}
		#page.ssa #subNav {background-image:url(http://nsystems.com/dev/img/sub/ssa-sub-nav.jpg);}
		#page.ss #subNav {background-image:url(http://nsystems.com/dev/img/sub/ss-sub-nav.jpg);}
		#page.sts #subNav {background-image:url(http://nsystems.com/dev/img/sub/sts-sub-nav.jpg);}
		#page.am #subNav {background-image:url(http://nsystems.com/dev/img/sub/am-sub-nav.jpg);}
		#page.ac #subNav {background-image:url(http://nsystems.com/dev/img/sub/ac-sub-nav.jpg);}
		#page.ar #subNav {background-image:url(http://nsystems.com/dev/img/sub/ar-sub-nav.jpg);}
		#page.mu #subNav {background-image:url(http://nsystems.com/dev/img/sub/mu-sub-nav.jpg);}


#subNav li {display:block; width:111px; float:left; padding:0; margin:0;}
#subNav li a { display:block; height:35px; text-decoration:none;}
#subNav li a:hover,
body.features a.features,
body.downloads a.downloads,
body.overview a.overview
 {background:url(http://nsystems.com/dev/img/pm-sub-nav-hover.jpg) no-repeat 11px 12px;}

#breadcrumb {padding:90px 0 15px 15px; background:#fff;}
#breadcrumb a {color:#0000a0; font-weight:900;}

#productMain #breadcrumb, #appMain #breadcrumb {padding:15px; display:none;}
img.productMainTop {display:none}
#productMain img.productMainTop, #appMain img.productMainTop {display:block;}
ul.disc {padding-bottom:12px;}
ul.disc li {padding-left:20px; background: url(http://nsystems.com/dev/img/bul.png) no-repeat}

ul.disc8 {padding-bottom:5px;}
ul.disc8 li {padding-left:20px; background: url(http://nsystems.com/dev/img/bul.png) no-repeat}

ul.disc_body {padding-bottom:2px; padding-left:265px;}
ul.disc_body li {padding-left:20px; padding-bottom:2px; background: url(http://nsystems.com/dev/img/bul.png) no-repeat}

ul.productNavDownloads {padding:0 0 15px 5px; margin:0;}
ul.productNavDownloads li {padding:6px 5px 6px 20px; margin:0; clear:both; border-bottom:#e6e6e6 0px dashed; background: url(http://nsystems.com/dev/img/pdf-icon.jpg) no-repeat 0 10px;}
ul.productNavDownloads li a {color:#0000a0; text-decoration:none}
ul.productNavDownloads li a:hover {text-decoration: underline}

/* Camera Icon */
a.cameraIcon { background:url(http://nsystems.com/dev/img/camera.jpg) no-repeat 3px 3px #fff; height:15px; padding:4px 4px 5px 29px; line-height:15px; border:4px #D8E4FC solid; color:#000; display:block; text-decoration:none;}
a.cameraIcon:hover {border:4px #ccc solid;}

a.pdf { background:url(http://nsystems.com/dev/img/pdf-icon.jpg) no-repeat 2px 2px #fff; height:12px; padding:5px 5px 5px 29px; line-height:12px; border:3px #D8E4FC solid; color:#000; display:block; text-decoration:none; font-size:12px; margin-bottom:20px;}
a.pdf:hover {border-color:#ccc;}

/* Image Positioning */
img.right { float:right; margin: 5px 0px 0px 10px; }
img. left { float:left; margin: 5px 10px 0px 0px; }

/* News Boxes with Fade */
#newsbox-left {
    background: 
 	-webkit-gradient( linear, left bottom, left top, color-stop(0.05, rgb(255,255,255)), color-stop(0.36, rgb(245,245,245)) );
    background:-moz-linear-gradient( center bottom, rgb(245,245,245) 5%, rgb(240,240,240) 53% );
    background: -moz-linear-gradient( center bottom, rgb(255,255,255) 5%, rgb(245,245,245) 53% );
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    display: block;
	width: 380px;
	height: 125px;
    background-color:#f2f2f2;
	position:relative;
	float: left;
	margin: 10px 10px 10px 25px;
	padding: 2px 2px 2px 5px;
	vertical-align:top;
}
#newsbox-right {
    background: 
 	-webkit-gradient( linear, left bottom, left top, color-stop(0.05, rgb(255,255,255)), color-stop(0.36, rgb(245,245,245)) );
    background:-moz-linear-gradient( center bottom, rgb(245,245,245) 5%, rgb(240,240,240) 53% );
    background: -moz-linear-gradient( center bottom, rgb(255,255,255) 5%, rgb(245,245,245) 53% );
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    display: block;
	width: 380px;
	height: 125px;
    background-color:#f2f2f2;
	position:relative;
	float: right;
	margin: 10px 25px 10px 10px;
	padding: 2px 2px 2px 5px;
	vertical-align:top;
}
#newsbox-left h3 {
	margin: 2px 0px 0px 2px;
	line-height: normal;
	font-size:14px; 
}

#newsbox-right h3 {
	margin: 2px 0px 0px 2px;
	line-height: normal;
	font-size:14px; 
}

#questionnaire {
    background:transparent;
    display: block;
	width: 700px;
	position:relative;
	float: left;
	margin: 10px 0px 0px 80px;
	padding: 2px 2px 2px 5px;
	vertical-align:top;
}

#questionnaire p {
	font-size:14px;
}

#question {
	font-size:12px;
	font-weight:bold;
	padding-bottom: 2px;
}

#questions1 {
	background:#E7E7E7;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 700px;
	position:relative;
	float: left;
	margin: 2px 0px 0px 0px;
	padding: 2px 2px 2px 5px;
	vertical-align:top;
}

#questions2 {
	background: #CCC;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 700px;
	position:relative;
	float: left;
	margin: 2px 0px 0px 00px;
	padding: 2px 2px 2px 5px;
	vertical-align:top;
}

#red {
	color:#F00;
	font-weight:bold;
}

#red_center {
	color:#F00;
	font-weight:bold;
	text-align:center;
}

#textbox {
    border: 1px solid #0000a0;
    background: #fff;
}
#textbox:hover {
    border: 1px solid #0000a0;
	background:#F8F8F8;
}

#submit {
	background:#E7E7E7;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	border: 1px solid #000;
	float:left;
	margin: 5px 0px 0px 0px;
}

#submit:hover {
	background:#0000a0;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	color:#FFF;
	border: 1px solid #000;
}

#submit_login {
	background:#E7E7E7;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	float:right;
	border: 1px solid #000;
	margin: 5 60 5 0;
}

#submit_login:hover {
	background:#0000a0;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	color:#FFF;
	border: 1px solid #000;
}


#reset {
	background:#E7E7E7;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	border: 1px solid #000;
	float:left;
	margin: 5px 0px 0px 10px;
}

#reset:hover {
	background:#0000a0;
    -moz-border-top-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: block;
	width: 87px;
	color:#FFF;
	border: 1px solid #000;
}
#login_form {
	display:block;
	width:200px;
	text-align:center;
}

/*Portal Navigation*/
.portalnav {
   width: 250px; /*width of menu*/
   font-size:12px;
   font-family:Verdana;
}

.portalnav .title {
   font-weight:bold;
   color: white;
   background: #0000a0 url(img/bullet.gif) no-repeat 7px 7px; 
   margin-bottom: 0; 
   text-transform: uppercase;
   padding: 7px 0 7px 27px; 
}

.portalnav .ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.portalnav .ul .li {
   margin-top: 2px; /*spacing between menu items*/
}

.portalnav .li a {
   padding: 5px;
   width:240px;  /*because we have padding:5 - 250px-10px*/
   display:block;
   background-color: #E9E9E9;
   text-decoration: none;
}

.portalnav .li a:hover {
   background-color: #193560;
   text-decoration: none;
}

.portalnav .li a span {
   color:#003399; 
}

.portalnav .li a:hover span { /*hover menu item*/
   color: #ffffff;
}

/*Portal Administration Navigation*/
.portaladminnav {
   width: 240px; /*width of menu*/
   font-size:12px;
   font-family:Verdana;
}

.portaladminnav .title {
   font-weight:bold;
   color: white;
   background: #2764c2 url(img/bullet.gif) no-repeat 7px 7px; 
   margin-bottom: 0; 
   text-transform: uppercase;
   padding: 7px 0 7px 27px; 
}

.portaladminnav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.portaladminnav ul li {
   margin-top: 2px; /*spacing between menu items*/
}

.portaladminnav li a {
   padding: 5px;
   width:230px;  /*because we have padding:5 - 190px-10px*/
   display:block;
   background-color: #E9E9E9;
   text-decoration: none;
}

.portaladminnav li a:hover {
   background-color: #193560;
   text-decoration: none;
}

.portaladminnav li a span {
   color:#003399; 
}

.portaladminnav li a:hover span { /*hover menu item*/
   color: #ffffff;
}