/*******************************************************************************

	CSS on Sails Framework
	Title: Apex
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: May 2011

********************************************************************************

	1. BASE
		1.1 Reset
		1.2 Accessibility Navigation & Hide
		1.3 Clearfix
		1.4 Default Styles

	2. COMMON
		2.1 Container
		2.2 Header
		2.3 Navigation
		2.4 Content
		2.5 Sidebar
		2.6 Footer
		2.7 Headings
		2.8 Buttons
		2.9 Forms

	3. PAGES
		3.1 Home
		3.2 Text
		3.3 Product
		3.4 My Account
		3.5 My Account Details
		3.6 My Orders List
		3.7 My Orders
		3.8 Shopping Cart
		3.9 Imperial Beer History
		3.10 Imperial Beer Media
		3.11 Cafe Britt Home
		3.12 Cafe Britt Text
		3.13 Cafe Britt Product
		3.14 Cafe Britt Product Range


	4. PRINT

*******************************************************************************/


/* 1. BASE
--------------------------------------------------------------------------------
==============================================================================*/


/* 1.1 Reset
------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { 
	height: 100%;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* 1.2 Accessibility Navigation & Hide
------------------------------------------------------------------------------*/

#accessibility-nav, 
.hide {
	position: absolute;
	top: -999em;
	left: -999em;
	height: 1px;
	width: 1px;
}


/* 1.3 Clearfix
------------------------------------------------------------------------------*/

.clearfix:after,
.form-row:after,
.form-row.right:after,
.tabs:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}


/* 1.4 Default Styles
------------------------------------------------------------------------------*/

body {
	font: 11px/1.25 Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background: #fff;
}

hr {
	display: none;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

del {
	text-decoration: line-through;
}

th, td {
	vertical-align: top;
}

th {
	font-weight: normal;
	text-align: left;
}

address, cite, dfn {
	font-style: normal;
}

abbr, acronym {
	border-bottom: 1px dotted #999;
	cursor: help;
}

input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
}

textarea {
	 overflow: auto;
}

a, a:visited {
	text-decoration: none;
	color: #000;
}

#content p a, #content p a:visited {
	text-decoration: underline;
}

.cafe-brit #content a:hover {
	color: #006600;
}

a:hover, a:active, a:focus {
	text-decoration: underline;
	color: #d5204b;
}

table a {
	text-decoration: none !important;
}

/* 2. COMMON
--------------------------------------------------------------------------------
==============================================================================*/


/* 2.1 Container
------------------------------------------------------------------------------*/

.container {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#wrapper {
	background: #f5f5f5;
}

.sticky {
	position: absolute;
	height: 100%;
	width: 960px;
	left: 50%;
	margin: 0 0 0 -480px;
	background: #222 url(../_ui/images/common/bg_h_f.gif);
}

/* 2.2 Header
------------------------------------------------------------------------------*/

#header {
	position: relative;
	padding: 68px 0 0 0;
	background: #222222 url(../_ui/images/common/bg_h_f.gif);
}

#header .site-name,
#header .site-name span {
	display: block;
	overflow: hidden;
	width: 960px;
	height: 104px;
}

#header .site-name {
	position: relative;
	text-indent: -999px; 
}

#header .site-name span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../_ui/images/common/logo.png) no-repeat;
}

#header a.site-name span {
	cursor: pointer;
}

/* 2.3 Navigation
------------------------------------------------------------------------------*/

#navigation {
	position: absolute;
	bottom: 50px;
	right: 20px;
	z-index: 3333;
}

#navigation li {
	margin-left: 30px;
	float: left;
}

#navigation a {
	color: #fff;
	text-transform: uppercase;
}

#navigation li.selected a {
	color: #d5204b;
}

#navigation a:hover {
	color: #d5204b;
	text-decoration: none;
}

.imperial-beer .imperial-nav {
	position: absolute;
	left: 220px;
	bottom: 20px;
	text-align: right;
}

.imperial-beer .imperial-nav a {
	font: bold 16px Verdana, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	color: #000;
}

.imperial-beer .imperial-nav li.last {
	padding: 8px 0 0 10px;
}


/* 2.4 Content
------------------------------------------------------------------------------*/

#content {
	float: right;
	position: relative;
	width: 570px;
	padding: 7px 65px 10px 25px;
}

