/**********************************************************************************************

	Title: Mariposa Gardening
	Author: XHTMLized
	Date: February 2008 

***********************************************************************************************

	1.  GENERAL
			1.1 Headings and paragraphs
			1.2 Forms
			1.3 Links
			1.4 Miscellaneous
		
	2. GENERAL ELEMEMENTS
	
	3. LAYOUT
			3.1 Accessibility links
			3.2 Masthead
			3.3 Content
			3.4 Secondary content
			3.6 Footer
		
	4. LAYOUT ELEMENTS

***********************************************************************************************/


/* 1. GENERAL
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* Global reset */
	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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
	
	body {
		line-height: 1; }	
		
	ol, ul {
		list-style: none; }
		
	table {
		border-collapse: separate; 
		border-spacing: 0;  
	}
	
	caption, th, td {
		text-align: left; 
		font-weight: normal;
	}
	
	body {
		background: #97b780 url(../images/bg_body.gif) repeat-x;
		color: #532818;
		font: 62.5% Arial, Helvetica, sans-serif;
		text-align: center;
	}
	
		
/* 1.1	Headings and paragraphs
-----------------------------------------------------------------------------------------------*/	
	
	h1, h2 {
		margin: 0 0 .8em 0;
		font-weight: bold;
		font-size: 1.4em;
	}
	
	h2 {
		color: #532818;
	}
	
	h2 a:hover,
	h2 a:active {
		text-decoration: none;
	}
		
  #sidebar h2,
	#secondary-content h2 {
		color: #ff6600;
	}	
	
	h1 {
		color: #d32c27;
		text-decoration: none;
	}
	
	#content p,
	#content li,
	.content-container p,
	.content-container li {
		line-height: 1.6em;
	}
	
	p {
		margin: 0 0 1.2em 0;
	}
	
/* 1.2	Forms
-----------------------------------------------------------------------------------------------*/	

	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}


/* 1.3	Links
-----------------------------------------------------------------------------------------------*/	

	a {
		color: #532818;
		text-decoration: none;
	}
	
	
	a:hover, 
	a:active {
		color: #532818;
		text-decoration: underline;
	}
	


/* 1.4	Miscellaneous
-----------------------------------------------------------------------------------------------*/	

	hr { 
		display: none; }
			
	strong {
		font-weight: bold; }
			
	em {
		font-style: italic; }

	u {
		text-decoration: underline;
	}
			
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}

	ul, ol {
		margin: 0 0 1.2em 0;
	}
	


/* 2. GENERAL ELEMENTS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.hide {
		position: absolute;
		left: -9999px;
	}
	
	.clear {
		clear: both;
		font-size: 0;
		height: 0;
		line-height: 0;
		overflow: hidden;
	}
	

/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.container {
		width: 770px;
		position: relative;
		margin: 0 auto;
		text-align: left;
		font-size: 1.2em;
	}
	
	.content-container {
		width: 770px;
		overflow: hidden;
		background-color: #fff;
	}
	
	#masthead {
		padding: 6px 0 8px 22px;
		background-color: #fff;
		border-bottom: 6px solid #532818;
	}
	
	#navigation {
		width: 740px;
		margin: 0;
		padding: 0 30px 0 0;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: 80px;
		z-index: 100;
		font: bold 1.2em "Trebuchet MS", Tahoma, Arial, sans-serif;
	}
	
	#header {
		background-color: #532818;
	}
	
	#content {
		width: 720px;
		position: relative;
		padding: 30px 20px 90px 30px;
		background-color: #fff;
	}
	
	#footer {
		margin: 16px 0 0 0;
		text-align: center;
		font-size: .9em;
		color: #666666;
	}
		
	/* Layout variations */
	
	#home #masthead {
		border: none;
	}
	
	#home #secondary-content,
	#blog #sidebar {
		width: 170px;
		float: right;
		padding: 30px 20px; 
	}
		
	#home #content,
	#blog #content {
		width: 506px; 
		float: left;
		padding-bottom: 0;
	}

	#home .content-container {
		background: #fff url(../images/bg_content_container_faux.gif) repeat-y 0 0;
	}
		
	#home #content,
	#home #secondary-content {
		min-height: 357px;
	}
		
	#home #content {
		background: transparent;
	}
	
	#home #secondary-content {
		background: #e9ffdf url(../images/bg_secondary_content_home.gif) no-repeat;
	}
	
	

/* 3.1	Accessibility links
-----------------------------------------------------------------------------------------------*/	

	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}


/* 3.2	Masthead
-----------------------------------------------------------------------------------------------*/	

	#masthead h1, 
	#masthead h1 span,
	#masthead a,  
	#masthead a span {
		display: block;
		width: 236px;
		height: 94px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#masthead h1,
	#masthead a {
		margin: 0;
		position: relative;
		font-weight: bold;
		font-size: 1.4em;
		line-height: 4em;
		color: #532818;
		z-index: 1;

	}

	#masthead h1 span,
	#masthead a span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../images/logo.gif) no-repeat;
	}
	


