@charset "utf-8";
/* Cleary Developments design styles */

body {
margin:0;
padding:0;
background: #231f20 url(../images/wallpaper.jpg) repeat-x top left;
font: normal normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
}

div#container {
width: 900px;
margin:0 auto;
padding:0 0 10px 0;
position:relative;
}

a:link, a:visited { color: #c41724; text-decoration:none; }
a:hover, a:active { color: #fff; text-decoration:underline; }
a.officelink:link, a.officelink:visited { color: #c41724; text-decoration:none; }
a.officelink:hover, a.officelink:active { color: #7a0a12; } 

a.soloLink:link, a.soloLink:visited {
padding-left: 15px;
font-size: 12px;
background: transparent url(../images/red-list-arrow.gif) no-repeat left center;
float:right;
margin-right: 12px;
clear:left;
}

a.soloLink:hover, a.soloLink:active {
background: transparent url(../images/white-list-arrow.gif) no-repeat left center;
}

h1, h2, h3, h4, h5, h6, form, p {margin:0; padding:0; }
ol, ul, dl, li {margin:0; padding:0; list-style-type:none; }


div#topBar {
width: 884px;
padding: 20px 8px;
background: #ff0416 url(../images/red-top-bar.jpg) repeat-x bottom left;
}

ul#nav {
list-style:none;
font-size: 12px;
margin-bottom: 10px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-align: right;
position:relative;
z-index: 100;
}

ul#nav li a:link, #nav li a:visited {
color: #fff;
text-decoration:none;
}

ul#nav li a:hover, #nav li a:active {
color: #000;
}

ul#nav li {
display: inline;
margin-right: 30px;
}

ul#nav li.lastNavItem {
margin-right: 0;
}


div#titleBar {
width: 900px;
background-color: #231f20;
clear:left;
overflow:hidden;
margin:0;
padding:0;
}

#titleBar h1 {
width: 418px;
height: 36px;
background : #231f20 url(../images/title.gif) no-repeat right center;
float:right;
margin: 25px 8px 10px 8px;
padding:0;
}

#titleBar h1 a { visibility:hidden; }


div#logoDiv {
position:absolute;
margin-left: 76px;
top:0;
}


div#animationDiv {
clear:both;
width: 900px;
height: 309px;
background: #000;
overflow:hidden;
}

div#animationDiv img {
width: 886px;
height: 295px;
margin: 7px;
}

div#content {
clear:left;
width: 880px;
background: #251c1e;
padding: 12px 8px 12px 12px;
overflow:auto;
}

#content p {
margin-bottom: 12px;
}

#content h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 18px;
}

div#completedShowcase {
width: 400px;
float:right;
margin: 0 0 0 36px;
}

div#showcaseAnimation {
width: 400px;
height: 248px;
overflow:hidden;
margin: 0 0 12px 0;
}

#showcaseAnimation div.showcaseItem {
width: 400px;
height: 248px;
margin:0;
padding:0; 
position:relative;
overflow:hidden;
}

.showcaseItem p {
margin:0;
padding:12px 10px 8px 10px;
position:absolute;
bottom:-12px;
width: 380px;
background: #000;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align:right;
-moz-opacity:.65;
opacity:.65;
filter:alpha(opacity=65);
}

.showcaseItem p a:link, .showcaseItem p a:visited {
color:#fff;
text-decoration: none;
}

.showcaseItem p a:hover, .showcaseItem p a:active {
color: #c41724;
text-decoration: none;
}

div#contactBar {
width: 880px;
margin:0;
padding: 16px 8px 16px 12px;
overflow:auto;
background: #000;
}

div#contactDetails {
width: 250px;
float:left;
}

#contactBar h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
}

#contactBar ul.leftBlock {
float:left;
margin-right: 15px;
}

#contactBar ul li {
line-height: 1.7;
}

#contactBar ul li.titleLi {
font-weight: bold;
margin-bottom: 15px;
}

div#signUp {
width: 580px;
float:right;
display: inline;
margin: 0;
}

#signUp form div {
clear:left;
margin-bottom: 5px;
}

#signUp form div.tickBoxes label {
width: 190px;
float:left;
margin-bottom: 3px;
}

div.tickBoxes label.lineBreak {
clear:left;
}

#signUp form div.tickBoxes input {
float:left;
margin-right: 12px;
}

#signUp form div#signUpSubmit {
float:right;
width: 200px;
margin-top: 15px;
}

input.subscribeSubmit {
float:left;
margin:0 0 0 30px;
font-size: 11px;
color: #555;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}


#signUp form div.inlineField label {
font-weight: bold;
display: block;
width: 120px;
text-align: left;
float: left;
margin-right: 18px;
}

