@charset "UTF-8";
/* CSS Document 
rewritten css for observatory guesthouse... i needed to tidy up the first one as it was my first attempt & was pretty messy... hopefully thios one will be better 
*/

/* generic tags */
body {
	background: #A3BDD8;
	color: #06185c;
	margin: 0; /* we don't like defaults... they always leave little spaces everywhere... use 0 margins & padding on all divs... i think? */
	padding: 0;
	text-align: center; /* this is to fix an ie5 bug to centre the container div */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11pt;
	font-style: italic;
	line-height: 1.5em;
}

body a:link, a:active, a:visited{
	text-decoration:none;
	color: #8C4980
}

body a:hover{
	text-decoration:underline;
}


/* --------header------ */
#shadow { /* i'm using this div as a 'container'*/
	background: #A3BDD8 url(images/ctrBkgrd.png) repeat-y scroll 50% 0px;
	position: relative;
	margin: 0px auto;
	width: 800px;
	text-align: left;
}

#top1,#top2 {
	background: url(images/header.png) repeat-x 50% 40px;
	position: relative;
	height: 285px;
	width: 770px;
	margin: 0px auto;
}

#top2 {
	height: 220px;

}

#scroller{
	position: absolute;
	top: 10px;
	left: 320px;
	width: 465px;
	height: 22px;
	font-size: large;
	text-align: center;
	text-transform: uppercase;
}

/* ------nav------ */
#menu, #menu2 {
	background: url(images/menuBkgrd.jpg) no-repeat;
	height:75px;
	width: 770px;
	position: relative;
	margin: 0px auto;
}



#rollhome, #rollrooms, #rollrates, #rollenq {
	display:block;
	height:67px;
	width:77px;
	position: absolute;
	background-image: url(images/menu.png);
	background-position: 0px -2px;
	left: 22px;
	top: 11px;
	z-index: 10;
}

#rollhome:hover{
	background-position:0px -142px;
}

#rollhome:active{
	background-position:0px -72px;
}

#rollrooms{
	width:95px;
	background-position:-77px -2px;
	left: 99px;
}

#rollrooms:hover{
	background-position:-77px -142px;
}

#rollrooms:active{
	background-position:-77px -72px;
}

#rollrates{
	width:92px;
	background-position:-172px -2px;
	left: 194px;
}

#rollrates:hover{
	background-position:-172px -142px;
}

#rollrates:active{
	background-position:-172px -72px;
}

#rollenq{
	width:120px;
	background-position:-264px -2px;
	left: 286px;
}

#rollenq:hover{
	background-position:-264px -142px;
}

#rollenq:active{
	background-position:-264px -72px
}
/* ------footer-------- */
#foot1 {
	background: url(images/footShad.jpg) no-repeat;
	margin: 0px auto;
	width: 800px;
	height: 30px;
}


/* -------main content-------*/
#house, #fish, #onthebeach {
	background: url(images/house1.png) no-repeat;
	position: absolute;
	top: 0px;
	left: 14px;
	width:307px;
	height: 296px;
}

#fish {
	background: url(images/fish.png) no-repeat;
	top: 23px;
	height: 212px;	
}

#logo1, #logo2 {
	background: url(images/logo.png) no-repeat;
	position: absolute;
	top: 55px;
	left: 450px;
	width: 323px;
	height: 221px;
}

#logo2 {
	background: url(images/logo_sml.png) no-repeat;
}

#paint {
	background: url(images/painting.jpg) no-repeat;
	position: absolute;
	top: 223px;
	left: 460px;
	width: 304px;
	height: 659px;
}

#onthebeach {
	background-image: url(images/onthebeach.png);
	top: 2px;
	height:235px;
}

#bucket {
	position:absolute;
	top:-39px;
	left:-1px;
	width:354px;
	background-image: url(images/bucket.png);
	height: 230px;
	background-repeat: no-repeat;
}

#main1, #main2, #main3, #mainEnq {
	background: url(images/mainBkgrd.jpg) repeat top center;
	width:770px;
	margin: 0px auto;
	padding: 0px;
}