#content p {
	margin-bottom: 15px;
	line-height: 1.4em;
}

#content #breadcrumbs {
	position: absolute;
	top: -15px;
	left: 25px;
	z-index: 3333;
}

#content #breadcrumbs li {
	float: left;
	margin-right: 5px;
}

#content #breadcrumbs li a {
	color: #000;
	font-size: 10px;
	text-decoration: none;
}

.imperial-beer #content {
	float: none;
	height: 400px;
	width: 960px;
	padding: 0;
	margin-top: -19px;
	z-index: 3333;
	background: url(../_ui/images/common/bg_content_beer.png) no-repeat;
}

.imperial-beer #content p {
	line-height: 14px;
}

.imperial-beer #content .content-inner {
	padding: 30px 0 0 305px;
}

.imperial-beer #content #breadcrumbs {
	top: -1px;
	left: 330px;
	height: 20px;
	width: 600px;
	line-height: 20px;
}

.imperial-beer .box {
	width: 578px;
	padding: 13px 15px 10px 25px;
	background: rgba(255, 255, 255, 0.6);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)";
}

/* 2.5 Sidebar
------------------------------------------------------------------------------*/

#sidebar {
	float: left;
	padding: 28px 15px 0 60px;
	width: 225px;
}

#sidebar li {
	height: 34px;
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #e7e7e7;
	font-size: 12px;
	line-height: 34px;
}

#sidebar li a {
	color: #000;
	text-transform: uppercase;
}

#sidebar li a:hover {
	color: #d5204b;
	text-decoration: none;
}

#sidebar li:first-child {
	border-top: none;
}

#sidebar li:last-child, #sidebar li.last {
	border-bottom: none;
}


/* 2.6 Footer
------------------------------------------------------------------------------*/

#footer {
	clear: both;
	padding: 12px 20px 12px 25px;
	color: #fff;
	background: none;/* #222222;*/
	font-size: 10px;
}

#footer .copy {
	float: left;
}

#footer .subnav {
	float: right;
	overflow: auto;
}

#footer .subnav li {
	float: left;
	margin-left: 5px;
	border-right: 2px solid #555;
	padding-right: 5px;
}
#footer .subnav li.last {
	border-right: 0 none;
	padding-right: 0;
}
	

#footer .subnav li a {
	color: #fff;
}

#footer .subnav li a:hover {
	color: #d5204b;
	text-decoration: none;
}

/* 2.7 Headings
------------------------------------------------------------------------------*/

h2 {
	font-size: 18px;
	text-transform: uppercase;
	color: #777;
	text-shadow: 0px 1px 0px white;
	font-weight: normal;
	margin-bottom: 12px;	
}
h3 {
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 12px;	
}
h4 {
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 5px;	
}
h5 {
	font-weight: normal;
	font-size: 12px;
	margin-bottom: 5px;	
}

/* 2.8 Buttons
------------------------------------------------------------------------------*/

a.button,
a.button:active {
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 0 12px;
	color: #191719;
	text-decoration: none !important;
	background: #ccc;
}

a.button.shadow, a.button.shadow span {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0 5px;
	width: 50px;
}

a.button.shadow,
a.button.shadow:active {
	position: relative;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;	
	background: #d5204b;
}

a.button.shadow span {
	position: absolute;
	top: -3px;
	left: -3px;
	text-align: center;
	background: #222;
}

/* 2.9 Forms
------------------------------------------------------------------------------*/

input[type=text] {
	display: block;
	height: 30px;
	width: 240px;
	line-height: 30px;
	margin-bottom: 5px;
	padding: 0 5px;
	border: 1px solid #ccc;
	background: #fff;
}

input[type=text].wider {
	width: 307px;
}

label {
	display: block;
	padding: 11px 0 5px 0;
}

label em, p em {
	color: #ff0000;
}


/* 3. PAGES
--------------------------------------------------------------------------------
==============================================================================*/


/* 3.1 Home
------------------------------------------------------------------------------*/

.home-page #content {
	padding-bottom: 25px;
}

h2.products {
	margin-top: 27px;
}

img.product-image {
	margin-bottom: 15px;
}

/* 3.4 My Account
------------------------------------------------------------------------------*/

.row-narrow {
	float: left;
	width: 235px;
}

