html{background:#247fa3}
body{margin:0; font:11px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Arial,Helvetica,sans-serif; color:#fff; background:url("/images/bg-page.jpg") no-repeat 50% 0 #001320; min-width:994px}
#recipes{background:#082940 url("/images/bg-recipes-page.jpg") no-repeat 50% 0}
#experience, #contact{background:#082940 url("/images/bg-experience-page.jpg") no-repeat 50% 0}
#drink-recipe{background:#082940 url("/images/bg-drink-recipe-page.jpg") no-repeat 50% 0}
#downloads{background:#082940 url("/images/bg-downloads-page.jpg") no-repeat 50% 0}
#join{background:#082940 url("/images/bg-downloads-page.jpg") no-repeat 50% 0}
.homepage{background:url("/images/bg-homepage.jpg") repeat-x 44% 0}

form, fieldset{border:0; margin:0; padding:0}
img{border:0}
a{color:#2f486a; text-decoration:none}
a:hover{text-decoration:underline}

#wrapper{width:995px; margin:0 auto; overflow:hidden; position:relative}
.inner{overflow:hidden; height:1%}
/* header */
#header{width:100%; position:absolute; left:0; top:0}
#header .inner{height:119px; background:url("/images/bg-header.png") no-repeat}
#header a{position:relative}
#header .logo{display:block; width:79px; height:15px; background:url("/images/logo.gif") no-repeat; margin:22px 0 0 32px; overflow:hidden; text-indent:-9999px}
#header .logo a{height:100%; display:block}
#menu{margin:11px 10px 0 0; display:inline; padding:0; list-style:none; float:right}
#menu li{float:left; margin:0;}
#menu a{display:block; height:34px; overflow:hidden; text-indent:-9999px}
#menu .join{width:113px; background:url("/images/bg-join.gif") no-repeat}
#menu .experience{width:167px; background:url("/images/bg-experience.gif") no-repeat}
#menu .recipes{width:68px; background:url("/images/bg-recipes.gif") no-repeat}
#menu .downloads{width:114px; background:url("/images/bg-downloads.gif") no-repeat}
#menu .boutique{width:89px; background:url("/images/bg-boutique.gif") no-repeat}
#menu .contact{width:110px; background:url("/images/bg-contact.gif") no-repeat}
#menu .win{width:110px; background:url("/images/bg-win.gif") no-repeat}
#menu .school{width:209px; background:url("/images/bg-school.gif") no-repeat}
#menu a:hover, #menu .active a{background-position:0 -36px}
/* main */
#main{overflow:hidden; width:100%; margin:75px 0 0; position:relative; z-index:3}
.page #main{margin:76px 0 0}
.homepage #main{margin:88px 0 0}
.homepage .flash-holder{margin:0}

/* content */
#content{height:960px; overflow:hidden}
.homepage #content{height:1%}
.page #content{height:982px}
#downloads #content{height:886px}

#content h1{margin:0; text-indent:-9999px}
#downloads #content h1{background:url("/images/downloads.png") no-repeat; height:72px; width:705px}
#experience #content h1{background:url("/images/hpnotiq-experience.png") no-repeat; height:72px; width:705px}
#contact #content h1{background:url("/images/contact-us-hd.png") no-repeat; height:72px; width:705px}
#recipes #content h1{background:url("/images/drink-recipes.png") no-repeat; float:left; height:72px; width:505px}
#drink-recipe #content h1{background:url("/images/drink-recipes.png") no-repeat; height:72px; width:505px}
#join #content h1{background:url("/images/join-hpnotiq.png") no-repeat; height:72px; width:505px}
h2.town-for-taking { background: url(/images/hd-town-for-taking.gif) 0 0 no-repeat; display: block; height: 89px; margin: 0 0 .5em 0; overflow: hidden; padding: 0; text-indent: -10000px; width: 500px; }

.top-nav{margin:34px 0 0; padding:0; list-style:none; float:right}
.top-nav li{float:left; margin:0 0 0 24px; display:inline}
.top-nav img{display:block}

#verify{background:#115370}
#verify #wrapper{background:url("/images/verify-back.jpg") top center no-repeat}
#verify h1.logo{background:url("/images/verify-logo.png") no-repeat; height:61px; margin:40px auto 20px auto; text-indent:-9999px; padding:0; width:409px}
#verify #main-content{background:url("/images/verify-main.jpg") no-repeat; height:560px; margin:20px auto 0px auto; padding:0; position:relative; width:959px}

#verify .enter-form{width:394px; overflow:hidden; background:url("/images/bg-enter-form.png") no-repeat; margin:0px auto 0 auto; padding:8px 13px 0 13px; text-align:center; font-size:14px}
#verify #form-position { padding-top:180px;}
#verify .enter-form p{ color:#fff; font-size:13px; margin:2px 0 4px 0;}
#verify .enter-form label{font-size:11px}
#verify .enter-form input, #verify .enter-form select{vertical-align:middle; position:relative}
#verify .enter-form select{margin:0px 10px 0 0}
#verify .enter-form input, .enter-form select{font:11px "Lucida Grande","Lucida Sans",Arial,sans-serif}
#verify .enter-form .text{background:#ccc; border:0; padding:3px 5px; width:37px}
#verify .btn-enter{margin:2px 0 0 0}
#verify #wrapper #footer{background:#115370;}
#verify #wrapper #footer .inner{background:url("/images/verify-footer.jpg") no-repeat #115370; margin:0; padding:38px 0 12px 0}
#verify #errors{background:url("/images/bg-error-trans.png"); left:170px; padding:12px; position:absolute; text-align:center; top:80px; text-align:left; width:602px}
#verify #errors h2{margin:0; padding:0}

#verify .enter-form div.country, #verify .enter-form div.birthday { float:left; margin:0 0 4px 8px; text-align:left; width:140px;}
#verify .enter-form div.country label, #verify .enter-form div.birthday label{ color:#ccc; display:block; margin:0 0 0px 0; }
#verify .enter-form div.birthday { margin-left:4px; width:230px; }
#verify .enter-form div.birthday p label{ display:inline; }


.content{overflow:hidden; height:100%; margin:25px 0 0}
.block{float:left; width:350px; margin:0 0 9px}
.block p{font-size:14px; line-height:20px}
.block .top{background:url("/images/bg-top.png") no-repeat; height:4px; overflow:hidden}
.block .center{background:url("/images/bg-block2.png") repeat; height:1%; overflow:hidden; padding:20px 28px}
.block .bottom{background:url("/images/bg-bottom.png") no-repeat; height:4px; overflow:hidden}

#experience #content{ height:989px;}
#experience .block, #join .block{width:570px}
#experience .block .top, #join .block .top{background-image:url("/images/bg-experience-top.png")}
#experience .block .bottom, #join .block .bottom{background-image:url("/images/bg-experience-bottom.png")}
#experience .block p.blue-la-la{background:url("/images/la-la.png") no-repeat; height:71px; text-indent:-9999px; width:204px}


#drink-recipe #content {height:886px;}
#drink-recipe h1 {color:#000; font-size:20px;margin:0; padding:0;}
#drink-recipe form {color:#000;}
#drink-recipe form ul{ list-style:none; margin:0; padding:0;}
#drink-recipe form ul label{ display:block; margin-top:15px;}
#drink-recipe form ul span{ color:#666;}
#drink-recipe #email-recipe p { color:#000; }

#recipe .center ul { margin:0px 0 10px 0;}
#recipe .center p { line-height:17px; margin:9px 0 10px 0;}


/* drink menu */
#closebtn { outline:0; }
#accordion, ul.nav{margin:-11px 0 0 10px; padding:0 0 4px 0; list-style:none; width:220px; overflow:hidden; }
#accordion h6 { text-transform:uppercase;}
#accordion div div { height:180px; display:none;}
#accordion div ul, #accordion div ul li{list-style:none; padding:0; margin:0;}
#accordion div div ul{ text-indent:0; padding:0; margin:0;}
#accordion div ul li a{display:block; border-bottom:1px dotted #23558F; font-size:13px; padding:6px; margin:0 0px 0px 0; outline:0; }
#accordion div ul li a:hover { color:#AFFFFF; }
#accordion .ui-accordion-content { padding:0;}
/*
ul.nav li{ border:solid #17253a; border-width:0 1px; background:#010812; float:left; width:202px; display:inline}
ul.nav li a{display:block; background:url("/images/bg-nav-bt.gif") no-repeat 0 100%; font-size:14px; line-height:20px; text-transform:uppercase; padding:8px 12px 6px; margin:0 0px 0px 0; position:relative; outline:0;}
ul.nav ul{margin:0; padding:0; list-style:none; }
ul.nav ul li, ul.nav .active ul li{border:solid #0e2544; border-width:1px 0 0; background:#041c3c; margin:0;}
ul.nav ul a, ul.nav .active ul a{background:none; margin:0; text-transform:none; color:#11b4d2; font-size:13px; padding:4px 12px; font-weight:normal}
ul.nav li.active{border-width:0 0 1px; margin:0 1px}
ul.nav .active a{background:#000101 url("/images/bg-hover.gif") no-repeat 0 100%; margin:0 0 -11px; color:#e6eeee; font-size:14px; font-weight:bold; padding:8px 12px 18px}
ul.nav .drink-list { height:200px; overflow:auto !important;}
*/
#downloads #content{ height:886px;}
#downloads .block{width:990px}
#downloads .block .top{background-image:url("/images/bg-downloads-top.png")}
#downloads .block .bottom{background-image:url("/images/bg-downloads-bottom.png")}
/*#downloads #inner-wrapper{border-bottom:1px dotted #7e8187; margin-bottom:20px}*/
#downloads .column-inner{float:left; width:510px}
#downloads .column-inner ul{list-style:none; margin:0px 0 0 20px; padding:20px 0 0 0; width:420px;}
#downloads .column-inner ul li{ display:inline; float:left; list-style:none;height:75px; margin:0 28px 28px 0; padding:0; position:relative; }
#downloads .column-inner ul li a{outline:0;}
#downloads .column-inner ul li img{border:4px solid #fff; position:relative}
#downloads #phone{width:400px}
#downloads #phone ul li a:hover img{border:4px solid #000;}

#downloads #desktop ul li a{background:url("/images/desktop-over-fourteen40.png") no-repeat; display:none; left:4px; height:24px; position:absolute; text-indent:-9999px; top:4px; width:98px; z-index:999}
#downloads #desktop ul li a.twelve80{background:url("/images/desktop-over-twelve80.png") no-repeat; }
#downloads #desktop ul li a.twelve80{background:url("/images/desktop-over-twelve80.png") no-repeat; top:28px;}
#downloads #desktop ul li a.ten24{background:url("/images/desktop-over-ten24.png") no-repeat; top:52px;}
#downloads #desktop ul li:hover a{display:block; }
#downloads #desktop ul li a:hover { background-color:#000;}

#downloads .block .column-inner h3{background-image:url("/images/for-your-desktop.png"); font-size:23px; height:54px; margin:0; text-indent:-9999px; width:358px}
#downloads .block #phone h3{background-image:url("/images/for-your-phone.png"); width:330px}
#downloads .block #phone ul li {height:128px;}

#downloads #share-this { background:url("/images/bg-block2.png") repeat; position:absolute; top:60px; right:5px; padding:9px 0; text-align:center; width:190px;	}
#downloads #share-this a { color:#fff;	}

/*#downloads #share{background:url("/images/downloads-share-back.png") no-repeat; height:62px; width:926px}*/

.block h2{font:normal 38px/34px Arial, Corbel, "Lucida Sans Unicode", "Lucida Grande", Helvetica, sans-serif; font-weight:lighter; margin:0; font-variant: small-caps;}
.block a{position:relative}
.drink{display:block; margin:0 auto 18px auto; top:20px; position:relative}
.holder{float:left; width:350px; margin:0 8px 0 11px; display:inline}
.list{margin:0; padding:0; list-style:none}
.list li{font-size:16px; line-height:23px}
.holder .block p{font-size:14px; margin:12px 0 0}
.link{display:block; margin:0 0 3px}
.holder .link{margin:0 0 3px -7px}
.link img{display:block}
.note{display:block; margin:-8px 0 0 5px; font-size:10px}
.narrow{width:273px}
.narrow .top{background:url("/images/bg-tnarrow.png") no-repeat}
.narrow .center{background:url("/images/bg-narrow.png") repeat-y; padding:7px 10px 21px}
.narrow .bottom{background:url("/images/bg-bnarrow.png") no-repeat}
.flash-holder{margin:13px 0 0; overflow:hidden; height:100%; position:relative}

.text-holder{position:absolute; right:0; bottom:0; width:663px; padding:0 10px 18px 15px; z-index:1000}
#content .text-holder h1{margin:0 0 0 -15px}
#content .text-holder img{display:block}

.text-holder p{font-size:13px; color:#99eef7; line-height:23px; margin:16px 0 0}

/* container */
.container{width:100%; background:#25728a url("/images/bg-container.jpg") repeat-x; margin:42px 0 0; padding:3px 0 0}
.container .inner{width:994px; margin:0 auto}
.box{float:left; margin:0 35px 0 0; display:inline}
.box p{line-height:18px; margin:7px 0 11px 0;}
.box .text{width:183px; float:left; overflow:hidden;}
.girl{float:left; margin:0 10px 0 0}
#drink-box.box{ margin:0; }
.box h2{margin:0; overflow:hidden; height:1%; left:-13px; position:relative}
.box h2 img{display:block}


/* footer */

#footer { margin: 0px auto; min-width:994px; text-align:center; width:100% }
#footer ul{ margin:0; padding:0px 0 0 0; list-style:none}
#footer ul a{ color:#d2edf3; }
#footer ul a:hover { color:#fff; }

#footer #footer-inner { background:url("/images/bg-footer-3.jpg") top center no-repeat; color:#87c5cf; height:80px; margin:0 auto; padding:20px 0 10px 0; text-align:left; width:940px; }
	#footer #footer-inner ul#site-info { float:left; text-align:right; margin:17px 15px 0 0; width:468px; }
	#footer #footer-inner ul#site-info li { display:block; float:right; padding-right:14px; }
	#footer #footer-inner ul#site-info li.copy{ clear:both; float:none; }
	#footer #footer-inner ul#site-info li.copy p{ margin:0; padding:8px 0 0 0;  }

#footer #footer-inner ul#footer-logos{ background:url("/images/hq-footer.png") no-repeat; float:left; padding:3px 0 0 0; width:420px; }
#footer #footer-inner ul#footer-logos li{ border-left:1px solid #438c9e; display:block; height:60px; float:left; }
#footer #footer-inner ul#footer-logos li.twdw { border:0; padding:7px 15px 0px 22px; }
#footer #footer-inner ul#footer-logos li.fb-fan { height:44px; padding:16px 20px 0px 20px; }
#footer #footer-inner ul#footer-logos li.blue-la-la { height:57px; padding:4px 20px 0 20px; }

#verify #footer #footer-inner, .homepage #footer #footer-inner { background:none;}
.homepage #footer { background:#25738a;}
#verify #footer { background:none;}

/*
#footer{ overflow:hidden; height:1%; color:#87c5cf; font-size:11px; text-align:right; padding:0px 0px 0px 0; margin:30px 0 15px 0; background:url("/images/bg-footer.png") no-repeat; }
#footer a{color:#d2edf3; position:relative}
#footer a:hover{color:#eee; text-decoration:underline;}
#footer ul{ margin:0; padding:0px; list-style:none}

#footer ul#footer-logos{ float:left; width:380px; }
#footer ul#footer-logos li{ border-left:1px solid #296884; display:block; height:49px; float:left; }
#footer ul#footer-logos li.hq-logo { border-right:1px solid #296884; height:57px; padding:10px 20px 0 20px; }
#footer ul#footer-logos li.twdw { height:53px; padding:14px 20px 0px 20px; }
#footer ul#footer-logos li.fb-fan { padding:18px 20px 0px 20px; }

#footer ul#site-info { float:left; text-align:right; margin:17px 15px 0 0; width:517px;}
#footer ul#site-info li{ display:block; float:right; padding-right:14px; }
#footer ul#site-info li.copy{ clear:both; float:none; }
#footer ul#site-info li.copy p{ margin:0; padding:4px 0 0 0;  }

#verify #footer { background:none;}
#verify #footer ul#footer-logos li, #verify #footer ul#footer-logos li.hq-logo{ border:0; }


*/














/*
#footer{ }
#footer .inner{width:970px; margin:0 auto; background:url("/images/bg-footer.jpg") no-repeat; text-align:right; padding:33px 12px 11px 0px}
#footer ul{margin:0; padding:27px 0 0 0; list-style:none}
#footer li{display:inline; margin:0 0 0 15px}
#footer .logo-bottom{float:right; margin:0 0 0 27px}
#footer .icon{float:right; margin:0px 60px 0 18px; padding-top:18px;}
#footer .inner p{margin:7px 0}
.homepage #footer{background:#256e82 url("/images/bg-footer-home.gif") repeat-x}
.homepage #footer .inner{background:none; padding:4px 12px 11px}
*/

#join form input[type="text"] { border:1px solid #fff; }
#join form input[type="text"]:focus { background:#59FFFF; }
#join #content { height:886px;}

#privacy{min-width:344px; line-height:16px; padding:30px; width:620px}
#privacy h2{font-size:25px; margin:28px 0 8px 0}
#privacy strong{font-weight:bold; font-size:14px}
#privacy a{color:#00C6F3}
#privacy p{margin:0px 0 15px 0}
#privacy #closing a{font-size:14px; font-weight:bold}
#privacy #foot{color:#666; border-top:2px solid #12405F; margin-top:30px; padding-top:10px}
#privacy #foot ul{margin:8px 0 0 0; padding:0}
#privacy #foot ul li{display:inline; margin-right:13px}
#privacy #head{margin-bottom:20px; overflow:hidden}

/* CLEAR FIX*/
.clearfix:after, #inner-wrapper:after, #downloads .column-inner ul:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix, #inner-wrapper{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix, * html #inner-wrapper{height:1%}
.clearfix, #inner-wrapper{display:block}
.required { color: #FF3F59; }
/* End hide from IE-mac */
