/*
	Author	:	Sonora DesignWorks
	Website	:	SonoraDesignWorks.com
*/


@import url("reset.css");

@import url("http://fonts.googleapis.com/css?family=Droid+Serif");



/* GENERAL
-----------------------------------------------------------------------------*/

body  {
	font-family:Arial, Helvetica, sans-serif;
	background: #666;
	text-align: center;
	color: #202020;
}

/* CONTAINER
-----------------------------------------------------------------------------*/

#container { 
	width: 960px;
	background: #FFF;
	margin: 0 auto;
	text-align: left;
	-webkit-box-shadow: 0px 0px 8px #000; 
	-moz-box-shadow: 0px 0px 8px #000; 
	box-shadow: 0px 0px 8px #000; 
}


/* LINKS
-----------------------------------------------------------------------------*/

a:link, a:visited {color:#488db6; text-decoration:none}
a:hover, a:active  	{color:#488db6; text-decoration:underline}
 

/* HEADER
-----------------------------------------------------------------------------*/

#topBar {background:#193b33; width:960px; height:26px; color:#e1dcd9; font-family: 'Droid Serif', arial, serif; }
#topBar p {margin:0}
#topBar span {color:#908e8e; padding:0 15px}
#topBar .add {float:left; font-size:13px; padding:5px 0 0 25px}
#topBar .cont {float:right; font-size:14px;  padding:5px 25px 0 0}


#topBar a:link, #topBar a:visited {text-decoration:none; }
#topBar a:hover, #topBar a:active {text-decoration:none; color:#fff}

#header { 
	background: #fff; 
	height:127px;
} 

#header h1 {
	background:url(../images/logo.gif) no-repeat;
	margin-left: 269px;
	position:relative; top:25px;
	padding: 0;
	height: 84px;
	width: 360px;
	text-indent: -9999px; 
}

h1 a {
	display: block;
	height: 84px;
	width: 360px;
}


/* MAIN NAV
-----------------------------------------------------------------------------*/

#mainNav {width:960px; background:url(../images/navBack.gif) no-repeat; height:34px; text-align:center;}
#mainNav ul {padding-top:8px}
#mainNav li {display:inline}

#mainNav a:link, #mainNav a:visited {color:#e1dcd9; text-decoration:none;  
font-family: 'Droid Serif', arial, serif;    font-size:17px; font-variant:small-caps;  }

#mainNav a:hover, #mainNav a:active {color:#f6f5f5; text-decoration:none; 
font-family: 'Droid Serif', arial, serif;    font-size:17px; font-variant:small-caps;  }

#mainNav .sep {color:#818786; padding:0 15px}

/* Homepage
-----------------------------------------------------------------------------*/

#homeContent {
	min-height:359px; margin-top:10px; margin-bottom:15px; background:url(../slider/butBack.jpg) repeat-x 0 175px
}

.homeText {padding:25px; clear:both; line-height:17px}
.homeText img {float:right; margin-left:20px}


/* LEFT COL
-----------------------------------------------------------------------------*/

#leftCol {
	float: left;
	width: 689px;
	margin: 12px 0 0 12px;
	line-height:18px
}

#leftContent {margin-left:50px; width:615px; margin-top:45px;}
#leftContent p:first-child {margin-top:0px}

/* HEADER IMAGES
-----------------------------------------------------------------------------*/

#headImage {width:685px; height:126px; background:url(../images/headers/city.jpg); border:2px solid #4d5a57}
#dev-page #headImage {width:685px; height:126px; background:url(../images/titles/dev.gif);}
#contact-page #headImage {width:685px; height:126px; background:url(../images/headers/charles.jpg);}
#kitchen-page #headImage {width:685px; height:126px; background:url(../images/headers/beacon.jpg);}

#headImage img {position:relative; top:107px; left:20px}

/* RIGHT COL
-----------------------------------------------------------------------------*/

#rightCol {
	float: right;
	width: 251px;
	
	margin:0; min-height:420px; background:url(../images/rightTop.jpg) no-repeat; padding-top:12px; line-height:18px
}

