/* "Top" button at bottom right*/
#bottomright {position:fixed; bottom:3px; right:2px;}

/* classes for Larger images */
.largerVisible{position:absolute; top:90px; left:20px; cursor: url('PNGs/magminus.cur'), pointer;}
.largerHidden{position:absolute; top:-9000px; left:-9000px; display:none;}

/* give imgs a drop shadow added 17 SE 11*/
img{
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
		
/* show + cursor for panos with large versions*/
img.enlarge{
cursor:url('PNGs/magplus.cur'), pointer;
position:absolute; top:90px; margin-left:auto; margin-right:auto; left:0; right:0;}

/* Hidden for preloading in a Gallery. Position in corner avoids scroll bar even tall images*/
img.hidden {visibility:hidden; position:absolute; top:-999px; left:0;}

/* narrow borders for all images */
img{
border-right: 3px solid #aaa;
border-bottom: 3px solid #aaa;
border-top: 3px solid #333;
border-left: 3px solid #333;
padding: 0;}

/* Full-size for 800x600 pics (shrink to fit container, enlarge, but not to > 600px)*/
img.large{max-height: 600px; height: 90%; width:  auto;}

/* images within text pages */
img.FloatRight {float: right; margin: 10px;}
img.FloatLeft {float: left; margin: 10px;}

/* for thumbnails, change border on hover*/
img.thumb:hover{
border-right: 3px solid #333;
border-bottom: 3px solid #333;
border-top: 3px solid #aaa;
border-left: 3px solid #aaa;
z-index: 10;}

/* container for pano2VR QTVR in 360/pages */
#container {position:absolute; width:100%; height:100%;top:0; left:0;}

/* Prev/Index/Next buttons for QTVR pages */
td.qbut {
height: 13px;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background-color: #999;
border-top: 2px solid #eee;
border-left: 3px solid #eee;
border-right: 3px solid #444;
border-bottom: 2px solid #444;
color: #000;
background: url(PNGs/bup.jpg) repeat-x 0 center;}


/* Prev/Index/Next button, hover */
td.qbut:hover {
color: #fff;
border-top: 2px solid #383838;
border-left: 3px solid #383838;
border-right: 3px solid #ccc;
border-bottom: 2px solid #ccc;
background: url(PNGs/bdown.jpg) repeat-x 0 center;}

/* make thumb div 100% high so they scale */
.hundiv {height:100%; margin-top:40px;}

/*on QTVR pages for flash div*/
.QTVRcontent {
border-right: 3px solid #aaa;
border-bottom: 3px solid #aaa;
border-top: 4px solid #333;
border-left: 4px solid #333;
width: 70%;
height: 70%;}


/* top left: position the "grow/shrink" message*/
.topleft {
position:  absolute;
top: 15px;
right: 20px;
color: black;
font: normal 8pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: right;}
	
html, body {border-width: 0px; margin: 0px;}
/*set html MIN_HEIGHT not height here so radial gradient goes to bottom page not just the visible bit */
html{min-height:100%;}
	
/* Tell IE to use a smaller text size */
* html body {font-size: 90%;}

/* <![CDATA[ */

body {
margin-left: 20px;
margin-right: 40px;
padding: 0;
font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #222222;
	
/*===============Body radial gradient added 3 Jan 12:=================*/
background-color: rgba(180,180,180,0.8);
background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(214, 214, 214, 0.8), #666666 100%);
background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(214, 214, 214, 0.8), #666666 100%);
background-image: -o-radial-gradient(50% 50%, circle cover, rgba(214, 214, 214, 0.8), #666666 100%);
background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(214, 214, 214, 0.8), #666666 100%);
background-image: radial-gradient(50% 50%, circle cover, rgba(214, 214, 214, 0.8), #666666 100%);}

/* div with height 100% to contain individual pictures*/
div.container {height: 80%; width: 100%;}

/* Start Holly Hack, hidden from MacIE. \*/
* html #navigation ul li {height: 1%;}
/* End Holly Hack. */

	
p {text-align: left;
font: 14px Arial, Helvetica, Geneva, sans-serif;
margin-top: 0;
margin-left: 20px;
margin-right: 20px;}

/* page title eg "Brian Watson Photography" or "Pictorial"*/
h1{color: #fff;
text-align: left;
margin: 0;
font: normal 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-shadow: 3px 3px 2px #000}

h2 {color: black;
padding: 0;
text-align: center;
font: bold 14pt "Lucida Grande", Lucida, Verdana, sans-serif;}
	
h3 {color: black;
text-align: center;
margin: 0;
font: normal normal 10pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
	
h4 {color: black;
text-align: left;
font: normal normal 14pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 20px 0 0;}
	
h5 {color: #aaa;
text-align: left;
margin: 10px 0 0;
font: normal 24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}

a:link {color: #00f;}
a:visited {color: #800080;}
a:hover {color:#0f0;}

/* center a table  */
table.middle{margin-left: auto; margin-right: auto;}

td.PIN {
height: 13px;
width: 40px;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background-color: #999;
border-top: 2px solid #eee;
border-left: 3px solid #eee;
border-right: 3px solid #444;
border-bottom: 2px solid #444;
color: #000;
background: url(PNGs/bup.jpg) repeat-x 0 center;}

/* Prev/Index/Next button */
td.PIN:hover {
color: #fff;
border-top: 2px solid #383838;
border-left: 3px solid #383838;
border-right: 3px solid #ccc;
border-bottom: 2px solid #ccc;
background: url(PNGs/bdown.jpg) repeat-x 0 center;}

/* Caption for individual photo pages (variable width) */
td.BuyPINO {
height: 15px;
text-align: center;
padding: 0 10px;
font: bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: #fff9d7;
color: #000;
cursor: default;
border-top: 2px solid #444;
border-left: 3px solid #444;
border-right: 3px solid #ccc;
border-bottom: 2px solid #ccc;
background: url(PNGs/bdown.jpg) repeat-x 0 center;}