#page {
}

#container {
	width: 920px;
	height: 563px;
	overflow: hidden;
	border: 12px solid #FFF;
	position: relative;
	background-color: #0c0806;
	-moz-box-shadow: 0 0 22px black;
	-webkit-box-shadow: 0 0 22px black;
}

.dhphotologo {
	float: left;
}
.dhphotologo img {
	padding-top: 6px;
}

#dhlogo {
	top: 52px;
	left: -73px;
	width: 72px;
	height: 72px;
	position: absolute;
	background: url(../images/sprite_davidham.png) no-repeat 0 -100px;
	z-index: -3;
	overflow: hidden;
}

#dhlogo div.logo a.home {
	display: inline block;
	width: 72px;
	height: 72px;
	z-index: 0;
}

#dhlogo div.logo img.logo {
	display: block;
	position: absolute;
}

#dhlogo div.logo img.home {
	display: block;
	position: absolute;
	z-index: 0;
	opacity: 0;
}

.back {
	position: absolute;
	width: 64px;
	border-bottom: 3px double #1b0c06;
	padding-bottom: 2px;
	margin-left: 2px;
	margin-top: 2px;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: -1;
}

.back a {
	color: #2f2826;
	font-size: 11px;
}

#gallery {
	background-color: #CCC;
	width:920px;
	margin: 0 auto;
	top:0px;
	left:0px;
	position: absolute;
	z-index:999;
}

#slideshow {
	width: 920px;
	height: 563px;
}

#thumbs {
    margin: 0px;
    padding: 0px;
	top:0px;
	left:799px;
	width: 121px;
	height: 563px;
	position: absolute;
    z-index:9999;
}

ul.thumbs {
	margin:0;
    list-style: none;
    z-index:9999;

	margin-left:0px;
	background:url(vertdots.gif) no-repeat 3px 275px;
	padding-left:40px;
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,0.3);

}
ul.thumbs li {
    width: 107px;
	padding:2px;
	background-color: #CCC;
	background-color: rgba(255,255,255,0.6);	
	margin-left:-10px;
	padding-left:5px;
}
ul.thumbs li a {
    display: block;
    width: 97px;
    height: 65px;    
    background-color:#FFF;
    background-repeat:no-repeat;
    background-position:center center;
}

img {
	border-style: none;

}

ul.thumbs li a img {
	width: 97px;
	height: 65px;
}

#footwrapper {
	
}

.copyright {
	float: right;
	text-align: right;
	padding-right: 5px;
	padding-top: 5px;
	font-size: 10px;
	color: #979797;
}
/***************************
		Nav Menu
***************************/
#menuwrapper{
	width: 920px;
	height:30px;
	margin: 0 auto;
}

.navmenu {
	float: right;
	height: 30px;
	line-height: 35px;
}
.navmenu ul {
	list-style: none;	
	margin: 0;
	padding: 0;
}
.navmenu ul li {
	display: inline;
	list-style-type: none;
	padding: 3px 9px 5px 11px;
	margin: 0;
	background: url(menu_div.png) no-repeat left center;
}

.navmenu ul li:first-child {
	background: none;
} 

.navmenu ul li a, .navmenu ul li a:active, .navmenu ul li a:visited {
	outline: none;
	line-height:26px;
	display: inline-block;
}

.navmenu ul li a:hover, .navmenu ul li a:focus, .navmenu ul li.active a{
	/*border-top: 4px #900 dotted;*/
	outline: none;	
	color: #FFF;
}

.navmenu ul li.active span {
	color: #FFF;
	cursor:default;
	background: url(navmenu_bg2.png) no-repeat top center;
	line-height:26px;
	display:inline-block;
}
/***************************
Vertical Scrolling Menu Jquery
http://valums.com/vertical-scrolling-menu/
***************************/
div.sc_menu_wrapper {
	position: relative; 	
	height: 563px;
	/* Make bigger than a photo, because we need a place for a scrollbar. */
	width: 121px;
	margin-top: 0px;
	overflow: hidden;
}

