/*
 *----------------------------------------------------------------------
 * Jonas Åkerlund
 * Copyright Sector 5 AB 2009
 * ---------------------------------------------------------------------
*/

@import "default.css";
@import "navigation.css";
@import "templates.css";

/*--------------------------------------------------------------------*/
/* Common typography */
/*--------------------------------------------------------------------*/

body, table, td, input, textarea, select, fieldset, legend { 
	font-family: Arial, Helvetica, sans-serif;
	color: #6a6a6a;
}


h1 { font-size: 19px; line-height: 22px; margin-bottom: 10px;}
h2 { font-size: 15px; line-height: 19px; margin-bottom: 5px;}
h3, h4, h5, h6 {font-size: 11px; line-height: normal; margin-bottom: 3px;}

a { text-decoration: none; color: #626262;}
a:hover { text-decoration: none;}

ul { list-style: none outside;}

table { border-collapse: collapse; }

/*--------------------------------------------------------------------*/
/* Common layout */
/*--------------------------------------------------------------------*/
.clear { clear: both;}
.left { float: left;}
.right { float: right;}

#wrapper {
	width: 912px;
	margin: 0 auto;
	padding: 50px 0 0 0;
}

#header { float: left; width: 912px; position: relative;}

#header-content {
	border-top: 3px solid #000;
	padding: 8px 0 0 0;
	margin: 8px 0 0 0;
	float: left;
	width: 912px;
}

#logo img { display: block;}
#logo { float: left;}

.quicklinks { float: right; padding: 32px 0 0 0;}
.quicklinks li { float: left; margin: 0 0 0 10px;}
.quicklinks li a { color: #BBBDBF; font-size: 11px; font-weight: bold;}
.quicklinks li a:hover { color: #6A6A6A; }

#header #search { float: right; padding-right: 4px;}
#search input.searchfield {
	background: url(../images/search-bg.gif) right top no-repeat;
	width:120px;
	border: none;
	float:left;
	height:17px;
	overflow:hidden;
	padding:3px 10px 0 20px;
	white-space:nowrap;
	font-size: 11px;
	margin-right: 6px;
}
div.button { float: left;}
div.button a{
	float: left;
	height: 17px;
	background: #000;
	padding: 3px 8px 0;
	color: #cccccc;
}

div.button a:hover { color: #fff;}


#template { float: left; width: 912px; padding: 10px 0 0 0;}
#primary-content { float: left; width: 912px;}

#presentation img { display: block;}

.banner { clear: both; }

h1.block {
	color: #fff;
	font-size: 15px;
	background-image: url(../images/header-backgrounds.gif);
	background-repeat: no-repeat;
	padding: 4px 8px;
}

h1.block.gray { background-position: left top;}
h1.block.blue { background-position: left -60px;}
h1.block.pink { background-position: left -120px;}
h1.block.green { background-position: left -180px;}



/*--------------------------------------------------------------------*/
/* Entrances, startpage */
/*--------------------------------------------------------------------*/
#entrances {
	padding: 30px 0 35px 0;
	float: left;
	width: 912px;
}

#entrances .col {
	float: left;
	width: 230px;
}

#entrances .col img { float: left;}
#entrances .col a { float: left; position: relative;}
#entrances .col span {
	color: #fff;
	background: #000;
	opacity: .8;
	filter: alpha(opacity = 80);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	zoom: 1;
	position: absolute;
	left: 0;
	width: 230px;
	height: 30px;
	font-size: 11px;
}

#entrances .col span em {
	font-style: normal;
	background: #5c6273;
	height: 24px;
	padding: 6px 6px 0 6px;
	position: absolute;
}

#entrances .col.green span { background: #c0d8cf;}
#entrances .col.blue span { background: #b7d5e4;}
#entrances .col.grayblue span { background: #a2c0cf;}

#entrances .col.green span em { background:#80a1b3;}
#entrances .col.blue span em { background:#657bac;}
#entrances .col.grayblue span em { background:#85ab9d;}

#entrances .col a:hover span {
	opacity: .9;
	filter: alpha(opacity = 90);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

#entrances .col.last { width: 222px; margin-right: 8px;}
#entrances .col.last span  { width: 222px;}

#entrances .rte { width: 220px; float: left; border-top: 30px solid #e6e7e8; padding: 2px 0 0 2px;}
#entrances .rte p {
	font-size: 15px;
	color: #6e7072;
	line-height: 20px;
}


/*--------------------------------------------------------------------*/
/* Product-overview, list */
/*--------------------------------------------------------------------*/
#overview  { padding: 50px 0 35px 0; float: left;}

