/*

	Grov förteckning travelheroes.css
	1. Grundinställningar.
	2. Grundläggande struktur.
	3. Sidhuvudet med logo, länkar, sökruta.ginaler. Allt innehåll ligger som en child.
		- table, två olika bakgrunder bara. Gjorde två bilder för att skapa spaltlinjer, blir smidigast tror jag.
		- standard paragraf-format, ingress-format, citat.
		- bildklass, generell flytande vänster eller höger (
	4. Innehåll. Struktur och stilmallar för innehållsarean.
		- class page_content skapar rätt marclass="left|right")
		- diverse stilar för td:s. Spec. vänster och höger spalt vid sida som är tre-spalt.
	5. Kundvagn. 
		- Valde att lägga bilden/prylen som en lista. Vet inte om ni kommer ha fler items här eller om tanken är att bara visa senaste tillagda.
	6. Sidfot.

*/

/* DIVERSE GRUNDINSTÄLLNINGAR FÖR SIDAN */

body {
	margin:0px;
	padding:0px;
	background: #f3f3f3 url(/docroot/samples/imgs/page_background.jpg) no-repeat fixed top center;
	color: #4c4c4c; /* grundfärg för text */
}
body a {
	color: #4c4c4c;
	text-decoration: none;
}
table {
	border-collapse: collapse;
	margin:0px;
	padding:0px;
}
td {
	vertical-align: top;
}
img {
	border:0px;
	margin:0px;
	padding:0px;
}

/*########################################################################## SIDANS STRUKTUR */

#background_left { /* background right|left är tonade png:s till genomskinligt */
	width:300px;
	height: 880px;
	position: absolute;
	top:0px;
	left:0px;
	background: url(/docroot/samples/imgs/background_left.png) no-repeat fixed top left;
	z-index: -1;
}
#background_right {
	width:300px;
	height: 880px;
	position: absolute;
	top:0px;
	right:0px;
	background: url(/docroot/samples/imgs/background_right.png) no-repeat fixed top right;
	z-index: -2;
}

#page_wrapper { /* CENTRERING AV SIDAN */
	margin:0px auto;
	padding:0px 0px 0px 0px;
	width:1040px;
	background: url(/docroot/samples/imgs/wrapper_background.png) repeat-y;
}

/*########################################################################## HEADER */

#page_header {
	margin:0px auto;
	padding:0px 40px 0px 40px;
	width:960px;
	voice-family: "\"}\"";
	voice-family: inherit;
	/* .width:1040px; */
	height:60px;
}
#page_header table {
	width:960px;
	height:60px;
	margin:0px;
	padding:0px;
}
#page_header td {
	vertical-align: bottom;
}
#page_header td.logo {
	padding:0px;
	margin:0px;
	width:200px;
}
#page_header td.navigation {
}
#page_header ul {
	list-style-type: none;
	padding:0px;
	margin:0px;
}
#page_header ul h1 {
	font: normal 12px "Arial", "verdana", sans-serif;
	margin:0px;
	padding:0px;
}

#page_header ul .leaf {
	font: normal 12px "Arial", "verdana", sans-serif;
	margin:0px;
	margin-right:10px;
	padding:0px;
	text-transform: uppercase; 
}

#page_header ul .closed {
	font: normal 12px "Arial", "verdana", sans-serif;
	margin:0px;
	margin-right:10px;
	padding:0px;
	text-transform: uppercase; 
}


#page_header ul li {
	float:left;
	margin:0px 10px 0px 0px;
	text-transform: uppercase; 
	border-bottom:2px solid #fff; /* "genomskinlig", annars studsar länken upp vid hovring */
	text-transform: uppercase;
}


#page_header ul li a:hover {
text-transform: uppercase;
	border-bottom:2px solid #4c4c4c;
	color: #e88834;
}

#page_header ul li:hover {
text-transform: uppercase;
	border-bottom:2px solid #4c4c4c;
	color: #e88834;
}

