/* Generic
================================== */
/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt. */
img
{
	border-width: 0pt;
	margin: 0;
	padding: 0;
}


/* Typography generic
================================== */

/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin on top. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	background-color: #2D5B9E;
	margin-top: 45px;
	margin-bottom: 20px;
}

/* Standard paragraph. Set brown colour for text. 
Line-Height for leading.*/
p
{
	color: #2D5B9E;
	line-height: 130%;
}

/* Bold text. */
.p_bold 
{ 
	font-weight: bold; 
}

/* Standard heading h2. Bigger font. */
h2
{
	color: #2D5B9E;
	font-size: 130%;
}

/* Standard heading h2. Bigger font. */
h3
{
	color: #2D5B9E;
	font-size: 90%;
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */

a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

/* Links to be orange. */
a:link
{
	color: #D96E04;
}

/* Hover and active links to be red. */
a:visited, a:hover, a:active
{
	color: #BE3509;
}

/* Visited links to be light orange. */
a:visited
{
	color: #E79726;
}

/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
500px(primary) + 400px(secondary) = 900px. */

/* Main wrapper with centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Background filler image acts as Faux Filler to allow for different column heights. */
#wrapper
{
	width: 900px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background-image: url(../../../../images/Faux_Filler_Sorrento_Beach_B&B.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Header
================================== */

/* Top header with same width as wrapper and set height. Contains two boxes. White background. */
#header_one
{
	width: 900px;
	height: 150px;
	background-color: #FFFFFF;
}

/* Gap caused by default vertical alignment of inline elements is fixed through setting the
vertical-alignment of the image itself to bottom. */
#header_one img
{
	vertical-align: bottom;
}

/* First container in header_one for logo positioned in html. Float left. 
Set height here as well, otherwise it will move content of header_two. */
#header_one #logo_box 
{ 
	height: 150px;
	float: left; 
}

/* Second container inside header_one contains relative positioned flower on right. 
Moved partly outside wrapper. Float right. */
#header_one #flower_box
{
	float: right;
	position: relative;
	top: -40px;
	right: -43px;
}

/* Second header with same width as wrapper and set height. Background colour to suit beach image. 
Place background flower image top part. */
#header_two
{
	width: 900px;
	height: 100px;
	background-color: #4988BF;
	background-image: url(../../../../images/Header_BG_Flowers_02.jpg);
	background-repeat: no-repeat;
	background-position: 120px bottom;
	position:relative;
}

/* First container inside header_two contains navigation. Float left and move with padding.
Also set background colour. */ 
#header_two #navcontainer
{
	float: left;
	background-color: #8C6D51;
	padding-left: 0px;
	position:relative;
	z-index:20;
}

/* No padding for unordered list inside navcontainer. */
#navcontainer ul 
{ 
	padding: 0; 
}

/* Display inline for list irems to achieve horizontal display. */
#navcontainer ul li 
{ 
	display: inline; 
}

/* Format text inside unordered list for navigation. */
#navcontainer ul
{
	margin: 0;
	color: #FFFFFF;
	font-size: 1.2em;
	letter-spacing: 1px;
}

/* :onk items in unordered list with padding. Set colour and backgrouns colour. No underline.
Float left and set border. */
#navcontainer ul li a
{
	padding: 0.2em 12px;
	background-color: #8C6D51;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
	border-right: 1px solid #F1E1C4;
}

/* Orange colour when hover over navigational link. */
#navcontainer ul li a:hover
{
	background-color: #D96E04;
	color: #FFFFFF;
}

/* The active item to have different background colour. */
body.home #navlist a#home, body.guestrooms #navlist a#guestrooms, body.gallery #navlist a#gallery,
body.bookings #navlist a#bookings, body.testimonials #navlist a#testimonials, body.contact #navlist a#contact,
body.links #navlist a#links, body.local #navlist a#local-attractions{ 
	background-color: #B59D71;
	text-align: left;
}

/* Second container inside header_two contains image on right. Float right and set width. */
#header_two #beach_box
{
	position:absolute;
	right:0;
	width: 300px;
}

/* Gap caused by default vertical alignment of inline elements is fixed through setting the
vertical-alignment of the image itself to bottom. */
#header_two #beach_box img
{
	vertical-align: bottom;
}



/* PrimaryContent (right column)
================================== */

/* Two main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. */
#primaryContent
{
	float: left;
	width: 900px;
	display: inline;
	margin: 0;

}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 500. Margin on left to allow for sideContent with 400px width. */
#twoColLayout #primaryContent
{
	float: left;
	width: 500px;
	margin: 0 0 0 400px;
	background-color: #F1E1C4;
}

#primaryContent p, #primaryContent h2
{
	margin-left: 30px;
	padding-bottom: 10px;
	padding-right: 70px;
}

#primaryContent h3
{
	margin-left: 30px;
	padding-bottom: 10px;
	padding-right: 70px;
	padding-top: 15px;
}

#primaryContent h2
{
	margin-top: 30px;
	padding-bottom: 20px;
	background-image: url(../../../../images/Header_Flower.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 55px;
	padding-top: 10px;
}

/* Boxes inside rows in sideContent. All float left with set width and height. */
#primaryContent #sideBox1, #primaryContent #sideBox2, #primaryContent #sideBox3, #primaryContent #sideBox4,
#primaryContent #sideBox5, #primaryContent #sideBox6, #primaryContent #sideBox7, #primaryContent #sideBox8,
#primaryContent #sideBox9, #primaryContent #sideBox10, #primaryContent #sideBox11, #primaryContent #sideBox12,
#primaryContent #sideBox13
{
	float: left;
	padding-left: 30px;
	padding-bottom: 20px;
	width: 140px;
	height: 93px;
}


/* Google Map
================================== */

/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid text in map showing up left of map. */
#map
{
	padding-top: 5px;
	padding-bottom: 10px;
	margin-left: 30px;
	width: 400px;
	height: 330px;
	overflow: hidden;
}

/* Styles for form on contact page
================================== */

/* Fieldset groups related block. */
fieldset
{
	margin: 10px 0px 5px 30px;
	border: 1px #2D5B9E solid;
	color: #2D5B9E;
	background-color: #B59D71;
	width: 398px;
	padding-bottom: 15px;
}

/* Label for headings above form input boxes. */
label
{
	margin-top: 5px;
	display: block;
}

/* Define length of input boxes. */
input
{
	width: 290px;
}

/* Creates anchor for user in field. */
input:focus, textarea:focus
{
	background: #F1E1C1;
}

/* Class for "required" text. */
.required
{
	font-size: 80%;
	color: #BE3509;
}

/* Style the submit button. */
.button 
{
	background-color: #B59D71;
	color: #2D5B9E;
	width: 400px;
	height: 25px;
	border: 1px #2D5B9E solid;
}

/* Red inline text for php messages. Used with span in html. */
#pRed 
{ 
	color: #BE3509;
}



/* SideContent (left column)
================================== */

/* Second comes the side content on the left hand side. 
Width 400px and negative margin of -900px to the left. */
#sideContent
{
	float: left;
	width: 400px;
	margin: 0 0 0 -900px;
	background-color: #B59D71;
	background-image: url(../../../../images/Faux_Filler_Sorrento_SideContent.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Top box inside sideContent for background flower image second part. Set height. */
#sideContent #top_box
{
	height: 80px;
	background-image: url(../../../../images/Header_BG_Flowers_04.jpg);
	background-repeat: no-repeat;
	background-position: 120px top;
}

/* Text inside sideContent. Colour white and position correctly. */
#sideContent p
{
	color: #FFFFFF;
	margin-left: 80px;
}

#sideContent #p_boldbrown
{ 
	font-weight: bold; 
	color: #8C6D51;
}


/* Footer
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Contains background image bottom aligned. */
#footerBar
{
	clear: both;
	width: 900px;
	background-image: url(../../../../images/Footer_BG_Sorrento_Beach_B&B.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-top:50px;
}

/* Text inside footerBar with padding left. Smaller font size and blue colour. */
#footerBar p
{
	padding-left: 80px;
	font-size: 80%;
	color: #2D5B9E;
	line-height: 130%;
}
table {margin:0px 31px 15px; color:#2D5B9E;}
td {border-bottom:1px solid #D96E04;padding:3px;}
.action1 {margin:-42px 80px 20px;}
.action1 a {color:#2D5B9E;}
.action1 a:hover {color:#E79726;}
ul {margin:0 44px 20px;color:#2D5B9E;}
li {padding-bottom:4px;}
.testimonial {margin:40px 0 30px 80px; width:250px;}
.testimonial h4 { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;font-size:14px; line-height:18px; color:#fff; margin-bottom:10px;}
#sideContent .testimonial p {margin: 10px 0 0;}
img.bbfaa {margin:10px 0 30px 160px;}




#recaptcha_widget_div {
   padding-left:30px;
}

.rotator {
	background-image: url(../../../images/image_frame.png);
	background-repeat: no-repeat;
	background-position: left top;
	width: 400px;
	height: 250px;
}
.rotator img {
	display:none;
}
.TA_rated {
	margin:20px auto;
	position:relative;
	width:170px;
}

.TA_cdswritereviewlg {
        margin:20px auto;
        width:240px;
        position:relative;
}
a.linkimg, a.linkimg1 {
	display:block;
	height:88px;
	position:relative;
}
a.linkimg1 {
height:0;
margin-bottom:150px;
}
.fb-logo{ left: 223px; position: relative; top: 120px;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.fb-logo{ left: 223px; position: relative; top: 120px;}
}