/* ############################################################### */
/* Generella elementdefinitioner  */
/* ############################################################### */

*{
  padding: 0;
  margin: 0;
}

html {
	/*font-size: 125%;*//* Detta motsvarar 20 pt. I procent för att em ska fungera i IE */
  font-size: 125%;
}

body{
  /*
  font: 50%/1.3em  Verdana, Arial, Helvetica, sans-serif;*/  /* motsvarar 10pt = 1 em */
  font-size: 50%;
  line-height:1.5em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*font-family: arial, verdana, helvetica, sans-serif;*/
  text-align: center; /* IE 6 fix eftersom den ej gillar margin 0 auto */
  /*font-size: 0.8em;*/
  background: #cccccc;
  margin: 0;
}

a.contact_title:active, a.contact_title:link, a.contact_title:visited {
    text-decoration: underline;
    color: #993333;
}

a{
  text-decoration: underline;
  color: #993333;
}
a:hover{
  color: #cc0000;
}
a:active{
  color: #800000;
}
a:visited{
  color: #404040;
}

a.brightLink{
  color: #ffffff;
}
a:hover.brightLink{
  color: #ccff99;
}
a:visited.brightLink{
  color: #ffffff;
}
a:link.brightLink{
  color: #ffffff;
}

a.discreetLink{
  color: #ffffff;
  text-decoration: none;
}
a:hover.discreetLink{
  color: #ffffff;
}
a:visited.discreetLink{
  color: #ffffff;
}
a:link.discreetLink{
  color: #ffffff;
}

input{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

textarea{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  overflow-y: scroll;
  width: 22em;
}

/* Set font-size to classes (11px) */
a,
p,
input,
textarea,
.navigationLabel,
.navigationText,
.navigationTextActive,
ul.contentAreaSubMenu li.subMenuLabel,
ul.contentAreaSubMenu li.subMenuLink a,
ul.liststandard,
ol.listnumbered,
.inlineText,
.initSquare,
table.sortable th,
table.sortable td,
.contact_name,
.contact_title,
.contact_phone,
.rowLabel,
.rowInput,
.text_title{
  font-size: 1.1em;
}

/* Clearfixes */
.serviceArea:after,
.contentArea:after,
.pictureArea:after,
.navigationArea:after,
.contact_container:after,
.contact_row:after,
.contact_image_container:after,
.contact_content_container:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.text_indent_zero {
    text-indent: 0;
}


/* ############################################################### */
/* # Area klasser */
/* ############################################################### */
.serviceArea{
  background: white;
  margin-left: auto;
  margin-right: auto;
  width: 77em;
  text-align: left;
}

.logoArea{
  background: white;
  padding: 1.6em 1em 1.6em 1em;
  width: 75em; /* -2 em för padding */
  float: left;
  height: 2.8em;
}

.logoArea img{
  border: none;
  width: 32.8em;
  height: 2.8em;
}

.pictureArea{
  width: 77em;
  height: 13.5em;
  float: left;
  border-bottom: #9a0000 4px solid;
}

.pictureArea img{
  width: 77em;
  height: 13.5em;
}

/* ############################################################### */
/* # menuAreaPrimary klasser */
/* ############################################################### */
ul.menuArea{
  text-align: center;
  list-style: none;
  float: left;
  height: 2.8em;
  background: url("../images/menuAreaPrimary_background.gif");
  background-color: #e8e8e8;
  background-repeat: repeat-x;
  width: 77em;
}
ul.menuArea li{
  vertical-align: bottom;
  text-align: center;
  float: left;
  padding: 0.6em 1.15em 0.6em 1.15em;
}
ul.menuArea li a:link,
ul.menuArea li a:visited
{
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 1.3em;
}
ul.menuArea li a:hover{
  color: #cc0000;
}
ul.menuArea li a:active{
  color: #800000;
}
#menuItemActive{
  color: #9a0000;
}

/* ############################################################### */
/* # navigationArea klasser */
/* ############################################################### */
.navigationArea{
  background: white;
  text-align: left;
  padding: 1em 0 0 1.8em;
  width: 75.0em; /* -2.0em för padding*/
  float: left;
}
.navigationText a,
.navigationTextActive a{
  font-size: 1em;
  text-decoration: none;
}