.row-wide {
	float: right;
	margin-left: 45px;
	width: 315px;
}

.row-wide input[type=text] {
	width: 307px;
}

a.button.shadow.floated {
	float: right;
}

.account-page #content {
	padding: 7px 40px 10px 25px;
	width: 595px;
}

.account-page #content .row-narrow p {
	line-height: 20px;
}

.account-page #content .row-wide .login {
	margin-bottom: 5px;
}

.account-page #content .row-narrow a.button {
	margin-top: 5px;
	height: 25px;
	line-height: 25px;
}

.account-page .row {
	margin-top: 17px;
}


/* 3.5 My Account Details
------------------------------------------------------------------------------*/

.form-row, .form-row.right {
	overflow: visible;
	margin-bottom: 20px;
}

.form-row {
	float: left;
}

.form-row.right {
	position: relative;
	float: right;
	margin-right: 10px;
}

a.button.billing {
	position: absolute;
	top: -3px;
	right: -50px;
	padding-left: 10px;
}

a.button.save, a.button.save span {
	float: right;
	width: 108px;
}

a.button.cancel {
	margin: -2px 15px 0 0;
	height: 25px;
	line-height: 25px;
}

#buttons-container {
	margin: 15px 0 0 0;
	float: right;
	min-width: 200px;
}

.cart #buttons-container {
	width: 505px;
}

.account-details-page .required {
	margin-top: 20px;
	font-size: 10px;
}

.account-details-page label {
	font-size: 10px;
}


/* 3.6 My Orders List
------------------------------------------------------------------------------*/

.orders-list-page #content {
	padding-right: 40px;
	width: 595px;
}

.orders-list-page h2 {
	margin-bottom: 8px;
}

.orders-list-page table {
	width: 100%;
	margin-bottom: 25px;
}

.orders-list-page thead {
	font-weight: bold;
}

.orders-list-page td {
	height: 29px;
	line-height: 29px;
	border-bottom: 1px solid #999;
}

td.first {
	width: 255px;
}

td.last {
	text-align: right;
}

tfoot td {
	border: none;
	padding: 20px 0 0 5px;
}

tfoot a {
	color: #000;
}

tfoot a.active {
	margin-left: 15px;
	font-weight: bold;
}


/* 3.7 My Orders
------------------------------------------------------------------------------*/

.orders #content, .cart #content {
	width: 590px;
	padding-right: 45px;
}

.orders #content p {
	font-size: 10px;
	margin-bottom: 10px;
}

.orders .transaction, .orders #bill-shipping {
	border-bottom: 1px solid #999;
}

.orders #bill-shipping {
	padding: 20px 0 10px 0;
}

.orders .bill {
	float: left;
}

.orders .shipping {
	float: right;
}

.orders thead {
	font-weight: bold;
}

.orders td {
	height: 29px;
	line-height: 29px;
	border-bottom: 1px solid #999;
}

.orders td.first {
	width: 190px;
	text-transform: uppercase;
}

.orders td.centered {
	width: 200px;
	text-align: center;
}

.orders thead td {
	text-transform: none !important;
}

.orders tfoot td.noborder {
	border: none;
}

.orders tfoot td.label {
	padding-left: 95px;
	width: 105px;
	text-align: left;
	font-weight: bold;
}

.orders tfoot td {
	padding-top: 0;
	border-bottom: 1px solid #999;
}


/* 3.8 Shopping Cart
------------------------------------------------------------------------------*/

a.button.shadow.proceed, a.button.shadow.proceed span {
	float: right;
	width: 175px;
}

.cart tbody td {
	height: 93px;
	line-height: 93px;
}

.cart td img {
	float: right;
	padding: 10px 0;
}

.cart td.first {
	text-transform: uppercase;
}

.cart tfoot td {
	height: 20px;
	padding: 0;
	line-height: 20px;
	text-transform: uppercase;
}

.cart td.label {
	padding-left: 50px;
}

.cart td.grand {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #000;
	font-weight: bold;
}

.cart td.centered {
	padding-left: 50px;
	width: 120px;
}

.cart tfoot td.last.bottom {
	padding-bottom: 15px;
}

.cart tfoot td.top {
	padding-top: 15px;
}

