/* NLU CSS File */

/* Copyright NLU Design : http://www.nludesign.com */
/* Feel free to look about for inspiration, but please don't steal. */
/* Thanks to Stu Nichols for finally figuring out the footer problem. */
/* See his sample page @ http://www.stunicholls.myby.co.uk/layouts/fixit.html */

/* HTML tags */
* {
	padding: 0;
	margin: 0;
}

body {
	border: 0;
	height: 100%; 
	max-height: 100%;
	background: #101E67 url(images/main_bg_wide.gif) repeat-y top left;
	font: 12px/1.4em Verdana, Tahoma, Arial, sans-serif;
	overflow: hidden;
}
.clearBoth {
	clear: both;
	width: auto;
}

/* Main Elements */
#left {
	position: fixed; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 143px;
	overflow: hidden;
}
#behindContents {
	position: absolute;
	top: 0;
	left: 144px;
	width: 582px;
	height: 100%;
	overflow: hidden;
	background: url(images/middle_bg.gif) no-repeat top left;
}
#contents {
	position: fixed; 
	top: 0;
	left: 144px;
	bottom: 0;
	width: 582px;
	right: 0;
	overflow: auto;
	z-index: 1000;
}
#contents h2 {
	font: 18px/24px Verdana, Tahoma, Arial, sans-serif;
	color: #FFFFFF;
	margin: 6px 0px 6px 12px;
}
#right {
	position: fixed; 
	top: 0;
	left: 727px;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
#right h3 {
	font: bold 14px/1.4em Verdana, Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	color: #FFF;
	margin-top: -3px;
	padding-bottom: 6px;
}

/* Navigation */
#nav {
	position: absolute;
	top: 101px;
	left: 0;
	width: 143px;
	height: 144px;
}
#nav ul  {
	position: absolute;
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 143px;
	height: 216px;
	list-style: none;
}
#nav li {
	position: relative;
	float: left;
	font-size: 0px;
	text-indent: -700em;
}
#homeNav, #designNav, #teamNav, #blogNav, #contactNav, #productsNav {
	position: relative;
	height: 35px;
	width: 143px;
	border-bottom: 1px solid #FFF;
}
#homeNav a, #designNav a, #teamNav a, #blogNav a, #contactNav a, #productsNav a, #homeNav a:hover, #designNav a:hover, #teamNav a:hover, #blogNav a:hover, #contactNav a:hover, #productsNav a:hover {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 35px;
	width: 143px;
	border-bottom: 1px solid #FFF;
}
#homeNav, #homeNav a {
	background: url(images/nav/home.gif) no-repeat 0 0;
}
#homeNav a:hover {
	background: url(images/nav/home_on.gif) no-repeat 0 0;
}
#designNav, #designNav a {
	background: url(images/nav/design.gif) no-repeat 0 0;
}
#designNav a:hover {
	background: url(images/nav/design_on.gif) no-repeat 0 0;
}
#teamNav, #teamNav a {
	background: url(images/nav/team.gif) no-repeat 0 0;
}
#teamNav a:hover {
	background: url(images/nav/team_on.gif) no-repeat 0 0;
}
#blogNav, #blogNav a {
	background: url(images/nav/nlu_blog.gif) no-repeat 0 0;
}
#blogNav a:hover {
	background: url(images/nav/nlu_blog_on.gif) no-repeat 0 0;
}
#contactNav, #contactNav a {
	background: url(images/nav/contact.gif) no-repeat 0 0;
}
#contactNav a:hover {
	background: url(images/nav/contact_on.gif) no-repeat 0 0;
}
#productsNav, #productsNav a {
	background: url(images/nav/products.gif) no-repeat 0 0;
}
#productsNav a:hover {
	background: url(images/nav/products_on.gif) no-repeat 0 0;
}

/* Left Elements */
#logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 143px;
	height: 100px;
	border-bottom: 1px solid #FFF;
	background: url(images/logo.gif) no-repeat;
}
#logo h1 {
	font-size: 0px;
	text-indent: -700em;
}
#leftFeature {
	position: absolute;
	top: 317px;
	left: 0;
	width: 143px;
	height: 237px;
	background: url(images/nav_bg.gif) no-repeat 0px 0px;
}

/* Center Elements */
.articleShell {
	position: relative;
	width: auto;
	margin: 12px 12px 0px 12px;
	border: 1px solid #FFF;
}
.articleShell[class] {
	background: url(images/article_bg.png);
}
.articleShell h3 {
	font: bold 14px/1.4em Verdana, Tahoma, Arial, sans-serif;
	text-transform: uppercase;
	color: #101E67;
	margin-top: -3px;
	padding-bottom: 6px;
}
.articleShell h4 {
	padding-top: 6px;
}
.articleShell p {
	padding-bottom: 9px;
}
.articleShell ul, .articleShell ol {
	margin-left: 18px;
	list-style: square;
	padding-bottom: 9px;
}
.articleInfo a {
	color: #999;
}
.articleInfo {
	position: relative;
	top: 0px;
	left: 0px;
	width: 224px;
	padding: 24px 0px 0px 12px;
	float: left;
}
.articleInfo img, .subText img {
	padding: 3px;
	float:left;
	margin:0px 6px 0px 0px;
	border: 1px solid #FFF;
	background: #525051;
}
.articleText {
	position: relative;
	top: 0px;
	left: 0px;
	float: right;
	width: 152px;
	height: 100%;
	padding: 24px 12px 12px 0px;
}
.subText {
	position: relative;
	top: 0px;
	left: 0px;
	height: 100%;
	margin: 12px 12px 3px 12px;
}
.seeMore p {
	position: relative;
	top: 6px;
	left: 0px;
	width: 224px;
	height: 24px;
	margin-bottom: 6px;
	font-size: 0px;
	background: url(images/see_more.gif) no-repeat top left;
}
.seeMore a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 224px;
	height: 24px;
	font-size: 0px;
	text-decoration: none;
	text-indent: -700em;
	background: url(images/see_more.gif) no-repeat top left;
}
.viewAll p {
	position: relative;
	top: 6px;
	left: 0px;
	width: 224px;
	height: 24px;
	margin-bottom: 12px;
	font-size: 0px;
	background: url(images/view_all.gif) no-repeat top left;
}
.viewAll a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 224px;
	height: 24px;
	font-size: 0px;
	text-decoration: none;
	text-indent: -700em;
	background: url(images/view_all.gif) no-repeat top left;
}

/* Right Elements */
.rightArticle {
	position: relative;
	top: 12px;
	left: 12px;
	width: 80%;
	color: #FFF;	
}
.rightArticle a {
	color: #FFF;
	text-decoration: none;
}
.rightArticle img {
	border: 0;
}
.rightArticle p {
	padding-bottom: 5px;
	line-height: 16px;
}

/* Login */
#login {
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%; 
	height: 47px;
	border-top: 1px solid #FFF;
	overflow: hidden; 
	background: #FF3A01 url(images/bottom_bg.gif) repeat-x;
	z-index: 500;
}
#login form {
	position: absolute;
	top: 12px;
	left: 10px;
	padding-left: 160px;
	background: url(images/login/reseller_login.gif) no-repeat 0px 5px;
}
#login input {
	color: #FF3A01;
	padding-left: 5px;
	font-weight: bold;
	text-transform: uppercase;
}
#signIn {
	position: relative;
	top: 5px;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 {
	visibility: hidden;
}