/*
CSS for Stone Mill, Inc.
*/




/* general reset */
* {
margin: 0;
padding: 0;
border: none;
}




/*****************************************************************************/
/*
GENERAL SECTION
*/




html, body {
height: 100%; /* required for maintaining full-window site height */
}

body {
font-family: Geneva, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: #1a0f0b url('images/backdrop.gif');
background-repeat: repeat-x;
}

/* contains entire site except for footer */
#container {
width: 1000px;
min-height: 100%;
margin: 0 auto -15px; /* centers site and pulls footer up */
background-color: #222222;
}




/*****************************************************************************/
/*
HEADER SECTION
*/




/* removes h1 text */
#header h1 span {
position: absolute;
top: -1000px;
}

/* removes h2 text */
#header h2 span {
position: absolute;
top: -1000px;
}

#header {
height: 200px;
margin: 0 25px; /* insets header */
background: #cfa568 url('images/banner.gif'); /* inserts graphic to replace h1 & h2 text */
border-top: 25px solid #222222; /* same as container background color */
}




/*****************************************************************************/
/*
NAVIGATION SECTION
*/




#navigation {
margin: 0 25px; /* insets navigation */
padding: 10px 0 3px 0;
background: #1a0f0b url('images/navigation.gif'); /* same as body background color */
}

#navigation ul {
overflow: hidden; /* stretches ul around floats */
margin-left: 5px;
list-style-type: none;
font-size: 1em;
}

#navigation li {
float: left;
width: 120px;
margin: 0 5px;
text-align: center;
}

#navigation a {
display: block; /* causes a's to fill li widths */
height: 21px; /* 40px for tab image minus 19px padding */
padding: 11px 0 8px 0;
overflow: hidden;
text-decoration: none;
background-image: url('images/tab.png'); /* 3-part image for various a pseudo-classes */
}

#navigation a:link {
color: #523025;
}

#navigation a:visited {
color: #523025;
}

#navigation a:hover {
color: #cfa568; /* same as header background color */
background-position: center top;
}

#navigation a:active {
color: #cfa568;
background-position: right top;
}

/* specs for link to current page */
#navigation a:link.current {
color: #cfa568;
background-position: center top;
}

#navigation a:visited.current {
color: #cfa568;
background-position: center top;
}

#navigation a:hover.current {
color: #cfa568;
background-position: center top;
}

#navigation a:active.current {
color: #cfa568;	
background-position: center top;
}




/*****************************************************************************/
/*
BODY SECTION
*/




#bodycontent {
overflow: hidden; /* stretches bodycontent around floats */
padding: 20px 25px 10px 25px;
color: #eeeeee;
}

#bodycontent h2, #bodycontent h3, #bodycontent h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* quantity info header */
#bodycontent h2 {
margin-top: 1.5em;
text-align: center;
font-size: 1.5em;
}

/* "advantages" home page header */
#bodycontent h3 {
margin-top: 1.5em;
text-align: center;
font-size: 1.2em;
}

/* graphic-enhanced h3 */
#bodycontent h3.graphic {
padding: 2px 0 2px 12px;
text-align: left;
background-image: url('images/h3graphic.gif');
background-repeat: repeat-y;
}

/* optional shortening of graphic-enhanced h3 */
#bodycontent h3.short {
padding-left: 15px;
background-image: url('images/sh3graphic.gif');
}

/* distributor names header */
#bodycontent h4 {
margin-top: 1em;
font-size: 1em;
}

/* color-enhanced h4 */
#bodycontent h4.color {
color: #cfa568; /* same as header background color */
}

/* product types header */
#bodycontent h6 {
margin-top: .9em;
font-size: .9em;
}

#bodycontent p {
margin-top: 1em;
font-size: .9em;
}

#bodycontent ul, #bodycontent ol {
margin-top: 1em;
padding-left: 20px;
font-size: .9em;
}

#bodycontent ol {
padding-left: 24px; /* IE7 needs 4 extra pixels */
}

#bodycontent li {
margin-top: .5em;
}

#bodycontent li ul {
list-style-type: circle; /* overrides some browser defaults */
}

#bodycontent li ul li {
margin-top: 0;
}

/* gives margin-top equal to that of regular p */
#bodycontent .pbreak {
margin-top: 1em;
}

/* gives very small margin-top */
#bodycontent .smallbreak {
margin-top: .2em;
}

/* sub-p sized text */
#bodycontent .smalltext {
font-size: .8em;
}

/* sub-sub-p sized text */
#bodycontent .smallertext {
font-size: .7em;
}

/* sets a certain line-height */
#bodycontent .lineheight {
line-height: 1.8em;
}

/* wraps around given elements */
#bodycontent div.wrapper {
overflow: hidden; /* stretches wrapper around floats */
}

/* narrows element - use only on elements whose widths are parent-determined */
#bodycontent .compress {
padding: 0 50px;
}

/***************************************/
/* LINKS */

#bodycontent a:link {
color: #cfa568; /* same as header background color */
}

#bodycontent a:visited {
color: #cfa568;
}

#bodycontent a:hover {
color: #523025; /* same as navigation link color */
}

