@import url("../css/reset.css");

/*  
Globals
--------------------------------------------------------------------------------------------------- */
* {margin:0; padding:0;}

body {
    font: 12px/1.4em Arial, Helvetica, sans-serif;
	background: url(../gfx/bg_1.jpg) repeat 0 0;
    color: #666;
	margin: 0;
} 
hr { display: none; }

strong, b { font-weight: bold; }
em, i { font-style: italic; }

.price_drop {
	color: #FF0000;
	text-decoration:line-through;
}

.headline {
	font-size: 18px;
	line-height: 25px;
	margin: 0 0 20px 0;
	font-weight: normal;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover {
	background: #000;
	color: #fff;
}

h3 {
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:  #666;
}


/* Layout Divisions
--------------------------------------------------------------------------------------------------- */
#outter_wrapper {
	width: 100%;
	background: url(../gfx/container_shadow.png) no-repeat 50% 100px;

	position: relative;
}
#inner_wrapper {
	margin: 0 auto;
	width: 990px;  
	position: relative;
}
#outter_container {
	display: block;
	background: url(../gfx/foot-bg.png) no-repeat 0 100%;
	padding: 0 0 92px 0;
}
#container {
	padding: 35px 0 0 0;
	background: #fff;
}

/* Header
--------------------------------------------------------------------------------------------------- */
#header {
	background: url(../gfx/head-bg.png) no-repeat 0 0;
	height: 125px;
	position: relative;
}
#logo {
	width: 233px;
	height: 46px;
	display:block;
	background:url(../gfx/logo.gif) no-repeat 0 0;
	text-indent: -999em;
	position: absolute;
	top: 62px;
	left: 44px;
}


/* INSIDE CONTAINERS
--------------------------------------------------------------------------------------------------- */
#subheader {
	height: 105px;
	background: url(../gfx/subheader_bg.jpg) no-repeat 0 0;
	position: relative;
}
	
#subheader h1 {
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 35px;
	color:  #000;
	font-weight: normal;
	position: absolute;
	top: 30px;
	left: 120px;
	line-height: 35px;
}
#subheader #btn_gallery {
	width: 166px;
	height: 30px;
	display: block;
	text-indent: -999em;
	background: url(../gfx/btn_viewgallery.jpg) no-repeat 0 0;
	position: absolute;
	top: 50px;
	right: 38px;
}
#subheader #btn_gallery:hover {
	background-position: 0 -30px;	
}


#subheader #subnav {
	position: absolute;
	bottom: -8px;
	left: 90px;
}
#subheader #subnav li {
	float: left;
	background:url(../gfx/subnav-cross.png) no-repeat 100% 3%;
	padding: 0 30px;
}
#subheader #subnav li a {
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	color: #999;
	height: 30px;
	float: left;
}

#subheader #subnav li a:hover, #subheader #subnav li.active a {
	background: url(../gfx/subnav_arrow.gif) no-repeat 50% 100%;
	color: #000;
}

#primary_container {
	padding: 10px;
	position: relative;
	background: url(../gfx/prm_shadow.jpg) repeat-x 0 100%;
}
body#contact #primary_container {
	background: none;
}
body#search_results #primary_container {
	background: none;
}
#primary_container #prm_content {
	padding: 30px;
}


/* --- STYLES --- */
#primary_container .subheader_image {
	float: right;
	position: relative;
	top: -60px;
	right: -60px;
}

#primary_container .headline {
	line-height: 24px;
}
#primary_container p {
	line-height: 20px;
	margin: 0 0 20px 0;
}

#primary_container #prm_content h2 {
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 25px;
	text-transform: uppercase;
	font-weight: bold;
	color: #333;
	margin: 0 0 15px 0;
}
#primary_container h3 {
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color:  #666;
	background: url(../gfx/h3_shadow.jpg) no-repeat 0 100%;
	padding: 0 0 15px 0;
	margin: 0 0 15px 0;
}
#primary_container h4 {
	font-size: 16px;
	color:  #000;
	background: url(../gfx/grey_cross.png) no-repeat 0 50%;
	padding: 10px 0 10px 20px;
	margin: 0 0 15px 0;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	text-transform: uppercase;
}
#primary_container h5 {
	font-size: 14px;
	font-weight: bold;
}
#primary_container h6 {
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 15px 0;
	background: #000;
	display: inline-block;
	padding: 5px;
	color: #fff;
}

