/* override some of the default settings for basic html */
html {
	height: 100%;
}
/* note the position definition appears to be needed if coming through an iframe then a body where there then is no parent to do margin: auto and get the child element centered */	
body {
	position: relative;
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
iframe {
	position: relative;
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
div,form {
	margin: 0px;
	border: 0px;
	padding: 0px;
	display:block;
}
A {
	margin: 0px;
	border: 0px;
	padding: 0px;
}
P { 
	margin: 0px;
	margin-bottom: 6px;
	border: 0px;
	padding: 0px;
	font-family:"Verdana", "Arial";
	font-size: 11pt;
	color: #000000;
	line-height: 14pt; 
}
LABEL { 
	margin: 0px;
	margin-bottom: 0px;
	border: 0px;
	padding: 0px;
}
INPUT {
	margin: 0px;
	border: 0px;
	padding: 0px;
}

/* top header includes planetography graphics and animated globe */
header {
	height: 65px;
	padding-top:5px;
	padding-left: 5px;
	padding-right: 5px;
	clear: left;
}
/* footer has the last modified information */
footer {
	height: 70px;
	padding: 5px;
	clear: left;
}
/* left navigation panel */
nav {
	margin: 0px;
	margin-top: 75px;
	padding-top: 5px;
	padding-left:3px;
	border-width: 0px;
	border-right: 3px;
	border-style: solid;
	border-color: DarkGreen;
	max-width: 164px;
	height: 530px;
	float: left;
}

article {
	margin-left: 174px;
	height: 614px;
	overflow: hidden;
}
/* tables are mostly phased out, still appear as proper tables in some of the about pages. */
table, th, td {
	font-family:"Verdana", "Arial";
	font-size: 10pt;
	border: 1px solid DarkGreen;
	padding: 4px;
	color: black;
	line-height: 12pt; 
}
th {
	font-weight: bold;
	text-align: left;
}
/* H1 is used for the headers at the top of each page, above the film strip */
H1 { 
	margin: 0px;
	border: 0px;
	padding: 0px;
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 20pt;
	line-height:18px;
	font-weight: bold;
	color: DarkGreen;
	text-align: center;
}
/* H2 is title for each content page, below the header. */
H2 { 
	margin: 0px;
	margin-left, margin-right: auto;
	border: 0px;
	padding: 0px;
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 16pt;
	line-height: 22px;
	color: DarkGreen;
	text-align: center;
}
/* H3 is used for paragraphs within a page of text */
H3 { 
	margin: 0px;
	border: 0px;
	padding: 0px;
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 16pt;
	font-weight: bold;
	color: DarkGreen;
}

/* Classes for href links throughout site. */
a.referencefontsz12 {
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-family:"Bradley Hand ITC",  "Comic Sans MS", "Arial";
	font-size: 12pt;
	font-weight: bold;
	text-decoration:underline;
	line-height: 12px;
	padding-top:0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
a.referencefontsz12:link {
	color: #993300;
}
a.referencefontsz12:visited {
	color: #993300
}
a.referencefontsz12:hover {
	color: #ffffff;
}


/* this is the website's topmost div */
div#toplevel {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image: url("/myicons/menu_background.gif");
	overflow: hidden;
}
/* style used to render site updated text. */
p.siteupdated {
	margin: 0px;
	border: 0px;
	padding: 0px;
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 12pt; 
	font-weight: bold;
	color: DarkGreen;
}
/* this iframe and div are used for the header content */ 
iframe.mainheader {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 62px;
}
div.mainheader {
	position: relative;
	margin: auto;
	width: 85%;
	height: 62px;
}
/* this iframe and content are used to control the main content below the main header. */
iframe.maincontent {
	position:relative;
	height: 544px;
	width: 100%;
}
div.maincontent {
	position: relative;
	margin: auto;
	width: 98%;
	height: 544px;
	overflow-y: auto;
	overflow-x: hidden;
	background-image: url("/myicons/content_background.gif");

}
/* following are generic button classes, used in conjunction with a specific id definition for a specific button to make a reactive button.*/
img.button96x24 {
	margin: auto;
	border: 0px;
	padding: 0px;
	width: 96px;
	height: 24px;
}
img.button156x34 {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 156px;
	height: 34px;  
}
img.button156x22 {
	border: 0px;
	padding: 0px;
	width: 156px;
	height: 22px;
}
/* following styles are the reactive button definitions for the left side navigation buttons.*/
img#navhomebutton {
	background-image: url("/myicons/home_btn.gif");
}
img#navhomebutton:hover {
	background-image: url("/myicons/home_alt_btn.gif");
}
img#navportfoliobutton {
	background-image: url("/myicons/portfolio_btn.gif");
}
img#navportfoliobutton:hover {
	background-image: url("/myicons/portfolio_alt_btn.gif");
}
img#navaboutbutton {
	background-image: url("/myicons/about_planet_btn.gif");
}
img#navaboutbutton:hover {
	background-image: url("/myicons/about_planet_alt_btn.gif");
}
img#navprintcarebutton {
	background-image: url("/myicons/print_care_btn.gif");
}
img#navprintcarebutton:hover {
	background-image: url("/myicons/print_care_alt_btn.gif");
}
/* following 2 styles are used in the header */
img#banner {
	margin: 0px
	border: 0px;
	padding: 0px;
	width: 329px;
	height: 60px;
}
img#animatedlogo {
	margin: 0px
	border: 0px;
	padding: 0px;
	width: 200px;
	height: 56px;
	float: right;
}
/* For the filmstrip at top of pages */
img#filmstrip {
	margin: auto;
	border: 0px;
	padding: 0px;
	width: 100%;
	height: 10px;
}
/* the following is used to make the top navigationdiv m spread out equally in the space. */
div.navtopbutton {
	display: flex;
	justify-content: space-between;
}
/* individual portfolio page button definitions.*/
img#portfoliofeaturebutton {
	background-image: url("/myicons/feature_btn.gif");
}
img#portfoliofeaturebutton:hover {
	background-image: url("/myicons/feature_alt_btn.gif");
}
img#portfoliocollectionsbutton {
	background-image: url("/myicons/collections_btn.gif");
}
img#portfoliocollectionsbutton:hover {
	background-image: url("/myicons/collections_alt_btn.gif");
}
img#portfoliosearchbutton {
	background-image: url("/myicons/search_btn.gif");
}
img#portfoliosearchbutton:hover {
	background-image: url("/myicons/search_alt_btn.gif");
}
img#aboutgeneralinfobutton {
	background-image: url("/myicons/general_info_btn.gif");
}
img#aboutgeneralinfobutton:hover {
	background-image: url("/myicons/general_info_alt_btn.gif");
}
img#aboutphotographersbutton {
	background-image: url("/myicons/photographers_btn.gif");
}
img#aboutphotographersbutton:hover {
	background-image: url("/myicons/photographers_alt_btn.gif");
}
img#aboutequipmentbutton {
	background-image: url("/myicons/equipment_btn.gif");
}
img#aboutequipmentbutton:hover {
	background-image: url("/myicons/equipment_alt_btn.gif");
}
img#aboutdarkroombutton {
	background-image: url("/myicons/darkroom_btn.gif");
}
img#aboutdarkroombutton:hover {
	background-image: url("/myicons/darkroom_alt_btn.gif");
}
/* defines the wide scroll area on the feature page. */
div#featurescrollerouter {
	position: relative;
	width:2000px;
	height:360px;
	z-index:1;
	overflow:hidden;
}
/* Each image on the feature page is positioned off the left side of the screen, then javascript moves it into position when it is queued up */
div.featurescroller {
	position: absolute;
	left: -400px;
	width: 300px;
	height: 300px;
	visibility: hidden;
	overflow: hidden;
}
/* define a specific image for the scroller on the feature page, specify only the width.*/
img.featurescroller {
	width:300px;
	border-style: none;
}
/* fancy text used in many pages. */
p.planetographytxt12 { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 12pt;
	color: #993300;
}
/* define the green-bordered box around collections and search results */
div#collectionscontainer {
	display: table;
	margin: auto;
	border: 20px;
	border-style: solid;
	border-width: 3px;
	border-color: DarkGreen;
	padding: 15px;
	width: 90%;
	height: 350px;
}
/* define a specific column (3 of them) for collections top page */ 
div.collectionscolumn {
	display: table-column;
	width: 33%;
	margin: auto;
	float: left;
	height: 100%;
}
div.collectionimagescontainer {
	display: table;
	margin: auto;
	border: 3px;
	border-style: solid;
	border-width: 2px;
	border-color: DarkGreen;
	padding: 2px;
	width: 95%;
}
/* define a specific column (4 of them) for the collections and search results pages */
div.collectionimagescolumn {
	display: table-column;
	width: 25%;
	margin: auto;
	float: left;
	height: 100%;
}

