/* CSS Document */
body {
	background-color:#000000;
	margin: 0px;
	padding:0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	
	color: #FFFFFF;
}

img {
	border: none;
}

p{
	margin: 0px;
	padding: 0px;
}

a { 
	color: #FFF;
	text-decoration:none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

#bodyContainer { 	
	position:absolute;
	height:800px; 
	width:900px;
	margin: 0px 0px 0px -450px;
	left: 50%;
	text-align: left;
	padding: 0px;
}

.landingBG{
	background-image:url(../images/codexy_bg.jpg);
}
.contentBG{
	background-image:url(../images/codexy_dark_bg.jpg);
}

#content { 	

}

/* ------------  fonts and text ----------------*/
.txtError{
	color:#FF0000;
}

.txtSuccess{
	color:#66CC33;
	font-size: 14px;
}

.txtWhiteLg{
	font-size:12px;
	text-transform: uppercase;
	font-weight: bold;
}

.txtBlue{ color: #4CC6E9; }
.txtYellow{ color: #FAF072; }
.txtPurple{ color: #9A95C9; }
.txtPeach{ color: #F8A87F; }
.txtGreen{ color: #99CC66; }

/* ---------- buttons + links ------------*/


/* ---------- form fields ------------*/
.ddlDropLists{
	padding: 0px 0px 0px 2px;
}

/* ---------- Nav Menu ------------*/

.navContainer{
	position:absolute; top: 60px; left: 20px; width: 200px; height: 200px;
}

a.navItem {
  display: block;
  width: 170px;
  height: 20px;
  text-decoration: none;
  padding: 7px 0px 7px 0px;
 
}
a:hover.navItem {
  background-position: -170px 0;
  
}

a#approach{ background: url(../images/nav_the_code_xy_approach.png) 0 0 no-repeat; }
a#approachActive{ background: url(../images/nav_the_code_xy_approach.png) -170px 0 no-repeat; }
a:hover#approach{ background-position: -170px 0; }

a#explore{ background: url(../images/nav_explore_the_possibilities.png) 0 0 no-repeat; }
a#exploreActive{ background: url(../images/nav_explore_the_possibilities.png) -170px 0 no-repeat; }
a:hover#explore{ background-position: -170px 0; }

a#timeless{ background: url(../images/nav_timeless_craftmenship.png) 0 0 no-repeat; }
a#timelessActive{ background: url(../images/nav_timeless_craftmenship.png) -170px 0 no-repeat; }
a:hover#timeless{ background-position: -170px 0; }

a#store{ background: url(../images/nav_store_locator.png) 0 0 no-repeat; }
a#storeActive{ background: url(../images/nav_store_locator.png) -170px 0 no-repeat; }
a:hover#store{ background-position: -170px 0; }

a#contact{ background: url(../images/nav_contact_us.png) 0 0 no-repeat; }
a#contactActive{ background: url(../images/nav_contact_us.png) -170px 0 no-repeat; }
a:hover#contact{ background-position: -170px 0; }



/* ---------- DNA Menu ------------*/
.dnaContainer{
	position: absolute; left: 0px; top: 240px; height: 450px;
	width: 88px;
}


a.dnaItem {
  display: block;
  width: 87px;
  height: 150px;
  text-decoration: none; 
}
a:hover.dnaItem {
  background-position: -90px 0;
}

a#design{ background: url(../images/link_design.jpg) 0 0 no-repeat; }
a#designActive{ background: url(../images/link_design.jpg) -90px 0 no-repeat; }
a:hover#design{ background-position: -90px 0; }

a#natural{ background: url(../images/link_natural.jpg) 0 0 no-repeat; }
a#naturalActive{ background: url(../images/link_natural.jpg) -90px 0 no-repeat; }
a:hover#natural{ background-position: -90px 0; }

a#accents{ background: url(../images/link_accents.jpg) 0 0 no-repeat; }
a#accentsActive{ background: url(../images/link_accents.jpg) -90px 0 no-repeat; }
a:hover#accents{ background-position: -90px 0; }



/* ---------- Blends Menu ------------*/
.linkContainer{
	position:absolute; bottom:4px; left: 6px; font-size: 11px;
}


a.blendItem5up {
  display: block;
  width: 102px;
  height: 134px;
  text-decoration: none;
  border: 2px #111 solid; 
  color: #FFFFFF;
}
a:hover.blendItem5up {
  background-position: -110px 0;
  text-decoration: none;
  color:#FAF072;
}

a.blendItem6up {
  display: block;
  width: 86px;
  height: 134px;
  text-decoration: none; 
  border: 2px #111 solid;
  color:#FAF072;
  cursor: default;
  
}
a:hover.blendItem6up {
  background-position: -110px 0;
  text-decoration: none;
  color:#FAF072;
}

a#woven{ background: url(../images/link_woven.jpg) 0 0 no-repeat;}
a:hover#woven{ background-position: -110px 0; }

a#links{ background: url(../images/link_links.jpg) 0 0 no-repeat; }
a:hover#links{ background-position: -110px 0; }

a#bricks{ background: url(../images/link_bricks.jpg) 0 0 no-repeat; }
a:hover#bricks{ background-position: -110px 0; }

a#milled{ background: url(../images/link_milled.jpg) 0 0 no-repeat; }
a:hover#milled{ background-position: -110px 0; }

a#smooth{ background: url(../images/link_smooth.jpg) 0 0 no-repeat; }
a:hover#smooth{ background-position: -110px 0; }



a#paladium{ background: url(../images/link_n_paladium.jpg) 0 0 no-repeat;}
a:hover#paladium{ background-position: -110px 0; }

a#platinum{ background: url(../images/link_n_platinum.jpg) 0 0 no-repeat;}
a:hover#platinum{ background-position: -110px 0; }

a#silver{ background: url(../images/link_n_silver.jpg) 0 0 no-repeat;}
a:hover#silver{ background-position: -110px 0; }

a#titanium{ background: url(../images/link_n_titanium.jpg) 0 0 no-repeat;}
a:hover#titanium{ background-position: -110px 0; }

a#steel{ background: url(../images/link_n_steel.jpg) 0 0 no-repeat;}
a:hover#steel{ background-position: -110px 0; }

a#gold{ background: url(../images/link_n_gold.jpg) 0 0 no-repeat;}
a:hover#gold{ background-position: -110px 0; }


/*----------- the slide viewer -------------*/

.productContainer{
	height: 190px; 
	width: 130px; 
	background-repeat: no-repeat;
}

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	/* 
		define width and height of container element and list item (slide)
		list items must be the same size as the slider area
	*/ 
	width:530px;
	height:390px;
	overflow:hidden; 
	}
	
span#prevBtn {
	float: left;
	margin-left: 10px;
}	
span#prevBtn a{
	color: #FAF072;
	font-weight: bold;	
}
span#prevBtn a:hover{
	color:#FFFFFF;
}

span#nextBtn {
	float: right;
	text-align: right;
	margin-right: 10px;
}
span#nextBtn a{
	color: #FAF072;
	height: 20px;
}	
span#nextBtn a:hover{
	color:#FFFFFF;
}	

