@charset "UTF-8";
/*
-----------------------------------------------
mama tea CSS
-----------------------------------------------
/*
 
1. GLOBAL STYLES
-------------------------------------------------------------------
1.0 Master/Reset
1.1 Accessiblity
1.2 Headings
1.3 Text Elements
1.4 Links and lists
1.5 Forms
1.6 Columns and Rows
1.7 Puffs and Boxes
1.8 Buttons
 
 
2. MAIN PAGE ELEMENTS
-------------------------------------------------------------------
2.0 Wrapper
2.1 Header
2.2 Masthead
2.3 Navigation
2.4 Main content
2.5 Footer
2.6 Main content - Admin
 
 
3. SPECIFIC PAGES
-------------------------------------------------------------------
3.0 Example Specific Page
 
 
4. LOWER LEVEL TEMPLATES
-------------------------------------------------------------------
4.0 Example Lower Level Template
*/
 
 
 
/*
1. GLOBAL STYLES
------------------------------------------------------------------- */
 
/* 1.0 Master/Reset
----------------------------------------------- */
html,legend{background:#fff;color:#000}
address,blockquote,body,dd,del,dl,dt,div,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,iframe,input,ins,legend,li,map,object,ol,p,pre,table,td,textarea,th,ul{margin:0;padding:0; vertical-align: baseline;}
h1,h2,h3,h4,h5,h6,th{font-weight:normal}
fieldset,img{border:0}
input,select,textarea{font-family:inherit}
table{border-collapse:collapse;border-spacing:0}
caption,th{text-align:left}
td,th{vertical-align:top}
abbr,acronym,address,b,caption,cite,code,dfn,em,i,input,samp,select,strong,textarea,var{border:0;font-family:inherit;font-style:normal;font-variant:normal}
del,ins{text-decoration:none}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
q{quotes:none}q:before{content:"\2018"}q:after{content:"\2019"}q q:before{content:"\201c"}q q:after{content:"\201d"}
 
body {
	font-size:81.3%;
	font-family:"Trebuchet MS","Trebuchet",Arial,Helvetica,sans-serif;
}

/* 1.1 Accessibility
----------------------------------------------- */
.accessibility {display: none;}
#access {position: absolute; top: -1000em;}


/* 1.2 Headings
----------------------------------------------- */
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.846em;
	color: #621A4B;
	font-weight: bold;
}
h3 {
	font-size: 1.231em;
	color: #621A4B;
	font-weight: bold;
	margin: 1em 0 0 0;
}
h4 {
	font-size: 1.077em;
	color: #621A4B;
	font-weight: bold;
	margin: 1em 0 0 0;
}
h5 {
	font-size: 1.2em;
}
 
/* 1.3 Text Elements
--
--------------------------------------------- */
p {
	line-height: 140%;
	padding-bottom: 1em; 
}
code {
	font: normal 0.9em "Monaco","Courier New",Courier,sans-serif;
}
p.premier {
	font-size: 1.077em;
	color: #666;
	width: 400px;
	font-weight: bold;
}
p.premier_alt {
	font-size: 1.077em;
	color: #333;
	font-weight: bold;
}
 
