/*
—————————————————————
Global
—————————————————————
*/
html {
	background:#444;
	min-width:1024px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	html {
		min-height:1280px;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	html {
		min-height:700px;
	}
}
body {
	font:13px/17px 'Lato', Arial, sans-serif;
	color:#333;
}
h1,h2,h3 {
	font-size:28px;
	font-weight:bold;
	line-height:118%;
	margin-bottom:.7em;
}
h1.divider {
	border-bottom:1px dotted #ddd;
	padding-bottom:12px;
	margin-bottom:30px;
}
h1 a.edit {
	display:inline-block;
	margin-left:15px;
	background:#eee;
	height:23px;
	line-height:23px;
	padding:0 8px;
	color:#333;
	border-radius:4px;
	text-decoration:none;
	font-size:13px;
	font-weight:normal;
	position:relative;
	top:-5px;
}
h1 a.edit:hover {
	color:#ca43c7;
}
h2 {
	font-size:20px;
	margin:26px 0 16px 0;
}
h2:first-child {
	margin-top:0;
}
h2 a {
	color:#333;
}
h3 {
	font-size:18px;
	margin:20px 0 12px 0;
}
p {
	margin-bottom:1em;
}
em {
	font-weight:inherit;
	font-style:italic;
}
strong {
	font-weight:bold;
}
a {
	text-decoration:none;
	color:#b032ad;
}
a:hover {
	text-decoration:underline;
}
div.clear {
	clear:both;
	line-height:0;
	font-size:0;
}

/*
—————————————————————
Containers
—————————————————————
*/
#contentWrapper {
	background:#eee;
	padding:30px;
}
#content {
	width:960px;
	margin:auto;
}
.box {
	background:#fff;
	padding:40px;
	position:relative;
	border-radius:3px;
}

/*
—————————————————————
Header
—————————————————————
*/
#headerWrapper {
	height:140px;
	background:#aaa;
}
#header {
	height:140px;
	width:960px;
	margin:auto;
	position:relative;
}
#logo {
	display:block;
	width:270px;
	height:88px;
	background:url(/Images/logo-cardno.png) no-repeat;
	background-size:270px 88px;
	position:absolute;
	top:30px; left:0;
}
#logo strong {
	display:none;
}

/*
—————————————————————
Navigation
—————————————————————
*/
#navWrapper {
	height:50px;
	background:#222;
}
#hamburger {
	display:none;
}
#close {
	display:none;
}
#nav {
	height:50px;
	width:960px;
	margin:auto;
	position:relative;
}
#nav li {
	float:left;
	margin-right:15px;
	position:relative;
}
#nav li.phone {
	float:right;
	color:#ca43c7;
	line-height:50px;
	font-size:24px;
	margin:0;
}
#nav li.phone strong {
	font-weight:900;
}
#nav a {
	float:left;
	color:#fff;
	padding:10px 10px;
	font-size:15px;
	line-height:30px;
}
#nav a:hover {
	text-decoration:none;
	opacity:.9;
}
#nav li.active a {
	border-bottom:3px solid #36bd37;
	padding-bottom:7px;
	opacity:1;
}
#nav li ul {
	position:absolute;
	top:50px; left:0;
	width:170px;
	z-index:2;
	background:#aaa;
	box-shadow:0 0 8px rgba(0,0,0,0.3);
	border:4px solid #fff;
	border-top:0;
	border-bottom-width:3px;
	border-radius:0 0 4px 4px;
	display:none;
}
#nav li:hover ul {
	display:block;
}
#nav li ul li {
	float:none;
	margin:0;
}
#nav li ul a,
#nav li.active ul a {
	float:none;
	display:block;
	padding:10px;
	border-bottom:1px solid #fff;
	line-height:17px;
}
#nav li ul a:hover {
	background:#999;
}
#nav li ul a:active {
	background:#888;
}

