/* Browser Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body { 
  line-height: 1.5; 
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: top; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


/* Body
-------------------------------------------------------------- */

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body {
  font-size: 70%;
  color: #808080; 
  background:#FFF url('../_img/elements/mainbg.jpg') repeat-x top;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  margin:0;padding:0;
}


p           { margin: 0 0 1em; font-size:1.1em;}

a:focus, 
a:hover     { color: #000;text-decoration: underline;}
a           { color: #ACA095;text-decoration: none; }

a.blk:focus,
a.blk:hover  { color: #ACA095;text-decoration: underline;}
a.blk {color: #000;text-decoration: none; }

a.register:focus,
a.register:hover  { color: #808080;text-decoration: underline;}
a.register {color: #BF3D00;text-decoration: none;font-weight:bold; font-size:2em; }

a.dl:focus,
a.dl:hover  { color: #808080;text-decoration: underline;}
a.dl {color: #BF3D00;text-decoration: none;font-weight:bold; font-size:1.5em; }

ul          { list-style-type: disc; margin: 0 0 1.5em; font-size:1.1em;}
ol          { list-style-type: decimal; margin: 0 0 1.5em; font-size:1.1em;}

li {margin-left:15px;}

hr {display: block;position: relative;padding: 0;margin: 15px auto;height: 0;max-height: 0;width: 100%;clear: both;border: none;border-top: 1px solid #000;border-bottom: 1px solid #FFF;font-size: 1px;line-height: 0;}
hr.spacer {display: block;position: relative;padding: 0;margin: 15px auto 0;height: 0;max-height: 0;width: 100%;clear: both;border: none;border-bottom: 1px solid #FFF;font-size: 1px;line-height: 0;}

blockquote  { margin: 1.5em; color: #333; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #000000; }

h1 { font-size: 1.8em; text-align:uppercase;}
h2 { font-size: 1.6em; }
h3 { font-size: 1.5em;}
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; font-weight: bold; margin-bottom: .25em;}
h6 { font-size: 1em; font-weight: bold; margin-bottom: .25em;}

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}

h2.home {color:#808080;line-height:1.75em;font-size:1.6em;}
h2.subtitle {padding:15px 0;}
h3.title { font-weight: bold;}

/* Default Classes
-------------------------------------------------------------- */

.small      { font-size: .775em; margin-bottom: 1.875em; line-height: 1.5em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #999; }
.dark {color:#2a2a2a;font-weight:bold;}
.right {float:right;}
.left {float:left;}
.left20 {float:left; margin-right: 20px;}

.center {text-align:center;}


/* Images
-------------------------------------------------------------- */
img {margin:0;padding:0;}

/* Container
-------------------------------------------------------------- */
#container {margin:0 auto;text-align: center;width: 951px;background:#fff;padding:0 15px;}


/* Header
-------------------------------------------------------------- */

#header {text-align:left;width: 951px;height:120px;border-bottom:1px solid #000;margin-bottom:45px;}

#logo a {position:absolute;display:block;width:155px;height:120px;background:url('../_img/elements/sprucelogo.png') no-repeat 0 0;text-indent:-9999px;overflow:hidden;z-index:1000}
#logo a:hover {background-position:0 -120px;}
#logo a {text-decoration:none;}

#register a {position:absolute;display:block;width:135px;height:40px;background:url('../_img/nav/register.png') no-repeat 0 0;text-indent:-9999px;overflow:hidden;z-index:1000;margin-left:816px;}
#register a:hover {background-position:0 -40px;}
#register a {text-decoration:none;}

#topnav {position:absolute;width:681px;height:30px;margin-left:260px;margin-top:90px;text-align:left;z-index:1001;}

.topnav {width: 732px;height:30px;}
.topnav li {position:relative;display: inline;float:left;margin:0;padding-left:0; }
.topnav li.last {padding-right:0;}
.topnav li a:link, .topnav li a:visited { height: 30px;text-indent: -9999px;overflow: hidden;border-left:1px solid #000;}
	
.topnav .home a:link, .topnav .home a:visited {width: 86px;background: url('../_img/nav/topnav.png') no-repeat 0 0;float:left;}
.topnav .home a:hover, .topnav .home a:focus, .topnav .home a:active  {background: url('../_img/nav/topnav.png') no-repeat 0 -30px;}
.current-home .home a:link, .current-home .home a:visited {background: url('../_img/nav/topnav.png') no-repeat 0 -30px; cursor: default;}

.topnav .neighbourhood a:link, .topnav .neighbourhood a:visited {width: 170px;background: url('../_img/nav/topnav.png') no-repeat -86px 0;float:left;}
.topnav .neighbourhood a:hover, .topnav .neighbourhood a:focus, .topnav .neighbourhood a:active {background: url('../_img/nav/topnav.png') no-repeat -86px -30px;}
.current-neighbourhood .neighbourhood a:link, .current-neighbourhood .neighbourhood a:visited {background: url('../_img/nav/topnav.png') no-repeat -86px -30px; cursor: default;}

.topnav .homes a:link, .topnav .homes a:visited {width: 130px;background: url('../_img/nav/topnav.png') no-repeat -256px 0;float:left;}
.topnav .homes a:hover, .topnav .homes a:focus, .topnav .homes a:active  {background: url('../_img/nav/topnav.png') no-repeat -256px -30px;}
.current-homes .homes a:link, .current-homes .homes a:visited {background: url('../_img/nav/topnav.png') no-repeat -256px -30px; cursor: default;}

.topnav .intracorp a:link, .topnav .intracorp a:visited {width: 126px;background: url('../_img/nav/topnav.png') no-repeat -386px 0;float:left;}
.topnav .intracorp a:hover, .topnav .intracorp a:focus, .topnav .intracorp a:active {background: url('../_img/nav/topnav.png') no-repeat -386px -30px;}
.current-intracorp .intracorp a:link, .current-intracorp .intracorp a:visited {background: url('../_img/nav/topnav.png') no-repeat -386px -30px; cursor: default;}

.topnav .blog a:link, .topnav .blog a:visited {width: 84px;background: url('../_img/nav/topnav.png') no-repeat -512px 0;float:left;}
.topnav .blog a:hover, .topnav .blog a:focus, .topnav .blog a:active {background: url('../_img/nav/topnav.png') no-repeat -512px -30px;}
.current-blog .blog a:link, .current-blog .blog a:visited {background: url('../_img/nav/topnav.png') no-repeat -512px -30px; cursor: default;}

.topnav .contact a:link, .topnav .contact a:visited {width: 85px;background: url('../_img/nav/topnav.png') no-repeat -596px 0;float:left;}
.topnav .contact a:hover, .topnav .contact a:focus, .topnav .contact a:active {background: url('../_img/nav/topnav.png') no-repeat -596px -30px;}
.current-contact .contact a:link, .current-contact .contact a:visited {background: url('../_img/nav/topnav.png') no-repeat -596px -30px; cursor: default;}

#nav {z-index:1001;}
#nav li ul {display: none; position: absolute; top: 30px; left: 0;  width: 170px;  padding: 0 0 5px;  background: #fff;border: 1px solid #000;  }
#nav li:hover ul { display: block; }
#nav li ul li {float: none;}
#nav li ul li a {padding: 3px 12px; display: inline-block; background-image:none;text-indent: 0px;height:12px;text-transform:uppercase;}
#nav li ul li a {display: block;font-size:.8em;font-weight:bold;border-left:none;cursor: pointer;}
#nav li ul li a:hover { color: #000;text-decoration:none;}
  

/* Content
-------------------------------------------------------------- */

#content {text-align:left;width:951px;}

.slideshow { height: 380px; width: 951px; overflow:hidden; }
.bordertop {border-top:1px solid #000;}
.maincolumn p {color:#808080;line-height:1.75em;margin-bottom:1em;font-size:1.6em;}
.maincolumn ul {margin-left:15px;}
.maincolumn ul li {color:#808080;line-height:1.75em;margin-bottom:0em;font-size:1.6em;clear:both;}

ul.pricing {list-style:none;}

div.layout {width:225px;float:left}
div.price {float:left}

#feature {margin-bottom:30px;}
.feature p {font-size:1.2em;line-height:1.3em;}
.feature img {margin:10px 0;}

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6 {float:left;margin-right: 15px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 146px;}
.span-2  { width: 307px;}
.span-3  { width: 468px;}
.span-4  { width: 629px;}
.span-5  { width: 790px;}
.span-6, div.span-6 { width: 951px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 161px;}
.append-2  { padding-right: 322px;}
.append-3  { padding-right: 483px;}
.append-4  { padding-right: 644px;}
.append-5  { padding-right: 805px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 161px;}
.prepend-2  { padding-left: 322px;}
.prepend-3  { padding-left: 483px;}
.prepend-4  { padding-left: 644px;}
.prepend-5  { padding-left: 805px;}



/* footer
-------------------------------------------------------------- */
#footer {text-align:left;margin: 0 auto;width:951px;padding:15px 0;color:#808080;font-size:1em;}

#footercontact {border-bottom:8px solid #000;padding-bottom:15px;margin-bottom:15px;vertical-align:bottom;}
#footercontact h3 {font-size:1.2em;line-height:1.4em;}
#footercontact h3 span {font-size:1em;}

#footernav h4 {letter-spacing:.2em}
#footernav a, #footernav a h4 {color:#808080}
#footernav a:hover, #footernav a:hover h4,
#footernav a:active, #footernav a:active {color:#000000;text-decoration:none;}

#footernav ul {list-style:none;margin:0;padding:0;float:left;}
#footernav ul li {margin:0;}
.copyright {text-align:right;color:#000;padding-top:15px;}

a.twitter:link, a.twitter:visited, a.twitter:active, a.twitter:hover {background: transparent url("../_img/elements/twitter.png") no-repeat;padding-left:21px;padding-bottom:5px;}


/* BLOG STYLES
-------------------------------------------------------------- */
.blogcolumn p {color:#808080;line-height:1.5em;margin-bottom:1em;font-size:1.3em;}
.blogcolumn a:hover  { color: #ACA095;text-decoration: underline;}
.blogcolumn a {color: #000;text-decoration: none; }


.sidebar ul {list-style:none;margin:0;padding:0;}
.sidebar ul li {margin-left:0;margin-bottom:20px;}
.sidebar ul li ul li {margin-left:5px;margin-bottom:5px;}
.sidebar li a {line-height:.25em;font-size:.9em;text-transform:uppercase;}

h2.page-title {font-weight: bold;}
h3.widgettitle {font-weight: bold;}

.entry-date {color:#000;margin:0;}
.navigation {margin:15px 0;height:1.75em;}
div.navigation div.nav-next {float:right;text-align:right;}
div.navigation div.nav-previous {float:left;}

.excerptblock {border-bottom:1px dotted #666;margin-bottom:10px;padding-bottom:15px;}
.excerptblock p {margin-bottom:0;}

/* Registration
-------------------------------------------------------------- */
#registerwrapper {text-align:left;width:700px;border:1px solid #000;background:#fff;overflow:hidden;}
#registercontent {text-align:left;padding:25px 50px;}
#registercontent h5 {margin-bottom:1em;}

.regcol {width:290px;float:left;margin-right:20px;margin-top:10px;margin-bottom:10px;overflow:hidden;}
.last {margin-right:0px;}
.qselect {width:400px;margin-bottom:5px;clear:both;}
.registertitle {width:110px;float:left;}
.registerinput {width:160px;float:left;}


/* Forms
-------------------------------------------------------------- */

label {font-size:1em;}


/* Fieldsets */
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.1em; }

/* Text fields */
input.text	{margin:0;font-size:1.1em;}
input.text 	{ border:1px solid #333; background:#fff; padding:2px;margin: 0 1px 5px 0; }
input.text:focus       { border:1px solid #999; background:#fff; }

input.checkbox             {margin-top:8px; }

/* Textareas */
textarea            { margin: 0; }
textarea            { border:1px solid #333; background:#FFF; padding:2px; }
textarea:focus      { border:1px solid #666; background:#eee; }

textarea.comments {width:525px;height:50px;}

/* Select fields */
select              { border:1px solid #333;padding:1px;font-size:1.1em;margin: 3px 5px 5px 0;}
select:focus        { border:1px solid #666; background:#eee; }


.formwide {width:280px;}
.formmid {width:160px;}
.formsm {width:40px;}


/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }

.required {color:#990000;}






/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

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

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

img.alignleft {
	float: left;
	margin-right: 11px;
}