@charset "utf-8";
/* CSS Document for Joomla 3 styles */

/* ===========================
	FONT STYLES
	========================== */
body {
	font-family: Verdana, Arial, sans-serif;
	padding-top: 10px;
	padding-bottom: 60px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans Condensed',sans-serif;
	font-weight: 700;
}

h1 {
  font-size: 30px;
  line-height: 34px;
}

h2 {
  font-size: 26px;
  line-height: 30px;
}

h3 {
  font-size: 22px;
  line-height: 26px;
}

h4 {
  font-size: 18px;
  line-height: 20px;
}

h5 {
  font-size: 14px;
  line-height: 20px;
}

h6 {
  font-size: 12px;
  line-height: 20px;
}
.navbar .brand{
	font-family:  Verdana, Arial, sans-serif;
	font-size: 15px;
	}
.navbar .nav > li{
	font-family:  Verdana, Arial, sans-serif;
	font-size: 10px;
	line-height: 20px;
	}
	
.form-horizontal textarea{
	width: 90%
}
.form-horizontal input{
	width: 90%
}
.gi2{
	width:500px;
	height:300px;
}

ky .img-responsive {
	padding-top: 30px;
}

/* overrides for the tag display */

.tag-category h3 a{
	color: green;	
  font-size: 12px;
  line-height: 3px;
}  

/* end overrides for the tag display */

/* override for category list display */
h3.page-header.item-title a {
	color: #7d7e84;
	line-height: 20px;
	font-size: 14px;
}

/* end override for category list display */

/* override tag menu margin */
.thumbnails > li {
	margin-bottom: 0px;
}

.options input[type="radio"], .options input[type="checkbox"], .options select name{color: green}

/* override bootstrap blue on menu */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    color: #FFF;
    text-decoration: none;
    background-color: #A5A9AB;
    background-image: linear-gradient(to bottom, #A4A4A4, #A5A5A5);
    background-repeat: repeat-x;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #FFF;
    text-decoration: none;
    background-color: #A5A9AB;
    background-image: linear-gradient(to bottom, #E0E0E0, #E0E0E0);
    background-repeat: repeat-x;
    outline: 0px none;
}    

/* end override */
/* this is the flexible box code for front page 400px to 60% 300px to 40%*/

.outerdiv {	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}

.innerdiv {
	/*width: 60%;*/
	height: 2
	50px;
	margin:10px;
	padding:10px;
}
.innerdiv2 {
	width: 40%;
	height: 2
	50px;
	margin:10px;
	padding:10px;
}

/*flex code not front page  
 need pagebox as outer div
 need pagerow as inner div
 need pagehalf as the 2 columns */
/* do not need this - for testing only
.pagebox {
	border:3px solid red;
	}
*/	

.pagerow{
	width:100%;
	}
.pagehalf-left{
	width:50%
	margin:5px;
	padding:5px;
	border: 0px solid #999;
	}	
.pagehalf-right{
	width:50%
	margin:5px;
	padding:5px;
	border: 0px solid #999;
	}		

.pagehalf-left ul{
	list-style: none;
	padding-top: 20px;
}

.pagehalf-left ul li{
	font-family: Verdana, Arial, sans-serif;
	font-size: 20px;
	padding-top: 8px;
}

@media (min-width:570px) {
	.pagerow{
		display:flex;
		width:100%;
		}
	.pagehalf-left{
		width:50%;
		}
	.pagehalf-right{
		width:50%;
		}	
}











/* Front door workings large */
@media (min-width: 480px) {
/*	.colright
{
    display: inline-block;
    max-width: 350px;
    padding: 0px 0px 0px 15px;
}

.colleft
{
    float: left;
    max-width: 370px;
}
*/
.shopbox{
	width:368px;
	height:223px;
}


.shoptop
{
    width: 368px;
    height: 73px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-reg/top-reg.gif);
}

.shopleft
{
    float: left;
    width: 136px;
    height: 79px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-reg/left-reg.gif);
}

.door
{
    float: left;
    width: 23px;
    height: 79px;
    background-repeat: no-repeat; 
    background-size: auto; 
    background-position: left top; 
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-reg/door-right.gif); 
}

.shopright
{
    float: left;
    width: 209px;
    height: 79px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-reg/right-reg.gif);
}

.shopbase
{
    float: left;
    clear: left;
    width: 368px;
    height: 71px;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-reg/bottom-reg.gif);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
}

div.door a:link,
div.door a:visited
{
    display: block;
    text-indent: -999px;
    width: 23px;
    height: 79px;
    background: url(https://www.betterbeverage.uk/images/img-shop/front-reg/door-sprite-reg.gif) top left no-repeat;
}

div.door a:hover
{
    background: url(https://www.betterbeverage.uk/images/img-shop/front-reg/door-sprite-reg.gif) bottom right no-repeat;
    background-position: -72px 0px;
}
}
/* end front door large */

@media (max-width: 480px) {
	.mobile1{
		display:none;}
}

/* Front door workings small */
@media (max-width: 480px) {
.shopbox{
		display:none;}

.nav-tabs > li {
        float:none;
    } /* sorts the front page tabs to vertical on small screen */		

.pagehalf-right .nav li {
		display: table-cell !important;
} /* force the tabs on the content box to horizontal */   

.shopsmall{
	width:280px;
	height:261px;
}


.smalltop
{
    width: 280px;
    height: 99px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-top.jpg);
}

.smallleft
{
    float: left;
    width: 98px;
    height: 93px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-left.jpg);
}

