/*
Plan B / planborganicfarms.ca
4c / 4c.ca
Oct 2008
Typography CSS
*/

/*
----------------------------------
Global Styles
----------------------------------
*/

* {
	outline: none;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, dt, ol, p, ul {
	margin: 0 0 1em;
	padding: 0;
}

button, input, select, textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
----------------------------------
General Typo
----------------------------------
*/

a {
	text-decoration: none;
}

a:link,
a:visited {
	border-bottom: 1px solid #ccc;
	color: #857532;
}

a:hover {
	border-bottom: 1px solid #888;
	color: #222;
}

a img {
	border: 0;
	display: block;
}

address {
	color: #666;
	font-size: 1.1em;
	font-style: normal;
	line-height: 1.4em;
	margin: 0 0 1em;
	padding: 0;
}

	address strong { color: #555; }

dd {
	color: #707070;
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 0 0 5px;
}

	dd.dd-last { margin-bottom: 12px; }	

dl {
	margin: 0 0 1.5em;
}

dt {
	color: #444;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0 0 5px;
}

	dt em { 
		color: #555;
		font-style: normal;
	}
	
h1 {
	display: block;
	height: 140px;
	left: 20px;
	overflow: hidden;
	position: absolute;
	top: 15px;
	text-indent: -999em;
	width: 500px;
}

	h1 a {
		border: 0 !important;
		display: block;
		height: 100%;
		width: 100%;
	}

h2 {
	color: #857532;
	font-size: 2.1em;
	font-weight: 500;
	margin: 0 0 15px;
}

h3 {
	color: #857532;
	font-size: 1.8em;
	font-weight: 500;
	margin: 0 0 10px;
}

h4 {	
	color: #857532;
	font-size: 1.3em;
	font-weight: 500;
	line-height: 1.4em;
	margin: 20px 0 5px;
}

	.section-left h4 {
		margin: 0 0 12px;
	}

h5 {
	color: #857532;
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1em;
	margin: 0 0 3px;
}

#header img {
	display: block;
	float: right;
}

p { 
	color: #777;
	font-size: 1.1em;
	line-height: 1.5em;
}

	p strong { color: #444; }

small {
	color: #777;
	font-size: 1em;
}

ol,
ul {
	margin: 0 0 1.5em 20px;
}

ol li,
ul li {
	color: #444;
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 0 0 3px;
}	

	ol li { color: #777; }
	
	dd ol li { font-size: 1em; }
	
	ul li strong { 
		background-color: #8ec854; 
		color: #fff;
		padding: 2px 3px 1px;
	}

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


/*
----------------------------------
Forms
----------------------------------
*/

fieldset {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

	fieldset.fs-bordered {
		border-bottom: 1px solid #d8d9d9;
		margin: 0 0 10px;
		padding: 0 0 5px;
	}

fieldset p { margin: 0 0 5px; }

input.btn {
	font-size: 1.1em;
}

input.tb {
	border-top: 1px solid #888;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #bbb;
	font-size: 1em;
	padding: 3px;
}

	.tb-wide { width: 90%; }		

input.cb {
	display: block;
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}

label {
	color: #555;
	display: block;
	float: left;
	width: 80px;
}

	form em {
		color: #777;
		font-style: normal;
	}

	label.label-cb {
		display: block;
		float: none;
		margin: 0 0 5px;
		width: auto;
	}
	
	label.label-wide {
		display: block;
		float: none;
		margin: 0 0 2px;
		width: 100%;
	}

legend {
	background-color: #eee;
	color: #999;
	font-size: 1.1em;
	margin: 0 0 10px;
	padding: 4px 8px;
}
	
.forgotpass {
	border-top: 1px solid #ddd;
	margin: 0;
	padding: 10px 0 0;
}
	
/* Large Forms */

.form-lg {
	margin: 0 0 30px;
}

.form-lg fieldset {
	border-top: 1px solid #ddd;
	padding: 0 0 10px;
}

.form-lg label {
	padding-right: 15px;
	text-align: right;
	width: 120px;
}

.form-lg p {
	font-size: 1.3em;
}	
	
/* Form errors */

#form-errors-area h5 {
	color: #444;
	font-weight: bold;
	margin: 0 0 5px;
}

ul.errors {
	background-color: #fcf1f1;
	margin: 0 0 20px;
	padding: 10px;
}

ul.errors li {
	color: red !important;
	line-height: 1.5em;
	margin: 0 0 0 15px;
	padding: 0;
}

.form-actions {
	padding: 5px 0 0;
}

/*
----------------------------------
Lists
----------------------------------
*/

.item-list {
	margin: 0;
}

.item-list dt {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1em;
	margin: 0;
	padding: 0;
}

.item-list dd {
	margin: 0 0 10px 20px;
	padding: 0;
}

.food-list dt {
	color: #555;
	float: left;
	font-weight: 700;
	margin: 0;
	width: 80px;
}

.food-list dd {
	display: block;
	margin: 0 0 15px 90px;
}


.price-list dt {
	color: #555;
	float: left;
	font-weight: 700;
	margin: 0;
	width: 150px;
}

.price-list dd {
	display: block;
	margin: 0 0 5px 160px;
}


/*
----------------------------------
Tables
----------------------------------
*/

table {
	border-collapse: collapse;
	width: 100%;
}

td {
	color: #857532;
	font-size: 1.1em;
	padding: 1px 3px;
}

	td .tb { width: 90%; }

th {
	color: #444;
	font-size: 1.1em;
	padding: 3px;
	text-align: left;
}

/*
----------------------------------
Home
----------------------------------
*/

.special p {
	color: #333;
}

/*
----------------------------------
Recipes
----------------------------------
*/

.recipe-print {
	border-left: 1px solid #d8d9d9;
	display: block;
	float: right;
	margin-bottom: -1px;
	padding: 4px 7px;
	text-align: center;
	width: 80px;
}

/*
----------------------------------
Order Page
----------------------------------
*/

#location-info {
	color: #444;
}

#s-depots {
	width:95%;
}

#o-contact {
	margin: 0;
}

