/* --------------------------------------

   Global Styling

-------------------------------------- */



body {

	background: #fff;

	color: #444;

	font: 0.75em/1.4em Arial, Verdana, Helvetica, sans-serif;

}



/* Headings */

h1, h2, h3, h4, h5 { font-weight: normal; }

h1 { font-size: 1.5em; line-height: 1em; }

h2 { font-size: 1.33em; line-height: 1em; }

h3 { font-size: 1.166em; line-height: 1em; }

h4 { font-size: 1em; line-height: 1em; }

h5 { font-size: 1em; line-height: 1em; font-weight: bold; }



/* Anchors */

a, a:visited { text-decoration: underline; color: #9875c6; }

a:hover { text-decoration: none; }

p a { z-index: 100; }





/* Base margin */

#content p, #content blockquote, #content ul, 

#content ol, #content h1, #content h2, 

#content h3, #content h4, #content h5 { margin-bottom: 1em; }





/* ULs, OLs & LIs */

#content ul li { list-style: disc; }



#content ol { margin-left: 2em; }

#content ol li { list-style: decimal; }



/* Other styles */

small { font-size: 80%; line-height: 150%; }

sup { font-size: 80%; height: 0; line-height: 1; position: relative; top: -0.6em; vertical-align: baseline !important; vertical-align: bottom; }



/* Classes */

.right { float: right; }

.left { float: left; }

.clear { clear: both; }

img.right { float: right; margin: 0 0 0 10px; }

img.left { float: left; margin: 0 10px 0 0; }

p img.right { float: right; margin: 0 0 10px 10px; z-index: 100; }

p img.left { float: left; margin: 0 10px 10px 0; z-index: 100;}

.last { margin-right: 0!important; }

.error { background-color: #d5a2a2; color: #fff; padding: 5px; border: 1px solid #c38e8e; }

.tleft { text-align: left; }

.tright { text-align: right; }

.tcenter { text-align: center; }

.nomargin { margin: 0!important; }

.noborder { border: none!important; }

p.large { font-size: 1.33em; margin-bottom: 2em!important; }

ul.large { font-size: 1.166em; }



/* --------------------------------------

   Center Wrap Section

-------------------------------------- */



#center {

	position: relative;

	width: 700px;

	margin: 0 auto;

}



/* --------------------------------------

   Header Section

-------------------------------------- */



#header {

	position: relative;

	height: 80px;

	margin-bottom: 20px;	

}



#logo, #logo a {

	position: relative;

	width: 208px;

	height: 47px;

	display: block;

	color: #c16800;

	font-size: 30px;	

}



#logo {

	top: 20px;

}



#logo span {

	background-image: url('../i/logo-crystalsoil.gif');

	background-position: left top;

}



/* --------------------------------------

   Container Template

-------------------------------------- */



#content {

	padding-bottom: 20px;

	min-height: 450px;

}



/** 2 Column Layout **/

.two-columns {

	clear: both;

	width: 700px;

}



.two-columns .left-column {

	width: 350px;

	float: left;

}



.two-columns .right-column {

	width: 340px;

	float: right;

}



/* --------------------------------------

   Content Styles

-------------------------------------- */

#content h1, #content h2, #content h3, #content h4 {

}



#content h1 {

	line-height: 1.2em;

	margin-bottom: 1em;

	font-size: 1.6em;

	font-weight: bold;

	color: #9875c6;

}



#content h2 {

}



#content h3 {

	margin-bottom: 0.5em;

	font-size: 1em;

	font-weight: bold;

	padding-top: 10px;

}



#content p {

}



#content img {

	margin-bottom: 1em;

}



#content ul, #content ol {



}



#content ul li, #content ol li {

	line-height: 1.2em;

	margin-bottom: 7px;

	display: block;

}



#content ul li {

	list-style: none;

	padding-left: 20px;

	margin-left: 10px;

	background: url('../i/bullet.gif') left 0.4em no-repeat;

}



/** homepage points **/

#content ul {

	width: 700px;

}



#content ul.hp-points li {

	float: left;

	width: 320px;

}



/** faq **/

#faq a {

}



/** how to use **/

.htu {

	float: left;

	width: 166px;

	margin: 0 10px 20px 0;

}



/** product **/

.product {

	padding: 10px;

	margin: 0 10px 1em 0;

	width: 320px;

	float: left;

}



.product .thumb {

	width: 90px;

	margin-right: 10px;

	float: left;

}



#content .product .thumb img {

	width: 90px;

	height: auto;

	margin-bottom: 5px;

}



.product .content {

	width: 220px;

	float: right;	

}



#content .product .content p:last-child {

	margin-bottom: 0;

}



#content .product .content h3 {

	padding-top: 0;

}



/** btn **/

a.btn {

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	background: #CEB8FF;

	color: #fff!important;

	padding: 2px 5px;

	text-decoration: none!important;

	font-size: 0.916em;

}



a.btn:hover {

	background-color: #9875c6;

}