#bodycontent a:active {
color: #cfa568;
}

/***************************************/
/* COLUMNS */

/* right page column - to be meshed with leftcolumn */
#bodycontent div.rightcolumn {
width: 320px;
float: right;
}

#bodycontent div.leftcolumn {
width: 570px;
}

/* center page column */
#bodycontent div.centercolumn {
width: 570px;
margin: 0 auto;
}

/* right half-page column - to be meshed with left one */
#bodycontent div.rightcolumn.equal {
width: 380px;
float: right;
margin-right: 55px;
}

#bodycontent div.leftcolumn.equal {
width: 380px;
margin-left: 55px;
}

/* optional enlarging of rightcolumn.equal - to be meshed with enlarged left one */
#bodycontent div.rightcolumn.large {
width: 400px;
margin-right: 75px;
}

#bodycontent div.leftcolumn.large {
width: 400px;
margin-left: 0;
}

/***************************************/
/* HOME PAGE */

/* removes slogan text */
#bodycontent p.slogan span {
position: absolute;
top: -1000px;
}

#bodycontent p.slogan {
width: 500px;
height: 70px;
margin: 0 auto;
background-image: url('images/slogan.png'); /* inserts graphic to replace slogan text */
border-bottom: 1px solid #eeeeee;
}

/***************************************/
/* PRODUCTS */

/* contains group of no more than three products */
#bodycontent div.productgroup {
overflow: hidden; /* stretches productgroup around floats */
min-width: 380px; /* width of two products */
float: left;
margin-right: 65px;
}

/* used for single-product group that is next to three-product group */
#bodycontent div.productgroup.right {
margin-right: 0;
min-width: 250px; /* accommodates h3 graphic short */
}

#bodycontent div.product {
width: 172px;
float: left;
margin: 20px 9px 0 9px; /* margins center five products across page */
}

#bodycontent div.product h6 {
margin: 5px 0 0 8px;
}

#bodycontent div.product h6.center {
margin-left: 0;
text-align: center;
}

#bodycontent div.product p {
margin: 0;
font-size: .7em;
text-align: center;
}

/***************************************/
/* GALLERY */

#bodycontent.gallery {
padding: 0 0 10px 0; /* removes most padding from gallery bodycontent */
}

#bodycontent.gallery img {
display: block;
float: left;
margin: 40px 0 0 37px; /* left margin centers three images across page */
border: 2px solid #eeeeee;
}

#bodycontent.gallery img.vertical {
margin-left: 89px; /* adjusts centering for vertical images */
}

#bodycontent.gallery img.wide {
margin-left: 114px; /* adjusts centering for wide image (paired with vertical image) */
}

#bodycontent.gallery img.doublewide {
margin-left: 113px; /* adjusts centering for extra wide image single (not paired) */
}

/***************************************/
/* TECHNICAL INFO */

#warranty {
overflow: hidden; /* stretches warranty around floats */
width: 600px;
margin: 50px auto 0 auto;
padding-top: 20px;
border-top: 1px dotted #eeeeee;
}

#warranty p {
width: 450px;
float: right; /* makes way for warranty logo */
margin-top: .5em;
font-size: .7em;
}

/***************************************/
/* CONTACT */

#bodycontent div.distributor {
width: 180px;
padding-top: 10px; /* fake margin */
}

/* right column of distributors */
#bodycontent div.distributor.rightcolumn {
float: right;
}

#bodycontent div.distributor p {
font-size: .8em;
}

form.contact fieldset {
padding: 20px;
border: 1px solid #eeeeee;
}

form.contact legend {
padding: 0 7px;
font-size: 1em;
font-weight: bold;
color: #eeeeee; /* fixes IE7 default */
}

form.contact label {
float: left;
width: 110px; /* aligns input fields */
}

form.contact label.nofloat {
float: none;
}

form.contact input, form.contact textarea {
padding: 2px 0;
color: #222222; /* same as container background color */
font-size: .8em;
background-color: #eeeeee;
border: 1px solid #aaaaaa;
}

form.contact input {
width: 150px;
}

form.contact textarea {
width: 332px;
height: 120px;
padding: 2px 2px;
font-family: Geneva, "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* overrides some browser defaults */
}

form.contact input.submitbutton {
width: 100px;
height: 25px;
padding: 0; /* cancels padding for regular inputs */
background: transparent url('images/formbutton.png'); /* 2-part image for pressed or unpressed button */
border: none; /* cancels border for regular inputs */
}

form.contact input.submitbutton:active {
background-position: right top;
}

/* settings for mailer.php p */
#bodycontent p.contacted {
font-size: 1.3em;
text-align: center;
}




/*****************************************************************************/
/*
FOOTER SECTION
*/

/* footerspace saves space in container for footer */
#footer, #footerspace {
height: 15px; /* height is same as container bottom margin */
}

#footer {
width: 1000px;
margin: 0 auto; /* centers footer */
color: #eeeeee;
background-color: #222222; /* in case of discrepancies - same as container background color */
}

#footer p {
font-size: .6em;
text-align: center;
background-color: #222222; /* in case of discrepancies - same as container background color */
}