@charset "utf-8";
/* CSS Document */
/* green: 96bc00  orange: ff8827  lightblue: caebe7  blue:#21A0C8 */


html { height:100%;  box-sizing:border-box; }

*,*:before,*:after {
  box-sizing: inherit;
}
a { text-decoration: none; color:#21a0c8; }
a img { border:none; }


body,html { margin:0; padding:0; }
body{
 background-color:#ffffff;
 color:#565656;	
 font-family:"Lato","sans-serif";
 font-size:16px;
 min-height:100%;
 position:relative;	
 padding-bottom:85px;	

}
h1,h2,h3,h4{ font-family:"Patua One"; font-weight:normal;}


.buttons{
 position:absolute;
 z-index:2;
 right:0px; top:5px; 
 font-family:"Patua One";	
}
.buttons a{
  margin-right:3px;
  text-decoration:none;
  color:#FFFFFF;
  font-size:.8em;	
  padding:3px 10px;	
  border-radius:4px;	
}
.buttons a:hover { border:1px solid #FFFFFF; }
.buttons .login-btn{
  background-color:#96bc00;
  border:1px solid #96bc00;	
}
.buttons .signup-btn{
  border:1px solid rgba(255,255,255,.5);		
}





#main-nav{
 border-top:5px solid #9C4600;	
 background-color:#ff8827;
 box-sizing:border-box; 
 text-align:right;	
 position:fixed;
 bottom:0px; left:0px;	
 width:100%;	
 z-index:10;
 font-size:1.5em;	
}

#main-nav ul.horiz>li{ 
 color:#ff8827;	
 font-family: "Lato";
 font-size:1.3em;	 
 text-align:center;	
}
#main-nav ul.horiz>li a{
  text-decoration:none;
  display:block;	
  padding:10px 15px 10px 15px;		
  color:#9C4600;  
}
#main-nav ul.horiz>li a:hover{
  color:#DF6502;
}
#main-nav ul.horiz li a.menu{
  background-color: #F86F00;
}


#main-nav .nav-logo{ 
 display:block; 
 text-decoration:none;	 
 position:absolute;
 left:1px;
 bottom:10px;	
}
#main-nav .nav-logo img{
 max-width:170px;	
}

#main-nav ul.horiz>li a span{
 display:block;	
 text-align:center;
 font-size:.3em;	
 font-weight:700;	 
}

#popupnav ul>li a.current{
   background-color:#21A0C8;	
}

#main-nav ul.horiz>li a.current{ /* mark current section in nav */
    background-color:#21A0C8; 
    color:#FFFFFF;	
   }	


.notloggedin .loggedin,
.notloggedin #main-nav ul>li a.loggedin{
 display:none !important; 	
}
.loggedin .notloggedin,
.loggedin #main-nav ul>li a.notloggedin{
 display:none; 	
}
.notloggedin #login-status { display:none !important; }


#popupnav{
 width:100%; 
 display:none;	
 background-color:#9C4600;
 padding-bottom:4px;
 font-size:.6em;	
}
#popupnav ul{
 margin:0; padding:0;
 list-style:none;	
}
#popupnav ul>li a{
 display:block;
 padding:5px 8px 5px 0px;
 text-decoration: none;	
 color:#FFFFFF;
 font-weight:700;
 text-align:right;	
 border-bottom:2px solid #9C4600;
}
#popupnav ul>li a:hover, #popupnav ul>li a:active{
 background-color:#C35902;	
}


#popupnav .login-btn span{
 background-color:#96bc00;	
 padding:4px 10px;
 border-radius:10px;
 
}
#modal{
 position:fixed;
 top:0px; left:0px;
 width:100%; height:100%;
 background-color:rgba(0,0,0,.8);
 z-index:4; 
 display:none;	
}


ul.horiz {
 list-style:none;
 margin:0; padding:0;		
}
ul.horiz>li{
 display:block;
 float:right;	
}



.fixedwidth{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  position:relative;
  box-sizing:border-box;	
}
.bodytext{
  font-size:1.2em;
  line-height:1.4em;		
  color:#777777;  
  background-color:#FFFFFF;	
}
.bodytext p{
  margin:10px 0px;	
  
}
.bodytext h3{
  color:#ff8827;
  font-size:1.5em;	
  margin:10px 0px 2px 0px;	
}

.padded { padding:15px; }
.padded5 {padding:5px; }
.home-top { overflow:hidden; }

#header{
 background-image: url(/images/header_float_bg.jpg);
 background-repeat: no-repeat; 
 background-position: top center;
 background-size: cover;
 position:relative;
	
 background-color:#73300F;
}
#header .breakout-img{
  width:40%;
  max-width:330px; height:auto;	
  display:block;
  position:absolute;
  z-index:2;
  right:20px;
  bottom:-10%;
  transition-duration: .5s;	
}
#header #mobile-img{
  display:none;	
}


#header #home-title{
 padding:0; margin:0;	
 position:relative;
 padding-top:250px;
 padding-bottom:50px;	
}
#header h1{
  color:#FFFFFF;
  font-size:3.4em;	
  line-height:0.9em;	
  margin:0; padding:0 0 5px 0px;	
}
h1 span{
  color:#FFE1C4;
}
#header h2{
 display:block;	 
 width:90%;	
 font-family:"Lato","sans-serif";
 font-weight:400;
 font-size:1.4em;
 color:#5d8984;
 margin:0;	
 box-sizing:border-box;	
 background-color:#caebe7;	
 padding:5px 10px;
 border-radius:10px;	
}

