/*-----------------------------------------------

				MIPO AT HOME
				------------
				
SCREEN - Main Stylesheet

web					: http://mipo.co.uk
version				: 1.2.0
date				: 09.11.2008

copyright			: (c) 2008 Skets Creative
author				: Mike Prince, Skets Creative
web					: http://skets.co.uk

------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------
	STYLE RESET
-------------------------------------------------------------------------------------------------*/
html, body, div, span, h1, h2, h3, h4, h5, p, a, em, img, ul, li, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 12px;
	font-family: "Avant Garde", "Century Gothic", verdana, "MS Trebuchet", sans-serif;	
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

html {
	height: 100%;
	background-color: #fff;
}

body {
	line-height: 1.5;
	background-image: url(../images/bg_tile.png);
	background-repeat: repeat-x;
	height: 100%;	
}

ul {
	list-style: none;
}

/*-------------------------------------------------------------------------------------------------
	TYPOGRAPHY
-------------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, p, ul, ol { 
	margin: 0 0 21px 0; 
}
 
h1 { 
	font-size: 46px; 
	line-height: 42px; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	text-align: center; 
	margin: 0 0 10px 0;
	color: #503523;
	font-style: italic;
}
 
h1 a { 
	color: #fff !important; 
	text-decoration: none; 
}
	
h1 a:hover { 
	text-decoration: underline; 
}
 
h2, h3 { 
	font-size: 21px; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	line-height: 31px; 
	margin-bottom: 10px; 
	color: #503523;
}

h3 { 
	color: #aaa; 
	font-size: 18px; 
	letter-spacing: 2px; 
}
 
h4 { 
	font-size: 14px; 
	color: #503523; 
	margin-left: 20px;
}
 
h5 { 
	font-size: 14px; 
	color: #503523; 
}
 
h5 span { 
	color: #fff; 
	font-size: 12px; 
	line-height: 18px; 
}
 
p, ul, ol {
	font-size: 12px; 
	line-height: 21px; 
	color: #503523;
}

/*-------------------------------------------------------------------------------------------------
	MAIN LAYOUT
-------------------------------------------------------------------------------------------------*/
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
}

#footer, #push {
	height: 8px; /* .push must be the same height as .footer */
	font-size: 10px;
	color: #503523;
	text-align: center;
	clear: both;
}

#content {
	padding: 15px;
	margin-top: -30px;
}

/*-------------------------------------------------------------------------------------------------
	NAVIGATION
-------------------------------------------------------------------------------------------------*/
#navbar {
	margin: 30px 0 0 50px
}

#navbar li #nav_logo a {
	display: block;
	width: 189px;
	height: 73px;
	background-image: url('../images/nav_logo.gif');
	margin-top: 10px;
	float: left;
}

#navbar li {
	display:inline;
}

#navbar li #nav_contact_details {
	padding: 23px 50px 0 0;
	text-align: right;
	font-size: 72%;
	color: #503523;
}

#nav_contact {
	position: absolute;
	top: -10px;
	left: 81%;
	height: 41px;
	width: 130px;
	margin-top: 10px;
}

#left_image {
	position: absolute;
	top: 160px;
	left: 0;
	height: 430px;
	width: 300px;
	margin-top: 10px;
	background: url('../images/parsley.gif');
}

#left_image_pinboard {
	position: absolute;
	top: 110px;
	left: 0;
	height: 508px;
	width: 313px;
	margin-top: 10px;
	background: url('../images/pinboard.gif');
}

#right_image {
	position: absolute;
	top: 160px;
	right: 0;
	height: 430px;
	width: 341px;
	margin-top: 10px;
	background: url('../images/cup.gif');
}

#intro_text {
	width: 620px;
	padding: 110px 0 0 32%;
	text-align: justify;
}

#intro_text p {
	margin-right: 30px;
}

#coffee_text {
	position: absolute;
	width: 620px;
	top: 200px;
	left: 10%;
	font-style: italic;
	text-align: justify;	
}

#workshop_text {
	width: 620px;
	margin: 200px auto 0 340px;
	font-style: italic;
	text-align: justify;	
}

#blooming_text {
	width: 620px;
	margin: 200px auto 0 40%;
	font-style: italic;
	text-align: justify;	
}

#blooming_girl {
	float: left;
	margin: 141px -30px 0 0;
}

.gallery_demo_unstyled p {
	clear: both;
	margin-left: 5px;
	padding-top: 7px;
}

#workshop_image {
	height: 284px;
	width: 257px;
	margin-left: 60%;
	background: url('../images/workshop.gif');
}

#index_nav {
	margin-top: 105px;
}

#index_nav li {
	display: inline;
	float: left;
	margin-right: 24px;
	width: 180px;
	font-size: 10px;
	font-style: normal;
	line-height: 15px;
}

#blooming {
	padding: 230px 0 60px 0;
	text-align: center;
}

#holding {
	position: absolute;
	top: 150px;
	left: 50%;
	margin-left: -188px;
}

#holding img {
	text-align: center;
}

/*-------------------------------------------------------------------------------------------------
	INDEX NAVIGATION
-------------------------------------------------------------------------------------------------*/
/*--- INDEX:NAV:COFFEE------------------------*/
#index_nav li #index_nav_coffee a {
	display: block;
	width: 180px;
	height: 110px;
	background-image: url('../images/index_nav_coffee.jpg');
	margin-top: 10px;
}

#index_nav li #index_nav_coffee a:hover {
	background-position: -180px 0;
}

