/* ------------------------------
   REFERENCE
   ------------------------------ */ 

/*

FONT
1em = 14px

COLOURS
Light green: #DAEAC1
Light blue: #E3F2E7
Dark green: #357768
Pink: #D79696
Beige: #F3F3EB
Greys: #666666 (body), #9E9E9E (tabs), #999999 (meta)

GRID
Left & right page margin: 10px
Gutter: 20px
Main content: 620px
Sidebar: 300px
Three columns: 300px each
Two columns: 460px each

IMAGE SIZES
About section: 210px width x 264px height
Products & Training thumbnails: 90px x 90px
All other images: 210px wide (grid = 220px, minus 10px for 5px border)
Larger images: 300px wwide or 290px with 5px border

*/

/* ------------------------------
   RESET
   ------------------------------ */ 
   
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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 {
	color: #666;
	background: #FFF;
	font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; /* "Lucida Grande", Calibri, "Lucida Sans Unicode", "Trebuchet MS", Arial, sans-serif; */
    font-size: 14px;
    line-height: 1.5; /* Baseline grid of 21px, Meyers line-height was originally 1 */
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a img, :link img, :visited img {
	border: 0;
} /* I ADDED THIS, FOUND IT SOMEWHERE ELSE FROM ERIC MEYER
This will make sure images in anchors and links don't have a border by default.
Using a img covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links.
You might consider a img to be sufficient, and for now you'd be right.
But in the future, any element may be a link, not just a elements, so this gives us a bit of future-proofing.
*/



/* this was in the zen reset but I am removing it for now
caption, th, td {
	text-align: left;
	font-weight: normal;
} */

/* ------------------------------
   HTML ELEMENTS
   ------------------------------ */ 

/*
Adds basic typographical styling
Inspired by Richard Rutter of clearleft.com
Check out the following articles by Richard for more information:
http://24ways.org/2006/compose-to-a-vertical-rhythm (December 2006)
http://www.alistapart.com/articles/howtosizetextincss (November 2007)
*/

/* basic font sizes */
p, ul, ol, dl, table, address, blockquote, fieldset, pre, form div {
	font-size: 1em;  /* 14px */	
}

/* deal with likely (but certainly not all) inherited shrinkage */

ul p, ol p, table p, dl p, ul ul, ol ol, ul ol, ol ul, address p, blockquote p, form div div, form div p, fieldset div, table form div {
	font-size: 1em;
}

/* @end Font sizes */

/* @group Margins */

p, ul, ol, dl, address, table, blockquote, pre, fieldset {
	margin-bottom: 1.4286em; /* 20px */
}
p {
	margin: 0.8571em 0 1.4286em 0;
}
form {
	margin-bottom: 1.517em; /* 18px */
}
ul ul, ol ol, ol ul, ul ol {
	margin-bottom: 0;
}

/* @end Margins */

/* @group Links */

a:link,
button.link span {
	color: #D79696;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #D79696;
}

a:visited {
	color: #D79696;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #D79696;
}

a:hover,
a:focus,
button.link:hover,
button.link:focus span {
	color: #FFF; /* #347768 */
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #347768;
	background-color: #347768; /* #E3F2E7 */
}
a:active,
button.link:active span {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #D79696;
	background-color: #D79696;
}
a.image-link { /* give links the class of "image-link" in order to override the a formatting from showing below the image*/
border: 0;
background: 0;
}


/* @end Links */

/* @group Headings */

h1 {
	font-size: 3em; 	  	    /* 42px */
	font-weight: lighter;
    line-height: 1; 			/* 1 = 50px */
	margin-top: 0.56em; 		/* 28px */
	margin-bottom: 0.5em; 		/* 25px */
    color: #357768;
}
h2 {
	font-size: 1.7857em;   		/* 25px */
	line-height: 1.4; 			/* 35px */
	margin-top: 1.2em;		   	/* 30px */
	margin-bottom: 1.4em; 	 	/* 35px */
    color: #666;
}
h3 {
	font-size: 1.2857em;		/* 18px */
	margin-top: 1.1111em;     	/* 20px */
	margin-bottom: 0.5556em; 	/* 10px */
	color: #666;
}

#footer h3 {
	color: #C0E1C0;
}
h4 {
	font-size: 1.1428em;   		/* 16px */
	margin-top:1.25em;	   		/* 20px */
	margin-bottom: 0.625em; 	/* 10px */
}
h5, h6 {
	font-size: 1em;  			/* 14px */
}