/* 1.4 Links and Lists
----------------------------------------------- */
a, a:link {color: #F4792A; text-decoration: none;}
a:visited {color: #F4792A;}
a:hover, a:focus, a:active {text-decoration: underline;}

ol, ul, dl {
	margin-bottom: 1em;
}
dd {
	margin-bottom: 0.5em;
}
ol li {
	display: list-item; /* Fixes IE rendering problem */
	list-style-type: decimal;
	list-style-position: inside;
}
ul li {
	list-style: square outside;
	margin-left: 15px;
}
 
 
/* 1.5 Forms
----------------------------------------------- */
input:focus {
	border: 1px solid #444;
}

form fieldset {
	margin:0;
	padding:0;
}

#form form input, #form form textarea {
	border: 1px solid #999999;
}
#form form input {
	width: 200px;
}
#form form textarea {
	width: 400px;
}
#form form input#check {
	border: none;
	width: auto;
}
#form form .checkboxes_widget {
	margin-left: 0;
}
#form form .checkboxes_widget ul li {
	margin:0;
	padding:0;
	list-style: none;
}
#form form button {
	width: 52px;
	height: 25px;
	display: block;
	text-indent: -9999px;
	outline: none;
	border: none;
	padding:0;
	margin:0;
	background: url(/assets/images/page/button_send.png) 0 0 no-repeat;
}
#form form {
	padding-bottom: 2em;
	float: left;
}

 
/* 1.6 Columns and Rows
----------------------------------------------- */
.column {
	display: inline;
	float: left;
	margin: 0 20px 20px 0;
	position: relative;
	width: 205px;
}
.column.last {
	border-right: 0;
	margin-right: 0;
}
.row .column {
	margin-bottom: 0;
}
.column.half {
	width: 470px;
}
.column.quarter {
	width: 225px;
}
.column.last {
	margin-right: 0;
}
.row {
	display: block;
	float: left;
	margin: 0 0 20px 0;
}
.row.last {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
 
 
/* 1.7 Puffs and Boxes
----------------------------------------------- */
.puff {
	border: 0;
	display: inline;
	padding: 0;
}
.puff.right {
	float: right;
	margin: 0 0 10px 20px;
}
.puff.left {
	float: left;
	margin: 0 20px 10px 0;
}
 
 
/* 1.8 Buttons
----------------------------------------------- */
button,
form input.button,
.submit input {
	background: #555;
	border: 1px solid #555;
	color: #fff;
	cursor: pointer;
	font-size: 1em;
	font-weight: bold;
	margin: 0;
	overflow: visible; /* overflow: visible + width: auto avoids IE adding double padding */
	padding: 3px 5px;
	width: auto;
}
button:hover,
button:focus,
button:active,
form input.button:hover,
form input.button:focus,
form input.button:active,
.submit input:hover,
.submit input:focus,
.submit input:active {
	background: #333;
}
 
 
/*
2. TOP LEVEL ELEMENTS
------------------------------------------------------------------- */
 
/* 2.0 Wrapper
----------------------------------------------- */
#outer_top {
	width: 100%;
	border-bottom: 1px solid #F4792A;
	float: left;
}
#outer_mid {
	width: 100%;
	float: left;
}
#outer_bottom {
	width: 100%;
	float: left;
	background: url(/assets/images/page/wrapper_bottom_bg.png) 0 0 repeat-x #fff;
}

#outer_top .wrapper:after, #outer_bottom .wrapper:after, #outer_regular .wrapper:after, #outer_mid .wrapper:after {
	content: ".";
	clear: both;  
	display: block; 
	height: 0; 
	visibility: hidden;
}
#outer_top .wrapper, #outer_bottom .wrapper, #outer_bottom_regular .wrapper, #outer_mid .wrapper {
	display: inline-block;
}
/* \*/
* html #outer_top .wrapper {
	height: 1%;
}
* html #outer_bottom .wrapper {
	height: 1%;
}
* html #outer_bottom_regular .wrapper {
	height: 1%;
}
* html #outer_mid .wrapper {
	height: 1%;
}
#outer_top .wrapper, #outer_bottom .wrapper, #outer_bottom_regular .wrapper, #outer_mid .wrapper {
	display: block;
	margin: 0 auto;
	width: 950px;
}
 
 
/* 2.1 Header
----------------------------------------------- */

h1#logo {
	width: 407px;
	height: 121px;
	float: left;
}
h1#logo a {
	width: 407px;
	height: 121px;
	float: left;
	display: block;
	text-indent: -9999px;
	outline: none;
	background: url(/assets/images/page/logo.png) 0 0 no-repeat;
}
object#logo {
	float: left;
}
#signup {
	width: 210px;
	padding: 15px;
	background: #D291C0;
	float: right;
	margin-top: 30px;
}
#signup label {
	width:210px;
	height: 20px;
	display: block;
	text-indent: -9999px;
	outline: none;
	background: url(/assets/images/page/enter_email.png) 0 0 no-repeat;
}
#signup input {
	width: 150px;
	height: 20px;
	margin: 0 5px 0 0;
	padding: 2px 5px;
	border: 1px solid #7E1E5D;
	float: left;
}
#signup button {
	width: 43px;
	height: 26px;
	background: url(/assets/images/page/button_join.png) 0 0 no-repeat;
	border: none;
	outline: none;
	display: block;
	text-indent: -9999px;
	float: left;
}
 
/* 2.2 Masthead
----------------------------------------------- */


 
 
/* 2.3 Navigation
----------------------------------------------- */

#nav {
	width: 160px;
	height: 270px;
	float: left;
	background: url(/assets/images/page/nav_bg.png) top right no-repeat #fff;
}
#nav ul {
	width: 140px;
	float: right;
	margin:30px 0 0 0;
	padding:0;
}
#nav ul li {
	width: 140px;
	float: left;
	height: 25px;
	list-style: none;
	margin:0;
	padding:0;
}
#nav ul li a {
	display: block;
	width: 140px;
	height: 25px;
	float: left;
	text-indent: -9999px;
	outline: none;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#nav ul li a:hover, #nav ul li.on a {
	background-position: 0 -25px;
}
#nav ul li.on a {
	cursor: default;
}