.sc_menu li a {
	display: block;
	width: 97px;
	/* When image support is turned off */
	color: #fff;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:center center;
	border-color: #CCC;
	border-style: solid;
	border-width: 2px;
}
.sc_menu li a:hover {
	border-color: #900;
	border-style: solid;
	border-width: 2px;
}
.sc_menu li a img {
	display: block;
	border: none;
	width: 97px;
	height: 65px;

}

.sc_menu li a img:hover {
	opacity: 1;
}

/***************************
		Pages
***************************/


.panel {
	background-color: #9a928b;
	width: 730px;
	height: 563px;
	text-align: left;
	color: #fff;
	-moz-box-shadow:inset 0 0 1px #302d2b;
	-webkit-box-shadow:inset 0 0 1px #302d2b;	
}

.w920 {
	width: 920px;
}

.h50 {
	background-color: #000;
	width: 920px;
	height: 283px;
	text-align: left;
	color: #fff;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;	
}

.h50 a, .h50 a:visited {
	padding: 5px 11px;;
	border-top: 4px double #f8f8f8;
	border-bottom: 4px double #f8f8f8;
	border: 4px double #f8f8f8;	
	font-style: normal;
	background-color: #212121;
	font-size: 11px;
	text-transform: uppercase;
	left: 370px;
	position:relative;
	top: 167px;
		background: rgba(9, 0, 0, .6);
}

.h50 a:hover {
	background: rgba(9, 0, 0, .5);
}

.h50 a:active {
	background: rgba(9, 0, 0, .7);
}

div.panel a {
	color: #fff;
	text-decoration: none;
}

ul#lovemain {
	list-style: none;
	float: left;
	left: 207px;
	position: absolute;
	top: 60px;
	z-index:3;
	background: rgba(9, 0, 0, .6);
	padding: 10px 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}

ul#lovemain li {
	display: inline-block;
	list-style-type: none;
	padding: 3px 9px 5px 11px;
}

ul#lovestory {
	list-style: none;
	padding-top: 40px;
	text-align: center;
}

ul#lovestory li {
	display: inline-block;
	list-style-type: none;
	margin: 3px 22px 5px 22px;
	width: 160px;
	height: 107px;
	border:4px double #FFFFFF;	
}

ul#lovestory li a {
	display: inline-block;
	line-height: 14px;
	width: 160px;
	height: 107px;
}

ul#lovestory li a span {
	display: inline-block;
	padding-top: 119px;
	width: 168px;
	position: relative;
	top: -4px;
	left: -4px;
}

a#gallery1, a#gallery1:visited {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: 0 0;
}	

a#gallery1:hover {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: -200px 0;
}

a#gallery2, a#gallery2:visited {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: 0 -151px;
}	

a#gallery2:hover {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: -200px -151px;
}

a#gallery3, a#gallery3:visited {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: 0 -300px;
}	

a#gallery3:hover {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: -200px -300px;
}

a#gallery4, a#gallery4:visited {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: 0 -450px;
}	

a#gallery4:hover {
	background-image:url(../images/sprite_thm_lovestories.jpg);
	background-position: -200px -450px;
}

hr {
	border-color:#1b0c06 -moz-use-text-color -moz-use-text-color;
	border-right:0 none;
	border-style:double none none;
	border-width:3px 0 0;
	height:3px;
	margin:6px 0 0 0;
	text-align:left;
	width:100%; 
}

h3 {
	text-shadow: 0px 2px 3px #aeaaa6;
	color: #48423e;
	font-size: 14px;
	text-align: left;
	margin-left: 18px;
}
.davidhampanel {
	background-color: #9A928B;
	width: 730px;
	height: 563px;
	text-align: left;
	overflow:hidden;
	-moz-box-shadow:inset 0 0 1px #302d2b;
	-webkit-box-shadow:inset 0 0 1px #302d2b;		
}