/*
—————————————————————
Home Page
—————————————————————
*/
#carousel {
	width:940px;
	height:330px;
	margin-bottom:40px;
	position:relative;
	border-radius:3px;
	border:10px solid #fff;
}
#carousel ul {
	position:absolute;
	top:0; left:0;
}
#carousel li {
	position:absolute;
	top:0; left:0;
	width:940px;
	height:330px;
	opacity:0;
	filter:alpha(opacity=0);
}
#carousel li.current {
	z-index:1;
}
#carousel img {
	display:block;
	width:940px;
	height:330px;
}
#carousel span.arrow {
	display:none;
	width:58px;
	height:330px;
	position:absolute;
	top:0;
	opacity:.8;
	cursor:pointer;
	z-index:10000;
}
#carousel span.left {
	left:0; 
	background:url(/Images/arrow-left.gif) center no-repeat;
}
#carousel span.right {
	right:0; 
	background:url(/Images/arrow-right.gif) center no-repeat;
}
#carousel:hover span.arrow {
	display:block;
}
#carousel span.arrow:hover {
	opacity:1;
}
#carousel .caption {
	float:left;
	height:48px;
	background:rgba(0, 0, 0, 0.65);
	position:absolute;
	left:0; bottom:0;
	padding:10px 16px;
	color:#fff;
	border-left:10px solid #ca43c7;
}
#carousel .caption:hover {
	background:rgba(0, 0, 0, 0.75);
	text-decoration:none;
}
#carousel .caption strong {
	display:block;
	font-weight:normal;
	font-size:28px;
	line-height:28px;
	margin-bottom:2px;
	color:#fff;
}
#carousel .caption span {
	display:block;
}
#carousel .legend {
	position:absolute;
	left:0;
	bottom:-28px;
	height:28px;
	width:940px;
	z-index:1;
}
#carousel .legend div {
	background:#fff;
	padding:4px 8px;
	height:20px;
	border-radius:3px;
	margin:auto;
}
#carousel .legend span.outer {
	width:12px;
	height:12px;
	padding:4px;
	float:left;
	cursor:pointer;
}
#carousel .legend span.inner {
	background:#bbb;
	width:12px;
	height:12px;
	border-radius:6px;
	display:block;
}
#carousel .legend span.outer:hover span.inner {
	background:#999;
}
#carousel .legend span.active span.inner,
#carousel .legend span.active:hover span.inner {
	background:#ca43c7;
}
#welcome {
	float:left;
	width:427px;
	height:221px;
	background:#fff;
	padding:20px 20px 8px 20px;
	border-radius:3px;
	border-bottom:10px solid #ca43c7;
}
#welcome h2 {
	margin-top:0;
	font-size:24px;
}
#drivers {
	float:right;
	width:482px;
	margin-right:-15px;
}
#drivers li {
	float:left;
	width:226px;
	height:121px;
	margin:0 15px 15px 0;
}
#drivers a {
	display:block;
	height:123px;
	background:#444;
	border-radius:3px;
	font-size:22px;
	line-height:25px;
	color:#fff;
	transition:all 200ms linear;
}
#drivers img {
	display:block;
	width:100px;
	height:100px;
	margin:auto;
}
#drivers span {
	display:block;
	text-align:center;
	margin-top:-12px;
}
#drivers a:hover {
	opacity:0.90;
	text-decoration:none;
}
#drivers a:hover img {
	border-color:#bbb;
}

/*
—————————————————————
Images
—————————————————————
*/
.imageContainer {
	float:right;
	width:272px;
	margin:4px -12px 30px 40px;
}
.imageContainer img {
	display:block;
	border-radius:3px;
	transition:opacity 150ms linear;
}
.imageContainer a {
	display:block;
	margin:0 12px 12px 0;
	border:0;
}
.imageContainer a.thumb {
	float:left;
}
.imageContainer a:hover img {
	opacity:.9;
}
.productImages {
	width:372px;
	margin-left:0;
}
.productImages a.thumb img {
	width:112px;
	height:84px;
}
.productImages img.main {
	width:360px;
	height:270px;
}