#nav ul li#nav_home a {background-image: url(/assets/images/page/nav_01_home.png);}
#nav ul li#nav_about a {background-image: url(/assets/images/page/nav_02_about.png);}
#nav ul li#nav_teas a {background-image: url(/assets/images/page/nav_03_teas.png);}
#nav ul li#nav_contact a {background-image: url(/assets/images/page/nav_04_contact.png);}
#nav ul li#nav_news a {background-image: url(/assets/images/page/nav_05_news.png);}
 
 
/* 2.4 Main content
----------------------------------------------- */

#main {
	float: left;
	width: 740px;
	padding: 35px 30px 0 20px;
}

span#information {
	width: 476px;
	height: 31px;
	float: left;
	display: block;
	text-indent: -9999px;
	margin: 0 0 23px 0;
	background: url(/assets/images/page/introduction.png) 0 0 no-repeat;
}
#container {
	width: 400px;
	float: left;
}
#container .news_item {
	border-bottom: 1px solid #D598C4;
}
#container .news_item.last {
	border-bottom: none;
	padding-bottom: 3em;
}
#form {
	width: 400px;
	float: left;
}
#teas, .section {
	width: 770px;
	float: left;
	margin-left: 180px;
	display: inline;
}
#teas ul {
	width: 770px;
	float: left;
}
#teas ul li {
	width: 154px;
	height: 300px;
	float: left;
	list-style: none;
	margin:-212px 0 0 0;
	padding:0;
	position: relative;
}
#teas ul li a {
	display: block;
	width: 154px;
	height: 342px;
	float: left;
	outline: none;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#teas ul li#tea_01, #teas ul li#tea_01 a { background-image: url(/assets/images/page/tea_home_01.png); }
#teas ul li#tea_02, #teas ul li#tea_02 a { background-image: url(/assets/images/page/tea_home_02.png); }
#teas ul li#tea_03, #teas ul li#tea_03 a { background-image: url(/assets/images/page/tea_home_03.png); }
#teas ul li#tea_04, #teas ul li#tea_04 a { background-image: url(/assets/images/page/tea_home_04.png); }
#teas ul li#tea_05, #teas ul li#tea_05 a { background-image: url(/assets/images/page/tea_home_05.png); }

#teas_sub {
	width: 770px;
	float: left;
	margin-left: 180px;
	display: inline;
	padding-bottom: 4em;
	border-bottom: 1px solid #F3F3F3;
}
#teas_sub ul {
	width: 770px;
	float: left;
}
#teas_sub ul li {
	width: 154px;
	height: 276px;
	float: left;
	list-style: none;
	margin:-141px 0 0 0;
	padding:0;
	position: relative;
}
#teas_sub ul li a {
	display: block;
	width: 154px;
	height: 276px;
	float: left;
	outline: none;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#teas_sub ul li#tea_01, #teas_sub ul li#tea_01 a { background-image: url(/assets/images/page/tea_01.png); }
#teas_sub ul li#tea_02, #teas_sub ul li#tea_02 a { background-image: url(/assets/images/page/tea_02.png); }
#teas_sub ul li#tea_03, #teas_sub ul li#tea_03 a { background-image: url(/assets/images/page/tea_03.png); }
#teas_sub ul li#tea_04, #teas_sub ul li#tea_04 a { background-image: url(/assets/images/page/tea_04.png); }
#teas_sub ul li#tea_05, #teas_sub ul li#tea_05 a { background-image: url(/assets/images/page/tea_05.png); }



#outer_bottom.home {
	margin-top: 30px;
}
#outer_bottom_regular {
	background: none;
	width: 100%;
	float: left;
}

.section {
	border-top: 1px solid #F3F3F3;
	border-bottom: 1px solid #F3F3F3;
	padding: 1em 0 0 0;
}
.section img.inline {
	float: left;
}

p.detail {
	color: #999;
	font-weight: bold;
	width: 380px;
	font-size: 1.077em;
	float: left;
	margin: 0.5em 0 0 0;
}

#tea_info {
	width: 740px;
	float: left;
	margin-top: 1em;
}
#tea_img, #anna_img {
	width: 330px;
	padding-top: 390px;
	float: left;
}
#anna_img {
	background: url(/assets/images/page/anna_louise.png) 0 0 no-repeat;
}
#tea_img #bags_loose {
	border-top:	1px solid #F3F3F3;
	padding-bottom: 3em;
	float: left;
}
#tea_img #bags_loose img {
	float: left;
	margin-right: 8px;
}
#tea_img #bags_loose p {
	float: left;
	width: 115px;
	font-size: 0.846em;
}
#tea_img #bags_loose h4 {
	margin-bottom: 0.6em;
}

