/*

	zenlike1.0 by nodethirtythree design
	http://www.nodethirtythree.com

*/
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

*
{
padding: 0em;
margin: 0em;
}

body
{
background: #000000 url('../images/bg1.jpg');
background-attachment : fixed;
padding: 3px -3px 3px 0px;
}

body,input
{
font-size: 9pt;
/*font-size: 10pt;*/
font-family: "verdana";
/*font-family: "georgia", "times new roman", serif;*/
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
}

h4
{
font-size: 1.2em;
padding-right: 28px;
}

span.tapcircle {
  background-color: rgba(153,153,153,.3);
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  display: inline-block;
  font-weight: bold;
  font-size : 14pt;
  line-height: 2em;
  margin-right: 5px;
  text-align: center;
  width: 2em; 
}

table.noindent {
	margin-top : 30px;
}
table.indent {
	margin-left : 80px;
	margin-bottom : -5px;
}
table.indentheading {
	margin-left : 80px;
	margin-bottom : 10px;
}
table.indenttwice {
	margin-left : 160px;
}
table.loaddata {
    border-color: #2B2B2B;
    border-width: 3px 0 3px 0;
    border-style: solid;
    margin-bottom: 2px;

	}
table.bulletgroup {
    border-color: #2B2B2B;
    border-width: 3px 0 3px 0;
    border-style: solid;
    margin-bottom: 2px;
    margin-top: 10px;
}

table.bullets {
	margin-bottom: 10px;
	border-color: #2B2B2B;
	border-width: 0 0 3px 0;
	border-style: solid;
}

td.bullets {
	width: 10%;
	margin-bottom: -10px;
}

td.bulletgroup {
	height: 18px;
}

td.bulletgrouptop {
	color:#FFF;
	background-color:#000;
	height: 18px;
}

td.highload {
	color:#F00;
	border-color: #2B2B2B;
	border-width: 0 0 1px 0;
	border-style: solid;
}
td.bulletlist {
	border-color: #2B2B2B;
	border-width: 0 0 1px 0;
	border-style: solid;
}

td.bottomborder {
	border-color: #2B2B2B;
	border-width: 0 0 2px 0;
	border-style: solid;
}
	
td
{
	vertical-align:middle;
	height: 27px;
/*	padding-left: 8px;
*/}

td.top {
	vertical-align:top;
}
td.L1 {
	font-size : 12pt;
	font-weight : bold;
}
td.details {
	background : #B8B7B7;
}

tr.list:nth-child(odd) {
	background-color : #B8B7B7;
}

tr.beerlist:nth-child(odd) {
	background-color : #B8B7B7;
	text-align : center;
}

tr.beerlist:nth-child(even) {
	text-align : center;
}

tr.TLlist:nth-child(even) {
	background-color: rgba(153,153,153,.23);
	color : #ffffff;
}

tr.TLlist:nth-child(odd) {
	color : #ffffff;
}


tr.dies {
	color: #B96D00;
}

tr.taplistheader {
	color : #ffffff;
	Font-Weight : Bold;
	
}

td.taplist {
	border-left : dashed;
	border-color : #949494;
	border-left-width : thin;
	vertical-align : middle;
	padding-top : 5px;
	padding-left : 10px;
	Padding-right: 10px;
	text-align : justify;
}

td.tapliststyle {
	border-left : dashed;
	border-color : #949494;
	border-left-width : thin;
	vertical-align : middle;
	padding-left : 10px;
	Padding-right: 10px;
	text-align : left; 
}

td.taplistimage {
	border-left : dashed;
	border-color : #949494;
	border-left-width : thin;
	vertical-align : middle;
	text-align : center;

}

td.taplistnum {
	vertical-align : middle;
	text-align : center;

}

td.leftborder {
	border-left : thick;
	border-color : #000000;
}


.srm-container{
	position: relative;
	height: 100px;
	width: 58px;
	margin: 0 auto;
}

.srm-indicator{
	position: absolute; 
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	
	-webkit-mask-image: url(../images/srm/pint-mask.png);
	-o-mask-image: url(../images/srm/pint-mask.png);
	-moz-mask-image: url(../images/srm/pint-mask.png);
	mask-image: url(../images/srm/pint-mask.png);
}

