/* Generic
================================== */
/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt. */
img
{
	border-width: 0pt;
	margin: 0;
	padding: 0;
}


/* Typography generic
================================== */

/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin for top. Place background image with drop shadow for top part. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-top: 45px;
	background-color: #F6C048;
	background-image: url(../images/Flowers_Background_BG.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

/* Standard paragraph. Left, right and bottom padding. Set grey colour for text. 
Line-Height for leading.*/
p
{
	padding: 0 10px 10px 10px;
	color: #838383;
	line-height: 130%;
}

/* Standard heading h2. Same padding and colour as paragraph except bottom padding. Bigger font. */
h2
{
	padding: 0px 10px 15px 10px;
	color: #008264;
	font-size: 110%;
}

/* Standard heading h3. Different padding and colour. 100% font. */
h3
{
	padding: 5px 10px 5px 10px;
	color: #008264;
	font-size: 100%;
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

/* Links to be red. */
a:link
{
	color: #FF3500;
}

/* Visited links to be yellow. */
a:visited
{
	color: #F6C048;
}

/* Hover and active states to be green. */
a:hover, a:active
{
	color: #008264;
}


/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
185px(side) + 445px(primary) + 115px(secondary). */

/* Main wrapper with centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Background filler image for faux-columns with 750 width. */
#wrapper
{
	width: 750px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background-image: url(../images/Flowers_Background_Middle.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}


/* Header
================================== */

/* Top header with same width as wrapper and set height.
Place background image without repeat to line up with body background image. */
#header_one
{
	width: 750px;
	height: 155px;
	background-image: url(../images/Flowers_Background_BG.jpg);
	background-position: -100px -45px;
}

/* Images inside header_one to avoid inline element and alignemnet to the text baseline. */
#header_one img
{
	display: block;
}

/* Format header text/logo in green and bigger font. Center text. Padding top to move down. 
No padding on bottom. Set Papyrus as standard font if available on users machine. */
#header_one p
{
	color: #008264;
	font-size: 280%;
	font-family: Papyrus, Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	padding-top: 13px;
	padding-bottom: 0px;
}

/* Five boxes for four polaroid images and the Western Farmer's Markets logotext in the centre. 
All set width and height, with 5mm indent for both outer boxes. All float left. */
#header_one_boxOne
{
	width: 130px;
	height: 155px;
	padding-left: 5px;
	float: left;
}

#header_one_boxTwo
{
	width: 135px;
	height: 155px;
	float: left;
}

#header_one_boxThree
{
	width: 210px;
	height: 155px;
	float: left;
}

#header_one_boxFour
{
	width: 135px;
	height: 155px;
	float: left;
}

#header_one_boxFive
{
	width: 130px;
	height: 155px;
	padding-right: 5px;
	float: left;
}

/* Second header with same width as wrapper and set height. Align text center.*/
.header_two
{
	width: 750px;
	min-height: 20px;
	text-align: center;
}

/* Box inside header two to allow for margins left and right (drop shadow) and place repeated 
background image to fill header two. */
#header_two_box
{
	margin-left: 5px;
	margin-right: 5px;
	background-image: url(../images/Header_Two_BG.jpg);
	background-repeat: repeat-x;
}

/* Set colour for text inside header two to green. Slightly smaller font size. 
Line height same as height of container, even if the box appears taller 
(white beow does not matter here). */
.header_two p
{
	color: #008264;
	font-size: 92%;
	line-height: 20px;
}


/* PrimaryContent (middle column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. Margin bottom. */
#primaryContent
{
	float: left;
	width: 750px;
	display: inline;
	margin: 0;
}

/* Specifying threeColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 445. Margin on left to allow for sideContent with 185px width. 
Place carrot as background image in center and on top of primaryContent. */
#threeColLayout #primaryContent
{
	float: left;
	width: 445px;
	margin: 0 0 0 185px;
	background-image: url(../images/Single_Carrot_100.jpg);
	background-repeat: no-repeat;
	background-position: center 5px;
}

/* ID for box inside primaryContent. Margin all around. No margin top because of carrot alignment. */
#boxPrimary
{
	margin: 10px 10px 10px 10px;
}

/* List inside primary content. Square bullets. Move in from left. 
Also move 20px in from right for correct right alignment. */
#boxPrimary ul li
{
	list-style-type: disc;
	margin-left: 25px;
	margin-right: 20px;
	color: #838383;
}


/* SecondaryContent (right column)
================================== */

/* Secondly content to the right of primary content. Float left. 
Set width to 115px. Also margin top. Place background image (Flower graphic).
Minimum height to display whole flower. */
#secondaryContent
{
	float: left;
	width: 115px;
	margin-top: 12px;
	background-image: url(../images/Flower_SecContent.jpg);
	background-position: 0px 250px;
	background-repeat: no-repeat;
	min-height: 390px;
}

/* Hack for IE. IE does not understand min-height, but understands height. */
* html #secondaryContent
{ 
	height: 390px; 
}

/* Images inside secondaryContent to have margin on bottom. */
#secondaryContent img
{ 
	margin-bottom: 20px;
	margin-left: 15px;
}


/* SideContent (left column)
================================== */

/* Last comes the side content on the left hand side. 
Width 180px and negative margin of -745px to the left equals a width of 185px. */
#sideContent
{
	float: left;
	width: 180px;
	margin: 0 0 0 -745px;
}

/* ID for box inside SideContent. Contains navigation. 
Padding set for proper position inside sideContent. Set width of container. */
#boxSideContent 
{ 
	padding: 12px 10px 10px 20px;
	width: 150px;
}

/* Box Model Hack for IE5.5 to achieve correct width. */
* html #boxSideContent
{
	width: 180px;
	w\idth: 150px;
}

/* Second ID for second box inside SideContent. Contains quick links. 
Set width of container. */
#boxSideContentQuick 
{ 
	margin: 10px 10px 10px 20px;
	padding: 5px;
	width: 140px;
	background-color: #FDF2DA;
}

/* Box Model Hack for IE5.5 to achieve correct width. */
* html #boxSideContentQuick 
{ 
	width: 160px;
	w\idth: 140px;
}

/* Text inside second ID for second box inside SideContent. Green color. Set smaller font size. 
Set padding on top for nice distance.*/
#boxSideContentQuick p 
{ 
	color: #008264;
	font-size: 88%;
	padding-top: 5px;
}

/* No margins and padding. No bullet points. Red border on top of box (once only). */
#boxSideContent ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	border-top: 1px solid #FF3500;
}

/* All links display block for button effect. Padding to suit. Set width to give borders same length. 
Red border bottom of each list item. No underline. Set smaller font size. 
Place "Apple" background image and move into position. */
#boxSideContent a
{
	display: block;
	padding: 5px 0px 5px 19px;
	width: 132px;
	border-bottom: 1px solid #FF3500;
	text-decoration: none;
	font-size: 92%;
	background-image: url(../images/Apple_Nav.gif);
	background-repeat: no-repeat;
	background-position: 1px 3px;
}

/* Box Model Hack for IE5.5 to achieve correct width. */
* html #boxSideContent a
{
	width: 151px;
	w\idth: 132px;
}

/* All links to be green. */
#boxSideContent a:link
{
	color: #008264;
}

/* Visited links to be yellow. */
#boxSideContent a:visited
{
	color: #F6C048;
}

/* On hover and when active light green background and red text colour. 
Place "Apple" background image with background colour. */
#boxSideContent a:hover, #boxSideContent a:active
{
	background-color: #CCE6E0;
	color: #FF3500;
	background-image: url(../images/Apple_Nav_Green.gif);
	background-repeat: no-repeat;
	background-position: 1px 3px;
}

/* Horizontal rule under between quick links. */
.rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #008264;
	margin-left: 10px;
	margin-right: 10px;
}

/* Fieldset styles for contact form
================================== */

.zemContactForm fieldset
{
	border: none;
	margin-left: 10px;
	color: #008264;
}

.zemContactForm legend
{
	padding: 0.5em 0 0.5em 0;
	width: 60px;
}

.zemContactForm label
{
	float: left;
	width: 60px;
	margin: 0.7em 0 0.7em 0;
	text-align: left;
}

.zemContactForm br 
{
   clear: left;
}
   
.zemContactForm .zemSubmit 
{ 
	margin: 0.5em 0 0 60px; 
}

/* Error messages to be displayed without bullet points. */
ul.zemError
{
	padding-bottom: 3px;
	color: #F03;
}

ul.zemError li
{
	padding-bottom: 3px;
	color: #F03;
}


/* Google Map
================================== */

/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid text in map showing up left of map. */
#map
{
	padding-top: 5px;
	padding-bottom: 10px;
	margin-left: 12px;
	width: 400px;
	height: 330px;
	overflow: hidden;
}


/* Footer
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Footer contains different background filler image for faux-columns (bottom). */
#footerBar
{
	clear: both;
	width: 750px;
	background-color: transparent;
	background-image: url(../images/Flowers_Background_Bottom.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
}

/* Paragraph style for footer text. Centred and smaller. 
Padding top and bottom to even out vertically. Green border on top of footer text. 
Margin left and right to allow for drop shadow edges. */
#footerBar p
{
	font-size: 80%;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	border-top: 1px #008264 solid;
}

/* Web Design
================================== */

/* Class for Web Design Ottimoto text and link outside wrapper and below footer. */
.webdesign
{
	font-size: 80%;
	text-align: center;
}

/* Always in red on every link stage. */
.webdesign a
{
	color: #FF3500;
}