/* -----------------------------------------
NAVIGATOR MULTIMEDIA INC CSS PAGE STRUCTURE
Designed by: Chris Satterthwaite
Modified By: Chris Satterthwaite
Date Modified: Nov.23.2009
--------------------------------------------
TABLE OF CONTENTS
--------------------------------------------
Reset: 
Typography: 
Global:
Body:
Wrapper Section:
Header Section:
Navigation Section:
Culumns Section:
Featured Photo Section:
Header Photo Section:
Color Bar Section:
Content Section:
Footer Section:
Hacks/Fixes:
--------------------------------------------
STYLE RULES
--------------------------------------------
Box
			height
			width
			background
			border
			margin
			padding
			display
			
Position
			position
			top
			left
			float
			z-index
			
Font
			color
			font family
			font size
			text-decoration
			line hieght
----------------------------------------- */
/* Reset                                  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: 		transparent;
	border: 			0;
	margin: 			0;
	padding:          	0;
	/*font-size: 			100%;*/
	/*font-size:			16px;*/
	outline: 			0;
	vertical-align: 	baseline;
}

body { 
	line-height: 		1;
}

ol, ul { 
	list-style: 		none;
}

blockquote, q { 
	quotes: 			none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: 			'';
	content: 			none;
}

/* remember to define focus styles! */
:focus {
	outline: 			0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: 	none;
}

del { 
	text-decoration: 	line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: 	collapse;
	border-spacing: 	0;
}
/*----------------- Typography --------------------- */
#content h1 {
	margin-bottom:		14px;
	color:				#000;
	font-size:			30px;
	font-weight:		normal;
	line-height:		normal;
}

#content h2 {
	margin-bottom:		14px;
	font-size:			16px;
	font-weight:		normal;
}

#content {
	color:				#474d41;
}

#content p {
	margin-bottom:		14px;
	
	color:				#474d41;
}
	
#content ul{
	margin:				0px 0px 14px 30px;
	
	list-style:			disc;
	color:				#474d41;
}
	
#content ol{
	margin:				0px 0px 14px 30px;
	
	list-style:			decimal;
}

#content a, a:visited {
	color:				#3e9d3c;
	text-decoration:	underline;
}

#content a:hover {
	color:				#474d41;
	text-decoration:	underline;
}
/*----------------- Global ------------------------- */
.no-margin {
	margin:				0px 0px 0px 0px !important;/* !Important makes this style over-ride the margin on the Navigation styles*/
}
.no-margin-left {
	margin-left:      	0px!important;
}
.margin-right10px{
	margin-right:		10px!important;
}
.padding-top {
	padding-top:      	5px!important;
}
/*----------------- Body --------------------------- */
body {
	background:			none;
	margin: 			0px;	
	padding: 	    	0px;
	
	font-family:		Arial,Sans-Serif;
	font-size:			12px;
	line-height:		16px;
}
/*----------------- Wrapper Section ---------------- */
#wrapper {
	width:				940px;/* 976px - 18px padding-right - 18px padding-left = 940px*/
	background:			url(../images/interface/bg-content.png) bottom no-repeat;
	margin: 			20px auto 0px auto;	
	padding: 	    	10px 18px 0px 18px;
	
	position: 			relative;
	z-index:			10;
}


#content-wrapper {
	width:				880px;/* 940px - 30px padding-right - 30px padding-left = 880px*/
	background:			#FFF;
	margin: 			0px;	
	padding: 	    	0px 30px 0px 30px;
	
	z-index:			10;
}

#callout-wrapper {	
	width:				660px;
	padding-bottom:		10px;
}
/*----------------- Font Size Section -------------- */	
#font-size {
	position:			absolute;
	top:				17px;
	right:				10px;
	background:			none;
	z-index:			99;
}

#font-size li{
	float:				left;
}

#font-size a{
	padding:            3px 3px 3px 3px;
	display:			block;
	
	color:				#333;
	text-decoration:	none;
}

#font-size a:hover{
	background:			#CCC;
}

#font-size .small{	
	font-size:			12px;
}