/* pagelink is used to render the page links on the collections and search results pages when there is more than 1 page.*/
p.pagelink {
	margin: 0px;
	margin-bottom: 2px;
	border: 0px;
	padding: 0px;
	padding-right: 6px;
	padding-top: 2px;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 14pt;
	color: DarkGreen;
	line-height: 14pt;
	float: left;
}
button.pagelink {
	margin: auto;
	border: 2px;
	float: left;
	border-style: solid;
	border-color: Green;
	background-color: DarkGreen;
}
a.pagelink {
	margin: auto;
	width: 30px;
	height: 30px;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 12pt;
	text-align: center;
	font-weight: bold;
}
a.pagelink:hover {
	color: #ffffff;
}
a.pagelink:link {
	color: #dddddd;
}
a.pagelink:visited {
	color: #dddddd;
}

input.pagelink {
	background-color:#D9D9D9;
	border-color:#006600;
	border: 3px;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
	float: left;
}
/* used to render the images on the search results page(s). */
img.searchresults {
	display: block;
	padding: 0px;
	height: 150px;
	border: 0px;
	margin: auto;
	text-align: center;
}


/* following styles build the collections top level page.  This first style is fot the labels */
p.collectionscategory { 
	margin-top: 4px;
	margin-bottom: 3px;
	margin-right: auto;
	border: 0px;
	padding: 0px;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 12pt;
	color: DarkGreen;
	text-align: center;
}
/* collections top level page images */
img.collections {
	display: table-row;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
	border: 0px;
	padding: 0px;
	height: 150px;
}
/* following styles are for the about pages, embeddedimages, etc. */

