/*--------------------------------------------------
created: 16-02-2010
author: Gareth Joyce ~ GlobalGraphics Associates Ltd.
email: webmaster@globalgraphics.co.uk
website: http://www.globalgraphics.co.uk/
--------------------------------------------------*/

@import url("reset.css");
@import url("type.css");

body { text-align: center; background: #ccc url("bg.gif") 0 0 repeat-x; font-family: "Verdana", Arial, Helvetica, sans-serif; }
#container { width: 960px; margin: 0 auto; text-align: left; }
a, a:active, a:hover, a:visited { color: black; background: #ffc; text-decoration: none; }
h1 { font-size: 2.2em; }
h1 span { font-weight: normal; }
h4 { padding: 3px 0 4px 5px; font-size: 1.2em; font-weight: bold; color: #fff; background: #C42125; }
h6 { font-size: 1.6em; color: #333; font-weight: bold; }
h1, h2, h3 { color: #C42125; font-weight: bold; }
input, select, textarea, fieldset, table.default, iframe.default { border: 1px solid #bbb; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
hr { color: #C42125; margin: 0 0 5px 0; }

/* default form style */
form.default fieldset { margin: 1em 0; padding: 1em 10px; background: #f8f8f8; }
form.default fieldset input, form fieldset textarea, form fieldset select { padding: 0.2em; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; margin: 0 0 5px 0; }
form.default fieldset input:focus, form fieldset textarea:focus { background: #ffc; }
form.default fieldset input.button { padding: 0; border: 0; margin: 5px; }
form.default fieldset a { background: none; }

/* default table style */
table.default { margin-bottom: 1em; border-collapse: separate; }
table.default th, table.default td { padding: .3em 0; }
table.default th { padding: .5em 0; background: #C42125; color: #fff; font-weight: bold; font-size: 1.2em; }
table.default caption { font-size: 1.2em; font-weight: bold; margin-bottom: 1em; }
table.default col { border-right: 1px solid #ccc; }
table.default thead { background: #ccc; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; }
table.default tr:nth-child(even) { background: #edf5ff; }

#header { width: 960px; height: 155px; background: url("bg-header.jpg") 0 0 no-repeat; position: relative; }
#header h2 { width: 268px; height: 89px; position: absolute; top: 0; left: 10px; background: url("crossan-logo.gif") 0 0 no-repeat; }
#header h2 a { width: 268px; height: 89px; display: block; background: none; text-indent: -9999px; }
#header p { font-size: 2em; color: #fff; margin: 0 0 10px 0; line-height: 1em; }
#header ul { margin: 0 0 10px 0; }
#header p span { display: block; color: #ffff00; font-weight: bold; }

#cart { width: 285px; padding: 10px 0 0 60px; position: absolute; top: 0; right: 10px; color: #fff; }
#cart ul { float: left; margin: 0 10px 0 0; height: 1%; }
#cart p { }
#cart ul li a { width: 70px; padding: 0 0 0 10px; display: block; color: #ffff00; background: url("arrow-yellow.gif") 0 50% no-repeat; font-size: 0.9em; font-weight: bold; }
#cart ul li a:hover { color: #fff; }

#header p.interest { position: absolute; right: 10px; top: 75px; text-align: right; }

#header ul#nav { margin: 0; }
#nav { width: 940px; font-weight: bold; text-align: right; position: absolute; bottom: 15px; right: 20px; }
#nav li { display: inline; margin: 0 0 0 20px; }
#nav li#convert { display: inline; margin: 0 0 0 20px; float: left; }
#nav li#convert a { background: url("arrow-yellow.gif") 0 50% no-repeat; padding: 0 0 0 10px; }
#nav li a { color: #fff; background: none; }
#nav li a:hover { color: #ffff00; }
#nav li#convert a { color: #ffff00; }
#nav li#convert a:hover { color: #fff; }

#footer { width: 940px; clear: both; padding: 20px 10px; background: transparent url("bg-footer.gif") 0 0 no-repeat; font-size: 0.9em; text-align: center; }
#footer ul { margin: 0; }
#footer ul li { display: inline; }
#footer ul li a { background: none; }
#footer ul li a:hover { text-decoration: underline; }
#footer p { margin: 0; }

#wrap { float: left; /*--float to clear bg--*/ width: 950px; padding: 10px 5px; clear: both; background: #fff; }

#aside, #bside, #content { float: left; }
#aside, #bside, #offer, #feature, #feature h5, #feature ul, #detail, #subscribe, #subscribe fieldset, #search, #search fieldset { width: 165px; }
#aside { border-right: 1px solid #333; }
#bside { border-right: 1px solid #fff; }
#content { width: 600px; padding: 0 9px; }

#aside ul { width: 165px; font-size: 0.9em; padding: 0; float: left; }
#aside ul li { height: 1%; }
#aside ul li a { width: 159px; display: block; background: none; padding: 3px; }
#aside ul li a:hover { background: #C42125; color: #fff; }
#aside h4 { width: 160px; clear: left; }
#aside h4 a { display: block; background: none; color: #fff; }
#aside h4 a:hover { text-decoration: underline; }

#aside p.title { font-weight: bold; font-size: 1.4em; clear: left; }
#aside ul#ccards { text-align: center; }
#aside ul li { float: left; }

.col_one, .col_one img { width: 600px; }
.col_two, .col_two img { width: 300px; }
.col_three, .col_three img { width: 200px; }
.col_four, .col_four img { width: 150px; }
.col_one, .col_two, .col_three, .col_four { float: left; }
.col_one img, .col_two img, .col_three img, .col_four img { display: block; }

#search, #detail, #location, #offer, #feature, #subscribe { clear: left; float: left; margin-bottom: 10px; }

#detail { background: url("box-rpt.gif") top center repeat-y; text-align: center; }
#detail p, #detail ul { text-align: left; font-size: 0.9em; width: 145px; padding: 0 10px; }
#detail h6 { width: 165px; background: url("box-top.gif") top center no-repeat; padding-top: 5px; }
#detail h6.last { background: none; font-size: 1.4em; padding: 0; }
#detail ul { margin: 0; padding-bottom: 10px; display: block; background: url("box-btm.gif") bottom center no-repeat; }

#location { width: 155px; padding: 120px 5px 10px 5px; background: url("bg-location-map.gif") 0 0 no-repeat; }
#location h6 { margin-bottom: 5px; }
#location p { font-size: 1em; margin-bottom: 5px; }
#location a { width: 80px; padding: 0 0 0 10px; float: right; display: block; background: transparent url("arrow-black.gif") 0 50% no-repeat; font-weight: bold; font-size: 0.9em; }
#location a:hover { background: transparent url("arrow-black.gif") 3px 50% no-repeat; }

#offer { width: 155px; padding: 5px; background: url("bg-offer.gif") 0 0 no-repeat; color: #fff; }
#offer p.title { font-size: 1.4em; font-weight: bold; }
#offer p.title span { color: #FFFF00; text-transform: uppercase; text-shadow: 2px 2px #000; }
#offer p.constrain { width: 70%; line-height: 16px; margin: 0; }

#feature { text-align: center; background: url("box-rpt.gif") top center repeat-y; }
#feature h5 { height: 26px; padding: 7px 0 0 0; background: url("side-title.gif") top center no-repeat; color: #fff; }
#feature ul { padding: 0 0 10px 0; margin: 0; background: url("box-btm.gif") bottom center no-repeat; }
#feature ul li { margin: 0 0 10px 0; }
#feature ul li a { background: none; }
#feature ul li a img, .triple li a img { width: 125px; height: 125px; padding: 5px; border: 1px solid #fff; }
#feature ul li a:hover img, .triple li a:hover img { border: 1px solid #C42125; }
#feature ul li h3 { margin: 0; font-size: 1em; }
#feature ul li p { font-size: 1.2em; font-weight: bold; color: #C42125; margin: 0; }
#feature ul li span { display: block; margin-bottom: 5px; font-size: .8em; font-style: italic; color: #333; font-weight: normal; }
#feature ul li a.more, .triple li a.more { width: 105px; padding: 0 0 0 6px; margin: auto; display: block; background: url("more-btn.gif") 0 0 no-repeat; color: #fff; font-weight: bold; font-size: 0.8em; cursor: pointer; }
#feature ul li a:hover.more, .triple li a:hover.more { background: url("more-btn.gif") 0 -19px no-repeat; }

#search { background: url("bg-search-icon.gif") 0 0 no-repeat; }
#search h6 { width: 125px; padding: 5px 0 0 40px; }
#search fieldset { width: 165px; float: left; padding: 5px 0; border: 0; }
#search fieldset input, #subscribe fieldset input { width: 153px; border: 1px solid #ccc; padding: 2px 5px; margin: 0 0 5px 0; }
#search fieldset input.button, #subscribe fieldset input.button { width: 74px; height: 23px; padding: 0; margin: 0; float: right; color: #fff; font-weight: bold; font-size: 0.9em; border: 0; cursor: pointer; }

#subscribe { position: relative; background: url("box-rpt.gif") top center repeat-y; }
#subscribe h6 { width: 116px; padding: 5px 0 0 50px; background: url("box-top.gif") top center no-repeat; color: #C42125; }
#subscribe p { width: 111px; padding: 0 5px 0 50px; font-size: 1em; }
#subscribe img.x { position: absolute; top: -20px; left: -20px; }
#subscribe fieldset { padding-bottom: 10px; background: url("box-btm.gif") bottom center no-repeat; border: 0; }
#subscribe fieldset label { width: 137px; display: block; padding: 2px 0 2px 5px; }
#subscribe fieldset input { width: 137px; margin-left: 5px; height: 1%; }
#subscribe fieldset input.button { width: 87px; margin-right: 5px; }

.triple, .single { width: 600px; float: left; }
.triple li { float: left; width: 171px; padding: 10px; margin: 0 10px 10px 0; border: 1px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-align: center; }
.triple li.last { margin-right: 0; }
.triple li h3 { font-size: 1.2em; }

.single li { width: 578px; padding: 10px; float: left; display: block; margin: 0 0 10px 0; border: 1px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.single li a img { float: left; margin: 0 10px 0 0; }
.single li .info { float: right; width: 400px; }
.single li .info p { font-size: 0.8em; }
.single li .info p.price { font-size: 1.4em; font-weight: bold; color: #C42125; }
.single li .info h3 { font-size: 1.2em; }
.single li .buy fieldset { border: 0; }
.single li .buy fieldset { border: 0; }
.single li .buy fieldset label { display: block; float: left; clear: left; width: 100px; }
.single li .buy fieldset input { border: 1px solid #ccc; width: 100px; padding: 3px; float: left; }
.single li .buy fieldset select { border: 1px solid #ccc; width: auto; padding: 3px; display: block; }
.single li .buy fieldset select option { width: auto; }
.single li .buy fieldset input.button { width: auto; padding: 0; border: 0; margin-top: 10px; float: right; }

.single li .info ul li { border: none; width: 250px; padding: 0; margin: 0 0 5px 0; }

.breadcrumb { font-size: 0.9em; }
.breadcrumb a { color: #C42125; background: none; border-bottom: 1px dotted #C42125; }
.breadcrumb a:hover { color: #C42125; border-bottom: 1px solid #C42125; }

/* Checkout Progress Indicator  ------------------------------------------------ */

p.checkout-progress-heading {
	width: 300px;
	margin: 10px auto;
}

#checkout-progress-indicator {
	width: 300px;
	height: 19px;
	background-image: url('cpi-background.gif');
	margin: 0 auto 20px auto;
}

.checkout-progress-0 {
	width: 75px;
	height: 19px;
	background-color: #ff4242;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-1 {
	width: 150px;
	height: 19px;
	background-color: #ff4242;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-2 {
	width: 225px;
	height: 19px;
	background-color: #ff4242;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-3 {
	width: 300px;
	height: 19px;
	background-color: #ff4242;
	background-image: url('cpi-main.gif');
	float: left;
}

#checkout-progress-indicator .cpi-end {
	width: 8px;
	padding: 0;
	margin: 0;
	border: 0;
	height: 19px;
	background-image: url('cpi-end.gif');
	background-position: right;
	background-repeat: no-repeat;
	float: left;
}