/* 

Main CSS file for http://www.paulharrrison-photographs.co.uk/
by Jeremy Bojczuk, Lab 99 Web Design (http://www.lab99.com/)

main colours: 
body & image background (pale grey) : #e8e8e8
text & nav hover (blue) : #3f4d72
nav background (blue) : #60728a
headers (brown) : #85664c 
nav hover text (yellow) : #fbea5c 
image borders (blue) : #8a929d

 */ 


html { 
	height: 100%; 
	margin-bottom: 1px; 
	text-align: center; 
	width: 100%; 
	} 

*  { 
	margin: 0; 
	padding: 0; 
	} 



/* main structural elements
   ------------------------ */

body  { 
	background: #e8e8e8 url(images/bodynav.png) repeat-x 0 -100px; 
	color: #3f4d72;  
	font: small/150% verdana, arial, sans-serif; 
	text-align: left; 
	width: 100%; 
	} 

#container  { 
	margin: 0 auto; 
	width: 880px; 
	} 

#main  { 
	background: #fbfbfb; 
	-khtml-border-bottom-left-radius: 10px; 
	-khtml-border-bottom-right-radius: 10px; 
	-moz-border-radius-bottomleft: 10px; 
	-moz-border-radius-bottomright: 10px; 
	-webkit-border-bottom-left-radius: 10px; 
	-webkit-border-bottom-right-radius: 10px; 
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px; 
	float: left; 
	padding: 0 20px 20px 20px; 
	width: 840px; 
	} 

#siteinfo  { 
	float: left; 
	font-size: 90%; 
	padding: 1em 0; 
	text-align: center; 
	width: 100%; 
	} 

#intro  { 
	float: left; 
	width: 300px; /* depends on width of image */ 
	} 

#galleryintro  { 
	float: left; 
	width: 580px; 
	} /* so max width of images is 570px, plus padding and border totalling 10px */ 

#gallerynav  { 
	float: right; 
	margin: 20px 0 0 0; 
	width: 240px; 
	} 



/* links
   ----- */ 

a:link  { 
	color: #0720d9; /* blue */ 
	text-decoration: underline; 
	} 

a:visited  { 
	color: #0720d9; 
	text-decoration: none; 
	} 

a:hover { 
	color: #f8200a; /* red */ 
	text-decoration: underline; 
	} 

a:focus  { 
	outline: 1px dotted #0720d9; /* link blue */ 
	} 

a:active  { 
	color: #8856ed; /* purple */ 
	} 



/* headings
   -------- */ 

h1  { 
	background: url(images/logo3.png) no-repeat 20px 0;   
	float: left; 
	height: 120px; 
	margin: 0; 
	padding: 0; 
	text-indent: -5000px; 
	width: 400px; 
	} 

h1 a, 
h1 a:hover  { 
	display: block; 
	float: left; 
	height: 120px; 
	margin: 0; 
	padding: 0; 
	text-decoration: none; 
	text-indent: -5000px; 
	width: 400px; 
	} 

body#guestbook #main h1 { 
	background: none; 
	display: inline; 
	height: auto; 
	margin: 0; 
	padding: 0 10px 0 0; 
	text-indent: 0; 
	width: auto; 
	} 

h2  { 
	color: #85664c; 
	float: left; 
	font: italic 190%/140% "trebuchet ms", tahoma, arial, sans-serif; 
	letter-spacing: 0.02em; 
	margin: 0.5em 0; 
	padding: 0.2em 0 0 0; 
	text-shadow: 1px 1px 1px #8a929d; /* image border colour */ 
	width: 100%; 
	} 

h3  { 
	color: #85664c; 
	font: 160%/140% "trebuchet ms", tahoma, arial, sans-serif; 
	letter-spacing: 0.02em; 
	margin: 0; 
	padding: 0.6em 0 0 0; 
	} 

h3#slogan  { 
	background: url(images/seeingthinkingacting01.png) no-repeat 0 0;   
	float: left; 
	height: 30px; 
	margin: 0; 
	padding: 0; 
	text-indent: -5000px; 
	width: 300px; 
	} 

h4  { 
	color: #85664c; 
	font: 130%/140% "trebuchet ms", tahoma, arial, sans-serif; 
	letter-spacing: 0.02em; 
	margin: 0; 
	padding: 0.6em 0 0 0; 
	} 



/* paragraphs and lists
   -------------------- */ 

p  { 
	font-size: 90%; 
	margin: 0.7em 0 0 0; 
	padding: 0; 
	} 

#siteinfo p  { 
	float: left; 
	text-align: center; 
	width: 100%; 
	} 

ul  { 
	list-style: disc; 
	margin: 0; 
	padding: 0 0 0 20px; 
	} 