.smalldoor
{
    float: left;
    width: 26px;
    height: 93px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-door.jpg);
}

.smallright
{
    float: left;
    width: 153px;
    height: 93px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-right.jpg);
}

.smallbottom
{
    float: left;
    clear: left;
    width: 280px;
    height: 69px;
    background-image: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-base.jpg);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: left top;
}

div.smalldoor a:link,
div.smalldoor a:visited
{
    display: block;
    text-indent: -999px;
    width: 26px;
    height: 93px;
    background: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-door.jpg) top left no-repeat;
}

div.smalldoor a:hover
{
    background: url(https://www.betterbeverage.uk/images/img-shop/front-mob/mob-door.jpg) bottom right no-repeat;
    background-position: -47 0px;
}
}
 
 


/* end front door small */



/* ======================
	GENERAL STYLES
	===================== */
/* Write your general styles here */

/* ===================================================================================
	BOOTSTRAP MEDIA QUERIES OVERRIDES
	NOTE: The order of the media queries is important when styles overwrite each other
	================================================================================== 
@media (min-width: 980px) {}
@media (min-width: 1200px) {}
@media (max-width: 979px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (max-width: 480px) {}
*/

/* ======================
	MODULES
	===================== */

/* ----------------------
	Special module styles
	--------------------- */
/* Special general */
[class*="special"] .module-content ul {
	margin: 0 0 10px 17px;
}

[class*="special"] .module-content ul.unstyled {
	margin: 0 0 10px 0;
}

/* -------------
	Special Grey
	------------ */
.specialgrey {
    border: 1px #e6e6e6 solid;
    border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    box-shadow: 0 2px 4px 0 #b4b4b4;
    color: #333;
	min-height: 20px;
	margin-bottom: 20px;
    background: #F5F5F5;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#e6e6e6 100%); /* W3C */
}

.specialgrey .page-header {
	border-bottom: 1px #ccc dotted;
	margin: 0;
	padding: 4px 19px;
}

.specialgrey .module-content {
	padding: 4px 19px;
}

/* -------------
	Special Blue
	------------ */
.specialblue {
    border: 1px #3c67a5 solid;
    border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    box-shadow: 0 2px 4px 0 #b4b4b4;
    color: #333;
	min-height: 20px;
	margin-bottom: 20px;
	background: #507bb9; /* Old browsers */
	background: -moz-linear-gradient(top,  #507bb9 0%, #3c67a5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#507bb9), color-stop(100%,#3c67a5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #507bb9 0%,#3c67a5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #507bb9 0%,#3c67a5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #507bb9 0%,#3c67a5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #507bb9 0%,#3c67a5 100%); /* W3C */
}

.specialblue .page-header {
	border-bottom: 1px #fff dotted;
	margin: 0;
	padding: 4px 19px;
	color: #fff;
}

.specialblue hr {
    margin: 5px 0;
}

.specialblue .module-content {
	padding: 4px 19px;
	color: #fff;
}

.specialblue .module-content a {
	color: #fff;
}

/* -------------
	Special Red
	------------ */
.specialred {
    border: 1px #990000 solid;
    border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    box-shadow: 0 2px 4px 0 #b4b4b4;
    color: #333;
	min-height: 20px;
	margin-bottom: 20px;
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff0000 0%, #990000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#990000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff0000 0%,#990000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff0000 0%,#990000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff0000 0%,#990000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff0000 0%,#990000 100%); /* W3C */
}

.specialred .page-header {
	border-bottom: 1px #fff dotted;
	margin: 0;
	padding: 4px 19px;
	color: #fff;
}

.specialred .module-content {
	padding: 4px 19px;
	color: #fff;
}

.specialred .module-content a {
	color: #fff;
}

/* -------------
	Special Gold
	------------ */
.specialgold {
    border: 1px #ab7915 solid;
    border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    box-shadow: 0 2px 4px 0 #b4b4b4;
    color: #333;
	min-height: 20px;
	margin-bottom: 20px;
	background: #cc9933; /* Old browsers */
	background: -moz-linear-gradient(top,  #cc9933 0%, #ab7915 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc9933), color-stop(100%,#ab7915)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #cc9933 0%,#ab7915 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #cc9933 0%,#ab7915 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #cc9933 0%,#ab7915 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #cc9933 0%,#ab7915 100%); /* W3C */
}

.specialgold .page-header {
	border-bottom: 1px #fff dotted;
	margin: 0;
	padding: 4px 19px;
	color: #fff;
}

.specialgold .module-content {
	padding: 4px 19px;
	color: #fff;
}

.specialgold .module-content a {
	color: #fff;
}