#overview .product-group {
	width: 222px;
	float: left;
	height: 230px;
	position: relative;
	padding: 0 0 8px 8px;
}

#overview .product-group.first { padding-left: 0;}

#overview .product-group a { float: left;}
#overview .product-group span {
	position: absolute;
	bottom: 8px;
	display: block;
	background: #57595b;
	z-index: 99;
	opacity: .8;
	filter: alpha(opacity = 90);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	height: 27px;
	width: 212px;
	padding: 5px 0 0 10px;
	cursor: pointer;
}

#overview .product-group a:hover span { background: #808284;}
#overview .product-group.gray a:hover span { background: #d1d2d4;}
#overview .product-group.blue a:hover span { background: #cadfe9;}
#overview .product-group.pink a:hover span { background: #e2d7de;}
#overview .product-group.green a:hover span { background: #d3ddd6;}


#overview .product-group img {
	position: absolute;
	bottom: 8px;
	display: block;
}

/*--------------------------------------------------------------------*/
/* Image-list (used by product-groups/product-groups-wide/designers) */
/*--------------------------------------------------------------------*/
#image-list {
	padding: 50px 0 35px 0;
	float: left;
}

#image-list h1 {
	margin: 0 0 20px 0;

}

#image-list .group {
	float: left;
	background: url(../images/gray-border.gif) left bottom repeat-x;
	padding: 0px 0 0 0;
}

#image-list .group.first  { border-top: 1px solid #979797; }

#image-list .row {
	float: left;
	width: 567px;
	margin: 0 10px 0 0;
}

#image-list .row p { text-transform: uppercase; font-weight: bold; font-size: 11px;}
#image-list .row .price p { color: #68c0e3; text-align: right; font-size: 10px;}
#image-list img {
	padding: 5px 0 10px 0;
	display: block;
}

#image-list .row li {
	float: left;
	padding: 5px 10px 9px 0;
	height: 236px;
}

#image-list .info {
	float: left;
	width: 335px;
	padding: 5px 0 0 0;
}

#image-list .info .rte ul {
	padding: 0;
	list-style: none outside;
}

#image-list .info .rte li { background: transparent; padding: 0;} 

#image-list .info .rte a { color: #68c0e3; text-decoration: none;}
#image-list .info .rte a:hover { color: #6a6a6a;}
#image-list .info .rte h2 { margin: 0 0 1px 0;}

/* wide */
#image-list.wide .row { width: 737px;}
#image-list.wide .info { width: 165px;}

/* images (when no price is used, used by designers) */
#image-list.images .group { padding-bottom: 80px; border-top: 1px solid #979797; background: transparent;}
#image-list.images img {
	padding: 0;
	border: none;
	margin: 0;	
}

#image-list.images h2 { color: #9c9fa1;}
#image-list.images li { padding: 5px 5px 5px 0;}

/*--------------------------------------------------------------------*/
/* Inspiration */
/*--------------------------------------------------------------------*/
#inspiration-list {
	padding: 50px 0 35px 0;
	float: left;
}

#inspiration-list h1 { margin: 0 0 20px 0; }

#inspiration-list .row {
	width: 912px;
	border-top: 1px solid #979797;
	padding: 8px 0 25px 0;
}

#inspiration-list .row  ul { float: left;}

#inspiration-list .row li {
	width: 222px;
	margin: 0px 0 8px 8px;
	float: left;
}

#inspiration-list .row li img { display: block;}
#inspiration-list .row li.first { margin-left: 0;}
#inspiration-list h2.label {
	color: #717375;
	width: 222px;
	border-top: 1px solid #979797;
	border-bottom: 1px solid #979797;
	clear: both;
	font-size: 11px;
	margin: 0;
	
}

/*--------------------------------------------------------------------*/
/* Product-group */
/*--------------------------------------------------------------------*/
#group {
	padding: 50px 0 35px 0;
	float: left;
	width: 912px;
}

#group h1 {
	margin: 0 0 20px 0;
}

#group .primary {
	border-bottom: 1px solid #979797;
	float: left;
	padding: 0 0 8px 0;
}
#group .showcase {
	width: 549px;
	margin: 0 5px 0 0;
	float: left;
	border-top: 1px solid #979797;
}

#group .showcase li { float: left; padding: 5px 10px 0 0;}
#group .showcase img { padding: 5px 0 10px 0; }