#page_header ul li.active.closed  {
	border-bottom:2px solid #4c4c4c;
	text-transform: uppercase;
}
#page_header ul li.active.leaf  {
	border-bottom:2px solid #4c4c4c;
	text-transform: uppercase;
}

#page_header ul li.closed.trail  {
	border-bottom:2px solid #4c4c4c;
	text-transform: uppercase;
}
#page_header ul li.active.leaf  strong { font-weight: normal }
#page_header ul li.active.closed  strong { font-weight: normal }

#page_header td.searchform {
	text-align: right;
	width:240px;
}
#page_header form {
	padding:0px;
	margin:0px;
}
#page_header .input {
	margin:0px 7px 0px 0px;
}
#page_header .submit {
	margin:0px;
	font: bold 11px "Arial", "verdana", sans-serif;
}
#page_header fieldset {
	margin:0px;
	padding:0px;
	border:0px;
}


/*########################################################################## INNEHÅLL */

.page_content {
	padding:10px 40px 0px 40px;
	margin:0px auto;
	width:880px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:960px;
}
.page_content p {
	font: normal 12px "Georgia", "Times", serif;
	line-height: 18px;
}
.page_content p.ingress {
	margin:0px;
	font: normal 14px "Georgia", "Times", serif;
	line-height: 20px;
}
.page_content blockquote {
	width:200px;
	margin:0px 10px 10px 0px;
	padding:0px;
	float:left;
	font: italic 14px "Georgia", "Times", serif;
	line-height: 20px;
}
.page_content img.left {
	float:left;
	margin:5px 10px 5px 0px;
}
.page_content img.right {
	float:right;
	margin:5px 0px 5px 10px;
}

.page_content table.five_column {
	background: url(/docroot/samples/imgs/background_ul_column.png) repeat-y;
}
.page_content table.three_column {
	background: url(/docroot/samples/imgs/background_three_column.png) repeat-y;
}

/* LEFT_COLUMN - VÄNSTER KOLUMN. Kundvagnen längre ner */
.page_content td.left_column {
	padding:0px 15px 0px 0px;
	width:165px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:180px;
	margin:0px;
}
.page_content td.left_column ul.menu {
	list-style-type: none;
	margin:0px;
	padding:0px;
}
.page_content td.left_column ul.menu li h2 {
	margin:0px;
	font: normal 10px "Arial", "verdana", sans-serif;
	line-height: 20px;
	text-transform: uppercase;
}
.page_content td.left_column .products {
	margin:15px 0px 0px 0px;
}
.page_content td.left_column .products h2 {
	margin:0px;
	font: bold 12px "Georgia", "Times", serif;
	text-transform: none;
}
.page_content td.left_column .products p {
	margin:0px;
	font: normal 12px "Georgia", "Times", serif;
}
.page_content td.left_column .products p.pris {
	margin:0px 0px 15px 0px;
	font: normal 10px "Georgia", "Times", serif;
}

/* MELLANKOLUMN I TRESPALT */
.page_content td.middle_column {
	margin:0px;
}

.page_content td.middle_column h2 {
	font: normal 30px "Arial", "verdana", sans-serif;
	text-transform: uppercase;
	margin:0px 0px 5px 0px;
	letter-spacing: 2px;
}

.page_content td.middle_column h3 {
	font: normal 18px "Arial", "verdana", sans-serif;
	text-transform: uppercase;
	margin:0px 0px 5px 0px;
	letter-spacing: 2px;
}

.page_content td.right_column_wide h2 {
font: normal 30px "Arial", "verdana", sans-serif;
	text-transform: uppercase;
	margin:0px 0px 5px 0px;
	letter-spacing: 2px;
}


.page_content td.middle_column .headline { /* bildrubbe */
	margin:0px 0px 5px 0px;
}

