/*
---------------------------- STANDARD SETTINGS 
*/

body, p ,h1 ,h2 ,h3 ,h4 ,h5 ,h6, ol, ul, form, blockquote {
	margin: 0px;
	padding: 0px;
}

h1, h2, h3, h4, h5, h6, pre, code {
	font-size: 62.5%;
}

a {
	text-decoration: none;
}

a img {
	border: none;
}

body {
	font-family: "Lucida Sans", Tahoma, Verdana, Arial, sans-serif;
	font-size: 62.5%;
	line-height: 150%;
	margin: 0;
	padding: 0;
	background-color: #fff;
}



/*
---------------------------- Main IDs 
*/

#idWrapper {
	width: 76em;
	margin: 0 auto;	
}

#idWrapperInner {
	clear: both;
	width: 76em;	
}

#idOutlineTop {
	width: 100%;
	background: url(../images/lattetude-black-outline-square.png) repeat-x top left;
}

#idOutlineLeft {
	width: 100%;
	background: url(../images/lattetude-black-outline-square.png) repeat-y top left;
}

#idOutlineRight {
	width: 100%;
	background: url(../images/lattetude-black-outline-square.png) repeat-y top right; 
}

#idOutlineBottom {
	width: 100%;
	background: url(../images/lattetude-black-outline-square.png) repeat-x bottom left;
}


/*
----------------------- Branding
*/

#idBrandingTop {
	width: 76em;
	height: 104px;
	background: url(../images/lattetude-branding-coffee-full-corner-bg2.png) no-repeat top right;
}

#idBrandingBottomCorner {
	width: 76em;
	height: 3.4em;
	background: url(../images/lattetude-main-nav-outside-curve.gif) no-repeat bottom right;
}

#idBrandingBottom {
	width: 76em;
	height: 3.4em;
	background: url(../images/lattetude-branding-bottom-inside.gif) no-repeat top right;
}

#idBranding {
	width: 76em;
	background: url(../images/lattetude-curve-top-right.png) no-repeat top right;
}

#idBrandingUpper {
	width: 76em;
	height: 118px;
	background: url(../images/lattetude-branding-coffee-corner-bg.png) no-repeat top right;
}

#idWebLogo {
	float: left;
	margin: 32px 0 0 32px;
}

#idStrap {
	float: left;
	margin: 77px 0 0 13px;
}


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

#idTopNav {
	float: right;
	margin: 1em 1.4em 0.6em 0;
}

#idTopNav li {
	float: right;
	padding: 0.1em 0.4em 0.1em 0.6em;
	margin-right: 0.8em;
	list-style: none;
	font-size: 0.9em;
	color: #949ba9;
	text-transform: uppercase; 
	background: url(../images/lattetude-top-nav-grey-bullet.gif) no-repeat left center; 
}

#idTopNav li a:link {
	display: block;
	text-decoration: none;
	text-align: center;
	border: 0;
	color: #949ba9;
}

#idTopNav li a:visited {
	display: block;
	text-decoration: none; 
	text-align: center;
	border: 0;
	color: #949ba9;
}

#idTopNav li a:hover {
	color: #616978;
	text-decoration: underline; 
}

#idTopNav li a:active {
	color: #616978;
	text-decoration: underline; 
}


/*
------------------------------ Main Navigation
*/

#idBrandingLowerOuter {
	width: 76em;
	height: 3.3em;
	background: url(../images/lattetude-white-outline-square.png) repeat-y top right;
}

#idBrandingLowerInner {
	width: 76em;
	height: 2.2em;
	background: #000 url(../images/lattetude-main-nav-outside-curve.png) no-repeat bottom right;
}

#idWhiteEnd {
	float: left;
	width: 11px;
	height: 2.2em;
	background-color: #fff;
}

#idRedEnd {
	float: left;
	width: 11px;
	height: 2.2em;
	background-color: #c41130;
}

#idGraduatedEnd {
	float: right;
	width: 80px;
	height: 2.2em;
	background: url(../images/lattetude-main-nav-graduated-end.png) no-repeat top right;
}