/*
—————————————————————
Footer
—————————————————————
*/
#footer {
	width:960px;
	height:80px;
	margin:auto;
	color:#bbb;
	line-height:150%;
	position:relative;
	padding-top:25px;
}
#footer a.logo {
	float:left;
	width:180px;
	text-decoration:none !important;
}
#footer a.logo img {
	width:180px;
	height:59px;
	border-radius:3px;
	opacity:.9;
	transition:all 200ms linear;
}
#footer a.logo:hover img {
	opacity:1;
}
#footer a.logo span {
	display:block;
	color:#bbb;
	margin-bottom:3px;
	font-style:italic;
}
#social {
	float:right;
}
#social li {
	float:left;
	margin-left:8px;
}
#social a {
	float:left;
	background:#777;
	border-radius:32px;
	width:18px;
	height:18px;
	padding:7px;
	opacity:.7;
	transition:all 200ms linear;
}
#social img {
	display:block;
	width:18px;
	height:18px;
}
#social a:hover {
	opacity:1;
}
#footerNav {
	position:absolute;
	left:0; bottom:20px;
	width:960px;
}
#footerNav li {
	float:left;
	border-right:1px solid #666;
	height:15px;
	line-height:15px;
}
#footerNav li.last {
	border:0;
}
#footerNav li.credit {
	border:0;
	float:right;
}
#footerNav li.credit a {
	padding:0;
}
#footerNav li.credit img {
	border-radius:3px;
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:gray;
    -webkit-filter: grayscale(100%);
	opacity:.8;
	margin-top:-4px;
	transition:all 200ms linear;
}
#footerNav li.credit a:hover img {
	filter:none;
	-webkit-filter:none;
	opacity:1;
}
#footerNav li span {
	float:left;
	padding-right:10px;
}
#footerNav li a {
	color:#bbb;
	float:left;
	padding:0 10px;
}
#footerNav li a:hover {
	text-decoration:underline;
}

/*
——————————————————————
Lists
——————————————————————
*/
ul.bullet, ol {
	margin-bottom:1em;
	line-height:17px;
}
ul.bullet li {
	padding-left:15px;
	background:url(/Images/bullet-green-small.gif) 1px 6px no-repeat;
	margin-bottom:3px;
}
ol {
	margin:0 0 1em -.6em;
	padding-left:28px;
}
ol li {
	list-style:decimal outside;
	margin-bottom:1em;
}
ol li ul {
	margin-top:10px;
}
ol li ul li {
	margin-bottom:0;
	list-style:none;
}

/*
——————————————————————
Photo Galleries
——————————————————————
*/
#filter {
	background:#eee;
	height:24px;
	padding:8px;
	margin-bottom:50px;
	border-radius:5px;
}
#filter label {
	float:left;
	line-height:24px;
	margin-right:6px;
}
#filter input {
	float:left;
	margin-right:20px;
}
#filter input.text {
	padding:3px;
	border:0;
	border:1px solid #ddd;
	border-radius:3px;
}
#filter input.text:focus {
	outline:none;
	border-color:#6ec76f;
}
#filter input.date {
	width:90px;
}
#filter select {
	float:left;
	margin-right:10px;
	padding:2px;
	border-radius:4px;
	border:1px solid #ddd;
}
#filter input.button {
	padding:0 7px;
	border:1px solid #ccc;
	background:#ddd;
	width:70px;
	height:24px;
	border-radius:4px;
	text-align:center;
	cursor:pointer;
}
#filter input.button:hover {
	background:#d2d2d2;
}
#albums ul {
	width:798px;
	margin:0 -8px 0 60px;
}
#albums li {
	float:left;
	width:216px;
	height:226px;
	margin-right:50px;
}
#albums a {
	display:block;
	text-align:center;
	margin-top:-4px;
	line-height:14px;
	position:relative;
	z-index:1;
	color:#333;
	text-decoration:none !important;
}
#albums img {
	display:block;
	width:176px;
	height:132px;
	background:url(/Images/bg-album.png) no-repeat;
	padding:22px 20px;
}
#albums a:hover {
	color:#ca43c7;
}
#albums a:hover img {
	opacity:.93;
}
#album #images {
	width:905px;
	margin-right:-25px;
	padding-top:8px;
}
#album #images li {
	float:left;
	width:155px;
	height:155px;
	margin:0 26px 26px 0;
}
#album img {
	display:block;
	width:155px;
	height:155px;
	background:#bbb;
}
#album a:hover img {
	opacity:.93;
}
#albumHeader {
	height:32px;
	border-bottom:1px dotted #ddd;
	margin-bottom:25px;
}
#albumHeader span {
	float:left;
	line-height:25px;
}
#albumHeader ul {
	float:right;
}
#albumHeader li {
	float:left;
}