#primary_container #prm_content a {
	font-weight: bold;
	text-decoration: underline;
}
#primary_container #prm_content blockquote {
	padding: 20px;
	background: #F0F0F0;
	font-size: 16px;
	font-style: italic;
	border: 1px dashed #ccc;
	float: left;
	width: 250px;
	margin: 0 25px 15px 0;
}
#primary_container #prm_content blockquote p {
	margin: 0;
	line-height: 25px;
}

#primary_container #prm_content ol {
	margin:0 0 35px 55px;
}
#primary_container #prm_content ul {
	margin:0 0 35px 35px;
}
#primary_container #prm_content ol li {
	margin: 0 0 15px 0;
	font-size: 16px;
	list-style-type: upper-roman;
	padding: 0 0 0 8px;
}
#primary_container #prm_content ul li {
	margin: 0 0 15px 0;
	font-size: 16px;
	background: url(../gfx/grey_cross.png) no-repeat 0 3px;
	padding: 0 0 0 25px;
}







#secondary_container {
	width: 990px;
	background: url(../gfx/secondary_container_bg.jpg) no-repeat 0 55px;
}
#secondary_container .second_box {
	padding: 15px 25px;
	float: left;
	width: 280px;
	font-size: 11px;
}
#secondary_container .second_box h3 {
	margin: 0 0 35px 0;
}

#secondary_container .btn_details {
	width: 69px;
	height: 20px;
	background: url(../gfx/btn_view-details.png) no-repeat 0 0;
	text-indent: -999em;
	display: block;
	margin: 0 0 0 95px;
}
#secondary_container .btn_details:hover {
	background-position: 0 -20px;
}

/* ------------- FEATURED BOX ------------------- */

#colA .feat_minibox {
	margin: 0 0 20px 0;
}
#colA .feat_minibox h5 {
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 5px 0;
}

#colA .feat_minibox .feat_price {
	font-size: 11px;
	margin: 0 0 5px 0;
}
#colA .feat_minibox img {
	border: 1px solid #ccc;
	float: left;
	margin: 0 15px 0 0;
}



/* ------------- CONTACT BOX ------------------- */
#contact_minibox {
	font-size: 18px;
	font-weight: bold;
	color: #AFAFAF;
	padding: 15px 0;
}
#contact_minibox li {
	margin: 0 0 7px 0;
}
#contact_minibox li strong {
	display: block;
	float: left;
	color: #444;
	width: 100px;
}


/* ------------- CONTACT PAGE ------------------- */
#contact_colA {
	width: 300px;
	float: left;
}
#contact_colB {
	width: 600px;
	float: right;
}


#prm_content #contact_colA #contact_minibox {
	margin: 0;
}


#contact_form .contact_fieldbox {
	margin: 0 0 10px 0;
}
#contact_form .contact_fieldbox label {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	text-indent: 6px;
	float: left;
	line-height: 30px;
	width: 120px;
}
#contact_form .contact_fieldbox input {
	font: 12px Arial, Helvetica, sans-serif;
	color: #888;
	width: 260px;
	height: 24px;
	background: url(../gfx/contact_field-bg.jpg) no-repeat 0 0;
	border: none;
	float: left;
	margin: 0 10px 0 0;
	padding: 5px 10px 0 10px;
}
#contact_form .contact_fieldbox textarea {
	font: 12px Arial, Helvetica, sans-serif;
	color: #888;
	width: 300px;
	height: 124px;
	background: url(../gfx/contact_txtarea-bg.jpg) no-repeat 0 0;
	border: none;
	float: left;
	margin: 0 10px 10px 0;
	padding: 5px 10px 0 10px;
}

#contact_form .contact_fieldbox .req_txt {
	font-size: 11px;
	font-weight: bold;
	color: #FF0000;
}
#prm_content #contact_colB #contact_form #btn_submit {
	width: 95px;
	height: 30px;
	overflow: hidden;
	text-indent: -999em;
	font-size: 0px;
	display:block;
	line-height: 0px;
	background: url(../gfx/btn_submit.jpg) no-repeat 0 0;
	border: none;
	cursor: pointer;
	margin: 0 0 10px 120px;
}
#prm_content #contact_colB #contact_form #btn_submit.hoverme {
	background-position: 0 -30px;
}



