/*
	Name: Soulizen Connected Creations
	Date: April 2010
	Website http://www.soulizen.com
*/

/* -----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	1.	Global reset and site defaults
	    - Headings
		- Common Formatting
		- Links
	2. Main Structure
		- Header
		- Member Area
		- Seach
		- News
		- Footer
	3. Navigation
	    - Main Nav
	    - Product - Side Nav
	4. Content
		- Body Content 
		- Banner
		- Left Panel
		- Right Panel
		- Products Details
		- Product View all
	5. Form Elements
	6. Picture Arrangement

/* ------------------------------------------------------------
   1. Global reset and site defaults
---------------------------------------------------------------*/
/* CSS Document */
@import url("table.css");

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, address, img {
	margin:0;
	padding:0;
	font-family: "Arial", Calibri, Tahoma, sans-serif;
}

html {
	min-height: 100%;
}


body {
	margin:0;
	font-size: 100%;
	color:#000000;
	line-height: 1.5em;
	background:url(../i/bg.gif) left bottom repeat-x;
	min-height: 100%;
}


div, object, embed {
	outline:none;
}
/* Headings
---------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial", Calibri, Tahoma, sans-serif;
}
h1 {
	font:normal 280% "Arial";
	text-align:left;
	width:337px;
	padding:0 0 1px 0;
}

h2 {
	font:normal 150% "Arial";
	text-align:left;
	width:337px;
	padding:0 0 10px 0;
}
h3 {
	font:normal 160% "Arial";
	text-align:left;
	width:337px;
	border-top:1px solid #e1e1e1;
	padding:10px 0 5px 0;
}
h4 {
	font:normal 160% "Arial";
	line-height:1.5em;
}
h5 {
	/* Define your style*/
}
h6 {
	/* Define your style*/
}
/* Common Formatting
---------------------------------------------------------------*/
p {
	margin:0;
}
fieldset, img {
	border:0;
}

sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
.right {
	float:right;
}
.left {
	float:left;
}

#clearfloat {
	clear:both;
}

#row{
	width:100%;
	float:left;
}


hr.greyline{
	color:#e1e1e1;
	width:100%;
	margin:15px 0;
}


/* Indicate
---------------------------------------------------------------*/
#indicate{
	width:100%;
	float:left;
	color:#737373;
	font:normal 70% "Arial";
}



#indicate a{
	color:#737373;
	margin: 0 3px ;
}

.txt-indicate{
	color:#f96a0b;
	margin:0 0  0 3px;
}


/* Links
---------------------------------------------------------------*/  
a:link, a:visited {
	text-decoration:none;
	color:#272323;
}
a:hover {
	text-decoration: underline;
}

a.btn-red{
	color:#ff0000!important;
}

.txt-orange{
	color:#ff7200!important;
	font:bold 120% "Arial";
	margin:0 0 5px 0;
}

.orange{
	color:#ff7200!important;
}

.text-grey{
	color:#999999!important;
}



/* ------------------------------------------------------------
   2. Structure
---------------------------------------------------------------*/
/* Container*/

#container {
	width:960px;
	margin: 0px auto;
}
/* Header*/
#header {
	width:960px;
	float:left;
	border-bottom:1px solid #e1e1e1;
	padding:0 0 16px 0;
	
}
.logo {
	width:291px;
	float:left;
	padding:29px 0 0 0;
}
.logo h1 {
	width:291px;
	color:#706c6c;
	font:bold 6pt "Arial";
	text-align: center;
	padding:5px 0 0 0;
	border:none;
}

#ico{
	width:16px;
	float:right;
	padding:17px 0 0 8px;
}

/* Member Area */

#member-area{
	width:600px;
	float:right;
	text-align:right;
	padding:13px 0 0 0;
	font:normal 75% "Arial";
}

#member-area span{
	padding:0 15px 0 0;
}

a.btn-cart{
	font:bold 140% "Arial"!important;
	text-transform:uppercase;
}

a:hover.btn-cart{
	color:#ff0000;
	text-decoration:none;
}

/* Search */
#search{
	width:650px;
	float:right;
	text-align:right;
	padding:16px 0 0 0;	
	}
	
.input-search{
	border:1px solid #dce1e4;
	background:#ffffff;
	width:160px;
	padding:2px ;
	font:normal 75% "Arial";
	color:#5c6a72;
}

