/* -- RESET -- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

html {
height: 100%; 
overflow: scroll;
}

.clearfix {
clear:both;
}




/* -- A LINKS -- */

a, a:link {
text-decoration:none;
color:#002B54; 
}

a:visited {
text-decoration:none;
color:#002B54; 	
}

a:hover {
text-decoration:underline;
color:#002B54;
} 



/* -- DEFAULT LAYOUT -- */

#bg-color {
background-color: #031D39;
height:100% !important;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

#container {
background-image:url(/media/templates/container-bg-repeat.png);
background-repeat:repeat-y;
width:897px; 
margin:0 auto;
}

#body-wrapper {
background:url(/media/templates/body-wrapper-bg.jpg) center top no-repeat #002B55;
width:855px;
margin:0 auto;
}

#header {
float:left;
width:855px;
height:42px;
background-color:#002B55;
}

#home-body {
float:left;
padding:0 31px 15px 23px;
width:798px;
}

#body {
float:left;
width:785px;
padding:0 35px 15px 36px;
}


#left-col {
float:left;
margin-top:20px;
width:570px;
}

#sub-left-col {
float:left;
margin-top:35px;
background-color:#FFF;
width:530px;
position:relative;
padding:5px;
min-height:600px;
}


#right-col {
float:right;
width:210px;
margin-top:45px;
position:relative;
}

#footer {
float:left;
width:855px;
height:42px;
background-color:#00153B;
position:relative;
}

#bottom-shadow {
background: url("/media/templates/bottom-shadow.png") no-repeat scroll 0 0 transparent;
bottom: -42px;
height: 42px;
left: -21px;
position: absolute;
width: 900px;	
}

#disclaimer-wrapper,#boffo-logo,#domicile-logo,#disclaimer {
float:left;
}

#disclaimer-wrapper {
padding-left:35px;
margin-top:8px;
}

#domicile-logo {
margin-left:20px;
margin-top:5px;
}

#disclaimer {
color:#ECE6DC;
font:9px Arial,sans-serif;
margin-left:20px;
margin-top:2px;
}

#copyrights {
color:#FFFFFF;
float:right;
font:10px Arial, sans-serif;
margin-right:15px;
margin-top:16px;
}

#article-wrapper {
background-color:#E7DFD3;
padding:45px 28px 28px;
min-height:600px;
overflow:hidden;
}

#article-title {
text-align:center;
}

#article-title h2 {
color:#FFFFFF;
font:30px Arial,sans-serif;
text-shadow:0 0 15px #888888;
text-transform:uppercase;
}

#article-content {
color:#4B3900;
font:13px/17px Arial,sans-serif;
margin-top:40px;
}

#article-content img.Shadow {
margin:20px 0;
-moz-box-shadow:0 0 20px #999; /* Firefox */
-webkit-box-shadow:0 0 20px #999; /* Safari, Chrome */
box-shadow:0 0 20px #999; /* CSS3 */
}

#article-content img {
margin:20px 0;
}

#article-content img.noShadow {
margin:20px 0;
-moz-box-shadow:0 0 0 0; /* Firefox */
-webkit-box-shadow:0 0 0 0 !important; /* Safari, Chrome */
box-shadow:0 0 0 0; /* CSS3 */
}

#article-content li
{
list-style-type:square;
list-style-position:outside;
margin-left:15px; 
}


/* -- HOME LAYOUT -- */

#jewel-logo-wrapper,#logo-body,#logo,#logo-body span,#finalist,#display-suit {
float:left;	
}

#logo {
padding: 0 0 50px 0px;
}

#logo-body {
color:#FFF;
font:13px Arial, sans-serif;
text-align:center;
padding-bottom:59px;
}

#logo-body span {
font-size:23px;
padding-bottom:10px;
}

#display-suit {
color:#e7dfd4;
font:12px/17px Arial, sans-serif;
text-align:center;
margin-top:20px;
margin-left:5px;
width:210px;
}

#display-suit a {
color:#FFF;
text-decoration:none;
letter-spacing:.05em;
}

#display-suit a:hover {
color:#FFF;
text-decoration:underline;
}

#feature-image {
width:569px;
height:450px;
*height:480px;
}

#home-left-col {
float: left;
height: 450px;
margin-bottom: 8px;
margin-left: 14px;
margin-top: 20px;
overflow: hidden;
padding: 5px;
width: 529px;
background-color:#FFF;
}

#crossslide, #crossslide-home {
height:450px;
}

#crossslide-home {
display:block !important;
}

#image-map {
bottom: -148px;
float: left;
height: 120px;
margin-left: 26px;
margin-top: 25px;
position: absolute;
width: 180px;
}





/* -- PHOTOGALLERY -- */

#gallery {
position: relative;
/*height:788px;*/
height:690px;
}

.thumbnails {
background-color:#FFFFFF;
float:left;
margin-right:-66px;
margin-left:78px;
padding:3px;
width:175px;
height:104px;
text-align:center;
overflow:hidden;
-moz-box-shadow: 0 0 8px #666; /* Firefox */
-webkit-box-shadow:0 0 8px #666; /* Safari, Chrome */
box-shadow: 0 0 8px #666; /* CSS3 */
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
        background:url("/media/templates/gallery-bg.jpg") repeat-x scroll 0 0 transparent;
	position:relative;
	overflow:hidden;
	width:530px;
	height:309px;

}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
        margin-top:80px;
}