/* HOME CONTAINERS
--------------------------------------------------------------------------------------------------- */
body#home #content h3 {
	height: 40px;
	padding: 15px 0 0 30px;
}
body#home #content {
	width: 990px;
	position: relative;
	background: url(../gfx/home_colB_bg.jpg) no-repeat 100% 55px #fff;
}
body#home #colA {
	float: left;
	width: 660px;
	background: url(../gfx/home_colA_bg.jpg) no-repeat 0 55px;
}
body#home #colB {
	float: left;
	width: 330px;
}

body#home #colB .news_box {
	padding: 15px 30px;
	line-height: 20px;
}
#colB .news_box p {
	margin: 0 0 15px 0;
}
#colB .news_box .news_date {
	display: block;
	font-size: 11px;
	color: #999;
	margin: 0 0 10px 0;
}
#colB .news_box h4 {
	font-weight: bold;
	font-size: 15px;
	line-height: 22px;
	margin: 0 0 10px 0;
}	



/* BUTTONS
--------------------------------------------------------------------------------------------------- */
#btn_more {
	width: 123px;
	height: 22px;
	display: block;
	text-indent: -999em;
	background:  url(../gfx/btn_continue.png) no-repeat 0 0;
	float: left;
	margin: 0 10px 0 0;
}
#btn_more:hover {
	background-position: 0 -22px;
}

#btn_news {
	width: 75px;
	height: 20px;
	display: block;
	text-indent: -999em;
	background:  url(../gfx/btn_news.png) no-repeat 0 0;
	float: left;
	margin: 0 10px 0 0;
}
#btn_news:hover {
	background-position: 0 -20px;
}

#btn_contact_form {
	width: 151px;
	height: 20px;
	display: block;
	text-indent: -999em;
	background:  url(../gfx/btn_mini-contact.png) no-repeat 0 0;
}
#btn_contact_form:hover {
	background-position: 0 -20px;
}

/* NAVIGATION
--------------------------------------------------------------------------------------------------- */
#prm_nav {
	width: 990px;
	height: 35px;
	background: url(../gfx/nav-bg.jpg) repeat-x 0 0;
	position: absolute;
	top: 125px;
	left: 0;
}
#prm_nav ul {
	margin: 0 0 0 44px;
}
#prm_nav ul li {
	float: left;
	margin: 0 15px 0 0;
}
#prm_nav ul li .g_nav {
	display: block;
	height: 32px;
	background: url(../gfx/prm_nav.png) no-repeat 0 0;
	text-indent: -999em;
	padding: 0;
}

/* HOME */
#prm_nav #n-home .g_nav {
	width: 63px;
	background-position: 0 0;
}
body#home #prm_nav #n-home .g_nav, #prm_nav #n-home .g_nav:hover {
	background-position: 0 -32px;
}
#prm_nav ul #n-home.sfHover a.g_nav {
	background-position: 0 -32px;
}

/* PRODUCTS */
#prm_nav #n-products .g_nav {
	width: 105px;
	background-position: -76px 0;
}
body#products #prm_nav #n-products .g_nav, #prm_nav #n-products .g_nav:hover {
	background-position: -76px -32px;
}
#prm_nav ul #n-products.sfHover a.g_nav {
	background-position: -76px -32px;
}

/* ABOUT US */
#prm_nav #n-about .g_nav {
	width: 65px;
	background-position: -199px 0;
}
body#about #prm_nav #n-about .g_nav, #prm_nav #n-about .g_nav:hover {
	background-position: -199px -32px;
}
#prm_nav ul #n-about.sfHover a.g_nav {
	background-position: -199px -32px;
}

/* RESOURCES */
#prm_nav #n-resources .g_nav {
	width: 105px;
	background-position: -283px 0;
}
body#resources #prm_nav #n-resources .g_nav, #prm_nav #n-resources .g_nav:hover {
	background-position: -283px -32px;
}
#prm_nav ul #n-resources.sfHover a.g_nav {
	background-position: -283px -32px;
}