/* News*/
#news{
	width:950px;
	float:left;
	padding:8px 5px 20px 5px;
	font:normal 70% "Arial";
}


/* Footer*/
#footer, #quick-links {
	width:960px;
	float:left;
	color:#999999;
	font:normal 60% "Arial";
	line-height:1.6em;
	border-top:1px solid #e1e1e1;
	margin:5px 0 30px 0;
}
#footer a {
	color:#706c6c;
	text-decoration: none;
}
#footer a:hover {
	color:#706c6c!important;
	text-decoration: underline;
}
#quick-links {
	margin:20px 0 0 0;
}
#quick-links h3 {
	color:#706c6c;
	font:bold 100% "Arial Black", "Arial";
	padding:0;
	border:none;
}
#quick-links li {
  list-style:none;
  float:left; 
  width:185px;
  margin:10px 10px;
}
#quick-links li ul li {
  list-style:none;
  float:none; 
  margin:0;
}
#quick-links li ul li a {
  padding-left:0px;
  text-decoration:none;
  color:#706c6c;
}
#quick-links li ul li a:hover {
	color:#706c6c!important;
	text-decoration:underline;
}

#newsletter{
	width:350px;
	float:left;
	color:#231f20;
	padding:15px 0 0 0;
}

.input-newsletter {
	border:1px solid #dce1e4;
	background:#ffffff;
	width:160px;
	padding:3px 2px;
	margin:0 7px;
	font:normal 100% "Arial";
	color:#5c6a72;
}


#foot{
	width:575px;
	float:right;
	text-align:right;
	padding:10px 0 0 0;
}
#foot h3 {
	width:575px;
	float:right;
	text-align:right;
	color:#706c6c;
	font:normal 100% "Arial";
	padding:0;
	border:none;
}
/* ------------------------------------------------------------
   4. Navigation
---------------------------------------------------------------*/
#nav-wrapper{
	width:100%;
	background:#000000;
	height:35px;
}

#nav-wrapper .nav-container{
	width:960px;
	margin: 0px auto;
	position:relative;
}

#nav-sites{
  width:300px;
  float:left;
  color:#e5e5e5;
  font:normal 75% "Arial";
  padding-top: 10px;
}

#nav-sites a, a:hover{
	color:#e5e5e5;
	text-decoration: underline;
}

#nav{
	width:405px;
	float:right;
}

#nav li{
	display:inline;
	float:left;
}

a.btn-home { display: block; width: 66px; height: 35px;background: url("../i/btn-home.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-home { background: url("../i/btn-home1.gif") ;}

a.btn-about { display: block; width: 90px; height: 35px;background: url("../i/btn-about.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-about { background: url("../i/btn-about1.gif") ;}

a.btn-product { display: block; width: 91px; height: 35px;background: url("../i/btn-product.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-product { background: url("../i/btn-product1.gif") ;}

a.btn-faq { display: block; width: 56px; height: 35px;background: url("../i/btn-faq.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-faq { background: url("../i/btn-faq1.gif");}

a.btn-contact { display: block; width: 102px; height: 35px;background: url("../i/btn-contact.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-contact { background: url("../i/btn-contact1.gif") ;}


/* sidenav for product page
------------------------------------ */
#sidenav {
	width:153px;
	float:left;
	padding:13px 0 0 10px;
}
#sidenav ul {
	list-style:none;
	padding:0 0 0 0;
}
#sidenav li {
	list-style:none;
	padding:9px 0 9px 4px;
	border-bottom:1px solid #e1e1e1;
	font:normal 75% "Arial";
}
#sidenav li a {
	color:#000000;
	display:block;
}
#sidenav li a:hover {
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}
#sidenav li a:focus {
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}
#sidenav li a.selected {
	color:#000000;
	font-weight:bold;
}
#sidenav li a.current {
	color:#000000;
	font-weight:bold;
}
#sidenav li a.lv1 {
	color:#000000;
}
#sidenav li a:hover.lv1 {
	color:#000000 !important;
}
#sidenav li a.lv0 {
	color:#000000;
}
#sidenav li a.selected {
	color:#000000 !important;
}
#sidenav li a.perm {
	color:#000000!important;
	font-weight:bold!important;
}
#sidenav li a:hover.lv0 {
	color:#000000!important;
	font-weight:bold!important;
}
#sidenav .submenu {
	margin:0;
	padding:10px 0 0 0;
}
#sidenav .submenu div{
	padding:0 0 10px 16px;
	font:normal 90% "Arial";
}