.cart #buttons-container {
	margin: 5px 0 20px 0;
}

.cart table input[type=text] {
	display: inline-block;
	padding: 0 5px;
	height: 25px;
	line-height: 25px;
	width: 15px;
	border: none;
	text-align: center;
}

.cart table input[type=text], .cart table .item-name {
	margin: 35px 0;
}

.cart table .item-name {
	float: left;
}


/* 3.9 Imperial Beer History
------------------------------------------------------------------------------*/

.imperial-beer img.beer {
	margin-top: 20px;
}
.imperial-beer h2 { color: #111; }

/* 3.10 Imperial Beer Media
------------------------------------------------------------------------------*/

.imperial-beer #media-gallery {
	margin: 17px 0 20px 11px;
}

.imperial-beer #media-gallery li {
	float: left;
	height: 89px;
	width: 120px;
	position: relative;
	margin-right: 40px;
	background: #000;
}

.imperial-beer #media-gallery li img {
	position: absolute;
	top: -6px;
	left: -6px;
}

.imperial-beer #media-gallery li button {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 120px;
	height: 89px;
	border: 0 none;
}


/* 3.11 Cafe Britt Home
------------------------------------------------------------------------------*/
span.ir {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.cafe-brit #content {
	padding-right: 20px;
	width: 615px;
}

.cafe-brit #wrapper {
	background: url(../_ui/images/common/bg_cafebrit_content.png) no-repeat;	
	margin-top: -20px;
	padding-top: 20px;
	position: relative;
	z-index: 10;
}

.cafe-brit #sidebar {
	padding: 0 0 0 0;	
	margin-top: -1px;
}

#britt-subnav {
	margin: 40px 40px 20px;
	width: 244px;
	background: url(../_ui/images/cafe-britt-home/subnav_bottom.jpg) no-repeat 0 bottom;
}

#britt-subnav li {
	margin-top: -15px;
	padding: 20px 10px 1px 15px;
	border: none;
	line-height: 18px;
	height: auto;
	background: url(../_ui/images/cafe-britt-home/subnav_bg.png) no-repeat;
}

#britt-subnav li > a:hover {
	color: #006600 !important;
}

#britt-subnav .range {
	z-index: 1;
}

#britt-subnav .howto {
	z-index: 10;
}

#britt-subnav .know {
	z-index: 20;
}

#britt-subnav .cart {
	z-index: 30;
}

#britt-subnav a {
	font-weight: bold;	
	font-size: 22px;
	text-decoration: none;
	text-transform: none !important;
	color: #330000;
}

#britt-subnav li .britt-additional {
	display: block;
	margin-bottom: 10px;
}

#britt-subnav .britt-additional a {
	font: normal 11px Verdana, Helvetica, Arial, sans-serif !important;
}

#britt-subnav .britt-additional li.active a {
	font-weight: bold !important;
}

#britt-subnav .britt-additional li {
	margin: 0;
	padding: 0;
	height: 25px;
	line-height: 25px;
	background: url(../_ui/images/cafe-britt-home/additional_bottom.png) no-repeat left bottom;
}

#britt-subnav .britt-additional li.last {
	background: none;
}
#fb-like-box {
	margin: 20px 40px 40px 32px;
	height: 60px;
}

.cafe-brit .britt-intro {
	margin: 20px 0 0 -5px;
	overflow: auto;
	background: url(../_ui/images/cafe-britt-home/divider_vertical.png) no-repeat 296px 30px;
}

.cafe-brit .britt-intro a {
	font-size: 20px;
	font-style: italic;
	color: #330000;
}
.cafe-brit .britt-intro a:Hover {
	text-decoration: none;
}

.britt-intro ul li {
	float: left;
	width: 295px;
	margin: 0 7px 20px 0;
	text-align: center;
	background: url(../_ui/images/cafe-britt-home/divider_horizontal.png) no-repeat center bottom;
}

.logo-brit,
.logo-brit .ir {
	width: 142px;
	height: 201px;
	display: block;
}

.logo-brit {
	position: relative;	
	margin: 0 0 0 92px;
}

.logo-brit .ir {
	background: url(../_ui/images/cafe-britt-home/logo_cafe_brit.png);	
}

#pales {
	width: 960px;
	height: 115px;
	background: url(../_ui/images/common/pales.png);
	margin-top: -7px;
	position: relative;
	z-index: 11;
}