/*
———————————————————
Forms
———————————————————
*/
.form {
	background:#f5f5f5;
	border-radius:10px;
	min-height:1px;
	padding:22px 25px 10px 25px;
}
.form h3 {
	padding-left:195px;
	font-size:16px;
	font-weight:bold;
}
.form p {
	position:relative;
	padding-left:195px;
	margin-bottom:8px;
}
.form label,
.form span.label {
	position:absolute;
	top:4px; left:0;
	display:block;
	width:180px;
	text-align:right;
	padding:2px;
}
.form p.checkboxes {
	padding-top:4px;
}
.form p.checkboxes label {
	position:static;
	display:inline;
	margin:0 0 0 4px;
}
.form p.checkboxes input {
	margin-left:12px;
	position:relative;
	top:1px;
}
.form input.text, .form textarea, .form select {
	padding:5px;
	width:250px;
	border:1px solid #ebebeb;
	border-top-color:#cdcdcd;
	margin-right:8px;
	border-radius:3px;
	-webkit-border-radius:3px;
	outline:none;
}
.form input.text:focus,
.form textarea:focus {
	outline:none;
	border-color:#6ec76f;
}
.form input.medium {
	width:157px;
}
.form input.short {
	width:60px;
}
.form textarea {
	height:170px;
	display:block;
}
.form textarea.small {
	height:50px;
}
.form select {
	font-size:13px;
	padding:4px 3px 3px 3px;
	width:262px;
}
.form input.button {
	display:block;
	color:#fff;
	background:#ca43c7;
	text-align:center;
	font-weight:bold;
	width:110px;
	height:28px;
	line-height:28px;
	border:0;
	border-radius:4px;
	cursor:pointer;
	outline:none;
	margin-top:25px;
}
.form input.button:active {
	background:#b032ad;
}

/*
———————————————————
Contact Page
———————————————————
*/
#contactInfo {
	float:left;
	width:380px;
	position:relative;
}
#contactInfo address {
	float:left;
	margin:0 50px 25px 0;
}
#contactInfo address strong {
	font-size:16px;
}
#contactInfo address span {
	display:block;
	line-height:150%;
}
#contactInfo dl {
	margin-bottom:30px;
}
#contactInfo dt {
	float:left;
	clear:left;
	background-repeat:no-repeat;
	background-position:0 7px;
	width:50px;
	height:50px;
	font-weight:bold;
	color:#999;
	border-bottom:1px solid #ddd;
	line-height:300px;
	overflow:hidden;
}
#contactInfo dt.phone {
	background-image:url(/Images/icon-phone.gif);
}
#contactInfo dt.fax {
	background-image:url(/Images/icon-fax.gif);
}
#contactInfo dt.email {
	background-image:url(/Images/icon-email.gif);
}
#contactInfo dd {
	float:left;
	border-bottom:1px solid #ddd;
	width:330px;
	height:50px;
	line-height:50px;
}
#contactInfo dd strong {
	font-size:16px;
}
#contactInfo dd strong.short {
	display:none;
}
.contactForm {
	float:right;
	width:430px;
	position:relative;
}
.contactForm label,
.contactForm span.label {
	width:130px;
}
.contactForm p,
.contactForm h3 {
	padding-left:140px;
	margin-top:0;
}

/*
————————————————————————
Validation
————————————————————————
*/
.form .validation-container,
.form .alert {
	padding:10px;
	background:#ca43c7;
	border-radius:7px;
	-webkit-border-radius:7px;
	color:#fff;
	margin:0 0 30px 195px;
	position:relative;
	line-height:130%;
	width:231px;
}
.contactForm .validation-container {
	margin-left:140px;
}
.form .validation-title {
	font-weight:bold;
}
.form .alert {
	background:#98c070;
}
.form .alert p {
	padding:0;
	margin:0;
}
.form .alert span.tick {
	font-size:18px;
	margin-right:4px;
}

