/* Rosslyn: St Mawes, Cornwall 
   Author: Andy Beeching (blue-kiwi.net)
   Date: 28th February 2006
   Feel free to poke around the code, use any if you feel it's worth it, but don't steal my graphix or layout, cheers!
*/

/*-------------------------------------------------------
			  Setting up the structure
--------------------------------------------------------*/

* {
	padding: 0px;
	margin: 0px;
}

/* The z-index and position: relative is part of the Image replacement technique used throught this site, see further down this page for details */

body {
	background: #E9EFF3 url("../images/bg.gif") repeat-x fixed;
	text-align: center;
	position: relative;
    z-index: 1;
	font-family: "trebuchet MS", verdana, "Arial Narrow", serif;
	font-size: 1em;
	color: #2D5666;
}

#background {
	background: #E2EAF1 url("../images/border.jpg") repeat-x;
	text-align: left;
	margin: 20px auto 0px auto;
	width: 600px;	
	padding: 5px;
	height: 100%;
}

p {
	margin-bottom: 10px;
}

/*-------------------------------------------------------
				Fixed position flower
--------------------------------------------------------*/

/* Use of the empty comment bug to stop the fixed background images showing up in IE 5.0 */

#flower {
	 background/**/: url("../images/flower.jpg") bottom no-repeat fixed;
}

* html #flower {
	margin-left: -9px;
	margin-left/**/:/**/ auto;
}
	
#container {
	background: #FFFFFF;
	background/**/: #FFFFFF url("../images/flower_blur.jpg") bottom no-repeat fixed;
	height: 100%;
	margin-bottom: -12px;
}

* html container{
	height: 99%;
	margin-bottom: -11px;
}

/*-------------------------------------------------------
					   Banner
--------------------------------------------------------*/

/* Brilliantly simple Image Replacement technique by Robert F. http://wdhaven.com/article/12/bir */

#container h1 {
	background: transparent url("../images/header.gif") no-repeat;
	height: 98px;
}

/* Cursor default so people don't try to select the hidden text beneath the BIR */

#container h1 em {
	position: relative;
	z-index: -1;
	cursor: default;
}

/* Useful trick to stop clipping of negative margins in IE, set position:relative for the containing element */

#menu {
	margin-top: -114px;
	margin-right: -10px;
	background: url("../images/pink.gif") right top no-repeat;
	height: 283px;
	position: relative;
}

a.skip {
	display: none;
}

/*-------------------------------------------------------
					Main Image
--------------------------------------------------------*/

/* Use display: inline to get around double margins in IE */

#flash {
	float: left;
	height: 214px;
	margin-top: 85px;
	margin-left: 40px;
	display: inline;
	line-height: normal;
}

#nav {
	float: right;
	margin: 85px 45px 0px 0px;
	display: inline;
}

/*-------------------------------------------------------
				Start of Navigation
--------------------------------------------------------*/

#nav dl {
	width: 175px;
}

#nav dd {
	display: none;
}

#nav dt a {
	display: block;
	text-decoration: none;
	padding: 4px 0px;
	margin: 9px 0px;
}

/* Apply underscore hack for IE only properties to get links to display as block elements */

* html #nav dt a {
	width: 175px;
	height: 10px;
	width/**/: 100%;
	height/**/: 100%;
}

/* Main navigation, using BIR like above, and CSS preloaded images (background images with negative positioning to achieve rollover, no JS, sweet! */

#nav dt#home a:link, #nav dt#home a:visited {
	background: transparent url("../images/home.gif") no-repeat 0px -70px;
}

#nav dt#home a:hover, #nav dt#home a:focus {
	background: url("../images/home.gif") no-repeat 0px -4px;
}

#nav dt#room a:link, #nav dt#room a:visited {
	background: transparent url("../images/rooms.gif") no-repeat 0px -70px;
}

#nav dt#room a:hover, #nav dt#room a:focus {
	background: url("../images/rooms.gif") no-repeat 0px -4px;
}

