/*
Theme Name: Biosyn Systems, Inc.
Theme URI: http://biosynsystems.com
Description: A custom WP theme developed for Biosyn Systems, Inc.
Version: 2.0
Author: dennis(m)trinh
Author URI: http://dennismtrinh.com
Tags: motion, capture, wireless, biosyn, systems
*/

/************************************************
*************************************************
	Table Of Content
*************************************************	
*************************************************
	1. CSS Includes
	2. Color Index
	3. Main Structure
	4. Header
	5. Navigation

/************************************************
*************************************************
	1. CSS Includes
*************************************************	
************************************************/
@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/nivoSlider.css";

/************************************************
*************************************************
	2. Color Index
*************************************************	
*************************************************
	#000000 - Black
	#FFFFFF - White
	#BC0000 - Biosyn Red	

/************************************************
*************************************************
	3. Main Structure
*************************************************	
************************************************/
body { background: url(style/images/bodyBackground.png); }

#mainContentUnderlay {
	background: url(style/images/mainContentUnderlay.png) repeat-y;
	height: 100%;
	margin: 0px auto 0px auto;
	width: 1000px;
}

#mainContentContainer {
	background: url(style/images/mainContentContainerBG.png) repeat;
	margin: 0px auto 0px auto;
	width: 960px;
}

#pageWrapper {
	padding: 0px 20px 0px 20px;
	position: relative;
	top: -50px;
	width: 920px;
}

/************************************************
*************************************************
	4. Header
*************************************************
************************************************/
#mainHead {
	background: url(style/images/mainHeadBG.png) no-repeat 0px 20px;
	height: 240px;
	width: 960px;
}

#branding {
	background: url(style/images/branding.png) no-repeat;
	float: left;
	height: 76px;
	margin: 20px 0px 0px 20px;
	width: 397px;
}

#searchForm {
	float: right;
	height: 25px;
	margin: 73px 20px 0px 0px;	
	width: 340px;
}

	#s {
		/* WordPress default ID #s is the search form text input field. */
		background: url(style/images/searchFormInputBG.png) no-repeat;
		border: none;
		height: 25px;
		padding: 0px 0px 0px 10px;
		width: 340px;
	}
	
	label.screen-reader-text {
		/* This hides the 'Search for:' label built into WordPress. */
		display: none;
	}
	
/************************************************
*************************************************
	5.. Navigation
*************************************************	
************************************************/
#navigationContainer {
	background: url(style/images/navigationBackground.jpg) no-repeat;
	height: 41px;
	margin: 20px 0px 0px 0px;
	width: 960px;
}

ul#navigationMenu {
	height: 38px;
	list-style: none;
	margin: 0px auto 0px auto;
	width: 817px;
}
	
	ul#navigationMenu li { display: inline; }
	
	ul#navigationMenu li a {
		float: left;
		height: 38px;
		margin: 2px 0px 0px 0px;
		text-indent: -9999px;
	}
	
ul#navigationMenu li#navigationHome a {
	background: url(style/images/navigationMenu.png) no-repeat 0px 0px;
	width: 84px;
}

	ul#navigationMenu li#navigationHome a:hover { background-position: 0px -38px; }
	
	body#home li#navigationHome a { background-position: 0px -38px; }

ul#navigationMenu li#navigationFAB a {
	background: url(style/images/navigationMenu.png) no-repeat -84px 0px;
	width: 150px;
}

	ul#navigationMenu li#navigationFAB a:hover { background-position: -84px -38px; }
	
	body#fabsystem li#navigationFAB a { background-position: -84px -38px; }

ul#navigationMenu li#navigationMedia a {
	background: url(style/images/navigationMenu.png) no-repeat -234px 0px;
	width: 107px;
}

	ul#navigationMenu li#navigationMedia a:hover { background-position: -234px -38px; }

	body#media li#navigationMedia a { background-position: -234px -38px; }	

