/* 
CSS Document for useyourpants.org
Site design by Chris Kennedy: ckladesign.com
*/

/* CSS reset by Eric Meyer: meyerweb.com */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot,thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: Helvetica, Arial, sans-serif;vertical-align: baseline;}

/* html elements */

html, body {margin: 0; padding: 0;}
html {background-color:#927749;}
body {background: #cde4e5 url(../site_grfx/gradient.jpg) top repeat-x; line-height: 1; }
h1, h2, h3, h4 {font-family: "Gill Sans", Helvetica, Arial, sans-serif; font-weight:normal;} 
p, ol, ul, li, a {font: 14px normal Helvetica, Arial, sans-serif; color:#444;}
ol, ul {margin-left: 22px;}
h1 {font-size: 32px;}
h2 {font-size: 26px;}
h3 {font-size: 22px;}
a:link, a:visited {color:#0084ff; text-decoration: underline;}
a:hover, a:active {color: #006666; text-decoration: none;}
em {font-style: italic;}
strong {font-weight: bold;}

/* classes */

.callout {font: 16px Helvetica, Arial, sans-serif; color: #1a6f3e;}
.lbutton {margin-left: 50px; padding-right: 150px;}

/* div elements */

#click {position:absolute; top: 0; left: 0; width: 200px; height: 181px;}
#div1 {margin: 0; padding: 0; width: 1000px; height: 213px; background: url(../site_grfx/pants_01.jpg) top center no-repeat;}
#div1 h1, #div1 h1 a {color: white; font-size: 40px; padding: 56px 0 0 204px; text-decoration: none;}
#div1 ul {position:absolute; width: 300px; top: 47px; left: 527px; text-align:right;}
#div1 li {list-style-type: none; display: inline; }
#div1 a {color: #d4e5bb; padding: 0 6px;}
#div1 a:link, #div1 a:visited {text-decoration: none;}
#div1 a:hover, #div1 a:active {text-decoration: none; color: #fff;}

#recycle {position:absolute; width: 20px; top: 41px; left: 854px;}


#div2 {margin: 0; padding: 0; width: 1000px; min-height: 245px; background: url(../site_grfx/pants_025.gif) top center repeat-y;}

#div2inner {margin: 0; padding: 0; width: 1000px; min-height: 245px; background: url(../site_grfx/pants_02.jpg) top center no-repeat;}
#div2inner h1, #div2inner h2, #div2inner h3 {padding: 4px 400px 5px 146px}
#div2inner p, #div2inner ul, #div2inner ol {padding: 8px 400px 5px 150px;}
#div2inner h1, #div2inner h2, #div2inner h3 {color: #ac7010;}

#div2buttons {padding: 10px 0 0 150px;}
#div2buttons img {padding-right: 40px;}


#div3 {margin: 0; padding: 0; width: 1000px; height: 40px; background: url(../site_grfx/pants_03.gif) top center no-repeat;}

#div4 {margin: 0; padding: 0; width: 1000px; min-height: 600px; background: url(../site_grfx/pants_045.gif) repeat-y;}

#div4inner {margin: 0; padding: 0; width: 1000px; min-height: 354px; background: url(../site_grfx/pants_04.gif) top center no-repeat;}
#div4inner h1, #div4inner h2, #div4inner h3 {padding: 8px 0 3px 0;}
#div4inner p, #div4inner ul, #div4inner ol {padding: 4px;}
#div4inner h1, #div4inner h2, #div4inner h3 {color: #ac7010;}


#div4left {float: left; width: 460px; padding: 4px 60px 4px 150px; }
#div4right {float: left; width: 205px; }
#div4right ul {margin-left: 12px;}
#div4right li, #div4right ul a {font-size: 12px; margin-top: 6px;}

#div5 {margin: 0; padding: 0; width: 1000px; height: 56px; background: url(../site_grfx/pants_05.gif) top center no-repeat;}

#div6 {margin: 0; padding: 12px 0 0 0; width: 1000px; min-height: 100px; background-color: #cde4e5; text-align: center;}
#div6 ul {color: #999; padding-bottom: 14px; padding-top: 10px;}
#div6 p {color: #777; padding-bottom: 6px;}
#div6 li {list-style-type: none; display: inline; }
#div6 ul a {color: #227947; padding: 0 14px; font-size: 16px; border-left: 1px solid green;}
#div6 ul a.off {border-left: none;}
#div6 a:link, #div6 a:visited {text-decoration: none;}
#div6 a:hover, #div6 a:active {text-decoration: underline; color: #7db26d;}

#div7 {width: 100%; height: 69px; background: url(../site_grfx/grass.jpg) bottom repeat-x; border-bottom: 5px solid #75aa68;}

/*guts pages */
#alt1 {margin: 0; padding: 0; width: 1000px; height: 213px; background: url(../site_grfx/alt_01.jpg) top center no-repeat;}
#alt1 h1, #alt1 h1 a {color: white; font-size: 40px; padding: 56px 0 0 204px; text-decoration: none;}
#alt1 ul {position:absolute; width: 300px; top: 47px; left: 527px; text-align:right;}
#alt1 li {list-style-type: none; display: inline; }
#alt1 a {color: #d4e5bb; padding: 0 6px;}
#alt1 a:link, #alt1 a:visited {text-decoration: none;}
#alt1 a:hover, #alt1 a:active {text-decoration: none; color: #fff;}

#alt2 {margin: 0; padding: 0; width: 1000px; min-height: 320px; background: url(../site_grfx/alt_025.gif) top center repeat-y;}
#alt2inner {margin: 0; padding: 12px 0 0 0; width: 1000px; min-height: 320px; background: url(../site_grfx/alt_02.jpg) top center no-repeat;}
#alt2inner h1, #alt2inner h2, #alt2inner h3 {padding: 4px 200px 5px 186px}
#alt2inner p, #alt2inner ul, #alt2inner ol {padding: 8px 200px 5px 190px;}
#alt2inner h1, #alt2inner h2, #alt2inner h3 {color: #ac7010;}

#alt2buttons {padding: 10px 0 0 150px;}
#alt2buttons img {padding-right: 40px;}

#alt3 {margin: 0; padding: 0; width: 1000px; height: 110px; background: url(../site_grfx/alt_03.gif) top center no-repeat;}

#alt4 {margin: 0; padding: 0; width: 1000px; min-height: 500px; background: ;}