#group .showcase span {
	width: 110px;
	display: block;
	font-weight: bold;
	font-size: 11px;
	color: #626262;
	text-transform: uppercase;
}
#group .showcase img  {
	display: block;
}

#group .content {
	float: left; 
	width: 355px;
	padding: 8px 0 0 0;
	border-top: 1px solid #979797;
}

#group .content .rte {
	width: 220px;
	float: left;
	padding-right: 10px;
}

#group .content .nav {
	float: right;
	width: 125px;
}

#group .content .nav ul { margin: 0 0 10px 0; }

#group .content .nav li {
	cursor: pointer;
	font-size: 11px;
	color: #68c0e3;
	margin: 0 0 2px 0;
	font-weight: bold;
}

#group .content .nav li.active,
#group .content .nav li.hover { color: #6a6a6a;}

#group .secondary {
	float: left;
	width: 912px;
}
#group .secondary .area { display: none;}
#group .secondary .area.active { display: block;}

#group .secondary .area .rte {
	width: 480px;
	padding: 10px 10px 0 5px;
}

#group .secondary .area .rte ul {
	list-style: none outside;
	padding: 0 0 0 10px;
}

#group .secondary .image-list li{
	float: left;
	list-style: none outside;
	margin: 0px 10px 10px 0;
}

/* Download list */
#group .download-list {
	padding: 10px 0px 0 5px;
	width: 480px;
}
.download-list ul {
	border-top: 1px solid #DFDFE0;
	padding: 0 0 20px 0;
	float: left;
}
.download-list li {
	float: left;
	width: 480px;
	padding: 10px 10px 10px 0;
	font-weight: bold;
	font-size: 11px;
	border-bottom: 1px solid #DFDFE0;
}

.download-list li p.select-download { margin: 5px 0 0;}
.download-list li p.info {font-weight: normal;}

.download-list li a {
	color: #68c0e3; float: left;
	height: 20px;
	padding: 8px 5px 0 30px;
	margin: 0 15px 0 0;
	font-weight: normal;
}
.download-list li a:hover { color: #6a6a6a;}

.download-list li a.pdf {
	background: url(../images/icon-pdf.gif) left top no-repeat;
}

.download-list li a.netpub {
	background: url(../images/icon-netpub.gif) left top no-repeat;
}

/*--------------------------------------------------------------------*/
/* Article*/
/*--------------------------------------------------------------------*/
#content {
	padding: 50px 0 35px 0;
	float: left;
	width: 912px;
}

#content .main {
	float: left;
	padding: 0 8px;
	width: 452px;
}

#content .main .rte { padding-right: 20px;}

#content .main-image { padding: 0 0 10px 0;}
#content .main-image img { display: block;}

#content .related {
	float: left;
	padding: 0 0 0 8px;
	width: 214px;
}

/*--------------------------------------------------------------------*/
/* Search results*/
/*--------------------------------------------------------------------*/
p.found {
	font-size: 12px;
	font-weight: bold;
	color: #9C9FA1;
}

.search-results .head h2 { margin: 0; clear: none; padding: 0; border: none;}