#o-interval p { margin: 0 0 8px; }

#running-total p {
	color: #857532;
	font-size: 1.7em;
	font-weight: 500;
	line-height: 0.9em;
	margin: 0;
	padding: 0;
}

#running-total strong {
	color: #222;
	font-weight: 500;
}

#running-total em {
	color: #999;
	font-size: 11px;
	font-style: normal;
}

/*
----------------------------------
Profile Page
----------------------------------
*/

#shares-list {
	float: left;
	margin: 0;
	padding: 0;
	width: 170px;
}

#shares-list li {
	border-bottom: 1px solid #ddd;
	list-style-type: none;
	margin: 0 0 12px;
	padding: 0 0 3px;
}

	#shares-list li.share-active {
		background: url(../graphics/icon-sm-clock.png) no-repeat 0 0;
		padding-left: 22px;
	}
	
	#shares-list li.share-upcoming {
		background: url(../graphics/icon-sm-box.png) no-repeat 0 0;
		padding-left: 22px;
	}
	
	#shares-list li.share-complete {
		background: url(../graphics/icon-sm-tick.png) no-repeat 0 0;
		padding-left: 22px;
	}

#shares-list li a {
	font-size: 1.1em;
}

	#shares-list li a.selected {
		border: 0;
		color: #222;
		font-weight: bold;
	}

#shares-list li em {
	color: #888;
	display: block;
	font-style: normal;
}

.share-info {
	display: block;
	margin-left: 200px;
}

.share-info h4 {
	color: #222;
	font-size: 1.6em;
	line-height: 1.2em;
	margin: 0 0 1.2em;
}

.share-info h4 em {
	color: #888;
	display: block;
	font-size: .7em;
	font-style: normal;
}

#share-summary {
	border-top: 1px solid #ddd;
	padding: 12px 0 0;
}

#share-summary dt {
	display: block;
	float: left;
	line-height: 1.5em;
	margin: 0 0 5px;
	width: 80px;
}

#share-summary dd {
	color: #555;
	display: block;
	line-height: 1.5em;
	margin: 0 0 5px 100px;
}

	#share-summary dd.s-paid { color: green; }
	#share-summary dd.s-unpaid { color: red; }
	
#credit-list {
	border-bottom: 1px solid #ddd;
	margin: 0 0 15px;
	padding: 0;
}
	