/* CONTACT */
#prm_nav #n-contact .g_nav {
	width: 78px;
	background-position: -410px 0;
}
body#contact #prm_nav #n-contact .g_nav, #prm_nav #n-contact .g_nav:hover {
	background-position: -410px -32px;
}
#prm_nav ul #n-contact.sfHover a.g_nav {
	background-position: -410px -32px;
}

/* GALLERY */
#prm_nav #n-gallery .g_nav {
	width: 78px;
	background-position: -410px 0;
}
body#gallery #prm_nav #n-gallery .g_nav, #prm_nav #n-gallery .g_nav:hover {
	background-position: -410px -32px;
}
#prm_nav ul #n-gallery.sfHover a.g_nav {
	background-position: -410px -32px;
}



/* SEARCH CONTAINER
--------------------------------------------------------------------------------------------------- */
#search_container {
	position: absolute;
	top: 85px;
	right: 35px;
	background: url(../gfx/search_bg.png) no-repeat 0 0;
	width: 345px;
	height: 98px;
	padding: 10px 20px;
}
#search_container form {
	margin: 0;
	background: url(../gfx/search_subline.gif) no-repeat 0 50%;
	position: relative;
}
#search_container select {
	font: 12px Arial, Helvetica, sans-serif;
	color: #888;
	width: 160px;
	font-size: 13px;
	border: 1px solid #000;
	float: left;
}
#search_container .browse_field {
	padding: 0;
}
#search_container .search_field {
	padding: 25px 0 0 0;
}

#search_container .browse_field label {
	width: 125px;
	height: 25px;
	float: left;
	background: url(../gfx/search_browse-ttile.gif) no-repeat 0 0;
	text-indent: -999em;
	margin: 0 10px 0 0;
}

#search_container .search_field input {
	width: 232px;
	height: 24px;
	background: url(../gfx/search_field_bg.jpg) no-repeat 0 0;
	border: none;
	font: 15px Arial, Helvetica, sans-serif;
	padding: 5px 5px 0 30px; 
	margin: 0 2px 0 0;
}
#search_container .search_field #btn_search {
	width: 73px;
	height: 32px;
	text-indent: -999em;
	cursor: pointer;
	background: url(../gfx/search_btn.jpg) no-repeat 0 0;
	border: none;
}
#search_container .search_field #btn_search:hover {
	background-position: 0 -32px;
}


/* Utitlity Navigation
--------------------------------------------------------------------------------------------------- */
#utility_nav {
	position: absolute;
	top: 55px;
	right: 20px;
}
#utility_nav ul li {
	float: left;
}
#utility_nav ul li a {
	float: left;
	margin: 0 40px 0 0;
	background: url(../gfx/utility_arrow.gif) no-repeat 50% 0;
	padding: 10px 0 0 0;
}
#utility_nav ul li a:hover {
	text-decoration: underline;
	color: #000;
}
	

/* Mailbox Container
--------------------------------------------------------------------------------------------------- */
#mailbox_wrapper {
	display: none;
	width: 100%;
}
#inner_mailbox {
	width: 990px;
	height: 300px;
	margin: 0 auto;
	background: url(../gfx/strings.png) repeat-y 0 0;
} 
#inner_mailbox #mail_signup {
	width: 905px;
	margin: 0 auto;
	padding: 15px 0 0 0;
	position: relative;
}
#mail_signup .signup_header {
	width: 845px;
	height: 55px;
	background: url(../gfx/signup_header.png) no-repeat 0 0;
	text-align: right;
	font-weight: bold;
	font-size:12px;
	line-height: 48px;
	color: #fff;
 	padding: 0 30px 0 0;
	margin: 0 auto 40px auto;
}
#mail_signup .signup_header_thankyou {
	width: 841px;
	height: 55px;
	background: url(../gfx/signup_header_thankyou.png) no-repeat 0 0;
	text-align: right;
	font-weight: bold;
	font-size:12px;
	line-height: 48px;
	color: #fff;
 	padding: 0 30px 0 0;
	margin: 0 0 10px 0;
}
#mail_signup #mailnotice {
	width: 543px;
	height: 29px;
	text-indent: -999em;
	background: url(../gfx/mail_notice.png) no-repeat 0 0;
	position: absolute;
	top: 57px;
	right: 45px;
}