.davidhaminfo {
	background-color: #0c0806;
	background: url(../images/davidhaminfobg.gif) no-repeat top right;
	width: 190px;
	height: 563px;
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;	

}

ul.davidhaminfo {
	list-style:none;
}

ul.davidhaminfo li {
	cursor: pointer;
}

ul.davidhaminfo li:first-child a {
	margin-top:16px;
	display: inline-block;
}

ul.davidhaminfo li a {
	display: inline-block;
	padding:10px 10px 10px 24px;
	width: 159px;
	height: 18px;
	line-height: 18px;	
}
ul.davidhaminfo li a.selected,ul.davidhaminfo li a.selected:hover {
	background-color: #F6F6F6;
	color: #222;
	display: inline-block;
	border: 4px #000 double;
	padding:6px 6px 6px 10px;
	width: 166px;
	height: 18px;
	line-height: 18px;
	text-align: center;	
	cursor:default;
	font-size: 14px;
	font-family:georgia,serif;	
}

ul.davidhaminfo li a:hover  {
	background-color: #b2afad;
	color: #222;
	display: inline-block;
	border: 4px #000 double;
	padding:6px 6px 6px 10px;
	width: 166px;
	height: 18px;
	line-height: 18px;
	text-align: center;
}

ul.davidhaminfo li a.redbox:hover,ul.davidhaminfo li a.redbox.selected  {
	background-color: #900;
	color: #F6F6F6;
	display: inline-block;	
	border: 4px #000 double;
	padding:6px 6px 6px 10px;
	width: 166px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;	
}
ul.davidhaminfo li a.redbox.selected span,
ul.davidhaminfo li a.redbox:hover span {
	background-color: #900;
	color: #222;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;	
}

.floatleft {
	float:left;
}

.floatright{
	float:right;
}


/*********************
 DavidHam Page Panels
*********************/

div#redbox {
	background: url(../images/theredbox.jpg) no-repeat top left #830003;
	width: 730px;
	height: 563px;
}

div#redbox p {
	background:none repeat scroll 0 0 rgba(9, 0, 0, 0.3);
	border:4px double #CCCCCC;
	color:#CCCCCC;
	font-size:11px;
	font-style:normal;
	height:200px;
	left:160px;
	line-height:32px;
	padding:5px 11px;
	position:relative;
	text-transform:uppercase;
	top:164px;
	width:376px;
	text-align: center;
}

div#collection {
	background: url(../images/davidham_collections_info.jpg) no-repeat #FFF;
	width: 730px;
	height: 563px;
}

div#aboutus {
	background: url(../images/about_david.jpg) no-repeat #FFF;
	width: 730px;
	height: 563px;
}

div#aboutus p, div#david p, div#ham p {
	left: 12px;
	top: 12px;
	z-index:3;
	background: rgba(9, 0, 0, .4);
	padding: 10px 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	display: inline;
	position: absolute;
}

div#david {
	background: url(../images/about_david.jpg) no-repeat #FFF;
	width: 730px;
	height: 563px;
}

div#ham {
	background: url(../images/about_ham.jpg) no-repeat #FFF;
	width: 730px;
	height: 563px;
}

div#moments {
	background: url(../images/lovemoments.jpg) no-repeat top left;
}

div#moments a, div#moments a:visited {
	left: 322px;
}

div#details {
	background: url(../images/lovedetails.jpg) no-repeat top left;
}

div#details a, div#details a:visited {
	left: 330px;
}

div#formals {
	background: url(../images/loveformals.jpg) no-repeat top left;
}

div#formals a, div#formals a:visited {
	left: 330px;
}

div#engagement {
	background: url(../images/loveengage.jpg) no-repeat top left;
}

div#engagement a, div#engagement a:visited {
	left: 337px;
}

div#lovestories {
	width: 860px;
	height: 217px;
	background-color: #9a928b;
	padding: 30px;
	border-top:3px solid #1B0C06;	

}



