/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Page Foundation <<<-------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html {
	padding:0;
	margin:0;
	height:100%;
	background:#000;
	}

body {
	margin:0 0 20px 0;
	padding:0;
	height:100%;
	color:#fff;
	}

#wrapper {
	position:relative;
	width:850px;
    	height:100%;
    	background:yellow;
    	margin:0;
    	padding:0;
	}

a {
	outline:0;
	}

a:visited {
	color:#fff;
	}

/*-- END Page Foundation --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Header Styles <<<---------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* header container */
#wrapper #headerBox {
	width:850px;
	height:124px;
	display:block;
	float:left;
	text-align:left;
	padding:0;
	margin:0;
	border:thin solid #CC0000;
	border-top:none;
	}

/* style the cursor in page header container, remove dotted border in Firefox */
#wrapper #headerBox a {
	cursor:pointer;
	outline:0;
	}

/* style the logo image in page header container */
#wrapper #headerBox a img.logo {
	float:left;
	margin:50px 30px 10px 30px;
	border:none;
	}

/*-- END Header Styles --*/



/* --------------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Navigation Styles <<<---------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------------*/

/* navigation containing box */
#wrapper #navBox {
	width:850px;
	height:32px;
	display:block;
	position:relative;
	float:left;
	clear:left;
	margin:0;
	padding:0;
	border:thin solid #CC0000;
	border-top:none;
	background:#000;
	}

/* navigation unordered list */
#wrapper #navBox ul {
	padding:0;
	margin:0;
	border:0;
	list-style-type:none;
	display:block;
	}

/* navigation list elements */
#wrapper #navBox ul li {
	margin:0;
	padding:0;
	border:0;
	display:block;
	float:left;
	position:relative;
	}

/* navigation links - index.php only */
#wrapper #navBox ul#indexPageLinks li a {
	width:auto;
	background:#000;
	font:bold 16px/32px Trebuchet MS, Helvetica, sans-serif;
	text-decoration:none;
	color:#FFFFFF;
	padding:0 39px;
	display:block;
	position:relative;
	}

/* hover navigation links - index.php only */
#wrapper #navBox ul#indexPageLinks li a:hover {
	background:#CC0000;
	}

/* navigation links */
#wrapper #navBox ul li a {
	width:auto;
	background:#000;
	font:bold 16px/32px Trebuchet MS, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	padding:0 30px;
	display:block;
	position:relative;
	}

/* hover navigation links */
#wrapper #navBox ul li a:hover {
	background:#CC0000;
	}

/* home page navigation links */
#wrapper #navBox ul li a#homeIcon {
	background:url(../images/home-icon-up.png) top left no-repeat;
	width:80px;
	height:32px;
	font:1.0em Trebuchet MS, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	padding:0;
	display:block;
	position:relative;
	}

/* hover navigation links */
#wrapper #navBox ul li a#homeIcon:hover {
	background:#CC0000 url(../images/home-icon-hover.png) top left no-repeat;
	}

/*-- END Navigation Styles --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Global Content Styles <<<-------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* content box */
#wrapper #contentBox {
	width:790px;
	height:100%;
	display:block;
	position:relative;
	float:left;
	clear:left;
	text-align:left;
	padding:30px;
	background:#000;
	border-left:thin solid #CC0000;
	border-right:thin solid #CC0000;
	}

/* left third of page */
#wrapper #contentBox #leftThird {
	width:290px;
	height:100%;
	display:block;
	position:relative;
	float:left;
	clear:left;
	text-align:left;
	margin:10px 0 0 0;
	padding:0 0 0 20px;
	background:#000;
	}

/* middle third of page */
#wrapper #contentBox #middleThird {
	width:290px;
	height:100%;
	display:block;
	position:relative;
	float:left;
	clear:none;
	text-align:left;
	margin:10px 0 0 0;
	padding:0;
	background:#000;
	}

/* right third of page */
#wrapper #contentBox #rightThird {
	width:180px;
	height:100%;
	display:block;
	position:relative;
	float:left;
	clear:none;
	text-align:left;
	margin:10px 0 0 0;
	padding:0;
	background:#000;
	}