#font-size .large{	
	font-size:			16px;
}
/*----------------- Header Section ----------------- */
#header {
	height:				85px;/* 98px - 13px padding-top = 85px*/
	width:				880px;/* 940px - 30px padding-right - 30px padding-left = 880px*/
	background:			#FFF;
	margin: 			0px;	
	padding: 	    	13px 30px 0px 30px;
	
	position:			relative;
	z-index:			20;
}

#logo {
	height:				70px;
	width:				140px;
	
	float:				left;
}

#time-stamp{
	height:				20px;
	width:				200px;
	
	position:			absolute;
	top:				20px;
	left:				264px;
	
	font-weight:		bold;
}

#slogan {
	height:				73px;
	width:				59px;
	
	float:				right;
}
/*----------------- Navigation Section ------------- */
/*Main Navigation*/
.main-navigation {
	height:				30px;
	width:				520px;
	display:			block;
	
	position:			absolute;
	bottom:				0px;
	left:				250px;
	z-index:			30;
	
	color:				#474d41;
}

.main-navigation li {
	position:			relative;
	float:				left;
}

.main-navigation li a {
	height:				25px;
	padding:			5px 14px 0px 14px;
	display:			block;
	
	color:				#474d41;
	font-size:			11px;
	font-weight:		bold;
	text-decoration:	none;	
}

.main-navigation li a:hover {
	color:				#FFF;
	background:			#02a044;
}

.main-navigation .our-brands {
	width:				83px;
}

.main-navigation .community {
	width:				92px;
}
.main-navigation .career-centre {
	width:				107px;
}

.main-navigation .investor-relations {
	width:				128px;
}

.main-navigation .contact-us {
	width:				87px;
}

/*Main Navigation Dropdown*/
.main-navigation li ul {
	width:				150px;
	background: 		url(../images/interface/bg-nav.png);
	position: 			absolute;
	left:				0px;
	top: 				30px;
	display: 			none;
	}

.main-navigation li ul li{
	height:				24px;
	width:				150px;
	margin: 			0px 0px 0px;
	}

.main-navigation li:hover ul, li.over ul {
	display: 			block;
}
	
.main-navigation li ul li a{
	height:				14px;
	padding:          	5px 5px 5px 10px;
	background:			none;
	display:			block;
	
	color:				#FFF;
	font-size:			11px;
	font-weight:		bold;
	text-decoration:	none;	
}

.main-navigation li ul li a:hover, li.on, li.on > a{
	background:			#02a044;
	color:				#FFF !important;
}

/*Second Navigation*/
.second-navigation {
	list-style:			none;
	
}

.second-navigation li {
	width:				210px;
	margin-bottom:		4px;
	background:			url(../images/interface/nav-off.gif) no-repeat;
}

.second-navigation li a{
	height:				9px;
	width:				210px;
	padding:          	8px 0px 17px 0px;
	display:			block;
	background:			url(../images/interface/nav-off.gif) no-repeat;
	
	color:				#3e9d3c;
	font-size:			13px;
	font-weight:		bold;
	text-decoration:	none;
	
}

.second-navigation li.on a, 
.second-navigation li a:hover{
	background:			url(../images/interface/nav-on.gif) no-repeat;
	
	color:				#b2b6ba !important;
}
.second-navigation li.bold a{
	color: #999 !important;
}


/*Second Navigation Dropdown*/
.second-navigation li ul {
	background:			url(../images/interface/bg-second-sub-nav.gif) repeat-y;
	
	list-style:			none;
}

.second-navigation li ul li{
	width:				210px;
	margin-bottom:		4px;
	background:			none;
}

.second-navigation li ul li a{
	height:				12px;
	width:				195px;
	padding:          	0px 0px 6px 0px;
	display:			block;
	background:			none;
	
	color:				#3e9d3c;
	font-size:			11px;
	text-decoration:	none;
	margin-left:		15px;
	
}

/*Footer Navigation*/
.footer-navigation {
	height:				30px;
	width:				374px;
	margin:				0px auto 0px auto;
	display:			block;
	
	color:				#000;
}

.footer-navigation li {
	margin:				0px 3px 0px 3px;
	
	float:				left;
}

.footer-navigation li a{
	color:				#000;
	font-size:			10px;
	font-weight:		bold;
	text-decoration:	none;
	
}