#idMainNav {
	float: left;
	width: 70.6em;
	height: 2.2em;
	padding: 0;
	margin: 0 0 0 11px;
	background: url(../images/lattetude-main-nav-bg-chip.png) repeat-x left top;
}

* html #idMainNav { /* for our IE6 friends and their double margin bug */
	display: inline;
}

#idMainNav li {
	float: left;
	list-style: none; 
}

#idMainNav li a {
	float: left;
	color: #fff;
	font-size: 1.0em;
	font-family: tahoma, arial, verdana, sans-serif; 
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none; 	
	display: block; 
	text-align: center; 
	height: 2.2em; 
	line-height: 2.2em;
	padding: 0 1.0em 0 1.0em; 
	margin: 0 0 0 0.8em;
	background: url(../images/lattetude-main-nav-bg-chip.png) repeat-x left 0;
}

#idMainNav li a span {
	font-size: 1.1em;
	color: #3eb1c6;
}

#idMainNav li a:active{
	background-position: 0 -128px;
}

#idMainNav li a:hover {
	background-position: 0 -64px;
}

#idMainNav li.current a, a:active, a:hover {
	color: #fff; 
	background-position: 0 -128px;
}

* html #idMainNav a{
	height: 1px;
	display: inline;
}

#idWhiteBand {
	width: 76em;
	height: 1.1em;
	margin: 0 0 0 11px;
	background-color: #fff;
}



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

#idMainWrapperOuter {
	width: 100%;
	background: url(../images/lattetude-black-outline-bottom-left.png) no-repeat bottom left;
}

#idMainWrapperInner {
	width: 100%;
	padding-bottom: 5em;
	background: url(../images/lattetude-black-outline-bottom-right.png) no-repeat bottom right;
}

#idHomeMainWrapper {
	margin: 0 11px 10px 22px;
}

#idHomeMainTop {
	height: 20em; 
	background-color: #3d1300;
}

.clBlackEnd {
	float: left;
	width: 11px;
	height: 100%;
	background-color: #000;
}

#idHomeTop {
	height: 100%;
	background: url(../images/lattetude-homepage-coffee-cup-image.jpg) no-repeat top left;
}

* html .clBlackEnd {  /* Combat the 3px gap in IE6 */
	margin-right: -3px;
}

* html #idTopContent {  /* Combat the 3px gap in IE6 */
	margin-left: 0;
}

#idPositioningText {
	float: left;
	width: 26em;
	margin: 1.6em 0 0 21em;
}

* html #idPositioningText {
	display: inline;
}

#idPositioningText h1 {
	color: #c78302;
	font-size: 1.6em;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	line-height: 125%;
	margin-bottom: 0.7em;
}

#idPositioningText h2 {
	color: #fff;
	font-size: 1.3em;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	margin-left: 1.3em;
	padding-top: 1em; 
}

#idPositioningText p {
	color: #fff;
	font-size: 1.2em;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	margin: 0 0 0.7em 2.0em;
}


#idNearestStore {
	margin-left: 52em;
}

#idNearestStore h2 {
	color: #fff;
	font-size: 1.3em;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	margin-bottom: 0.5em;
	padding-top: 1em; 
}

#idNearestStore img {
	padding: 0.2em;
	width: 18em;
	background-color: #fff;
	/*border: 1px solid #000; */
}

a:link.clNearestLink, a:visited.clNearestLink {
	display: block;
	font-size: 1.2em;
	margin-top: 0.3em;
	padding-left: 1.2em;
	color: #c78302;
	background: url(../images/lattetude-link-arrow-brown.gif) no-repeat left 0.2em;
	text-decoration: none; 
}

a:hover.clNearestLink, a:active.clNearestLink {
	color: #f9f0d2;
}

#idHomeMainBottom {
	clear: both;
	margin-top: 1.4em;
}

.clHomeCTA {
	float: left;
	width: 22.5em;
	margin-right: 2em;
}