/* content box h1 text - page headings */
#wrapper #contentBox h1 {
	width:790px;
	font:1.8em Trebuchet MS, Helvetica, sans-serif;
	color:#CC0000;
	margin:0 0 25px 0;
	padding:0;
	float:left;
	}

/* content box h2 text -  */
#wrapper #contentBox h2 {
	font:1.2em Trebuchet MS, Helvetica, sans-serif;
	color:#CC0000;
	margin:15px 0 5px 0;
	padding:0;
	}

/* content box h3 text -  */
#wrapper #contentBox h3 {
	width:auto;
	font:0.9em Geneva, sans-serif;
	line-height:1.5em;
	color:#F2F2F2;
	margin:0;
	padding:0;
	text-align:justify;
	}

/* content box h4 text -  */
#wrapper #contentBox h4 {
	font:1.1em Trebuchet MS, Helvetica, sans-serif;
	color:#F2F2F2;
	margin:5px 0 5px 0;
	padding:0;
	}

/* sample links  */
#wrapper #contentBox a {
	font:1.0em Geneva, sans-serif;
	line-height:1.5em;
	color:#CC0000;
	margin:0;
	padding:0;
	}

/* sample links - hover */
#wrapper #contentBox a:hover {
	font:1.0em Geneva, sans-serif;
	line-height:1.5em;
	color:#fff;
	margin:0;
	padding:0;
	}

/* numbered lists  */
#wrapper #contentBox ol {
	font:0.9em Geneva, sans-serif;
	line-height:1.4em;
	color:#F2F2F2;
	margin:0 0 0 30px;
	padding:0;
	text-align:justify;
	}

/* bulleted lists  */
#wrapper #contentBox ul {
	font:0.9em Geneva, sans-serif;
	line-height:1.4em;
	color:#F2F2F2;
	margin:0 0 0 30px;
	padding:0;
	text-align:justify;
	}

/* content box full width boxes */
#wrapper #contentBox div.fullWidthBorder {
	display:block;
	float:left;
	clear:left;
	background:#1A1A1A;
	border:thin solid #CC0000;
	width:747px;
	height:auto;
	text-align:left;
	padding:10px 20px;
	margin:0 0 30px 0;
	}

/* content box full width boxes */
#wrapper #contentBox div.fullWidthNoBorder {
	width:auto;
	height:auto;
	float:left;
	clear:left;
	text-align:left;
	margin:0 0 30px 0;
	}

/* audio examples container */
#wrapper #contentBox div.example {
	display:block;
	float:left;
	width:747px;
	height:auto;
	text-align:left;
	padding:0;
	margin:0 0 0 30px;
	}

/* style the headings in the audio examples container */
#wrapper #contentBox div.example span.heading {
	width:250px;
	font:1.0em Trebuchet MS, Helvetica, sans-serif;
	font-weight:bold;
	color:#CC0000;
	margin:10px 0 10px 0;
	padding:0;
	text-align:justify;
	display:block;
	float:left;
	clear:none;
	}

/* style the play button in the audio examples container */
#wrapper #contentBox div.example a.playButton {
	background:url(../images/playButton.png) top left no-repeat;
	width:24px;
	height:24px;
	margin:4px 90px 13px 6px;
	display:block;
	float:left;
	clear:left;
	}

/* style the play button :hover in the audio examples container */
#wrapper #contentBox div.example a.playButton:hover {
	background:url(../images/playButtonHover.png) top left no-repeat;
	}

/* style the artist's name in the audio examples container */
#wrapper #contentBox div.example span.artistName {
	width:250px;
	font:1.0em Trebuchet MS, Helvetica, sans-serif;
	color:#F2F2F2;
	margin:0;
	padding:5px 0 0 0;
	text-align:justify;
	display:block;
	float:left;
	}

/* style the song titles in the audio examples container */
#wrapper #contentBox div.example span.songTitle {
	width:250px;
	font:1.0em Trebuchet MS, Helvetica, sans-serif;
	color:#F2F2F2;
	margin:0;
	padding:5px 0 0 0;
	text-align:justify;
	display:block;
	float:left;
	}

