@import "headers.css";

/* Only IE 5.x sees these rules */
@media tty {
 i{content:"\";/*" "*/}} @import 'global-ie55.css'; /*";}
}/* */


html,body
{
	margin: 0em;
	padding: 0em;
	background-color: white;
	color: rgb(69,74,64); /* A dark gray */

	/* This centers the page content for IE */
	text-align: center;
}

body
{
	font-size: 70.0%; /* Base font size */
}

/* This sets the font-types */
body, h1, h2, h3, h4, h5, h6, td, p, a, li, dt, dd, input, select, textarea
{
	font-family: Arial, sans-serif;
	text-transform: lowercase;
}

/* This turns off borders around images */
img
{
	border-width: 0em;

	/* Normally, I might not apply display:block to all images,
		but it happens to fit in this case */
	display: block;
}

/* Ordinary paragraphs, lists, and addresses */
p, ul, ol, dl, dl dd, address
{
	font-style: normal;
	margin-top: 0em;
	padding-top: 0em;

	margin-bottom: 1.0em;
	padding-bottom: 0em;

	font-size: 1.0em;
}

/* Line height settings */
p, li, dt
{
	line-height: 1.2;
}

/* Superscript items within paragraphs and list items */
p sup,
	li sup
{
	font-size: 0.9em;
}

/* General font sizing -- which shouldn't be necessary -- but IE could become confused otherwise */
input, textarea, select, table, td, th
{
	font-size: 1.0em;
}

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

/* General table properties */
table
{
	border-collapse: collapse; /* cells meet */
	border-spacing: 0em;

	font-size: 1.0em; /* This shouldn't be necessary but IE 5.x becomes confused without it */
	margin-bottom: 1.0em; /* This matches the margin-bottom on regular paragraphs */
}

table td, table th
{
	vertical-align: top;

	/* This prevents any browser defaults for th getting in the way */
	font-weight: normal;
	text-align: left;
}


/* This can be used to hide text from regular browsers while allowing it appear for text readers.
	It's the Aural Text Class from Standards Schmandards:
	http://www.standards-schmandards.com/index.php?2004/10/08/1-the-aural-text-class */
p.accessibility, li.accessibility, span.accessibility
{
	position: absolute;
	font-size: 0;
	left: -1000px;
}

acronym, abbr
{
	border-bottom: 1px dotted rgb(71,71,71); /* A dark gray */
	cursor: help;
}

/* ==================================== General Link Properties ===================================== */

a
{
	/* IE sometimes forgets to use the right cursor, especially on image-replaced headers */
	cursor: pointer;
	text-decoration: none;
}

a:link,
	a:visited
{
	color: rgb(151,161,149); /* A brownish quick-sand color */

	/* Visited links used to be rgb(121,131,119), a medium gray */
}
a:hover,
	a:active
{
	color: rgb(38,38,38); /* Almost black */
}

a#current-primary-nav,
	a#current-secondary-nav
{
	color: rgb(69,74,64) !important; /* A dark gray */
}

/* ============= Links within #copy =========== */

div#content div#copy a:link,
	div#content div#copy a:visited
{
	color: rgb(80,140,162); /* A bluish green */

	/* Visited links used to be rgb(121,131,119), a medium gray */
}

div#content div#copy a:hover,
	div#content div#copy a:active
{
	color: rgb(38,38,38); /* Almost black */
}

/* ============= Links within #secondary-nav =========== */

div#page div#secondary-nav ul li a:link,
	div#page div#secondary-nav ul li a:visited
{
	color: rgb(151,161,149); /* A brownish quick-sand color */

	/* Visited links used to be rgb(121,131,119), a medium gray */
}

div#page div#secondary-nav ul li a:hover,
	div#page div#secondary-nav ul li a:active
{
	color: rgb(38,38,38); /* Almost black */
}

/* ============= Links within #tertiary-nav =========== */

