/* NLU Design 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;
}
* html body {
	padding-bottom: 47px;
}
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;
	bottom: 48px; 
	right: 0;
	width: 143px;
	overflow: hidden;
}
#behindContents {
	position: absolute;
	top: 0;
	left: 144px;
	width: 432px;
	height: 100%;
	overflow: hidden;
	background: url(images/middle_bg.gif) 0 0 no-repeat;
}
#contents {
	position: fixed; 
	top: 0;
	left: 144px;
	bottom: 48px;
	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;
	bottom: 48px; 
	right: 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;
}
#leftFeature p {
	color: #FFF;
	padding: 6px 3px 3px 6px;
}
#leftFeature ul, #leftFeature ol {
	color: #FFF;
	margin-left: 12px;
	list-style: square;
	padding-left: 12px;
	padding-bottom: 6px;
}
#leftFeature a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding-bottom: 3px;
}
#leftFeature a:hover {
	color: #FFF;
	text-decoration: underline;
	font-weight: bold;
}

/* 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 {
	font: bold 14px/1.4em Verdana, Tahoma, Arial, sans-serif;
	padding-top: 6px;
}
.articleShell p {
	padding-bottom: 9px;
}
.articleShell ul, .articleShell ol {
	margin-left: 18px;
	list-style: square;
	padding-bottom: 9px;
}
.articleShell a {
	color: #070E33;
}
.articleShell a:hover {
	color: #FFF;
	background: #070E33;
}
.articleShell img {
	border: 0px;
}
.articleShell img a:hover {
	background: none;
}
.articleInfo {
	position: relative;
	top: 0px;
	left: 0px;
	width: 224px;
	padding: 24px 0px 0px 12px;
	float: left;
}
.articleImage {
	padding: 3px;
	border: 1px solid #FFF;
	background: #525051;
}
#productsSideLinks {
	position:relative;
	float:right;
	top:0;
	right:0;
	width:216px;
	margin: -9px 0 0 12px;
	border-left:1px solid #FFF;
	padding: 12px 0 6px 3px;
}
.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;
}
.excelLinks, .productLinks {
	position: relative;
	width: 64px;
	height: 64px;
	border-right:1px solid #FFF;
	float:left;
	margin-right:12px;
	padding-bottom:12px;
}
.excelLinks h4, .productLinks h4 {
	font-size: 0px;
	display: block;
	text-indent: -700em;
}
.excelLinks a, .productLinks a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 64px;
	height: 64px;
	text-decoration: none;
	z-index: 300;
}
.excelLinks[class] a {
	background: url(/images/excel.png) no-repeat top left;
}
.productLinks[class] a {
	background: url(/images/product_image.png) 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;
}
#becomeReseller {
	position: absolute;
	top: 0px;
	left: -40px;
	width: 188px;
	height: 132px;
}
#becomeReseller h3 {
	font-size: 0px;
	display: block;
	text-indent: -700em;
}
#becomeReseller a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 188px;
	height: 132px;
	text-decoration: none;
	z-index: 300;
}
#becomeReseller[id] a {
	background: url(/images/become_a_reseller.png) no-repeat;
}

/* 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;
}
#signIn {
	position: relative;
	top: 0px;
}

/* ScreenGuardz Page styles */

#hip {
	position: absolute;
	top: -9px;
	left: -12px;
	width: 233px;
	height: 201px;
}
#hip[id] {
	background: url(images/sg_page/ipod.png) no-repeat;
}

#sglogo {
	position: absolute;
	top: 0;
	right: 0;
	width: 374px;
	height: 69px;
}
#sglogo[id] {
	background: url(images/sg_page/sg_logo.png) no-repeat;
}
#sgRightSide {
	position: relative;
	top: 0;
	right: 0;
	width: 231px;
	margin: 12px 0px 12px 12px;
	border: 1px solid #FFF;
	padding: 0px 12px;
	float: right;
}

/* RSS Thumbpop - Used on the Where to Buy page */
.rssThumbs {
	float: left;
	width: 33%;
}
.rssThumbLabel {
	font: bold 14px/1.4em Verdana, Tahoma, Arial, sans-serif;
	padding-left: 3px;
}
.rssThumbFloat {
	float: left;
	width: 160px;
	margin: 3px;
	border: 1px solid #101E67;
	padding: 3px;
	font-size: .85em;
	background: #FFF;
}
.rssThumbFloat a {
	text-decoration: none;
}

/* 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;
}