.navigationLabel{
  font-weight: bold;
}

.navigationText{
  color: black;
}
.navigationText a{
  color: black;
}
.navigationText a:hover{
  text-decoration: underline;
}

.navigationTextActive{
  color: #980000;
}

/* ############################################################### */
/* # contentArea och klasser för de olika sidtyperna */
/* ############################################################### */
.contentArea{
  background: white;
  width: 73.8em; /* -3.2em för padding-left och -right */
  float: left;
  clear: left;
  margin: 0 0 4em 0;
  padding: 3em 1.6em 0 1.6em
}

.contenttype1{
  width: 41em;
  padding: 0 1.4em 1.4em 0;
  float: left;
}

.contentbartype1{
  padding: 0 0 1.4em 1.4em;
  width: 28.3em;
  float: right;
  text-align: right;
}

.contentbartype2{
  padding: 0 0 0 1.4em;
  width: 28.3em;
  float: right;
  text-align: right;
}


.contentbartype1 img,
.contentbartype1 a img{
  width: 27.5em;
  clear: left;
  margin: 0 0 1.5em 0;
  border: none;
  /* float:left ger inget bra resultat i IE då vissa bilder försvinner när man ändrar teckenstorlek*/
}

.content_type2{
  text-align: left;
  width: 46em;
  background-color: white;
  float: left;
}

.topnav_image{
  width: 46em;
  padding: 0 0 1em 0;
}

.topnav_image1{
  width: 32em;
  padding: 0 0 1em 0;
}

/* ############################################################### */
/* Klasser för absolut/relativ positionering av text.              */
/* ############################################################### */
/*
Används på fokusbilderna på högerytan på förstasidan.

Kom ihåg att ändra i default_ie_fix.css för att få korrekt positionering av textPosition-klasserna
då IE positionerar div:arna 9px längre åt höger
*/
.fokus_container{
  position: relative;
}

.fokus_text{
  position: absolute;
  text-align: left;
  width: 24em;
}

.textPosition_arkitekt{
  top: 6.5em;
  left: 1.7em;
}
.textPosition_arkitekt p{
  line-height: 1.3em;
  padding-bottom: 0.6em;
}

.textPosition_anmalinstallation{
  top: 1.8em;
  left: 2.2em;
  color: white;
}

.textPosition_fragorsvar{
  top: 27em;
  left: 11.5em;
}

.textPosition_boxbarometern{
  top: 4em;
  left: 2.3em;
  width: 12em;
  color: white;
}

.percentPosition_boxbarometern{
  top: 10em;
  left: 18em;
  color: white;
  font-weight: bold;
}

/* ############################################################### */
/* # contentAreaSubMenu - Klasser för sidmenyerna */
/* ############################################################### */
ul.contentAreaSubMenu{
  width: 18em;
  height: 19.2em; /* -1.4em för att kompensera för paddingen */
  float: left;
  margin: 0 0.5em 1.3em 0;
  padding: 1.4em 0 0 1em;
  background-color: #ececec;
  list-style: none;
}
ul.contentAreaSubMenu li.subMenuLabel{
  font-weight: bold;
  color: #993333;
  line-height: 1.18em; /* 18% större än 11px = 13px */
  display: block;
  padding-top: 0.15em;
  padding-bottom: 0.175em;
}
ul.contentAreaSubMenu li.subMenuLink a{
  line-height: 1.545; /* 54.5% större än 11px = 17px */
  color: black;
}

/* ############################################################### */
/* # Klasser för sidfot */
/* ############################################################### */
.pageFoot{
  width: 75em;
  border-top: #666666 1px solid;
  clear: left;
  padding: 0 0 1em 0;
  margin: 0 0.4em 0 1em;
}

.pageFootLabel{
  font-size: 1.1em;
  color: #666666;
  padding: 0 0.45em 0 0.45em;
}

/* ############################################################### */
/* # Klasser för "flytande" hide and show texter */
/* ############################################################### */

