/* CSS file for the Hugh Durham Photo website */
/* (c) by Dave J Fox | http://www.davejfox.com */

/* xhtml tag definitions */

* { 
  margin: 0;
  padding: 0;
}

div.cb {
	clear: both;
}

.access {
	display: none;
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: url(gfx/bg.jpg) repeat-x #f4f3f1;
	font-family: Arial, Helvetica, sans-serif;
}

/*--wrapper--*/

div#wrapper {
	width: 900px;
	height: auto;
	margin: 0 auto;
}

/*--top--*/

h1 a {
	display: block;
	width: 307px;
	height: 93px;
	background: url(gfx/hugh-durham-photography.png) no-repeat;
	text-indent: -9999px;
	float: left;
}

ul#supmenu {
	float: right;
	margin: 48px 0 0 0;
}

ul#supmenu li {
	float: left;
	list-style: none;
	margin: 0 0 0 21px;
}

ul#supmenu li a, ul#supmenu li a:hover {
	display: block;
	height: 28px;
	text-indent: -9999px;
}

ul#supmenu li#h a {
	width: 51px;
	background: url(gfx/supp-menu.gif) 0 0;
}

ul#supmenu li#h a:hover {
	background: url(gfx/supp-menu.gif) 0 28px;
}

ul#supmenu li#ahdp a {
	width: 58px;
	background: url(gfx/supp-menu.gif) -72px 0;
}

ul#supmenu li#ahdp a:hover {
	background: url(gfx/supp-menu.gif) -72px 28px;
}

ul#supmenu li#chdp a {
	width: 86px;
	background: url(gfx/supp-menu.gif) -150px 0;
}

ul#supmenu li#chdp a:hover {
	background: url(gfx/supp-menu.gif) -150px 28px;
}

/*--menu--*/

div#menu ul#main {
	margin: 40px 0 0 1px;
}

#menu p { font-size: 14px; margin: 15px 0 -5px 10px; color: #666666; font-weight: bold;}

div#menu ul#main li {
	float: left;
	list-style: none;
	margin: 0 20px 0 0;
}

div#menu ul#main li a, div#menu ul#main li a:hover {
	display: block;
	height: 32px;
	text-indent: -9999px;
}

div#menu ul#main li#weddings a {
	width: 76px;
	background: url(gfx/main-menu.gif) 784px 0;
}

div#menu ul#main li#weddings a:hover {
	background: url(gfx/main-menu.gif) 784px 32px;
}

div#menu ul#main li#wedding_special a {
	width: 152px;
	background: url(gfx/main-menu.gif) 694px 0;
}

div#menu ul#main li#wedding_special a:hover {
	background: url(gfx/main-menu.gif) 694px 32px;
}

div#menu ul#main li#portraits a {
	width: 72px;
	background: url(gfx/main-menu.gif) 0 0;
}

div#menu ul#main li#portraits a:hover {
	background: url(gfx/main-menu.gif) 0 32px;
}

div#menu ul#main li#debs a {
	width: 49px;
	background: url(gfx/main-menu.gif) 530px 0;
}

div#menu ul#main li#debs a:hover {
	background: url(gfx/main-menu.gif) 530px 32px;
}

div#menu ul#main li#schools a {
	width: 66px;
	background: url(gfx/main-menu.gif) 467px 0;
}

div#menu ul#main li#schools a:hover {
	background: url(gfx/main-menu.gif) 467px 32px;
}

div#menu ul#main li#landscape a {
	width: 84px;
	background: url(gfx/main-menu.gif) 387px 0;
}

div#menu ul#main li#landscape a:hover {
	background: url(gfx/main-menu.gif) 387px 32px;
}

div#menu ul#main li#commercial a {
	width: 87px;
	background: url(gfx/main-menu.gif) 289px 0;
}

div#menu ul#main li#commercial a:hover {
	background: url(gfx/main-menu.gif) 289px 32px;
}

div#menu ul#main li#restoration a {
	width: 129px;
	background: url(gfx/main-menu.gif) 188px 0;
}

div#menu ul#main li#restoration a:hover {
	background: url(gfx/main-menu.gif) 188px 32px;
}

/*--sub--*/

div#menu ul#sub {
	margin: 30px 0 0 5px;
}

div#menu ul#sub li {
	float: left;
	list-style: none;
	margin: 0 20px 0 0;
	font-size: 0.8em;
}

div#menu ul#sub li a {
	color: #2a4f99;
	text-decoration: none;
	padding: 5px;
}

div#menu ul#sub a:hover {
	color: #868584;	
}


/*--textpagecontent--*/

/*--textarea--*/

div#textarea {
	display: block;
	width: 450px;
	height: auto;
	float: left;
	margin: 30px 0 0 11px;
}

h2, h3, h4 {
	color: #2a4f99;
}