/* @end Headings */

/* @group Lists */

#main ul {	/* unordered lists more often DON'T require bullets except in extended bits of writing */
	list-style-type: disc;
	margin-left: 30px;
}
#main ol {
	margin-left: 60px;
}
.bullets li {
	margin-top: 0.5em;			/*  8px */
	margin-bottom: 1.25em;		/* 18px */
}

ol {	/* ordered lists usually DO require bullets */
	list-style-type: decimal;
	margin-left: 2.077em; /* 27px */
}

dt {
	font-weight: bold;
	margin-top: 1.385em; /* 18px */
}

/* @end Lists */

/* @group Tables */

table {
	border-bottom: 1px solid #666;
}

caption {
	font-weight: bold;
	padding-bottom: 0.643em; /* 9px */
	font-size:1.077em; /* 14px */
}

thead th {
	border-top: 1px solid #666;
	border-bottom: 3px solid #666;
	padding-top: 0;
	padding-bottom: 0.692em; /* 9px */
}

tbody {
	border-top: 3px solid #666;	/* not rendered in IE6/7 */
}

tbody tr th,
tbody tr td {
	border-top: 1px solid #ddd;
}

th,
td {
	text-align: left;
	padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
}

/* @end Tables */

/* @group Blockquotes */

blockquote {
	margin-left: 80px; /* 18px */
	margin-right: 80px; /* 18px */
}

blockquote cite,
blockquote em {
	font-style: normal;
}

/* @end Blockquotes */


/* @group Fieldsets */

fieldset {
	border: 1px solid #ccc;
	padding: 0 1.385em 0.692em 1.385em; /* 9px 18px 0 18px */
}

legend {
	font-weight: bold;
}

form fieldset .container {
	margin-top: 1.385em; /* 18px */
	margin-bottom:0;
	position: relative;
}

/* @end Fieldsets */

/* @group Form controls */

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: 1em;
}

textarea,
input[type='text'], 
input[type='password'],
select {
	border-width: 1px;
	border-style: solid;
	border-top-color: #999;
	border-left-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	padding: 0 1px 1px 1px;
}

textarea:focus,
input[type='text']:focus, 
input[type='password']:focus,
select:focus {
	border-color: #888;
	outline: 2px solid #D79696;
}

input.short {
	width: 4em;
}

input.medium,
textarea.medium {
	width: 12em;
}

input.long,
textarea.long {
	width: 30em;
}

textarea {
	width: 99%;
	display: block;
}

.button-container input {
	font-weight: bold;
}

.button-container input.cancel {
	font-weight: normal;
}

button {
	border: 0;
	padding: 0;
	cursor: pointer;
	width: auto;
	overflow: visible;
}

button.link {
	background-color: #fff;
	font-weight: normal;
}

/* accessability feature, resize check and radio inputs */
.radio-container input, 
.checkbox-container input {
	width: 1em;
	height: 1em;
}

/* @end */

/* ------------------------------
   LAYOUT
   ------------------------------ */ 
   
/* 
The Mother Me website layout is based on a 12 column grid.
Page width = 960px with a 10px gutter on the left and right margins.
Grid is broken down into 60px chunks with a 20px gutter between each.
The 960 Grid System was used as a reference: http://960.gs/
*/

#header, #content, #navigation, #footer {
	margin-left:auto;
	margin-right:auto;
	width:960px;
}	
#header-wrapper { /* same as header */
	height: 141px;
}	
#header {
	height: 141px; /* same as header-wrapper */
}
#header #logo {
	padding-top: 12px;
}
#header #title {
	text-indent: -9999px;
}
#header p {
	margin: 0 10px 0 10px; /* content in header needs a 10px margin if on far left or right */
}
#content {
	position: relative;
}
#main {
	float: left;
	width: 590px; /* originally 620px, made smaller for more whitespace */
	margin-left: 10px;
	margin-bottom: 30px;
}
#main.gallery {
	width: 900px;}
#sidebar {
	float: right;
	width: 300px;
	margin: 20px 10px 30px 0;
}
#navigation {
	position: absolute;
	width: 700px; /* width and left should equal 960px for grid layout */
	top: -40px; /* this will have to be adjusted to be the negative value as the size of the menu tabs*/
	left: 260px; /* width and left should equal 960px for grid layout */
}
#search {
	position: absolute;	
	top: -100px;
	left: 720px;
}
#footer {
	padding: 20px 0 20px 0;
}
#footer-left {
	float: left;
	width: 460px;
	margin-left: 10px;
}
#footer-right {
	float: right;
	width: 460px;
	margin-right: 10px;
}
#home-feature {
	margin: 0 0 10px 10px; /* 10px left margin added to line up with other content in grid layout */
	height: 280px; /* extra 40px added to background image size for top white space */
}
.featured {
	width: 300px;
	float: left;
	margin-bottom: 50px;
}
.featured.first {
	margin-left: 10px;
	margin-right: 20px;
}
.featured.second {
	margin-right: 20px;
}
.clear {
	clear: both;
}


/* ------------------------------
   STYLE
   ------------------------------ */ 

body {
	background: #666 url(images/body-bg.gif);
}
#header-wrapper {
	background: #DAEAC1 url(images/header-bg.gif) repeat-x;
}
#content-wrapper {
	background: #FFF; /* #E4E4DE url(images/content-bg.gif); removing during site build */
}	
#content {
	background:#FFF;
}
#search {
}
#footer-wrapper {
	border-top: #C0E1C0 5px solid; /* colour scheme green: #C0E1C0, header light green: #DAEAC1 */
}
#footer {
	color:#FFF;
}
strong {
	color: #357768;
}
.grey-text {
	color: #999;
}
img.dropcap {
	float: left;
	padding: 3px 3px 0 0;
}
a.image-link {
	border: 0;
}
p.featured-text,
h2.page-intro {
	font-size: 1.2857em;   		/* 18px */
	font-style: oblique;
	font-weight: normal;
}

/* MAIN NAVIGATION TABS */

#navigation {
}
#navigation ul {
	float: right;
	margin: 0;
	padding-right: 5px; /* 5px padding on ul and 5px padding on li = 10px margin on right of page for grid layout */
}
#navigation li {
	background: #E3F2E7;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	display:inline;
	float: left;
	margin: 0 5px 0 0; /* 5px padding on ul and 5px padding on li = 10px margin on right of page for grid layout */
	padding:0;
}
#navigation a {
	float: left;
	padding: 0 15px;
	color: #9E9E9E;
	text-decoration: none;
	line-height: 2.25;
	/* background: url(images/tab-right.jpg) no-repeat top right; */
	border: 0;
	font-weight: normal;
	font-size: 1.1428em;   		/* 16px */
}
#navigation a:hover {
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	color: #FFF;
}
#navigation a.selected {
	/* line-height: 2.9; making text move down */
	background: #FFF;
	border-bottom: 5px #FFF solid;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	color: #9E9E9E;
}


/* SIDEBAR */

