/* Layout and Colors */
html {background:#27262e; padding:0; margin:0;}
body {background:transparent url(images/sandBG.png) repeat; color:#fff; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:0; margin:0;}

a, a:visited {color:#ccd7e4; text-decoration:underline;}
a:active, a:hover {color:#fff;}

#header {background:transparent url(images/beachTile.png) top repeat-x; height:320px;}
 #logo {background:transparent url(images/beachHead.png) center top no-repeat; height:320px; padding:0; margin:0 auto; width:100%;}
  h1 {color:#35322b; font-size:42px; font-weight:normal; line-height:286px; padding:0 72px 0 0; margin:0; text-align:right;}
   .short {font-size:24px; line-height:36px;}
 #header_sub {background:transparent url(images/darkStrip.png) center repeat-x; height:99px; padding:0; margin:-102px 0 0 0;}
 #tagline {padding:0; margin:0 auto; width:920px;}
  h2 {color:#ccd7e4; font-size:24px; font-weight:normal; padding:20px 0; margin:0;}
  
#page_body {background:transparent url(images/sandBG.png) repeat; padding:0 0 24px; margin:0;}
 #page_content {padding:0; margin:0 auto; width:920px;}
  h3 {border-bottom:1px dotted #27262e; color:#27262e; font-size:24px; font-weight:normal; line-height:22px; padding:0; margin:0 0 14px !important;}
  #works {float:left; padding:0; margin:0; width:644px;}
   #works a img, #works a:visited img {border:2px solid #7e91a9; padding:0; margin:0;}
   #works a:active img, #works a:hover img {border:2px solid #ccd7e4;}
   #works a img.lightPng, #works a:visited img.lightPng {border:2px solid #7e91a9; padding:0; margin:0;}
   #works a:active img.lightPng, #works a:hover img.lightPng {border:2px solid #fff;}
   #works p.client {color:#ccd7e4; font-weight:bold; padding:4px 0 0; margin:0;}
   #works p.link {color:#ccd7e4; padding:0; margin:-16px 0 0; text-align:right;}
   #works p.info {color:#fff; padding:4px 0 0; margin:0 0 32px;}
   #prev_1, #prev_2, #prev_4, #prev_5 {float:left; padding:0; margin:0 28px 14px 0; width:194px;}
   #prev_3, #prev_6 {float:left; padding:0; margin:0 0 14px; width:194px;}
    #prev_1 p, #prev_2 p, #prev_3 p, #prev_4 p, #prev_5 p, #prev_6 p {color:#ccd7e4; padding:4px 0 0; margin:0; text-decoration:underline;}
   #prev_4 {clear:left;}
  #about {border-left:1px dotted #27262e; float:right; padding:0 0 0 28px; margin:0 0 0 -28px; width:220px;}
   #about h3 {text-align:right;}
   #about p {line-height:20px; padding:0; margin:8px 0;}
  #contact {border-left:1px dotted #27262e; float:right; padding:0 0 0 28px; margin:0 0 0 -28px; width:220px; height:620px;}
   #contact h3 {text-align:right;}
   #contact p {line-height:20px; padding:0; margin:8px 0;}
  
#footer {background:transparent url(images/beachFootTile.png) top repeat-x; height:38px;}
 #footer_content {background:transparent url(images/beachFoot.png) top no-repeat; height:38px; padding:0; margin:0 auto; width:1060px;}
  #links {float:left; padding:0 28px 12px 0; margin:24px 0 0 70px; width:644px;}
   #links p {line-height:20px; padding:0; margin:8px 0;}
  #copy {float:right; padding:0 0 12px; margin:24px 70px 0 0; width:220px;}
   #copy p {line-height:20px; padding:0; margin:8px 0; text-align:right;}

.clear {clear:both;}
.hidden {height:1px; left:-10000px; line-height:1px; position:absolute; width:1px;}
.whiteText {color:#fff;}


/* Drop Down Bar */
#dropDownBar {position:absolute; text-align:center; top:0px; width:100%; z-index:1;}
#dropDownBar_content {margin:0 auto; width:920px;}
#dropDownBar_inner {margin:0 0 0 auto; float:right; font-size:12px; width:920px;}
#dropDownBarPopup {background-color:#036; height:18px; margin:0 auto; vertical-align:top;}
#dropDownBarBanners {padding:0 24px 4px 2px; margin:0;}
#dropDownBarBanners a, #dropDownBarBanners a:visited {color:#fff; display:block; float:left; padding:0 8px; margin:0; text-decoration:none;}
#dropDownBarBanners a:active, #dropDownBarBanners a:hover {color:#00a59c; text-decoration:underline;}
#dropDownBarControls {background-color:transparent; height:8px; margin:0 auto;}
#dropDownBarButton {color:#fff; display:block; position:relative; right:0; text-align:right; top:0;}
#dropDownBarButton img {border:0; float:right;}


/* Lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(scripts/images/prevlabel.gif) left 60px no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(scripts/images/nextlabel.gif) right 60px no-repeat; }

#imageDataContainer{ font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif; background-color: #fff; padding:0 0 4px 0; margin: 0 auto; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{}
#imageData #numberDisplay{ clear: left; display: block; font-size:10px; padding: 0 0 4px 0;}			
#imageData #bottomNavClose{ float: right;  padding: 0 0 4px 0; outline: none; width: 66px;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }




/* CSS File for Dagon Design Formmailer Script */
/* http://www.dagondesign.com */

/* COLOR/BORDERS CSS */


form.fm p {
	color:#fff; font-size:12px; line-height:20px; padding:0; margin:8px 0;
}

form.fm legend {
	color:#27262e;
	background-color:#958e7e;
}  
form.fm label, 
form.fm label.fmtextlblwide {
	color: #27262e;
}

form.fm p.starred,
form.fm .fmcheck p, 
form.fm .fmradio p,
form.fm textarea, 
form.fm .fmfullblock, 
form.fm .fmhalfblock, 
form.fm .fmselect, 
form.fm input.fmtext,
form.fm input.fmdate,
form.fm input.fmverify,
form.fm textarea.fmtextwide,
form.fm .submit,
form.fm .credits {
	color: #27262e;
}

.errorlist {
	color:#c00;
}

.fmerrors {
	color: #FF0000;
}


.fmwrap {
	font-size: 14px;
	color:#fff;
}

form.fm p.starred {
	font-size:12px;
	margin:0 0 12px 0;
}

form.fm h1,
form.fm h2 {
	text-align: left;
	margin: 0 0 10px 0;
	padding: 0;
}


form.fm h1 {
	font-size: 18px;
}

form.fm h2 {
	font-size: 14px;
}

form.fm legend, 
form.fm label, 
form.fm label.fmtextlblwide {
	font-size: 11px;
	font-weight: normal;
}

form.fm .credits {
}

form.fm legend {
	font-size: 14px;
}

.fmerrors {
	font-weight: bold;
}

form.fm em,
form.fm .required {
	font-size:11px;
	font-style:normal;
}
.fmwrap {
	margin: 0px auto 15px auto;
	width: 210px;
}

.fmwrap p.fieldwrap {
	line-height:14px !important;
	padding: 0 !important;
	margin: -2px 0 0 !important;
	clear: left;
}

form.fm p.emailDisclaimer {
	font-size:11px;
	line-height:12px !important;
	color:#fff;
	padding:0;
	margin:0;
	clear:left;
}



form.fm {
	text-align: left;
	padding: 0;
	width: 210px; 
}
form.fm label {
	display: block; 
	float: left; 
	width: 100%; 
	text-align: left;
	margin: 0; 
	clear: left;  
}
form.fm textarea {
	float: left; 
	position: relative;
	width: 100%;
	padding: 4px 2px !important;
	margin: 0 0 8px -4px !important;
}
form.fm img {
	margin: 1px 0 0 10px; 
    float: left;
}

form.fm input.fmfile,
form.fm input.fmtext {
	float: left; 
	display: block;
	width: 100%;
	padding: 4px 2px !important;
	margin:0 0 8px -4px !important;
}
form.fm .submit {
	text-align: right;
	clear: both; 
	width: 100%;
	margin:0;
	padding:0;
}

.fmwrap .fmerrors {
	display: block; 
	float: left; 
	width: 100%; 
	text-align: right;
	margin: 0 10px 0 0; 
	padding-bottom: 4px;
}

.fmwrap .errorlist {
	float: left; 
	display: block;
	width: 100%; 
	padding:0;
	text-align: left;
	font-size:12px;
}



/* MODAL BOX */
#MB_overlay {
	position: absolute;
	margin: auto;
	top: 0;	left: 0;
	width: 100%; height: 100%;
	z-index: 9999;
	background-color: #000!important;
}
#MB_overlay[id] { position: fixed; }

#MB_window {
	position: absolute;
	top: 0;
	border: 0 solid;
	text-align: left;
	z-index: 10000;
}
#MB_window[id] { position: fixed!important; }

#MB_frame {
	position: relative;
	background-color: #EFEFEF;
	height: 100%;
}

#MB_header {
	margin: 0;
	padding: 0;
}

#MB_content {
	padding: 6px .75em;
	overflow: auto;
}

#MB_caption {
	font: bold 100% "Lucida Grande", Arial, sans-serif;
	text-shadow: #FFF 0 1px 0;
	padding: .5em 2em .5em .75em;
	margin: 0;
	text-align: left;
}

#MB_close {
	display: block;
	position: absolute;
	right: 5px; top: 4px;
	padding: 2px 3px;
	font-weight: bold;
	text-decoration: none;
	font-size: 13px;
}
#MB_close:hover {
	background: transparent;
}

#MB_loading {
	padding: 1.5em;
	text-indent: -10000px;
	background: transparent url(spinner.gif) 50% 0 no-repeat;
}

/* Color scheme */
#MB_frame {
	padding-bottom: 7px;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border-radius: 7px;
}
#MB_window {
	background-color: #EFEFEF;
	color: #000;
	-webkit-box-shadow: 0 8px 64px #000; 
	-moz-box-shadow: 0 0 64px #000; 
	box-shadow: 0 0 64px #000;
	
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border-radius: 7px;
}
#MB_content { border-top: 1px solid #F9F9F9; }
#MB_header {
  background-color: #DDD;
  border-bottom: 1px solid #CCC;
}
#MB_caption { color: #000 }
#MB_close { color: #777 }
#MB_close:hover { color: #000 }


/* Alert message */
.MB_alert {
	margin: 10px 0;
	text-align: center;
}