#tea_detail {
	width: 390px;
	float: left;
	margin-left: 20px;
	display: inline;
	padding-bottom: 1em;
}
#tea_info p {
	padding: 0;
}

#main.morning_mama #tea_img {
	background: url(/assets/images/page/tea_large_morning_mama.png) 0 0 no-repeat;
}
#main.glowing_mama #tea_img {
	background: url(/assets/images/page/tea_large_glowing_mama.png) 0 0 no-repeat;
}
#main.cool_mama #tea_img {
	background: url(/assets/images/page/tea_large_cool_mama.png) 0 0 no-repeat;
}
#main.ready_mama #tea_img {
	background: url(/assets/images/page/tea_large_ready_mama.png) 0 0 no-repeat;
}
#main.new_mama #tea_img {
	background: url(/assets/images/page/tea_large_new_mama.png) 0 0 no-repeat;
}

#main.morning_mama h2, #main.morning_mama h3, #main.morning_mama h4 {
	color: #621A4B;
}
#main.glowing_mama h2, #main.glowing_mama h3, #main.glowing_mama h4 {
	color: #E4701E;
}
#main.cool_mama h2, #main.cool_mama h3, #main.cool_mama h4 {
	color: #008DA9;
}
#main.ready_mama h2, #main.ready_mama h3, #main.ready_mama h4 {
	color: #007D68;
}
#main.new_mama h2, #main.new_mama h3, #main.new_mama h4 {
	color: #8A1E04;
}

#about_info {
	width: 740px;
	float: left;
	border-top: 1px solid #F3F3F3;
	padding: 1em 0;
	margin: 0;
	display: inline;
}
#about_info .unit_01 {
	width: 330px;
	float: left;
}
#about_info .unit_02 {
	width: 390px;
	float: left;
	margin-left: 20px;
	display: inline;
}
#about_info img {
	float: left;
	margin-right: 8px;
}
#form_privacy {
	width: 450px;
	margin-left: 1em;
	margin-top: 1em;
}
#form_privacy h2 {
	margin-bottom: 1em;
}

img.buy_now {
	float: right;
}
img.buy_now.homepage {
	margin-top: -22px;
}

 
/* 2.5 Footer
----------------------------------------------- */

#footer {
	width: 770px;
	float: left;
	margin-left: 180px;
	display: inline;
}
#outer_bottom_regular #footer {
	border-top: 1px solid #F3F3F3;
}
#footer ul {
	float: left;
	margin: 0.5em 0;
	font-size: 0.846em;
	color: #333;
	width: 770px;
}
#footer ul li {
	float: left;
	margin:0 2em 0 0;
	padding:0;
	list-style: none;
}
#footer ul li.line {
	float: right;
}
#footer ul li.line a {
	color: #333;
	display: block;
	text-decoration: none;
}
#footer ul li.line a span {
	cursor: pointer;
}
#footer ul li.line a span.link_txt {
	float: left;
	margin-right: 4px;
}
#footer ul li.line a span.link_img {
	height: 14px;
	width: 43px;
	display: block;
	text-indent: -9999px;
	outline: none;
	float: left;
	line-height: 0px;
	background: url(/assets/images/page/line_logo.png) 0 0 no-repeat;
}
#footer ul li.line a:hover span.link_img {
	background-position: 0 -14px;
}

#footer ul li.footer_icon {
	margin: 0 5px 0 0;
}
#footer ul li.footer_icon a {
	display: block;
	height: 16px;
	outline: 0;
	text-indent: -9999em;
	width: 16px;
}
#facebook_link a {
	background: url(/assets/images/icons/facebook.png) 0 0 no-repeat;
}

#twitter_link a {
	background: url(/assets/images/icons/twitter.png) 0 0 no-repeat;
}
 
 
/* 2.6 Main content - Admin */
#mainadmin {
	float: left;
	width: 900px;
	padding: 35px 30px 0 20px;
}

/*
3. SPECIFIC PAGES
------------------------------------------------------------------- */
 
/* 3.0 Buying Tea process
----------------------------------------------- */