#sidebar h3 {
	border-bottom: 2px solid #F3F3EB;
	margin-bottom: 0;
	/* 
	background: #E3F2E7;
	padding: 5px;
	*/
}
#sidebar img {
	border: 5px solid #DAEAC1;
}
#sidebar img.noborder {
	border: none;
}
#sidebar p,
#sidebar li {
	margin-left: 5px;
}
#sidebar ul {
}
#sidebar ul li {
	border-bottom: 1px solid #F3F3EB;
}
#sidebar ul li a {
	display: block;
	padding: 5px 0 5px 20px;
	border: 0;
	background: url(images/pink-square-icon.gif) no-repeat center left;
}
#sidebar li a:link, #sidebar li a:visited {
	/* border-bottom: 1px dashed #F3F3EB;*/
}
#sidebar ul li a:hover {
	background: #F3F3EB url(images/green-square-icon.gif) no-repeat center left;
	color: #347768;
}
#sidebar ul li a:active {
	color: #D79696;
	background: #F3F3EB url(images/pink-square-icon.gif) no-repeat center left;
	/* background-color: #357768; */
}
#sidebar li a.active {
	color: #347768;
	background: url(images/green-square-icon.gif) no-repeat center left;
}
#sidebar .ribbon {
	display: block;
	margin-left: 10px;
	margin-top: 30px;
	/* text-align: center; */
}

/* HOME PAGE */

#home-feature {
	background: url(images/home-feature-bg.jpg) no-repeat bottom left;
}
#home-feature h1 {
	margin: 0;
	padding: 90px 0 0 80px; /* 80px left = column 2 */
	font-family: Arial;
	font-size: 2.4285em; /* 32px = 2.2857em */
	color: #666;
}
#home-feature h2 {
	margin: 0;
	padding: 20px 0 20px 160px; /* 80px left = column 2 */
	width: 400px;
	font-family: arial;
	font-size: 1.4285em; /* 20px */
	font-weight: lighter;
	color: #9E9E9E;
}
#home-feature p {
	margin: 0;
	padding: 110px 0 20px 80px; /* 80px left = column 2 */
	width: 480px;
	font-family: arial;
	font-size: 1.4285em; /* 20px */
	font-weight: lighter;
	color: #9E9E9E;
}
#main.home {
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 1.1428em;
}
#main.home h1 {
	padding-left: 10px;
	margin: 0;
	margin-top: 10px;
	font-size: 2.4285em; /* 32px = 2.2857em */
	color: #666;
}
#main.home h2 {
	padding-left: 10px;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 30px;
	font-size: 1.2857em;   		/* 18px */
	font-style: oblique;
	font-weight: normal;
	color: #9E9E9E;
}
#main.home p {
	padding-left: 10px;
}
#sidebar.home {
	margin-top: 30px;
	text-align: center;
}
#sidebar.home img {
	border: 0;
}
div.featured {
	border: 1px solid #CCC;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.featured h2 {
	/* color: #357768; */
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px;
   	font-weight: lighter;
}
.featured p {
	padding: 0 10px 0 10px;
}
.featured img {
	float: left;
	margin-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
}
.featured p.featured-link {
	font-size: 1.2857em; /* 18px */
}

/* BLOG */

#main.blog h2 {
margin-bottom: 0;
}
#main.blog img {
	border: 5px solid #DAEAC1;
}
#main.blog img.thumb {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
#main.blog div.post-meta {
	font-size: 0.8571em; /* 12px */
	color: #999;
	margin: 0;
	padding: 5px;
	background: #F3F3EB;
}
#main.blog div.post-meta a {
	color: #999;
	border-bottom: 1px solid #999;
}
#main h2.blog-list-title a {
	color: #357768;
	border-bottom: 0;
}
#main h2.blog-list-title a:hover {
	background: none;
	color: #D79696;	
}
#main.blog p.comment-author {
	margin-bottom: 0;
}
#main.blog p.comment-author strong {
	font-size: 1.1428em;
}
div.comment-entry p {
	margin-left: 50px;
	margin-right: 50px;
	font-size: 0.8571em;
}

/* PAGES */