/* -- FORM -- */
#mailform .mail_field {
	height: 33px;
	float: left;
	border: none;	
}
#mailform label {	
	height: 33px;
	display: block;
	float: left;
	text-indent: -999em;
}
#mailform .fieldrow {
	margin: 0 0 20px 0;
}	
#mailform textarea, input, select {
	font: 12px Arial, Helvetica, sans-serif;
	color: #000;	
}

/* --- FIELD COLUMNS --- */
#mailform #fieldName, #mailform #fieldPhone {
	width: 418px;
	float: left;	
}
#mailform #fieldCategory, #mailform #fieldEmail {
	width: 466px;
	float: right;	
}
#mailform #fieldAdd {
	width: 318px;
	float: left;
	margin: 0 10px 0 0;
}
#mailform #fieldComments {
	width: 460px;
	float: left;
}

/* --- LABELS --- */
#mailform #fieldName label {
	width: 94px;
	background: url(../gfx/mail-label_name.png) no-repeat 0 50%;
}
#mailform #fieldPhone label {
	width: 94px;
	background: url(../gfx/mail-label_phone.png) no-repeat 0 50%;
}
#mailform #fieldCategory label {
	width: 170px;
	background: url(../gfx/mail-label_category.png) no-repeat 0 50%;
}
#mailform #fieldEmail label {
	width: 86px;
	background: url(../gfx/mail-label_email.png) no-repeat 0 50%;
}
#mailform #fieldAdd label {
	width: 94px;
	background: url(../gfx/mail-label_address.png) no-repeat 0 0;
}
#mailform #fieldComments label {
	width: 94px;
	background: url(../gfx/mail-label_comments.png) no-repeat 0 0;
}

/* --- FIELDS --- */
#mailform #fieldName .mail_field,#mailform #fieldPhone .mail_field {
	width: 304px;
	padding: 0 10px;
	background: url(../gfx/mail_leftcolumn_field.png) no-repeat 0 0; 
}
#mailform #fieldCategory #mail_categories {
	width: 296px;
	padding: 5px 10px;	
}
#mailform #fieldEmail .mail_field {
	width: 360px;
	padding: 0 10px;
	background: url(../gfx/mail_rightcolumn_field.png) no-repeat 0 0; 
}
#mailform #fieldAdd textarea {
	width: 201px;
	height: 72px;
	float: left;
	background: url(../gfx/mail_address_textbox.png) no-repeat 0 0;
	padding: 5px 10px;
	border: none;	
}

#mailform #fieldComments textarea {
	width: 344px;
	height: 76px;
	float: left;
	background: url(../gfx/mail_comments_box.png) no-repeat 0 0;
	padding: 5px 10px;
	border: none;	
}

/* --- SIGNUP BUTTON --- */
#mailform #btn_signup {
	width: 110px;
	height: 30px;
	display: block;
	border: none;
	cursor: pointer;
	text-indent: -999em;
	background: url(../gfx/btn_signup.png) no-repeat 0 0;
	position: absolute;
	bottom: 52px;
	right: 0;
}
#mailform #btn_signup:hover {
	background-position: 0 -30px;
}



/* FOOTER
--------------------------------------------------------------------------------------------------- */
#foot_wrapper {
	background: url(../gfx/foot-linebg.png) repeat-x 0 0;
	height: 45px;
	margin: 0 0 5px 0;
}
#footer {
	width: 990px;
	margin: 0 auto;
	height: 45px;
	position: relative;
	color: #C2C2C2;
}
#footer a {
	color: #fff;
}
#footer #copy {
	font-size: 9px;
	font-weight: bold;
	position: absolute;
	top: 13px;
	right: 0;
}
#footer #foot-nav {
	position: absolute;
	top: 13px;
	left: 0;
}
#footer #foot-nav li {
	float: left;
	margin: 0 35px 0 0;
}
#footer #foot-nav li a {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}


/* Helpers 
--------------------------------------------------------------------------------------------------- */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */