/*-----Those Guys Stylesheet: Revised 11/18/10-----*/

/*-----style reset-----*/
html, body, div, span, h1, h2, h3, p, em, font, img, ol, ul, li, form, label, img{ margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}
:focus {outline: 0;}
ol, ul {list-style: none}

body {font: 62.5% arial, helvetica, verdana, sans-serif; text-align: center; margin: 0 auto; background: #CC0000 url(images/bkgd_gradient.jpg) repeat-x top left;}

#header{position: relative; text-align: left; width: 1072px; height: 139px; margin: 0 auto; margin-top: 26px; background: #fff url(images/header.jpg) no-repeat top center;}
.clear {clear: both;}

/*--------music player--------*/
object {position: absolute; top: 58px; left: 890px;}


/*--------secondary Page Backgrounds--------*/
#container2 {position: relative; text-align: left; width: 990px; height: 895px; margin: 0 auto; margin-top: 28px; background: #fff url(images/bkgd_container2.jpg) no-repeat top center;}

h1 {font-size: 3.1em; font-weight: bold; color: #fff; padding: 160px 0 7px 90px;}
h2 {font-size: 2em;font-weight: bold; color: #fff; padding: 10px 0 7px 96px;}
p {font-size: 1.6em; color: #ffffff; padding: 0 90px 10px 92px;}
a {color: #fff;}
a:hover {color: #000;}
span {font-size: 1.1em; font-weight: bold;}
.menutext ul {display: inline; list-style: none; font-size: 1.6em; color: #000000; font-weight: bold;}

/*--------navigation--------*/
#mainNav {position: absolute; top: 97px; left: 440px; width: 500px; height: 60px; text-align: left; font-size: 1.3em; font-weight: bold;} 
#mainNav a {color: #000000; text-decoration: none;}
#mainNav a:hover {color: #fff; text-decoration: none;}

/*--------access page--------*/
#containerAccess {position: relative; text-align: left; width: 802px; height: 566px; margin: 0 auto; margin-top: 72px; background: url(images/bkgd_access.jpg) no-repeat top center;}
#containerAccess p {font-size: 1.4em; padding: 0; font-weight: bold;}
#containerAccess p.age {position: absolute; top: 185px; right: 212px; width: 374px; height: 16px; background: url(images/age.gif) no-repeat top center;}
#containerAccess p.age span {display: none;}
#containerAccess .under21 {position: absolute; top: 260px; left: 141px; width: 208px; height: 102px; padding-top: 15px; text-align: center; background: url(images/bkgd_under21.gif) no-repeat top center;}
#containerAccess .over21 {position: absolute; top: 260px; right: 135px; width: 208px; height: 102px; padding-top: 15px; text-align: center; background: url(images/bkgd_over21.gif) no-repeat top center;}
#containerAccess .enter {margin-top: 15px;}


/*--------home page--------*/
#home_graphics {position: relative; text-align: left; width: 1072px; height: 631px; margin: 0 auto; background: url(images/bkgd_home.jpg) no-repeat top center;}

.text {width: 380px; height: 200px;  position: absolute; top: 16px; left: 95px; padding: 0;}
.text h1 {font-size: 3.1em; font-weight: bold; color: #fff; padding: 0px 0px 5px 0px; }
.text p {font-size: 1.6em; color: #ffffff; padding: 0px 0px 10px 0px;}
.shop p {font-size: 1.4em; position: absolute; top: 18px; left: 525px; height: 75px; width: 277px; padding: 42px 0px 10px 5px; background: url(images/img_buyheadline.gif) no-repeat top left;}

.btnVideo {display: block; overflow: hidden; position: absolute; top: 10px; right: 150px; margin: 0px 0 0 0px; width: 89px; height: 111px; background: url(images/btn_videos.gif) no-repeat top left;}
.btnVideo:hover {background: url(images/btn_videos.gif) no-repeat bottom left;}

.btnShop {display: block; overflow: hidden; position: absolute; top: 94px; right: 335px; margin: 10px 0 0 12px; width: 159px; height: 26px; background: url(images/btn_shop_now.gif) no-repeat top center;}
.btnShop:hover {background: url(images/btn_shop_now.gif) no-repeat bottom center;}
.btnShop p {position: relative; right: 2000px; padding: 0;}

.btnSurvey {display: block; overflow: hidden; position: absolute; top: 458px; right: 335px; margin: 10px 0 0 12px; width: 159px; height: 26px; background: url(images/btn_survey_click.gif) no-repeat top center;}
.btnSurvey:hover {background: url(images/btn_survey_click.gif) no-repeat bottom center;}
.btnSurvey p {position: relative; right: 2000px; padding: 0;}

.facebook {position: absolute; top: 494px; left: 352px; width: 34px; height: 34px; padding: 0px; margin: 0px;}
.youtube {position: absolute; top: 495px; left: 392px; width: 32px; height: 32px; padding: 0px; margin: 0px;}
.twitter {position: absolute; top: 495px; left: 430px; width: 33px; height: 33px; padding: 0px; margin: 0px;}

/*--------our story page & videos page--------*/
#container_wrap {position: relative; text-align: left; width: 1072px; margin: 0 auto; margin-top: 26px;}

#container3 {position: absolute; left: 60px; text-align: left; width: 887px; margin: 0 auto; margin-top: 0px; background: url(images/bkgd_container3.jpg) repeat-y top center;}
#container3 h1 {font-size: 3.1em; font-weight: bold; color: #fff; padding: 16px 95px 10px 95px;}
#container3 h2 {font-size: 1.8em; font-weight: bold; color: #fff; padding: 5px 95px 3px 95px;}
#container3 p {font-size: 1.5em; line-height: 1.3em; color: #ffffff; padding: 0px 95px 15px 95px;}
#container3 p.italic {font-style: italic; padding: 10px 95px 55px 350px;}


#container4 {padding: 0 150px 20px 0;}
.glass {display: block; overflow: hidden; position: absolute; top: 495px; right: 40px; margin: 10px 0 0 50px; width: 195px; height: 321px; background: url(images/img_beer_glass.gif) no-repeat top center;}

#videopage {position: relative; height: 1450px; }
#videopage p.indent {padding-left: 145px;}
#videopage p.disclaimer {font-size: 1.1em;}
#videopage h2 {padding-left: 145px; color: #111;}

#videopage img {position: absolute; top: 125px; left: 43px; width: 88px; height: 100px; margin: 0; padding: 0; }
#videoplayers {position: relative; width: 760px;}
#videoplayers h3 {font-size: 1.8em; font-weight: bold; color: #111; padding: 10px 0 7px 0px;}
#videoplayers p {font-size: 1.5em; line-height: 1.3em; color: #ffffff; padding: 0px 0px 0px 0px;}
#videoplayers p.disclaimer {font-size: 1.1em; padding: 0 0 15px 0;}
.videoplayer1 {position: absolute; top: 0px; left: 93px; height: 413px; width: 746px;}
.videoplayer2 {position: absolute; top: 480px; left: 93px; height: 500px; width: 746px;}

/*--------beer survey--------*/
.survey h1 {font-size: 1.7em; font-weight: bold; color: #fff; padding: 160px 0 7px 90px;}
.survey p {font-size: 1.3em; padding-bottom: 0;}
.share {position: absolute; top: 285px; right: 140px; background-color: #330000; padding: 15px 20px; text-align: center; border: 1px solid #999;}
.share p {font-size: 1.2em; font-weight: bold; padding: 0 0 2px 1px;}
p.return {position: absolute; top: 100px; right: 0px; font-size: 1.7em; text-align: right;}
p.return a {font-weight: bold;}
p.return span {font-size: .8em; font-weight: normal;}

form {margin: 15px 0 0 93px; }
form p {padding: 9px 0 0 0; font-weight: bold;}
form input, form select, form textarea {color: #000000;  padding: 0; margin: 2px 0 5px 0;}
form .radio {float: left; margin: 5px 5px 0 0; border: none;}
form .button {padding: 5px 0 0 0;}
form select {color: #000000;}
.formRight {position: absolute; top: 259px; right: 220px;}
form .formJoin {margin: 10px 30px 0 0; padding: 5px 30px 15px 30px; width: 230px; background-color: #550000; border: 1px solid #CC3333;}
form .formJoin p {font-weight: normal;}
.submitBtn input {margin-top: 20px; }
form .promo {position: absolute; top: 260px; right: 33px;}
.error {font-weight: bold; color: #00FFFF;}
.thankyou {position: absolute; top: 400px; left: 160px;}

/*------- Distributors Page --------*/

#wrapper2 {position: relative; text-align: left; width: 991px;margin: 0 auto;}

#webpromo {position: relative; background: #fff; width: 660px; height: 170px; margin: 0 auto; margin-bottom: 20px; margin-top: 5px; padding: 20px;}
#webpromo h2 {font-size: 1.6em; color: #410101; font-weight: bold; padding: 0 0 4px 0;}
#webpromo p {font-size: 1.6em; color: #410101; padding: 0 0 12px 0;}
#webpromo span {font-weight: bold;}

.distributors h1 {color: #fff;margin: 20px 0px;clear: left;}
.distributors h2 {color: #fff;}
.distributors p {color: #fff;}
.distributors a {color: #fff;}
.distributors a:hover {color: #000;}

#state_list {margin: 0 0 20px 50px;height: 375px; }
#state_list h3 {margin: 40px 0 20px;}
#state_list ul {float: left; margin: 0 40px 0 48px;list-style-type: none;}
#state_list ul li {padding-bottom: 0.5em; background-color: transparent;}
#state_list ul a {color: #fff;}
#state_list ul a:hover {color: #000;}
#state_list ul.last {margin-right: 0;}

/*------- Art Files Page --------*/

#artfiles{position: relative; text-align: left; width: 700px; margin: 0 auto; margin-bottom: 30px; background: #fff; padding: 0px;}

.arttable table {width: 680px; margin: 0 auto;}
.arttable td {font-size: 1.3em; color: #410101; padding: 10px 10px 10px 10px;}
.arttable a {color: #410101; text-decoration: underline;}
.arttable a:hover {color: red;}


/*--------footer--------*/
#footer {position: absolute; top: 563px; left: 192px;}
#footer p {color: #410101; font-size: 1em; line-height: 1.5em;}
#footer a {color: #410101; text-decoration: none;}
#footer a:hover {color: #fff; text-decoration: none;}

#footer2 {position: absolute; top: 820px; left: 0px;}
#footer2 p {color: #410101; font-size: 1em; line-height: 1.5em;}
#footer2 a {color: #410101; text-decoration: none;}
#footer2 a:hover {color: #fff; text-decoration: none;}

#footer3 {position: absolute; bottom: 0px; width: 887px; height: 26px; margin: 0 auto; margin-top: 0px; background: url(images/curved_bottom.jpg) no-repeat top center;}
#footer3 p {color: #410101; font-size: 1em; line-height: 1.5em; padding: 40px 0 20px 100px;}
#footer3 a {color: #410101; text-decoration: none;}
#footer3 a:hover {color: #fff; text-decoration: none;}

#footer4 {position: absolute; top: 550px; left: 47px;}
#footer4 p {color: #410101; font-size: 1em; line-height: 1.1em;}
#footer4 a {color: #410101;}
#footer4 a:hover {color: #fff; text-decoration: none;}