/* 3.12 Cafe Britt Text
------------------------------------------------------------------------------*/

.cafe-brit #content h2 {
	font-weight: bold;	
	font-size: 24px;
	color: #330000;	
	text-transform: none;
}

.cafe-brit #content img {
	float: right;
}


/* 3.13 Cafe Britt Product
------------------------------------------------------------------------------*/

#single-product {
	margin: 30px 0;
	padding-right: 20px;
}

.product-photo {
	float: left !important;
}

.product-info {
	/*padding: 20px;*/
	margin-top: 0;
	float: right;
	height: auto;
	width: 330px;
	/*background: url(../_ui/images/cafe-britt-product/bg_product_detail.png) no-repeat;*/
}

.product-info table td {
	border: none;
	padding: 5px 0 0 0;
	font-size: 18px;	
	font-weight: bold;
}

.product-info table thead {
	font-size: 16px;
	text-align: center;
}

.product-info table thead td {
	padding-bottom: 15px;
}

.product-info table tfoot a {
	padding: 0;
	float: right;
}

.product-info table tbody .left {
	padding-left: 20px;
	text-align: left;
}

.product-info table tbody .right {
	text-align: right;
	padding-right: 60px;
}

.product-info table input[type=text] {
	float: right;
	height: 27px;
	width: 54px;
	border: none;
	background: url(../_ui/images/cafe-britt-product/bg_input.png) no-repeat;
}

.free {
	color: #d41f4b;
}

.tabs {
	z-index: 10;
}

.tabs li {
	z-index: 1;
	float: left;
	margin-right: 10px;
}

.tabs a.current {
	background: url(../_ui/images/cafe-britt-product/bg_tab_active.jpg) no-repeat;
}

.tabs li a {
	display: block;
	padding: 5px 0;
	height: 23px;
	width: 158px;
	text-align: center;
	font-weight: bold;	
	font-size: 20px;
	background: url(../_ui/images/cafe-britt-product/bg_tab_inactive.jpg) no-repeat;
	color: #330000;
	text-decoration: none;
}

.panes {
	margin-top: -2px;
	margin-bottom: 10px;
	padding: 10px 20px 100px;
	z-index: 333;
	width: 290px;
	background: url(../_ui/images/cafe-britt-product/bg_panes_3.jpg) left bottom no-repeat #e6c88a;
}

.button.cart {
	display: block;
	height: 34px;
	width: 127px;
	background: url(../_ui/images/cafe-britt-product/button_cart.png) no-repeat;
}




/* 3.14 Cafe Britt Product Range
------------------------------------------------------------------------------*/

.price {
	font-weight: bold;
	font-size: 13px;	
}

#product-range li {
	float: left;
	position: relative;
	width: 103px;
	margin: 10px 50px 0 0;
	text-align: center;
	min-height: 195px;
}

#product-range li .badge {
	position: absolute;
	top: 11px;
	right: 3px;
	height: 80px;
	width: 81px;
	background: url(../_ui/images/cafe-britt-product-range/comingsoon_badge.png) no-repeat;
}

#product-range li a {
	text-decoration: none;
}





/* 3.15 Text Page
------------------------------------------------------------------------------*/
.text-page #content {
	padding-bottom: 15px;
}
.text-page #content table td { padding: 1px 0; }
.text-page #content table p { margin-bottom: 8px; }




/* 4. OVERLAY
--------------------------------------------------------------------------------
==============================================================================*/

.overlay {
	padding:40px;	
	width:576px;
	height: 445px;  
	display:none;
	background-image:url(../_ui/images/common/white.png);	
}

a.close {
	background:url(../_ui/images/common/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

#overlay_player { 		
	display:block;
	height:450px;
}




/* 5. PRINT
--------------------------------------------------------------------------------
==============================================================================*/


@media print {

	body { 
		font: normal normal 12pt/1.5em "Times New Roman", Times, serif; 
	}

	a[href]:after { 
		content: " (" attr(href) ") "; 
		font-size: 90%; 
	}

	a[href^="/"]:after { 
		content: " (http://domain.com" attr(href) ") "; 
	}

	ol#accessibility-nav, 
	.hide { 
		display: none !important; 
	}
}