/* Project: South Pointe Website
   Version: v1.01
    Author: Steve Skladany, www.skladany.net
      Date: 10.27.8

======================================== */

/* =====================================
::::::::::::: the LEVELER ::::::::::::::
======================================== 
 http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller
 "The intention is to remove as many of the differences 
 between browsers and platforms as possible in one fell swoop."
 
 The 'height/min-height' code keeps the vertical scroll bar from disappearing in Firefox
======================================== */

* { margin:0; padding:0;
}

/* Force vertical scroll bar in FF */
html { min-height: 100%; margin-bottom: 1px; }

body { min-height:101%; font:100.01%/130% Arial, Tahoma, Helvetica, sans-serif; color:#000; }
td { vertical-align: top; }

/* =====================================
:::::::::::: GLOBAL STYLES :::::::::::::
======================================== */
body {
	font-size: .75em; 
	height:100%; /* this is the key! */ 
	background: url(../images/background.png) #fffde6 repeat-x; 
}
	
p {	
	margin: 0 0 1em 0;
	padding: 0;

	line-height: 1.6em;
}

h1, h2 { 	
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: normal;
}

h3 {
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: normal;	
}

h4 {
	font-size: 1em;
	line-height: 1.3em;
	font-weight: normal;	
}
	
li {	
	list-style-type: none;
}
	
hr {
	display: none;
}

.clearBoth {
	clear: both;
}


/* Links
======================================== */

a, a h1, a h2,  a p, a img {
	text-decoration: none;
}

a img {	
	border: 0;
}
	


/* =====================================
:::::::::::: MAIN STRUCTURE ::::::::::::
======================================== */
body {
	padding: 0 10px;
	text-align: center;
}

#mainWrapper {
	width: 838px;
	margin: 32px auto 0 auto;
	border: 1px solid #c8a533;
	background-color: #fff;
}

#header h1, #header h2, #mainNav li a, h2#headline {
	display: block;
    overflow: hidden;
	text-indent: -9000px;
}

#header {
	position: relative;
	height: 168px;
    width: 836px;
    padding: 1px 1px 0 1px;
	background: url(../images/header.png) 1px 1px #fff no-repeat;	
}

#mainNav {
	position: relative;
	height: 36px;
    padding: 0 1px;
}

#mainNav ul {
	float: right;
	width: 645px;
}

h2#headline {
	height: 60px;
	width: 836px;
	margin-left: 1px;
	background-color: #c8a533;
}

#footer {
	text-align: left;
	border-top: 4px solid #c8a533;
}

body {
	height: 100%;
}


/* =====================================
::::::::::::::: ELEMENTS :::::::::::::::
======================================== */

/* mainNav
----------------------- */

#mainNav li {
	float: left;
}

#mainNav li a {
	height: 36px;
	background: url(../images/mainNav.png) no-repeat;		
}

#mainNav li a.welcome {
	width: 83px;	
}

#mainNav li a.space {
	width: 58px;
	background-position: -83px 0;	
}

#mainNav li a.finishes {
	width: 69px;
	background-position: -141px 0;	
}

#mainNav li a.construction {
	width: 103px;
	background-position: -210px 0;	
}

#mainNav li a.location {
	width: 72px;
	background-position: -313px 0;	
}

#mainNav li a.availability {
	width: 88px;
	background-position: -385px 0;	
}

#mainNav li a.progress {
	width: 77px;
	background-position: -473px 0;	
}

#mainNav li a.contactUs {
	width: 95px;
	background-position: -550px 0;	
}


/* mainNav hover
----------------------- */

#mainNav li a:hover.welcome, #mainNav li a.welcome.selected {
	background-position: 0 -38px;	
}

#mainNav li a:hover.space, #mainNav li a.space.selected {
	background-position: -83px -38px;
}

#mainNav li a:hover.finishes, #mainNav li a.finishes.selected {
	background-position: -141px -38px;
}

#mainNav li a:hover.construction, #mainNav li a.construction.selected {
	background-position: -210px -38px;	
}

#mainNav li a:hover.location, #mainNav li a.location.selected {
	background-position: -313px -38px;	
}

#mainNav li a:hover.availability, #mainNav li a.availability.selected {
	background-position: -385px -38px;	
}

#mainNav li a:hover.progress, #mainNav li a.progress.selected {
	background-position: -473px -38px;	
}

#mainNav li a:hover.contactUs, #mainNav li a.contactUs.selected {
	background-position: -550px -38px;	
}

/* headlines
----------------------- */

#welcomePage h2#headline {
	background: url(../images/welcome.png) 14px 14px #c8a533 no-repeat;	
}

