/* ------------------------------------------------
   Standards compliant CSS attempt by Ryan Salerno
   Questions and problems: rsalerno@gmail.com
   ------------------------------------------------ */

/* --- general style --- */
body { background-color: #f2eed2; width: 85%; margin: auto; padding: 0; text-align: center; }
div#content { text-align: left; margin: 50px 0}
div#footer { clear: both; }
div#footer a { margin: 0 20px; }

h1, h2 { margin: auto; padding: 20px 0 0 0; color: #744143; text-decoration: none; font-weight: normal; text-align: center; }
h2 { text-align: left; padding: 0; }
a:link { text-decoration: none; color: #744143; }
a:visited { text-decoration: none; color: #744143; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; color: gray; }
a img { border: 0; }

/* --- contact page specific --- */
dt { width: 40%; float: left; text-align: right; }
dd { margin-left: 50%; text-align: left; padding: 0 0 1em 0;}

/* --- custom page specific --- */
img#custompic { float: right; margin: 5px 10px; }

/* --- difference page specific --- */
span { font-size: x-small; }

/* --- directions page specific --- */
div.maps { float: left; height: 250px; padding: 10px; margin: 25px; border: 2px solid white; }
div.maps#close { background: url( 'map_close_sat.png' ) 10px 10px no-repeat; }
div.maps#far { background: url( 'map_far_sat.png' ) 10px 10px no-repeat; }
div.maps#mid { background: url( 'map_mid_sat.png' ) 10px 10px no-repeat; }
div.maps span { display: none; }
div.maps a { display: block; width: 300px; height: 206px; overflow: hidden; }
div.maps#close a { background: url( 'map_close.png' ) top left no-repeat; }
div.maps#far a { background: url( 'map_far.png' ) top left no-repeat; }
div.maps#mid a { background: url( 'map_mid.png' ) top left no-repeat; }
div.maps#close a:hover, div.maps#mid a:hover, div.maps#far a:hover { background-image: none; }
div.maps p { width: 300px; }

div#googlelove { float: left; margin: 20px; width: 200px; padding: 10px; }

/* --- products page specific --- */
div.productl, div.productr { background-color: #d0ccb0; border: 2px solid white; margin: 50px; _height: 1px; }
div.productr { text-align: right; }
div.productl img { float: left; margin: 30px 20px; }
div.productr img { float: right; margin: 30px 20px; }
div.productl div, div.productr div { clear: both; line-height: 0; height: 0; }
div.productl p, div.productr p { margin: 25px; }
div.productl p a, div.productr p a { font-size: 75%; }

h4 { font-weight: normal; text-decoration: none; padding: 40px; margin: 25px 0; border-top: 2px solid black; border-bottom: 2px solid black; text-align: center; }

/* --- tour page specific --- */
div.tourpic { float: left; margin: 20px; text-align: center; }
div.spacer { clear: both; line-height: 1px; margin: 0; padding: 0; }

/* Yes, this could easily have been accomplished with specific sheets for each page
   or with slick importing, but there just aren't enough pages to really warrant it */