/* Main CSS Document */

/* Reset ---------------------------------------*/
/* html5doctor.com Reset Stylesheet - v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body { line-height:1; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;	
	font-style:italic;
	font-weight:bold;
}

del { text-decoration:line-through; }

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;	
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select { vertical-align:middle; }

/* Forms ------------------------------------- */
label       { font-weight: bold; display: block; }
fieldset    { padding: 20px; margin: 0 0 21px 0; }
legend      { font-weight: bold; font-size: 17px; }

/* Form fields */
input.text, input.title,
input#Email,
textarea, select {
  margin: 7px 0;
  border: 1px solid #283118;
}
input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border:1px solid #666;
}
input.text,
input#Email,
input.title   { width: 300px; padding: 5px; }
input.title   { font-size: 21px; }
textarea      { width: 448px; height: 100px; padding: 5px; }
input.submit-button { width: 150px; height: 40px; margin: 0 0 0 311px; }

.input-bg { position: relative; }
label.error {
	position: absolute;
	top: -16px;
	right: 150px;
	padding: 3px;
	color: #da3939;
	font-size: 14px;
	text-align: right;
	font-style: italic;
	font-weight: bold;
}

/* Type --------------------------------------- */
body { 
  font-size: 14px; /* Base font size: 14px */
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  line-height: 1.429;
}

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 24px; line-height: 1; margin-bottom: 7px; }
h2 { font-size: 22px; line-height: 1; margin-bottom: 11px; }
h3 { font-size: 20px; line-height: 1; margin-bottom: 14px; }
h4 { font-size: 18px; line-height: 1.25; margin-bottom: 18px; }
h5 { font-size: 16px; font-weight: bold; margin-bottom: 21px; }
h6 { font-size: 14px; font-weight: bold; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 11px;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

/* Anchors */
a { outline: 0; }
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
    padding: 0 1px;
    text-decoration: underline;
}
a:hover, a:active { text-decoration: none; }