div#life {
	background-color: #eee;
	font-size: 13px;
	line-height: 30px;
	text-align:justify;
	font-style:italic;
}

div#life p {
	padding: 30px 70px 0px 70px;
}

div#life p:first-child {
	padding: 40px 70px 0px 70px;
}

div#life a,div#life a:visited {
	padding: 5px 11px;;
	border: 4px double #f8f8f8;
	font-style: normal;
	background-color: #212121;
	font-size: 11px;
	text-transform: uppercase;
	left: 300px;
	position:relative;
	top: 22px;
}

div#life a:hover {
	border: 4px double #f8f8f8;
	background-color: #830003;
}

div#life a:active {
	border: 4px double #f8f8f8;
	background-color: #500103;
}

/***************************
		Gallerific
***************************/
.controls {
	position: absolute;
	width: 68px;
	top: 27px;
	overflow: hidden;
	opacity:0;
}

div#controls a {
	}
	
div.ss-controls a{
	display: inline block;
	line-height: 14px;
	height: 16px;
	width: 16px;
	padding-left: 18px;
	padding-top: 1px;
}

div.ss-controls a.pause {
	background-image:url(../images/sprite_davidham.png);
	background-position: -250px -50px;
}

div.ss-controls a.pause:hover {
	background-image:url(../images/sprite_davidham.png);
	background-position: -250px -66px;
}

div.ss-controls a.play {
	background-image:url(../images/sprite_davidham.png);
	background-position: -300px -50px;
}

div.ss-controls a.play:hover {
	background-image:url(../images/sprite_davidham.png);
	background-position: -300px -66px;
}

.ss-controls a.pause:hover, .ss-controls a.play:hover {
	color: #900;
}

.nav-controls {
	position: relative;
	top: 0;
	width: 66px;
	padding-left: 1px;
}

.nav-controls a.prev, .nav-controls a.next  {
	display: inline block;
	font-size: 24px;
	padding: 0 8px;
}

.nav-controls a.prev:hover, .nav-controls a.next:hover  {
	display: inline block;
	font-size: 24px;
	color: #900;
}

div.slideshow-container {
	position: relative;
	clear: both;
	height: 563px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/realmodernlove.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-color: #140b03;
	width: 920px;
	height: 563px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 920px;
	height: 563px; /* This should be set to be at least the height of the largest image in the slideshow */
	line-height: 563px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: middle;
	border: 0px;
	position: absolute;
	top: 0;
	left: 0;	
}

ul.thumbs li.selected a.thumb {
	border-color: #f3f3f3;
	border-style: solid;
	border-width: 2px;  
}
a.thumb:focus {
	outline: none;
}


/***************************
		Base CSS
***************************/

  /*** Quick Reset ***/
* {
	margin:0;
	padding:0;	
 	-webkit-user-select: none;  /* prevent copy paste for all elements */	
}

html, body {
	margin:0;
	padding:0;
}

body{
	background:url("main_bg.jpg") no-repeat scroll left top #0d0806;
	text-align: center;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #0d0806;
	color: #CCC;
	font-size: 11px;
}

p {
	padding: 30px 30px 0px 30px;
}

h4 {
	margin-left:20px;
}

p.indent {
	padding: 6px 30px 14px 30px;
	font-size: 11px;	
	line-height: 14px;
	text-align: justify;
}


a{
	color: #CCC;
	text-decoration: none;
	outline: none;
}

a:focus, a:hover, a:active {
	color: #FFF;
	text-decoration: none;
	
}

a:active { outline: none; }

a.selected{
	color: #FFF;
	cursor:default;
	padding-bottom:3px;
	border-bottom: dashed 1px #900;
}

