@charset "utf-8";
@import "reset.css";

/*#######################

	HORNER DESIGN CSS
	by  tom greenhill
	
#######################*/

/*########  COMMON
/*########  ELEMENTS */
html, body, #overlay {
	height: 100%;
}

* html #wrapper {
	height: 100%;
}
a {
	color: #964784;
	text-decoration: none;
}
a:hover {
	color: #333;
}

body {
	font: 62.5% Arial, Helvetica, sans-serif; background: #6d6d6d; margin: 0; padding: 0;
	text-align: center; /* IE 5.5 CENTERING FIX */
}

#wrapper {
	width: 763px; border-left: 1px solid #000; border-right: 1px solid #000; background: #fff;
	margin: 0 auto;	position: relative;	min-height: 100%;
}
#header {
	position: relative; height: 100px; margin: 0; background: #fff;
}
#header h1 {
	position: absolute;	height: 80px; width: 763px;	background: #fff url(../img/logo.jpg);
	text-indent: -9999px; left: 0; top: 0; margin: 0; padding: 0;
}
#title {
	font-size: 1.2em; position: absolute; height: 30px; width: 380px; left: 380px;
	top: 50px; margin: 0; padding: 0;
}
#header h2 {
	color: #ec1946; font-size: 1.4em; position: absolute; height: 22px; width: 753px; left: 10px;
	top: 80px; margin: 0; padding: 0; text-align: left;
}
#content {
	background: transparent; text-align: left; padding: 20px 20px 0 20px;
}
#wrapper.listing #content {
	padding: 0; margin: 0 0 0 13px;
}
#content h2 {
	font-size: 1.9em; color: #964784; margin: 0 0 10px 0;
}
#content h3 {
	font-size: 1.4em; color: #964784; margin: 5px 0 8px 0;
}
#content p {
	font-size: 1.3em; color: #333; margin: 0 0 8px 0;	
}
#content ul {
	margin: 10px 0 10px 25px;
}
#content ul li {
	padding: 2px 0;	font-size: 1.2em;
}
#content #form {
	margin: 0 10px 8px 10px;
}
#content #form label {
	margin: 0 10px 10px 3px;
}
#content #form input {
	margin: 10px 0 0 0;
}

#home #wrapper { background: #fff url(../img/people.jpg) bottom right no-repeat; }
#home #content { /*background: url(../img/alpha.png) repeat top left; behavior: url(includes/iepngfix.htc); */ }

#contact #content label { display: block; margin: 10px 0 2px;}
	#contact #content .req { color: #ff0000; }
	#contact #content p.req { color: #ff0000; margin: 0;}
	#contact #content p.submit { clear: left; font-size: 1.2em;}
	#contact #content fieldset { width: 250px; margin:0 20px 0 0; float: left}
	#contact #content input, #contact #content textarea { font: 1.2em Verdana, Arial, Helvetica, sans-serif; padding: 3px 2px 2px 2px; width: 200px;}
	#contact #content input:focus, #contact #left textarea:focus {}
	#contact #content input#send { width: auto; padding: 4px 8px; color: #A42751; cursor: pointer; font-family: Arial, Helvetica, sans-serif}
	#contact #content textarea { height: 114px; width:200px; padding: 3px 2px 2px 3px; margin: 0 0 10px; font-size: 1.2em; }

/*################ CHECKOUT */
#checkout table {
	border: 1px solid #ccc;
	margin: 0 0 15px 0;
}
thead tr th {
	background: #714375;
	color: #fff;
	font-size: 1.3em;
	font-weight: 700;
}
tfoot tr td {
	background: #eee;
	color: #000;
	font-size: 1.1em;
}
tfoot tr td {
	font-weight: 700;
	border-bottom: 1px dashed #ccc;
}
tfoot td {
	padding: 8px 0;
}
td, th {
	padding: 5px 8px;
}
tbody tr td {
	background: #fff;
	border-bottom: 1px dashed #ccc;
	font-size: 1.1em;
}
.bdr-bottom {
	border-bottom: 1px dashed #ccc;
}
.bdr-left {	
	border-left: 1px dashed #ccc;
}
#paypal input {
	margin: 10pt 0pt 0pt 10px;
}
.remove {
	cursor: pointer;
}
.error {
	color: #CC0000;
	font-weight: 700;
}
.highlight {
	color: #964784 !important;
}
.bold {
	font-weight: bold;
}
h3 .lowlight {
	font-weight: normal !important;
	font-size: 0.9em
}
#content h3.gap {
	margin: 30px 0 0 0;
}
#swaptype {
	color: #964784;
	font-weight: bold;
	cursor: pointer;
}
#swaptype:hover {
	color: #555;
}
#swaptype-form {
	display: none;
}
#message {
	display: none;
	border: 1px dashed #714375;
	margin: 0 0 10px 0;
}
#message .wrapper {
	background: #CC0000;
}
#message .text {
	padding: 0 20px;
}
#message .text p {
	margin: 0;
	font-size: 1.2em;
	color: #fff;
}
.wrapper {
	padding: 10px 0;
}
label {
	font-size: 1.2em;
	color: #555;
	font-weight: bold;
	cursor: pointer;
}
fieldset {
	border: none;
}
#submit {
	margin: 10px 0 0;
	color:#A42751;
	padding:4px 8px;
	cursor: pointer;
}
.proceed, .close {
	margin: 10px 0;
	color:#A42751;
	padding:4px 8px;
	cursor: pointer;
}