.footer-navigation li a:hover{
	color:				#02a044;	
}
/*----------------- Culumns Section ---------------- */
#column-left{
	width:				210px;
	
	float:				left;
}
#column-right{
	width:				660px;
	
	float:				right;
}



/*----------------- Featured Photo Section --------- */
#featured-photo {
	height:				280px;
	width:				660px;
	
	/*position:			relative;*/
}

#featured-photo li{
	height:				280px;
	width:				660px;
	display:			block;
}

.featured-text {
	min-height:			148px;
	width:				240px;
	background:			url(../images/interface/trans-black.png);
	padding:          	7px 0px 7px 10px;
	
	position:			absolute;
	top:				24px;
	left:				24px;
}

.featured-text p {
	line-height: 		35px;
}

.featured-text .first-line {
	color:				#FFF;
	font-size:			40px;
}

.featured-text .second-line {
	color:				#FFF;	
	font-size:			30px;
}

.featured-text .link a {
	width:				194px;/* 204px - 10px padding-left = 194px*/
	margin-top:			10px;
	
	display:			block;
	
	color:				#FFF;	
	font-size:			12px;
	text-decoration:	none;
	line-height:		normal;
}
/*----------------- Header Photo Section --------- */
#header-photo {
	height:				150px;
	width:				660px;
	margin-bottom:		20px;
	
	position:			relative;
}
/*----------------- Color Bar Section -------------- */
#color-bar{
	height:				12px;
	width:				660px;
	margin:				10px 0px;
}
/*----------------- Content Section ----------------- */
#content{
	width:				660px;
	padding:			0px 14px 10px 14px;
}


/*Home Call Outs*/
.home-call-outs {
	height:				72px;
	width:				207px;
	border:				3px solid #e5e5e6;
	cursor:				pointer;
	
	float:				left;
}

.home-call-outs a{
	color:				#474d41;
	text-decoration:	none;
}

.home-call-outs .image-area {
	height:				62px;
	width:				52px;
	padding-top:      	10px;
	
	float:				left;
	text-align:			center;
}

.home-call-outs .text-area {
	height:				52px;
	width:				145px;
	padding:          	10px 10px 10px 0px;
	
	float:				left;
	
	line-height:		12px;
}

.home-call-outs .title{
	width:				145px;
	margin-bottom:		5px;
	
	color:				#474d41;
	font-size:			13px;
	line-height:		normal;
	font-weight:		normal;
}

.home-call-outs .text{
	width:				145px;
	
	color:				#b2b6ba;
	font-size:			11px;
}
/*----------------- Footer Section ----------------- */
#footer{
	height:				70px;/* 55px - 30px padding-top = 25px*/
	width:				976px;
	background:			url(../images/interface/bg-footer.png) no-repeat;
	margin: 			0px auto;
	padding: 	    	30px 0px 0px 0px;
	
	position:			relative;
}

#change-background {
	display:			block;
	
	position:			absolute;
	top:				26px;
	left:				45px;
	
	color:				#000;
	text-decoration:	none;
}

#change-background li {
	margin-right:		5px;
	
	float:				left;
}

#change-background .first {	
	margin-top:			3px;
}
.icon-link{
    color:              #000 !important;
    text-decoration:    none !important;
}
#footer-newsletter {
	display:			block;
	
	position:			absolute;
	top:				26px;
	right:				50px;
}

.icon-link img{
	margin-right:		10px;
	vertical-align:		middle;
}
/*------------- Hacks/Fixes ------------------------ */
/* Fire Fox Float Fix*/
.clearfix:after {
	height:				0;
	visibility: 		hidden;
	display: 			block;
	clear: 				both;
	content: 			".";
	line-height: 		0;
}

.clearfix { display:block; }

html[xmlns] .clearfix { display:block; }

* html .clearfix { height: 1%; }

.main-navigation .tii-menu-context{
	position: absolute;
	left: 150px;
	top: 0px;
	border: 1px solid #f00;
}




.button-submit {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(../images/interface/submit.gif) no-repeat scroll 0 0;
	border:medium none;
	height:42px;
	width:89px;
	cursor: pointer;
}

.ui-datepicker{
	z-index: 99 !important;
}