/*--- INDEX:NAV:ATHOME------------------------*/
#index_nav li #index_nav_athome a {
	display: block;
	width: 180px;
	height: 110px;
	background-image: url('../images/index_nav_athome.jpg');
	margin-top: 10px;
}

#index_nav li #index_nav_athome a:hover {
	background-position: -180px 0;
}

/*--- INDEX:NAV:WORKSHOP-----------------------*/
#index_nav li #index_nav_workshop a {
	display: block;
	width: 180px;
	height: 110px;
	background-image: url('../images/index_nav_workshop.jpg');
	margin-top: 10px;
}

#index_nav li #index_nav_workshop a:hover {
	background-position: -180px 0;
}

/*-------------------------------------------------------------------------------------------------
	NAVIGATION
-------------------------------------------------------------------------------------------------*/
#navbar li #nav_coffee a {
	display: block;
	width: 171px;
	height: 60px;
	background-image: url('../images/nav_coffee.gif');
	margin-top: 16px;
	float: left;
}

#navbar li #nav_coffee a:hover {
	background-position: -170px 0;
}

#navbar li #nav_athome a {
	display: block;
	width: 171px;
	height: 60px;
	background-image: url('../images/nav_athome.gif');
	margin-top: 16px;
	float: left;
}

#navbar li #nav_athome a:hover {
	background-position: -170px 0;
}

#navbar li #nav_workshop a {
	display: block;
	width: 171px;
	height: 60px;
	background-image: url('../images/nav_workshop.gif');
	margin-top: 16px;
	float: left;
}

#navbar li #nav_workshop a:hover {
	background-position: -170px 0;
}

/*-------------------------------------------------------------------------------------------------
	SHOP PAGE GALLERY
-------------------------------------------------------------------------------------------------*/
.demo {
	position: relative;
	margin-top: 120px;
}

.gallery_demo_unstyled {
	width: 900px;
	margin: 0 auto; 
	margin-top: -10px;
}

.gallery_demo_unstyled li {
	width: 140px;
	height: 60px;
	margin: 0 5px 5px;
	float: left;
}

#main_image {
	margin: -10px auto 60px auto;
	height: 300px;
	width: 700px;
	background: #f4f2f0;
}

#main_image img {
	margin-bottom: 10px;
}

/*-------------------------------------------------------------------------------------------------
	MODAL CONTACT FORM
-------------------------------------------------------------------------------------------------*/
/*--- OVERLAY ----------------------------------*/
#contact-overlay {
	background-color: #503523; 
}

/*--- CONTAINER --------------------------------*/
#contact-container {
	width: 420px; 
	left: 50%; 
	top: 15%; 
	margin-left: -210px; 
	font-size: 16px; 
	text-align: left;
}

#contact-container .contact-content {
	background-color: #f4f3f1; 
	color: #ddd; 
	height: 40px;
}

#contact-container h1 {
	color: #d76300; 
	margin: 0; 
	padding: 0 0 6px 12px; 
	font-size: 1.2em; 
	text-align: left;
}

#contact-container .contact-message {
	text-align: center;
}

#contact-container .contact-error {
	width: 92%; 
	font-size: 0.8em; 
	background: #503523; 
	border: 2px solid #ccc; 
	font-size: 0.8em; 
	font-weight: bold; 
	margin: 0 auto; 
	padding: 2px;
}

#contact-container br {
	clear: both;
}

#contact-container form {
	padding: 0; 
	margin: 0;
}

#contact-container label {
	clear: left; 
	display: block; 
	width: 100px;
	float: left; 
	text-align: right; 
	padding-right: 4px; 
	color: #503523;
}

#contact-container .contact-input {
	float: left; 
	padding: 2px; 
	margin: 2px; 
	background: #f3f2f0; 
	border: 1px solid #e2e1df; 
	width: 250px;
}

#contact-container textarea {
	height: 84px;
}

#contact-container .contact-top {
	height: 13px; 
	background: url(../images/contact_modal/contact/form_top.gif) no-repeat; 
	padding: 0; 
	margin: 0;
}

#contact-container .contact-bottom {
	height: 13px; 
	background: url(../images/contact_modal/contact/form_bottom.gif) no-repeat; 
	font-size: 0.7em; 
	text-align: center;
}

#contact-container .contact-bottom a,
#contact-container .contact-bottom a:link,
#contact-container .contact-bottom a:active,
#contact-container .contact-bottom a:visited {
	position: relative; 
	float: right; 
	padding-right: 10px;
	top: -4px; 
	text-decoration: none; 
	color: #976442;
}

#contact-container .contact-bottom a:hover {
	color: #fff;
}

#contact-container .contact-button {
	margin: 4px 0 0 4px; 
	cursor: pointer; 
	height: 73px; 
	border: 0; 
	font-size: 1em; 
	font-weight: bold; 
	color: #fff; 
	text-align: center; 
	vertical-align: middle;
}

#contact-container .contact-send {
	margin-top: 4px; 
	margin-left: 12px; 
	width: 114px; 
	background: url(../images/contact_modal/contact/send.gif) no-repeat;
}

#contact-container .contact-cancel {
	width: 114px; 
	background: url(../images/contact_modal/contact/cancel.gif) no-repeat;
}

#contact-container a.modalCloseX {
	margin-top: 5px;
}

#contact-container a.modalCloseX,
#contact-container a.modalCloseX:link,
#contact-container a.modalCloseX:active,
#contact-container a.modalCloseX:visited {
	text-decoration: none; 
	font-weight: bold; 
	font-size: 1.2em; 
	position: absolute; 
	top: -2px; 
	left: 400px; 
	color: #999;
}

#contact-container a.modalCloseX:hover {
	color: #9bb3b3;
}