* html .clHomeCTA {  /* IE6 double-margin bug */
	display: inline;
}

.clNoRightMargin {
	margin-right: 0em;
}

.clCTAImg {
	float: left;
	width: 6em;
	margin-right: 0.5em;
	
}

.clHomeCTAText {
	margin-left: 6.5em;
	width: 16em;
	display: block;
}

.clHomeCTA h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #a46502;
	margin-bottom: 0.5em;
}

.clHomeCTA h4 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 120%;
	color: #0197d0;
}

.clHomeCTA p {
	margin: 0 0 0.8em 0.5em;
	font-size: 1.2em;
	line-height: 130%;
	color: #3c0e00;
}

.clHomeCTA a:link.clReadMore, a:visited.clReadMore {
	font-size: 1.1em;
	margin-left: 0.4em;
	padding: 0.2em 0.8em 0.1em 2.0em;
	color: #a46502;
	background: #f9f0d2 url(../images/lattetude-link-arrow.gif) no-repeat left 0.1em;
	text-decoration: none; 
}

.clHomeCTA a:active.clReadMore {
	margin-left: 0.4em;
	color: #713000;	
	background-color: #f7e9bb;
	text-decoration: none; 
}

.clHomeCTA a:hover.clReadMore {
	margin-left: 0.4em;
	color: #713000;
	background-color: #f7e9bb;
	border-bottom: 1px solid #e3b978;
	border-right: 1px solid #e3b978;
	text-decoration: none; 
}

.clBrownLine {
	float: left;
	width: 1.1em;
	height: 11.2em;
	background-color: #3d1300;
}

#idClear {
	clear: both;
}

.clClear {
	clear: both;
}

/*
---------------------------- Breadcrumbs
*/

#idBreadCrumbs {
	font-size: 1.1em;
	color: #949ba9;
}

#idBreadCrumbs a:link {
	color: #a46502;
}

#idBreadCrumbs a:visited {
	color: #a46502;
}

#idBreadCrumbs a:hover {
	color: #713000;
	text-decoration: underline; 
}

#idBreadCrumbs a:active {
	color: #713000;
	text-decoration: underline; 
}

#idBreadCrumbs span {
	padding: 0 0.6em;
}



/*
---------------------------- Content Main
*/

#idContentMainWrapper {
	margin: 0 11px 10px 22px;
	margin-top: 0px;
}

#idContentMain{
/* 	float: right; */
/*	width: 52em; */
	margin: 0 0 2em 20em;
	min-height: 35em;
}

* html #idContentMain {  /* IE doesn't recognise min-height */
	height: 35em;
	display: inline;
}

#idPageContent {	
	padding: 1em 10em 0 0;
}

* html #idPageContent {	
	height: 1px;
}

#idPageContent h1 {
	margin: 2em 0 1em 1.4em;
	font-size: 1.6em;
	line-height: 130%;
	color: #3c0e00;
}

#idPageContent h2 {
	margin: 2em 0 0.4em 2.2em;
	font-size: 1.4em;
	line-height: 130%;
	color: #a46502;
}

#idPageContent p {
	margin: 0 0 0.8em 3.4em;
	font-size: 1.2em;
	line-height: 150%;
	color: #3c0e00;
}

#idPageContent ol {
	margin: 0 0 0.8em 5.0em;
	font-size: 1.2em;
	line-height: 150%;
	color: #3c0e00;
}


#idPageContent p a:link, a:visited {
	color: #a46502;
}

#idPageContent p a:active {
	color: #713000;	
	text-decoration: underline;
}

#idPageContent p a:hover {
	color: #713000;
	text-decoration: underline; 
}

#idPageContent p a:link.clBG, a:visited.clBG {
	padding: 0.2em 0.8em 0.1em 2.0em;
	color: #a46502;
	background: #f9f0d2 url(../images/lattetude-link-arrow.gif) no-repeat left center;
	text-decoration: none; 
}