/* --------------------------------------

   Main Navigation Section

-------------------------------------- */



/** Menu level 1 **/

#main-navigation {

	position: absolute;

	top: 36px;

	right: 0;

	width: 470px;

	height: 25px;

	z-index: 100;

	text-align: right;

}



#main-navigation ul { /** First level un-ordered list **/

}



#main-navigation ul li { /** First level un-ordered list items **/

	display: block;

	float: left;

	margin: 0 0 0 20px;

}



#main-navigation ul li a, #main-navigation ul li a:visited {  /** First level anchor static-state **/

	text-decoration: none;

	padding: 0;

	margin: 0;

	color: #000;

	display: inline-block;

}



#main-navigation ul li a:hover,

#main-navigation ul li:hover a,

#main-navigation ul li.hover a,

#main-navigation ul li a.active { /** First level anchor hover-state **/

	text-decoration: none;

	border-bottom: 2px solid #9875c6;

}



/* --------------------------------------

   Footer Section

-------------------------------------- */



#footer {

	width: 100%;

	height: 30px;

	background: #d09ce7 url('../i/bg-footer.gif') left top repeat-x;

	margin-bottom: 2em;

}



#footer-inner {

	width: 700px;

	height: 30px;

	margin: 0 auto;

}



#footer-navigation {

}



#footer #footer-navigation ul,

#footer #footer-sub-navigation ul {

	margin: 0;

	padding-top: 7px;

}



#footer #footer-navigation li,

#footer #footer-sub-navigation li {

	float: left;

	list-style: none;

	margin-right: 15px;

}



#footer #footer-navigation li a,

#footer #footer-navigation li a:visited,

#footer #footer-sub-navigation li a,

#footer #footer-sub-navigation li a:visited {

	text-decoration: none;

}



#footer #footer-navigation li a:hover,

#footer #footer-sub-navigation li a:hover {

	text-decoration: underline;

}



#footer #footer-navigation li {

	font-size: 0.916em;

	color: #fff;

}



#footer #footer-navigation li a,

#footer #footer-navigation li a:visited {

	color: #fff;

}



#footer #footer-sub-navigation {

	margin-bottom: 10px;

	float: left;

}



#footer #footer-sub-navigation li {

	font-size: 0.833em;

}



#footer #footer-sub-navigation li a,

#footer #footer-sub-navigation li a:visited {

	color: #888;

}



/** tradmark paragraph **/

p.trademark {

	font-size: 0.916em;

	color: #9875c6;

	width: 700px;

	margin: 0 auto;

	line-height: 1.4em;

	margin-bottom: 20px;

}



/* --------------------------------------

   Cart

-------------------------------------- */



.buy-product {

	float: left;

	width: 240px;

	margin: 0 40px 20px 0;

	padding-top: 20px;

}



.atc-btn {

	font-size: 0;

	width: 87px;

	height: 25px;

	border: none;

	background: url('../i/btn-addtocart.gif') left top no-repeat;

	cursor: pointer;

	color: #fff;

	text-indent: 1000px;

}



.atc-btn:hover {

	background-position: left bottom;

}



/* --------------------------------------

   Form Styles

-------------------------------------- */



.form {

	width: 480px;

	padding-top: 20px;

}

.form-item {

	padding: 5px 0;

	margin-bottom: 5px;

	display: block;

}



.form-item label {

    display: inline-block;

	clear: both;

	margin-bottom: 0.2em;

}

.form-item select span {

    font-size: 0.916em;

}



.text input {

    width: 215px;

	padding: 3px;

	display: block;

	border: 1px solid #eec8fe;

}



.text input:focus {

	border: 1px solid #9875c6;

}



#large-colour-chooser .text,

#small-colour-chooser .text {

	display: none;

}



#large-colour-chooser .text input,

#small-colour-chooser .text input {

	width: 20px;

	display: inline;

	text-align: center;

}



#large-colour-chooser .text label,

#small-colour-chooser .text label {

	width: 162px;

}



#large-colours,

#small-colours {

	width: 162px;

}



.text .minus,

.text .plus {

	text-decoration: none;

	padding: 2px 5px;

	font-weight: bold;

	font-size: 18px;

}



.form-item textarea {

    width: 468px;

	height: 100px;

	padding: 3px;

	display: block;

	font-size: 1.2em;

	border: 1px solid #eec8fe;

	font-family: Arial, Verdana, Helvetica, sans-serif;

}



.form-item textarea:focus {

	border: 1px solid #9875c6;

}



.select select {

    width: 225px;

	padding: 3px;

	display: block;

	border: 1px solid #eec8fe;

}



.select select:focus {

	border: 1px solid #9875c6;

}



.submit #submit {

	font-size: 0;

	width: 87px;

	height: 25px;

	border: none;

	background: url('../i/btn-submit.gif') left top no-repeat;

	cursor: pointer;

	color: #fff;

	text-indent: 1000px;

}



.submit #submit:hover {

	background-position: left bottom;

}