#sidenav .submenu div a{
	color:#959595;
}

#sidenav .submenu div a:hover{
	color:#ff0000;
}

.grey-comingsoon{
	color:#d3d3d3!important;
}
/* ------------------------------------------------------------
   5. Content
---------------------------------------------------------------*/

/* Body Content */

/* Banner  */
#banner{
	width:960px;
	float:left;
}

/* Index Small Banner */

#index-sb{
	width:304px;
	float:left;
	margin:25px 0 0  0;
}

/* Inner Page Content */
#content{
	width:960px;
	float:left;
}

/* Left Panel */
#left-panel{
	width:158px;
	float:left;
	padding:0 0 0 5px;
}


#title{
	font:normal 200% "Arial";
	width:153px;
	float:left;
}

#title2{
	font:normal 190% "Arial";
	width:153px;
	float:left;
}

/* Right Panel */
#right-panel{
	width:762px;
	float:left;
	margin: 0 0 0 35px;
}

.top-23px{
	padding:23px 0 0 0;
}

.bg-grey{
	background:url(../i/bg-grey-top.gif) left top no-repeat #f3f5f6;
}

/* Content Bodytext */

#bodytext{
		padding:20px 4%;
		font:normal 75% "Arial";
		line-height:1.5em;
}

/* Grey box bottom */
#right-panel-bottom{
	width:762px;
	float:right;
}

/* Product Page */

#product{
	width:762px;
	float:left;
}

#product-img{
	width:400px;
	float:left;
	text-align:center;
}

.large-img{
	width:400px;
	float:left;
	margin:0 0 10px 0;
}

.thumb{
	width:400px;
	padding:10px 0 0 0;
}

.thumb div{
	border:1px solid #dedede;
	float:left;
	margin:5px 10px 0 0;
	padding:1px;
}

#product-des{
	width:337px;
	float:left;
	padding:0 0 0 25px;
	font:normal 70% "Arial";
}

#product-des ul{
	padding: 3px 0 10px 15px;
	list-style:disc;
}

#product-des ul li{
	padding:3px 0;
}

#product-des h3{
	font:normal 160% "Arial";
	text-align:left;
	width:337px;
	border-top:1px solid #e1e1e1;
	padding:10px 0 5px 0;
}

.select-quatity{
		border:1px solid #dfdfdf;
	margin:8px 0 18px 0;
	font-size:120%;

}


#product-related{
	width:762px;
	float:left;
	margin:20px 0 0 0;
	background: url("../i/grey_box.gif") no-repeat top left;
	padding: 0 15px;
	height: 161px;
}

#product-related div.greybox-l{
	float:left;
	width:14px;
}

#product-related div.greybox-r{
	float:right;
	width:14px;
}

#product-related div.greyarrow{
	float:left;
	width:15px;
	margin:50px 0 0 0;
	border:none!important;
	background:none!important;
}


.product-related-listing{
	float:left;
	width:762px;
	padding:17px 0;
}

.product-related-listing div{
	float:left;
	width:115px;
	padding:1px;
	border:1px solid #dedede;
	margin:0 9px;
	background:#ffffff;
}

/* Product Page -View All*/
#product-listing{
	width:762px;
	float:left;	
}

.sep-line{
	border-top:1px solid #e1e1e1;
	padding:15px 0 0 0;
	margin:20px 0 0 0;
}

#product-listing h1{
	font:normal 190% "Arial";
	text-align:left;
	padding:0 0 12px 0;
}

#product-listing h2{
	font:normal 100% "Arial";
	text-align:left;
	padding:20px 0 10px 0;
}

#product-listing  div{
	float:left;
	width:115px;
	padding:1px;
	border:1px solid #dedede;
	background:#ffffff;
	text-align:center;
	margin:0 6px 10px 0;

}

.nomargin-r{
	margin:0 0 10px 0!important;
}

#product-listing  div a{
	text-decoration:none;
	cursor:hand;
}

#product-listing  div p{
	float:left;
	width:115px;
	padding:0 0 5px 0;

}

