@charset "UTF-8";
/* CSS Document */
/* 	STYLE SHEET FOR JUST COMPUTERS - By Mountain for mk-visual.co.uk */


/* TABLE OF CONTENTS ------------------------------------------------------------

	- HTML / GENERAL ELEMENTS
	- HEADER
		- BRANDING
		- TOP NAVIGATION
	- CONTENT AREA
	- MAIN COLUMN
		-OFFER STYLING
	- SIDE COLUMN
	- FOOTER / CONTACT AREA
	- COLUMN SPECIFIC STYLES
	- FEATURE LINKS
	- ITEM DETAILS
	- FORMS & BUTTONS
	- SHOPPING BASKET
	- PAGE FOOTER
	- GLOBAL CLASSES
	
--------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------  @ HTML / BODY */
html, body {
	height: 100%;
}
body {
	font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
	font-size: 1em;
	color: #2A2A2A;
	background-color: #FFFFFF;
}




/* -------------------------------------------------------------------- @ HEADER */
#header_bg {
	background-color: #2A2A2A;
	background-image: url(../site_images/header_bg.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	margin-bottom: 10px;
}
#header {
	margin-bottom: 10px;
}

/* ------------------------------- # BRAND / LOGO */
#brand {
	height: 95px;
	background-image: url(../site_images/brand_bg.gif);
	background-repeat: no-repeat;
	background-position: right top;
	margin: auto;
	width: 976px;
	position: relative;
}
.logo {
	position: absolute;
	top: 25px;
	background-image: url(../site_images/logo_type.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	left: 0px;
}
.logo, .logo a {
	display: block;
	height: 50px;
	width: 450px;
}
.logo span {
	display: none;
}

/* ------------------------------------ # TOP NAV */
#navBox {
	padding-bottom: 10px;
}
#navWrap {
	background-color: #EF7B00;	
}
ul.topnav {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 70%;
	margin: auto;
	width: 976px;
	background-color: #EF7B00;
}
ul.topnav li {
	display: inline;
	float: left;
	margin-right: 4px;
}
ul.topnav li a {
	color: #FFFFFF;
	display: block;
	height: 100%;
	font-weight: normal;
	text-decoration: none;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
}
ul.topnav li a:hover, ul.topnav li a:active {
	background-color: #D56D00;
}
ul.topnav li.view a, ul.topnav li.view a:hover, ul.topnav li.view a:active {
	background-color: #FD02E5;
	background-image: url(../site_images/but_bg_over.gif);
	background-repeat: repeat-x;
	background-position: center bottom;
	color: #FFFFFF;
	padding-bottom: 25px;
}
ul.topnav li.nav_right {
	float: right;
}
/* IE HACK - SORTS HORIZONTAL UNORDERED LIST LINKS */
* html ul.topnav li a {
  display:inline-block;    /* for IE only */ 
  margin:0 -2px;           /* to correct an IE bug that doubles the border width */  
}


/* --------------------------------------------------------------- @ CONTENT AREA */
#contentBody {
	width: 962px;
	min-height: 450px;
	margin: auto;
	font-size: 80%;
}

/* ---------------------------------------------------------------- @ MAIN COLUMN */
#mainColumn {
	width: 720px;
	float: left;
	margin-bottom: 10px;
}
#mainColumn p {
	line-height: 1.4;
	margin-bottom: 10px;
}
#mainColumn h1 {
	color: #EF7B00;
	padding: 10px 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EF7B00;
	font-size: 120%;
}
#mainColumn h1 a {
	float: right;
	color: #2A2A2A;
	background-color: #EEEEEE;
	padding: 5px 10px;
	text-decoration: none;
	font-size: 80%;
}
#mainColumn h1 a:hover {
	background-color: #EF7B00;
	color: #FFFFFF;
}
#mainColumn h2 {
	color: #EF7B00;
	font-size: 120%;
	font-weight: bold;
	padding: 10px 0px;
}
#mainColumn h2 em {
	font-size: 70%;
	font-style: normal;
	font-weight: normal;
	color: #1A1A1A;
}
#mainColumn h3 {
	color: #2A2A2A;
	font-size: 110%;
	font-weight: normal;
	padding: 3px 0px;
}
#mainColumn h4 {
	margin-bottom: 10px;
	padding: 5px 0px;
	margin-top: 10px;
	color: #EF7B00;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EF7B00;
}
#mainColumn ul, #mainColumn ol {
	font-size: 110%;
}
#mainColumn ul li {
	margin-bottom: 10px;
	padding-left: 30px;
	background-image: url(../site_images/tick.gif);
	background-repeat: no-repeat;
	background-position: left center;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	margin-right: 10px;
	line-height: 1.4;
	margin-left: 10px;
}
#mainColumn ol li {
	margin-bottom: 10px;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	margin-right: 10px;
	line-height: 1.4;
	margin-left: 15px;
}
#mainColumn ol li strong {
	color: #EF7B00;
	font-weight: bold;
	font-size: 120%;
}
#mainColumn  ol  li  em {
	font-size: 90%;
	font-style: normal;
}
#banner {
	height: 120px;
	border: 1px solid #999999;
	background-color: #EEEEEE;
	margin-right: 10px;
	margin-bottom: 10px;
}