/* Paragraphs */
p {margin-bottom: 16px;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i     {font-style: italic;}

/* Text elements */
blockquote  { margin: 21px; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 21px; font-style: italic; }

pre 				{ margin: 21px 0; white-space: pre; }
pre,code,tt { font: 7pxm 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Lists */
ul          { list-style-type: none; }
ol          { list-style-type: none; }

dl          { margin: 0 0 21px 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 21px;}

/* HTML Tables */
table {margin: 7px auto 21px auto; width: 98%;}  

/* Thead */
thead th {
  padding: 7px 6px;
  font-weight: bold;
  text-align: left;
}
thead td {}

/* Tbody */
tbody td {padding: 7px 6px;}
tbody th {}

tbody .alt td {}
tbody .alt th {}

/* Tfoot */
tfoot th, tfoot td { font-style: italic; }

/* Content */
#welcomeIntro { font-size: .95em; font-weight: bold; text-align: right; width: 100%; }

/* Content Contact Us Page */
#form > p     { text-align: center; font-weight: bold; padding: 14px 0 0 0; }

/* Color  --------------------------------------*/
body { color: #222; background: #283118; }

/* Headings */
h1,h2,h3,h4,h5,h6 { color: #111; }

/* Anchors */
a { color: #283118; }
a:link, a:visited { color: #283118; }
a:hover, a:active, a:hover { color: #cdcd92; text-decoration: underline; }

/* Paragraphs */
::-moz-selection {background: #666; color: #f8f8f8;}
::selection {background: #666; color: #f8f8f8;}

/* Text elements */
blockquote  { color: #666; }
del         { color: #666; }

/* HTML Tables */
thead th 		{ background: #c3d9ff; }
tr.even td  { background: #e5ecf9; }
caption     { background: #eee; }

/* Header */
#banner { background: #f8f8f8 url(../images/bgImageContent.gif) repeat-y; }

/* Seperators */
.seperator {
  background: #283118 url(../images/bgImageWide.gif) no-repeat top left;
}
#topSeperator    { height: 34px; background-position: 0 0; }
#midSeperator    { height: 11px; background-position: 0 -34px; }
#bottomSeperator { height: 35px; background-position: 0 -45px; }

/* Content */
#content { background: #f8f8f8 url(../images/bgImageContent.gif) repeat-y; }
#content img  { border:2px solid #351B1A; }
#welcome #welcomePic img { border-style: none solid none none; }

/* Content Contact Us Page */
#form    { border:2px solid #351B1A; background: #cdcd92; }

/* Footer */
footer { color: #cdcd92; }
footer a { color: #cdcd92; }
footer a:link, footer a:visited { color: #cdcd92; }
footer a:hover, footer a:active, footer a:hover { color: #f8f8f8; text-decoration: underline; }

/* Layout ------------------------------------- */
/* Body */
body { margin: 20px 0; }

.bodyContent {
  clear: both;
  width: 960px;
  margin: 0 auto;
}

figure       { line-height: 1%; }

/* Header */
#banner { height: 210px; position: relative; }
#banner figure#logo {
  height: 200px;
  width: 250px;
  background: #f8f8f8 url(../images/serendipityLogo.gif) no-repeat;
  margin: 0 0 0 20px;
  text-indent: -9999px;
}

nav     { position: absolute; right: 35px; top: 125px; }
nav ul  { float: right; height: 70px; }
nav li  {
  display: block;
  float: left;
  background: #f8f8f8 url(../images/navButton.gif) no-repeat 0 0;
  height: 70px;
  width: 110px;
  text-align: center;
  position: relative;
}
nav li a {
  display: block;
  height: 55px;
  text-indent: -9999px;
  background-image: url(../images/navNames.gif);
}

#primaryNav { top: 125px; }
#subNav     { top: 10px; }

nav li:hover { background-position: 0 -69px; }

nav li.welcome a   { background-position: 0 0; }
nav li.amenities a { background-position: 0 -69px; }
nav li.hosts a     { background-position: 0 -139px; }
nav li.concierge a { background-position: 0 -209px; }
nav li.decide a    { background-position: 0 -279px; }
nav li.rates a,
nav li.ratesCall a { background-position: 0 -349px; }
nav li.blog a      { background-position: 0 -419px; }
nav li.contact a   { background-position: 0 -489px; }
nav li.comeIn a    { background-position: 0 -559px; }
nav li.ratesBook a { background-position: 0 -629px; }

#welcome li.welcome, #amenities li.amenities, #hosts li.hosts, #concierge li.concierge, #decide li.decide, #rates li.rates, #blog li.blog, #contact li.contact { background-position: 0 -140px; }

/* Content */
#content       { position: relative }
#contentDiv    { padding: 14px 39px; }
#contentDiv h2, #contentDiv section { clear: both; }
#contentDiv section { position: relative; height: 337px; margin-bottom: 21px; }
#contentDiv section.nonSerendipity { height: 115px; }
#content figure.floatRight { float: right; padding: 0 0 0 14px; }
#content figure.floatLeft  { float: left; padding: 0 14px 0 0; }
#content figure.positionBottomLeft  { position: absolute; bottom: 0; left: 0; }
#content figure.positionBottomRight { position: absolute; bottom: 0; right: 0; }
#contentNav  { position: absolute; bottom: 4px; top: inherit; }
p:last-child { width: 85%; }

li.blog { display: none; }

/* Content Welcome Page */
#welcome #content    { height: 386px; }
#welcome #contentDiv  { float: right; width: 30%; height: 358px; }
#welcome #contentDiv p:last-child { width: 59%; }
#welcomePic { 
  position: relative;
  top:-386px;
  bottom:0px;
  left:19px;
  height:401px;
  width:595px;
 }

/* Concierge Page */
.nonSerendipity p { width: 100%; }

/* Content Rates & Contact Us Pages */
#form           { width: 500px; height: 420px; float:right; }
#form h2, #form h3 { text-align: center }
#form h2        { margin: 145px 0 15px 0; }
#contactUsPic   { position: absolute; bottom: 9px; }
#contactUsDiv   { width: 40%; }
#ratesDiv       { width: 30%; }
#content footer { clear: both; height: 9px; }

/* Footer */
#contentinfo    { text-align: center; }
footer li       { display: inline; padding: 0 40px; }