@import url(reset.css);

/* -----------------------------------------------------------------
   Description: www.btpm.se common stylesheet
   Author: Robert Piira (www.piira.se)
   Date last updated: 2009-08-31 by Robert Piira
----------------------------------------------------------------- */

body {
	font: 100%/1.25em Helvetica, Arial, sans-serif;
	color: #454545;
	background: #ebe7d0 url(../images/body_bg.png) repeat-x; 
	min-width: 840px; 
	height: 100%;
}

html {height: 100%;}

h1, h2, h3, h4, h5, h6 {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	margin-bottom: 1em; 
}

h1 { 
  font-size: 1.5em; 
  font-family: Helvetica, Arial, sans-serif;
  color: #344b88;
}

h2 { 
  font-size: 1.25em; 
  color: #ff6721;
}

h3 { 
  font-size: 1em; 
  color: #ff6721;
  margin-bottom: 0;
}

h4 { 
  font-size: 0.8125em; 
  color: #454545;
}
	
p {
	margin-bottom: 1em;
	font-size:0.875em;
}

ul {
	margin-bottom: 20px;
	font-size:0.875em;
}

.clear {clear: both;}
.right {float: right;}
.left {float: left;}
.hide {display: none;}
.noMarg {margin-bottom: 0;}

a {text-decoration: underline;}

a:link {color: #34579a;}
a:visited {color: #34579a;}
a:hover, a:active {color: #ff6721;}

a[href^="http:"] {
	background: url(../images/extern_arrow.gif) no-repeat right -20px;
	padding-right: 11px !important;
}

a:hover[href^="http:"] {
	background: url(../images/extern_arrow.gif) no-repeat right 2px;
	padding-right: 11px !important;
}

a[href^="http://www.btpm.se"], a[href^="http://btpm.se"] {
	background-image: none;
	padding-right: 0;
}

a:hover[href^="http://www.btpm.se"], a:hover[href^="http://btpm.se"] {
	background-image: none;
	padding-right: 0;
}

#page {
	float: left;
	position: relative;
	left: 50%;
	margin-left: -420px;
	width: 840px;
	background: #FFF /*url(../images/grid.png)*/;
	}

#mastHead {
	position: relative;
	height: 160px;
}

#mastHead h1 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 54px;
	left: 10px;
	height: 55px;
	width: 330px;
	/*text-indent: -9999px;*/
	float: left;
}

#mastHead h1 a {
	height: 55px;
	width: 330px;
	/*background: url(../images/btpm_logo.png) no-repeat left top;*/
	display: block;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

#mastHead p.topContact {
	float: right;
	margin-right: 10px;
	line-height: 30px;
	font-size: 0.6875em;
	width: 260px;
	text-align: center;
	background: url(../images/top_contact_bg.png) no-repeat top center;
}

#mastHead p.topContact span {
	padding-right: 5px; margin-right: 5px;
	border-right: 1px solid #777;
}

#hem #mastHead h1 a {
	cursor: default;
	text-decoration:none;
}

#content {
	padding: 0 0 20px;
	float: left;
}

#footer {
	padding: 40px 20px;
	clear: left;
	width: 800px;
	background: url(../images/footer_top_bg.png) no-repeat top left;
	position: relative;
	left: 50%;
	margin-left: -420px;
}

#footer ul {
	margin: 0;
	font-size: 0.75em;
}

#footer ul li{
	width: 300px;
}

/*--------------------------------------- COLUMNS */

#mainContent {
	width: 530px;
	padding: 0 20px;
	float: left;
}

#secondaryContent {
	width: 250px;
	float: left;
}

#secondaryContent h3 {
	padding: 20px 20px 0 20px;
	color: #666;
}

#secondaryContent h3 a {
	text-decoration: none;
}

#secondaryContent div {
	float: left; 
	background: url(../images/second_round_top.png) no-repeat left top;
	width: 100%;
}