/* style the file types in the audio examples container */
#wrapper #contentBox div.example span.fileType {
	width:90px;
	font:1.0em Trebuchet MS, Helvetica, sans-serif;
	color:#F2F2F2;
	margin:0;
	padding:5px 0 0 0;
	text-align:justify;
	display:block;
	float:left;
	}

/* spacer  */
#wrapper #contentBox div.spacer {
	width:100%;
	height:200px;
	}

/*-- END Global Content Styles --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Home Page Styles <<<------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* container for left half of home page */
#wrapper #contentBox div.leftHalfHomePage {
	width:335px;
	height:auto;
	padding:0;
	margin:0 25px 20px 0;
	display:block;
	float:left;
	clear:left;
	position:relative;
	}

/* container for right half of home page */
#wrapper #contentBox div.rightHalfHomePage {
	width:365px;
	height:auto;
	padding:0;
	margin:0 0 20px 0;
	display:block;
	float:right;
	position:relative;
	}

/* free demo button styles */
#wrapper #contentBox div.rightHalfHomePage a span.freeDemoButton {
	width:365px;
	height:132px;
	float:left;
	margin:50px 30px 20px 0;
	padding:0;
	background:url(../images/free-demo-background.png) top left no-repeat;
	border:1px solid #CC0000;
	}

/* free demo button :hover styles */
#wrapper #contentBox div.rightHalfHomePage a:hover span.freeDemoButton {
	width:365px;
	height:132px;
	float:left;
	margin:50px 30px 20px 0;
	padding:0;
	background:url(../images/free-demo-background-hover.png) top left no-repeat;
	border:1px solid #ccc;
	}

/* style photograph on home page */
#wrapper #contentBox div.rightHalfHomePage img.kri {
	border:1px solid #CC0000;
	}

/* style caption under photograph on home page */
#wrapper #contentBox div.rightHalfHomePage span.caption {
	width:auto;
	float:left;
	font:0.7em Geneva, sans-serif;
	font-style:italic;
	margin:10px 0 0 8px;
	}

/*-- END Home Page Styles --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Gear Page Styles <<<------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* container for left half of gear page */
#wrapper #contentBox div.gearTypeLeft {
	width:314px;
	height:200px;
	padding:0;
	margin:0 0 20px 30px;
	border:2px solid #333;
	display:block;
	float:left;
	position:relative;
	}

/* container for right half of gear page */
#wrapper #contentBox div.gearTypeRight {
	width:314px;
	height:200px;
	padding:0;
	margin:0 30px 20px 0;
	border:2px solid #333;
	display:block;
	float:right;
	position:relative;
	}

/* style the icons on the gear page */
#wrapper #contentBox div.gearTypeLeft img, #wrapper #contentBox div.gearTypeRight img {
	position:absolute;
	bottom:2px;
	right:2px;
	z-index:0;
	}

/* style the heading text on the gear page */
#wrapper #contentBox div.gearList h1 {
	font:1.4em Helvetica, Tahoma, sans-serif;
	color:red;
	margin:15px 0 15px 15px;
	padding:0;
	text-align:left;
	z-index:100;
	}

/* style the plain text on the gear page */
#wrapper #contentBox div.gearList h2 {
	font:0.9em Helvetica, Tahoma, sans-serif;
	color:white;
	margin:0 0 5px 25px;
	padding:0;
	text-align:left;
	z-index:100;
	}

/* split the gear lists into two columns */
#wrapper #contentBox div.gearList h2.overflow {
	width:115px;
	display:block;
	float:left;
	font:0.9em Helvetica, Tahoma, sans-serif;
	color:white;
	margin:0 0 5px 25px;
	padding:0;
	text-align:left;
	z-index:100;
	}

/* style the computer specs on the gear page */
#wrapper #contentBox div.gearList h2.computerSpecs {
	font:0.9em Helvetica, Tahoma, sans-serif;
	color:white;
	margin:0 0 5px 45px;
	padding:0;
	text-align:left;
	z-index:100;
	}

/*-- END Gear Page Styles --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Form Styles <<<---------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* form style */
#wrapper #contentBox form {
	font:1.0em Helvetica, sans-serif;
	width:100%;
	display:block;
	position:relative;
	float:left;
	margin:30px 0 0 0;
	}

