/* ---------------------------------------------------------------- CORE HTML */
/* Set font size to 1 to 1 pixel - em ratio */
body {
  font-size: 62.5%;
  font-family: Arial, Verdana, sans serif;
}

h1 {
  font-family: "Arial Black" sans serif;
  font-weight: normal;
  font-size: 2.5em;
  color: black;
}

h2 {
  font-family: "Arial Black" sans serif;
  font-weight: normal;
  font-size: 1.4em;
  color: #FFF;
  background: #CC0000;
  display: block;
  padding: 5px 18px 5px 18px;
}

h3 {
  font-family: Arial, Verdana, sans serif;
  font-weight: normal;
  font-size: 1.4em;
  color: #FFF;
  background: #CC0000;
  display: block;
  padding: 5px 9px;
  margin-bottom: 12px; 
}
h3.black {background: #000;}
#centre h3.black, #centre h3.blackscorcher {font-size: 1em;}
h3.scorcher {
  background: url("../img/style/scorcher.gif") top right no-repeat #CC0000;
  padding-right:110px;
}
h3.blackscorcher {
background:#000000 url(../img/style/scorchermini.gif) no-repeat scroll right top;
padding-right:80px;
}

h3.specials {
  font-size: 1.6em;
  background: #FFF;
  color: #000;
  font-weight: bold;
  margin:0;
}
h4 { color: #CC0000; font-size: 1.2em;}
h4 span {color: #555;}
h5 { font-size: 1.2em; display: inline;}
h5 span { font-size: 0.7em;}
#centre p, #centre li {color: #555;}
strike { color: #CC0000;}

/* ------------------------------------------------------------------- LAYOUT */
#page {
  width: 770px;
  margin: 25px auto;
}

#page #centre{
	font-size:1.2em;
}

table.main {
  margin-top: 30px;
}

table.main td {
	width: 50%;
	vertical-align: top;
	padding: 5px 5px;
}

#centre table.main td{ 
	color: #000;
	font-size: 1em; 
	line-height: 1.4em;
}
 #centre table.main td p{ 
	color: #000;
}

#container {
  margin-top: 5px;
  /*
    left column: 170px total, 165px width, 5px right margin
    centre column: 440px total, 435px width, 5px right margin
    right column: 160px total, 160px width
  */
}

#container .column {
  float: left;
}

#left {
  width: 165px;
  margin-right: 5px;
}

#centre {
  width: 435px;
  margin-right: 5px;
}

#right {
  width: 158px;
}

#footer {
  clear: both;
  color: #FFF;
  background: #CC0000;
  text-align: center;
  font-size: 1.1em;
  line-height: 3em;
}

/* ------------------------------------------------------------ BUNDLE STYLES */
h3.bundleheader {
  background: url("../img/style/bundle.gif") top right no-repeat #000000;
  font-size: 1.1em;
  margin-bottom: 5px;
}

table.bundle {
  width: 435px;
  border-spacing: 0;
}

table.bundle td {
  padding: 4px;
  margin: 0;
  background: #FFCCCC;
  color: #000;
  border-bottom: solid 4px #FFF;
}

table.bundle td h5{
	line-height:1em;
}

table.bundle td.number {
  font-family: "Arial Black" sans serif;
  color: #FFF;
  font-size: 5em;
  text-align: center;
  border-right: 2px solid #FFF;
}

table.bundle td.description {
  padding: 6px 10px;
  font-size: 1.1em;
  line-height: 1.1em;
}

/* ------------------------------------------------------------ HEADER STYLES */
img.logo {padding: 0 11px 0 10px;}
a.viewBasket {
  font-size:	11px;
  padding:		6px 0 0 30px;
  margin:		5px 0 0 25px;
  color: #000;
  background: url('../img/style/basket.gif') no-repeat bottom left transparent;
  float:		left;
}
/* --------------------------------------------------------------------- MENU */
#menu {
  margin:		0;
  padding:		0;
}
#menu ul {
  padding: 0;
  margin: 5px 0 0 10px;
  float:		left;
}

#menu li { 
  background-color:	#ffffff;
  border:			0;
  float:			left;
  padding:			5px 0 5px 0;
  width:			80px;
  margin:			0;
  margin-right:		1px;
  text-align:		center;
  background-image:	url(/img/bg_tabb.gif);
  background-repeat:	no-repeat;
}
#menu li a {
  color: #000000;
  font-size: 12px;
  font-weight: bold;
}

#menu form {
	float:				left;
	width:				250px;
	padding:			0;
	margin:				0;
}	

#menu form label {
	width:		80px;
	float:		left;
	font-size:		11px;
	margin:			6px 5px 0 0;
	text-align:		right;
	padding:		5px 0 0 0;
}

#menu form input.text {
	width:		100px;
	float:		left;
	margin:		7px 0 0 0;
	font-size:		10px;
	padding:		2px;
}

#menu form input.submit {
	width:		40px;
	float:		left;
	margin:		6px 0 0 5px;
	padding:	2px;
	font-size:	9px;
}

/* ------------------------------------------------------------------ LEFT COLUMN */
.leftimage { 
  margin: 5px 0; 
}

/* ------------------------------------------------------------------ CONTENT */
.boxout { margin: 5px 0; border: solid 1px #999;}
/*
  For center column boxouts:
  2px border + 213px width (left box)
  + 5px spacing between + 
  2px border + 213px width (right box)
  = 435px (centre column width)
*/
.boxoutCentreRight {
  float: right;
  width: 213px; 
  min-height: 185px;
  margin: 5px 0;
  border: solid 1px #999;
  font-size:1em;
}

.boxoutCentreLeft {
  float: left;
  width: 213px;
  min-height: 185px;
  margin: 5px 0;
  border: solid 1px #999;
  font-size:1em;
}

#left .boxout ul {
  list-style-image: url("../img/style/blackdot.gif");
  margin: 10px;
  padding-left: 13px;
  color: #333;
  font-size: 1.2em;
}
#left .boxout p {
	color:#333333;
	font-size:1.2em;
	margin:10px;
	padding-left:13px;
}