.qty {
	cursor: pointer;
}
.qty span {
	padding: 0 2px;
}
input.quantity {
	display: none;
	width: 20px;
	font-size:1em;
	padding: 3px;
	text-align:center;
}
#error {
	border: 1px dashed #ff0000;
}
body #content #msg {
	padding: 15px; margin: 0; font-weight: bold;
}

#overlay { background-color: #111; display: none; position: absolute; top:0; left:0; width: 100%; }
#modal { position: absolute; display: none; width: 350px; }
#modal tr, #modal td { border: none }
#modal .body { padding: 10px; background: #fff; font-size: 1.3em; }
#modal .body span { font-weight: bold; }
#modal .close { margin: 10px 0 5px 0; }
#modal .proceed { margin: 0; }
#modal .b { background: url(../img/b.png) top left repeat; padding: 0; }
#modal .tl { background: url(../img/tl.png) top left no-repeat; }
#modal .bl { background: url(../img/bl.png) top left no-repeat; }
#modal .tr { background: url(../img/tr.png) top left no-repeat; }
#modal .br { background: url(../img/br.png) top left no-repeat; }
#modal .tl, 
#modal .tr, 
#modal .bl, 
#modal .br { height:10px; overflow:hidden; padding:0 !important; width:10px;}

/*####################

		FOOTER

####################*/


/* A CSS hack that only applies to IE -- specifies a different height for the footer */

* html #footer {
	margin-top: -4em;
}
#footer {
	width: 763px;
	text-align: left;
	padding: 0;
	background: #ccc;
	font-size: 1em;
	color: #333;
	height: 4em;
	position: relative;
	margin: -4em auto 0 auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#footer p {
	margin: 0 0 0 10px;
	padding: 15px 0 0 0;
	color: #964784;
}
#footer p span {
	color: #333;
}
.push {
	height: 4em;
}
/*########  CARD
/*########  COLUMNS */


.cardrow {
	width:743px;
	height: 380px;
	margin: 0;
}
.cardrow .card {
	width: 247px;
	background: #fff;
	padding: 0;
	margin: 0;
	float: left;
	text-align: left;
}
.cardrow .card img {
	border: 1px solid #000;
	margin: 2px 0 3px 3px;
}
#wrapper.listing .card p {
	margin: 3px 0 0 0;
	font: bold 1.2em  Arial, Helvetica, sans-serif;
}
.card input  {
	margin: 0 10px 0 5px;
	float: left;
}


/* BASKET TOTAL */
 
#log {
	float: right;
	margin: 10px 17px 7px 0;
	width: 40%;
	text-align: right;
}
#log img {
 	margin: 0 0 2px 5px;
	vertical-align: bottom;
}
#log span, #log #basket {
	font-weight: bold; color: #714375;
}
#log #basket {
	cursor: pointer;
}
#log #basket:hover {
	color: #333;
}

/* CARD DIMENSIONS */
#strapline {
	margin: 12px 0 7px 3px;
	width: 40%;
	float: left;
	display: none
}
#strapline p {
	
}


/* BASKET CONTENTS */

#contents { 
	display: none;
	margin: 0; 
	padding: 0;
}
#contents .wrapper {
	margin: 0 15px 0 3px;	
}
#contents table {
	border: 1px solid #ccc;
}
#contents table th, #contents table td {
	padding: 3px 8px;
}
#contents table thead tr th {
	font-size: 1.1em;
}
#contents table tbody tr td {
	font-size: 1em;
}