/* content box h3 text -  */
#wrapper #contentBox h3.formDirections {
	background:#000;
	font:1.0em Helvetica, sans-serif;
	color:#D9D9D9;
	width:auto;
	display:block;
	position:relative;
	float:left;
	margin:0;
	}

/* form resubmit text */
#wrapper #contentBox h3.resubmit {
	background:#000;
	font:1.0em Helvetica, sans-serif;
	color:#CC0000;
	width:auto;
	display:block;
	position:relative;
	float:left;
	margin:0;
	}

/* ul styles */
#wrapper #contentBox form ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}

/* li styles */
#wrapper #contentBox form ul li {
	list-style-type:none;
	float:left;
	clear:left;
	width:100%;
	margin:0 0 10px 0;
	}

/* label styles */
#wrapper #contentBox form ul li label {
	width:100px;
	text-align:right;
	display:block;
	float:left;
	clear:left;
	color:#D9D9D9;
	margin:0 15px 20px 0;
	padding:6px 0 0 0;
	font:1.2em Helvetica, sans-serif;
	}

/* input styles - text */
#wrapper #contentBox form ul li input {
	width:260px;
	text-align:left;
	display:block;
	float:left;
	clear:none;
	background:#000;
	padding:5px;
	border:1px solid #CC0000;
	color:#D9D9D9;
	font:1.2em Helvetica, sans-serif;
	}

/* input styles - text - when error message exists */
#wrapper #contentBox form ul li input.error {
	background:#333;
	}

/* input styles - text */
#wrapper #contentBox form ul li textarea {
	width:406px;
	height:180px;
	text-align:left;
	display:block;
	float:left;
	clear:none;
	background:#000;
	padding:5px;
	border:1.5px solid #CC0000;
	color:#D9D9D9;
	font:1.2em Helvetica, sans-serif;
	overflow:auto;
	}

/* input styles - text */
#wrapper #contentBox form ul li textarea.error {
	background:#333;
	}

/* form error message style */
#wrapper #contentBox form ul li .errorMessage {
	background:#000;
	font:1.2em Helvetica, sans-serif;
	color:#CC0000;
	width:auto;
	display:block;
	position:relative;
	float:left;
	margin:5px 0 0 10px;
	}

/* input styles - submit */
#wrapper #contentBox form ul li input.submit {
	width:75px;
	text-align:center;
	display:block;
	float:left;
	clear:left;
	padding:5px 0;
	margin:10px 0 0 0;
	background:#363636;
	border:1px solid #CC0000;
	font:1.2em Helvetica, sans-serif;
	cursor:pointer;
	}

/* input styles - submit */
#wrapper #contentBox form ul li input.submit:hover {
	cursor:pointer;
	border:1px solid #363636;
	background:#CC0000;
	color:#fff;
	}

/* input styles - submit */
#wrapper #contentBox form input#contact {
	margin:20px 0 0 458px;
	}

/*-- END Form Styles --*/



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> Footer Styles <<<---------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* footerBox */
#wrapper #footerBox {
	width:850px;
	height:30px;
	display:block;
	position:relative;
	float:left;
	clear:both;
	padding:0;
	margin:0;
	text-align:left;
	background:#000;
	border:thin solid #CC0000;
	}

/* copyright container in footerBox */
#wrapper #footerBox .copyright {
	float:left;
	clear:none;
	height:30px;
	padding:8px 0 0 25px;
	font:0.8em Geneva, sans-serif;
	color:#fff;
	}

/* links container in footerBox */
#wrapper #footerBox .footerLinks {
	float:right;
	clear:none;
	height:30px;
	padding:8px 25px 0 0;
	font:0.8em Geneva, sans-serif;
	color:#fff;
	}

/* links in footerBox .footerLinks */
#wrapper #footerBox .footerLinks a {
	color:#fff;
	text-decoration:none;
	}

/* hover the links in footerBox .footerLinks */
#wrapper #footerBox .footerLinks a:hover {
	color:#CC0000;
	text-decoration:underline;
	}

/*-- END Footer Styles --*/