#secondaryContent div p, #secondaryContent div ul { 
	background: url(../images/second_round_bottom.png) no-repeat left bottom;
	float: left;
	width: 210px;
	padding: 20px;
	font-size: 0.8em;
}

#hem #mainContent {
	width: 370px;
	padding: 0 29px 0 20px;
	float: left;
}

#hem #secondaryContent {
	width: 400px;
	padding-left: 10px;
	float: left;
	border-left: 1px solid #CCC;
}

#hem #secondaryContent div{
	border-top: 1px solid #CCC;
	width: 400px;
	background: none;
	padding: 19px 0 20px 0;
	margin-bottom: 0;
}

#hem #secondaryContent h3 {
	float: left;
	padding: 0 20px;
	display: block;
	width: 230px;
}

#hem #secondaryContent p {
	padding: 0 20px;
	background: none;
	width: 230px;
	margin-bottom: 0;
}

#hem #secondaryContent img {
	float: left;
}


/*#foretaget #mainContent {
	width: 390px;
	padding: 0 30px 0 20px;
	float: left;
}*/

#kunder #secondaryContent, #foretaget #secondaryContent {
	display: none;
}

/*--------------------------------------- CONTENT */

#header {
	background: url(../images/produkt_header_test.jpg) no-repeat left top;
	height: 60px;
	width: 800px;
	padding: 20px 0 20px 20px;
	position: relative;
	margin: 0 0 45px 10px;
	line-height: 60px;
}

#header h1 {
	color: #FFF;
}

#hem #header {
	background: url(../images/test_header.jpg) no-repeat left top;
	height: 220px;
	line-height: 1.25em;
}

#hem #header h2 {
	color: #FFF;
	float: right;
	padding: 18px 20px 0 20px;
	margin: 20px 0 0 0;
	display: block;
	width: 360px; height: 35px;
	background: url(../images/header_paragraf_bg.png) no-repeat top left;
}

#hem #header p {
	color: #FFF;
	font-size: 16px;
	float: right; clear: right;
	padding: 0 20px 25px 20px;
	display: block;
	width: 360px; 
	font-weight: lighter;
	background: url(../images/header_paragraf_bg.png) no-repeat bottom left;
}

#produkter #header {
	background: url(../images/header_produkter.jpg) no-repeat left top;
}

#secondaryContent a.callToAction {
	display: block;
	position: relative;
	width: 360px; height: 80px;
	background: url(../images/call_to_action_test.jpg) no-repeat bottom left;
	text-decoration: none;
	padding: 20px;
	font-size: 1.25em; font-weight: bold;
	color: #FFF;
	margin-bottom: 20px;
}

#secondaryContent a.callToAction span{
	position: absolute;
	bottom: 20px; left: 20px;
	cursor: hand;
}

#secondaryContent a.callToAction:hover {
	background-position: top left;
	text-decoration: underline;
}

div.productHolder {
	position: relative;
	float: left;
	width: 100%;
	padding-bottom: 50px;
}

#produkter #mainContent h2 + p, #kontakt #mainContent h2 + p,
#certifikat #mainContent h2 + p {
	margin-bottom: 40px;
}

.productHolder img {
	float: left;
	border: 4px solid #dedfdf;
	margin: 0 20px 10px 0;
}

.productHolder p {
	float: left;
}