#signUp form div.inlineField {
margin-bottom: 15px;
}

#signUp form div.inlineField input {
font-size: 11px;
color: #555;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
height: 14px;
}

#signUp form p {
margin: 7px 0;
font-weight: bold;
}

div#logoFooter {
width: 752px;
padding:0 74px;
background: #ff0416 url(../images/red-end-bar.jpg) repeat-x top left;
overflow: auto;
}

#logoFooter img {
margin:0;
padding:0;
}

#footer {
text-transform: uppercase;
font-size: 8px;
margin-top: 2px;
}

div#designTag {
float:right;
}

#designTag a:link, #designTag a:visited {
color: white;
text-decoration: none;
}

#designTag a:hover, #designTag a:active {
color: #c41724;
}

/*********developments listings ********/

div.developmentOverview {
margin: 0 0 20px 0;
width: 880px;
overflow:auto;
clear:both;
padding-bottom: 15px;
border-bottom: 1px solid #c41724;
}

.developmentOverview img {
float:left;
margin-right: 12px;
}

div.developmentThumb{
width: 402px;
height: 120px;
overflow:hidden;
float:right;
border: 1px solid #c41724;
position:relative;
background: #000;
margin: 0 0 5px 12px;
}

div.thumbLeft {
float:left;
margin: 0 36px 5px 0;
}


.developmentThumb div {
width: 394px;
height: 112px;
overflow:hidden;
position:absolute;
top:4px;
left:4px;
}

.developmentThumb img {
border:none;
}

.developmentOverview h3 {
font-weight:bold;
font-size: 14px;
margin-bottom: 15px;
}

.developmentOverview h3 a:link,
.developmentOverview h3 a:visited,
.developmentOverview h3 a:hover,
.developmentOverview h3 a:active {
color: #fff;
text-decoration:none;
cursor: default;
} 

.developmentOverview p {
font-size: 12px;
}

div.developmentDesc {
width: 440px;
float:left;
overflow:auto;
}

.developmentOverview div.buttonLink {
width: 249px;
height: 15px;
padding: 5px;
position:relative;
background: transparent url(../images/red-button-bg.jpg) no-repeat center center;
text-align:center;
margin: 20px auto 0 auto;
}

div.shortButtonLink {
width: 142px;
height: 15px;
padding: 5px;
position:relative;
float:left;
background: transparent url(../images/red-button-bg-sm.jpg) no-repeat center center;
text-align:center;
margin: 20px 30px 0 30px;

}

.buttonLink a:link, .shortButtonLink a:link,.buttonLink a:visited, .shortButtonLink a:visited {
color: #fff;
font-size: 12px;
font-weight: bold;
}

.developmentOverview a.soloLink {
margin-top: 10px;
}

div#devMap {
width: 880px;
height: 300px;
margin: 40px auto 0 auto;
}

div.developmentLinks {
width: 180px;
height: 36px;
overflow: auto;
background: #251c1e url(../images/linkbox-bg.jpg) no-repeat center center;
padding: 12px 0 12px 80px;
margin:auto;
text-align: center;
}

.developmentLinks a:link, .developmentLinks a:visited  {
font-size: 14px;
font-weight: bold;
color: #fff;
}

div.inlineMaps {
width: 260px;
overflow:auto;
margin-left: 12px;
border: 1px solid #c41724;
padding: 3px;
}

div#citygateMap, div#gatewayMap, div#linkMap, div#pointMap, div#valleyMap {
width: 260px;
height: 130px;
}

/*********news page *********/

div.newsItem {
margin: 0 0 20px 0;
width: 440px;
overflow:auto;
padding-bottom: 10px;
border-bottom: 1px solid #c41724;
}

div.newsArticle {
margin: 0 0 20px 0;
width: 880px;
overflow:auto;
clear:both;
}

div.newsPic {
width: 310px;
float:right;
margin: 0 0 5px 36px;
overflow:auto;
}

.newsPic img{
border: 1px solid #c41724;
background: #000;
padding: 4px;
margin-bottom: 12px;
float:right;

}

.newsArticle h3, .newsItem h3 {
font-weight:bold;
font-size: 14px;
margin-bottom: 15px;
}

.newsArticle p {
font-size: 12px;
}



/********misc*************/

a.whiteLink:link, a.whiteLink:visited {
color: #ffffff;
}

a.whiteLink:hover, a.whiteLink:active {
color: #c41724;
}

div.noBottomBorder { border-bottom:none }

img#floatRight {
float:right;
}

p.contentConstrained {
width: 440px;
}