ul#navigationMenu li#navigationShop a {
	background: url(style/images/navigationMenu.png) no-repeat -341px 0px;
	width: 96px;
}

	ul#navigationMenu li#navigationShop a:hover { background-position: -341px -38px; }
	
	body#shop li#navigationShop a { background-position: -341px -38px; }	

ul#navigationMenu li#navigationDownloads a {
	background: url(style/images/navigationMenu.png) no-repeat -437px 0px;
	width: 142px;
}

	ul#navigationMenu li#navigationDownloads a:hover { background-position: -437px -38px; }
	
	body#downloads li#navigationDownloads a { background-position: -437px -38px; }

ul#navigationMenu li#navigationCompany a {
	background: url(style/images/navigationMenu.png) no-repeat -579px 0px;
	width: 126px;
}

	ul#navigationMenu li#navigationCompany a:hover { background-position: -579px -38px;	}
	
	body#company li#navigationCompany a { background-position: -579px -38px;	}	

ul#navigationMenu li#navigationContact a {
	background: url(style/images/navigationMenu.png) no-repeat -705px 0px;
	width: 112px;
}

	ul#navigationMenu li#navigationContact a:hover { background-position: -705px -38px;	}
	
	body#contact li#navigationContact a { background-position: -705px -38px; }
	
/************************************************
*************************************************
	x. Page - Home
*************************************************
************************************************/
#introductionBlurb {
	float: left;
	width: 290px;
}

#findOutMoreButton {
	background: url(style/images/findOutMoreButton.png) no-repeat;
	cursor: pointer;
	height: 54px;
	margin: 30px 0px 0px 0px;
	width: 290px;
}

	#findOutMoreButton:hover { background: url(style/images/findOutMoreButton.png) 0px -54px; }
	
#moreInfoBox1 {
	background: url(style/images/moreInfoBoxes.png) no-repeat 0px 0px;
	cursor: pointer;
	float: left;
	height: 183px;
	width: 306px;
}
	
	#moreInfoBox1:hover { background: url(style/images/moreInfoBoxes.png) no-repeat 0px -183px; }
	
#moreInfoBox2 {
	background: url(style/images/moreInfoBoxes.png) no-repeat -306px 0px;
	cursor: pointer;
	float: left;
	height: 183px;
	width: 306px;
}

	#moreInfoBox2:hover { background: url(style/images/moreInfoBoxes.png) no-repeat -306px -183px; }

#moreInfoBox3 {
	background: url(style/images/moreInfoBoxes.png) no-repeat -612px 0px;
	cursor: pointer;
	float: left;
	height: 183px;
	width: 308px;
}

	#moreInfoBox3:hover { background: url(style/images/moreInfoBoxes.png) no-repeat -612px -183px; }

#companyNews {
	background: url(style/images/companyNewsBG.jpg) no-repeat;
	height: 171px;
	left: -20px;
	margin: 30px 0px 0px 0px;
	position: relative;
	width: 960px;
}
	
	li.companyNewsItem {
		float: left;
		margin: 0px 25px 0px 25px;
		padding: 15px 0px 0px 0px;
		width: 270px;
	}

/************************************************
*************************************************
	x.	Page - F.A.B. System
*************************************************
************************************************/
#fabContentLeft {
	float: left;
	height: 100%;
	width: 290px;
}

#fabContentRight {
	float: right;
	width: 600px;
}

	#introductionMontage {
		float: right;
		width: 600px;
	}
	
	#fabDocumentDownloadsContainer {}
	
	#fabDocumentDownloads { width: 600px; }
	
	#fabDocumentDownload1, #fabDocumentDownload2, #fabDocumentDownload3, #fabDocumentDownload4, #fabDocumentDownload5 {
		float: left;
		height: 103px;
		margin: 30px 10px 0px 10px;
		width: 100px;
	}
	
	#fabDocumentDownload1 {	background: url(style/images/fabDocumentDownloadIcon.png) no-repeat 0px 0px; }
	
	#fabDocumentDownload2 {	background: url(style/images/fabDocumentDownloadIcon.png) no-repeat -100px 0px; }

	#fabDocumentDownload3 {	background: url(style/images/fabDocumentDownloadIcon.png) no-repeat -200px 0px; }

	#fabDocumentDownload4 {	background: url(style/images/fabDocumentDownloadIcon.png) no-repeat -300px 0px; }
	
	#fabDocumentDownload5 {	background: url(style/images/fabDocumentDownloadIcon.png) no-repeat -400px 0px; }
	