/*.items div {
	float:left;
	width:680px;
}*/

/* single scrollable item */
.scrollable img {
cursor:pointer;
/*float:left;
height:97px;
width:172px;*/
opacity:0;
filter:alpha(opacity=0); /* IE */
}

.image-holder{
height:104px;
width:175px;
opacity:0.4; 
filter:alpha(opacity=40); /* IE */
}

/* active item */
.scrollable .active {
	position:relative;
	cursor:pointer;
        opacity:1;
        filter:alpha(opacity=100); /* IE */
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
        position:absolute;
        bottom:0px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/media/templates/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right { 
background:url("/media/templates/next-arrow.png") no-repeat scroll 50% 50% transparent;
bottom:119px;
clear:right;
height:110px;
margin-right:0;
position:absolute;
right:0;
width:66px;
}


/* left */
a.left	{ 
background:url("/media/templates/prev-arrow.png") no-repeat scroll 50% 50% transparent;
bottom:119px;
height:110px;
left:0;
margin-left:0;
position:absolute;
width:66px;
z-index:1;
} 




/* -- FEATURE & FINISHES -- */

#feature-finishes-pdf {
padding-bottom:20px;
padding-top:40px;
width:273px;
}

#feature-finishes-pdf span {
float:left;
}

#feature-finishes-pdf a {
color:#FFFFFF;
font:12px arial,sans-serif;
text-decoration:none;
text-transform:uppercase;
}

#feature-finishes-pdf img {
-moz-box-shadow:0 0 0; /* Firefox */
-webkit-box-shadow:0 0 0; /* Safari, Chrome */
box-shadow:0 0 0; /* CSS3 */
margin:0;
}




/* -- CONTACT PAGE -- */

#map-wrapper {
position:absolute;
top:144px;
left:36px;
}

#article-content span img {
-moz-box-shadow:0 0 0; /* Firefox */
-webkit-box-shadow:0 0 0; /* Safari, Chrome */
box-shadow:0 0 0; /* CSS3 */	
}

/* Hide controls for google map iframe */
#map-wrapper iframe #smc,#map-wrapper small,#map #copyright,#map #logocontrol {
display:none;
}

/* Fix pinpoint image not showing in IE */
#map img {
z-index:10000 !important;
display:block !important;
}


/* -- BOFFO REPORT -- */

a.jwl-back-to-news {
line-height:2em;
color:#666;
text-decoration:none; 
}

a:hover.jwl-back-to-news {
text-decoration:underline; 
color:#666; 
}


/* -- MAIN NAVIGATION -- */

.main-nav {
float:left;
text-transform:uppercase;
font:12px Arial, sans-serif;
margin-left:88px;
}

.nav-ul  {
display:inline;
}

.nav-ul li {
float:left;
}

.menu-divider {
color:#355A80;
margin-top:18px;
}

a.nav-levelone {
display:block;
padding:18px 16px 0;
color:#FFF;
text-decoration:none;
}

a.nav-levelone:hover {
background:url(/media/templates/nav-hover.jpg) repeat-x;
color:#59799C;
text-decoration:none;
}

a.nav-levelone-active {
background:url(/media/templates/nav-hover.jpg) repeat-x;
color:#59799C;
text-decoration:none;
display:block;
padding:18px 16px 0;
text-decoration:none;
}

.nav-leveltwo-container {
display:none;
position:absolute;
top:30px;
text-transform:none;
background-color:#002B55;
padding:20px 0 10px;
}

.nav-leveltwo-container ul{
display:inline;
position:relative;
}

.nav-leveltwo-container ul li {
border-right:2px solid #355A80; 
height:13px;
float:left;
}

a.nav-leveltwo {
font:12px Arial, sans-serif;
color:#FFF;
text-decoration:none;
padding:9px 16px;
}

a.nav-leveltwo:hover {
background:url(/media/templates/nav-hover.jpg) repeat-x;
color:#59799C;
text-decoration:none;
}

a.nav-leveltwo-active {
background:url(/media/templates/nav-hover.jpg) repeat-x;
color:#59799C;
text-decoration:none;
padding:9px 16px;
font:12px Arial, sans-serif;
}




/* -- GALLERY SUB MENU -- */

#gallery-menu-wrapper {
font:15px Arial,sans-serif;
left:72px;
position:absolute;
text-transform:uppercase;
/*top:500px;*/
top:403px;
z-index:10;
color:#E7DFD4;
}

#gallery-menu-wrapper span {
color:#4B3900;
}

#gallery-menu-wrapper ul {
display:inline;
}

#gallery-menu-wrapper ul li {
float:left;
}

#gallery-menu-wrapper ul li a {
color:#E7DFD4;
margin:0 8px;
text-decoration:none;
}

#gallery-menu-wrapper ul li a:hover {
/*color:#695000;*/
color:#A39168; 
}