ol  { 
	margin: 0; 
	padding: 0 0 0 20px; 
	} 

li  { 
	margin: 0; 
	padding: 0.2em 0 0 0; 
	} 

dl  { 
	float: left; 
	margin: 0; 
	padding: 0 0 20px 0; 
	width: auto; 
	} 

dt  { 
	font-size: 110%; 
	font-weight: normal; 
	padding: 15px 0 5px 0; 
	} 

dd  { 
	padding: 0 0 0 1em; 
	} 



/* minor, decorative elements
   -------------------------- */ 

img  { 
	background: #e8e8e8; /* body background */ 
	border: 1px solid #8a929d; 
	-khtml-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
	float: right; 
	margin: 20px 0; 
	padding: 4px; 
	} 

body#guestbook img  { 
	background: none; 
	border: none; 
	float: none; 
	margin: 0; 
	padding: 0; 
	} 

img#letterbox  { 
	border: none; 
	margin: 0; 
	padding: 0; 
	} /* optional letterbox image */ 

body#index img  { 
	margin: 15px 0 0 0; 
	} 

body#index img#homeimg1,
body#index img#homeimg2  { 
	margin: 15px 0 0 15px; 
	} 

body#about img  { 
	margin: 15px 0 0 20px; 
	} 

em, 
strong  { 
	font-style: normal; 
	font-weight: bold; 
	} 
 
cite  { 
	font-style: italic; 
	} 

abbr, 
acronym  { 
	border-bottom: 1px dotted #3f4d72; /* text colour */ 
	cursor: help; 
	speak: spell-out; 
	} 



/* navigation menus
   ---------------- */ 

ul#nav {
	background: #60728a url(images/bodynav.png) repeat-x 0 0; 
	-khtml-border-top-left-radius: 10px; 
	-khtml-border-top-right-radius: 10px; 
	-moz-border-radius-topleft: 10px; 
	-moz-border-radius-topright: 10px; 
	-webkit-border-top-left-radius: 10px; 
	-webkit-border-top-right-radius: 10px; 
	border-top-left-radius: 10px; 
	border-top-right-radius: 10px; 
	float: right; 
	list-style: none; 
	margin: 0; 
	padding: 0 20px; 
	width: 840px; 
	}

ul#nav li  { 
	background: url(images/whitedot.png) no-repeat 0 50%; 
	float: left; 
	margin: 0; 
	padding: 0 0 0 2px; 
	width: auto; 
	} 

ul#nav li#navindex  { 
	background: none; 
	padding: 0; 
	} 

ul#nav a {
	color: #fff; 
	display: block;
	font: 110%/140% "trebuchet ms", tahoma, arial, sans-serif; 
	padding: 0.8em 1.6em; 
	text-decoration: none; 
	text-shadow: 1px 1px 1px #555; 
	width: auto; 
	} 

ul#nav a:hover  { 
	background: #3f4d72; /* normal text colour */
	color: #fbea5c; /* yellow */ 
	text-decoration: none; 
	} 

ul#nav a:active  { 
	color: #fff; 
	} 

body#index ul#nav li#navindex a, 
body#about ul#nav li#navabout a, 
body#gallery ul#nav li#navgallery a, 
body#guestbook ul#nav li#navguestbook a, 
body#contact ul#nav li#navcontact a  { 
	background: url(images/navarrow1.png) no-repeat 50% 100%; 
	color: #fbea5c; /* yellow */ 
	} 

body#index ul#nav li#navindex a:hover, 
body#about ul#nav li#navabout a:hover, 
body#gallery ul#nav li#navgallery a:hover, 
body#guestbook ul#nav li#navguestbook a:hover, 
body#contact ul#nav li#navcontact a:hover  { 
	background: url(images/navarrow1.png) no-repeat 50% 100%; 
	color: #fdef7b; /* yellow */ 
	cursor: default; 
	text-decoration: none; 
	} 



/* gallery pages
   ------------- */ 

#galleryintro p  { 
	float: left; 
	margin: 0; 
	width: 580px; 
	} 

p.galleryinfo  { 
	padding: 0.7em 0 0 0; 
	} 

#gallerynav ul  { 
	float: left; 
	list-style: none; 
	margin: 10px 0 0 0; 
	padding: 0; 
	width: 240px; 
	} 

#gallerynav ul li  { 
	border-top: 1px solid #fff; 
	float: left; 
	padding: 0; 
	width: 240px; 
	} 

#gallerynav ul li:first-child  { 
	border-top: none; 
	} 