#idPageContent p a:active.clBG {
	color: #713000;	
	background-color: #f7e9bb;
	text-decoration: none; 
}

#idPageContent p a:hover.clBG {
	color: #713000;
	background-color: #f7e9bb;
	border-bottom: 1px solid #e3b978;
	border-right: 1px solid #e3b978;
	text-decoration: none; 
}

.clImageRight28 {
	float: right;
	width: 28em;
	margin: 1.6em -8em 2.0em 1.6em;	
}

* html .clImageRight28 {
	margin-right: -4em;  /* wierd - again, doin' it 'til it looks right... */	
}

.clImageRight28 img {
	border: 0;
	padding-bottom: 0.5em;
}

.clImageRight28 span {
	float: left;
	font-size: 1.1em;
	line-height: 130%;
	color: #949ba9;
	width: 24em;
}

.clMenuImage {
	float: right;
	width: 18em;
	margin: 4.5em 0em 1em 1em;	
}

* html .clMenuImage {
	margin-right: 0em;  /* wierd - again, doin' it 'til it looks right... */	
}

.clMenuImage img {
	border: 0;
	padding-bottom: 0.5em;
}

.clMenuImage span {
	float: left;
	font-size: 1.1em;
	line-height: 130%;
	color: #949ba9;
	width: 14em;
}



.clImageLeft {
	float: left;
	margin-left: 0;	
}

.clImageLeft img {
	border: 0;
	margin: 1.6em 1.6em 0.5em 0;	
}

.clImageLeft span {
	width: 2.8em;
	border: 0;
	font-size: 1.0em;
	line-height: 150%;
	color: #aaaaaa;
}

#idPageContent p.clName {
	margin: 0;
	margin-left: 2.2em;
	padding: 0;
	font-weight: bold;
	font-size: 1.3em;
} 

#idPageContent p.clJobTitle {
	margin: 0;
	margin-left: 2.7em;
	padding: 0;
	font-size: 1.1em;
}

.clAddress {
	float: left;
	width: 20em;
}

.clMap {
	margin: 0 0 2.0em 3.0em;
}




/*
--------------------------- Coffee and Food Listing Styles
*/

#idMenuListing {
/*	float: left; */
	width: 38em;
	margin: 1em 0em 1em 2em;
	padding: 0em 2em 3em 2em;
	background-color: #f5f0e9;
	border: 1px solid #471700;
}

* html #idMenuListing {
	width: 34em;
}

#idMenuListing h2 {
	margin: 1em 0 0 0;
	border-bottom: 1px solid #000;
	padding-bottom: 0.3em;
}

#idMenuListing h3 {
	color: #582e14;
	margin: 1em 0 0 0;
	font-weight: bold;
	font-size: 1.2em;
}

#idMenuListing span.clSpanHeader {
	color: #582e14;
	margin: 1em 0 0 0;
	font-weight: normal;
	font-style: italic;
	font-size: 80%;
}

#idMenuListing span.clSpanPara {
	color: #582e14;
	padding-top: 1.5em;
	font-weight: normal;
	font-style: italic;
	font-size: 100%;
}

#idMenuListing p {
	margin: 0;
	padding: 0;
	font-size: 1.0em;	
}

#idMenuListing p.clFootnote {
	margin: 2em 0 0 0;
	padding: 0.5em 1em;
	font-size: 1.0em;
	color: #a46502;
	border: 1px solid #000; 
	background-color: #fff; 
}

#idMenuListing li {
	padding: 0.5em 0 0 2.0em;
	list-style: none;
	background: url(../images/listing-arrow-bullet.gif) no-repeat 0.6em 0.8em; 
	color: #3c0e00;
}




/*
--------------------------- Section Navigation
*/

#idSectionNavWrapper {
	width: 18em;
	float: left;
	margin-right: 2em; 
	min-height: 2em;
}

* html #idSectionNavWrapper {
	height: 2em;
}

#idSectionNavWrapper .clBlackEnd {
	width: 11px;
	height: 100%;
	background: url(../images/lattetude-black-outline-square.png) repeat-y top left;
}