.page_content td.middle_column p {
	margin:10px 0px 0px 0px;
}
/* EXTRA BRED HÖGERKOLUMN I TRESPALT */
.page_content td.right_column_wide {
	padding:0px 0px 0px 15px;
	width:375px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:390px;
	margin:0px;
}
.page_content td.right_column_wide p.image_caption {
	margin:0px;
	font: italic 11px "Georgia", "Times", serif;
	line-height: 17px;
}
/* RIGHT_COLUMN - HÖGRA KOLUMNEN I TRESPALT */
.page_content td.right_column {
	padding:0px 0px 0px 15px;
	width:165px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:180px;
	margin:0px;
}
.page_content td.right_column p {
	font: normal 12px "Arial", "verdana", sans-serif;
}
.page_content td.right_column span.q {
	font-size:11px;
	text-transform: uppercase;
}
.page_content .right_column span.a {
	font-size:12px;
	line-height: 14px;
}

/* COLUMN - FEMSPALT */
.page_content .five_column td.column {
	margin:0px 0px 0px 0px;
	padding:0px 15px 0px 0px;
	width:165px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:180px;
	background: url(/docroot/samples/imgs/background_li_column.png) no-repeat;
}
.page_content .five_column td.column h2 {
	margin:0px;
	font: bold 14px "Georgia", "Times", serif;
}
.page_content .five_column td.column p {
	margin:0px;
	font: normal 14px "Georgia", "Times", serif;
}
.page_content .five_column td.column p.pris {
	margin:0px;
	font: normal 12px "Georgia", "Times", serif;
}

/*########################################################################## KUNDVAGN */

#shoppingcart {
	border-bottom: 1px dashed #d7d7d7;
	border-top: 1px dashed #d7d7d7;
	border-left: 0px;
	border-right: 0px;
	margin:10px 0px 0px 0px;
	padding:10px 0px 10px 0px;
	width:165px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:180px;
	font: normal 10px "Arial", "verdana", sans-serif;
	line-height: 20px;
	text-transform: uppercase;
	color:#808080;
}
#shoppingcart ul {
	width:180px;
	list-style-type:none;
	margin:5px 0px 5px 0px;
	padding:0px;
	display: table;
}
#shoppingcart ul li {
	margin:0px;
	text-transform: none;
	line-height:14px;
	display:table-row;
}
#shoppingcart ul li b {
	color:#000;
}
#shoppingcart ul li img {
	float:left;
	margin:0px 4px 0px 0px;
	border:0px;
}

/*########################################################################## FOOTER */

#page_footer {
	margin:0px auto;
	width:1040px;
	height:60px;
	background: url(/docroot/samples/imgs/wrapper_background_finish.png) no-repeat;
	word-spacing: 4px;
	font: normal 10px "Arial", "verdana", sans-serif;
}
#page_footer p.left {
	padding:15px 0px 0px 40px;
	margin:0px;
	width:560px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:600px;
	float:left;
	text-transform: uppercase;
	line-height: 14px;
}
#page_footer p.right {
	padding:15px 40px 0px 0px;
	margin:0px;
	width:160px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:200px;
	float:right;
	text-align: right;
	line-height: 14px;
}
#page_footer .copyright {
	word-spacing: normal;
	font-size: 9px;
}


.page_content td.left_column ul {
	list-style-type: none;
	margin:0px;
	padding:0px;
}

.page_content td.left_column a:hover {
color: #e88834;
}
.page_content td.left_column ul li {
	margin:0px;
	font: normal 10px "Arial", "verdana", sans-serif;
	line-height: 20px;
	text-transform: uppercase;

}

.page_content td.left_column ul li.active.open {

padding-left: 11px;
background-image: url(/docroot/samples/imgs/vald.jpg);
background-repeat: no-repeat;
background-position: 1px .7em;

}

.page_content td.left_column ul li.active.leaf{

padding-left: 11px;
background-image: url(/docroot/samples/imgs/vald.jpg);
background-repeat: no-repeat;
background-position: 1px .7em;

}
.page_content td.left_column ul li.active.leaf strong {
font-weight: normal;
}

.page_content td.left_column ul li.active.open strong  { 
font-weight: normal;
}