h2 {
	font-size: 1.3em;
	margin: 0 0 30px 0;
}

h3 {
	font-size: 1.1em;
	margin: 0 0 30px 0;
}

h4 {
	font-size: 1.0em;
	margin: 0 0 10px 0;
}

div#textarea p, div.gallerypagecontent p, div#textarea ul li {
	color: #8f8f8f;
	font-size: 0.8em;
}

div#textarea p, div.gallerypagecontent p {
	line-height: 150%;
	text-align: justify;
	margin: 0 0 30px 0;
}

div#textarea a, .gallerypagecontent a {
	text-decoration: none;
	color: #2a4f99;
}

div#textarea p a:hover, .gallerypagecontent a:hover {
	border-bottom: 1px dotted;
}

img.fr {
	float: right;
	margin: 0 0 30px 30px;
	border: 2px solid #2a4f99;
}

div#abouthugh {
	display: block;
	width: 450px;
	height: auto;
	background: url(gfx/about-hugh-top.gif) top no-repeat #e2e2e1;
}

div#abouthugh h2 {
	padding: 20px 20px 0 20px;
	margin: 0 0 20px 0;
}

div#abouthugh h2 a {
	text-decoration: none;
	color: #2a4f99;
}

div#abouthugh h2 a:hover {
	text-decoration: none;
	border-bottom: none;
	color: #4d4d4d;
}

div#abouthugh h2 img {
	float: right;
	border: 5px solid #fff;
	margin: 20px 0 0 20px;
}

div#abouthugh h2 a:hover img {
	border: 5px solid #999999;
}

div#abouthugh p {
	margin: 0 0 0 20px;
	padding: 0 0 20px 0;
}

div.hrlinebreak	{
	display: block;
	height: 3px;
	width: 450px;
	background: url(gfx/about-hugh-bottom.gif) no-repeat;
	margin: 0 0 0 0;
}

/*--contactform--*/

div#contactform {
	display: block;
	width: 392px;
	height: auto;
	float: right;
	margin: 90px 0 0 11px;
}

div#contactform form {
	display: block;
	width: 360px;
	height: 300px;
	padding: 16px 16px 16px 16px;
	border-right: 1px solid #e7e7e6;
	border-bottom: 1px solid #e7e7e6;
	background: #fff;
	margin: 0 0 20px 0;
}

div#contactform fieldset {
	border: none;
}

div#contactform legend {
	display: none;
}

div#contactform input, div#contactform select, div#contactform textarea {
	color: #8f8f8f;
	font-size: 0.8em;
	padding: 1px 2px 1px 2px;
	width: 335px;
	margin: 0 0 10px 10px;
	background: #fff;
	border: 1px #8f8f8f solid;
	font-family: Arial, Helvetica, sans-serif;
}

label {
	font-weight: bold;
	font-size: 0.8em;
	color: #2a4f99;
	margin: 0 0 10px 10px;
}

textarea {
	font-size: 0.9em;
	height: 100px;
	width: 410px;
	font-family: Arial, Helvetica, sans-serif;
}

input#send {
	width: 100px;
	font-weight: bold;
	font-size: 0.8em;
}

input#send:hover {
	color: #2a4f99;
	border-color: #2a4f99;
}

/*--rotatinggallery--*/

div#rotatinggallery {
	display: block;
	width: 392px;
	height: auto;
	float: right;
	margin: 90px 0 0 11px;
}

div#portfolioframe {
	display: block;
	width: 360px;
	height: 450px;
	padding: 16px 16px 16px 16px;
	border-right: 1px solid #e7e7e6;
	border-bottom: 1px solid #e7e7e6;
	background: #fff;
	margin: 0 0 20px 0;
}

body.body-hugh-durham-photography div#portfolioframe {
	height: 270px;
}

ul.fade {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.fade li strong.blue {
	color: #2a4f99;
}

ul.fade li {
	color: #8f8f8f;
	font-size: 0.8em;
}

div#portfolioframe ul li a img {
	border: none;
	text-decoration: none;
}

ul.fade li.viewgallery a {
	display: block;
	width: 377px;
	height: 22px;
	padding: 5px 0 5px 16px;
	background: url(gfx/view-gallery-bg.gif) 0 0 repeat-x;
	text-decoration: none;
	color: #2a4f99;
}

ul.fade li.viewgallery a:hover {
	background: url(gfx/view-gallery-bg.gif) 0 -32px repeat-x;
	color: #fff;
}

/*--footer--*/

div#footer {
	display: block;
	width: 892px;
	height: auto;
	border-top: 2px solid #2b529c;
	padding: 20px 0 0 0;
	margin: 20px 0 0 8px;
}

h4#winner a {
	display: block;
	height: 45px;
	width: 300px;
	background: url(gfx/european-digital-awards.gif) 0 0 no-repeat;
	padding: 0 0 0 80px;
	color: #4d4d4d;
	text-decoration: none;
}