#header .fadestrip{
  width:100%;
  position: absolute;
  left:0; bottom:0;
  height:30px;
  background-color:rgba(150,188,0,0.60);	
}
.button {
  display:inline-block;
  border-radius:20px;
  background-color:#96bc00;
  padding:2px 22px;	
  line-height:1.4em;	
  text-decoration: none;
  font-family:"Patua One";	
  color:#FFFFFF; 	
}
.button:hover{
  background-color:#ff8827; 	
}

#features{
  /*background-image: url(/images/limebg.png);
  background-size:150px;	*/
  background-color:#caebe7;		
}
#features .fixedwidth{
  min-height:150px;	
  color:#668481;		
}
#features h2{
 margin:0; 	padding:0;
 
}

#footer{
  background-color:#96bc00;	
  position: absolute;
  bottom:0px;
  left:0px;
  min-height:90px;	
  width:100%;	
}
#footer .fixedwidth{
  position:relative;
  z-index:3;
  padding-top:35px;	
  min-height:220px;	
}
.credits { text-align:center; color:#CCCCCC; font-family:"Patua One"; font-size:.65em; padding:6px 5px 12px 5px; }
/* ######################################################################################## */
#login-screen{
  display:none;	
  position:fixed;
  z-index:11;
  left:0px; top:0px;
  width:100%;    
}
#login-panel{
 width:96%; margin:80px auto 0px auto; 
 max-width:500px;	
 padding:5px 5px 20px 5px;
 border-radius:8px;	
 background-color:#FFFFFF;	
}
#login-panel h3{
 font-size:2.0em;	
 margin:0;	
 /*background-image: url(/images/header_float_bg.jpg);
 background-repeat: no-repeat;
 background-position: top center;
 background-size: cover;*/
 position:relative;
 background-color:#ff8827;	
 color:#FFFFFF;	
 padding:6px;		
 border-radius:6px;	
}
#login-panel form{ position:relative; }

#login-panel ul{
 margin:0; padding:12px 0 0 0; list-style:none;		
}
#login-panel ul li{
 padding-bottom:8px;
 text-align:center; 	
}
#login-panel ul input[type="text"], #login-panel ul input[type="password"]{
 width:85%;
 max-width:300px;	
 border-radius:0; 
 background-color:#FFFFFF;
 padding:6px;
 border: 1px solid #DEDEDE;	
}
.submitbutton,
#login-panel input#forgotpass,
#login-panel input#submit-login{
  background-color:#96bc00;
  color:#FFFFFF;	
  border:none;
  padding:5px 10px;
  border-radius:10px;
  font-family:"Patua One";
  text-align: center;
  width:130px;
  display:block; margin:0 auto;
  outline:none;	
}
.submitbutton:hover,
#login-panel input#submit-login:hover{ background-color:#ff8827; }

.submitbutton:disabled{
  background-color:#DDDDDD; 
}
#secretlime { font-size:2.2em; color:#96bc00;  vertical-align:middle; padding-left:10px; }
.robottest { color:#787878; text-align:center;  }

.error-msg{ display:none; color:#D4272A; text-align: center; padding:8px 0px; }

.loading-modal{
  position:absolute;
  z-index:2;
  top:0px; left:0px;
  width:100%; height:100%;
  background-color:rgba(255,255,255,.7);
  pointer-events: none;
  text-align: right;	
  display:none;	  	
}
.loading-modal span{
  display:inline-block;	
  animation: spin 1s linear infinite;
  font-family:"icomoon"; color:#96bc00;   
  font-size:1.3em;	line-height:1.3em;
  padding:3px;	
}
.loading-modal span:before { content:"\e902"; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#login-panel ul li .icon{ padding-right:10px; color:#ABABAB; }

.note { text-align:center; font-size:.8em; color:#ababab; padding:6px 0px; }
.note a { text-decoration: none; color:#21A0C8; }

/*########################SUBPAGE ########################################################### */
h1.pagetitle{
 color:#FFFFFF;
 background-image:url(/images/cocktailbg.png);
 background-repeat:repeat;
 background-size:150px;
 background-color:#9C4600;	 
 margin:0; padding:40px 80px 20px 40px;
 text-align: right;
 position:relative;
 /*overflow:hidden;	*/
}
h1.pagetitle i{
 position:absolute;
 display:none; 
 right:0px;
 top:0px;	
 color:#9C4600;
 font-size:1.0em;
 padding:0px 15px;
 font-style:normal;	
 font-family:"icomoon"; 
 text-align:center;
 background-color:rgba(255,136,39,0.70);
 height:100%;
 vertical-align:middle;	
 line-height: 2.2em;	
}
h1.pagetitle a{
 display:block;
 position:absolute;
 left:0px;
 bottom:-33px;	
 z-index:2;
 text-decoration:none;	
 /*height:100%; 	
 color:rgba(47,13,0,0.58);
 font-size:3.6em;	*/
}
h1.pagetitle a img{
  max-width:240px;
  height:auto;	
}

.drinks h1.pagetitle i:before{ content: "\e901"; }
.bar h1.pagetitle i:before{ content: "\e902"; }
.profile h1.pagetitle i:before{ content: "\e90a"; }
.about h1.pagetitle i:before{ content: "\e903"; }
.books h1.pagetitle i:before{ content: "\e905"; }
.register h1.pagetitle i:before{ content: "\e904"; }


.home h1.pagetitle{ display:none; } /*don't show page title on homepage */
#login-status{ 
	font-size:1.5em; 
    width:40px; height:40px;	
	border-radius:50%;
	font-family:"Patua One";
	color:#FFFFFF;
	display:block;
	position:absolute;
    text-align:center;
    background-color:#ff8827;		
	z-index:2;
	line-height:1.5em;
	border:2px solid #FFFFFF;
    right:3px; top:3px;	
    text-decoration:none;	
}

/* ######################################################################################## */
/* REGISTRATION PAGE ##############################################*/
#register-form{ 
 max-width:400px;
 margin:0 auto;
 position:relative;
}
#register-form ul{
 list-style:none;
 margin:0; padding:0;	
 
}
#register-form ul li{    
  padding:10px;
  margin-bottom:10px;
  /*border-bottom:1px solid #DEDEDE;	*/
}
#register-form .note{
 text-align:left;	
}
#register-form #website { display:none; } /* catch form spam */
#register-form h4{ margin:0; color:#ff8827; }
#register-form ul li input[type="text"],
#register-form ul li input[type="password"]
{ display:block;
  max-width:400px;
  width:100%;	
  padding:7px; border-radius:20px;
  border:1px solid #BCBCBC;
  margin-bottom:10px;	
}
/* ######################################################################################## */
#contact-form ul{ list-style:none; margin:0; padding:0;  max-width:600px; width:100%; }
#contact-form ul li{ padding-bottom:10px; }
#contact-form ul h4{ margin:0; padding:0; padding-bottom:5px; color:#ff8827;  }
#contact-form ul textarea, #contact-form ul input[type="text"]{ padding:10px; border:1px solid #DEDEDE; border-radius:20px; width:100%; outline:none; }
#contact-success { display:none; }


