/* graphico.co.uk */

/*
	colour pallette
	======================
 	text: #003414;
*/

.clearBoth
{
	clear: both;
}

.invisible { display: none; }

/* Hide content for visual users. E.g. skip links	*/
.hide
{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* Can't hide legends cross browser with negative text indent */
legend.hide
{
	font-size: 0.005em;
	visibility: hidden;
}

fieldset { border: none; }

/* Used to space an ellipse nicely */
.ellipse { letter-spacing: -0.15em; }

/* Clear floats on a background */
.theBreaker
{
	height: 0.005em;
	clear: both;
	overflow: hidden;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* Generic Levin image replacement -  
   http://levin.grundeis.net/files/20030809/alternatefir.html */
.replace
{ 
	position: relative; 
	margin: 0px; 
	padding: 0px; 
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ overflow: hidden; /* */ 
}

.replace span
{
	display: block; 
	position: absolute; 
	top: 0px; 
	left: 0px;
	z-index: 1; /*for Opera 5 and 6*/ 
}

/*	For evil CMSs */
u { text-decoration: none; }
/*	END	Templated styles	*/

/*	Site Default Styles		*/
body
{
	font: 62.5% Arial, sans-serif;
	background: #003414 url(../../Assets/SiteImages/body-default-BG.jpg) left top repeat-x;
	text-align: center;
	min-width: 880px;
}

p, li, dd, dt, h4, h5, h6, span
{
	font-family: Verdana, Helvetica, Arial, sans-serif; 
	color: #003414;
	line-height: 1.4em;
	font-size: 1em;
	margin-bottom: 0.8em;
}

a { color: #fff; }
#wrap .col a 
{
	color: #003414;
	text-decoration: underline; 
}
#wrap .col a:hover { text-decoration: none; }

.accessible li a:focus,		
.accessible li a:active 
{
	background: #FFFFFF;
	color: #003414;
	left: 910px;
	top: 910px;
}

.accessible
{ 
	position: absolute;
	top: -900px;
	left: -900px;
	text-align: left;
}

.accessible li
{ 
	width: auto;
}

.accessible li a {
	display: block;
	line-height: 1.6em;
	padding: 5px;
	position: absolute;
	width: 10em;
}

#wrap 
{
  font-size: 1em;
  width: 880px;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  background: #fff;
  position: relative;
}

#wrap a { text-decoration: none; }
#wrap a:hover { text-decoration: underline; }
#wrap a:focus,
#primary-nav a:focus
{ 
	background: #fff; 
	color: #003414;
}

.video #wrap .options a
{ 
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.video #wrap .options a:focus,
.video #wrap .options a:active
{
	color: #003414;
}

.col 
{
	position: relative;
	float: left;
	margin-right: 20px;
	width: 404px;
}

#home #col1 
{
	padding-bottom: 80px; 
	width: 345px;
}

#home #col2
{
	clear: left;
	width: 100%;
	margin: 0;
}

.last, #col2 #col1 { margin-right: 0; }

#branding 
{
	position: relative;
	background: #003414; 	
}

h1 span
{ background: url(../../Assets/SiteImages/h1-default-BG.jpg) top left no-repeat; }

#branding .util
{ 
	background: url(../../Assets/SiteImages/div-branding-BG.jpg) 0 0 no-repeat; 
	height: 27px;
}

#branding .util p
{ 
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	padding: 4px 31px 0 0;
	text-align: right;
	margin-bottom: 0;
	line-height: 17px;
}

#branding .util p .signin
{
	display: block;
	color: #fff;
	margin-bottom: 0;
}

#branding .util
{
	margin-bottom: 0;
	display: block;
	color: #fff;
}

#branding .util p span.signOut,
#branding .util p input.signOut
{
	/* position: relative;
	top: 8px;
	right: 8px; */
	display: block;
	float: right;
	margin: 0 5px 0 0;
}

#branding .util p span.signOut
{
	color: #fff;
	line-height: 17px;
	margin-top: 1px;
}

#branding .util p input.signOut
{
	margin: 0;
}


 #primary-nav
{ 
	background: url(../../Assets/SiteImages/div-branding-BG.jpg) 0 -28px no-repeat; 
	height: 83px;
	border-top: 1px solid #fff;
}

#home #primary-nav
{ background: url(../../Assets/SiteImages/div-branding-BG.jpg) 0 -112px no-repeat; }

#primary-nav ul
{ 
	margin: 0 23px 0 0;
	padding-top: 31px;
	float: right;
}

#primary-nav li { margin: 0; }

#branding a { color: #fff; }

#branding p a { text-decoration: underline; }
#branding p a:hover { text-decoration: none; }

#primary-nav li.first a
{ 
	padding-left: 12px; 
	border-left: none;
}

#primary-nav a
{ 
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 0 12px;
	padding-left: 11px;
	border-left: dotted 1px #37d942;
	text-transform: uppercase;
	display: block;
	line-height: 1.4em;
}

#primary-nav a.selected
{
	color: #96c052;
}

#primary-nav a.selected:hover
{
	text-decoration: none;
}

#main 
{
	background: url(../../Assets/SiteImages/div-wrap-BG.jpg) 0 0 no-repeat; 
	padding: 51px 23px 20px 23px;
	min-height: 460px;
}

.video #main 
{ background: url(../../Assets/SiteImages/div-wrapAbout-BG.jpg) 0 0 no-repeat; }

.form #main 
{ background: url(../../Assets/SiteImages/div-wrapPackaging-BG.jpg) 0 0 no-repeat; }

.glass #main 
{ background: url(../../Assets/SiteImages/div-wrapFreeGlass-BG.jpg) 0 0 no-repeat; }

#home #main 
{ background: url(../../Assets/SiteImages/div-wrapHome-BG.jpg) 0 0 no-repeat; }

#site-info 
{
	font-size: 1.1em;
	background: #003414;
}

#site-info { padding: 0 10px; }

.navigation li
{
	float: left;
	margin: 0 16px 0 0; 	
}

#site-info li a { display: block; }

.navigation li a
{
	color: #9ecc12;
	line-height: 2em;
}

h1, h1 span
{
	width: 93px;
	height: 127px;
}

#wrap h1
{
	position: absolute;
	top: 10px;
	left: 23px;
	z-index: 1000;
	font-size: 1.8em;
	color: #fff;
}

h2
{
	font-size: 3em;	
	color: #003a1e;
	margin-bottom: 0.6em;
}

.col ul
{
	list-style: disc outside;
	padding: 0 20px;
}

ul.options li { margin-bottom: 0.8em; }

ul.options li .gutter
{
	background: url( ../../Assets/SiteImages/ul-options-BG.gif ) 0 0 no-repeat; 
	padding: 20px 15px 0 15px;
}

ul.options li.primary .gutter
{ background: url( ../../Assets/SiteImages/ul-options-BG.gif ) -1152px 0 no-repeat; }

ul.options li .base
{
	background: url( ../../Assets/SiteImages/ul-options-BG.gif ) -384px 0 no-repeat;
	height: 15px;
}

ul.options li.primary .base
{ background: url( ../../Assets/SiteImages/ul-options-BG.gif ) -1536px 0 no-repeat; }

ul.options 
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 384px;
}

#home ul.options { width: 100%; }
#home ul.options li 
{
	width: 384px; 
	position: relative;
}

h3
{
	font-size: 1.6em;
	color: #fff;
	line-height: 1.2em;
	margin-bottom: 0.55em;
}

/*	RM: Font reverted because Gill Sans looks scritchy / blobby on two lines */
ul.options h3,
ul.options p
{
	float: left;
	width: 170px;
}

#home ul.options h3
{
	font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, Sans-Serif;
}

#home ul.options h3,
#home ul.options p
{ width: 260px; }

/*	RM: Background image is wider for the DM Club panel so need to reduce width of copy */
#home ul.options .primary h3
{
	margin-bottom: 0.93em;
}

#home ul.options .primary p
{
	width: 230px;
}

#home ul.options p
{
	color: #fff;
	margin-bottom: 0.8em;
}

#home ul.options li { margin-bottom: 3em; }	

#home ul.options li .gutter { min-height: 11em; }

#troubleshooting ul.options h3 { width: 85%; }

ul.options .img
{
	padding-bottom: 7px;
	background: url( ../../Assets/SiteImages/ul-options-BG.gif ) -768px 67px no-repeat;
	float: right;
}

#home ul.options .img
{
	padding-bottom: 0;
	background: none;
	float: none;
	position: absolute;
	right: -20px;
}

#home ul.options #pass { top: -45px; }
#home ul.options #pint 
{ 
	top: -10px;
	right: -1px; 
}
#home ul.options #pack 
{ 
	top: -20px;
	right: -26px; 
}
#home ul.options #fa 
{ 
	top: -20px;
	right: -16px; 
}

ul.options img { border: solid 3px #72a420; }
#home ul.options img { border: none; }
ul.options p { margin-bottom: 0; }
#troubleshooting ul.options p { clear: left; }

#media-player
{
	width: 375px;
	height: 302px;
	background: #000;
	position: relative;	
	margin: 0 0 0 21px;
}

#media-player .noFlash
{
	width: 75%;
	border: solid 5px #ccc;
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 10px;
}

.noFlash p { color: #ccc; }
#wrap .noFlash a { text-decoration: underline; }

label, .label 
{
	color: #003414;
	font-size: 1.1em;
	font-weight: bold;
}

label, .label, input, select, textarea
{	
	display: block;
	margin: 0pt 0pt 5px;
}

label,
input, 
textarea,
select.large
{ width: 270px; }

fieldset .input { margin-bottom: 5px; }

fieldset .input input
{
	display: inline;
	width: auto;
	margin: 0;		
}

fieldset .input label
{
	display: inline;
	margin: 0 0 0 5px;	
}

fieldset .input a { color: #00562C; }

#dob select 
{
	display: inline;
	width: 80px;
}

.glass fieldset,
.form fieldset,
#wheretobuy .col .innerWrap,
#dmclub .col .innerWrap,
#findNearest .col .innerWrap,
#basket .col .innerWrap,
#checkout .col .innerWrap,
#payment .col .innerWrap
#lda .col .innerWrap
{
	width: 364px;
}

fieldset#dob
{
	background: none;
	padding: 0;
	margin-left: 0;
	min-height: 1px;
}

label img, .label img 
{
	padding-top: 3px;
	vertical-align: top;
	margin-right: 5px;
}

/* .msg { padding: 15px 20px 15px 20px; } */
p.pmsg
{
	background: #003a1e;
	padding: 10px 10px 10px 20px;	
	margin-right: 30px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: bold;	
}

.msg h3 { color: #003a1e; }

.msg ul
{
	background: #003a1e;
	padding: 10px 30px 1px 30px;	
	margin-bottom: 15px;
}

.msg ul li
{
	color: #fff;
	font-weight: bold;	
}

.popup h2 { font-size: 2em; }
.popup 
{
	text-align: left; 
	min-width: 620px;
}

.popup h3 
{ 
	font-size: 1.6em; 
	color: #003414;
}

.popup #wrap 
{
	width: 600px; 
	margin: 0 0 0 5px;
}

.popup #wrap a 
{
	color: #003414;
	text-decoration: underline;
}

/*
	PB: so much nesting going on ems impractical;
*/
.popup p,
.popup li
{ font-size: 11px; }

.popup #main { background: none; }

.popup #wrap a:hover { text-decoration: none; }

#buykeg .options { width: auto; }
#buykeg .options li { background: none; }

#buykeg .options li .gutter
{ 
	background: url(../../Assets/SiteImages/fieldset-default-BG.png) no-repeat 0 0;
	padding-bottom: 0;
}

#buykeg .options h3,
#buykeg .options p
{ 
	margin-left: 10px; 
	float: left;
	width: auto;
	margin-bottom: 0.8em;
}

#buykeg .options h3 
{
	 color: #003414; 
	 font-size: 1.2em;
	 font-family: Verdana, Helvetica, Arial, sans-serif;
}

#buykeg .options p
{
	 padding: 0;
	 width: 250px;
}
#buykeg .options p.msg,
#buykeg .options p.price
{ color: #6da021; }

#buykeg .options fieldset 
{
	padding: 0;
	background: none;
	margin-left: 10px;
	float: left;
}

#buykeg .options input { margin-bottom: 0; }

#buykeg .options .base 
{
	height: 20px;
	background: url(../../Assets/SiteImages/fieldset-base-BG.png) no-repeat left bottom; 
	line-height: 0.005px;
	font-size: 0.005px;
}

#buykeg .options .img 
{
	float: left;
	background: none;
	padding: 0;
}

#buykeg .options img { border: none; }	

#buykeg a.buyLink {float: right;}

#next
{
	position: absolute;
	right: 20px;
}

.left { float: left; }
.right { float: right; }

#wheretobuy #col1 dl
{
	width: 175px;
	float: left;	
}

#wheretobuy #col2 dl
{
	width: 175px;
	float: left;	
	margin-right: 10px; 
}

#wheretobuy #col2 dl.last { margin-right: 0; }

#wheretobuy h4 { font-size: 1.4em; }

#animated-buy 
{
	position: absolute;
	top: 130px;
	right: 48px;	
}
#col2 #animated-buy 
{
    position: relative;
    top: 8px;
    left: 0;
}

#wheretobuy #col2 dl.lookup
{
	margin-right: 0;
	width: 100%;
}

dl.lookup dd
{
	margin-right: 5px;
}

.logMessage
{
	text-transform: uppercase;
}

/*	RM added 16/06/08 */
input.submit
{
	margin-top: 10px;
}

#dob select.month,
#lda select.month
{
	width: 90px;
}

#lda h2
{
	font-size: 2em;
}

#lda p
{
	width: 364px;
}

#lda fieldset ul
{
	margin-left: 0;
	padding-left: 0;
}

#lda fieldset li
{
	width: 360px;
	list-style: none;
	padding-left: 0;
}

/* Hints and Tips page */
#hints ol.hintlist
{
	margin-left: 1px;
}

#hints ol.hintlist li
{
	width: 156px;
	height: 219px;
	text-indent: -9999px;
	float: left;
	margin-right: 13px;
}

#hints ol.hintlist li#keepon
{
	margin-right: 0;
}

/*	IRT on the 5 main items */
#temp, #temp span {background: transparent url(../../Assets/SiteImages/Hints/temp.gif) no-repeat left top;}
#precool, #precool span {background: transparent url(../../Assets/SiteImages/Hints/precool.gif) no-repeat left top;}
#rest, #rest span {background: transparent url(../../Assets/SiteImages/Hints/rest.gif) no-repeat left top;}
#pour, #pour span {background: transparent url(../../Assets/SiteImages/Hints/pour.gif) no-repeat left top;}
#keepon, #keepon span {background: transparent url(../../Assets/SiteImages/Hints/keepon.gif) no-repeat left top;}

#hints ul.hintlist
{
	width: 395px;
	margin-top: 26px;
	margin-left: 20px;
	float: left;
	list-style: disc outside;
}
/*	End hints and tips */

/*	h3 inside white panels */
#basket h3,
#findNearest h3,
#payment h3
{
	color: #003a1e;
}

/*	Payment page - start and end dates for CCs*/
.startEndDates legend
{
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 13px;
}

.startEndDates label
{
	line-height: 21px;
	margin-left: 20px;
	margin-right: 5px;
}

.startEndDates label,
.startEndDates select
{
	float: left;
}
/*	End start end dates */

/*	Order totals */
.finalRow
{
	font-weight: bold;
	font-size: 1.1em;
}

/*	RM: Change request - four columns for teh Booths results page */
.fourColHack
{
	float: left;
	width: 175px;
}

.fourColHack.onRight
{
	margin-left: 7px;
}

ol.numbered
{
	list-style: decimal inside;
}

.button1
{
	margin-right: 13px;
}

.glass .ctaFirst
{
	display: block;
	margin-bottom: 13px;
}

#findNearest #col2 p
{
	width: 49%;
}

#home ul.options a
{
	color: #fff;
	font-weight: bold;
}

/*	IE fix because supersleight can cause issues with links and inputs */
.innerWrap
{
	background: url( ../../Assets/SiteImages/fieldset-default-BG.png ) 0 0 no-repeat;
	padding: 20px;
	min-height: 500px;
}

#lda h3,
#default h3
{
	color: #003A1E;
	margin-top: 1em;
}

.purchaseSummary
{
	border-collapse: collapse;
	width: 100%;
}

.purchaseSummary th,
.purchaseSummary .totals
{
	background-color: #003616;
	color: #fff;
	font-weight: bold;
}

.purchaseSummary td,
.purchaseSummary th
{
	padding: 5px 2px;
	
}

#terms li
{
	list-style-position: outside;
}

#dmclub a.left,
#dmclub a.right
{
	margin-top: 10px;
}

/*	RM: 23/07/08 - New popup for 3D secure message */
.imagePanel
{
	text-align: center;
}

.imagePanel img
{
	margin: 5px;
}

/*	RM: 29/07/08 - Novelli competition */
#novelli #main
{
	background: url(../../Assets/SiteImages/div-novelli-BG.jpg) 0 0 no-repeat;
	min-height: 475px;
}

#novelli .innerWrap
{
	padding: 40px;
}

#novelli legend
{
	font-weight: bold;
	font-size: 1.2em;
	color: #003414;
	margin-bottom: 10px;
}

#novelli input,
#novelli label
{
	width: auto;
	display: inline;
	margin: 0;
}

#novelli input
{
	margin: 0 5px 0 0;
}

#novelli label
{
	position: relative;
	top: -3px;
}

#novelli input.button
{
	margin-top: 15px;
}

/* DM page */
#novelliPanel
{
	width: 372px;
	height: 180px;
	background: #fff url(../../Assets/SiteImages/dmNovelli.jpg) no-repeat left top;
	margin: 30px auto;
	padding: 20px;
}

#novelliPanel h3
{
	color: #003A1E;
}

#novelliPanel p
{
	width: 200px;
}
/*	END Site Default Styles	*/

/*	Darius Karimi - 06/08/08 */
/* Basket.aspx	*/

.Pay_logos {padding: 10px 5px;}