ul#tertiary-nav li h4 a
{
	display: block;
	padding-left: 0.4em;
	padding-right: 0.4em;
	padding-top: 0.6em;
	padding-bottom: 1.65em;
}

ul#tertiary-nav li h4 a:link,
	ul#tertiary-nav li h4 a:visited
{
	border: 1px solid rgb(217,220,213); /* A medium gray */

	color: rgb(137,144,130); /* Formerly rgb(115,122,106);, an Army green */
}

ul#tertiary-nav li h4 a:hover,
	ul#tertiary-nav li h4 a:active
{
	border: 1px solid rgb(69,74,64); /* A dark gray, the same as hover colors for regular links */

	color: rgb(69,74,64); /* A dark gray, the same as hover colors for regular links */
}

/* ======================================= Page =========================================== */

div#page
{
	margin-left: auto;
	margin-right: auto;
	text-align: left; /* This undoes the text-align center which is set on the body element for IE's sake */

	margin-top: 45px;
	width: 615px;

	/* This allows other elements to be absolutely positioned with respect to this */
	position: relative;
}

/* ================================ Content and Primary Nav =================================== */

/* This holds both #content and all the navigation bits */

div#page div#content-and-primary-nav
{
	/* This leaves room for the #logo and tagline */
	padding-top: 175px;

	/* This allows other elements to be positioned with respect to this */
	position: relative;

	/* The Mixes pages have backgrounds applied */
	background-position: bottom right;
	background-repeat: no-repeat;

	padding-bottom: 3.0em;
}

/* This makes use of auto-float-clearing:
	http://positioniseverything.net/easyclearing.html */

div#content-and-primary-nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div#content-and-primary-nav {display: inline-table;}

/* Hides from IE-mac \*/
* html div#content-and-primary-nav {height: 1%;}
div#content-and-primary-nav {display: block;}
/* End hide from IE-mac */

/* ================================ Content - Layout Properties =================================== */

/* This holds the body text within the page */
div#content-and-primary-nav div#content
{
	float: right;
	width: 68.7%; /* 420/615 = 68.7%. Formerly 73% (450/615 = 73%) */

	/* This allows other elements to be positioned with respect to this */
	position: relative;

	/* This leaves some space for the lava-lamp background image */
	padding-bottom: 0em;
}

/* Only IE/Windows sees this \*/
* html div#content-and-primary-nav div#content
{
	/* This helps prevent retardation in IE when floats are employed */
	display: inline;
}
/* End hiding from IE-mac */


/* ================================ Copy - Layout Properties =================================== */

/* This holds the copy within the page */
div#content div#copy
{
	/* This is a guess at what might be used if Mark selects an image to go
		at the top of the image pages. But, it's commented out for now since
		the image doesn't exist yet. */
	/* padding-top: 160px;  */

	/* This is overridden on the Mixes pages and the home page */
	padding-left: 0em;
}

/* ================================ Primary Nav - Layout Properties =================================== */

/* The primary nav currently runs down the side of the page */
div#content-and-primary-nav ul#primary-nav
{
	float: left;
	width: 23%; /* 140/615 = 23%. Formerly 24% (150/615 = 24%) */

	margin: 0em;
	padding: 0em;

	margin-top: -0.45em; /* This offsets the 0.5em padding-top on the first item */
}


/* Only IE/Windows sees this \*/
* html div#content-and-primary-nav ul#primary-nav
{
	/* This helps prevent retardation in IE when floats are employed */
	display: inline;
}
/* End hiding from IE-mac */

/* ================================ Secondary Nav - Layout Properties =================================== */

/* The secondary nav is used on pages such as those for individual-beverages */
div#page div#secondary-nav
{
	position: absolute;

	top: 110px;
	right: 0px;

	/* (This is the same width as #content) */
	width: 73%; /* 450/615 = 73% */

	border-top: 1px solid rgb(217,220,213); /* A medium gray, the same color as the border on the tertiary-nav items */
	padding-top: 0.3em;

	/* There'd normally be a "padding-left: 26px" here but that'd trigger the box model. So,
		there's an equivalent margin-left on "div#secondary-nav ul" instead */
}

/* ================================ Primary Nav - Interior Properties =================================== */

ul#primary-nav li
{
	margin: 0em;
	padding: 0em;
	list-style-type: none;
}

/* Only IE/Windows sees this \*/
* html ul#primary-nav li
{
	display: inline;
}
/* End hiding from IE-mac */


/* Only IE/Windows sees this \*/
* html ul#primary-nav li,
	* html ul#primary-nav li a
{
	/* Once again, the Holly Hack helps IE understand basic CSS:
		http://www.positioniseverything.net/articles/hollyhack.html */
	height: 1%;
}
/* End hiding from IE-mac */


ul#primary-nav li a
{
	display: block;
	padding-top: 0.45em;
	padding-bottom: 0.45em;
}

ul#primary-nav li a:link,
	ul#primary-nav li a:visited
{
	background-image: none;
}

ul#primary-nav li a:hover,
	ul#primary-nav li a:active,
	ul#primary-nav li a#current-primary-nav
{
	background-image: url(../images/primary-nav/current-primary-nav-indicator.png);
	background-repeat: no-repeat;
	background-position: 0.3em 0em; /* Just to be sure */
}


/* ============================== Secondary Nav - Interior Properties ================================= */

div#page div#secondary-nav ul
{
	margin: 0em;
	padding: 0em;

	margin-left: 17px;
}

div#secondary-nav ul li
{
	margin: 0em;
	padding: 0em;
	list-style-type: none;

	float: left;
	width: 9.7em; /* Default width */
}

/* Only IE/Windows sees this \*/
* html div#secondary-nav ul li,
	* html div#secondary-nav ul li a
{
	/* Once again, the Holly Hack helps IE understand basic CSS:
		http://www.positioniseverything.net/articles/hollyhack.html */
	height: 1%;
}
/* End hiding from IE-mac */

div#secondary-nav ul li a
{
	background-repeat: no-repeat;
	background-position: 0em 0.3em;
	padding-left: 9px; /* This leaves room for the background image */
	padding-right: 1.8em; /* This used to be a "margin-right" of 1.8em" on the list items */
	display: block;
}

/* Indicator image for "Lavender Lemonade" */
div#secondary-nav ul li#secondary-nav-lavender-lemonade a:hover,
	div#secondary-nav ul li#secondary-nav-lavender-lemonade a#current-secondary-nav
{
	background-image: url(../images/bullets/lavender-lemonade.png);
}

/* Properties for "Lavender Lemonade" list-item */
div#secondary-nav ul li#secondary-nav-lavender-lemonade
{
	width: 7.0em;
}

/* Indicator image for "Mexican Martini" */
div#secondary-nav ul li#secondary-nav-mexican-martini a:hover,
	div#secondary-nav ul li#secondary-nav-mexican-martini a#current-secondary-nav
{
	background-image: url(../images/bullets/mexican-martini.png);
}

/* Properties for "Mexican Martini" list-item */
div#secondary-nav ul li#secondary-nav-mexican-martini
{
	width: 6.1em;
}

/* Indicator image for "Pomegranate Cosmopolitan" */
div#secondary-nav ul li#secondary-nav-pomegranate-cosmopolitan a:hover,
	div#secondary-nav ul li#secondary-nav-pomegranate-cosmopolitan a#current-secondary-nav
{
	background-image: url(../images/bullets/pomegranate-cosmopolitan.png);
}

/* ============= Buzz bits =============== */

/* Indicator image for "International Buzz" */
div#secondary-nav ul li#secondary-nav-international-buzz a:hover,
	div#secondary-nav ul li#secondary-nav-international-buzz a#current-secondary-nav
{
	background-image: url(../images/bullets/international-buzz.png);
}

