/*******************************************************
CSS File:	 screen.css

Site Title:	Cubita - Cafe De Cuba (Version: 1.0)
Site URI:	 http://www.cubita.co.nz/

Author:		 TOUCH/CAST Next
Author URI:	 http://www.touchcastnext.com/

Description: Contains all css used to place, size & position
             the primary elements of the site.
*******************************************************/

/* Reset All Browser Styles */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, object, embed, param {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
	color:#330000;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
}
* {
	margin: 0;
	padding: 0;
	border:0;
	line-height: 1.5em;
}
/* Main Page Tags */
html {
	overflow-y: scroll;
}
/* Useful styles for debugging */
/** { border:1px solid red; }*/

/* General Page Styles */

.clear {
	clear:both;
}
strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
#hide, .hide {
	display: none;
}
hr {
	display: none
}

p.clear, br.clear, hr.clear {
	display: block;
	clear:both;
	padding: 0;
	margin: 0;
	line-height: 1%;
	font-size: 1%;
	height: 1px;
}

a {
	color:#aa0000;
}
a:hover {
	text-decoration:none;
}

h2 a, h3 a, h4 a, ul#nav li a {
	text-decoration: none;
}

ul, ol {
	list-style-type: none;
}
body {
	background: #160100;
	text-align: center;
	color: #330000;
	font-size: 11px;
	font-family: Georgia, Times, serif;
}
#nav a {
	font-family: Arial, Helvetica, sans-serif;
	color: #330000;
}
#nav a:hover {
	color: #aa0000;
}
/* --------------- Image Replacement -------------- */

*.replace {
	font-size: 1%;
	position: relative;
	left: -5000px;
	text-decoration: none;
}
/* --------------- Main Structural Elements -------------- */


div.frame {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: #F4E0C5;
	position: relative;
}
div#floatleft {
	float:left;
	padding: 0;
	width: 350px;
	text-align: left;
	position: relative;
}

div#mainleft div#floatleft h3, div#mainleft div#floatleft p {
	width: auto;
	padding-left: 25px;
	padding-right: 25px;
}
div#main {
	background: url("../images/bg_right.gif") top right repeat-y;
}
div#masthead {
	height: 252px;
	background: url("../images/masthead.jpg") no-repeat;
	position:relative;
}
div#details {
	position: absolute;
	text-align: right;
	font-weight:bold;
	left: 560px;
	top: 102px;
}
div#masthead p a {
	background: url("../images/logo.jpg") top right no-repeat;
	display: block;
	width: 247px;
	height: 128px;
	position: absolute;
	top: 85px;
	left: 130px;
	text-decoration:none;
}
/* --------------- Nav -------------- */

ul#nav {
	height: 65px;
	position: absolute;
	left: -34px;
	top: 162px;
	/*background: url("../images/nav_bg.gif") no-repeat;*/
	padding-left:489px;
}
ul#nav li {
	display:block;
	float: left;
	height: 65px;
	margin-top: 11px;
}
ul#nav li.current a,
ul#nav li.section a {
	color:#aa0000;
}
ul#nav li a {
	display:block;
	float: left;
	height: 65px;
	margin-top: 11px;
	padding: 15px 0 0 25px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}
div.frame ul#nav li a:hover {
	background-position: left;
}
ul#nav li.nav-home {
	width:85px;
}
ul#nav li.nav-home a {
	width: 85px;
	/*background: url("../images/nav_home.jpg") no-repeat top left;*/
}
ul#nav li.nav-coffee {
	width:101px;
}
ul#nav li.nav-coffee a {
	width: 101px;
	/*background: url("../images/nav_coffee.jpg") no-repeat top left;*/
}
ul#nav li.nav-photos {
	width:102px;
}
ul#nav li.nav-photos a {
	width: 102px;
	/*background: url("../images/nav_photos.jpg") no-repeat top left;*/
}
ul#nav li.nav-contact {
	width:101px;
}
ul#nav li.nav-contact a {
	width: 101px;
	/*background: url("../images/nav_contact.jpg") no-repeat top left;*/
}

div.frame#home div#masthead ul#nav li.nav-home a,
div.frame#coffee ul#nav li.nav-coffee a,
div.frame#photos ul#nav li.nav-photos a,
div.frame#contact ul#nav li.nav-contact a,
div.frame#login ul#nav li.nav-login a {
	background-position: bottom;
}
div.frame#home .typography {
	width: 540px;
}

/* --------------- Menu 2 ------------------------------- */

#Menu2 {
	position: relative;
	top: 70px;
	float: right;
	width: 160px;
	margin-right: 25px;
}
#Menu2 a {
	font-size: 14px;
	text-decoration: none;
}
#Menu2 a:hover,
#Menu2 li.current a {
	text-decoration: underline;
}

/* --------------- Left (Main) Column ------------------- */

div#mainleft {
	margin: 0;
	background: url("../images/bg_tile.jpg") 0px 0px;
	padding-right: 96px;
	padding-left: 130px;
	position: relative;
	/*height: 578px;*/
}

/* --- Body styles ---*/

div#mainleft p,
div#mainleft span {
	padding-bottom: 1em;
	line-height:1.6em;
	padding-left: 25px;
}
div#mainleft span {
	display: block;
}
div#mainleft p span {
	padding: 0;
}

div#MainContent p,
div#MainContent span {
	padding-bottom: 1em;
	line-height:1.6em;
	padding-left: 25px;
	width: 490px;
}
div#MainContent p span {
	padding: 0;
}

div#mainleft div.pedro, div#mainleft div.maria {
	padding: 0 0 20px 0;
	/* background: url("../images/pedro.jpg") no-repeat 10px 5px  ; */
	width: 340px;
}
div#mainleft div.pedro {
	margin-bottom: 20px;
}

