/*

[ CSS Document ]

	Style Sheet Name: style.css
	Website: Biobag
	Version: 1.0
	Date: 9/06/10

[ Table Of Contents ]

	0- Reset
	1- Global
	2- Headings
	3- Header
	4- Navigation
	5- Main Content Elements
	6- Main Content
	7- Extras
	8- Forms
	9- Footer

[ Colour Reference Guide ]

	Black: #000000
	White: #ffffff - (Used for...)
	Etc...

*/ 


/* ----------------------------------------------------------------
   =0 Reset 
------------------------------------------------------------------- */

/* Universal - reset browser default styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 		0;
	padding: 		0;
	border: 		0;
	outline: 		0;
	font-size: 		100%;
	/*vertical-align: baseline;*/
	background: 	transparent;
}
body {
	line-height: 	1;
}
ol, ul {
	list-style: 	none;
}
blockquote, q {
	quotes: 		none;
	font-style:		italic;
}
:focus {
	outline: 		0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* Tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ----------------------------------------------------------------
   =1 Global 
------------------------------------------------------------------- */

/* General style applied to HTML */
html {
	text-align: 	left;
	padding: 		0;
	margin: 		0;
	border: 		0;
	font-family: 	Arial, Helvetica, sans-serif;
	width: 			100%;
}
/*	
	background: #fff url(../images/bg-main.jpg) top center repeat;
	background: url(../images/bg-top.jpg) top center repeat-x;
*/

/* Body style */
body {
	clear: 			both;
	line-height: 	1;
	vertical-align: top;
	background: 	#e7eee6 url(../images/bg-top.jpg) top center repeat-x;
	color: 			#000;
	padding: 		0;
	margin: 		0 auto;
	text-align: 	left;
}
/* Preset global styles */
.right {
	float: 			right;
}
.left {
	float: 			left;
}
.align-left {
	text-align: 	left;
}
.align-right {
	text-align: 	right;
}
.align-center {
	text-align:		center;
}
.justify {
	text-align:		justify;
}
.hide {
	display: 		none;
}
.clear {
	clear: 			both;
}
.bold {
	font-weight:	bold;
}
.italic {
	font-style:		italic;
}
img.centered {
	display: 		block;
	margin-left: 	auto;
	margin-right: 	auto;
}
img.alignleft {
	float: 			left;
	margin: 		4px 10px 4px 0px;
}
img.alignright {
	float: 			right;
	margin: 		4px 0px 4px 10px;
}
.spacer {
	display: 		block;
	clear: 			both;
	visibility: 	hidden;
	line-height: 	0;
	height: 		0;
}
/* ----------------------------------------------------------------
   =2 Headings
------------------------------------------------------------------- */  

/* General headings */
h1 {
	font-size: 		24px;
	color: 			#008544;
	margin:  		0px 0px 0px 0px;
	padding: 		10px 0px 20px 0px;
	font-weight: 	normal;
	font-family: 	Trebuchet MS, Helvetica, Arial, sans-serif;
	/*border-top: 1px solid #e5eae3;*/
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
}
h2, h3, h4, h5, h6 {
	color: 			#000;
	font-weight: 	bold;
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
	font-family: 	Trebuchet MS, Helvetica, Arial, sans-serif;
}
h2 {
	font-size: 		16px;
	margin: 		0 0 6px 0;
}
h3 {
	font-size: 		14px;
	margin: 		0 0 6px 0;
}
h4 {
	font-size: 		12px;
	margin: 		0 0 6px 0;
}
h5 {
	font-size: 		11px;
	margin: 		0 0 6px 0;
}
h6 {
	font-size: 		10px;
	margin: 		0 0 6px 0;
}
/* ----------------------------------------------------------------
   =3 Header
------------------------------------------------------------------- */ 

/* Header section style */
#header {
	position: 		relative;

}
/* ----------------------------------------------------------------
   =4 Navigation
------------------------------------------------------------------- */ 