.srm-indicator .srm-full{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.srm-stroke{
	position: absolute; 
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	
	background: url(../images/srm/pint-stroke.png)
}


.ibu-container{
	position: relative;
	height:100px;
	width:53px;
	margin: 0 auto;
}
.ibu-indicator{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/ibu/stroke.png) no-repeat bottom left;
}
.ibu-indicator .ibu-full{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: url(../images/ibu/full.png) no-repeat bottom left;
}
	
.ibu-max{
	position: absolute;
	top: -5px;
	left: 35px;
}
.abv-container{
	position: relative;
	height: 100px;
	width: 115px;
	margin: 8px auto;
}	
.abv-indicator{
	display: inline-block;
	position: relative;
	height:100%;
	width:50%;
	background: url(img/abv/stroke.png) no-repeat bottom left;
}
.abv-indicator .abv-full{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: url(img/abv/full.png) no-repeat bottom left;
}
.abv-offthechart{
	position: absolute;
	bottom: -2px;
	left: 8px;
	height: 55px;
	width: 114px;
	background: url(img/abv/offthechart.png) no-repeat bottom left;	
}

.keg-container{
	position: relative;
	height: 100px;
	width: 67px;
	margin: 8px auto;
}

.keg-indicator{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/keg/stroke.png) no-repeat bottom left;	
}
.keg-indicator .keg-full{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: url(../images/keg/full.png) no-repeat bottom left;
}
.keg-indicator .keg-empty{
	background-image: url(../images/keg/empty.png);
}
.keg-indicator .keg-red{
	background-image: url(../images/keg/red.png);
}
.keg-indicator .keg-orange{
	background-image: url(../images/keg/orange.png);
}
.keg-indicator .keg-yellow{
	background-image: url(../images/keg/yellow.png);
}
.keg-indicator .keg-green{
	background-image: url(../images/keg/green.png);
}

.contentarea
{
padding-top: 1.3em;
	margin-left : auto;
	margin-right: auto;
}

.error
{
color : red;
}

.errorKicked
{
	color : red;
}

.errorLow
{
	color : darkorange;
}

.headingtext
{
	color : white;
}

.RndCountText
{
	font-size: 5em;
	font-weight: bold;
}
.L1 {
	font-size : 12pt;
	font-weight : bold;
}

.incButton {
    background:url(../images/increase.png) no-repeat;
    cursor:pointer;
    border: none;
}

.HopHeading {
	Font-Weight : Bold;
	letter-spacing : 5px;
	Color : #000000;
	Font-size : 24pt;
	Font-Family : Verdana;
	text-align: left;	
	vertical-align : text-top;
}

.BeerTapHeading {
	Font-Weight : Bold;
	letter-spacing : 5px;
	Color : #ffffff;
	Font-size : 24pt;
	Font-Family : Times;
	text-align: left;	
	vertical-align : text-top;
}


.BeerTapDescription{
	color : #BCBCBC;
	Font-size : 18pt;
	Font-Family : Times;
	Text-Align : justify;
	vertical-align : text-top;
	line-height : 25px;
	
}

.BeerTapSpecs {
	color : #BCBCBC;
	Font-Size : 16pt;
	font-style : italic;
	font-family : Times;
	Text-Align : left;
	vertical-align : text-top;
	
}

