/* 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 for top. */
body
{
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 75%;
	background-color: #D0EDF6;
	background-image: url(../images/OneBrighton_Bg_128.gif);
	background-repeat: repeat-x;
	background-position: center top;
}


/* Standard paragraph. Set grey colour for text. 
Line-Height for leading. Padding top for nice distance between paras. */
p
{
	color: #969696;
	line-height: 130%;
	padding-top: 10px;
}

/* Standard heading h1. Big font. */
h1
{
	color: #DA6B00;
	font-size: 130%;
}

/* Standard heading h2. Bigger font. */
h2
{
	color: #DA6B00;
	font-size: 115%;
}

/* Minor heading h3. Smaller font. */
h3
{
	color: #DA6B00;
	font-size: 100%;
}

/* Minor heading h4. Even smaller font than h3. */
h4
{
	color: #DA6B00;
	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: #DA6B00;
}

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

/* Hover and active links to be dark grey. */
a:hover, a:active
{
	color: #525372;
}


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

/* Order important for search engines. Firsdt sidebar (text) and then main whcih is flash. 
Calculations: 588px(primary) + 362px(side). */

/* 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. */
#wrapper
{
	width: 950px;
	margin: 0 auto;
	text-align: left;
}

/* Preload nav images hover. Hook on divs or other elements.
================================== */
#wrapper
{
	background-image: url(../images/Nav_81_Home_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}

#header
{
	background-image: url(../images/Nav_173_The_Development_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
#navcontainer
{
	background-image: url(../images/Nav_101_Location_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
#mainhome
{
	background-image: url(../images/Nav_101_Lifestyle_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
#mainhome #flashContent
{
	background-image: url(../images/Nav_129_Apartments_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
#footer
{
	background-image: url(../images/Nav_116_Availability_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
.alignleft
{
	background-image: url(../images/Nav_116_Developer_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}
.alignright
{
	background-image: url(../images/Nav_119_Contact_us_Hover.gif);
	background-repeat: no-repeat;
	background-position: -9999px -9999px;
}



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

/* Set fixed height for header. Page background image shines through. Logo placed in html. */
#header
{
	height: 145px;
}

/* Position One Brighton logo inside header. */
#header img
{
	padding-left: 20px;
	padding-top: 95px;
}


/* Main Navigation
================================== */

/* Navcontainer holds complete navigation. Move down to let page background shine through. */
#navcontainer 
{ 
	padding-top: 14px;
}

/* Unordered list items to float left for horizontal display. Set width and no bullet points. 
No padding or margin. */
#navlist ul
{
	margin: 0;
	padding: 0;
	/* float: left; */
	list-style-type: none;
	width: 950px;
}

/* List items to float left for horizontal display. No bullet points. */
#navlist li
{
	float: left;
	list-style-type: none;
}

/* All navigation items to act as buttons with display block. Set height of buttons and 
allow for 1px margin left (background to shine through).  */
#navlist a
{
	display: block;
	height: 23px;
	margin-left: 1px;
}

/* Fix width for each navigation item to achieve the width of the wrapper. 
Place background image for each with the exact measurements. Each list items has got individual id. */
#navlist #home a
{
	width: 81px;
	background-image: url(../images/Nav_81_Home.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #development a
{
	width: 174px;
	background-image: url(../images/Nav_173_The_Development.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #location a
{
	width: 102px;
	background-image: url(../images/Nav_101_Location.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #lifestyle a
{
	width: 102px;
	background-image: url(../images/Nav_101_Lifestyle.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #apartments a
{
	width: 130px;
	background-image: url(../images/Nav_129_Apartments.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #availability a
{
	width: 117px;
	background-image: url(../images/Nav_116_Availability.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #developer a
{
	width: 117px;
	background-image: url(../images/Nav_116_Developer.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #contact a
{
	width: 120px;
	background-image: url(../images/Nav_119_Contact_us.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 0;
}

/* Replace the background image with the "orange" gradient image for the hover state.
Again individually for all list items. 
Also highlight the current page through class assigned in body tag for each page (orange bg image). */
#navlist #home a:hover, .home #navlist #home a
{
	width: 81px;
	background-image: url(../images/Nav_81_Home_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}
	
#navlist #development a:hover, .development #navlist #development a
{
	width: 174px;
	background-image: url(../images/Nav_173_The_Development_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #location a:hover, .location #navlist #location a
{
	width: 102px;
	background-image: url(../images/Nav_101_Location_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #lifestyle a:hover, .lifestyle #navlist #lifestyle a
{
	width: 102px;
	background-image: url(../images/Nav_101_Lifestyle_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #apartments a:hover, .apartments #navlist #apartments a
{
	width: 130px;
	background-image: url(../images/Nav_129_Apartments_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #availability a:hover, .availability #navlist #availability a
{
	width: 117px;
	background-image: url(../images/Nav_116_Availability_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #developer a:hover, .developer #navlist #developer a
{
	width: 117px;
	background-image: url(../images/Nav_116_Developer_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#navlist #contact a:hover, .contact #navlist #contact a
{
	width: 120px;
	background-image: url(../images/Nav_119_Contact_us_Hover.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 0;
}


/* Sidebar (right column)
================================== */

/* Sidebar content on the right for body text. Float right and set width. White background colour. 
Set fixed height for this column. Allow for padding to suit design. Top margin for small gap above. 
Calculations: 297px + 15px + 50px = 362px. */
#sidebar 
{ 
	float:right;
	width: 297px;
	padding-left: 15px;
	padding-right: 50px;
	margin-top: 3px;
	background-color: #FFFFFF;
	height: 442px;
}

/* Hack for IE for width with padding. 
* html #sidebar
{
	padding-right: 10px;
	width: 347px;
	w\idth: 337px;
}
*/

/* Position text inside sidebar container. */
#sidebar #text
{
	margin-top: 20px;
}

/* Id for fleXcroll scrollbar. Fix width and height to suit layout. Overflow for all browsers.
Set bg colour to white. No vertical margins and centered. Right padding. */
#mycustomscroll
{
	/* Typical fixed height and fixed width example */
	width: 310px;
	height: 340px;
	overflow: auto;
	/* IE overflow fix, position must be relative or absolute*/
	position: relative;
	background-color: #FFFFFF;
	margin: 0 auto;
	padding-right: 30px;
}

/* Hack for IE for width with padding. */
* html #mycustomscroll
{ 
	padding-right: 15px;
	width: 320px; 
	w\idth: 280px;
}

/* Same as above just for bigger heading - Availability. */
#mycustomscroll_availability
{
	/* Typical fixed height and fixed width example */
	width: 310px;
	height: 280px;
	overflow: auto;
	/* IE overflow fix, position must be relative or absolute*/
	position: relative;
	background-color: #FFFFFF;
	margin: 0 auto;
	padding-right: 30px;
}

/* Hack for IE for width with padding. */
* html #mycustomscroll_availability
{ 
	padding-right: 15px;
	width: 320px; 
	w\idth: 280px;
}

/* Same as above just for bigger heading - Disclaimer + Contact us. */
#mycustomscroll_disclaimer, #mycustomscroll_contact, #mycustomscroll_location
{
	/* Typical fixed height and fixed width example */
	width: 310px;
	height: 370px;
	overflow: auto;
	/* IE overflow fix, position must be relative or absolute*/
	position: relative;
	background-color: #FFFFFF;
	margin: 0 auto;
	padding-right: 30px;
}

/* Hack for IE for width with padding. */
* html #mycustomscroll_disclaimer
{ 
	padding-right: 15px;
	width: 320px; 
	w\idth: 280px;
}

/* Hack for IE for width with padding. */
* html #mycustomscroll_contact
{ 
	padding-right: 15px;
	width: 320px; 
	w\idth: 280px;
}

/* Hack for IE for width with padding. */
* html #mycustomscroll_location
{ 
	padding-right: 15px;
	width: 320px; 
	w\idth: 280px;
}


/* Main (left column)
================================== */

/* Main content on the left for flash animation. Float left and set width. White background colour. 
Set fixed height for this column. Allow for padding to suit design. Top margin for small gap above.
Calculations: 568px + 20px = 588px. */
#main 
{ 
	float: left;
	width: 568px;
	padding-left: 20px;
	margin-top: 3px;
	background-color: #FFFFFF;
	height: 442px;
}

/* Position flash animation inside main container. No need for width since restricted through #main. 
Set height and move down. */
#main #flashContent
{
	height: 402px;
	margin-top: 20px;
}

/* Main Home (one column)
================================== */

/* Main content on the left for flash animation. Float left and set width. White background colour. 
Set fixed height for this column. Allow for apdding to suit design. Top margin for small gap above.
Calculations: 568px + 20px = 588px. */
#mainhome 
{ 
	float: left;
	width: 950px;
	margin-top: 3px;
	background-color: #FFFFFF;
	height: 442px;
}

/* Position flash animation inside main container. No need for width since restricted through #main. 
Set height and move down. */
#mainhome #flashContent
{
	height: 442px;
}


/* 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
{
	margin-top: 10px;
	margin-left: 0px;
	padding-left: 0px;
	height: 360px;
	overflow: hidden;
}


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


/* Label for headings above form input boxes. */
label
{
	display: block;
}

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

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

/* Style the submit button. */
.button 
{
	background-color: #E49400;
	color: #FFFFFF;
}

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



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

/* Footer to be cleared both sides since main and sidebar are floating (out of normal flow). */
#footer 
{ 
	clear: both;
}

/* Hack for IE6 to disp;lay footer always below columns. */
* html #footer 
{
	height:1px;
}

/* copyright to align left. */
.alignleft
{
	float: left;
}

/* Disclaimer to align right. */
.alignright
{
	float: right;
}

/* Smaller font size for text inside footer. Move slightly down. */
#footer p
{
	padding-top: 6px;
	font-size: 90%;
}