/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	Screen.css
	* Main stylesheet for controling all CSS styles
	
	Author
	* Sam Howat [sam@bluetux.com]
	
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */ 	

	@import "_reset.css"; 
	@import "_type.css"; 
	@import "_grid.css"; 


/* Body
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

body {
	
	background-color: #565656; 
	margin: 0; padding: 0;	
}


/* Main Navigation
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#main-nav { 
			
	float: right;
	width: 505px; height: 30px;
	margin: 74px 0 0 0; padding: 0; 

	}

#main-nav ul {

	background: transparent url('../img/nav-main-442x30.jpg') top left no-repeat;
	position: relative;
	display: block; float: right;
	width: 505px; height: 30px; 
	margin: 0; padding:0;  
	

	}

#main-nav li, #main-nav a 	{ display: block; height: 30px; outline: none; }
#main-nav li 				{ position: absolute; top: 0px; }
#main-nav a 				{ text-indent: -9999px; text-decoration: none; outline: none; }


#main-nav #nav-one		{ left: 26px; width: 95px; }                                            
#main-nav #nav-two		{ left: 122px; width: 85px; }
#main-nav #nav-three	{ left: 208px; width: 93px; }
#main-nav #nav-four		{ left: 302px; width: 55px; }
#main-nav #nav-five		{ left: 358px; width: 104px; }

#main-nav #nav-one a:hover		{ background: transparent url('../img/nav-main-442x30.jpg') -26px -30px no-repeat; }                                            
#main-nav #nav-two a:hover		{ background: transparent url('../img/nav-main-442x30.jpg') -122px -30px no-repeat; }
#main-nav #nav-three a:hover	{ background: transparent url('../img/nav-main-442x30.jpg') -208px -30px no-repeat; }
#main-nav #nav-four a:hover		{ background: transparent url('../img/nav-main-442x30.jpg') -302px -30px no-repeat; }
#main-nav #nav-five a:hover		{ background: transparent url('../img/nav-main-442x30.jpg') -358px -30px no-repeat; }

#about-loc #main-nav #nav-one a				{ background: transparent url('../img/nav-main-442x30.jpg') -26px -30px no-repeat; }
#what-loc #main-nav #nav-two a				{ background: transparent url('../img/nav-main-442x30.jpg') -122px -30px no-repeat; }
#examples-loc #main-nav #nav-three a		{ background: transparent url('../img/nav-main-442x30.jpg') -208px -30px no-repeat; }
#faq-loc #main-nav #nav-four a				{ background: transparent url('../img/nav-main-442x30.jpg') -302px -30px no-repeat; }
#contact-loc #main-nav #nav-five a			{ background: transparent url('../img/nav-main-442x30.jpg') -358px -30px no-repeat; }

/* Sub Navigation
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#sub-nav 									{ margin: 0; padding: 10px 10px 5px 10px; }
#sub-nav h4 								{ font-size: 11px; font-weight: bold; text-transform: uppercase; }
#sub-nav h4 a:link, #sub-nav h4 a:visited 	{ color: black; text-decoration: none; }
#sub-nav h4 a:active, #sub-nav h4 a:hover 	{ color: #B9580A; text-decoration: underline;  }

#sub-nav ul 								{ margin: 10px 10px 10px 0; padding: 10px 0; list-style-type: none; border-bottom: 1px solid white; }
#sub-nav ul a:link, #sub-nav ul a:visited  	{ color: black; margin: 0; padding: 0 0 0 11px; }
#sub-nav ul a:active, #sub-nav ul a:hover  	{ color: #B9580A; background: transparent url('../img/side-nav-blt.gif') 0px 2px no-repeat; }



#sub-nav p 									{ margin: 5px 0; padding: 0; }
#sub-nav p a:link, #sub-nav p a:visited  	{ color: black; font-size: 12px; }
#sub-nav p a:active, #sub-nav p a:hover  	{ color: #B9580A; font-size: 12px; text-decoration: underline; }

/* Image Replacement For Headers & Logo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#header-div h1 a {

	background: transparent url('../img/logo-onpointpro-225x59.gif') no-repeat left top;
	display: block; float: left;
	width: 225px; 	height: 59px;
	margin: 30px 0 0 15px; padding: 0;
	text-decoration: none;
	text-indent: -9999px;
	outline: none; 	

	}

	
/* Misc Classes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.clear 	{ clear: both; } 

a.portnavleft:link, a.portnavleft:visited  	{ font-weight: bold; color: gray; margin: 0; padding: 0 0 0 10px; background: transparent url('../img/portnavleft.gif') 0% 50% no-repeat; }
a.portnavleft:active, a.portnavleft:hover  	{ font-weight: bold; color: #B9580A; margin: 0; padding: 0 0 0 10px; background: transparent url('../img/portnavleft.gif') 0% 50% no-repeat; }

a.portnavright:link, a.portnavright:visited  	{ font-weight: bold; color: gray; margin: 0; padding: 0 10px 0 0; background: transparent url('../img/portnavright.gif') 100% 50% no-repeat; }
a.portnavright:active, a.portnavright:hover  	{ font-weight: bold; color: #B9580A; margin: 0; padding: 0 10px 0 0; background: transparent url('../img/portnavright.gif') 100% 50% no-repeat; }


.border-bottom { border-bottom: 1px solid white; padding-bottom: 5px; margin-bottom: 10px; }

/* Special Footer Classes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#content-footer span 									{ margin: 0px 10px 0 5px ; color: white; font-weight: bold; }
#content-footer a:link, #content-footer a:active 		{ color: white; text-decoration: underline;  }
#content-footer a:visited, #content-footer a:hover 		{ color: white; text-decoration: none;  }


#sidebar { margin: 0; padding: 10px; }
#sidebar p, #sidebar cite { font-size: 12px; line-height: 15px; }
#sidebar cite { font-weight: bold; font-size: 10px; line-height: 15px; display:block;  }