#spacePage h2#headline {
	background: url(../images/space.png) 14px 20px #c8a533 no-repeat;	
}

#finishesPage h2#headline {
	background: url(../images/finishes.png) 14px 14px #c8a533 no-repeat;	
}

#constructionPage h2#headline {
	background: url(../images/construction.png) 14px 14px #c8a533 no-repeat;	
}

#locationPage h2#headline {
	background: url(../images/location.png) 14px 14px #c8a533 no-repeat;	
}

#availabilityPage h2#headline {
	background: url(../images/availability.png) 14px 14px #c8a533 no-repeat;	
}

#progressPage h2#headline {
	background: url(../images/progress.png) 14px 20px #c8a533 no-repeat;	
}

#contactUsPage h2#headline {
	background: url(../images/contactUs.png) 14px 14px #c8a533 no-repeat;	
}

/* mainContent
----------------------- */

#mainContent {
	text-align: left;
}

#mainPhoto {
	width: 838px;
	text-align: center;
	margin: 0;
	padding: 0;
	clear: both;
}

#photos, #footer h4 {
	float: left;
	width: 300px;
	margin: 5px 0 0 17px;
}

#photos {
	line-height: 1px;
	margin-bottom: 1em;
	margin-top: 0px; 
}

#photos img {
	margin: 0;
	padding: 0;
	margin-bottom: 1px;
}

#spacesPage #photos img, #constructionPage #photos img, #locationPage #photos img, #availabilityPage #photos img {
	/* Fixes 4px gap between images for IE */
	display:inline-block;
	display:block;	
	/* IE Fix */
}

#copy, #footer ul {
	margin: 0 48px 15px 340px;
	/* kills the margin-collapse effect since IE implement that wrong */
	padding-top: 15px; 
}

#mainContent h3 {
	color: #452200;
	font-weight: normal;
	font-size: 1.4em;
	letter-spacing: .03em;
	margin: 1em 0 .5em 0;
	padding-bottom: .4em;
	border-bottom: 1px solid #e3d299;
}

/* li
----------------------- */

#copy li {
	line-height: 1.8em;
	list-style-type: disc;
	color: #7d3e00;
}

#copy ul {
	margin-left: 1.25em;
}


/* zoomPhoto
----------------------- */

a.zoomPhoto {
	position: relative; }
	
a.zoomPhoto img {
	background-color: #fff; }
	
a.zoomPhoto img.preview {
	width: 200px; }	


a.zoomPhoto .preview
{
	display: none;
}

a.zoomPhoto:hover .preview
{
	display: block;
	position: absolute;
	top: -45px;
	left: -45px;
	border: 1px solid #c8a533;
	z-index: 1;
}


/* photoMenu
----------------------- */

#photoMenu {
	margin-top: 7px;
}

#photoMenu a {
	float: left;
}

#photoMenu a {
	margin-right: 6px;
}

#photoMenu a.last {
	margin-right: 0;
}

/* footer
----------------------- */
#footer {
	clear: both;
}

#footer li  {
	float: left;
}

#footer h4 {
	margin-top: 2px;
	font-size: .8em;
	letter-spacing: .03em;
	color: #452200;
	width: 280px;
	padding-top: 2px;
}

#footer ul {
	margin: 0;
	margin-top: 0;
	margin-left: 328px;
	padding: 0;
	width: 509px;
	font-size: .85em;
}

#footer a {
	padding-top: 1px;
	padding-bottom: 1px;
	text-align: center;
	display: block;
	height: 18px;
	color: #452200;
}

#footer a:hover, #footer a.selected {
	font-weight: bold;
	color: #fff;
	background-color: #c8a533;
}

#footer a.welcome		{	width: 58px;	}
#footer a.space			{	width: 48px;	}
#footer a.finishes		{	width: 58px;	}
#footer a.construction	{	width: 82px;	}
#footer a.location		{	width: 60px;	}
#footer a.availability	{	width: 74px;	}
#footer a.progress		{	width: 63px;	}
#footer a.contactUs		{	width: 66px;	}
	
#copyright {
	text-align: right;
	width: 828px;
	margin: 5px auto 30px auto;
	padding: 0;
	color: #666;
	font-size: .80em;
	font-weight: normal;
}

/* boxedLink
----------------------- */

a.boxedLink, #header h3 a, #imagePage #header h3 span {
	font-size: .9em;
	padding: 2px 6px 1px 6px;
	font-weight: bold;
	color: #3e2716;
	background-color: #fffde6;
	border: 1px solid #c8a534;
}

