/* Stylesheet for fyrhjulsdrift.se (frontend)
==============================================

Last edited: 2009-09-06

New edits 2009 by Artopod
Author: Elin Tjerngren
Email: elin (a) artopod.se

Orig Author:  Kristofer Westling
Email:	 contact@kwe0221.com
URL:	 http://www.kwe0221.com



/* Reset
==============================================*/

* {
	margin:0;
	padding:0;
}

img {
	border:none;
}

/* Typography and colour
==============================================*/

body {
	background:#fff;
	font:62.5%/1.5em Georgia,"Trebuchet MS",Arial,Bitstream,Tahoma,sans-serif;
	-moz-opacity:.99;
	color:#433506;
}

h1,h2,h3,h5 {
	font-weight:normal;
}

h1 {
	font-size:3em;
}

h2 {
	line-height:1.5em;
	font-size:2em;
	color:#9e6b06;
}

h3 {
	font-size:1.5em;
}

h4 {
	line-height:1.3em;
	font-size:1.5em;
	color:#9e6b06;
}

div#products h4 {
	margin:1.5em 0 1em;
	text-transform:uppercase;
}

div#masthead h1,
div#masthead h2,
div#contact-info h3,
div#products h3,
div#campain h3,
div#order h3,
div#form h3,
div#productinfo h3,
div#news h3,
div#faq h3,
div#about h3,
div#security h3 {
	font-size:0;
	color:#fff;
	text-indent:-1000px;
}

div#campain p,
div#form p,
div#productinfo p,
div#news p {
	margin:0 3em 0 17em;
	line-height:1.5em;
	font-size:1.2em;
	font-weight:bold;
	text-transform:uppercase;
}
#form.contact p {
	margin:3em;
}

div#campain p.product-info,
div#productinfo p.product-info,
div#news p.product-info {
	margin:1em 0 0 5.4em;
	padding:1em 2.3em 2em 1.5em;
	line-height:1em;
	background:url(../img/pricetag.gif) no-repeat;
	font-size:3em;
	font-weight:normal;
	text-transform:none;
}

div#campain p.product-info.wide,
div#productinfo p.product-info.wide,
div#news p.product-info.wide {
	background:url(../img/pricetag_wide.gif) no-repeat;
	height:170px;
	margin-bottom:-50px;
}

div#campain p.product-info span,
div#productinfo p.product-info span,
div#news p.product-info span {
	display:block;
	margin:0em 0 0 .1em;
	color:#b04f00;
	font-size:.7em;
	text-transform:uppercase;
}

div#campain p.description-text,
div#productinfo p.description-text,
div#news p.description-text {
	font-weight:normal;
	text-transform:none;
}

a:link, a:visited {
	color:#000;
	font-weight:bold;
	text-decoration:none;
}
p.splash {
	display:block;
	position:relative;
	left:-2.5em;
	top:15px;
	width:215px;
	padding:18px 18px 20px 27px;
	background:url(../img/bg_link.png) no-repeat;
}

	p.splash a {
		display:block;
		position:relative;
		left:-10px;
		padding-left:14px;
		line-height:1em;
		background:url(../img/icon_go.gif) no-repeat 0 50%;
	}

div#products a:link,
div#products a:visited {
	color:#433506;
	font-size:1.1em;
	font-weight:normal;
}

div#faq p a,
div#faq a.special-position {
	padding-left:1.5em;
	font-size:1.3em;
	font-weight:normal;
	background:url(../img/icon_go.gif) no-repeat 0% 50%;
	color:#433506;
}

div#faq a.special-position {
	position:absolute;
	bottom:4px;
	left:0;
}

div#security p,
div#order p,
div#about p {
	font-size:1.3em;
	color:#433506;
	line-height:1.4em;
}

div#security p.link-container a {
	padding-left:2em;
	font-weight:normal;
	background:url(../img/icon_view.gif) no-repeat 0% 50%;
	color:#433506;
}

