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

/* Nollställer webbläsarnas olika default lägen */
*{
  padding: 0;
  margin: 0;
}
html {
  font-size: 125%; /* Detta motsvarar 20 pt. I procent för att em ska fungera i IE */
}

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

#mainWrap {
    width: 77em;
    text-align: left;
    margin: 0 auto;
    background: #fff;
}

/* ############################################################### */
/* # Area klasser */
/* ############################################################### */
.serviceArea{
  margin-top: -0.1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  width: 77em;
  text-align: left;
  background: #fff;
}
.contentArea{
  background: #fff;
  width: 77em; /* -3.2em för padding-left och -right */
  clear: both;
  margin: -0.1em 0.1em 0 0;
  border-top-style:solid;
  border-top-color: white;
  border-top-width: 0.1em;
}
.mainNav {
    width: 77em;
    height: 13em;
    margin: 0 auto;
    text-align: left;
}

.pushArea {
    display: block;
    background: #fff;
    width: 42em;
    float: left;
    padding: 0.4em 0.2em 0.4em 2.22em; /*0.8em */
    text-align: left;
}

.toolsArea {
    background: #fff;
    text-align: left;
    display: block;
    width: 31em;
    float: right;
    padding: 0.6em;
}

.toolsTraceArea {
    background: #fff;
    text-align: left;
    display: block;
    clear: none;
    width: 28.2em;
    height: 15.2em;
    color: #FFFFFF;
    margin: 0 0.8em 0.6em 0;
    float: right;
}

.traceBgTop {
  background:#fff;
  background: url("../img/traceBg_top.gif");
  background-repeat:no-repeat;
  height:1.2em;
  width:28.2em;
}

.traceBgMid {
  background:#fff;
  background: url("../img/traceBg_mid.gif");
  background-repeat:repeat-y;
  width:28.2em;
}

.traceBgBottom {
  background:#fff;
  background: url("../img/traceBg_bottom.gif");
  background-repeat:no-repeat;
  height:1.2em;
  width:28.2em;
}

.toolsServiceArea {
    background-color: #FFFFFF;
    background: url("../img/serviceBg.gif");
    background-repeat:no-repeat;
    text-align: left;
    display: block;
    clear: none;
    width: 28.2em;
    height: 25.2em;
    color: #FFFFFF;
    margin: 0 0.8em 0.6em 0;
    float: right;
}

.toolsCompanysArea {
    text-align: left;
    display: block;
    clear: none;
    width: 28em;
    height: 10.2em; /*18.2em*/
    color: #FFFFFF;
    margin: 0 0.8em 0.2em 0;
    float: right;
}

.companysBgTop {
  background:#fff;
  background: url("../img/companyBg_top.gif");
  background-repeat:no-repeat;
  height:1.2em;
  width:28.2em;
}

.companysBgMid {
  background:#fff;
  background: url("../img/companyBg_mid.gif");
  background-repeat:repeat-y;
  width:28.2em;
}

.companysBgBottom {
  background:#fff;
  background: url("../img/companyBg_bottom.gif");
  background-repeat:no-repeat;
  height:1.2em;
  width:28.2em;
}


.toolsArea p{
    margin-bottom: 2em;
}

.pageFoot {
    background: #cccccc;
    display: block;
    clear: both;
    width: 77em;
    /*float: left;*/
    margin: 0 auto;

    border-top-style: solid;
    border-top-color: #002655;
    border-top-width: 1em;
    text-align: right;
    padding-top: 0.2em;
    color: #002655;
    /*height: 1em;*/
}

.pageTop {
    background: #e7e7e7;
    display: block;
    clear: both;
    width: 77em;
    /*float: left;*/
    margin: 0 auto;
    text-align: right;
    padding-top: 0.3em;
    color: #002655;
    /*height: 1em;*/
}
.logoArea{
    background: #FFFFFF;
    float: left;
}

.logoArea img{
    border: none;
}

.pictureArea{
    float: left;
}

.pictureArea img{

}

.menuAreaContainer {
    background-color: #FFFFFF;
    background: url("../img/menuBg.jpg");
    display: block;
    clear: none;
    width: 77em;
    height: 12.9em;
    float: left;
    text-align: left;
}

.errorTextarea {
    width: 60em;
    padding: 1em;
    float: left;
    text-align: left;
}