.rightCall {text-align:right; color:#4d5a57; font-size:11px; font-weight:bold; text-transform:uppercase; margin-right:12px; margin-top:45px}
.rightCall span {font-size:16px}

/* RIGHT COL HEADER IMAGE
-----------------------------------------------------------------------------*/

.rightHead {width:236px; height:126px; background:url(../images/sideCol/bath.jpg); border:2px solid #4d5a57}
#management-page .rightHead {background:url(../images/sideCol/manage.jpg)}
#dev-page .rightHead {background:url(../images/sideCol/fence.jpg)}
#kitchen-page .rightHead {background:url(../images/sideCol/bath.jpg)}
#contact-page .rightHead {background:url(../images/sideCol/contact.jpg)}

/* MAIN CONTENT
-----------------------------------------------------------------------------*/

#mainContent { margin: 0px; padding: 0 20px} 

/* FOOTER
-----------------------------------------------------------------------------*/

#footer { 
	padding: 0px;
	background:#6a7c77;
	width:960px; height:30px;
	margin:0 auto;
	margin-top:22px; margin-bottom:20px; 
} 

#footer p {
	margin: 0;
	color:#e2e1e1;
	font-size:11px
}

#footer .copy {float:left; padding:10px 0 0 25px}
#footer .sonora {float:right; padding:6px 15px 0 0}

#footer a:link, #footer a:visited {color:#e2e1e1; text-decoration:none}
#footer a:hover, #footer a:active {color:#e2e1e1; text-decoration:underline}




/* Active Page Links
-----------------------------------------------------------------------------*/
#home-page .home-link,
#management-page .management-link,
#kitchen-page .kitchen-link,
#dev-page .dev-link,
#contact-page .contact-link
{color:#FFC !important; cursor:pointer; text-decoration:underline}

/* Gallery
-----------------------------------------------------------------------------*/
.galTable {}
.galTable td {padding:0 15px 15px 0; vertical-align:middle; text-align:center}
.galTable img { 
	-webkit-box-shadow: 0px 0px 3px #000; 
	-moz-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000; *border:1px solid #ccc
}
.galTable img:hover {
	-webkit-box-shadow: 0px 0px 5px #000; 
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000; *border:1px solid #999
}

/* Interior styles
-----------------------------------------------------------------------------*/
#pageBack {background:url(../images/rightBack.jpg) right bottom no-repeat;}


.bullets {list-style-type:disc}
.bullets li {margin-left:15px}

.map {-webkit-box-shadow: 0px 0px 5px #000; 
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000; margin-top:25px; *border:2px solid #666}
	
.shadowBox {background:url(../images/shadow.jpg) top left no-repeat; padding-top:10px; margin-top:20px}
.contactTable {margin:5px 0 15px 0}
.contactTable span {color:#666}
.click {border-bottom:1px dotted #ccc; margin:25px 0 5px 0}

/* Gallery
-----------------------------------------------------------------------------*/
.galTable {}
.galTable td {padding:0 15px 15px 0; vertical-align:middle; text-align:center}
.galTable img { 
	-webkit-box-shadow: 0px 0px 3px #000; 
	-moz-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000; *border:1px solid #ccc
}
.galTable img:hover {
	-webkit-box-shadow: 0px 0px 5px #000; 
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000; *border:1px solid #999
}
.portTable {margin:50px 0 0 40px; line-height:18px}


h3.descript  {font-family: 'Droid Serif', arial, serif;    font-size:17px; font-variant:small-caps; text-align:center; padding-top:25px }

.galTable img { 
	-webkit-box-shadow: 0px 0px 3px #000; 
	-moz-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000; *border:1px solid #ccc
}
.galTable img:hover {
	-webkit-box-shadow: 0px 0px 5px #000; 
	-moz-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000; *border:1px solid #999
}
.spacer {width:160px}

a.login {float:right;

font-size: 11px; text-transform:uppercase; margin:10px 23px 0 0;



color: #0d0d0d;

padding: 5px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;

border: solid #575556 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#d4d8db));
background: -moz-linear-gradient(top, #ffffff, #d4d8db);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#d4d8db);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#d4d8db);
display:inline-block; /* IE is so silly */
}
a.login:hover {
background: #fff;
}