#idAboutUsImage {
	width: 18em;
}

#idAboutUsImage div {
	margin-left: 11px;
	height: 9em;
	background: #3d1300 url(../images/lattetude-about-us-section-nav-image.jpg) no-repeat top left;
}

#idAboutUsImage h2 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 4.2em 0.8em 0.8em 0.8em;
	text-align: right;
}


#idAboutOurCoffeeImage {
	width: 18em;
}

#idAboutOurCoffeeImage div {
	margin-left: 11px;
	height: 9em;
	background: #3d1300 url(../images/lattetude-our-coffee-section-nav-image.jpg) no-repeat top left;
}

#idAboutOurCoffeeImage h2 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 4.2em 0.8em 0.8em 0.8em;
	text-align: right;
}


#idAboutOurFoodImage {
	width: 18em;
}

#idAboutOurFoodImage div {
	margin-left: 11px;
	height: 9em;
	background: #3d1300 url(../images/lattetude-our-food-section-nav-image.jpg) no-repeat top left;
}

#idAboutOurFoodImage h2 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 4.2em 0.8em 0.8em 0.8em;
	text-align: right;
}


#idWhereToFindUsImage {
	width: 18em;
}

#idWhereToFindUsImage div {
	margin-left: 11px;
	height: 9em;
	background: #3d1300 url(../images/lattetude-where-to-find-us-section-nav-image.jpg) no-repeat top left;
}

#idWhereToFindUsImage h2 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 4.2em 0.8em 0.8em 0.8em;
	text-align: right;
}


#idContactUsImage {
	width: 18em;
}

#idContactUsImage div {
	margin-left: 11px;
	height: 9em;
	background: #3d1300 url(../images/lattetude-contact-us-section-nav-image.jpg) no-repeat top left;
}

#idContactUsImage h2 {
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 4.2em 0.8em 0.8em 0.8em;
	text-align: right;
}


#idSectionNav {
	float: left;
	width: 18em;
	margin-top: 2em;
}

* html #idSectionNav{ /*IE only rule. Original menu width minus all left/right paddings */
	width: 15em;
}

#idSectionNav ul{
	margin: 0px;
	list-style-type: none;
} 

#idSectionNav a{
	font-size: 1.1em;
	padding: 0.4em 0.8em 0.4em 2em;
	display: block;
	width: 100%;  /* Define width for IE6's sake */
	color: #a46502;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: right;
	border-bottom: 1px solid #000;
}

html>body #idSectionNav a{ /*Non IE rule*/
	width: auto;
}

#idSectionNav a:visited{
	color: #a46502;
}

#idSectionNav a:active{
	text-decoration: none;
}

#idSectionNav a:hover{
	color: #3c0e00;
}

#idSectionNav #currentpage a {
	color: #fff;
	background: #a46502 url(../images/lattetude-sec-nav-hover-bg.gif) no-repeat left top;
}

#idRewardCard {
	margin-top: 2em;
	float: left;
	width: 18em;
	height: 30em;
	background: #f0f0f0 url(../images/lattetude-reward-card-3d.jpg) no-repeat left -62px;
}

#idRewardCard h2 {
	float: left;
	margin: 11.4em 0 0.2em 0.8em;
	font-family: Georgia, serif;
	font-size: 1.6em;
	line-height: 110%;
	color: #3C0e00;
}

#idRewardCard p {
	margin: 1.0em;
	font-family: "Lucida Sans", Tahoma, Verdana, sans-serif;
	font-size: 1.2em;
	color: #000000;
}

#idRewardCard a:link.clReward, a:visited.clReward {
	margin: 0 0 1em 0.6em;
	padding: 0.2em 0.8em 0.1em 2.0em;
	font-size: 1.1em;
	color: #9d5d02;
	background: #eeddb9 url(../images/lattetude-link-arrow.gif) no-repeat left center;
	text-decoration: none; 
}

