html, body {min-width: 100px;} /* Reportedly, some browsers need this on html and other browsers need it on body */

body {background-image: url('../damask.png');}  /* colors are: #cbd5e1 & #c9c8c7 */

/* Layout for front page */
.frontlink, #frontBox {float: left;}
#frontmain {
  /* margin-top:100px; /* move it down a ways */
  /* Hard-code the width to keep the div's from wrapping if browser is too narrow */
  /* 925 > 920 = (10 + 300 + 10) + (10 + 300 + 10) + (10 + 260 + 10) */
  width:925px;
  margin-left:auto;
  margin-right:auto;
}
.frontlink {width:300px; height:500px; margin:0 10px;} /* The img in each .frontlink is 300x500 */
#frontBox {width:260px; position:relative; top:75px; margin:0 10px;}
#frontText {padding: 1em;}

#frontText {text-align: center;}
#frontBlurb {text-align: left;}

/* #header, #footer, #liquidHeight are needed for fcn 'doLayout' */
#header {width: 100%;}
#footer {width: 100%; position: relative; bottom: 0; left: 0;}
#liquidHeight {
  min-width: 700px;
  max-width: 1400px;  /* This indirectly limits the width of div.photo */
  margin: 0 auto; /* This keeps the contents centered if max-width is reached */
  height: 400px; /* An initial height is needed, else in FF the layout is wrong until a resize.  (The SV example had this, too.) */
  /* The final height is limited in the JavaScript function 'doLayout', which applies an arbitrary minimum of 370. */
}

.logo {width:375px; height:71px; margin:auto} /* without width & height, Safari & Chrome get wrong answer for headerHeight in doLayout() */
.spacer{clear:both; height:1px; display:block;}
.legal {clear:both;}

/* floats for divs inside #liquidheight */
.photo {float: left;  width: 48%;}
.rightColumn { float:right; width: 48%;}

.textTODO {text-align: left;}
.centerAlignText, div.legal {text-align: center;}
.photo {text-align: right;} /* keep the photo adjacent to the center of the window */

.lightenBackground {
  background-image: url('../White_35pctOpacity.png');
  background-repeat: repeat;
}

.roundCorners {border-radius: 20px;}
.scrollBar {height: 100%; overflow: auto;} /* Use scrollbar if necessary */

.print_prices {float:left; width:30%;}
.composite_prices {float:right; width:60%;}
.floatLeft100 {float:left; width:100%;}

.frontlink img, .logo img {border-width: 0;} /* IE wants to put a 1px border around the images, since they're <a>'s */

/* Fonts */
body {font-family: Georgia,"century gothic";}
.legal {font-family: Georgia,"times new roman"; font-size: xx-small;}

.textNormal {padding: 0px 20px;}
.legal {padding: 10px;}
.textNormal h3, .textNormal h4, .textNormal p, .textNormal ul {margin:0.5em auto;}
.textNormal ul {padding-left:1em;}

/* Horizontally center the nav UL */
.nav ul {margin-left: auto; margin-right: auto;}

ul.fivebuttons {width:640px;height:110px;padding:0;margin-bottom:0} /* width = 120*5 + 40 extra, height = 25 + 4*20 + 5 extra */

.nav ul {list-style:none;}
.nav li {display:inline-block; position:relative;}
.nav li a {display:block;margin: 0 0;}

.nav li ul {left:-999em; position:absolute;padding:0;} /* hide the drop-down menus until their parent is hovered */
.nav li:hover ul {left:auto;}
.nav #gallery:hover ul {left:5px;}  /* hack to align the drop-downs under "galleries" */
.nav #details:hover ul {left:18px;} /* hack to align the drop-downs under "details" */

.nav li ul li {display:block;} /* drop-down menus */

.nav li a {
  width:120px;
  height:25px;
  background-image: url('../ButtonSprites.png');
  background-repeat:no-repeat;
  background-position:0px 0px;
  text-indent:-9999px;  /* Put the anchor text way left of the window */
}

.nav li ul li a {
  width:200px;
  height:20px;
  background-image: url('../DropDownSprites.png');
  background-repeat:no-repeat;
  background-position:0px 0px;
  text-indent:-9999px;  /* Put the anchor text way left of the window */
}

/* 120x25 button sprite positions: */
#home a { background-position: 0px 0px;}
#home a:hover { background-position: 0px -25px;}
#home a.current { background-position: 0px -50px;}

#gallery a { background-position: -120px 0px;}
/* #gallery a:hover { background-position: -120px -25px;} Hover causes drop-down to appear, so leave image alone */
/* #gallery a.current { background-position: -120px -50px;} This will never be the current page */

#details a { background-position: -240px 0px;}
/* #details a:hover { background-position: -240px -25px;} Hover causes drop-down to appear, so leave image alone */
/* #details a.current { background-position: -240px -50px;} This will never be the current page */

#contact a { background-position: -360px 0px;}
#contact a:hover { background-position: -360px -25px;}
#contact a.current { background-position: -360px -50px;}

#pricing a { background-position: -480px 0px;}
#pricing a:hover { background-position: -480px -25px;}
#pricing a.current { background-position: -480px -50px;}

/* 200x20 buttons for drop-down menus */
#girls a { background-position: 0px 0px;}
#girls a:hover { background-position: 0px -20px;}
#girls a.current { background-position: 0px -40px;}

#guys a { background-position: -200px 0px;}
#guys a:hover { background-position: -200px -20px;}
#guys a.current { background-position: -200px -40px;}

#kids a { background-position: -400px 0px;}
#kids a:hover { background-position: -400px -20px;}
#kids a.current { background-position: -400px -40px;}

#etc a { background-position: -600px 0px;}
#etc a:hover { background-position: -600px -20px;}
#etc a.current { background-position: -600px -40px;}

#seniors a { background-position: -800px 0px;}
#seniors a:hover { background-position: -800px -20px;}
#seniors a.current { background-position: -800px -40px;}

#families a { background-position: -1000px 0px;}
#families a:hover { background-position: -1000px -20px;}
#families a.current { background-position: -1000px -40px;}

/* colors for debugging
#header {background-color: yellow;}
#frontmainBuffer, #liquidHeight {background-color: gray;}
#frontmain {background-color: orange;}
#footer {background-color: magenta;}
div.frontlink {background-color: purple;}
#frontText, div.textPadding {background-color: green;}
h1, h2, #frontBlurb {background-color: pink;}
div.logo {background-color: orange;}
div.spacer {background-color: red;}
div.legal {background-color: #80FF80;}
div.nav ul {background-color: blue;}
div.nav li a {background-color: orange;}
div.nav li ul li a {background-color: orange;}
*/

/* borders for debugging 
div {
  border-style: solid;
  border-width: 1px;
  border-color: magenta;

}
*/