#nav dt#rate a:link, #nav dt#rate a:visited {
	background: transparent url("../images/rates.gif") no-repeat 0px -70px;
}

#nav dt#rate a:hover, #nav dt#rate a:focus {
	background: url("../images/rates.gif") no-repeat 0px -4px;
}

#nav dt#locations a:link, #nav dt#locations a:visited {
	background: transparent url("../images/location.gif") no-repeat 0px -74px;
}

#nav dt#locations a:hover, #nav dt#locations a:focus {
	background: url("../images/location.gif") no-repeat 0px -6px;
}

#nav dt#contact-us a:link, #nav dt#contact-us a:visited {
	background: transparent url("../images/contact.gif") no-repeat 0px -73px;
}

#nav dt#contact-us a:hover, #nav dt#contact-us a:focus {
	background: url("../images/contact.gif") no-repeat 0px -4px;
}

#nav dt a strong {
	position: relative;
	z-index: -1;
	overflow: hidden;
}

/*-------------------------------------------------------
				   Main content
--------------------------------------------------------*/

/* Explicit width set to resolve peek-a-boo bug in IE */

#main {
	padding: 0px 5px;
	background: url("../images/ivy.jpg") no-repeat 182px top;
	padding-top: 20px;
	position: relative;
	margin-top: -17px;
	clear: both;
	line-height: normal;
}

* html #main {
	margin-top: -16px;
	width: 587px;
}

div#contact {
	float: left;
	width: 160px;
	line-height: normal;
	font-size: 0.7em;
	padding-left: 15px;
}

address {
	font-style: normal;
}

#contact img {
	margin-top: 20px;
}

a:link#kiwi, a:visited#kiwi {
	color: #CCCCCC;
	text-decoration: none;
	position: absolute;
	bottom: 4px;
	margin-left: 20px;
	padding-bottom: 1px;
} 

a:hover#kiwi, a:focus#kiwi {
	background: url("../images/rule.gif") repeat-x bottom;
	color: #336699;
}

/* Both underscore hack used to serve values for IE 5.x, and the Simplified box model hack with underscore for an IE 6 only propoerty! */

#text {
	float: right;
	line-height: normal;
	width: 394px;
	margin-top: -5px;
}

* html #text {
	width: 382px;
	width/**/:/**/ 391px;
}

#clearer {
	clear: both;
	margin-top: -20px;
}

* html #clearer {
	line-height: 0px;
}

/*-------------------------------------------------------
			 Main Area headings - using BIR
--------------------------------------------------------*/

#text h2 em{
	margin-left: 20px;
	font-size: 0.9em;
	font-weight: normal;
	text-decoration: underline;
	overflow: hidden;
	text-indent:/**/ 20px;
	text-indent/**/: 0px; 
}

#text h2#welcome {
	background: transparent url("../images/sub-head.gif") no-repeat 20px 0px; 
	padding-left: 30px;
}

#text h2#rooms {
	background: transparent url("../images/sub-head-rooms.gif") no-repeat 17px 0px;
}

#text h2#rates {
	background: transparent url("../images/sub-head-rates.gif") no-repeat 19px 0px;
}

#text h2#location {
	background: transparent url("../images/sub-head-location.gif") no-repeat 19px 0px;
}

#text h2#contacts {
	background: transparent url("../images/sub-head-contact.gif") no-repeat 20px 0px;
}

#text h2#thankyou {
	background: transparent url("../images/sub-head-thankyou.gif") no-repeat 20px 0px; 
	padding-left: 30px;
}

#text h2#error {
	background: transparent url("../images/sub-head-error.gif") no-repeat 20px 0px; 
	padding-left: 30px;
}

#text h2 em {
	position: relative;
	z-index: -1;
	overflow: hidden;
	cursor: default;
} 

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

/* Min-height set so site fills screen of all but the largest resolutions (keeps flower at bottom) */