/* ######################################################################################## */
.user-profile{ 
 width:100%;  
 font-family:"Patua One"; 
 position: relative; 
 /*background-image:url(../images/limebg.png);*/
 background-repeat:repeat;
 background-color:#96bc00;	
 /*background-position: top center;*/
 background-size:180px;
 padding:20px 6px 10px 6px;	
}
.user-profile .fixedwidth{
  max-width:400px;	
  background-color:rgba(255,255,255,.65);
  padding:10px;
  border-radius:10px;	
}

.profile-icon {
 color:#FFFFFF;
 background-color:#ff8827;
 font-size:2.0em;
 width:60px; height:60px;
 border-radius:50%;
 text-align:center;
 line-height:1.7em;	
 margin:0 auto;	
 border:4px solid #FFFFFF;	
 position:relative;	
 margin-top:-25px;	
 font-family:"Patua One"; 	
}
.profile-name{
  text-align: center;
  font-size:1.6em;  
}
.profile-location{
   text-align:center;
   font-size:1.0em;
   color:#617A00;
   font-style:italic;	
}



.profile-date{
 text-align:center;
 padding-top:10px;
 font-size:.9em;
 color:#606060;	
 width:50%;
 float:left;	
}

.profile-date span{
 display:block; text-align:center;
 font-size:.9em;
 color:#739000;
}
.profile-stats.horiz { max-width:400px; display:block; margin:10px auto 0px auto; padding:12px 0px; background-color: #F8F8F8; border-radius:10px;}
.profile-stats li{
 width:48%;	
 text-align:center;
 font-size:2.0em;	
}
.profile-stats li span{
  display:block; text-align:center;
  font-size:.4em;
  color:#739000;	
}
.account-settings{
 margin:0; padding:0; list-style:none;	
 font-size:.9em;	
 padding-left:8px;	
}
.account-settings li{
  padding:13px 0px;
  position:relative;	
  /*border-top:1px solid #dedede;	*/
}
.account-settings label{
  font-family:"Patua One";	
  width:100px;
  display:inline-block;
  text-align:left;
  color:#787878;	
}
.account-settings label span{
 display:inline-block;	
 width:20px;
 color:#21A0C8;
 vertical-align:middle;	
}
.account-settings input{
  padding:5px;
  border:none;
  border-bottom:1px dotted #ababab;	
  outline:none;	
  width:60%;
}
.account-settings input:focus{
   border-radius:10px; border:1px solid #ABABAB;	
}
.account-settings input:focus + .acct-submit{
  display:inline-block;	
}

.acct-submit{
  display:inline-block;	
  font-size:1.6em;
  text-decoration: none;
  color:#96bc00;
  vertical-align:middle;	
}
.acct-submit:hover{ color:#ff8827; }

ul.book-list{
 list-style:none; margin:0; padding:0;	
}
ul.book-list li{
  margin-bottom:4px;
  font-family:"Patua One";
  position:relative;	
}
ul.book-list li a.book{
 display:inline-block;
 text-decoration:none;
 border-radius:20px;
 padding:5px;	
 background-color:#F7FFCD;	
 color:#627B00;
 border:1px solid #DEDEDE;	
 overflow:hidden;
 text-overflow: ellipsis;
 width:80%;
 white-space: nowrap;	
}
ul.book-list li a.book span{ 
 font-family: "icomoon";	
 padding-right:10px;
 font-size:1.2em;
 vertical-align:middle;	
}
ul.book-list li a.book span:before{
 content: "\e90c";
 color:#96bc00;
}
ul.book-list li a.bookoff span:before{
 content: "\e90b";
 color:#DEDEDE;
}
ul.book-list .groglink{ 
	display:inline-block;
	font-weight:400;
	font-family:"Lato";
	font-size:.9em;
	vertical-align:top;
	padding:6px;
  	color:#EDB07F; border:1px solid #EDB07F; border-radius:20px; 
}
ul.book-list .groglink:hover{  background-color:#EDB07F; color:#FFFFFF; border:1px solid #EDB07F;  }


ul.book-list li a.bookoff{
  color:#DEDEDE;	
  background-color: #FFFFFF;
}
ul.book-list li a.bookoff:hover,ul.book-list li a:hover{ border-color:#9a9a9a; }

.col h3{ margin:0; text-align:center;  }
.col{ position:relative; float:left; width:50%; }
.account-settings .loading-modal{
  background-position:right;	
}
.account-settings .error-msg{
  font-size:.8em;	
}
/* ######################################################################################## */
/* MY BAR PAGE */
.ingredient-list{
 list-style:none;
 margin:0; padding:0;
 display:none;	
}
.ingredient-list.active{ display:block; }
.ingredient-list li{  
  border-bottom:2px solid #E0EBB7;
  margin-bottom:4px;	
  position:relative;	
}
.ingredient-list li a.ing{
  display:block;
  padding:6px;
  text-decoration:none;
  color:#676767;  
  white-space:nowrap;	
  overflow:hidden;	
}
/*.ingredient-list li a.ing:hover{
 opacity:.5;	
}*/
.ingredient-list .loading-modal { text-align:left; }
.ingredient-list .ing-name { 
  display:inline-block;
  font-family:"Patua One";
  font-size:1.0em; color:#DEDEDE;
  white-space: nowrap; overflow:hidden;
  vertical-align:middle;	
  text-overflow: ellipsis;  }

.ingredient-list .stocked .ing-name { color:#878787; }
.ingredient-list .icon { display:inline-block; text-decoration:None; font-family:"icomoon"; font-size:1.2em; margin-right:6px; vertical-align:middle;  }
.ingredient-list .icon:before { content: "\e90b"; color:#DEDEDE; }
.ingredient-list .stocked .icon:before { content: "\e90c"; color:#96bc00; }
.ingredient-list .ing-moreinfo { 
 font-size:.8em; color:#898989;
 background-color:#FFFFFF;	
 position:absolute;
 top:3px;	
 right: 0px;
 padding:6px 6px 0px 6px;
 font-weight:400; 
} 	
.ingredient-list .ing-moreinfo .ing-count{
  text-decoration:none; color:#EDB07F; border:1px solid #EDB07F;vertical-align:middle;  border-radius:10px; padding:2px 6px;
}
.ingredient-list .ing-moreinfo .ing-count:hover{ color:#FFFFFF; background-color:#EDB07F;	}

.ingredient-list .ing-moreinfo .ing-purchaselink{
  text-decoration:none; color:#21A0C8; font-size:1.6em; vertical-align:middle; padding-right:6px;
}
.ingredient-list .ing-moreinfo .ing-purchaselink:hover{ color:#3BC0E9; }

#ing-tabs{ padding-bottom:20px; width:100%; z-index:3; }
#ing-tabs ul{ width:100%; background-color:#FFFFFF; box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.20);	}

#ing-tabs ul li{  width:25%; 	}
#ing-tabs ul li a{
  display:block;
  width:100%;
  text-align:center;
  text-decoration: none;
  font-family:"Patua One";
  background-color:#ffffff;	
  padding:10px 0px 10px 0px;
  color:#787878;
  position:relative;
  border-bottom:6px solid #898989;
}
#ing-tabs ul li a.active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 18px;
	margin-left: -18px;
	border-color: rgba(255, 0, 0, 0);
}


#ing-tabs ul li.J a{ border-bottom:6px solid #CAE36D; }
#ing-tabs ul li.J a.active:after{ border-top-color: #CAE36D; }

.blurb{  font-size:1.0em; background-color:#FFFFFF; padding:35px 10px 5px 10px; text-align:center; color:#787878; }
.blurb p{ padding:0; margin:4px 0px; }
.blurb h4{ font-size:1.6em; margin:0; padding:0; color:#ff8827; }

.ingredients { }
.ingredients .ingredient-list.J li { border-color: #E4F79F; }
.ingredient-list.J .stocked .icon:before { color:#CAE36D; }

#ing-tabs ul li.M a{ border-bottom:6px solid #FF8E5B; }
#ing-tabs ul li.M a:after{ border-top-color: #FF8E5B; }
.ingredients .ingredient-list.M li { border-color: #FFDACA; }
.ingredient-list.M .stocked .icon:before { color:#FF8E5B; }

#ing-tabs ul li.L a{ border-bottom:6px solid #977A6D; }
#ing-tabs ul li.L a:after{ border-top-color: #977A6D; }
.ingredients .ingredient-list.L li { border-color: #E7D8D1; }
.ingredient-list.L .stocked .icon:before { color:#977A6D; }

#ing-tabs ul li.Q a{ border-bottom:6px solid #678EB8; }
#ing-tabs ul li.Q a:after{ border-top-color: #678EB8; }
.ingredients .ingredient-list.Q li { border-color: #C9DCF1; }
.ingredient-list.Q .stocked .icon:before { color:#678EB8; }

#fixed-top { position:fixed; top:0; left:0; z-index:3; width:100%;}
/* ######################################################################################## */
#alphanumeric-list{
 list-style:none;
 padding:0; margin:0;
 margin-top:10px;	
 position:fixed;	
 right:-30px;
 top:0px;
 z-index:2;	
 font-size:.7em;
 transition:all .5s ease;
 display:none;	
}
#alphanumeric-list li a{
 display:block;	
 text-decoration:none;
 text-align:left;	
}
#alphanumeric-list li a:hover{
 font-size:1.3em;	
}
#alphanumeric-list.on{
 display:block;
 right:10px;	
}


/* ######################################################################################## */
#drink-list { list-style:none; margin:0; padding:0; padding-top:10px; }
#drink-list li{ 
	margin-bottom:5px; position:relative;
	background-color:#ffffff; font-size:1.0em;
	padding:3px 0px; 
	cursor: pointer;
    display:none;	
	border-bottom:4px solid #fff8f3;
}

#drink-list .drink-name{ font-family:"Patua One"; color:#787878; font-size:1.1em; }
#drink-list .creator { font-size:.7em; color:#BCBCBC; }
#drink-list .drink-avgrating {
  float:right;  
  background-color:#F86E71;
  color:#FFFFFF;
  width:8%;
  text-align:center;  
  font-size:1.6em; 
  font-family:"Patua One";
  line-height:.8em;
  position:relative;
  padding-top:11px;	
  border-radius:4px;	
}
#drink-list .drink-avgrating span{ display:block; font-size:.40em; color:#FFD8D9; }

#drink-list li[data-diff='0'] .drink-avgrating { background-color:#66B130; } #drink-list li[data-diff='0'] .drink-avgrating span { color:#D6FFB8; }
#drink-list li[data-diff='1'] .drink-avgrating, #drink-list li[data-diff='2'] .drink-avgrating { background-color:#E1D13E; } 
#drink-list li[data-diff='1'] .drink-avgrating span, #drink-list li[data-diff='2'] .drink-avgrating span { color:#FFF9C3; }

#drink-list li .hilite {  
    display:none;
	position:absolute; width:100%; height:100%;
	left:0; top:0; background-color:rgba(255,255,255,.6);
	z-index:2; pointer-events: none; 
    box-sizing:border-box;
    
}


#drink-list .drink-stats { font-size:.7em; padding-top:3px;   }
#drink-list .drink-stats .comments {color:#21A0C8; }
#drink-list .drink-stats div { display:inline-block; vertical-align:middle; }
#drink-list .drink-stats .comments.comm-0 {color:#DEDEDE; }
#drink-list .drink-stats .comments:before{ 
 font-family:"icomoon";
 content: "\e90e";	
 vertical-align:bottom;	
 padding-right:2px;	
}
#drink-list .drink-stats .recipe { padding-left:10px; color:#ff8827; }
#drink-list .drink-info { padding:0px 8px; float:right; width:92%; position:relative; }
.my-rating span{ color:#9a9a9a; font-size:.8em; padding-right:5px; }
.my-rating span b { font-weight:normal; vertical-align:middle; padding-right:4px; font-size:.9em; }
.my-rating i { font-family:"icomoon"; color:#96bc00; text-decoration:none; font-style:normal; vertical-align:middle; }
.my-rating i.rating-1:before{ content: "\e915 \e916 \e916 \e916 \e916 \e916 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-2:before{ content: "\e915 \e915 \e916 \e916 \e916 \e916 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-3:before{ content: "\e915 \e915 \e915 \e916 \e916 \e916 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-4:before{ content: "\e915 \e915 \e915 \e915 \e916 \e916 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-5:before{ content: "\e915 \e915 \e915 \e915 \e915 \e916 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-6:before{ content: "\e915 \e915 \e915 \e915 \e915 \e915 \e916 \e916 \e916 \e916"; }
.my-rating i.rating-7:before{ content: "\e915 \e915 \e915 \e915 \e915 \e915 \e915 \e916 \e916 \e916"; }
.my-rating i.rating-8:before{ content: "\e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915 \e916 \e916"; }
.my-rating i.rating-9:before{ content: "\e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915 \e916"; }
.my-rating i.rating-10:before{ content: "\e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915 \e915"; }

#drink-nav{ 	 
 background-color: #F6F6F6; 
 box-shadow: 0px 4px 0px 1px rgba(0,0,0,0.20);	
 color:#787878;	
}
#drink-nav a { text-decoration:none; color:#787878; font-size:1.5em; }
#drink-nav a:hover { color:#989898; }
#drink-nav #drink-settings{ position:absolute; right:5px;}
#drink-nav .list-stats { display:inline-block; font-family:"Patua One"; font-size:1.0em; color:#9a9a9a; padding-top:6px; }

#drink-nav #special-filter{
  text-align:center;	
  display:none;	
  padding:4px 0px;
}
#drink-nav #special-filter div{
  display:inline-block;
  background-color:#ff8827;
  color:#FFFFFF;	
  border-radius:15px;	
  padding:2px 2px 2px 8px;	   
  vertical-align:middle;
}
#drink-nav #special-filter div span{ 
 display:inline-block; padding-top:0px; font-size:.9em; font-family:"Patua One"; vertical-align: middle; 
 max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;
}
#drink-nav #special-filter div a{
  text-decoration: none;
  color:#FFFFFF;	  
  vertical-align:middle;
  margin-left:10px;	
}

#drink-settingspanel{
  display:none;
  background-color:#DEDEDE;
  width:100%;
}
#drink-settingspanel h5{
 margin:0 ;
 font-size:.9em;
 font-family:"Patua One";	
 font-weight:normal; 
 position: absolute;
 top:-20px; left:0px;	width:300px;
}
#drink-settingspanel ul{
 list-style:none; margin:0; padding:0;	
 padding-top:24px;	
 float:right;	
}
.sort-list li { display:inline-block;  vertical-align:middle; padding-right:6px; position:relative; }
.sort-list label > input { visibility: hidden; position:absolute; }
.sort-list label > input + i{ 
	cursor:pointer;  padding:0px; display:block; 
	width:40px; height:40px; border:3px solid #EDEDED;
	color:#BCBCBC;
	border-radius:6px; text-align:center;   
	font-size:1.8em;
	line-height:1.2em;
}
.sort-list label > input:checked + i { background-color:#96bc00; border-color:#96bc00; color:#FFFFFF;  }
.sort-title span { font-style:italic; color:#7E9E00; }

.sort-list .filter label > input:checked + i { background-color:#21A0C8; border-color:#21A0C8;   }

#drink-panel{ 
  display:none;	
  background-color:#FFFFFF;
  position:fixed;
  top:0px; right:-100%;
  width:100%;
  max-width:600px;	
  padding:0px;	
  z-index:3;
  height:100%;  
  -webkit-box-shadow: -6px 0px 5px 0px rgba(0,0,0,0.31);
  -moz-box-shadow: -6px 0px 5px 0px rgba(0,0,0,0.31);
  box-shadow: -6px 0px 5px 0px rgba(0,0,0,0.31);	
}
#drink-panel .drink-name{
  font-family:"Patua One";
  font-size:1.5em;	
  color:#FFFFFF;
  background-color:#96bc00;  
  padding:10px 8px 10px 50px;	
}
#drink-panel .drink-name .creator{
  font-size:.5em;	
  color:#ECFFA5;	
}
#drink-panel .drink-name .creator a{
 color:#ECFFA5;
 text-decoration:underline;	
}
#drink-panel #show-recipe{
 display:inline-block;    
 font-family:"Patua One";    
 transition:all .5s;         
}
#drink-panel #show-recipe:hover{ opacity:.6; }
#drink-panel #show-recipe:hover i{
  transform: rotate(180deg);      
}
#drink-panel #show-recipe i{ 
  vertical-align:middle; color:#ff8827;  
  transform-origin: 50% 50%;
  display:inline-block;
  transition:all .5s;    
}
#drink-panel #show-recipe span{
 vertical-align:middle; 
 font-size:.8em;    
}

#drink-panel .recipe { 
 font-size:.8em; color:#787878;	
 border:1px solid #dedede;
 padding:5px;
 border-radius:10px;	
 display:none;  
 margin-top:6px;    
}
#drink-panel .recipe ul{
 margin:0; padding:0;	
 list-style:none; 
}
#drink-panel .recipe ul li{
  padding-bottom:4px;	
}

#drink-panel .close-panel{
  display:block;
  position:absolute;	
  left:3px; top:6px;
  text-decoration: none;
  color:#96bc00;	
  font-size:2.0em;
  line-height:.8em;	  	
  border-radius:50%;
  padding:2px;	
  background-color:#FFFFFF;	  
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);		
}
#drink-panel .yourrating{
  background-color:#FFFFFF;
  border:1px solid #DEDEDE;
  border-top-left-radius: 30px;	
  border-bottom-left-radius: 30px;
  position:absolute;	
  top:26px;
  right:-275px;  
  padding:3px;
  width:320px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);  
  z-index:2;
}

#drink-panel .yourrating #btn-delrating{
  text-decoration: none;
  color:#D7696B;
  font-size:1.5em;
  padding-left:20px;	
  display:inline-block;
  padding-top:9px;	
}

#drink-panel .yourrating #btn-showrating{
  float:left;	
  text-decoration: none;
  color:#ffffff;
  font-size:1.6em;	
  line-height:1.6em;	
  background-color:#ff8827;
  width:40px; height:40px;
  border-radius:50%;
  text-align:center;
  margin-right:5px;	
}
#drink-panel .yourrating.closed #btn-showrating:before{
  font-family:"icomoon";	
  content: "\e915";	
}
#drink-panel .yourrating #btn-showrating:before{
  font-family:"icomoon";	
  content: "\e90d";	
}


#drink-panel .yourrating #btn-showrating:hover { background-color:#21A0C8; }
#drink-panel .drink-info {  padding:10px 10px 5px 10px; overflow:hidden; border-bottom:1px solid #BCBCBC; position:relative;  }

#drink-panel .missing-ings { color:#898989; font-size:.9em; padding-bottom:10px; }
#drink-panel .missing-ings i { background-color:#F86E71; border-radius:50%; display:inline-block; width:15px; height:15px; vertical-align: top; margin-right:10px;    }
#drink-panel .missing-ings i.missing0{ background-color:#66B130;  }
#drink-panel .missing-ings i.missing1, #drink-panel .missing-ings i.missing2{ background-color:#E1D13E;  }
#drink-panel .missing-ings strong{  }

#drink-panel .source-list{
 list-style:none; padding:0; 
 background-color:#FAFAFA;	
 border-radius:6px;
 margin:6px 0px 12px 0px;	
}
#drink-panel .source-list li{ padding:5px; font-size:.9em; color:#787878; font-family:"Patua One"; 	}
#drink-panel .source-list li span{ padding-right:10px;  }
#drink-panel .source-list li strong{ font-weight:normal; color:#9a9a9a; }
#drink-panel h4{ margin:0; color:#787878; padding-bottom:3px; }
#drink-panel .rating-stars { position:relative; float:left; padding-top:10px; }
#drink-panel .rating-stars a { text-decoration: none; color:#DEDEDE; font-family:"icomoon"; font-size:1.3em; }
#drink-panel .rating-stars a:before { content: "\e916";  } 
#drink-panel .rating-stars a.on:before { content: "\e915"; color:#ff8827; } 
#drink-panel .rating-stars a:hover { opacity:.6; }