.float_descriptionShow{
  display: block;
  cursor: pointer;
  color: #993333;
  text-decoration: underline;
  font-weight: normal;
}

.float_descriptionText{
  border: black 1px solid;
  background-color: #ececec;
  display: none;
  position: absolute;
  width: 36em;
}

.float_descriptionText img.connector{
 position: relative;
 top: -0.5em;
 width: 1em;
 left: -0.1em;
}

/* ############################################################### */
/* # Klasser för textrutorna på förstasidan */
/* ############################################################### */
.textbox{
  background-color: #ececec;
  width: 41em;
  padding: 0 0 0.8em 0;
  display: block;
  margin: 0 0 1em 0;
}

.textbox img{
  width: 41em;
  border: none;
}
.textboxGreen{
  background-color: #f4ed73;
  width: 41em;
  padding: 0 0 0.8em 0;
  display: block;
  margin: 0 0 1em 0;
}
/* ############################################################### */
/* Klasser för skuggade textrutor på förstasidans "content_bar" a.k.a. annonskolumnen */
/* ############################################################### */

.textbox_bar{
  float: left;
  display: inline;
  background-color: #ececec;
  width: 25.8em;
  text-align: left;
  padding: 0.5em 1em 0 0.5em;
  margin: 0 0 0 1em;
  background-repeat: repeat-y;
  background-position: right 4px;
}

img.textbox_shadow{
  position: relative;
  left: 1px;
}


/* ############################################################### */
/* # Klasser för textformatering och diverse "content"-typdefinitioner */
/* ############################################################### */
h1{
  color: #333333;
  font-size: 1.6em;
  line-height: 1.375em;  /* 22pt radavstånd 37.5% mer än 1em (1em = 16px) */
  margin: 0 0 0.3em 0;
}

h2{
  color: #333333;
  font-size: 1.2em;
  line-height: 1.2em;
}

h3{
  color: #333333;
  font-size: 1.1em;
}

p{
  line-height: 1.454em; /* 45.4% större än 11px = 16px */
}

p a{
  font-size: 1em;
}

.imageLink{
  font-size: 1em;
  display: block;
}

.ingress{
  font-weight: bold;
  display: block;
  font-size: 1.2em;
}

.inlineText{
  display: inline;
  padding: 0;
  margin: 0;
}

ul.liststandard{
  padding: 0 0 0 3em;
}
ul.liststandard li a{
  font-size: 1em;
}

ol.listnumbered{
  padding: 0 0 0 3em;
}
ol.listnumbered li a{
  font-size: 1em;
}

ul.listnoindent{
  padding: 0 0 0 1.3em;
}

.initSquare{
  /*padding: 0 0 0 1.2em;*/
  text-indent: 1.2em;
  background: url('../images/ruta_rod.jpg');
  background-position: 0.1em 0.27em;
  background-repeat: no-repeat;
  display: block;
  margin: 0 0 1em 0;
}

.iconPDFText{
  padding: 0 0 0.1em 1.4em; /* Fyller ut med 0.1em så att inte bakgrundsbilden beskärs i botten */
  display: block;
  background: url('../images/pdfsymbol.gif');
  background-repeat: no-repeat;
}

.iconZIPText{
  padding: 0 0 0.1em 1.7em; /* Fyller ut med 0.1em så att inte bakgrundsbilden beskärs i botten */
  display: block;
  background: url('../images/zipsymbol.gif');
  background-repeat: no-repeat;
}

.iconWordText{
  padding: 0 0 0.1em 1.8em; /* Fyller ut med 0.1em så att inte bakgrundsbilden beskärs i botten */
  display: block;
  background: url('../images/wordsymbol.gif');
  background-repeat: no-repeat;
}

/* ############################################################### */
/* Klasser för hide and show texter */
/* ###############################################################*/

.descriptionShow{
  display: block;
  cursor: pointer;
  color: #993333;
  text-decoration: underline;
  font-weight: normal;
}

.descriptionText{
  display: none;
  background-color: #f3eaeb;
  margin: 1em 0 0 0;
  padding: 0.5em;
}
/* ############################################################### */
/* Klasser för tabeller / sorterbara tabeller                     */
/* ###############################################################*/