/************************************************
*************************************************
	x.	Page - Media
*************************************************
************************************************/
li.videoItem {
	float: left;
	margin: 14px 14px 14px 14px;
	width: 432px;
}

/************************************************
*************************************************
	x.	Page - Shop
*************************************************
************************************************/
li.shopItem {
	float: left;
	margin: 14px 14px 14px 14px;
	width: 432px;
}

/************************************************
*************************************************
	x.	Page - Company
*************************************************
************************************************/
.companyImage {
	height: 300px;
	margin: 30px auto 30px auto;
	width: 700px;
}

/************************************************
*************************************************
	x.	Page - Contact
*************************************************
************************************************/
#contactIntroduction {
	float: left;
	width: 450px;
}

#contactEnvelope {
	background: url(style/images/contactEnvelope.png) no-repeat;
	float: right;
	height: 304px;
	margin: 50px 0px 0px 0px;
	width: 434px;
}

#contactFormContainer {
	background: url(style/images/contactFormBG.png) no-repeat;
	height: 324px;
	margin: 30px 0px 0px 0px;
	width: 920px;
}

	#contactForm {
		margin: 0px auto 0px auto;
		width: 895px;
	}
	
	#contactFormLeft, #contactFormMiddle { 
		float: left; 
		margin: 0px 0px 20px 20px;
		width: 300px;
	}
	
	#contactFormRight {
		float: left;
		width: 235px;
	}
	
	#contactForm label { 
		display: block;
		margin: 20px 0px 10px 0px;
	}
	
	.contactFormInputSingle {
		background: url(style/images/contactFormInputBG.png) no-repeat 0px 0px;
		border: none;
		height: 30px;
		padding: 0px 10px 0px 10px;
		width: 280px;
	}
	
	#contactFormTextArea {
		background: url(style/images/contactFormInputBG.png) no-repeat 0px -30px;
		border: none;
		height: 86px;
		padding: 10px;
		width: 280px;
	}
	
	#contactFormSubmit {
		background: url(style/images/contactFormInputBG.png) no-repeat 0px -136px;
		border: none;
		cursor: pointer;
		height: 172px;
		margin: 50px 0px 0px 20px;
		text-indent: -99999px;
		width: 213px;
	}

#contactThanks {
	margin: 0px auto 0px auto;
	text-align: center;
	width: 300px;
}

/************************************************
*************************************************
	x. Footer
*************************************************
************************************************/
#footerContainer {
	margin: 30px auto 0px auto;
	width: 920px;
}

#footerLeft {
	float: left;
	width: 530px;
}

#footerRight {
	float: right;
	width: 390px;
}

ul#footerMenu { 
	list-style: none;
	position: relative;
	top: -3px;
}

ul#footerMenu li { display: inline; }

#footerCap {
	background: url(style/images/footerCap.png) no-repeat;
	height: 20px;
	margin: 0px auto 0px auto;
	width: 970px;
}

/************************************************
*************************************************
	x. Utility Closet
*************************************************
************************************************/
br.clear { 
	clear: both;
	display: block;
	height: 1px;
	margin: -1px 0px 0px 0px
}

.push {
	/* This class is used to keep the footer glued to the bottom of the screen. AKA "Sticky Footers". */
	height: 4em;
}

.center {
	margin: 0px auto 0px auto;
}