#mainEnq h1 {
	margin: 0;
	padding: 30px 50px;
	height: 130px;
	position:relative;
	font-size: 18px;
	line-height: 1.4em;
}

p {	
	margin: 0px 30px;

}

#main1 p{
	margin: 0px 0px 30px 200px;
	text-align: justify;
	display: block;
	width: 230px;
}

#main2 p{
	width: 650px;

}

#main1 p.p2 {
	margin-left: 30px;
}

h1 {
	padding-left: 30px;
	line-height: 35px;
	margin: 0em 0em 1ex 0em;
}

h2 {
	padding: 0px 50px 0px 50px;
	font-size: 15pt;
	line-height: 1.5em;
	margin: 0;
	text-align: center;

}

.hsp3 { /* horizontal spacing to put a bigger space between the ph & fx .no's */
	margin: 0em 0em 0em 1em;
	line-height: 1.2em;
}

h3 {
	padding: 0px 30px 0px 30px;
	font-weight: normal;
	text-align: center;
	margin: 0px;
}

#main1 .spacer1, #main3 .spacer1, #mainEnq .spacer1{
	height: 2em;
}

#main1 h3 .spacer1 {
	height: 1.5em;
}

#flash1, #flash2, #flash3 {/* the flash id's are going to have flash changer masks in them */
	height: 150px;
	width: 150px;
	border: medium solid #FFFFFF;
	margin: 0;
}

#flash1 { 
	margin-left: 30px;
	float: left;
}

#flash2 {
	float: right;
	margin-right: 340px;
}

#flash3 {
	margin: 0 0 25px 30px;
	width: 300px;
	height: 126px;
	float: left;

}

.rooms {
	margin: 0 0 0 355px;
	width: 400px;
	text-align: left;
}

#main3 p.rooms {
	margin: 0 0 30px 350px;

}

/* rates & enq tables */
#mytable, #mytable1 {
	width: 720px;
	margin: 0 auto;
	padding: 20px 0 0;
	border-collapse: collapse;
	position:relative;
}

.peaktext1 {
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
}

.peaktext {
	color: #8CC63E;
	margin-left: 20px;
}

th {
	background: #cae8ea;
	padding: 6px 6px 6px 12px;
	color: #4F6B72;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	font-weight: bold;
	border-bottom-width: 2px;
	border-right-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-right-color: #FFFFFF;
}

th.nobg {
	background: none;
	border-top-width: 0px;
	border-left-width: 0px;
}

td {
	padding: 6px 6px 6px 40px;
	color: #4f6b72;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

td.alt {
	color: #797268;
}

th.spec {
	background:	none;
	font-weight: bold;
	border-top-width: 0;
}

th.specalt {
	background: none;
	color: #797268;
	font-weight: bold;
	border-top-width: 0;

}

th.peak   {
	background-color: #8CC63E;
}

/* for enq form from filthy site*/
#news, #welcome, #listlayout, #inputform {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 65px;
	left: 230px;
	width: 500px;
	height: 120px;
}

#news {
	
}

.edit {
	height: 4em;

}

a.edit1, a.edit2 {
	float:left;
	margin: 1em 0 0 0; 
	width: 100px;
	padding-left: 40px;
}

a.edit2 {
	width: 70px;
	padding-left: 0px;
	margin-left: -40px
}

#inputform {

}

form {
	margin: 0;

}

form div {
	margin: 0 0 0.5em 0;
	clear: left;
}

label {
	width: 20em;
	display: block;
	float: left;

}

form div.action {
	margin: 2em 0 0 11em;
	padding: 0 0 0 2em;

}

.field1 {
	width: 250px;

}

label.right {
	padding: 0 0 0 5em;
	font-weight: bold;
	

}

label.radio {
	text-align: right;
	padding: 0 1em 0 0;
	margin: 0;

}

.details {
	margin: 0 0 15px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px;
	border-bottom-color: #FFFFFF;

}

.details h2 { /* tables headings */
	margin: 0;
	padding: 0 0.5em 0 0;
	text-align: left;

}

.details h3 {
	padding-top: 1ex;
	text-align: left;

}

.req {
	font-weight: normal;
	font-size: 11pt;

}



/* end tables */