/*
————————————————————————
Product Landing Page
————————————————————————
*/
#categories {
	margin-top:30px;
}
#categories li.topLevel {
	background:#f5f5f5;
	margin-bottom:20px;
	padding:12px 12px 12px 126px;
	position:relative;
	min-height:100px;
	border-radius:4px;
}
#categories h3 {
	margin-top:0;
}
#categories ul.bullet {
	margin-bottom:0;
}
#categories img {
	width:80px;
	height:80px;
	padding:10px;
	position:absolute;
	top:12px; left:12px;
	background:#444;
	border-radius:3px;
	transition:all 200ms linear;
}
#categories a {
	color:#333;
}
#categories a:hover {
	color:#ca43c7;
	text-decoration:none;
}
#categories a:hover img {
	opacity:.9;
}

/*
—————————————————————
Category Page
—————————————————————
*/
.categoryImage {
	width:160px;
	height:160px;
	float:left;
	border-radius:3px;
	background:#444;
	padding:20px;
}
#products, #product-intro {
	width:650px;
	float:right;
}
#products li {
	margin-bottom:20px;
}
#products a {
	display:block;
	background:#f5f5f5;
	padding:12px 12px 12px 159px;
	position:relative;
	min-height:100px;
	text-decoration:none !important;
	border-radius:4px;
}
#products a:hover {
	background:#eee;
}
#products a:active {
	background:#e2e2e2;
}
#products strong {
	display:block;
	font-size:18px;
	line-height:21px;
	margin-bottom:10px;
}
#products span {
	display:block;
	color:#333;
}
#products img {
	width:133px;
	height:100px;
	position:absolute;
	top:12px; left:12px;
	border-radius:3px;
}

/*
————————————————————————
Product Detail Page
————————————————————————
*/
.productDetails {
	float:left;
	width:480px;
}
.imageContainer .chartLink {
	display:block;
	margin-bottom:20px;
	text-align:center;
	background:#45a5ef;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	font-style:italic;
	border-radius:3px;
	padding:6px 0;
	text-decoration:none !important;
}
.imageContainer .chartLink:active {
	background:#3192dc;
}
.productDetails table {
	font-size:13px;
	width:484px;
	margin:-2px;
}
.productDetails .tableWrapper {
	border-radius:3px;
	overflow:hidden;
}
.productDetails td,
.productDetails th {
	border:1px solid #6ec76f;
	border:2px solid #fff;
	border-collapse:collapse;
	padding:6px 10px;
}
.productDetails th {
	background:#6ec76f;
	font-weight:bold;
	font-style:italic;
	font-size:14px;
	color:#fff;
}
.productDetails td {
	background:#f2f2f2;
}
.centred td,
.centred th {
	text-align:center;
}
.productDetails ul a {
	color:#333;
	border-bottom:1px dotted #aaa;
}
.productDetails ul a:hover {
	color:#ca43c7;
	text-decoration:none;
}

/*
————————————————————————
Testimonials
————————————————————————
*/
#testimonials {
	width:906px;
	margin:40px -26px 0 0;
}
#testimonials li {
	float:left;
	width:276px;
	height:455px;
	margin-right:26px;
}
#testimonials p {
	display:block;
	padding:12px;
	border-radius:10px;
	height:320px;
	background:#f5f5f5;
	margin-bottom:15px;
	border-top:1px solid #eee;
	position:relative;
}
#testimonials p:after {
	content:"";
	position:absolute;
	bottom:-15px;
	left:40px;
	margin-left:-9px;
	border-width:15px 15px 0;
	border-style:solid;
	border-color:#f5f5f5 transparent;
}
#testimonials q {
	display:block;
	margin-bottom:10px;
}
#testimonials cite {
	display:block;
	border-left:5px solid #ddd;
	padding-left:8px;
}
#testimonials cite strong {
	display:block;
	text-transform:uppercase;
	font-weight:900;
}
#testimonials img {
	display:block;
	margin:auto;
	width:200px;
	height:60px;
}
#testimonials a:hover img {
	opacity:.9;
}

/*
—————————————————————
Breadcrumb
—————————————————————
*/
#breadcrumb {
	float:left;
}
#breadcrumb a {
	float:left;
	background:#eee;
	height:23px;
	line-height:23px;
	padding:0 8px;
	color:#333;
	border-radius:4px;
	text-decoration:none;
}
#breadcrumb a:hover {
	color:#ca43c7;
}
#breadcrumb span {
	float:left;
	width:22px;
	height:23px;
	background:url(/Images/arrow.gif) center no-repeat;
}