ul.about {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
}
li.about { 
	background: url('/myicons/earth_bullet.gif') no-repeat left top;
	height: 12px;
	margin-left: 20px;
	border: 0px;
	padding-left: 20px;
	padding-bottom: 10px;
	font-family:"Verdana", "Arial";
	font-size: 11pt;
	color: #000000;
	line-height: 11pt; 
}

div.home {
	position: absolute;
	top: 30px;
	left: -2000px;
	width: 100%;
	text-align: center;
	visibility: hidden;
}
img.home {
	margin: auto;
	border: 0px;
	padding: 0px;
	opacity: 0;
	visibility: hidden;
	display: block;
	height: 500px;
}
img.embeddedimage {
	margin: 0px;
	margin-right: 20px;
	border: 0px;
	padding: 0px
}
img.embeddedborderedimage {
	margin: 0px;
	margin-right: 20px;
	border: 4px;
	border-style: solid;
	border-color: black;
	padding: 0px
}
img#photographers {
	width: 213px;
	height: 171px;
	float: left;
}
img#hasselblad {
	width: 86px;
	height: 91px;
	float: left;
}
img#elan {
	width: 77px;
	height: 66px;
	padding-bottom: 10px;
	float: left;
}
img#gitzo {
	width: 72px;
	height: 113px;
	float: left;
}
img#scannerprinter {
	width: 150px;
	height: 105px;
	float: left;
}

/* following styles are thefor detail page, there is an outer container with the border and 2 columns, the text on left, image on right. */
div#detailcontainer {
	display: table;
	margin: auto;
	border: 5px;
	border-style: solid;
	border-width: 3px;
	border-color: #006600;
	padding: 5px;
	width: 98%;
	height: 500px;
}
div.detailcolumn {
	display: table-column;
	width: 50%;
	margin: auto;
	float: left;
}
img#detaillargeimage {
	margin: auto;
	border: 0px;
	padding: 0px;
	width: 100%;
}
/* primary purpose of this style is to verticaly align the text and/or image on the detail page */
span#detailcolumnblock {
	height: 500px;
	vertical-align: middle;
	display: table-cell;
}
img#detailaddbutton {
	background-image: url("/myicons/add_btn.gif");
}
img#detailaddbutton:hover {
	background-image: url("/myicons/add_alt_btn.gif");
}
img#detaillightboxbutton {
	background-image: url("/myicons/lightbox_btn.gif");
}
img#detaillightboxbutton:hover {
	background-image: url("/myicons/lightbox_alt_btn.gif");
}