div#order p.order-ok {
	color:#336600;
	background:#C0E0B1;
	border: 1px solid #336600;
	font-weight:normal;
	font-size:1.4em;
}

div#order p.order-error {
	color:#f00;
	background:#FFCC99;
	border:1px solid #FF3300;
	font-weight:normal;
	font-size:1.4em;
}

.hide {
	font-size:0;
	text-indent:-10000px;
	line-height:0;
}

/* Layout - borders, margin, padding and stuff
==============================================*/

body {
	border-top:1em solid #ffa900;
}

div#masthead {
	position:relative;
	margin:4em 5em;
	width:89em;
}

div#masthead h1 {
	height:58px;
	background:url(../img/logotype.gif) no-repeat;
}

div#masthead h2 {
	margin:5px 0 0 3px;
	height:23px;
	background:url(../img/company_slogan.gif) no-repeat;
}

div#contact-info {
	position:absolute;
	top:0;
	left:405px;
	padding:2em 0 2em 5em;
	border-left:1px solid #2d2813;
}

div#contact-info h3 {
	line-height:31px;
	background:url(../img/header_contact.gif) no-repeat;
}

div#contact-info img {
	position:absolute;
	top:0;
	left:34em;
}

div#sidebar {
	float:left;
	width:45em;
}

div#products,
div#campain,
div#order,
div#form,
div#productinfo,
div#news,
div#faq,
div#security,
div#about {
	float:left;
	margin:6em 5em;
	width:35em;
}

div#campain,
div#form,
div#productinfo,
div#news,
div#faq.wide {
	width:45em;
}

div#faq.wide {
	width:40.5em;
}


div#campain p.description-text,
div#productinfo p.description-text,
div#news p.description-text {
	padding:1em;
	margin:2em 3.85em 0 0;
}

div#products h3,
div#campain h3,
div#order h3,
div#form h3,
div#productinfo h3,
div#news h3,
div#faq h3,
div#security h3,
div#about h3 {
	height:31px;
	padding-bottom:2px;
	border-bottom: 1px solid #2d2813;
}

div#products h3 {background:url(../img/header_products.gif) no-repeat;}
div#campain h3 {background:url(../img/header_campain.gif) no-repeat;}
div#order h3 {background:url(../img/header_order.gif) no-repeat;}
div#form h3 {background:url(../img/header_form.gif) no-repeat;}
div#form.contact h3 {background:url(../img/header_contact.gif) no-repeat;}
div#productinfo h3 {background:url(../img/header_prodinfo.gif) no-repeat;}
div#news h3 {background:url(../img/header_news.gif) no-repeat;}
div#faq h3 {background:url(../img/header_faq.gif) no-repeat;}
div#security h3 {background:url(../img/header_security.gif) no-repeat;}
div#about h3 {background:url(../img/header_about.gif) no-repeat;}

div#campain img,
div#productinfo img,
div#news img {
	float:left;
	margin-top:3em;
}

div#campain h3,
div#form h3,
div#productinfo h3,
div#news h3 {
	margin-right:50px;
}

div#faq p {
	display:block;
	position:absolute;
	bottom:-1.7em;
	left:-2.5em;
	padding:22px 55px 20px 40px;
	background:url(../img/bg_link.png) no-repeat;
}

div#security {
	position:relative;
}

div#security p,
div#order p,
div#about p {
	margin:1.5em .5em;
}

div#security p.link-container {
	display:block;
	position:absolute;
	bottom:-5em;
	left:-2.5em;
	width:20em;
	padding:20px 0 20px 40px;
	background:url(../img/bg_link.png) no-repeat;
}

div#order p.order-error,
div#order p.order-ok {
	position:absolute;
	bottom:-8em;
	left:3.5em;
	padding:.5em 1em;
}

/* Lists
==============================================*/

div#masthead ul {
	position:absolute;
	top:-4em;
	left:455px;
	list-style-type:none;
}

div#masthead ul li {
	float:left;
	margin-right:.1em;
	text-transform:uppercase;
}