#gallerynav a  { 
	background: #e8e8e8; 
	color: #3f4d72; /* normal text colour */ 
	display: block; 
	float: left; 
	margin: 0; 
	padding: 0.4em 10px 0.4em 20px; 
	text-decoration: none; 
	width: 210px; 
	} 

#gallerynav a:hover  { 
	background: #3f4d72;  
	color: #fbea5c; /* yellow */ 
	} 

#gallerynav ul li:first-child a  { 
	-khtml-border-top-left-radius: 7px; 
	-khtml-border-top-right-radius: 7px; 
	-moz-border-radius-topleft: 7px; 
	-moz-border-radius-topright: 7px; 
	-webkit-border-top-left-radius: 7px; 
	-webkit-border-top-right-radius: 7px; 
	border-top-left-radius: 7px; 
	border-top-right-radius: 7px; 
	} 

#gallerynav ul li:last-child a  { 
	-khtml-border-bottom-left-radius: 7px; 
	-khtml-border-bottom-right-radius: 7px; 
	-moz-border-radius-bottomleft: 7px; 
	-moz-border-radius-bottomright: 7px; 
	-webkit-border-bottom-left-radius: 7px; 
	-webkit-border-bottom-right-radius: 7px; 
	border-bottom-left-radius: 7px; 
	border-bottom-right-radius: 7px; 
	} 

#galleryintro ul  { 
	float: left; 
	list-style-type: none; 
	margin: 0; 
	padding: 20px 0 0 0; 
	width: 580px; 
	} 

#galleryintro ul li  { 
	display: inline; 
	float: left; 
	margin: 0 0 10px 25px; 
	padding: 0; 
	} 

#galleryintro ul a  { 
	border: 1px solid #fbfbfb; 
	-khtml-border-radius: 3px; 
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px; 
	display: block; 
	height: 158px; /* img height plus T & B padding */ 
	width: 158px; /* img width plus L & R padding */ 
	} 

#galleryintro ul a:hover  { 
	background: #fbfbfb; 
	border: 1px solid #f8200a; /* link hover red */ 
	display: block; 
	} 

#galleryintro img  { 
	float: left; 
	margin: 0 0 20px 0; 
	} /* large, individual image */ 

#galleryintro ul li img  { 
	background: #fbfbfb; /* #main background */ 
	border: none; 
	display: inline; 
	float: left; 
	margin: 0; 
	padding: 4px; 
	} /* thumbnail image */ 

#galleryintro ul#prevnext  { 
	padding: 20px 0 10px 0; 
	} 

#galleryintro ul#prevnext li  { 
	display: inline; 
	float: left; 
	margin: 0 2em 0 0; 
	} 

#galleryintro ul#prevnext a  { 
	background: #e8e8e8; 
	border: 1px solid #8a929d; /* image border colour */ 
	-khtml-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
	text-decoration: none; 
	color: #3f4d72; /* normal text colour */ 
	height: auto; 
	padding: 0.5em 1.5em; 
	width: auto; 
	} 

#galleryintro ul#prevnext a:hover  { 
	background: #3f4d72; /* normal text colour */
	border: 1px solid #3f4d72; 
	color: #fbea5c; /* yellow */ 
	} 



/* contact form
   ------------ */ 

form  { 
	float: left; 
	margin: 0; 
	padding: 0 50px 20px 0; 
	width: 390px; 
	} 

form div  { 
	margin: 0.7em 0 0 0; 
	padding: 0; 
	} 

fieldset  { 
	border: none; 
	margin: 0 0 20px 0; 
	} 

legend  { 
	visibility: hidden;  
	} 

label  { 
	float: left; 
	padding: 3px 0; 
	width: 8em; 
	} 

label.message, 
label.zemTextarea  { 
	width: auto; 
	} 

input  { 
	border: 1px solid #d9d6d6; 
	-khtml-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
	padding: 3px 5px; 
	width: 250px; 
	} 

input.submitform, 
input.zemSubmit  { 
	color: #f00; 
	font-weight: bold; 
	margin: 5px 0 0 0; 
	width: auto; 
	} 

input.submitform:hover, 
input.zemSubmit:hover  { 
	border: 1px solid #dc591e; /* orange */ 
	color: #dc591e; 
	cursor: pointer; 
	} 

textarea  { 
	border: 1px solid #d9d6d6; 
	-khtml-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
	height: 100px; 
	margin-top: 5px; 
	padding: 3px 5px; 
	width: 350px; 
	} 

input:focus,
textarea:focus  { 
	border: 1px solid #9d9c9c; 
	} 

ul.zemError {
	border: 1px solid #b43222; 
	color: #b43222; /* dark red */ 
	font-weight: bold; 
	list-style-type: none; 
	margin: 0 0 20px 0; 
	padding: 10px 20px; 
	}