/* main styles for Quicke */

/* General link color: 81BBE8 */
/* General body copy color: 768086 */
/* Alternate darker header color: 29363E */
/* Background Colour Light blue gray: E6EDEF */

/* Reset */
html,body {height: 100%; margin:0; padding:0;}



/* Basic typography */

body {
	font-family: Helvetica, Arial, sans-serif;
	background-color: #E6EDEF;
	min-width: 960px;
}

body.startpage {
	background-image: url('/Media/Designimages/startpage_bgr.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-color: #000;	
}



h1, h2 {
	text-shadow: 1px 1px white;
	color: #29363E;
	font-size: 24px;
	line-height: 26px;
	font-weight: normal;
	margin: 12px 0 12px 0;
	padding: 0;
}
	

h3, h4, h5, h6 {
	color: #29363E;
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

img {border:0;}

a {color: #81BBE8; text-decoration:none; }
a:link {color: #81BBE8; }
a:visited {color: #81BBE8; }
a:hover {color: #3b8fcf/*tills vidare*/}		
a:active {color: #990000;}

a.external {
background-image: url('/Media/Designimages/earth.png');
background-repeat: no-repeat; 
background-position: right center;
padding-right: 20px;
}

a.arrow_medium {
	background-image: url('/Media/Designimages/link_arrow_12x12.png');
	background-repeat: no-repeat; 
	background-position: 0 2px;
	padding-left:17px;
}




p, li, blockquote {
	font-size: 14px;
	line-height: 18px;
	color: #768086;
}
		
p.puff {
	color: #768086;
	font-size: 12px;
	line-height: 16px;
	background: white;
	padding: 20px;
}

p.puff2 {
	color: #768086;
	font-size: 12px;
	line-height: 16px;
	padding: 20px;
	border: 1px solid white;
}


 
/* TABLES */

table {
	border: 3px solid #E6EDEF ;
	-webkit-border-radius:20px;
	-moz-border-radius: 20px;
	border-collapse: collapse;
}

td 
{
	text-align: left;
	padding: 2px 10px;
	margin: 0;
	color: #768086 ;
	font-size: 11px;
	line-height: 15px;
	vertical-align:top;			
}

th 
{
	text-align: left;
	padding: 2px 10px 2px 10px;
	margin: 0;
	color: #768086 ;
	font-size: 11px;
	line-height: 15px;
	font-weight: normal;
	vertical-align:top;		
}

tr:first-child th {
	padding: 5px 10px 5px 10px;
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
}

tr {
	border: none;
	margin: 0;
	padding: 0;
}
tr th:first-child {
	border-right: 1px solid #E6EDEF ;
	}

tr:first-child th {
	border-bottom: 1px solid #E6EDEF ;
	padding-top: 5px;
}
tr:last-child td {
	padding-bottom: 5px;
}

.centercontent { text-align:center !important;}

table.neutral {
	border: none;
}
table.neutral td,
table.neutral th {
	padding:0;
	border:none;
}

/* Tables in forms */

form table {
	border:none;
}

form table td,
form table th {
	padding: 5px 10px 5px 0 !important;
	vertical-align:middle;
	border:none !important;
	font-size: 14px !important;
	line-height: 18px !important;
}

form table td {
	font-size: 11px !important;
}


/* page variants */
.flashintro .pageheader { 
	position:absolute; 	
	z-index:100; 
	width: 100%; 
	background-color: transparent; 
	height: 55px; 
}


.flashintro .sec_header {
	background-color: #000;
	color: #fff;
	height: 460px;
	position: relative;
}

.flashintro .sec_header h1,
.flashintro .sec_header h2 {
	color: #fff; 
	text-shadow: none;
	font-size:24px;
	line-height:26px;
	text-shadow:1px 2px 15px #222222;
}

.flashintro .sec_header .intropanel { 
	position: absolute;	
	z-index: 50;
	bottom:15px; left: 50%;
	width: 710px;
	margin-left: -355px;
	height: auto;
}
.flashintro .sec_header .intropanel p {
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	text-shadow:1px 2px 15px #222222;	
}



#flash {height: 460px; text-align: center; overflow: hidden;}
#flash img {width: 1600px; height: 460px; margin-left: -800px; position: absolute; left: 50%}

/* tab menus - general settings */
.tabs { display: table; padding:0; margin: 0; }
.tabs ul.tabs1 { display: table-row; padding:0; margin: 0;}
.tabs ul.tabs1 li { display: table-cell; text-align: center; vertical-align: bottom;}
.tabs a { display: block; text-decoration: none; padding: 5px 5px 5px 0;}


/* Main areas */

/* Page Header */
.pageheader { height: 120px; vertical-align: top; background: #000;}
body.startpage .pageheader {background:transparent; height:160px;}


.pageheader .grid_1 img {padding-left: 10px; padding-top:20px;}
.pageheader .tabs {width: auto; margin-right: 10px; margin-left:auto; margin-top:40px }
.pageheader .tabs ul.tabs1 li { vertical-align: bottom;}
.pageheader .tabs ul.tabs1 li a { font-size: 14px; padding: 0 0 0 15px; line-height: 30px; color: #768086; position:relative; margin: 0 15px 0 0; font-weight:bold;}

.pageheader .tabs ul.tabs1 li a:hover { 
	color: #fff; 
	background: url('/Media/Designimages/mainmenubgr.png') 0 0 no-repeat transparent;
}
.pageheader .tabs ul.tabs1 li a:hover span { 
	display: block;
	width:15px;
	height:30px;
	position: absolute;
	top:0;
	right:-15px;
	background: url('/Media/Designimages/mainmenubgr.png') right 0 no-repeat transparent;
}

.pageheader .tabsNotSelected { }
.pageheader .tabsSelectedItem,
.pageheader .tabsSelectedParent 
{ 

}

.pageheader .tabs ul.tabs1 li.tabsSelectedItem a,
.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:link, 
.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:visited,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:link, 
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:visited  
{ 
	color: #fff;
	background: url('/Media/Designimages/mainmenubgr.png') 0 0 no-repeat transparent;	 
}

.pageheader .tabs ul.tabs1 li.tabsSelectedItem a span {
	color: #fff;
	display: block;
	width:15px;
	height:30px;
	position: absolute;
	top:0;
	right:-15px;
	background: url('/Media/Designimages/mainmenubgr.png') right 0 no-repeat transparent;	
}

.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:hover,
.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:active,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:hover,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:active  
{ 
	color: #fff;	
}

.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:hover span,
.pageheader .tabs ul.tabs1 li.tabsSelectedItem a:active span,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:hover span,
.pageheader .tabs ul.tabs1 li.tabsSelectedParent a:active span  
{ 

}

.startpage .neutralbox .illustration { position: relative;}
.startpage .neutralbox .illustration img.topborderradius { position: absolute; z-index: 10; top: 0;}

.frontloaders .neutralbox .illustration { position: relative;}
.frontloaders .neutralbox .illustration img.topborderradius { position: absolute; z-index: 10; top: 0;}


	/* Basic look */
.pagebody .tabs {width: auto; margin-left: 0; margin-right:auto; padding-top: 5px; padding-left: 20px }
.pagebody .tabs ul.tabs1 li { vertical-align: bottom; font-size: 18px; line-height: 20px; padding-left: 10px;}
.pagebody .tabs ul.tabs1 li a {position: relative; font-size: 18px; line-height: 20px; padding: 30px 0 30px 20px; color: #ccc; background: none; margin-left: -30px; margin-right: 20px;}
.pagebody .tabs ul.tabs1 li a span {position:absolute; top:0; right: -20px;  width: 20px; height: 78px; }

.pagebody .tabs ul.tabs1 li a:link,
.pagebody .tabs ul.tabs1 li a:visited,
.pagebody .tabs ul.tabs1 li a:hover,
.pagebody .tabs ul.tabs1 li a:active {  color: #333; }

	/* Active tab */
.pagebody .tabs ul.tabs1 li.active a,
.pagebody .tabs ul.tabs1 li.active a:link, 
.pagebody .tabs ul.tabs1 li.active a:visited,
.pagebody .tabs ul.tabs1 li.active a:active{ color: #eee; background: transparent url('/Media/Designimages/tabmenu_active.png') -10px top no-repeat;}
.pagebody .tabs ul.tabs1 li.active a span,
.pagebody .tabs ul.tabs1 li.active a:hover span { color: #eee; background: transparent url('/Media/Designimages/tabmenu_active.png') -410px top no-repeat;}


.pagebody .tabs ul.tabs1 li a:hover {color: #333; background: transparent url('/Media/Designimages/tabmenu_hover.png')  -10px top no-repeat }
.pagebody .tabs ul.tabs1 li a:hover span {  background: transparent url('/Media/Designimages/tabmenu_hover.png')  -410px top no-repeat }



.pagebody .parallell,
.pagebody .nonparallell,
.pagebody .documents { float: left;}

.pagebody .parallell h3, 
.pagebody .nonparallell h3,
.pagebody .nonparallell h3,
.pagebody .documents h3 a {
			margin: 0; padding: 0;
			font-size: 12px;
			font-weight: normal;
			color: #768086;
}


.pagebody .parallell h3 a,
.pagebody .nonparallell h3 a,
.pagebody .documents h3 a {
	text-decoration: none; 
	font-size: 12px;
	font-weight: normal;
	color: #768086;	
}

.pagebody .parallell h3 { padding-right: 25px; float: right; }
.pagebody .nonparallell h3 { padding-left: 20px; float: left;}
.pagebody .documents h3 { padding-left: 20px; float: left;}

.pagebody .parallell .tabs,
.pagebody .nonparallell .tabs,
.pagebody .documents .tabs { padding-top:0; padding-bottom: 0;  margin-top: -15px; clear: both; z-index: 1}

.pagebody .features {
	margin: 15px 0 10px 0;
}

/* flikarna i höjdled */
/*Denna sätts ju längre upp?! /fd */
/*.pageheader .tabs ul.tabs1 li a { font-size: 14px; padding: 10px 10px 7px 10px; line-height: 14px; color: #ccc; }*/


.dummy { visibility: hidden}
.tabbedarea {margin-top: -20px; padding-top: 25px; display: block !important; z-index: 0; padding-bottom: 10px;}

.pagebody {
	position: relative;
	background-color: #e6edef;
	color: 	#768086;
	/*background-image: url("/Media/Designimages/pagebody_bgr.jpg");*/
}

body.startpage .pagebody {
	background-image: none;
	background-color: transparent;
}

body.fallback .pagebody { padding: 40px 0;}

body.implementspage .tabbedarea > .container_2 > .grid_2 {
	margin-bottom:20px;
}


.tabbedarea {background-color: #fff;}

.metabar 
{
	position: relative;
	background-image: url("/Media/Designimages/bgr_highlight.png");
	background-repeat:no-repeat;
	background-position:top center;
 	background-color: #434f57;
}
.metabar h2
{
	font-size: 18px;
	line-height: 18px;
	text-shadow:none;
	color: #fff;
}
.metabar p {
	color: #fff;
	font-size: 12px;
	line-height: 16px;
}

.metabar .neutralbox {
	margin: 30px 0 25px 0;
}

.pagefooter {
	background-color: #434f57;
}

.pagefooter .neutralbox {
	padding: 20px 10px;
}

.pagefooter p {
	font-size: 12px;
	line-height:16px;
	color:#768086;
	margin:0;
	text-align:center;
	
}

.pagefooter a {
	color:#768086;
	text-decoration: underline;
}
.pagefooter a:hover {
	color:#fff;
}

.pagefooter .tabs { display: inline-block; }



/* Boxes */
	
.box {
	width: 230px;
	margin-left:5px;
	margin-bottom: 40px;
	background: url("/Media/Designimages/boxbackground.png") no-repeat top left;
	position: relative;
}	

.box .content {
	height: 380px;

}

body.implementspage .box {
	background: none;
}

.neutralbox { 
	padding-left: 10px; 
	padding-right: 10px; 
	margin-left: 0;
	margin-bottom: 20px;
}

body.reasonspage .neutralbox {
	margin-top: 40px;
}

.neutralbox h3 {
	color: #29363E;
}

.implement_hooks {
	margin-top: 40px;
}

.locate_your_delaer_container {
	margin-top: 22px;
	margin-bottom: 20px;
}

/* grid_2_paddedleft/right is used to create narrower columns. For example on the implements page */
.grid_2_paddedleft {
	padding-left:125px;
	width: 345px !important;
	padding-right:10px;
	margin-bottom:36px;
}		
.grid_2_paddedright {
	padding-right:50px;
	width: 345px !important;
	padding-left:10px;
	margin-bottom:36px;		
}

/* grid_2_paddedleft/right is used for special formatting of the implement hook section*/
.grid_2_implementinfo_left {
	width: 340px !important;
	padding: 0 20px 0 10px;
}
.grid_2_implementinfo_left h2 {
	font-size:32px;
	line-height:32px;
}
.grid_2_implementinfo_left p {
	font-size:18px;
	line-height:22px;
}
.grid_2_implementinfo_left p small {
	font-size:12px;
	line-height:16px;
}

.grid_2_implementinfo_right {
	width: 580px !important;
	padding: 0 10px 0 0px;
}		
.grid_2_implementinfo_right img {
	float:left;
	margin: 0 10px 0 0;
}
.grid_2_implementinfo_right p {
	margin: 0 0 40px 240px;
	font-size: 12px;
	line-height: 16px;
}
.grid_2_implementinfo_right h3 {
	margin: 1em 0 1em 240px;
}				
			
.box img {
	padding: 5px 5px 0 5px;
	vertical-align: bottom;
}		

.box h2 {
	color: #29363E;
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	margin: 15px 25px 10px 25px;
}		

.box p{
	color: #768086;
	font-size: 12px;
	line-height: 16px;
	margin: 0 25px
}

.box .panellink a {
	display:inline-block;
	background: url("/Media/Designimages/bluebutton_edge.png") no-repeat top right;
	padding: 0 10px 0 0;
	color: #768086;
	font-size: 12px;
	line-height: 16px;
	margin: 1em 25px 0 25px;
	text-decoration: none;
	cursor: pointer;
}

.box .panellink a span {
	background: url("/Media/Designimages/bluebutton.png") no-repeat top left;
	height:20px;
	display: inline-block;
	padding: 1px 0 0 10px;
	color:#fff;
	font-size:11px;
}	

.box .topborderradius {
	background: url("/Media/Designimages/topborderradius.png") no-repeat top left;
	position: absolute;
	display: block;
	width: 230px;
	height: 20px;
}		

.box .bottomborderradius {
	background: url("/Media/Designimages/boxbackground.png") no-repeat bottom left;
	display: block;
	width: 230px;
	height: 25px;
	position: absolute;
}

body.implementspage .box .topborderradius {
	background: url("/Media/Designimages/border-implements.png") no-repeat top left;
	height:151px;
}

body.implementspage .box .bottomborderradius {
	background: none;
}

body.startpage .pagebody .container {
	margin-top:220px;
}

body.implementspage .box h2 { margin-left:15px; margin-right:15px;}
body.implementspage .box p { margin-left:15px; margin-right:15px;}
body.implementspage .box .panellink a { margin-left:15px; margin-right:15px;}

.frontpagebox { padding-left: 10px; padding-right: 10px; margin: 0 0 20px 0;}

.frontpagebox img { float: left; }
.frontpagebox h1,
.frontpagebox h2,
.frontpagebox h3,
.frontpagebox ph4,
.frontpagebox p { margin: 0 0 0 120px; }

body.startpage .pagebody h2 {
	text-shadow:none;
	color:#fff;
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 18px;	
}

.frontpagebox p {
	font-size: 16px;
	line-height: 20px;
}

body.startpage .grid_1 .neutralbox p,
body.startpage .grid_1 .neutralbox span.panellink {
	font-size: 12px;
	line-height: 16px;
}

body.startpage .grid_1 .neutralbox .meandmyquickeauthor { font-style: italic; }

body.startpage .grid_2 .grid_1 .neutralbox h2 {
	text-shadow: none;
	color: #fff;
}

/* Frontloader Technical Specifications */

.frontloadertechspeclegend p {
	float:left;
	margin-left: 30px !important;	
}

.frontloadertechspeclegend p img {
	float:left;
	margin-left:-30px;
	margin-top: 5px;
}

.frontloadertechspeclegend img.angleslegend {	
	margin:0 0 20px;
}

body.frontloaders .tabbedarea p {
    font-size: 12px !important;
    line-height:16px;
    margin:0
}

body.frontloaders .tabbedarea h2 {
    margin:12px 0 36px;   
}

body.frontloaders .tabbedarea h3 {
    margin:16px 0 4px;   
}
body.frontloaders .tabbedarea h3:first-child {
    margin:0px 0 4px;   
}

body.frontloaders .tabbedarea ul {
	margin:1em 0 1em 0;
	padding:0 0 0 1em;	
}

body.frontloaders .tabbedarea ul li {
}

/* Frontloaders Gallery */

.galleryimg {
	float:left;
	vertical-align: bottom;
	margin: 0 0px 5px 5px;
}

.galleryimg_first {
	margin: 0 0 5px 0;
}

/* Frontloader box modifications */

.accessorises_implements {
	margin-bottom: 20px;
}

.accessorises_implements .grid_1,
.accessorises_implements .grid_1 p {
	font-size:12px;
	line-height:16px;
}

.accessorises_implements .grid_1 h3 {
	line-height:26px;
	margin:0.5em 0;
}


/*
.accessorises_implements .grid_1 img {
	float:left;
	margin: 0 10px 10px 0;
}
*/

/* Adapted boxes */
.metabar .box .topborderradius,
.metabar .box .bottomborderradius { }


/* Implements gallery */
/* lightbox: adapted method 3 from http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image */
ul.lightbox { display: block; margin: 40px 0 0 0; padding: 0; }
.lightbox li {display: block; position: relative; float: left; width: 60px; height: 60px; border: 1px solid #E6EDEF; margin: 5px 5px 0 0; padding: 2px; }
.lightbox li a {display: block; position: absolute; clip: rect(20px 80px 80px 20px); top: -20px; left: -20px; width: 100px; height: 100px;}
.lightbox li a span { display: table-cell; width: 100px; height: 100px; border: 1px solid blue; vertical-align: middle; text-align: center;}
.lightbox li a span img { border: none;}

/*Nav for featurepanel */

.featurenavigation { display: none; }  
.activenav { display: block !important; position:relative; }
.activenav .grid_4 { display: block !important; width: 970px !important; margin: auto auto auto -5px; float: none; position:absolute; top:-430px;}
.activenav .grid_4 .navi {display:none;}
.activenav .grid_4 .prevPage {float:left;}
.activenav .grid_4 .nextPage {float:right;}

/*Nav for gallery on frontloaderpage */

.gallerycontainer {
/*	background-repeat: no-repeat;
	background-position: 5px -4px;
	background-image: url('/Media/Designimages/galleryframe.png');
	*/
}
/* .gallerycontainer img.overlay {position: absolute; top:0; left:0; z-index: 100;}  */

.frontloaderoverlay {
	position:absolute;
	top: 5px;
	left: 5px;
	z-index: 10;
}

.frontloadergallery {margin-top: 10px;}
.frontloadergallery img {display: block; border: none;}
.frontloadernavbar {
	position: relative; 
	text-align: center; 
	padding-bottom: 10px;
	z-index: 100;
}
.frontloadernavbar .flickrlink {position: absolute; right: 15px; top: 15px; font-size:12px; line-height:20px;}
.frontloadergallery .images .image {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height: 300px;
	width: 460px;
	overflow: hidden;
}

/* For accessories popup on frontloader page */
.accessoriespopupcontent img {
	float:left;
}
.accessoriespopupcontent p,
.accessoriespopupcontent h3 { 
	margin-left:240px;
}
.accessoriespopupcontent .neutralbox:first-child p {
	margin-left:0;
	font-size:18px;
	line-height:24px;
}
.accessoriespopupcontent .neutralbox {
	clear:both;
	overflow:auto;
}

/*Hide away some elements*/
h2#features,
.accessorises_implements > .grid_2:first-child > .neutralbox > h2
{
	position: absolute;
	height:1px;
	width:1px;
	left:-9999px;
}

/* iframe styling */
iframe { margin-bottom: 25px; }

/* Progressive Enhancement of clickable boxes */
.clickablebox {
    cursor: pointer;
}

/* Selectofix icon on Implements Page */
.overlay .icon-selectofix {
	float:right;
	margin:0 0 20px 20px
}

.selectofix-description img.icon-selectofix {
	float:left;
	margin: 0 20px 20px 0;
} 
.selectofix-description p {
	margin:0;
}