/* Properties for "International Buzz" list-item */
div#secondary-nav ul li#secondary-nav-international-buzz
{
	width: 15.0em;
}


/* Indicator image for "USA Buzz" */
div#secondary-nav ul li#secondary-nav-usa-buzz a:hover,
	div#secondary-nav ul li#secondary-nav-usa-buzz a#current-secondary-nav
{
	background-image: url(../images/bullets/usa-buzz.png);
}

/* Properties for "USA Buzz" list-item */
div#secondary-nav ul li#secondary-nav-usa-buzz
{
	width: 7.0em;
}

/* ================================== Tertiary Nav ==================================== */

/* The tertiary nav current just appears on the "Beverage" pages */

div#content ul#tertiary-nav
{
	margin: 0em;
	padding: 0em;

	position: absolute;
	top: 0px;
	right: 0px;
	width: 10.5em;
}

ul#tertiary-nav li
{
	/* A clean slate */
	margin: 0em;
	padding: 0em;

	list-style-type: none;
	padding-bottom: 0.6em;
}


/* =============================== Elements within the #content area ========================== */

/* Several pages feature a product image and the "featured distraction"
	is a moving image on a few pages (currently via Flash) */
div#content img#product-image,
	div#content div#featured-distraction
{
	position: absolute;
	top: 0px;
	left: 0px; /* This aligns the product image with the secondary-nav */
}

/* =============================== Elements within the #copy area ========================== */


/* This is primarily used on the home page */
div#content div#copy blockquote
{
	margin: 0em;
	padding: 0em;
}

div#copy blockquote p
{
	font-size: 1.05em;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	line-height: 1.4em;
	margin-bottom: 0.8em;
	text-indent: -0.3em;
}

/* Citations to go with a blockquote */
div#copy p cite
{
	display: block;

	line-height: 1.1em;

	font-style: normal;
	font-weight: bold;

	margin-bottom: 2.0em;
}

/* Definition lists - primarily used on the Contact page at the moment*/
div#copy dl,
	div#copy dl dt,
	div#copy dl dd
{
	margin-left: 0em;
	padding-left: 0em;
}

div#copy dl
{
	/* margin-bottom: 4.8em; */
}

div#copy dl dt
{
	/* This relies upon margin collapsing to to be too much. (For instance, it'll
		automatically merge w/ an h1's margin-bottom when needed */
	margin-top: 1.0em;
}

div#copy dl dd
{
	margin-bottom: 0em; /* Just to be sure */
}

/* The "Credits" list appears on the Contact page */

div#copy ul#credits
{
	margin-top: 9.0em;
	padding-top: 0.7em;
	margin-left: 0em;
	padding-left: 0em;

	/* A medium gray, the same as the other horizontal lines within the site */
	border-top: 1px solid rgb(217,220,213);
}

div#copy ul#credits li
{
	margin-left: 0em;
	padding-left: 0em;
	list-style-type: none;
}


/* This is the disclaimer about the product not containing alcohol. */
div#copy p.disclaimer
{
	color: rgb(151,161,149); /* A brownish quick-sand color */
	font-size: 1.05em;
}


/* ================================ Other bits within #page ============================ */

/* The company logo */
div#page div#logo,
	div#page img#logo
{
	position: absolute;
	top: 0px;
	left: 0px;
}

/* The dimensions for the logo-image are set through CSS so that
	the logo can change in size, if needed, without having to modify the HTML */

div#page div#logo img,
	div#page img#logo
{
	width: 169px;
	height: 76px;
}

/* ================================= Footer ================================= */

div#footer
{
	font-size: 0.9em;
	color: rgb(164,164,164); /* A very light gray */

	/* This ensures that there's a gutter bettween the footer and the bottom
		of the viewport; it makes use of margin collapsing, natch. */
	margin-bottom: 1.0em;
}