div#masthead ul li a {
	display:block;
	padding:.5em;
	background:#e09400 url(../img/navigation_gradient.gif) repeat-x;
}

div#masthead ul li a:hover,
div#masthead ul li a.current {
	padding-top:.9em;
	background:#ffa900;
}

div#products ul {
	margin-bottom:2em;
	list-style-type:none;
	overflow:auto; /* FF CAN'T HANDLE A CLEAR ON A H4 ELEMENT CORRECTLY, BUT THIS FIXES IT, HAD TO USE CLEAR IN IE6 THOU*/
}

div#products ul li {
	float:left;
	margin-bottom:2em;
	width:11em;
	height:11em;
	text-align:center;
}

div#products ul li img {
	border:1px solid #bcbcbc;
}

div#faq {
	position:relative;
}

div#faq dl {
	margin: 2em 0;
	background:#d2e3a2;
}

div#faq dl dt {
	font-size:1.3em;
	font-weight:bold;
	padding:1.6em 1.6em .5em;
}

div#faq dl dd {
	font-size:1.3em;
	line-height:1.3em;
	padding:0 1.6em 1.6em;
}

div#faq dl dt.odd {
	background:#c0d87d;
}

div#faq dl dd.odd {
	background:#c0d87d;
}

p.hide {
	margin:0 0 -15px -15px;
	padding:0;
	font-size:8px;
	position:absolute;
	width:142px;
	height:30px
}

/* Show and hide areas
==============================================*/

div#campain h4,
div#productinfo h4,
div#news h4 {
	clear:both;
	margin:3em 3.85em 0 20em;
	padding:2px 25px 2px 10px;
	font-size:1.3em;
	font-weight:normal;
	color:#fff;
	background:#433506 url(../img/table_expand.gif) no-repeat right top;
	cursor:pointer;
	text-shadow:1px 1px 1px #000;
}

div.details {
	width:40em;
	border-top:1px solid #2d2813;
	border-bottom:1px solid #2d2813;
}

table {
	width:100%;
	color:#212121;
	text-transform:uppercase;
	border-collapse:collapse;
}

thead {
	background:#eb9937 url(../img/table_th_bg.png) repeat-x;
	font-size:1.2em;
	line-height:1.2em;
	border-bottom:1px solid #fff;
	text-align:left;
}

th {
	padding:.5em .8em;
	border-left:1px solid #fff;
}

tbody {
	color:#0c5800;
	font-size:1.2em;
	text-transform:none;
}

tbody tr {
	background:#c8b49b url(../img/table_td_bg1.png) repeat-x;
}

tbody tr.odd {
	background:#dcccb8 url(../img/table_td_bg2.png) repeat-x;
}

td {
	padding:.5em .8em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
}

.no-border {
	border-left:none;
}

/* Forms
==============================================*/

form {
	margin-top:2.5em;
}

fieldset {
	width:39.9em;
	position:relative;
	border:1px solid #ddd;
}

input, textarea {
	position:absolute;
	top:.7em;
	right:.7em;
	padding:.3em;
	width:14.5em;
	font:62.5%/1.5em Georgia,"Trebuchet MS",Arial,Bitstream,Tahoma,sans-serif;
	font-size:1em;
	border:1px inset #999;
}

input#submit {
	position:absolute;
	bottom:.7em;
	right:.7em;
	width:7em;
	height:2em;
	background:#fff;
	line-height:1.2em;
	border:1px outset #333;
	cursor:pointer;
}

textarea {
	height:10em;
}

input:focus, 
textarea:focus,
input#submit:hover {
	background:#f6edc4;
	color:#363;
}

label {
	position:relative;
	padding:.7em;
	float:left;
	width:27.1em;
	height:2em;
	font-size:1.4em;
	line-height:1.4em;
	background:#e9e9e9;
}

label.odd {
	background:#eee;
}

label.extra-height {
	height:12em;
}

input.paymentMethod {
	width:auto;
	border:none;
}

#paymentMethod1 input {
	width:12em;
}

sup {
	color:#F00;
}