h4#winner a:hover {
	background: url(gfx/european-digital-awards.gif) 0 -45px no-repeat;
	color: #2a4f99;
}

p#supnav {
	float: right;
	margin: -45px 0 0 0;
	padding: 0 0 60px 0;
	text-align: right;
	font-size: 0.8em;
	line-height: 150%;
}

p#supnav a {
	color: #2b529c;
	text-decoration: none;
}

p#supnav a:hover {
	border-bottom: 1px dotted;
}

/*--gallery--*/

.gallerypagecontent {
	width: 900px;
}

#scroll-wrap {
	float: left;
	width: 818px;
	height: 83px;
	background: #fff;
	padding: 10px;
	overflow: hidden;
}

h2.lt-title {
	font-size: 1px;
	text-indent: -999em;
	display: block;
	float: left;
	width: 140px;
	height: 470px; 
}

body.body-portrait-photography h2.lt-title {
	background: url(gfx/ltportraits.jpg) top left no-repeat;
}

body.body-wedding-photography h2.lt-title,
body.body-wedding-photography-2 h2.lt-title,
body.body-wedding-photography-3 h2.lt-title,
body.body-wedding-photography-4 h2.lt-title,
body.body-wedding-sppecial-offer h2.lt-title {
	background: url(gfx/ltweddings.jpg) top left no-repeat;
}

body.body-debs-photography h2.lt-title {
	background: url(gfx/ltdebs.jpg) top left no-repeat;
}

body.body-schools-photography h2.lt-title,
body.body-school-group-photography h2.lt-title,
body.body-school-portraits h2.lt-title,
body.body-school-visits h2.lt-title {
	background: url(gfx/ltschools.jpg) top left no-repeat;
}

body.body-commercial-photography h2.lt-title,
body.body-industrial-photography h2.lt-title,
body.body-pr-photography h2.lt-title,
body.body-golf-photography h2.lt-title,
body.body-nursing-home-photography h2.lt-title {
	background: url(gfx/ltcommercial.jpg) top left no-repeat;
}
 
.caption {
	font-style:italic;
	color:#887;
}

.photo {
	position: relative;
	margin-top: 2em;
	width: 900px;
	overflow: hidden;
	margin: 2em auto;
}

.gallery {
	width: 702px;
	margin: 0 auto;
	
}

.gallery li {
	width: 68px;
	height: 50px;
	border: 3px double #111;
	margin: 0 2px;
	background:#000;
}

.gallery li div {
	left: 240px;
}

.gallery li div .caption {
	font:italic 0.7em/1.4 georgia,serif;
}
	
#main_image {
	margin:0 auto 30px auto;
	background:white;
	min-height: 450px;
	border: 25px #fff solid;
	text-align: center
}

#main_image img {
	margin-bottom:10px;
}
	
.nav {
	padding-top:5px;
	clear:both;
}
	
.info {
	text-align:left;
	width:900px;
	margin:30px auto;
	border-top:1px dotted #221;
	padding-top:30px;
}

.info p {
	margin-top: 1.6em;
}

.galleria {
	list-style: none;
	width: 2240px; /* EDIT THIS LINE FOR EACH PAGE */
	height: 100px;
}

body.body-wedding-photography-4 .galleria, body.body-pr-photography .galleria {
	width: 3000px;
}

.galleria li {
	display: block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	float: left;
	margin: 0 10px 10px 0
}

.galleria li a {
	display: none;
}

.galleria li div {
	position:absolute;
	display:none;
	top:0;
	left:180px;
	text-align: center;
}

.galleria li div img {
	cursor: pointer;
}

.galleria li.active div img, .galleria li.active div {
	display: block;
}

.galleria li img.thumb { 
	cursor: pointer;
	top: auto;
	left: auto;
	display: block;
	width: auto;
	height: auto;
}

.galleria li .caption {
	display: block;
	padding-top: .5em;
}

* html .galleria li div span { 
	width: 400px;
} /* MSIE bug */

div.gallerypagecontent p.gbutton {
	display: block;
	height: 103px;
	width: 30px;
	background: #fff; 
	float: left;
	margin: 0;
}

.gbutton a {
	display: block;
	height: 103px;
	width: 30px;
	text-decoration: none;
	text-indent: -999em;
}

#gprev a {
	background: url(gfx/hdarrprev.jpg) 0 0 no-repeat;
}

#gprev a:hover {
	background: url(gfx/hdarrprev.jpg) 0 -150px no-repeat;
}

#gnext a {
	background: url(gfx/hdarrnext.jpg) 0 0 no-repeat;
}

#gnext a:hover {
	background: url(gfx/hdarrnext.jpg) 0 -150px no-repeat;
}