/* -------------------------------- # OFFER ITEMS */
.offerLink {
	display: inline-block;
	float: left;
	width: 170px;
	margin-right: 8px;
	margin-bottom: 10px;
	text-decoration: none;
	border: 1px solid #FFFFFF;
}
.offerLink:hover {
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
.offerLink h2, .offerLink h3 {
	margin-right: 10px;
	margin-left: 10px;
}
.offerLink img {
	width: 150px;
	margin: 10px;
}
.offerLink p {
	font-size: 130%;
	padding: 2px 10px 10px 10px;
	color: #EF7B00;
	line-height: 1.4;
}
#detailText {
	width: 400px;
}
#detailText ul {
	font-size: 90%;
}
#privacy ul {
	font-size: 90%;
}
#privacy ul li {
	background-image: none;
	padding-left: 0px;
	list-style-position: inside;
	list-style-type: square;
}



/* ---------------------------------------------------------------- @ SIDE COLUMN */
#sideColumn {
	float: left;
	width: 240px;
	margin-bottom: 10px;
}
#sideColumn h1 {
	margin-bottom: 2px;
	font-size: 110%;
	color: #EE7B00;
	padding: 10px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EE7B00;
	margin-right: 10px;
}
#sideColumn ul {
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 90%;
}
#sideColumn ul li {
	padding: 1px 0px;
}
#sideColumn ul li a {
	color: #2A2D2E;
	text-decoration: none;
	display: block;
	padding: 10px;
	background-color: #EEEEEE;
}
#sideColumn ul li a:hover, #sideColumn ul li a:active {
	background-color: #FE8200;
	color: #FFFFFF;
}






/* ----------------------------------------------------------- @ FOOTER / CONTACT */
#footerWrap {
	background-color: #2A2A2A;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FE8200;
}

/* ---------------------------------- FOOTER AREA */
#footer {
	margin: auto;
	padding: 10px;
	background-color: #1A1A1A;
}
#footer p {
	color: #666666;
	font-size: 70%;
	text-align: right;
}
#footer a {
	color: #EF7B00;
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	text-decoration: underline;
}

/* --------------------------------- CONTACT AREA */
#contactBox {
	width: 960px;
	color: #999999;
	margin: auto;
	padding-bottom: 10px;
	font-size: 80%;
}
#contactBox h2 {
	color: #FE8200;
	font-size: 120%;
	padding: 1em 0em;
	margin-bottom: 1em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #4A4A4A;
	margin-right: 10px;
}
#contactBox h3 {
	color: #FE8200;
	font-size: 120%;
	padding: 1em 0em;
	margin-right: 10px;
}
#contactBox p {
	line-height: 1.4;
	padding-bottom: 5px;
	margin-right: 10px;
}
#contactBox a {
	color: #666666;
}
#contactBox a:hover, #contactBox a:active {
	color: #FE8200;
	text-decoration: none;
}
#contactBox em {
	color: #FE8200;
}
#contactBox small {
	color: #666666;
	display: inline;
	font-size: 60%;
	line-height: 1.4em;
}
#contactBox strong {
	color: #FFFFFF;
	font-size: 120%;
}

/* -- CONTACT FORM -- */
.contactForm {
	margin-right: 20px;
	margin-bottom: 10px;
	float: left;
	width: 402px;
}
.contactForm p {
	font-size: 80%;
}
.contactForm #contact {
	margin-right: 10px;
	margin-bottom: 10px;
}

.contactForm label {
	display: block;
	float: left;
	width: 25%;
	padding: 6px 0px;
	margin-bottom: 10px;
	font-size: 80%;
	clear: left;
}
.contactForm input.formText, .contactForm textarea.formText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	background-color: #4A4A4A;
	width: 70%;
	display: block;
	padding: 5px;
	margin-bottom: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFFFFF;
}
.contactForm .submitBox {
	width: 95%;
}

.contactForm input.button {
	text-align: center;
	background-color: #EF7B00;
	color: #FFFFFF;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	float: right;
	padding: 5px;
}
.contactForm  input.button:hover {
	background-color: #1A1A1A;
}


/* -- LOCATION MAP -- */
.locationMap {
	width: 230px;
	float: left;
	margin-bottom: 10px;
}
.locationMap img {
	background-color: #FFFFFF;
	padding: 4px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.locationMap img:hover {
	background-color: #FE8200;
}

/* -- ADDRESS -- */
.address {
	width: 300px;
	float: left;
}


/* ----------------------------- # GLOBAL CLASSES */
.flt_lft { float: left; margin-right: 10px; margin-bottom: 10px; }
.flt_rt {
	float: right;
	display: inline-block;
	margin: 10px;
}
.clearflts { font-size: 1px; line-height: 0px; clear: both; height: 0px; }
.clearflt_lft { font-size: 1px; line-height: 0px; clear: left; height: 0px; }
.clearflt_rt { font-size: 1px; line-height: 0px; clear: right; height: 0px; }