#drink-panel #info-collapse{ float:right; text-decoration: none; display:inline-block; color:#DEDEDE; margin-top:-30px; padding-right:4px; position:relative; font-size:1.5em;}
#drink-panel #info-collapse.icon-down { color:#FFFFFF; }
.icon-back:before {
  content: "\e911";
}

.comment-panel{   overflow:auto;	
  background-image:url(/images/cocktailbg.png);
  background-size:100px;	
  background-color:#96bc00;
	

}

.comments-list{
  list-style:none;
  margin:0;
  padding:0px 0px 60px 0px;	
  position:relative;	
}
.comments-list>li{
 padding:0;	
 border-bottom:1px solid #DEDEDE;
 box-sizing:border-box; 
 font-size:.8em;
 background-color:#FFFFFF;	
}
.comments-list>li:nth-child(odd){
 background-color:#Fafafa;	
}

.comments-list>li .comment-poster{
  display:block;
  text-decoration:none;
  background-color:#787878;
  color:#FFFFFF;
  font-family:"Patua One";
  width:30px; height:30px;
  border-radius:50%;
  text-align:center;
  font-size:1.2em;	
  line-height:1.9em; 
  box-sizing:border-box; 
}
.comments-list>li .comment{
 width:93%; float:left;	
 padding:10px; 
 box-sizing:border-box;	
 position: relative;
}
.comments-list>li .comment-info{
 padding-bottom:2px;	
}
.comments-list>li .comment-date{
 padding-left:10px; font-size:.75em; color:#9a9a9a;	
}
.comments-list>li .comment-num{
 position:absolute;
 top: 4px; right:6px;
 color:rgba(50,50,50,.10);
 font-family:"Patua One";
 font-size:2.0em;	
}

