/* TYPOGRAPHY */
/* ----------------------------------------- */

/* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { font-size: 75%; color: #fff; font-family: Arial, Helvetica, sans-serif; }

/* Headings 
----------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: normal; color: #fff; text-transform: uppercase; }
h1 { font-size: 3em; line-height: 1; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; padding-bottom: 1em; }
h4 { font-size: 1.2em; }
h1 img { margin: 0; }

/* Text elements
----------------------------------------------------------- */
p { padding: 0 0 1.5em; font-size: 1.1em; }

a { color: #fff; text-decoration: none; }
a:focus, a:hover { color: #fff; text-decoration: underline; }
#content a { text-decoration: underline; }
#content a:hover { text-decoration: none; }

blockquote { margin: 1.5em; font-style: italic; }
strong { font-weight: bold; }
em { font-style: italic; }

/* Lists 
----------------------------------------------------------- */
li ul, li ol { margin: 0 1.5em; }
ul { list-style-type: none; font-size: 1.1em; }
ol { list-style-type: decimal; }

ul.list { margin: 0 0 1.5em 1.4em; }
ul.list li { padding-left: 15px; background: url(../images/bullet.gif) no-repeat left center; }

/* Tables 
----------------------------------------------------------- */
table { margin-bottom: 1.4em; width: 100%; }
th { font-weight: bold; }
th, td, caption { padding: 4px 10px 4px 5px; vertical-align: top; }
tfoot { font-style: italic; }
caption { background: #eee; }

/* Forms
----------------------------------------------------------- */
label { font-weight: bold; }
fieldset { padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size: 1.2em; }
textarea { width: 390px; height: 250px; padding: 5px; }

/* Clearing floats without additional markup
----------------------------------------------------------- */
.group:after, #container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
.group, #container { display: block; }
.clear { clear: both; }


/* LAYOUTS */
/* ----------------------------------------------------------- */

body { background: #000000 url(../images/bkgnd.jpg) repeat-x 0 185px; }
#container { width: 900px; margin: 0 auto; }
#header { width: 100%; height: 185px; position: relative; }
#content { width: 100%; position: relative; }
#footer { width: 100%; background: #2a292e; text-transform: uppercase; }
/* navigation
----------------------------------------------------------- */
#header h1 { position: absolute; top: 35px; left: 340px; }
#header ul { position: absolute; border-top: 1px solid #4a494e; border-bottom: 1px solid #4a494e; text-transform: uppercase; padding: 10px 0; }
ul#navServices { left: 0; top: 90px; }
ul#navSite { right: 0; top: 90px; }
#header ul li { display: inline; }
#header ul li a { float: left; background: url(../images/red_bar.jpg) no-repeat; font-size: .9em; }
#header ul li a:hover { text-decoration: none; }
ul#navServices li a { margin-right: 10px; padding-right: 10px; background-position: right center; }
ul#navSite li a { margin-left: 10px; padding-left: 10px; background-position: left center; }
.last a { margin: 0 !important; border: none !important; padding: 0 !important; background: none !important; }
#header ul li a:hover { color: #970438; }
#header ul li a.active { color: #970438; }

/* footer
----------------------------------------------------------- */
#footer { width: 100%; float: left; overflow: hidden; position: relative; color: #878789; }
#footer ul { padding: 5px 0; clear: left; float: left; position: relative; left: 50%; text-align: center; }
#footer ul li { display: block; float: left; position: relative; right: 50%; font-size: .9em; }
#footer li a { color: #878789; margin-right: 10px; background: url(../images/gray_bar.jpg) no-repeat right center; padding-right: 10px; display: block; }

/* homepage image slideshow
----------------------------------------------------------- */
#gallery { position: relative; height: 350px; overflow: hidden; width: 900px; }
#gallery a { float: left; position: absolute; }
#gallery a:hover { cursor: default; }
#gallery a.show { z-index: 500; } 
#gallery .caption { z-index: 600; background-color: #000; color: #fff; height: 75px; width: 900px; position: absolute; top: 0;}
#gallery .caption .content { margin: 5px; font-size: 3em; text-align: center; width: 890px; font-style: italic; letter-spacing: 1px; }

/* homepage services tabs
----------------------------------------------------------- */
#servicesTabs { margin: 10px 0; }
#servicesTabs li { display: inline; }
#servicesTabs li a { float: left; width: 299px; border-right: 1px solid #970438; height: 130px; text-indent: -9999px; }
li#dev a { background: url(../images/nantucket_dev.png) no-repeat center 15px; }
li#int a { background: url(../images/nantucket_interiors.png) no-repeat center 15px; }
li#remod a { background: url(../images/nantucket_remod.png) no-repeat center 15px; border: none; }

/* sub-brand pages
----------------------------------------------------------- */
#brandIntro { width: 600px; margin: 10px 0; padding-left: 300px; position: relative; }
#brandIntro p { margin: 0; padding: 20px 0 20px 60px; border-left: 1px solid #970438; }
.developments { background: url(../images/nantucket_dev.png) no-repeat 70px 20px; }
.interiors { background: url(../images/nantucket_interiors.png) no-repeat 70px 20px; }
.remodelling { background: url(../images/nantucket_remod.png) no-repeat 70px 20px; }

/* sub-brand image carousel
----------------------------------------------------------- */
#carousel { position: relative; width: 900px; height: 350px; }
#brandCarousel { position: relative; visibility: hidden; left: -5000px; width: 900px; height: 350px; }
#carousel a { position: absolute; top: 0; width: 40px; height: 350px; display: block; text-indent: -9999px; }
.prev { left: 0; z-index: 100; background: url(../images/prev.png) no-repeat; }
.next { right: 0; z-index: 110; background: url(../images/next.png) no-repeat; }

/* contact page
----------------------------------------------------------- */
.adr, .tel, .web { font-size: 1.1em; width: 40%; float: left; }
.adr { border-left: 1px solid #970438; padding: 20px 0 30px 60px; }
.tel, .web { padding: 30px 0 0; }
.type { color: #970438; }
.org { text-transform: uppercase; }

/* showcase page
----------------------------------------------------------- */
.specCol { float: left; margin-right: 20px; width: 280px; }
.specCol h3 { color: #999; }
#content .movie { margin: 20px 0; width: 480px; float: left; }
hr { width: 100%; clear: both; margin: 0 0 30px 0; }
#brandIntro a.vidPointer { font-size: 1.2em; padding: 20px 0 20px 90px; background: url(../images/vid.png) no-repeat 60px center; display: block; border-left: 1px solid #970438; }
a.vidPointer:hover { cursor: pointer; }

/* misc
----------------------------------------------------------- */
.tint { background: url(../images/tint.png); }
.txtOnly { padding: 40px 0 20px; }
.h400 { height: 400px; }

#content .mission p, #content .eps p, #content .eps ul, #content .legal p, #content .legal ul, #content .sitemap ul { padding: 0 40px 20px 60px; }
#content .eps ul, #content .legal ul, #content .sitemap ul { border-left: 1px solid #970438; margin: 0; }
#content .legal h3, #content .legal h4 { border-left: 1px solid #970438; padding-left: 60px; }

/* h2's */
.about h2 { position: absolute; left: 80px; top: 60px; }
.contact h2 { position: absolute; left: 60px; top: 60px; }
.showcase h2 { position: absolute; left: 70px; top: 60px; }

.mission h2 { position: absolute; left: 70px; top: 0; text-align: right; }
.eps h2 { position: absolute; left: 40px; top: 0; text-align: right; }
.legal h2 { position: absolute; left: 50px; top: 0; text-align: right; }
.sitemap h2 { position: absolute; left: 120px; top: 0; text-align: right; }


#clientspage {width:300px; margin:40px auto 20px auto;}
#clientspage input {color:666666; ; float:left;}
#clientspage input[type='text'], #clientspage input[type='password'] {font-size:12px;width:160px; padding: 2px ;margin:0px;}
#clientspage input[type='submit'] {float:left;padding:8px;}
#clientspage fieldset {display:block; width:300px; float:left;border:0px; margin:8px auto;padding:0px;}
#clientspage label {width:100px; float:left;}

#clientspage input[type='submit'], #admincontainer input[type='submit']{background:#600 url("../images/bg-btn-red.png") repeat-x 0 0;width:auto;overflow:visible;margin:0 5px 0 0;padding:4px 10px 5px;border:1px solid #600;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font:bold 11px Arial,Sans-serif;color:#fff;text-shadow:0 -1px 0 #600; margin-left:100px;}
#clientspage input[type='submit']:-moz-focus-inner, #admincontainer input[type='submit']:-moz-focus-inner{padding:0;border:0;}
#clientspage input[type='submit']:hover,#clientspage input[type='submit']:focus, #admincontainer input[type='submit']:hover,#admincontainer input[type='submit']:focus{background-position:0 -5px;cursor:pointer;}
#clientspage input[type='submit']:active, #admincontainer input[type='submit']:active{background-image:none;}