.errorMessageArea {
    width: 60em;
    padding: 4em 1em 2em 1em;
    float: left;
    text-align: left;
}
/* ############################################################### */
/* # menuArea klasser */
/* ############################################################### */

ul.menuArea{
    text-align: left;
    list-style: none;
    float: left;
    width: 77em;
    padding-left: 14em;
    padding-top: 6em;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
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: #FFFFFF;
  font-weight: bold;
  font-size: 1.3em;
}
ul.menuArea li a:hover{
  /*color: #cc0000;*/
}
ul.menuArea li a:active{
  color: #5BBF21;
}
#menuItemActive{
  color: #5BBF21;
}

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

h2{
  color: #5BBF21;
  font-size: 1.1em;
  line-height: 1.2em;
}

h3{
  color: #5BBF21;
  font-size: 1.1em;
}
h4{
    color: #002655;
    font-size: 1.05em;
    margin-top: 0.8em;
}

p{
    color: #002655;
    margin-bottom: 1em;
    line-height: 1.2em;
    font-size: 1.05em;
}
.ingress{
    color: #002655;
    margin-bottom: 1em;
    line-height: 1em;
    font-weight: bold;
    font-size: 1.05em;
}

ul li{
    color: #002655;
    margin-left: 1.4em;
    margin-bottom: 0.4em; /* jkl*/
}

a, a:active, a:after, a:before, a:link, a:visited {
    font-weight: bold;
    color: #002655;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #002655;
}

.toolFont{
    color: #FFFFFF;
    font-size: 1.1em;
    margin: 0.2em 0 0 1.6em;
}

.toolFontBlue{
    color: #002655;
    font-size: 1.0em;
    margin-left: 0.2em;
}

.toolFontHeader{
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    margin: -0.2em 0 0.7em 1.3em;
}

.toolFontHeader a {
	text-decoration: none;
}

.toolFontHeader a:hover {
    position: relative;
}

.toolFontHeader a span{
	display: none;
    height: 0;
}

.toolFontHeader a:hover span {
    font-size: 0.86em;
    font-weight: normal;
    display: block;
    position: absolute;
    top: 1em;
    left: -6em;
    height: 20em;
    width: 25em;
    padding: 0.5em;
    margin: 1em;
    z-index: 100;
    background: #5BBF21;
    border: 0.2em solid #002655;
    opacity: 0.9;
    text-decoration: none;
    color: #002655;
}

.toolFontHeader p {
    margin-bottom: 0.8em;
}

.toolsServiceFontBlue{
    color: #002655;
    font-size: 1.0em;
    margin-left: 0.2em;
    margin-bottom: -0.6em;
}

.toolsServiceFontHeader{
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    margin: -0.2em 0 0.7em 1.3em;
}

.toolErrorMess{
    visibility: hidden;
    color: red;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0em 0 0 1.4em;
}

.toolFontSubmit{
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    float: left;
    margin: 1.4em 0.2em 0.4em 0.8em;
    cursor: pointer;
}

.toolsArrowPos {
    margin: 0.6em 0 0.2em 0;
    float: left;
    cursor: pointer;
}

.toolFont input{
    background: #FFFFFF;
    /*margin-left: -0.4em;*/
    margin-top: 0.4em;
}

.mainWrap.serviceArea.contentArea.pushArea ul li {
    margin-left: 1.8em;
}

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

.descriptionShow{
  display: block;
  cursor: pointer;
  color: #000000;
  text-decoration: none;
  font-weight: normal;
  font-size: 1.05em;
}

.descriptionText{
  display: none;
  background: #5BBF21;
  /*background-color: #99f266;*/
  color: #002655;
  margin: 1em 0 0 0;
  padding: 0.5em;
  font-size: 1.05em;
}


.middle {
    visibility: hidden;
    position: fixed;
    z-index: 999;
    overflow: auto;
    background: green;
    min-width: 100px;
    min-height: 60px;
    float: none;
}

.infoPop {
	position: absolute;
	visibility: hidden;
	width: 258px;
	height: 200px;
	left: 300px;
	top: 300px;
    font-size: 0.86em;
    font-weight: normal;
    display: block;
    padding: 0.5em;
    margin: 1em;
    z-index: 100;
    background: #5BBF21;
    border: 0.2em solid #002655;
    opacity: 0.9;
    text-decoration: none;
    color: #002655;
}

.closeButton {
	float: right;
}