@import url(../css/reset.css);
	
	
	/**********************--------------------------structural elements*/


body.home a.home, body.photographs a.photographs, body.apartment a.apartment, body.about a.about, body.tarrif a.tarrif, body.enquiries a.enquiries 
{color: #f4d5b2; background: transparent url(../images/bgElements/navroll.gif) repeat-x;}

body

{	font: 65.5%/1.8em "lucida grande", "lucida sans unicode", verdana, helvetica, sans-serif;
	background: #fee496 url(../images/bgElements/bodybg.gif) repeat-x; 


}



#container
{	margin: 0 auto;
	position: relative;
	padding: 0;
	width: 980px;

}

#holder
{height: 100%; background: url(../images/bgElements/contentHeader.jpg) no-repeat;}

#content
{
	clear: left;
	float: left;
	padding: 20px 0 0 40px;  
	width: 500px;
	font-size: 1.2em;
	line-height: 150%;
	color: #636425;
	text-align: left;
}

#belowphotos {float:left; padding-top: 20px;}

#subcontent {
padding-top: 0px;
float: right;
width: 400px;

}

#footer { 
clear: both;
width: 100%;
height: 100px;
background: #636425 url(../images/bgElements/footerbg.gif) repeat-x;}

#footer p {padding: 80px 0 0 0; text-align: center; color: #958a4f;}
#footer a {text-decoration: none; color: #958a4f;}
#footer a:hover {text-decoration: underline; color: #ccc;}

/**********************--------------------------typestyle*/


h1 {font: 250%/2.5em georgia, "Times New Roman", serif; color: #8b344e;}
h2 {font: 200%/2.0em georgia, "Times New Roman", serif; color: #8b344e;}

h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #8b344e;}
#content ul {

	list-style-type: disc;
	list-style-image: url(../images/subContent/bullet.gif);
	padding:0 0 20px 10px;

}
#content ul li {
	padding:0 0 0 5px;
	margin-left: 15px;
}


p {font: 100%/1.8em "lucida grande", "lucida sans unicode", verdana, helvetica, sans-serif;
padding: 0 0 10px 0;}

.noborder {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}



/**********************--------------------------logo*/

#branding
{height: 170px; }
#branding img 
{margin: 25px 0 0 210px;}



/**********************--------------------------top navigation*/


#navcontainer ul
{
font-size: 120%;
margin-top: 25px;
padding-left: 0;
margin-left: 70px;
color: #f4d5b2;
float: left;
width: 500px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
margin: 0;
padding: 5px 13px 12px 13px;
color: #f4d5b2;
text-decoration: none;
float: left;
}

#navcontainer ul li a:hover
{ color: #f4d5b2; background: transparent url(../images/bgElements/navroll.gif) repeat-x; }




/**********************--------------------------absolutley positioned side content*/

	.topimg {float: right; position: absolute; margin: -154px 0 0 0;}
	.secimg {float: right; position: absolute; margin: 91px 0 0 0;}
	.map {float: right; position: absolute; margin: 334px 0 0 0;}


/**********************--------------------------misc elements*/

#gallery {width: 480px; margin-left: 20px; }

#gallery img {float: left; margin: 10px 20px 10px 0px; padding: 6px; border: 1px #ccc solid; background-color: #f7f7f7;}


	/**********************--------------------------clearfix*/

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}

/* css form - from http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/  */

.cssform p{
width: 300px;
clear: left;
margin:0px;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 230px;
}

.cssform textarea{
width: 230px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}


#content a  {
color: #8B344E;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
}


#content a:hover {
color: #000000;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dashed;
}

#content img a {
text-decoration: none;
border: none;
}

.left {
	width: 150px;
	display: inline;
	}
	
.right {
	width: 250px;
}

#deflist {margin-top: -20px;}

 dl.table-display
{

width: 41.1em;
margin: 2em 0;
padding: 0;
}

.table-display dt
{
width: 15em;
float: left;
margin: 0 0 0 0;
padding: .5em;
border-top: 1px solid #8B344E;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */

.table-display dd
{
color:#8B344E;
float: left;
width: 5em;
margin: 0 0 0 0;
padding: .5em;
border-top: 1px solid #8B344E;
font-weight: bold;
}