.BeerTapStyle{
	color : #FFFFFF;
	font-weight : bold;
	letter-spacing : 3px;
	Font-size : 16pt;
	Font-Family : Times;
	Text-Align : left;
	vertical-align : text-top;
	
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 750px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .taplisttext {
  visibility: hidden;
  width: 650px;
  background-color: #555;
  color: #fff;
  font-size : 12pt;
  text-align: center;
  border-radius: 6px;
  padding: 55px 0;
  position: fixed;
	top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  /*bottom: 125%;
  left: -10%;
  margin-left: -60px;
	margin-bottom : -500px;*/
  opacity: 0;
  transition: opacity 0.3s;
  z-index : 99;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip .taplisttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip:hover .taplisttext {
  visibility: visible;
  opacity: 1;
}

.rangeslidertooltip {
  display: block;
  margin-top: 2.5em;
  font-size: 12px;
  color: #a59eb5;
}

.rangeslider,
input[type='range'] {
  max-width: 400px;
}

.rangeslider__handle {
  border-radius: 22px;
  line-height: 42px;
  text-align: center;
  font-weight: bold;

 /* &:after {
    background: 0;
  }*/
}

.rangeslider,
.rangeslider__fill {
  display: block;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e5ea;
    background-image:
    linear-gradient(
      to right, 
      #4bc67d 30%, #f1c40f 45%, #b94a48 99%
  );
  position: relative;
}

.rangeslider--horizontal {
  height: 10px;
  width: 100%;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  background: #4bc67d;
  position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
  background: white;
  border: 6px solid #4bc67d;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  
/*  &.js-low {
    border-color: #4bc67d;
  }
    
  &.js-med {
    border-color: #f1c40f;
  }
    
  &.js-high {
    border-color: #b94a48;
  }*/
}

.rangeslider__handle:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:active {
  
}
.rangeslider--horizontal .rangeslider__handle {
  top: -20px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}


img
{
border: solid 1px #6F5230;
}

img.bullet {
	border: none;
}

img.left
{
border: 0px;
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}

.divider1
{
position: relative;
background: #fff url('../images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}

.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}

.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('../images/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('../images/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('../images/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('../images/boxbg.gif') repeat-x;
left: -.75 em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

#RoundCounterResult
{
	position: absolute;
    top: 450px;
    right: 50px;
    width: 300px;
    height: 150;
	background: #FDFCF6 url('../images/boxbg.gif') repeat-x;
	left: -.75 em;
	padding: 1.5em;
	border-bottom: solid 1px #E1D2BD;
	margin-bottom: 1.0em;

}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

ul.tools
{
	vertical-align: top;
	list-style : circle;
	margin-left : 50px;
}

ul.tools li
{
	line-Height : 2.0em;
}

ul.libitem
{
	vertical-align: top;
	list-style-image: url("../images/foldericon.png");
	margin-left : 50px;
	line-height : 2.0em;
}
ul.libitem li
{
	margin-left : 100px;
}
/* Style the button that is used to open and close the collapsible content */
.collapsiblelist {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsiblelist:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.collapsiblelistcontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
#upbg
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('../images/bg2.jpg') repeat-x;
background-attachment: fixed;
z-index: 1;
}

#outer
{
	z-index: 2;
	position: relative;
	/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
	width: 100%;
	border: solid 7px #fff;
	background-color: #fff;
	margin: 0 auto;
}

#header
{
position: relative;
width: 100%;
height: 9.0em;
background: #2B2B2B url('../images/topbg.gif') repeat-x;
margin-bottom: 2px;
}

#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}

#headerTapList
{
position : relative;
text-align : center;
vertical-align : middle;
width: 100%;
height: 10.0em;
background: #000000 url('../images/background.jpg') repeat-x;
margin: 0, auto, 2px, auto, ;
}


#HTLImage
{
	border : 0px;
	margin-top : 18px;
}

#TLImages
{
	border : 0px;
}

#search
{
position: absolute;
top: 5.5em;
right: 2.0em;
padding-right: 0.0em;
}

#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}

#search input.submit
{
background: #939B00 url('../images/buttonbg.gif') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}

#headerpic
{
position: relative;
height: 109px;
background: #fff url('../images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}

#menu
{
position: relative;
background: #7F8400 url('../images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}

#menu ul
{
position: absolute;
top: 1.1em;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

#menu ul li a:hover
{
text-decoration: underline;
}

#menu ul li a.active
{
background: #7F8400 url('../images/menuactive.gif') repeat-x top left;
}

#menubottom
{
background: #fff url('../images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#taplistcontent
{
padding: 0em 1.0em 0em 1.0em;
	background-image : url("/images/background.jpg");
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 12.0em 0em 0em;
}

#secondarycontent
{
margin-top: 5.3em;
float: right;
width: 18.0em;
}

#scroll
{
	height:200px;
	overflow:auto;
}

#scroll-lg
{
	height:400px;
	overflow:auto;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('../images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}



fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 


canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

#chartjs-radar{
	width : 90%;
	height : 90%;
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}