/* Johnson Nature Photography                            */

/* --------- margin, padding and border-width ---------- */
/* 1 value:   applies to all four sides                  */
/* 2 values:  top/bottom | left/right                    */
/* 3 values:  top | left/right | bottom                  */
/* 4 values:  top | right | bottom | left                */
/* ----------------------------------------------------- */

/* ------ centered content w/ auto-width margins ------- */

body {
  margin:8px 0px;
  padding:0px;
	
  text-align:center;        /* work around for WIN IE5.x */
	
  background-color:gray;
  font-family:"Arial","Helvetica", sans-serif;	
  font-size:16px;			
	}

div#main {	
  width:736px; 
  margin:0px auto;          /* center content            */
	
  text-align:center;        /* work around for WIN IE5.x */
	
  background:#ece8dc url(./images/graphics/canvas.gif);
	}

div#header {
  width:672px;
  margin:4px auto;          /* center content            */
  background-color:transparent;	
/*  text-align:center; */       /* work around for WIN IE5.x */
  }

div#content {
  width:672px;
  height:672px;
  margin:0px auto;          /* center content            */
  background-color:transparent;	
/*  text-align:center; */        /* work around for WIN IE5.x */
  }
	
div#address {
  margin-top:42px;
  text-align:center;
  background-color:transparent;	 
  }	

div#footer {
  width:672px;
  height:32px;
  margin:0px auto;          /* center content            */
  border-top:3px double black;
  background-color:transparent;
/*	text-align:center; */        /* work around for WIN IE5.x */		
  }	

/* -----------------------  links ---------------------- */

a:link { color:black; }          /* not visited          */
a:visited { color:black; }       /* visited              */
a:hover { color:blue; }          /* pointed to           */
a:focus { color:blue; }          /* selected by keyboard */
a:active { color:black; }        /* clicked              */

/* ---------------------- text ------------------------- */
	
p {
  margin-top:0px;
  text-align:left;
  font-family:"Arial","Helvetica", sans-serif;
  font-size:16px;
 /* font-weight:bold; */ 
  }

span.large {
  text-align:center;
  font-family:"Arial","Helvetica", sans-serif;	
  font-size:19px;
  font-weight:normal;
  }	
	
span.small {
  text-align:center;
  font-family:"Arial","Helvetica", sans-serif;	
  font-size:12px;
  }	

div#footer p {
  margin-top:0px;
  padding-top: 2px;
  text-align:left;	
  font-size:12px;
  }	
	
div#footer span {
  float:right;
  font-family:"Arial","Helvetica", sans-serif;	
  font-size:12px;
  }
	
/* --------------------- box model --------------------- */ 
/* Windows IE5.x incorrectly includes the cellspacing,   */
/* padding and borders in the width property. If padding */
/* borders or border-spacing (cellspacing) are needed,   */
/* the best solution is the Tantek Celik's hack based on */
/* an IE5.x CSS parsing bug.                             */
/*                                                       */
/* For equal width cells in a table, set the cell width  */
/* rather then the table width.  To set the cell width,  */
/* subtract the table border-width from the final table  */ 
/* width and divide by the number of cells.              */
/* e.g. (512 - (2 * 0)) / 4	= 128                        */
/* To calculate the cell content width (W3C guidlines),  */
/* subtract the cellspacing, border-width, and padding   */
/* from the actual cell width.                           */
/* e.g. 128 - 10 - 0 - (2 * 0) = 118                     */
/* ----------------------------------------------------- */

/* ---------------- navigation table ------------------- */

#navbar { 
  width:672px;
  margin-top:0px;
  margin-bottom:18px;
  text-align:center;
  border-top:3px double black;
  border-bottom:3px double black;
  color:gray;                        /* table font color */ 
  }
	
#navbar td {
  padding:4px;
  text-align:center;
  }
	
#navbar a {text-decoration: none; }
	
/* ------------------ paging table --------------------- */

#page {
  width:160px;
  margin:2px auto;
  text-align:center;		
  font-size:16px;
	color:gray;
  }
	
.arrow { border-style: none; }

/* ------------------ gallery table -------------------- */

#gallery {
  margin:0px auto;
  padding:0px;
  text-align:center;	
  font-size:16px;
  }		

#gallery td {
  width:168px;
	padding:8px 0px;
  }

#gallery a {text-decoration:none; }	 

/* ----------------- options table --------------------- */

table#options {
  margin-top:8px;
  border-top:3px double black;
	border-bottom:0px solid black;
  background-color:transparent;
}

table#options td {
  text-align:left;
  width:224px;
  height:84px;
  padding:8px 0px 0px 56px;
  }
	
table#options span {          /* for positioning the ?   */
  font-weight:bold;
  margin-left:6px;	
  margin-right:4px;
  }	

form {margin:0px;}            /* IE forms have margins!  */
	
input#txt {                   /* for displaying price    */
  width:54px;		
  margin-top:2px;
  text-align:right;
  background-color:#ffffff;
  }

input.pb {                    /* order and view buttons  */
  width:104px;
  margin:2px 0px;
  }
	 
/* ---------------- print details table ----------------- */

#detail {
  text-align:left;
  margin-bottom: 4px;
  }
	
#detail td {
  padding:0px 12px;
  }
	
/* ------------------ images (80 x 120) ----------------- */	

img.h120w80 {
  float:inherit;
  width:84px;                 /* width  =  80 + 4        */
  height:124px;               /* height = 120 + 4        */
  border:2px solid white;
  margin:0px 16px;
  }

img.h80w120 {
  float:inherit;
  width:124px;                /* width  = 120 + 4        */
  height:84px;                /* height =  80 + 4         */
  border:2px solid white;
  margin:16px 0px;
  }

/* ----------------- images (148 x 188) ---------------- */
/* This image class is for framed thumbnails with drop   */
/* shadows and should not have any borders.              */

img.h148w188 {
  width:188px;
  height:148px;
  }
	
/* ----------------- images (208 x 312) ---------------- */	
	
img.h208w312 {
  width:318px;                /* width  = 312 + 6        */
  height:214px;               /* height = 208 + 6        */
  border:3px solid white;
  }
	
img.h312w208 {
  width:214px;                /* width  = 208 + 6        */
  height:318px;               /* height = 312 + 6        */
  border:3px solid white;
  }
	
/* ------------------ image position ------------------- */		
	
img.left {
  float:left;
  margin:2px 24px 16px 0px;
  }

img.right {
  float:right;
  margin:2px 0px 16px 24px;
  }
	
/* ----------------- images (288 x 432) ---------------- */  	

img.h288w432 {
  float:inherit;
  width:440px;                /* width  = 432 + 8        */
  height:296px;               /* height = 288 + 8        */
  border:4px solid white;	
  margin:10px auto;
  }
	
img.h432w288 {
  float:inherit;
  width:296px;                /* width  = 288 + 8        */
  height:440px;               /* height = 432 + 8        */
  border:4px solid white;
  margin:10px auto;
  }

div#h288w432_spacer {
  width:672px;
	height:152px;
	}

div#h432w288_spacer {
  width:672px;
	height:24px;
	}
	
/* ----------------------------------------------------- */