div#mainleft div.maria {
	/* background: url("../images/maria.jpg") no-repeat 10px -5px  ; */
}

div#mainleft div.pedro p, div#mainleft div.maria p {
	/* width: auto; */
	padding-bottom: 4px;
}

div#mainleft h1.title {
	width: 100%;
	font-size: 36px;
	line-height: 1.1em;
	padding: 25px 0 25px 20px;
	text-transform: uppercase;
	/*background: url("../images/welcome_head.jpg") no-repeat;*/
}
div#mainleft p.home_photo, div#mainleft p.coffee_photo {
	position:absolute;
	left: 570px;
	top:100px; /*top:115px;*/
	background: url("../images/home_photo.jpg") no-repeat top;
	height: 393px;
	width: 290px;
	padding: 0;
}

div#mainleft p.home_photo a , div#mainleft p.coffee_photo a {
	display: block;
	height: 303px;
	width: 255px;
	text-decoration: none;
}
div#mainleft p.coffee_photo {
	position:absolute;
	left: 583px;
	background: url("../images/coffee_photo.jpg") no-repeat top;
}
div#mainleft p.coffee_bag {
	background: url("../images/coffeebag.jpg") no-repeat top;
	height: 350px;
	width: 330px;
	padding: 0;
}
div#mainleft p.we_are_here {
	background: url("../images/wearehere.jpg") no-repeat top;
	height: 350px;
	width: 330px;
	padding: 0;
}

div#mainleft p.we_are_here a {
	display: block;
	height: 320px;
	width: 280px;
	text-decoration: none;
}
div#mainleft h2.order {
	position:absolute;
	left: 672px;
	top:72px;
	height: 102px;
	width: 161px;
	overflow: hidden;
	padding: 0;
}

div#mainleft h2.order a {
	background: url("../images/order.jpg") no-repeat;
	height: 102px;
	width: 220px;
	display:block;
}

div#mainleft h2.order a:hover {
	background-position:bottom;
}

div#mainleft h2.content {
	padding-left: 25px;
	padding-right: 330px;
}
div#mainleft h2,
div#mainleft h3 {
	font-weight: bold;
	padding-left: 25px;
	padding-right: 250px;
	color: #aa0000;
}
div#mainleft h3.header2 {
	padding-right: 0
}
div#mainleft h3.subheader {
	padding-left: 105px;
	padding-right: 250px
}
div#mainleft h4 {
	font-weight: bold;
	font-size:120%;
	padding-left: 25px;
	padding-right: 250px;
	width: 400px;
}
div#mainleft h4.coffee_link,
div#mainleft h4.contact_link {
	float: left;
	height: 90px;
	width: 330px;
}
div#mainleft h4.coffee_link {
	padding-left: 20px;
}
div#mainleft h4.contact_link {
	padding-left: 10px;
}

div#mainleft h4.coffee_link a, div#mainleft h4.contact_link a {
background: url("../images/coffee_link.jpg") no-repeat top;
	height: 90px;
	width: 330px;
	display:block;
	background-position: top;
}

div#mainleft h4.contact_link a {
background: url("../images/contact_link.jpg") no-repeat top;
height: 87px;
}

div#mainleft h4.coffee_link a:hover, div#mainleft h4.contact_link a:hover {
	background-position: bottom;
}

div#mainleft p.email_link {
	position:absolute;
	left: 645px;
	top:22px;
	background: url("../images/email.jpg") no-repeat;
	height: 110px;
	width: 229px;
}
div#mainleft p.nopad {
	padding: 0;
}
div#mainleft p a {
	text-decoration: underline;
}

div.frame#home h2,
div.frame#home h3,
div.frame#home h4,
div.frame#home h5 {
	padding-right: 0;
}

/* ---------------- PHOTOS ---------------- */

div#mainleft ul#photos {
	width: 716px;
}

div#mainleft ul#photos li {
	display: block;
	float: left;
	height: 224px;
	width: 178px;
}

div#mainleft ul#photos li a {
	display: block;
	height: 224px;
	width: 178px;
	text-decoration: none;
}

div#mainleft ul#photos li a.photo01 {
	background: url("../images/photos_1.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo02 {
	background: url("../images/photos_2.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo03 {
	background: url("../images/photos_3.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo04 {
	background: url("../images/photos_4.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo05 {
	background: url("../images/photos_5.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo06 {
	background: url("../images/photos_6.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo07 {
	background: url("../images/photos_7.jpg") no-repeat top;
}
div#mainleft ul#photos li a.photo08 {
	background: url("../images/photos_8.jpg") no-repeat top;
}

/* ---------------- Form -------------------- */
form {
	padding-left:25px;
}
	form .field,
	form .FormHeading {
		margin-bottom: 15px;
	}
	form .left,
	form .FormHeading {
		font-weight: bold;
	}
	form .left {
		display: block;
		float: left;
		width: 140px;
	}
	form .middleColumn {
		margin-left: 145px;
	}
	form .field input {

	}

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

div#footer {
	background: url("../images/footer_bg.jpg") no-repeat 50% 0%;
	height: 238px;
	text-align: center;
}
div#footer ul {
	padding: 20px 0 0 360px;

}
div#footer ul li {
	float: left;
	margin-right:0px;
	border-right:solid 1px #160100;
	padding: 0 10px;/*font-style:italic;*/
	text-transform: uppercase;
}
div#footer ul li.last {
	border-right: none;
}
div#footer ul li a {
	font-weight: bold;
	color: #aa0000;
}
div#footer p {
	text-align:center;
	font-weight:bold;
	padding-top:34px;
	margin-right:0px;
}