.search-results h2 { clear: both; padding: 20px 0 2px 0; margin: 0; border-bottom: 1px solid #DFDFE0;}
.search-results ul { padding: 5px 0 0 0; float: left;}

.search-results li {
	font-size: 11px;
	line-height: 16px;
	padding: 0 0 15px 0;
	float: left;
	width: 452px;
	margin: 0;
}

.search-results .img {  padding-right: 10px; float: left;}
.search-results .txt { padding: 5px 0 0 0;}
.search-results li a {
	color: #68c0e3;
	text-decoration: underline;
}

.search-results li a:hover { color: #6a6a6a;}

/*--------------------------------------------------------------------*/
/* Paging */
/*--------------------------------------------------------------------*/
.paging { border-top: 1px solid #DFDFE0; padding: 5px 0 0 0; float: left; width: 452px; margin: 10px 0 0 0;}
.paging li {
	float: left;
	padding: 0 5px 0 0;
	font-size: 11px;
}

.paging a { text-decoration: underline; color: #68c0e3;}
.paging a:hover { color: #6a6a6a;}

/*--------------------------------------------------------------------*/
/* RTE */
/*--------------------------------------------------------------------*/
.rte p,
.rte ol,
.rte ul,
.rte table {
	font-size: 11px;
	line-height: 16px;
	margin-bottom: 10px;
}

.rte a {
	text-decoration: underline;
}

.rte h2 { font-size: 15px;}
.rte h3 { margin-bottom: 2px; }


.rte ul { padding-left: 10px; list-style: none outside;}
.rte ol { padding-left: 25px;}
.rte li { margin-bottom: 4px; line-height: 14px;}

.rte ul li { background: url(../images/gray-arrow.gif) left 5px no-repeat; padding: 0 0 0 12px; }


.rte a { color: #68c0e3; text-decoration: none;}
.rte a:hover { color: #6A6A6A;}

.rte table td { padding: 5px 5px 5px 0;}
.rte table.border td { border: 1px solid #979797; padding: 5px;}

/*--------------------------------------------------------------------*/
/* bottom with languages */
/*--------------------------------------------------------------------*/
#bottom {
	float: left;
	width: 912px;
	margin: 15px 0 0 0;
	padding: 0 0 4px 0;
}

#bottom .content {
	margin: 0 auto;
	float: left;
	width: 912px;
	padding: 7px 0 0 0;
}

#logo-small {
	float: left;
}

#languages {
	float: right;
}

#languages li {
	float: left;
	margin: 0 0 0 2px;
}

#languages li img{ float: left;}

/*--------------------------------------------------------------------*/
/* Footer */
/*--------------------------------------------------------------------*/
#footer {
	clear: both;
	padding: 5px 0 100px 0;
	line-height: 14px;
	float: left;
	border-top: 1px solid #dfdfe0;
}

#footer .wrap { width: 912px; float: left; }
#footer .content { float: left; overflow: hidden;}

#footer, #footer a { color: #6a6a6a; }
#footer a:hover { color: #353535;}

#footer .col {
	float: left;
	padding-right: 38px;
}

/*--------------------------------------------------------------------*/
/* Formpage */
/*--------------------------------------------------------------------*/

input, textarea, select, option { font-size: 11px;}

.form {
	padding: 10px 0 0 0;
	margin: 0;
	width: 452px;
	float: left;
}

.formrow{
	float: left;
	width: 400px;
	padding: 0 0 8px 0;
	margin: 0;
	display: block;
}

.form label {
	font-size: 11px;
	padding-right: 10px;
	float: left;
	width: 100px;
	font-weight: bold;
}

.form input.text,
.form input.checkbox,
.form input.radio { float: left; margin: 0 4px 0 0; padding: 0;}

.form input.text { padding: 1px; width: 200px;}

.form .radio input,
.form input.checkbox { width: 13px; height: 13px;}

.form .radio input,
.form input.radio { width: 13px; height: 13px;}

.form textarea { clear: both; width: 310px; padding: 1px;}

.form span.grouplabel { display: block; font-size: 11px; padding: 0 0 5px 0;}

.form span.radio label { float: left; width: auto; }
.form span.radio input { float: left; margin: 1px 4px 0 0;}

.form .validationerror span { font-size: 11px;}

.form span.error { display: block; clear: both;}

.form span.checkbox { display: block; width: 400px; padding: 0 0 4px 0;}
.form span.checkbox input { float: left; margin: 0 4px 0 0; width: 13px; height: 13px;}
.form span.checkbox label { float: none; width: auto;}

/*--------------------------------------------------------------------*/
/* Resellers */
/*--------------------------------------------------------------------*/
.find-reseller { font-size: 11px;}
.find-reseller input.text { width: 208px; padding: 1px; margin: 0 0 10px 0;}
.find-reseller label { font-weight: bold;}
.find-reseller select { width: 214px; clear: both; margin: 0 0 5px 0;}
.find-reseller input.button { float: right;}

/*--------------------------------------------------------------------*/
/* hover popup price */
/*--------------------------------------------------------------------*/
.price { cursor: default; position: relative;}
.popup {
	display: none;
	position: absolute;
	width: 160px;
	background: #fff url(../images/hover-bg.gif) left top repeat-x;
	top: 10px;
	left: 40px;
	padding: 10px;
	color: #fff;
}

.price .popup p,
#image-list .row .price .popup p  {
	color: #fff;
	text-align: left;
	margin: 0 0 5px 0;
	font-size: 11px;
	text-transform: none;
}

.price .popup a { color: #36bff3;}

/*--------------------------------------------------------------------*/
/* lightbox addons */
/*--------------------------------------------------------------------*/

#imageData a#bottomNavClose {
	color: #68c0e3;
	width: auto !important;
	font-weight: bold;
}

#imageData a#bottomNavClose:hover {
	color: #6a6a6a;
}

#imageData #caption a {
	color: #68c0e3;
	font-weight: normal;
	white-space: nowrap;
}

#imageData #caption a:hover { color: #6a6a6a;}