table.sortable{
    margin: 1em 0 3.5em 0;
	border-collapse: collapse;
}
table.sortable th, table.sortable td {
	text-align: left;
}

table.sortable th {
    vertical-align: top;
    background-color: #ececec;
    color: #993333;
    padding: 0.5em 0 0.5em 0;
    text-decoration: underline;
    cursor: pointer;
}

table.sortable td {
	vertical-align: top;
	border-bottom: black 1px solid;
    padding-bottom: 0.5em;
}

table.sortable td a{
  font-size: 1em;
}

/* ############################################################### */
/* Klasser för kontaktsidan                                       */
/* ###############################################################*/

/* Note: To be able to get the text in .contact_content_container to be vertically positioned at the bottom, the parent (contact_row)
   has to be of relative position, and the child of absolute position. */

.twocol_row{
  clear: both;
  float: left;
  display: block;
  padding: 0em;
  position: relative;
}

.twocol_row img{
  padding: 0;
  margin: 0;
}

.contact_rowspacing{
  margin: 1.8em 0 0 0;
}

.contact_image{
  width: 9em;
  height: 12em;
}

.col_content_container{
  float: left;
  position: absolute;
  bottom: 0;
  left: 10em; /* Same as the width of ".contact_image_container img" + some space */
  width: 36em; /* 46em is the content-areas width (content_type2), and this is indented 10em. Thereby the max length(width) is 36em */
}

.contact_name{
  font-weight: bold;
}

.contact_title{
}

a.contact_title:visited {
}

.contact_phone{
}

.contact_mail{
}

.boxbarometer_block{
  position: relative;
  top: -6.5em;
  left: -5em;
  font-size: 1.1em;
  color: #ffffff;
}

/* ###############################################################*/
/* Klasser för Faktablad och broshyrer                            */
/* ###############################################################*/

/* Note: To be able to get the text in .contact_content_container to be vertically positioned at the bottom, the parent (contact_row)
   has to be of relative position, and the child of absolute position. */


.col_margin{
  margin-bottom: 0.8em;
}

.faktablad_image{
  width: 9em;
  height: 12.5em;
}

.text_title{
  font-weight: bold;
}

.faktablad_rowspacing{
  margin: 0 0 1em 0;
}

/* ###############################################################*/
/* Klasser för nyhetsbrev                         */
/* ###############################################################*/

.nyhetsbrev_rowspacing{
  margin: 0 0 3em 0;
}

/* ###############################################################*/
/* Klasser för formulär och popupfönster                          */
/* ###############################################################*/

.rowLabel{
  display: block;
  width: 22em;
}

.rowInput{
  display: block;
  width: 22em;
}
.rowInput a{
  font-size: 1em;
}

.inputStandards{
  width: 18em;
}

.rowError{
  font-weight: bold;
  color: #993333;
  width: 22em;
}

.formContainer{
  width: 25.2em;
  padding: 1em 0 0 1em;
}

.formArea{
  width: 24.2em;
  background-color: #F5EAEA;
  float: left;
  padding: 1em 0.5em 1em 0.5em;
}

.formLabel{
  float: right;
}

.recipeContainer{
  padding: 3em 2em 0 2em;
}

.closeWinLink{
  float: right;
}

.setFont{ /* Av någon outgrundlig anledning så tar inte text-area rätt fontstorlek och font. */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1em;
}

/* Properties for popup windows which doesn't follow the standard of the site */
.popupProperties{
  padding: 0.5em;
  text-align: left;
  background-color: #ffffff;
}

/* #####################################################################*/
/* Klasser för verktygsområdet som skall finnas på toppen av varje sida */
/* #####################################################################*/

.toolContainer{
  float: right;
  position: relative;
  top: -0.9em;
  width: 14.5em;
  text-align: right;
}

.toolLink{
}

.toolImage{
  position: relative;
  top: 0.6em;
  width: 1.9em; /* -0.2em då en länkad bild utökas med 2px reserv för ramen, oavsett om den används eller ej. */
  border: none;
}