#credit-list li {
	list-style-type: none;
	margin: 0 0 10px;
	padding: 0;
}

	#credit-list li.credit-used {
		text-decoration: line-through;
	}

#credit-list li strong {
	background-color: transparent;
	color: #222;
	font-weight: bold;
	padding: 0;
}

.credit-total {
	color: #222;
	font-size: 1.2em;
	font-weight: bold;
}

	.credit-total strong {
		color: #666;
	}

/*
----------------------------------
Top / Navigation
----------------------------------
*/

.summary h4,
.summary p {
	padding-right: 20px;
}

#nav ul {
	float: left;
	height: 25px;
	margin: 0 20px;
	padding: 0;
}

#nav li {
	float: left;
	list-style-type: none;
	margin: 0 7px;
}

#nav li a {
	background-position: 0 0;
	background-repeat: no-repeat;
	border: 0;
	display: block;
	height: 25px;
	overflow: hidden;
	text-indent: -99em;
}

	#nav li a:hover {
		background-position: 0 -25px;
	}

	#nav-home a { background-image: url(../graphics/nav-home.png); width: 40px; }
	#nav-order a { background-image: url(../graphics/nav-order.png); width: 78px; }
	#nav-gallery a { background-image: url(../graphics/nav-gallery.png); width: 80px; }
	#nav-recipe a { background-image: url(../graphics/nav-recipe.png); width: 77px; }
	#nav-contact a { background-image: url(../graphics/nav-contact.png); width: 87px; }
	#nav-winter a { background-image: url(../graphics/nav-winter.png); width: 78px; }
	#nav-summer a { background-image: url(../graphics/nav-summer.png); width: 88px; }

#nav img {
	float: none;
}

#session {
	color: #9ec082;
	float: right;
	height: 30px;
	line-height: 30px;
	margin: 0 20px 0 0;
}

#session a:link,
#session a:visited {
	border-bottom: 1px solid #9ec082;
	color: #555;
}

#session a:hover {
	border-bottom: 1px solid #6f7f62;
	color: #222;
}

#session strong {
	color: #6f7f62;
	font-weight: normal;
}

/* Top Season Nav */

#topnav {
	margin: 0;
	padding: 0;
	width: 66%;
	
}

#topnav li {
	float: left;
	font-size: 1.7em;
	line-height: 1em;
	list-style-type: none;
	margin: 0;
	padding: 6px 3%;
	position: relative;
	width: 17%;
}

#topnav li a {
	border: 0;
	display: block;
	margin: 0;
	text-decoration: none;
	text-transform: lowercase;
}

	#topnav li a:link,
	#topnav li a:visited {
		color: #7e9f63;
	}
	
	#topnav li a:hover {
		color: #222;
	}
	
	#topnav li.current { background-color: #edeae0; }
	#topnav li.current a { color: #222; }

#topnav li em {
	color: #999;
	display: block;
	font-size: 0.65em;
	font-style: normal;
}

/*
----------------------------------
Other stuff
----------------------------------
*/

.note {
	background: url(../graphics/icon-info.png) no-repeat 0 2px;
	padding-left: 23px;
}

.loader {
	background: url(../graphics/ajax-loader.gif) no-repeat 0 0;
	display: none;
	height: 24px;
	position: absolute;
	top: 7px;
	right: 10px;
	width: 24px;
}

#footer p {
	margin: 0 0 4px;
}

#special {
	background-color: #f8f6ec;
	border: #857532 1px solid;
	padding: 1px 10px;
}


/*
--------------------------------------------
Special Calendar - Profile Page
--------------------------------------------
*/

.cal_highlight{
	background-color:#c4e2f6;
}

#calendarwidget table td, #calendarwidget table th{
	padding:4px;
	border:#999 solid 1px;
	width:14.285%;
	vertical-align:top;
}

#calendarwidget table td{
	height:50px;	
}

#calendarwidget table td img{
	float:right;
}

#calendarwidget .calendar-month {
	color: #857532;
	font-size: 1.2em;
	font-weight: 500;
	margin: 0 0 10px;
}

#calendarwidget .calendar-next{
	float:right;
}

#calendarwidget .calendar-prev{
	float:left;
}
	
#calendarwidget {
	margin-bottom:15px;
}