.productHolder table {
	float: left;
	font-size: 0.6875em;
	margin: 0;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.productHolder th {
	font-weight: bold;
	color: #34579a;
	padding: 0 8px 10px 8px;
	border-bottom: 2px solid #6678b1;
}

.productHolder td {
	border-bottom: 1px solid #ccc;
	color: #5f7d94;
	padding: 6px 8px;
}

.productHolder tbody tr:last-child td {
	border-width: 2px;
}

.productHolder tbody tr td {
	background: #F2F2F2;
}

.productHolder tbody tr:hover td {
	color: #222;
}


div.certifikatHolder {
	width: 245px; display: inline;
	margin: 0 20px 20px 0;
	padding-bottom: 20px;
	float: left;
	background: #dedfdf;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.certifikatHolder h3 {
	margin-bottom: 20px;
	display: block;
	color: #FFF;
	background: #788faa;
	padding: 10px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-top-left-radius: 8px;
}

.certifikatHolder img {
	padding: 0;
	margin: 0 10px 0 10px;
	float: left;
	border: 2px solid #FFF;
}

.certifikatHolder p {
	float: left;
	font-size: 11px;
	margin-bottom: 0;
	line-height: 16px;
}

.certifikatHolder a {
	display: block;
	margin-bottom: 5px;
	padding-left: 20px;
	background: url(../images/pdf_icon.png) no-repeat left center;
}

#kontakt input, #kontakt textarea {
	background: #F2F2F2;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #CCC;
	width: 248px;
	padding: 8px;
	margin-bottom: 10px;
	clear: both;
	display: block;
}

#kontakt input[type="hidden"] {
	display: none;
} /* .net hidden input fix */

#kontakt input[type="submit"] {
	background: #34579a; color: #FFF;
	width: 110px; height: 38px;
	padding: 0;
}

#kontakt input[type="submit"]:hover {
	background: #ff6721;
}

#kontakt input:focus, #kontakt textarea:focus {
	background: #fffeed;
}

#kontakt label {
	line-height: 20px; clear: both;
	display: block;
}

#kontakt textarea {
	width: 378px; height: 208px;
	padding: 10px; 
	font-family: Helvetica, Arial, sans-serif;
	margin-bottom: 20px;
}

#kontakt #mainContent p {
	margin-bottom: 0;
}

#kontakt #content {
	background: url(../images/telefon.jpg) no-repeat bottom right;
}

/*--------------------------------------- NAVIGATION */

ul#secondaryNav {
	width: 110px;
	float: left;
	padding-left: 20px;
	font-size: 80%;
}

ul#secondaryNav li {
	padding-left: 20px;
	background: #FFF url(../images/secondary_nav_bullets.png) no-repeat left center;
}

#secondaryNav a.active {
	color: #454545;
	cursor: default;
	text-decoration: none;
}

#mainNav li a {
	display: block;
	position: relative;
	float: left;
	display: inline;
	padding: 0 2px 0 10px;
	height: 40px;
	line-height: 40px;
	margin-right: 18px;
	text-decoration: none;
	font-size: 85%; text-transform: uppercase;
}

#mainNav li a span {
	display: block;
	position: absolute;
	right: -8px;
	top: 0;
	float: left;
	height: 40px; width: 8px;
}

#mainNav a:link, #mainNav a:visited {
	color: #666;
}

#mainNav a:hover {
	color: #333;
	background: url(../images/nav_sprite.png) no-repeat left top;
}

#mainNav a:hover span {
	background: url(../images/nav_sprite.png) no-repeat right top;
}

#mainNav {
	padding: 0 10px;
	height: 40px;
	clear: left;
}

#mainNav li {
	height: 40px;
	float: left;
	display: inline; 
}

#hem #mainNav .hem a,
#produkter #mainNav .produkter a,
#certifikat #mainNav .certifikat a,
#kunder #mainNav .kunder a,
#foretaget #mainNav .foretaget a,
#kontakt #mainNav .kontakt a {
	color: #FFF;
	cursor: default;
	background: url(../images/nav_sprite.png) no-repeat left bottom;
}

#hem #mainNav .hem a span,
#produkter #mainNav .produkter a span,
#certifikat #mainNav .certifikat a span,
#kunder #mainNav .kunder a span,
#foretaget #mainNav .foretaget a span,
#kontakt #mainNav .kontakt a span {
	color: #FFF;
	cursor: default;
	background: url(../images/nav_sprite.png) no-repeat right bottom;
}

/*--------------------------------------- Extras */

#footer a.piira {color: #454545; display: block; min-width: 100px; height: 20px; float: right; padding-right: 25px !important; text-decoration: none; background: url(../images/piiradesign.png) no-repeat center right; }
#footer a:hover {text-decoration: underline;}