/*----------------------------
		for Scoll Pane
------------------------------*/
/*
a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}
*/
			
.holder {
	float: left;
	position: absolute;
	top: 270px;
	left: 320px;
	z-index: 0;
	background: #000;
	height: 0px;
}

.holderStockists {
	float: left;
	position: absolute;
	top: 270px;
	left: 600px;
	z-index: 0;
	background: #000;
	height: 0px;
}


.scroll-pane {
	width: 240px;
	height: 280px;
	overflow: auto;
	text-align: left;
	font-size:12px;
	line-height: 24px;
	padding: 10px 0px 5px 20px;	
}
.scroll-pane a{
	color: #F8A87F;
}

.scroll-pane a:hover{
	color: #FFFFFF;
	text-decoration:none;
}

.stockistsResultBox{
	line-height: 15px;
	margin-bottom: 15px;
	font-size: 11px;	
}


/* ---------- contact form rows ------------*/

.contactContainer{
	position:absolute; 
	right: 0px; 
	top: 240px; 
	width: 0px; 
	height: 280px; 
	font-size: 12px; 
}

.contactRow{
	width: 510px;
	margin-bottom: 5px;
	margin-right: 0px;
	padding: 5px 0px 5px 0px;
	background-color: #000000;
}

.contactRow .label{
	margin-left: 10px;
	float:left; 
	padding-top: 5px;
	color:#99CC66;
}
.contactRow .field{
	margin-left: 90px;
}

.contactTextbox{
	border: none; 
	margin-top:2px; 
	background-color: transparent !important; 
	color:#99CC66;
	font-size:14px;
	width:390px;
}


.sendBtn{
	line-height: 20px;
	font-size: 16px;
}

.sendBtn a{
	color: #99CC66;
}
.sendBtn a:hover{
	color: #FFFFFF;
}

/* -------------------------- */
/* ------   for SPAM    ----- */
/* -------------------------- */
#checkUser {
	display:none;
}