.vertical {
	width: 944px; /*--Specify Width--*/
	height: 630px; /*--Specify Height--*/
	position: absolute; /*--Set positioning to absolute--*/
	top: 50%; /*--Set top coordinate to 50%--*/
	left: 50%; /*--Set left coordinate to 50%--*/
	margin: -335px 0 0 -472px; /*--Set negative top/left margin--*/
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	clear: both;
}

/*****************
 Contact Form Css
 *****************/
 
.contactwrapper {
	background-color: #e1e1e1;
	color: #000000;
	background-image: url(../images/davidham_contact.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 0;
	width: 750px;
	height: 563px;
}

form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font: 10px verdana,arial,sans-serif;
  margin: 0;
  padding: 148px 0 0 45px;
  min-width: 300px;
  max-width: 425px;
  width: 373px; 
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #303030;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;  
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
	font-weight: bold;  /* be careful with padding, it'll shift the nice offset on top of border  */
	color: #303030;	
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 170px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
									/* pseudo-class on legend elements, but do support it on label elements */
									/* we instead underline first letter on each label element and accesskey */
									/* each input. doing only legends would  lessens cognitive load */
								   /* opera breaks after first letter underlined legends but not labels */
}
form input {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of label aligns textarea better in IE */
	font-size: .9em;
	color: #303030;
	background-color: #ffffff;
	padding: 2px;
	border: solid 1px #666666;
	height: 18px;
}

form textarea{
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	margin:0 0 0 122px; /* set margin on left of form elements rather than right of label aligns textarea better in IE */
	font-size: .9em;
	color: #303030;
	background-color: #ffffff;
	padding: 2px;
	border: solid 1px #666666;
	width: auto;
}

form input:hover, form textarea:hover {
	background-color: #ffffff;
	border: solid 1px #ffffff;
	color: #303030;
	cursor: pointer;
}
form input:focus, form textarea:focus {
	color: #303030;
	background-color: #e9f4ff;
	border: solid 1px #ffffff; 
	cursor: text;
}

form input#submit {
	color:#303030;
}

form input#reset {
	color:#303030;
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}



form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;color:#ac0200;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

.requiredtxt {
color:#ac0200;
padding-left: 10px;
font-weight:bold;
}


/*********** Calendar Control CSS fround on Contacts page **********/

#CalendarControlIFrame {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
  height: 250px;
  width: 250px;
  z-index: 99;
}

#CalendarControl {
  position:absolute;
  background-color:#1d1d1d;
  margin:0;
  padding:0;
  display:none;
  z-index: 100; 
}

#CalendarControl table {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 8pt;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

#CalendarControl th {
  font-weight: normal;
}

#CalendarControl th a {
  font-weight: normal;
  text-decoration: none;
  color: #fff;
  padding: 1px;
}

#CalendarControl th a:hover {
  color: #99ccff;
}

#CalendarControl td {
  text-align: center;
}

#CalendarControl .header {
  background-color: #1d1d1d;
}

#CalendarControl .weekday {
  background-color: #1d1d1d;
  color: #fff;
}

#CalendarControl .weekend {
  background-color: #1d1d1d;
  color: #fff;
}

#CalendarControl .current {
  border: 1px solid #F00;
  background-color: #99ccff;
  color: #F00;
}

#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {
  display: block;
  text-decoration: none;
  border: 1px solid #666666;
  width: 2em;
}

#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {
  color: #000;
  background-color: #e9f4ff;
  border: 1px solid #fff;
}

#CalendarControl .previous {
  text-align: left;
}

#CalendarControl .next {
  text-align: right;
}

#CalendarControl .previous,
#CalendarControl .next {
  padding: 1px 3px 1px 3px;
  font-size: 1.4em;
}

#CalendarControl .previous a,
#CalendarControl .next a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
#CalendarControl .previous a:hover,
#CalendarControl .next a:hover {
  color: #99ccff;
}
#CalendarControl .title {
  text-align: center;
  font-weight: bold;
  color: #fff;
}

#CalendarControl .empty {
  background-color: #1d1d1d;
  border: 1px solid #666666;
}