a:hover.boxedLink, #header h3 a:hover {
	color: #fff;
	background-color: #c8a534;
}

#header h3 a, #imagePage #header h3 span {
	position: absolute;
	top: 101px;
	right: 14px;
	font-size: .75em;
	color: #663e1d;
}




/* subLink
----------------------- */

#subLink {
	position: relative;
}

#subLink img {
	position: absolute;
	top: -49px;
	right: 4px;
}

#subLink .boxedLink {
	display: block;
	position: relative;
	top: 8px;
	left: 105px;
	width: 340px;
}

#top {
	padding-top: 3.5em;
}

/* form
----------------------- */

fieldset {
	border: none;
}

form input, form textarea {
	float: left;
 	border: 1px solid #aaa;
 }
 
form label {	
	float: left;
	color: #7d3e00;
	width: 75px;
}

form input, form textarea {
	width: 300px;
}

form p {
	clear: both;
	padding-bottom: 1.25em;
}

form textarea {
	margin-bottom: 1em;
}

form .button {
	display: block;
	width: 100px;
	margin-left: 75px;
}

form .checkbox {
	margin-left: 75px;
	margin-bottom: 0;
	padding-bottom: .65em;
}

form .checkbox input {
	margin-right: .5em;
	border: none;
	width: 15px;
}



/* disclaimer
----------------------- */

h4.disclaimer {
	font-size: 11px;
	color: #666;
	font-weight: normal;
	font-style: italic;	
	margin-top: 1em;
}


/* =====================================
:::::::::::::::: PAGES :::::::::::::::::
======================================== */

/* welcomePage
----------------------- */

#welcomePage #photos, #contactUsPage #photos {
	margin-top: 17px;
}
	
/* spacePage
----------------------- */

#spacePage #subLink .boxedLink, #availabilityPage #subLink .boxedLink  {
	left: 177px;
	width: 267px;
}

#spacePage #copy li strong, #contactUsPage #copy strong {
	font-size: 1.4em;
	font-weight: normal;
}

p.pdf {
	width: 100%
	margin: 3px 0;
	padding-bottom: 2em;
}

p.pdf img {
	position: relative;
	top: 4px;
	margin-right: .5em;
}

p.pdf a.boxedLink {
	padding-top: 0;
	padding-bottom: 3px;
	float: right;
}
	

/* finishesPage
----------------------- */

#finishesPage #photos h4{
	position: absolute;
	top: 240px;
	left: 79px;		
	font-size: 9px;
	color: #fff;
	font-weight: normal;
	font-style: italic;	
}

#finishesPage #photos {
	position: relative;
}

#finishesPage #photos h4.zoomHelp {
	color: #000;
	top: 365px;
	left: 85px;
}

#finishesPage p.top, #locationPage p.top {
	margin-right: 125px;
}

#finishesPage #subLink img {
	top: -60px;
}

/* progressPage
----------------------- */

#progressPage #photoMenu {
	margin-top: 15px;
}

#progressPage #photoMenu span a {
	margin: 0;
}

#progressPage #photoMenu span {
	float: left;
	display: block;
	background-color: #c8a533;
	width: 96px;
	height: 96px;
	margin-right: 6px;
	margin-bottom: 6px;
}

#progressPage #photoMenu span.last {
	margin-right: 0;
}

#progressPage #photoMenu a:hover, #progressPage #photoMenu a.selected {
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}

#progressPage #copy {
	text-align: center;
}

#progressPage #copy h4 {
	color: #452200;
	font-weight: normal;
	font-style: italic;
	font-size: .9em;
	letter-spacing: .03em;
	margin: .25em 0 .5em 0;
}

	
/* contactPage
----------------------- */

#contactUsPage #photos {
	color: #af1e23;
	font-size: .9em;
	line-height: 1.2em;
}

#contactUsPage .address {
	float: left;
	width: 40%;
	padding: 2em 10px 0 15px;
}

#contactUsPage .address h4 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: 1px solid #af1e23;
}

#contactUsPage #photos a {	
	clear: both;
	display: block;
	color: #af1e23;
	font-size: 1.5em;
	padding-top: 1em;
	margin: 0 auto 1em auto;
	width: 100%;
	text-align: center;
}


#contactUsPage #copy h4 {
	color: #452200;
	font-weight: normal;
	font-size: 1em;
	margin: .5em 0 2em 0;
	padding: 2px 6px 1px 6px;	
	color: #fff;
	background-color: #c8a534;
}

	
/* imagePage
----------------------- */

#imagePage #mainContent {
	padding: 1px;
	line-height: 0;
}