.comments-list>li .comment-info a{
 font-family:"Patua One"; text-decoration: none;
 font-size:1.1em;	
}
.comments-list>li .comment-body{overflow:hidden;  
}
.comments-list>li .poster-icon{
  width:7%;	
  float:left;	
  padding:10px 0px 0px 5px;		
}
.comment-ctrls { float:right; padding:4px 0px;  }
.comment-ctrls a{ text-decoration:none; color: #ABABAB; padding-left:10px; font-size:1.2em; }

.comments-list .my-rating{ padding:4px 0px; float:left; } 

.profilebg0{ background-color:#C57072!important;}
.profilebg1{ background-color:#ff8827!important;}
.profilebg2{ background-color:#96bc00!important;}
.profilebg3{ background-color:#C5C035!important;}
.profilebg4{ background-color:#6985B9!important;}
.profilebg5{ background-color:#A87ABC!important;}
.profilebg6{ background-color:#AC8D76!important;}
.profilebg7{ background-color:#7FACA9!important;}
.profilebg8{ background-color:#C46A21!important;}
.profilebg9{ background-color:#21A0C8!important;}
.profilecolor0{ color:#C57072!important;}
.profilecolor1{ color:#ff8827!important;}
.profilecolor2{ color:#96bc00!important;}
.profilecolor3{ color:#C5C035!important;}
.profilecolor4{ color:#6985B9!important;}
.profilecolor5{ color:#A87ABC!important;}
.profilecolor6{ color:#AC8D76!important;}
.profilecolor7{ color:#7FACA9!important;}
.profilecolor8{ color:#C46A21!important;}
.profilecolor9{ color:#21A0C8!important;}

#profile-popup{
 display:none;
 position:fixed;	
 width:80%; max-width:350px;
 background-color:#FFFFFF;
 z-index: 10;
 font-size:.90em;	
 top:0px; left:0px;	
 border-radius:10px;
 font-family:"Patua One";	
 padding-bottom:10px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
 pointer-events:all;	
}
#close-profile{
 position:absolute;
 right:5px;
 top:3px;
 font-size:1.4em;
 pointer-events:all!important;	
}
#close-profile:hover{ opacity:.5; }


#btn-addcomment{
  position:fixed;
  right:5px; bottom:85px;
  background-color:#21A0C8;
  color:#FFFFFF;
  text-decoration: none;
  box-sizing:border-box;	
  width:45px; height:45px;
  border-radius:50%;
  text-align:center;
  line-height:41px;
  font-size:1.5em;	
  border:2px solid #FFFFFF;
  z-index:3;
  display:none;	
}

#addcomment-panel{
  display:block;  
  position:absolute;
  bottom:-150px;
  left:0px; width:100%;
  background-color:#21A0C8;  
  box-sizing:border-box;
  border-top:2px solid #5CC5E7;	
  padding:8px 8px 20px 8px;	
  z-index:4;
  opacity:1;	
  border-top-left-radius:6px;	
  border-top-right-radius:6px;	
  transition:all .4s ease-out;
  pointer-events: none;
  box-shadow:0px -1px 3px 3px rgba(0,0,0,0.20);
}
#addcomment-panel.open{
 display:block;
 bottom:65px;
 opacity:1;	
 pointer-events: all;	
}




#addcomment-panel h4{ color:#FFFFFF;  }
#addcomment-panel textarea{
 box-sizing:border-box;	
 display:block;
 width:100%;	
 border-radius:5px;
 border:none;
 margin-bottom:10px;	
}
.form-btn{  
  border-radius:10px;	
  padding:6px 12px;
  color:#FFFFFF;
  font-family:"Patua One";
  background-color:#343434;	
  border:none;
}
#submit-comment { float:right; background-color:#B5D72F;  }
#cancel-comment { background-color:#5CC5E7; }
/* ######################################################################################## */
#book-list{
 list-style:none; margin:0; padding:20px 0px 0px 0px;
}
#book-list li a.book-imglink{
  display:block;
  float:left;
  width:20%;	
  box-sizing:border-box;
  padding-right:10px;
  transition:all .5s ease-out;
}
#book-list li a.book-imglink:hover { opacity:.9; transform:rotate(0deg)!important; transform-origin: 50% 50%; }
#book-list li a .book-image{
 max-width:150px; height:auto;	
 border-radius:3px;
 box-shadow: 3px 3px 5px 0px rgba(0,0,0,.25);	
 width:100%; 	
 
}
#book-list li { padding-top:15px; border-top:1px dotted #96bc00; margin-bottom:15px;  }
#book-list .book-info{ float:left; width:78%;  }
#book-list .book-title { font-family:"Patua One"; font-size:1.2em; padding-bottom:6px; color:#787878; }
#book-list .book-title a { text-decoration: none; color:#21A0C8; }
#book-list .book-desc{ font-size:.9em;}
#book-list li.typedivider { margin-bottom:0; border-top:none; }
#book-list .groglink { float:right;  text-align:center; margin-top:10px; padding:6px 10px; color:#EDB07F; border:1px solid #EDB07F; border-radius:20px; }
#book-list .groglink:hover { background-color:#EDB07F; color:#FFFFFF; }

/* green: 96bc00  orange: ff8827  lightblue: caebe7  blue:#21A0C8 */
/* ######################################################################################## */
/* ADMIN AREA 
/* ######################################################################################## */
.small { font-size:.8em; color:#ababab; padding:20px 0px; }
.admin-ing-list { list-style:none; margin:0; padding:0; width:24%; float:left;  }
.admin-ing-list li { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ing-list li a { white-space: nowrap; }
.list-title { font-weight:bold; padding:5px 0px; font-family:"Patua One"; }
.error-message { text-align:center; color:#A03B3D; }
.form-list { list-style:none; margin:0; padding:0; }
.admin-form { width:100%;  margin:0 auto; }
.form-list > li{ padding:10px 0px; box-sizing:border-box; }
.admin-form  label{ display:inline-block; padding-right:10px; font-family:"Patua One"; color:#565656; }
.admin-form > input[type=text]{ padding:10px; width:80%; max-width:200px; border-radius:20px; border:1px solid #CDCDCD; outline:none; }
.admin-form > select { border-radius:20px; padding:10px; border:1px solid #CDCDCD; outline:none;  }
.admin-form #cancel-button, .admin-form #submit-button { margin:0;}
.admin-form #cancel-button { float:left; background-color:#ff8827;  }
.admin-form #submit-button { float:right; }
.admin-form #delete-button { background-color:#CD4345; }

/* ######################################################################################## */


@media only screen and (max-width : 900px) { 
	#header h1{ font-size:2.8em; }	
	#header .breakout-img { max-width:280px;  }
}
@media only screen and (max-width : 700px) { 
  #header h1{ font-size:2.4em; }		
  #header .breakout-img { left:auto; right:10px; max-width:220px; }	
  #main-nav ul>li { font-size:1.0em; }	
  .col{ float:none; width: 100%; }	
	.account-settings { padding-left:0px; }	
  #drink-list .drink-avgrating { width:10%; }
  #drink-list .drink-info{ width:90%; }	
	
  #book-list li a.book-imglink { width:38%; text-align: center; }
  #book-list .book-info{ width:60%; }	
	
}
@media only screen and (max-width: 600px){
   .footer-nav { display:none; }   
   #footer .fixedwidth{ min-height:100px; }   
   #main-nav ul.horiz>li a { padding:10px 10px 10px 10px; }	
   #main-nav ul.horiz>li a span{ font-size:.3em;	}	
   #login-panel{ margin:10px auto 0px auto; }
   h1.pagetitle{ margin-top:0px; font-size:1.6em;  text-align:left; padding:20px 60px 20px 20px;  }    
   h1.pagetitle i{ padding:0 8px; line-height:2.8em; }	
   h1.pagetitle	a { display:none;}
   .blurb{ font-size:.8em; }		
   .ingredient-list li{ width:100%; float:none; } 
	
  .admin-ing-list { width:100%; float:none;  }	
 	
}
@media only screen and (max-width : 550px) { 	
  #header .breakout-img { display:none; }
	#header h2 { display:inline-block; width:auto;  }
	#header #home-title { text-align:center; z-index:1; padding-top:140px;}	
	#header #mobile-img{ 
	  display:block;	
      position:absolute;
      width:150px; height:auto;
      top:30px;		
	  left:50%; margin-left:-70px;	
    }    
    #drink-list .drink-avgrating { width:12%; }
    #drink-list .drink-info{ width:88%; }	
	#drink-list .drink-name { font-size:1.0em; }
	#drink-settingspanel ul{ float:none;   }
	.comments-list>li .comment{ width:91%; }
	.comments-list>li .poster-icon{ width:9%; }
	#book-list li a.book-imglink { float:none; width:50%; margin:0 auto; margin-top:-20px;}
    #book-list .book-info{ width:100%; float:none; background-color:#FFFFFF;  }
	#book-list .book-title { text-align: center; padding-top:10px; }	
	h2,h3 { text-align: center; }	
}
@media only screen and (max-width : 450px) { 
  #header h1{ font-size:2.0em; }			
  #header h2{ font-size:1.1em; }	
  .bodytext h3{ text-align:center; }	
  .bodytext{ font-size:.9em;}
  #drink-list .drink-avgrating { width:16%; }
  #drink-list .drink-info{ width:84%; }	
  #login-status { right:8px; top:12px; }
  #main-nav .nav-logo{ bottom:2px;	  	}	
  #main-nav .nav-logo img{ max-width:130px;}
  h1.pagetitle{ background-size:100px; }
  #drink-panel .source-list li { font-size:.8em; padding:3px 6px; }	
  #drink-panel h4{ font-size:.9em; }
  .ingredient-list .ing-name { max-width:89%; overflow:hidden; }	
}
@media only screen and (max-width : 380px) {
	#main-nav ul.horiz>li{ font-size:1.2em; }
	
	.account-settings input{ width:54%; }
	ul.book-list li{ font-size:.9em; }
	h1.pagetitle { font-size:1.2em; text-align:left; }
    #main-nav .nav-logo{ bottom:-5px;	  	}	
    #main-nav .nav-logo img{ max-width:130px;}
	.ingredient-list .ing-name { font-size:.9em; }	
}
@media only screen and (max-width : 380px) {
    #main-nav .nav-logo{ bottom:5px;	  	}	
    #main-nav .nav-logo img{ max-width:100px;}
	
}