/* following styles define the search page. */
/* first is the outer div that has the box outline */
div#searchcontainer {
	display: table;
	margin: auto;
	border: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: DarkGreen;
	padding: 5px;
	width: 98%;
	height: 400px;
}
div#searchcriteriaattributecontainer {
	display: table;
	margin: auto;
	border: 0px;
	border-top: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: DarkGreen;
	padding: 5px;
}

/* the following defintions are used for the find by image number section of the search page. */
input,select.searchfind {
	background-color: LightGrey;
}
a.searchfind {
	height: 24px;
}
p.searchfind {
	margin: 0px;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	line-height: 16px;
	color: DarkGreen;
}
/* following are the styles for the selectors in the search page */
select.searchcriteriachoice {
	background-color: LightGrey;
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	color: black;
	display: block;
}
select#searchcriteriaphotographer,searchcriteriastyle  {
	width: 170px;
}
select#searchcriterialocation, searchcriteriastate {
	width: 140px;
}
select#searchcriterialocationname {
	width: 270px;
}
/* following are thestyles for the checkbox checkbox of the search page */
label.searchprimarykeyword {
	padding-left: 6px;
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 12pt;
	line-height: 12px;
	color: DarkGreen;
}
label.searchsecondarykeyword {
	padding-left: 14px;
        font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	line-height: 10px;
	color: black;
}
input.searchcheckbox {
}

/* following styles define the grid layout for the search page */
.searchselectorsgrid {
	margin: 0px;
	border: 0px;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 2fr 1fr 3fr;
	grid-gap: 2px;
	padding: 3px;
	border: 0px;
	border-bottom: 1px;
	border-style: solid;
	border-color: DarkGreen;
}
div.searchselectorsgridcolumn {
}
.searchcheckboxgrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 4px;
	padding: 3px;
	border: 0px;
	border-bottom: 1px;
	border-style: solid;
	border-color: DarkGreen;
}
div.searchselectorsgridcolumn {
}
.searchbuttonsgrid {
	padding: 1px;
	display: flex;
	justify-content: center;
}
p.searchcategorylabel {
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	color: DarkGreen;
	width: 100px;
}
/* following are the responsive buttons on the search page */
img#searchcriteriabutton {
	background-image: url("/myicons/by_criteria_btn.gif");
}
img#searchcriteriabutton:hover {
	background-image: url("/myicons/by_criteria_alt_btn.gif");
}
img#searchnumberbutton {
	background-image: url("/myicons/by_number_btn.gif");
}
img#searchnumberbutton:hover {
	background-image: url("/myicons/by_number_alt_btn.gif");
}
img#searchfindbutton {
	background-image: url("/myicons/find_image_btn.gif");
}
img#searchfindbutton:hover {
	background-image: url("/myicons/find_image_alt_btn.gif");
}
img#searchhelpbutton {
	background-image: url("/myicons/help_btn.gif");
}
img#searchhelpbutton:hover {
	background-image: url("/myicons/help_alt_btn.gif");
}
img#searchclearbutton {
	background-image: url("/myicons/clear_btn.gif");
}
img#searchclearbutton:hover {
	background-image: url("/myicons/clear_alt_btn.gif");
}

		


/* Unused */
.AREF10 {
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-size: 10pt;
	font-weight: bold;
	text-decoration:underline;
}

H4 { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	color: #006600;
	line-height: 10pt; 
}



/* LRA I BELIEVE THIS STYLE IS DEAD */
H6 { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 24pt;
	color: DarkGreen;
	line-height: 12pt; 
	padding-top:0px;
	padding-bottom: 0px;
	margin-top: 12px;
	margin-bottom: 6px;
}






/* For use on the order info and order submit forms */
.ORDERFORMS { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 12pt;
	color: #CC6600;
	line-height: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.ORDERFORMSSMALL { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 9pt;
	color: DarkGreen;
	line-height: 12px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.ORDERFORMSTEXT { 
	font-family:"Verdana", "Arial";
	font-size: 10pt;
	color: Black;
	line-height: 12pt; 
}


.SEARCHKEYWORD {
	font-family: "Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	color: DarkGreen;
	padding-top: 0px;
	padding-bottom: 0px;
}


.SHOPPINGCARTHEADER { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 12pt;
	color: DarkGreen;
	padding-top: 0px;
	padding-bottom: 3px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.CONFIGUREHEADER { 
	font-family:"Bradley Hand ITC", "Comic Sans MS", "Arial";
	font-weight: bold;
	font-size: 10pt;
	color: #993300;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}