/* 3.3	Navigation
-----------------------------------------------------------------------------------------------*/	

	#navigation ol {
		float: right;
	}
	
	#navigation li {
		float: left;
		padding: 0 0 0 24px;
	}
	
	#navigation a {
		color: #532818;
	}
	
	#navigation a:hover,
	#navigation a:active,
	#navigation a.current {
		color: #d32c27;
		text-decoration: none;
	}
	
	
/* 3.4	Header
-----------------------------------------------------------------------------------------------*/	
	
	#header {
		border-left: 1px solid #532818;
		border-top: 3px solid #532818;
		border-bottom: 2px solid #532818;
	}

	#header img {
		vertical-align: bottom;
	}


/* 3.4	Content
-----------------------------------------------------------------------------------------------*/	


	#home #content a {
		color: #532818;
		text-decoration: underline;
	}
	
	#home #content a:hover,
	#home #content a:active {
		text-decoration: underline;
		color: #d32c27;
	}
	
	

/* 3.5	Secondary content
-----------------------------------------------------------------------------------------------*/	

	#secondary-content h2 {
		margin: 0 0 .4em 0;
	}
	
	#secondary-content img {
		margin-bottom: .5em;
	}
	
	#secondary-content .more {
		text-align: right;
		color: #532818;
	}	
	
	#secondary-content a {
		text-decoration: underline;
	}
	
	#secondary-content a:hover,
	#secondary-content a:active {
		text-decoration: underline;
		color: #d32c27;
	}
	

/* 3.6	Sidebar
-----------------------------------------------------------------------------------------------*/	

	#sidebar ul,
	#sidebar ol {
		margin-bottom: 2em;
	}
	
	#sidebar li {
		padding-left: 1em;
		background: url(../images/ico_bull.gif) no-repeat 0 .6em;
	}
	

/* 3.7	Footer
-----------------------------------------------------------------------------------------------*/	

	#footer a {
		color: #666666;
	}

/* 4. LAYOUT ELEMENTS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

.bullet-list {
		margin-left: 1em;
	}
	
	.bullet-list li {
		padding-left: 1em;
		background: url(/images/ico_bull.gif) no-repeat 0 .6em;
	}

	.img-left {
		float: left;
		display: inline;
		margin: 0 12px 12px 0;
	}
	
	.img-right {
		float: right;
		display: inline;
		margin: 0 0 12px 12px;
	}
	
	.more {
		font-weight: bold;
	}
	
	.more a,
	a.more {
		color: #d32c27;
		text-decoration: none !important;
	}
	
	.more a:hover,
	.more a:active,
	a.more:hover,
	a.more:active {
		text-decoration: underline  !important;
	}	
	

	
	.more a:hover,
	.more a:active,
	a.more:hover,
	a.more:active, {
	}
	
	.blog-entries li {
		padding: 0 0 20px 0;
	}
	
	.blog-entries a {
		text-decoration: underline;
	}
	
	.blog-entries a:hover,
	.blog-entries a:active {
		text-decoration: none;
	}


	.portfolio-list a,
	.pagination a {
		font: bold 1.2em "Trebuchet MS", Tahoma, Arial, sans-serif;
		color: #ff6600;
	}
	
	.portfolio-list a:hover,
	.portfolio-list a:active,
	.pagination a:hover,
	.pagination a:active {
		color: #d32c27;
		text-decoration: none;
	}


	.portfolio-list {
		margin-top: 1em;
		width: 100%;
		overflow: hidden;
	}
	
	.portfolio-list li {
		width: 300px;
		float: left;
		padding: 0 25px 14px 25px;
		text-align: center;
		
	}
	
	.portfolio-list img {
		vertical-align: bottom;
	}
	
	.portfolio-list p {
		margin: .5em 0 0 0;
	}
	
	.garden-description {
		width: 165px;
		float: right;
		margin: 2.25em 0;
		
	}
	
	.garden-view {
		float: left;
		padding-left: 24px;
		margin: 1em 0;	
	
	}
	
	.garden-view img {
		float: left;
		vertical-align: bottom;
	}
	
	
	.pagination.right {
		position: absolute;
		top: 30px;
		right: 40px;
	}
	
	.pagination {
		clear: both;
		margin: 0 0 0 24px;
	}
	
	.pagination li {
		float: left;
		display: inline;
		  list-style: none;
		
		padding: 0 10px;
		margin: 0 10px 0 -10px;
	}
	
	.pagination li.first {
		border: none;
		  list-style: none;
	}