/* Main Navigation - Horizontal style */
#content ul#mainNav {
	position: 		absolute;
	top: 			-1px;
	right: 			0px;
	margin:  		0px 0px 0px 0px;
	padding: 		0px 0px 0px 50px;
	width:   		380px;
	height: 		27px;
	background: 	#000 url(../images/nav.jpg) top left no-repeat;
	list-style-type: none;
}
#mainNav li {
	display: 		inline;
	float: 			left;
	font-size: 		11px;
	margin: 		0px 0px 0px 0px;
	text-transform:	uppercase;
	
}
#mainNav li a {
	display: 		block;
	padding: 		4px 15px 4px 15px;
}
#mainNav li a:link, #mainNav li a:visited {
	text-decoration: none;
	color:			#f3ca00;
}
#mainNav li a:hover {
	color:			#fff;
	text-decoration: none;
}
/* Side Navigation - Vertical style */
#content #sideContent ul#sideNav {
	margin:  		105px 0px 20px 0px;
	padding: 		0px 0px 0px 0px;
	list-style-type: none;
}
#content #sideContent ul#sideNav li {
	text-transform:	uppercase;
	font-size: 		11px;
	font-weight: 	bold;
	border-bottom: 	1px solid #f2f8de;
}
#content #sideContent ul#sideNav li a {
	display: 		block;
	margin:  		0px 0px 0px 0px;
	padding: 		4px 0px 4px 15px;
	border-bottom: 	1px solid #fff;
}
#content #sideContent ul#sideNav li a:link, #content #sideContent ul#sideNav li a:visited {
	color: 			#646867;
}
#content #sideContent ul#sideNav li a:hover {
	color: 			#068b4c;
}

/* Side Navigation - Second Level */
#content #sideContent ul#sideNav li ul {
	margin:  		0px 0px 0px 0px;
	padding: 		0px 0px 0px 0px;
	list-style-type: none;
	border-bottom: 	1px solid #fff;
	border-top: 	1px solid #f2f8de;
}

#content #sideContent ul#sideNav li li {
	text-transform: capitalize;
	font-size: 		11px;
	font-weight: 	normal;
	border: 		none;
	
}

#content #sideContent ul#sideNav li li a {
	display: 		block;
	margin:  		0px 0px 0px 0px;
	padding: 		4px 0px 4px 30px;
	border: 		none;
	background: 	url(../images/arrow.jpg) center left no-repeat;
}

/* ----------------------------------------------------------------
   =5 Main Content Elements
------------------------------------------------------------------- */ 

/* General paragraph style */
p, span, div {
	color: 			#42403a;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
	line-height: 	21px;
	/*margin: 		0px 0px 0px 0px;
	padding: 		0px 0px 18px 0px;*/
}

td, ul, ol, li {
	color: 			#42403a;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
}

blockquote {
	font-style:		italic;
	quotes: 		none;
}
/* General list styles  */
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
ul, ol {
	line-height: 	16px;
	margin: 		0px 0px 0px 20px;
	padding: 		0px 0px 18px 0px;
}

.dkgreen, #dkgreen {
	color: 			#008544;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
	line-height: 	21px;
}

/*
#content ul {
	list-style-type: disc;
}
#content ol {
	list-style-type: decimal;
}
#content ul, #content ol {
	color: 			#42403a;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
	line-height: 	16px;
	margin: 		0px 0px 0px 20px;
	padding: 		0px 0px 18px 0px;
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
}
*/
/* General link styles  */
#content a:link, #content a:visited {
	color:			#7ca303;
	text-decoration: none;
}
#content a:hover {
	color:			#0056ca;
	text-decoration: none;
}
/* ----------------------------------------------------------------
   =6 Main Content 
------------------------------------------------------------------- */ 

/* Sitewide Content --------------------- */

/* Content wrappers */
#container {
	clear: 			both;
	margin: 		5px auto 0px;
	text-align: 	left;
	width: 			980px;
}
#content {
	border: 		1px solid #d1d4bf;
	border-top: 	none;
	float: 			left;
	margin:  		0px 0px 0px 0px;
	padding: 		0px 0px 0px 0px;
	width: 			980px;
	background: 	#fff url(../images/bg-main.jpg) top left repeat-y;
	position: 		relative;
}
/* ------- Main Content ------- */
#mainContent {
	float: 			right;
	margin:  		80px 65px 160px 0px;
	padding: 		0px 0px 0px 0px;
	width: 			652px;
	color: 			#42403a;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
}
#contentTools {
	position: relative;
	border-bottom: 1px solid #e5eae3;
}
#breadcrumbs {
    text-align: 			right;
	font-size: 		12px;
	color: 			#a6a59f;
	margin:  		0px 0px 0px 0px;
	padding: 		0px 0px 5px 0px;
}
#content #breadcrumbs a:link, #content #breadcrumbs a:visited {
	color:			#999999;
	padding: 		0px 5px 0px 5px;
}
#content #breadcrumbs a:hover {
	color:			#7ca303;
}

.imageRight{
float: left;
width: 652px;
}
.imageRight .right{
	margin:  		0px 0px 0px 20px;
	padding: 		0px 0px 0px 0px;
}
.imageLeft{
float: left;
width: 652px;
}
.imageLeft .left{
	margin:  		0px 20px 0px 0px;
	padding: 		0px 0px 0px 0px;
}
/* Homepage Feature (top Section) */
#feature {
	color: 			#817b6e;
	width: 			442px;
	height: 		175px;
	margin:  		0px 0px 40px 0px;
	padding: 		30px 180px 0px 30px;
	background: 	url(../images/feature.jpg) top left no-repeat;
}
#feature h1 {
	margin:  		0px 0px 0px 0px;
	padding: 		0px 0px 20px 0px;
	border-top: 	none;
}
#feature p {
	color: 			#817b6e;
	line-height: 	24px;
	font-size: 		14px;
}