#main ul.product-listing,
#main ul.training-course {
	margin-left: 0;
}
#main ul.product-listing h3 {
	margin-top: 0;
}
#main ul.training-course h3 {
	margin-top: 0;
	background: #F3F3EB;
}
#main ul.product-listing li,
#main ul.training-course li {
	padding-left: 110px;
	overflow: hidden;
	padding-bottom: 10px;
}
#main ul.product-listing li img,
#main ul.training-course li img {
	float: left;
	position: relative; 
	left: -110px;
	margin-right: -100px;
	width: 90px;
	height: 90px;
	border: 5px solid  #DAEAC1;
	margin-bottom: 10px;
}
#main ul.training-course li p.meta,
div.post-date,
span.post-date {
	font-size: 0.8571em; /* 12px */
	color: #999;
	margin: 0;
}
div.post-date a,
span.post-date a {
	color: #999;
	border-bottom: 1px solid #999;
}
p.meta strong {
	color: #999;
}
p.copyright {
	font-size: 0.8571em; /* 12px */
	color: #999;
	/* text-align: right; */
	/* margin-top: 30px; */
}
#main.about img {
	float: right;
	margin-left: 10px;
	border: 5px solid #DAEAC1;
}
#main.services img {
	float: right;
	margin-left: 10px; /* 5px border + 10px margin = 20px gutter for grid layout */
	border: 5px solid #DAEAC1;
}
div.paginate {
	margin-top: 30px;
}
#main.services ul.services-list {
	list-style: url(images/green-square-icon.gif);
	margin-top: 1.4286em;
}
#main.services ul.services-list li {
	margin-bottom: 1.4286em; 
}
#main.services ul.services-list strong {
	font-size: 1.1428em;
}
#main div.client-testimonial {
	margin-top: 2em;
	margin-bottom: 3em;
}
#main div.client-testimonial em {
	padding-left: 30px;
}
#main.services img.float-left {
	float: left;
	margin-left: 0;
	margin-right: 10px;
}

/* PHOTO GALLERY */

#main.gallery h3 {
	font-size: 1.7857em;
	line-height: 1.4;
	margin-bottom: 1.4em;
	margin-top: 1.2em;
}
#main.gallery div.thumbnail {
	float: left;
	height: 200px;
	margin-right: 20px;
	overflow: hidden;
	width: 160px;
}
#main.gallery div.thumbnail h3 {
font-size: 1.2857em;		/* 18px */
margin-top: 1.1111em;     	/* 20px */
margin-bottom: 0.5556em; 	/* 10px */
}
#main.gallery div.thumbnail p {
	margin: 0;
}
#main.gallery img,
img.thumb {
	border: 5px solid #DAEAC1;
}
#footer img {
	margin-right: 10px;
}
#main.gallery img:hover,
img.thumb:hover,
#sidebar img.thumb:hover {
	border: 5px solid #357768;
}








/* Original ExpressionEngine 1.0 Gallery

#main.gallery div.category-thumb {
	float: left;
	width: 160px;
	margin-right: 20px;
	text-align: center;
}
#main.gallery img,
div.category-thumb img {
	border: 5px solid #DAEAC1;
}
#main.gallery img:hover,
div.category-thumb img:hover,
#sidebar div.category-thumb img:hover {
	border: 5px solid #357768;
}
#main.gallery div.category-thumb h3 {
	font-size: 1.071em; /* 15px 
}
#main.gallery div.gallery-nav {
	height: 50px;
}
#main.gallery div.gallery-nav span {
	float: left;
}
#main.gallery div.gallery-nav form {
	float: right;
}
#main.gallery div.category-heading {
	height: 40px;
}
#main.gallery h2.gallery-category {
	float: left;
	margin: 0;
}
#main.gallery span.gallery-description { /* same as featured text 
	font-size: 1.2857em;   		/* 18px 
	font-style: oblique;
	font-weight: normal;
	float: right;
	margin-top: 8px;
}
#main.gallery table.thumb-grid td {
	padding-top: 20px;
	padding-bottom: 10px;
}
#sidebar div.thumb-container {
	margin-top: 15px;
}
#sidebar div.category-thumb,
#footer div.category-thumb {
	display: inline;
	margin-right: 10px;
}

*/