#centre .boxout ul {
  list-style-image: url("../img/style/reddot.gif");
  margin: 10px;
  padding-left: 13px;
  color: #333;
}

.boxout ul li a, .boxout ul li a:link { color: #000; font-weight: bold;}
.boxout ul li a:hover { border-bottom: solid 1px #000;}

.boxoutPadding { padding: 0 10px 10px 10px; }
#left .boxoutPadding p {
	font-size:1.1em;
}
#centre .boxoutPadding p {
	font-size:0.9em;
}
#right .boxoutPadding p {
	font-size:1.1em;
}
.boxoutPadding img { margin-right: 10px; }

#right .boxoutPadding form {
	margin:0 0 10px 0;
}
#right form input.close-margin {
	margin-bottom:1px;
}
#right form .submit {
	margin-top:2px;
	margin-left:4px;
}
#right .branding-imgs{
	width:100%;
}
#right .branding-imgs img{
	float:left;
	padding:0 0 0 0;
}

/* Change this value in order to make the left and right cols end at the same place */
/* Would prefer to use a background image, but x-browser issues make this easier */
.leftColHeightEqualiser {height: 60px;}

.left { float: left;}
.right { float: right;}
.clearAll { clear: both; }

/* -------------------------------------------------------------------- FORMS */
form { margin: 20px 0; text-align: center;}
input.text { border: solid 1px #999; width: 84px;}
input.long { width: 140px;}
label { font-size: 1.3em; padding-right: 5px;}
.submit { margin: 10px 0 0 0; border:1px solid #000;}


/* ------------------------------------------------------------ FOOTER STYLES */
#mw-branding{
  text-align:center;
  margin: 0 auto;
  padding: 0.5em 0;
  width:770px;
  font-size:1.2em;
}
#mw-branding a{
	color:#000000;
	background-color:inherit;
}
.copyright { float: right; padding-right: 10px;}
#footer a, #footer a:link, #footer a:visited { color: #FFF;}
#footer a:hover { border-bottom: solid 1px #FFF;}

#menu form { display: inline; }

/* ------------------------------------------------------------ NEW JOOP */

.clear-above {
  clear:both;
}

a.product_name { color: #ffffff;}

a.more, a:link.more { color: #000000; font-weight: bold;}
a:hover.more { border-bottom: solid 1px #000000;}

#account {
  float:right;
  width: 595px;
  margin-left: 5px;
}

#account {
  font-size:1em;
}

#account ul, #account ol, #account ul li ul, #account ol li ul {
  font-size:1.1em;
  line-height:1.5em;
  margin:0pt 10px 0pt 0pt;
  padding-bottom:1.5em;
}

#account p, #account table {
  font-size:1.2em;
  line-height:1.5em;
  margin-top: 5px;
  padding-bottom: 5px;
}

#account h2 {
  margin-bottom:0.5em;
}

#account h3, #account h4, #account h5, #account h6 {
 color:#0F388D;
 background: #FFF;
 font-size:1.45em;
 font-weight:normal;
 line-height:1.45em;
 padding:5px 5px 0 0;
 margin:5px 0 0 0;
}

#account a {
  color:#0F388D;
}
#account a:hover { 
  border-bottom: solid 1px #000;
}

#account a:hover.basket { border-bottom: 0;}

#account form {
  font-size:1em;
  text-align: left;
}

#account form label.Big {
  font-size:1.2em;
}

#account form input.Text {
  border:1px solid #000;
  font-size:1.1em;
}

#account form select.Select {
  border:1px solid #000;
  font-size:1.1em;
}

#account form textarea.TextareaSmall {
  border:1px solid #000;
  font-family:Verdana,sans-serif;
  font-size:1.1em;
}

#account form input.Submit {
  border:1px solid #000;
  font-size:1.1em;
}

#account form fieldset.two-column-left p, #account form fieldset.two-column-right p {
  margin:0pt;
  padding:0pt;
}

#account form fieldset.two-column-left {
  clear:both;
  float:left;
  margin:0pt 10px 10px 0pt;
  padding:0pt;
  width:240px;
}

#account form fieldset.two-column-right {
  float:right;
  margin:0pt 10px 10px 0pt;
  padding:0pt;
  width:240px;
}

#account form fieldset.two-column-left input.Text, #account form fieldset.two-column-right input.Text {
  display:block;
  margin:5px 0pt;
  padding:3px;
  width:224px;
}

#account form fieldset.two-column-left textarea.TextareaSmall, #account form fieldset.two-column-right textarea.TextareaSmall {
  display:block;
  height:100px;
  margin:5px 0pt;
  padding:3px;
  width:224px;
}

#account form fieldset.two-column-left select.Select, #account form fieldset.two-column-right select.Select {
  display:block;
  margin:3px 0pt 20px;
  padding:4px 2px;
  width:224px;
}

#account form fieldset.single-column {
  clear:both;
  margin:10px 0pt;
  text-align:center;
}

#account form fieldset.single-column input.Submit {
  display:block;
  margin:5px 0pt;
  padding:3px;
  width:224px;
}


/* ------------------------------------------------------------ MESSAGES */

#flashMessage {
  font-size:1.2em;
}

#flashMessage {
  border:1px solid red;
  color:red;
  display:block;
  margin:5px 0pt 10px;
  padding:10px;
}

.error_message {
  color:red;
}

/* ------------------------------------------------------------ CHANGES SK */

.offScreen {
	position: absolute;
	left: -5000px;
}