/* ------- Side Content ------- */
#sideContent {
	background: 	url(../images/bg-side.jpg) top left no-repeat;
	float: 			left;
	margin:  		0px 0px 0px 0px;
	padding: 		15px 1px 0px 0px;
	width: 			194px;
}
#logo {
	margin:  		0px 0px 0px 40px;
	padding: 		0px 0px 0px 0px;
}
#quote {
	margin:  		0px 0px 0px 15px;
	padding: 		0px 0px 0px 0px;
}
#sideContent h4 {
	margin:  		20px 0px 10px 15px;
	padding: 		0px 0px 0px 0px;
	color: 			#646867;
	font-size: 		12px;
	font-weight: 	bold;
}

#sideContent .module {
}
/* (Specific section/page) Content --------------------- */




/* ----------------------------------------------------------------
   =7 Extras
------------------------------------------------------------------- */ 

/* Image styles  */

/* Fader style - used for jQuery Innerfade  */

/* Other jQuery styles */

/* Google Map style */

/* Video style */

/* Share This style */

.sharethis {
	text-align: 	right;
	margin-top: 10px;
}

/* ----------------------------------------------------------------
   =8 Forms
------------------------------------------------------------------- */ 

/* Form elements - general */

/* Form elements - class "Form"  */
#content ul.form {
	list-style-type: none;
	margin: 		0;
	padding: 		0;
}
ul.form li {
	margin: 		5px 0 5px 15px;
	position: 		relative;
	font-size: 		11px;
}
ul.form li label {
	text-align: 	left;
	width: 			140px;
	padding: 		2px 15px 0 0;
	font-size: 		11px;
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
}
ul.form li label.error {
	color:			#eb856a;
}
ul.form li input {
	padding: 		2px;
	margin:  		0px 0px 0px 0px;
}
ul.form li textarea {
	padding: 		2px;
}
ul.form li select {
	padding: 		2px;
	outline: 		hidden;
}
ul.form li select option {
	padding-right: 	10px;
	padding-left: 	2px;
	outline: 		hidden;
}
ul.form li #btnSubmit {
	padding: 		2px 20px;
	margin: 		5px 0 20px 0px;
}
#postalDetails {
	background-color:#f6f6f4;
	padding: 		2px 0;
}

ul.form li .legend {
	display: 		block;
	float: 			left;
	text-align: 	right;
	width: 			140px;
	padding: 		2px 15px 0 0;
	font-size: 		11px;
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
}
#content ul.form li ul.radioGroup {
	list-style-type: none;
	margin: 		0 0 -15px 0;
	padding: 		0;
	float: 			none;
	position: 		relative;
	top: -21px;
	left: 155px;
}
#content ul.form li ul.radioGroup li {
	margin: 		2px 0;
	position: 		relative;
	font-size: 		11px;
	
}
#content ul.form li ul.radioGroup li label {
	float: 			none;
	text-align: 	left;
	padding: 		0px 0px 0px 0;
	font-size: 		11px;
	text-shadow:	0 1px 1px rgba(64, 64, 64, 0.13);
	position: 		relative;
	top: -3px;
}
 
/* 
----------------------------------------------------------------
   =9 Footer
------------------------------------------------------------------- 
*/  

/* Footer */
#footerWrap {
	clear: 			both;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 			785px;
	height: 130px;
	background: 	#fff url(../images/foot.jpg) top center repeat-x;
}
#footer {
	clear:			both;
	margin: 		0px auto;
	text-align: 	left;
}
#compostable {
	float: right;
	margin:  		15px 15px 0px 15px;
	padding: 		0px 0px 0px 0px;
}
#footer p {
	color:			#000;
	font-size: 		12px;
	line-height: 	18px;
}
#footer p#footContact {
	float: left;
	margin:  		15px 0px 0px 15px;
	padding: 		0px 0px 0px 0px;
}
#footer p#footContact #phone{
	font-size: 		24px;
	font-style:italic;
}
#footer p#tagline {
	float: right;
	margin:  		20px 0px 0px 15px;
	padding: 		0px 0px 0px 0px;
	color: #848a90;
}



#pixellounge a, #pixellounge a:link, #pixellounge a:visited {
	font-size: 12px;
	text-decoration: none;
	color:			#848a90;
}

#pixellounge a:hover {
	text-decoration: underline;
	color:			#848a90;
}