form#teaselect, form#customer_details {
	width: 770px;
	margin-right: -30px;
}
#teaselect .col {
	width: 154px;
	float: left;
}
#teaselect .col .row {
	margin:0;
}
#teaselect .col .row_morning_mama_bagged, #teaselect .col .row_morning_mama_loose {	background: #F7EDF2;}
#teaselect .col .row_glowing_mama_bagged, #teaselect .col .row_glowing_mama_loose {	background: #FFF4D7;}
#teaselect .col .row_cool_mama_bagged, #teaselect .col .row_cool_mama_loose {	background: #F5F9FB;}
#teaselect .col .row_ready_mama_bagged, #teaselect .col .row_ready_mama_loose {	background: #F7F9E4;}
#teaselect .col .row_new_mama_bagged, #teaselect .col .row_new_mama_loose {	background: #FEEDDB;}

#teaselect .col .row .field {
	padding: 10px;
	width: 134px;
	margin:0;
}
#teaselect .col .row .field label, #teaselect .col .row .field .label {
	width: 134px;
	margin-right: 0;#
	font-size: 1.154em;
	font-weight: bold;
	margin-bottom: 0.2em;
}
#teaselect .col .row span.tea_description {
	font-size: 0.769em;
	color: #666;
	display: block;
	margin-top: 0.2em;
}
#teaselect .col .row select {
	border: 1px solid #999;
}
#teaselect button, #customer_details button, #submit_form button {
	background: #651C4D;
	color: #fff;
	font-size: 1.231em;
	border: none;
	outline: none;
	margin-top: 1em;
	float: right;
	clear: both;
}
#teaselect legend {
	color:#621A4B;
	font-size:1.846em;
	font-weight:bold;
	border: none;
}
ol#cart_stages {
	width: 770px;
	float: left;
	margin: 1em 0;
}
ol#cart_stages li {
	width: 192px;
	float: left;
	height: 47px;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
	text-indent: -9999px;
	outline: 0;
}
ol#cart_stages li#stage_01 {
	background-image: url(../images/shop/stage_01.png);
}
ol#cart_stages li#stage_02 {
	background-image: url(../images/shop/stage_02.png);
}
ol#cart_stages li#stage_03 {
	background-image: url(../images/shop/stage_03.png);
}
ol#cart_stages li#stage_04 {
	background-image: url(../images/shop/stage_04.png);
	width: 194px;
}
ol#cart_stages li.on {
	background-position: 0 -47px;
}
ol#cart_stages li.done {
	background-position: 0 -94px;
}


form#customer_details {
	float: left;
	clear: left;
}
form#customer_details fieldset {
	width: 330px;
	float: left;
}
form#customer_details fieldset .row {
	margin-bottom: 0;
}
form#customer_details fieldset input {
	width: 250px;
}
form#customer_details fieldset .fld_use_billing_details input {
	width: auto;
	margin-right: 0.3em;
	border: none;
	padding: none;
	outline: none;
}
form#customer_details fieldset .fld_billing_first_name {
	margin-top: 3em;
}
form#customer_details legend {
	font-size: 1.077em;
	color: #666;
	font-weight: bold;
	border: none;
	outline: none;
}
form#customer_details input {
	color: #666;
}

div.basket_details {
	width: 770px;
	margin-right: -30px;
	float: left;
}
.basket_details h2, .billing_address h2, .shipping_address h2 {
	font-size: 1.077em;
	color: #666;
	font-weight: bold;
	border: none;
	outline: none;
}
.billing_address h2, .shipping_address h2 {
	margin-bottom: 1em;
}
div.billing_address, div.shipping_address {
	width: 370px;
	float: left;
	
}
form#submit_form {
	float:left;
	margin-right:-30px;
	width:770px;
	clear: both;
	margin-top: 2em;
	border-top: 1px solid #ccc;
	padding-top: 1.5em;
}
#submit_form p.form_instruction {
	width: 470px;
	float: left;
}
#submit_form button {
	width: 160px;
	margin-top: 0.3em;
}
h2.order_summary {
	
}
table.basket_contents, table.basket_totals {
	width: 770px;
	float: left;
}
table.basket_contents tr td, table.basket_totals tr td, table.basket_totals tr td.sub_totals, table.basket_totals tr td.sub_totals_amt {
	padding: 4px 0;
}
table.basket_contents tr td.item_description, table.basket_totals tr td.sub_totals {
	width: 680px;
}
table.basket_contents {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
	margin-top: 1em;
}
table.basket_contents tr td.item_amount, table.basket_totals tr td.sub_totals_amt {
	text-align: right;
}
table.basket_totals tr td.sub_totals {
	text-align: right;
}
table.basket_totals {
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
}
.general_error {
	float: left;
	width: 100%;
}
.general_error p {
	border: 1px solid red;
	background:#ecc;
	font-weight:bold;
	padding:10px;
	width:748px;
	margin:0;
}
.row.error label.error {
	color: red;
}