/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

*:focus { outline: 0; }

body { line-height: 1em; color: black; background: #fff; }

ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img a { border: none; }

/* The *:focus rule is reset and suppresses link outlining. You _must_ remember to redefine your own outline, as it’s an important accessibility aid. E.g. *:focus   outline: #ccc dotted medium */
#navbar { position: absolute; z-index: 99; left: 700px; top: 0px; }
#navbar ul li a { display: block; text-decoration: none; color: black; background-image: url('../img/navbar.png'); background-repeat: no-repeat; font-size: 1.4em; }


#navbar a.menu_0_0 { padding: 53px 20px 12px 38px; background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px 0px; }
#navbar li.active a.menu_0_0, #navbar a.menu_0_0:hover { background-position: -178px 0px; }

#navbar a.menu_0_1 { background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px -80px; padding: 38px 37px 12px 34px; }
#navbar li.active a.menu_0_1, #navbar a.menu_0_1:hover { background-position: -178px -80px; }

#navbar a.menu_0_2 { background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px -145px; padding: 28px 37px 12px 37px; }
#navbar li.active a.menu_0_2, #navbar a.menu_0_2:hover { background-position: -178px -145px; }

#navbar a.menu_0_3 { background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px -200px; padding: 38px 0px 10px 31px; }
#navbar li.active a.menu_0_3, #navbar a.menu_0_3:hover { background-position: -178px -200px; }

#navbar a.menu_0_4 { background-image: url(../img/navbar.png); background-position: 0px -264px; background-repeat: no-repeat; padding: 22px 35px 5px 37px; }
#navbar li.active a.menu_0_4, #navbar a.menu_0_4:hover { background-position: -178px -264px; }

#navbar a.menu_0_5 { background-image: url(../img/navbar.png); background-position: 0px -311px; background-repeat: no-repeat; padding: 14px 35px 15px 40px; }
#navbar li.active a.menu_0_5, #navbar a.menu_0_5:hover { background-position: -178px -311px; }

#navbar a.menu_0_6 { background-image: url(../img/navbar.png); background-position: 0px -350px; background-repeat: no-repeat; padding: 36px 35px 10px 36px; }
#navbar li.active a.menu_0_6, #navbar a.menu_0_6:hover { background-position: -178px -350px; }

#navbar a.menu_0_7 { background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px -410px; padding: 66px 35px 10px 12px; }
#navbar li.active a.menu_0_7, #navbar a.menu_0_7:hover { background-position: -178px -410px; }

li#social_media_links { background-image: url(../img/navbar.png); background-repeat: no-repeat; background-position: 0px -500px; padding: 36px 35px 45px 15px; }
li#social_media_links a { display: inline; float: left; }

#navbar li.active a { color: white; }

body { color: black; background-color: #dcc297; background-image: url('../img/bg.jpg'); background-repeat: repeat; background-attachment: fixed; font-size: 14px; font-family: helvetica, arial, sans-serif; }

#logo { margin-bottom: 20px; position:fixed;top:20px;}

#title { z-index: 1; font-size: 10em; font-weight: bold; color: #534741; margin-bottom: -80px; }

#home { margin-bottom: 20px; margin-left: 20px; }

#footer { height: 200px; position: relative; color: white; font-size: 0.8em; font-weight: bold; background-image: url('../img/footer.png'); background-repeat: repeat-x; }
#footer ul { float: left; display: block; padding-right: 20px;max-width: 130px }
#footer li { margin-bottom: 3px; }
#footer a { color: white; text-decoration: none; }
#footer a:hover { color: #534741; text-decoration: underline; }
#footer p { margin-bottom: 3px; }
#footer p span { display: block; float: left; width: 130px; }
#footer li.main { color: #534741; font-size: 1.3em; margin-bottom: 15px; }
#footer li.main a { color: #534741; }
#footer h2 { font-size: 1.3em; color: #534741; margin-bottom: 15px; background-repeat: repeat-x; background-position: bottom left; }
/* background-image: url('../img/dots.png'); padding-bottom: 10px; */

#foot { position: relative; width: 350px; float: right; }

.wrapper { width: 800px; padding: 40px; position: relative; }

#marmalade { position: absolute; top: -10px; right: 0px; }

ul#subnav { z-index: 99; margin-bottom: 50px; position: relative; width:600px; list-style-type: none; margin: 0px; padding-top:120px; padding: 0px; display: block; }
ul#subnav * { z-index: 99; position: relative; }
ul#subnav li { margin: 0px; padding: 0px; display: inline; }
ul#subnav a { display: block; float: left; padding-right: 20px; margin-right: 10px; text-decoration: none; font-weight: bold; font-size: 1.7em; line-height:1em; color: #534741; background-image: url('../img/sub_dot.png'); background-repeat: no-repeat; background-position: center right; }
ul#subnav li.active a, ul#subnav a:hover { color: white; }
ul#subnav li:last-child a { background: none; }

#main { min-height: 550px; }

#content { padding-top: 60px; width: 580px; display: block; color: #534741; font-weight: bold; float: none; clear: both; line-height: 1.5em; }
#content h1 { font-size: 1.7em; font-weight: bold; margin-bottom: 0.7em; }
#content h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.4em; color: white; }
#content p { margin-bottom: 20px; }

#content p a {text-decoration:none;border-bottom:1px dashed #000;color:#3f4948}

#content p a:hover {text-decoration:underline}

#takeaway_coffee { position: absolute; position: fixed; top: 0; left: 800px; z-index: 1; }

#small_home { position: absolute; bottom: 0; right: -200px; }

#gmap { position: absolute; bottom: 30px; padding:10px; background:#fff; right: 200px; }

#clouds li {list-style: none;}

#cloud1 {height:98%;width:80%}

#cloud2 {height:94%;width:80%}

#cloud3 {height:96%;width:80%}

#cloud1 img {position:absolute;top:40px;left:600px;}

#cloud2 img {position:absolute;top:20px;left:250px;}

#cloud3 img {position:absolute;top:30px;left:400px;}

a.gallery {
	text-decoration: none;
	display:block;
	position: relative;
	float: left;
	margin:0px 0px -5px -5px;
	padding-top: 24px;
	padding-left: 24px;
	width:124px;
	height:149px;
}

.polaroid {
	top:0px;
	left:0px;
	position:absolute;
}

#contact_page #content {
	width:360px;
}

#clouds    {position:absolute; overflow:hidden; width:100%; height:100%;}