#idRewardCard a:active.clReward {
	color: #713000;	
	background-color: #e7cfa5;
	text-decoration: none; 
}

#idRewardCard a:hover.clReward {
	color: #713000;
	background-color: #e7cfa5;
	border-bottom: 1px solid #dec086;
	border-right: 1px solid #dec086;
	text-decoration: none; 
}

.clDownloadPDF {
	margin-top: 2em;
	float: left;
	width: 18em;
	height: 3em;
	background: url(../images/adobe-pdf-icon.png) no-repeat left top;
}

.clDownloadPDF a:link, .clDownloadPDF a:visited{
	display: block;
	margin-left: 3.2em;
	font-size: 1.2em;
	color: #a46502;
}

.clDownloadPDF a:hover, .clDownloadPDF a:active {
	color: #713000;
	text-decoration: underline; 
}



/*
--------------------------- Email Form
*/
#idEmailForm {
	margin-left: 4.0em; 
}

#idEmailForm .label {
	float: left;
	font-size: 1.2em;
	width: 11em;
	color: #3c0e00;
	margin: 0 0.4em 0.6em 0;
}

input#name, input#email, input#phone, textarea#message {
	float: left;
	margin: 0 0 0.6em 0.4em;
	font-size: 1.2em;
	color: #424240;	
}

textarea#message {
	font-size: 1.6em;
}

#idEmailForm select{
	font-size: 1.2em;
	color: #3c0e00;	
}

#idEmailForm select.clRefer{
	margin: 0 0 0.6em 0.4em;
	float: left;
}
	

#idEmailForm .clDateLabel {
	font-size: 1.1em;
	color: #3c0e00;
	margin: 0;
	padding: 0;	
}

#idEmailForm .formErrorText {
	font-style: italic;
	font-size: 1.1em;
	color: #c7345c;
}

#idEmailForm em {
	font-style: italic;
	font-size: 1.1em;
	color: #c7345c;
}

#idEmailForm .clButtonGroup {
	float: left;
	width: 20em;
}

#idEmailForm .bigButton { 
	font-family: "Lucida Sans", Verdana, Arial, sans-serif; 
	font-size: 1.0em; 
	margin-top: 0.6em;
	width: 6em;
	height: 2.2em;
	color: #424240;
}

.clFormGroup {
	float: left;
	width: 100%;
	margin: 0.3em 0;
}

.clDateGroupSet {
	float: left;
	width: 36em;
	margin: 0 0 0.6em 0.4em;
	padding: 0;
}

.clFormDateGroup {
	float: left;
	width: 16em;
	margin: 0;
	padding: 0;
}

.clFormDateGroup li {
	list-style: none;
	float: left;
	margin-right: 0.2em;
}

.clCheckBoxes {
	float: left;	
}

.clCheckBoxes span {
	font-size: 1.1em;	
	color: #3c0e00;
	margin-left: 0.5em;
}

.clContactDetails h2 {
	font-family: "Lucida Sans", Tahoma, Verdana, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #3c0e00;	
	margin-top: 0.8em;
}

.clContactDetails p {
	font-size: 1.2em;
	line-height: 1.2em;
	font-family: "Lucida Sans", Tahoma, Verdana, sans-serif;
	color: #3c0e00;
}

.clContactDetails p.clStrong {
	font-weight: bold;
	margin-top: 0.4em;
}
	
/*
--------------------------- Site Info
*/

#idSiteInfo {
	clear: both;
	width: 100%;
	min-height: 6em;
}

* htnl #idSiteInfo {
	height: 6em;
}

#idCopyright {
	float: left;
	color: #949ba9;
	text-transform: uppercase;
	margin: 5px 0 0 28px;
}

* html #idCopyright {
	display: inline;
}

#idCredits {
	float: right;
	display: block;
	width: 64px;
	height: 18px;
	background: url(../images/inspired-business-marketing-web-design-logo.png) no-repeat 0 0;
	margin: 8px 0 0 0;
}

#idCredits span {
	display: none;
}