#product-listing  h3{
	float:left;
	width:115px;
	font:bold 75% "Arial";
	text-align:left;
	padding:0 0 8px 0;
	text-transform:uppercase;
	color:#ff7200;
	border:none;
	text-align:center;
	height:30px;
}

#product-listing  h4{
	float:left;
	width:115px;
	font:normal 75% "Arial";
	text-align:left;
	padding:0 0 8px 0;
	border:none;
	text-align:center;
}

ul.sitemap{
	list-style:none;
	margin:25px 0 0 0;
}

ul.sitemap li{
	width:119px;
	background:url(../i/sitemap-grey.gif) left top no-repeat;
	color:#ffffff;
	padding:0 0 0 30px;
	font-size:75%;
	margin:10px 0;
}

ul.sitemap li a{
	color:#ffffff!important;
}

ul.sitemap-list{
	list-style:none;
	margin:0 0 0 45px;
}

ul.sitemap-list li{
	background:url(../i/sitemap-grey2.gif) left top no-repeat!important;
	font-size:100%!important;
	margin:2px 0!important;
}

ul.sitemap-list li a{
	color:#333333!important;
}

ul.sitemap-list-2{
	list-style:none;
	margin:0 0 0 45px;
}

ul.sitemap-list-2 li{
/*	background:url(../i/sitemap-grey2.gif) left top no-repeat!important; */
  width:570px;
  background: none;
  border:1px solid #333333; 
  color:#333333;
	font-size:100%!important;
	margin:2px 0!important;
	padding:5px 30px 5px 30px;
	line-height: 1.1em;
}

ul.sitemap-list-2 li a{
	color:#333333!important;
}

ul.sitemap-list-2 li h3{
  width:570px;
	color:#333333;
	font:bold 100% "Arial";
	padding:0;
	border:none;
}
/* ------------------------------------------------------------
   5. Form Elements
---------------------------------------------------------------*/
.required-field{
	font:normal 75% "Arial";
	padding:25px 0 0 0;	
}


#form {
	float:left;
	width:100%;
}

.form-space{
	padding:20px 4%;
	width:92%!important;
}

#form label {
	display: block;
	float: left;
}
#form p.row {
	width:100%;
	float:left;
	margin:5px 0;
}
#form p.row-sub {
	float:left;
	margin:0 0 10px 0;
	width:100%;

}
#form p.row2 {
	width:50%;
	float:left;
	margin:5px 0;
	
}

#form p.row-line {
	width:99%;
	float:left;
	margin:8px 0;
	border-top:1px solid #e1e1e1;
	height:1px;
}


#form label {
	width: 140px;
}

.textarea {
	width:190px;
	border:1px solid #e1e1e1;
	background:#ffffff;
	height:78px;
}

.input {
	border:1px solid #e1e1e1;
	height:18px;
	width: 190px;
}

.select {
	border:1px solid #e1e1e1;
	background:#ffffff;
}

.txt-red2 {
	color:#ff0600;
	font:bold 7pt "tahoma";
}
input.required {
	border:1px solid #e6e6e6;
	height:15px;
	font:normal 8pt "Arial";
	width: 180px;
}

input.required, textarea.required {
	border: 1px solid #d9d9d9;
}
input.validation-failed, textarea.validation-failed {
	border: 1px solid #ff7f00;
	color : #FF3300;
}
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000;
}
.validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #ff7f00;
	color : #FFF;
	font-weight: bold;
	text-align:center;
}


.input-quatity {
	border:1px solid #e1e1e1;
	height:18px;
	width: 50px;
}

/* ------------------------------------------------------------
   6. Picture Arrangement
---------------------------------------------------------------*/
.tb-10px{
	margin:20px 0 15px 0;	
}
.left-5px {
	margin:0 0 0 5px;
}

.left-10px {
	margin:0 0 0 10px;
}

.top-5px {
	margin:5px 0 0 0;
}

.right-24px {
	padding:0 24px 0 0;
}


.bottom-20px {
	padding:0 0 20px 0;
}

.bottom-top-26px{
 	padding:23px 0 20px 0;
}

input.image {
	position:absolute;
	margin-top: 5px;
}

.red { color: #ff0000; }

.strikethrough {text-decoration: line-through;}