#info {
	background: url("../images/border_main.gif") repeat-y left;
	font-size: 0.75em;
	line-height: 200%;
	padding: 10px 10px 20px 30px;
	border-bottom: 1px solid #FFFFFF;
	min-height: 500px;
}

* html #info {
	height: 500px;
}

#info p#intro {	
	text-indent: 15px;
	background: url(../images/rule.gif) repeat-x bottom;
	padding-bottom: 15px;
}

div#room1, div#room2 {
	background: url("../images/img_rule.gif") no-repeat bottom;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#info img {
	margin-left: -3px;
	border: none;
}

* html #info img {
	margin-left: -5px;
	margin-left/**/:/**/-3px;
}

#info dl {
	margin-left: 10px;
	margin-bottom: 10px;
}

#info dd {
	display:none;
}

#info a:link, #info a:visited {
	color: #666666;
	padding-bottom: 2px;
	text-decoration: none;
}

#info a:hover, #info a:focus {
	background: url("../images/rule.gif") repeat-x bottom;
	color: #336666;
}

h3 {
	font-weight: normal;
	color: #006600;
	font-size: 1.2em;
	margin-bottom: 15px;
	background: url("../images/bullet.gif") no-repeat left;
	padding-left: 20px;
}

#info p#outro {
	text-indent: 15px;
	background: url(../images/rule.gif) repeat-x top;
	padding-top: 15px;
}

#info p#outro strong {
	background: url("../images/signature.gif") no-repeat;
	display:block;
	height: 30px;
	margin-left: 72px;
	margin-top: 10px;
}

p.indent {
	text-indent: 15px;
}

#info p#outro em {
	position: relative;
	z-index: -1;
	cursor: default;
}

#info ul {
	list-style-type: none;
	margin-left: -5px;
	line-height: 170%;
	padding-top: 4px;
}

#info li {
	background: url("../images/bullet.gif") no-repeat left 1px;
	padding-left: 20px;
	margin: 0px 20px 10px 20px;
}

#info acronym {
	border: none;
	cursor: help;
}

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

#footer {
	text-align: center;
	position: absolute;
	display: block;
	bottom: 2px;
	width: 380px;
}

#footer a:link, #footer a:visited {
	color: #BBBBBB;
	text-decoration: none;
	font-family: verdana, "trebuchet MS", "Arial Narrow", serif;
	font-size: 0.75em;
	padding-bottom: 3px;
}

#footer a:hover, #footer a:focus {
	background: url("../images/rule.gif") repeat-x bottom;
	color: #336699;
}


/*-------------------------------------------------------
			 		 Image Popups
--------------------------------------------------------*/

body.popup {
	text-align: center;
	background: #FFFFFF;
}

body.popup a:link, body.popup a:visited {
	color: #666666;
	font-family: "trebuchet MS", verdana, "Arial Narrow", serif;
	font-size: 11px;
	text-decoration: none;
	padding-bottom: 1px;
	margin-bottom: 3px;
}

body.popup a:hover, body.popup a:focus {
	background: url("../images/rule.gif") repeat-x bottom;
}

body.popup img {
	margin: 0px auto;
	display: block;
}

/*-------------------------------------------------------
			        Contact Form
--------------------------------------------------------*/

form {
	margin-bottom: 20px;
}

input, textarea {
	padding: 2px;
	font-family: "trebuchet MS", verdana, "Arial Narrow", serif;
	width: 270px;
	background: #ffffff url("../images/shadow.gif") repeat-y -60px;
	border: 1px solid #CCCCCC;
	margin-left: 5px;
	color: #2F5B38;
	font-size: 1em;
}

table {
	border: 1px solid #ddd;
	border-width: 1px 0 0 1px;
}

td {
	font-size: 0.9em;
	border: 1px solid #ddd;
	padding: 3px;
	border-width: 0 1px 1px 0;
}

input:hover, textarea:hover {
	border: 1px solid #999999;
}

input:focus, textarea:focus {
	border: 1px solid #999999;
}

input.button {
	width: 100px;
	background: none;
	margin-left: 55px;
}