/* -- FLOOR PLAN MENU -- */

#floor-menu-wrapper {
background-color:#C8BDA6;
color:#E7DFD4;
float:left;
font:15px Arial,sans-serif;
padding:20px 0;
text-transform:uppercase;
width:100%; 
}

#floor-menu-wrapper ul {
display:inline;
}

#floor-menu-wrapper ul li {
float:left;	
}


#floor-select {
float:left;
color:#4B3900;
margin-left:55px;
margin-right:15px;
}

.floor-divider {
margin:0 10px;
}

a.floor-normal {
color: #E7DFD4;
text-decoration:none;
}

a.floor-normal:hover {
/*color:#695000;*/
color:#A39168;
}

a.floor-active {
color:#4B3900;
text-decoration:none;
}


/* -- HOME FEATURE MENU -- */

#feature-menu {
float:left;
}

.feature-menu-wrapper {
background:url(/media/templates/feature-bg.png) no-repeat scroll 0 0 transparent;
float:left;
height:116px;
margin-left:3px;
margin-right:6px;
width:275px;
}

.feature-bg {
background:url("/media/templates/feature-menu-repeat.png") repeat-x scroll 0 0 transparent;
float:left;
height:90px;
margin:13px 0 0 16px;
width:245px;
position:relative;
}

.over {
background:url("/media/templates/feature-menu-repeat-normal.png") repeat-x scroll 0 0 transparent;
}

.feature-tower {
float:left;  
}

.feature-content {
float:left;
font:14px Arial;
left:0;
padding:12px 0 45px 69px;
position:absolute;
top:0;
width:176px;
cursor:pointer;
z-index:5;
}

.feature-related {
float:left;
height:20px;
margin-top:56px;
width:190px;
}

.feature-related a {
color: #FFFFFF;
float: left;
font: 9px Arial,sans-serif;
padding: 5px 26px 4px 14px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}






/* -- FLOOR PLAN -- */

#floor-plan-wrapper {
background-color:#DAD1C0;
float:right;
padding:25px 0;
width:327px;
*height:147px;
}

#floor-title {
background-color: #DAD1C0;
color: #4B3900;
float: left;
font: 16px Arial,sans-serif;
height: 85px;
padding: 54px 0 54px 35px;
*padding:58px 0 54px 35px;
position: relative;
width: 168px;
}

.small-gap {
background-color: #E7E1D5;
height: 193px;
position: absolute;
right: 0;
top: 0;
width: 2px;
z-index: 9999;
}

#floor-title h2 {
font:40px Arial,sans-serif;
}


.floor-plan {
float:right;
margin:0 20px 0 0;
}

.select-unit {
color:#4B3900;
float:left;
font:15px Arial,sans-serif;
margin:70px 0 0 30px;
text-transform:uppercase;
}

#selected-floor-wrapper {
background-color:#E7E1D5;
float:left;
width:100%;
}

#selected-floor {
margin:37px 0 20px;
}

#selected-floor img {
display:block;
margin:auto;
}

#floor-details {
float:left;
}

#floor-details table {
color:#4B3900;
font:9px Arial,sans-serif;
margin-left:39px;
text-align:left;
}

#floor-details table tr td {
padding-left:5px;
}

#floor-plan-download {
float:right;
margin:25px 0 0 31px;
width:220px;
}

#floor-plan-download a {
color:#FFFFFF;
font:12px Arial,sans-serif;
text-decoration:none;
text-transform:uppercase;
}

.dl-img {
float:right;
margin-left:5px;
}

.adobe-reader {
float:right;
margin-top:7px;
margin-right:20px;
}

.dl-button {
float: left;
}

.dl-button span {
float:left;  
}

.floor-plan-disclosure {
background-color:#E7DFD4;
color:#584822;
float:left;
font:9px Arial,sans-serif;
padding:20px 0;
width:100%;
}

.floor-plan-disclosure p {
padding:20px 30px 0 45px;
}




/* -- NEWS -- */

.news-posts li{
padding-bottom:20px;
}


/* FLOOR PLAN TABLE STYLES */ 

.fp-header-row td { font-size: 13px; margin-bottom: 5px; line-height: 2em; }

.fp-body-row td { line-height: 1.5em; font-size: 11px; }

.fp-footer-row td { border-top: 1px solid rgb(75, 57, 0); line-height: 1.5em;font-size: 11px;font-weight:bold; }


.small-font{
font-size:10px;
}
.header2 {
font-size:13px;
font-weight:bold;
text-transform:uppercase;
}
.header3 {
font-size:13px;
font-weight:normal;
text-transform:normal;
}
.text-red {
color:#C32032;
}
.text-blue {
color:#002b54; 
}
.text-lightblue {
color:#578094;	
}
.text-white {
color:#FFF;
}
.text-darkblue {
color:#002B54;
text-transform:uppercase;
}
.blue-button {
float:left;
width:100%;
}
.grey-button {
padding-bottom:10px; 
float:left;
width:100%;
}
.arial-grey-italic {
font-style:italic;
color:#666;
}


.image-holder img{
    width:105px;
    height:175px;

}


