/*
   THIS IS THE WEB VERSION SF_style.css
   To change colours, simply change the value of all the strings containing some kind of
   a colour (blue, red, black, etc.) or the hex values (#fff, #000, #eee, etc.)
   To find the hex values, try this site: http://www.dripz.dk/colorpicker/
*/

body{
 background-color: #fff;
 position: absolute;
 left: 50%; top: 10px;
 width: 750px; height: auto;
 margin: 0 0 0 -375px; padding: 0;
 font: 1em arial, sans-serif;
 color: #000;
}
 /* ERROR MESSG. */
span.err{
 position: relative;
 left: 20px; top: 0;
 font: 10pt arial, sans-serif;
 color: #FF0000;
}
/* SUCCESS MESSG. */
span.suc{
 position: relative;
 left: 20px; top: 0;
 font: 10pt verdana, sans-serif;
 color: #4FB999;
}
 /* The header at the top. */
#header{
 position: absolute;
 left: 18px; top: 0;
 width: 100%; height: 75px;
 background-color: #fff;
 text-align: left;
 z-index: 2;
}
#header span.small{
 position: absolute;
 left: 20px ; top: 0; height:0px;
 font: 8pt verdana, sans-serif;
 background-color: #fff;
 text-align: right;
 z-index: 1;
}
#header span.pic{
 position: absolute;
 left: 0px ; top: 0px;

}

 /* Styles the <H1> tag which is in the header div. */
#header h1{
/*  margin: 10px 0 0 15px; padding: 0 0 0 0; */
 position: absolute;
 left: 130px ;
 bottom:3px;
 font: 36pt verdana, sans-serif;
 //background-color: transparent;
 z-index: 3;
}

 /* Styles the word green(#word1) Works only with <H1> and <H2>. */
h1 .word1, h3 .word1{
 color: #4FB999;
}

 /* Styles the word black (#word2) Works only with <H1> and <H2>. */
h1 .word2, h3 .word2{
 color: black;
}

a{
 color: #4FB999;
 text-decoration: none;
}


/*****************************************************/
/* Styles the MENU. */
/*****************************************************/
#menu{
 position: absolute;
 left: 5px; top: 130px;
 width: 120px; height: 600px;
 padding: 0 0 0 0;
 /* border-right: 1px #ccc solid;*/
 background-color: transparent;
 z-index: 1;
}

 /* Styles the list holder. */
#menu ul{
 margin: 0; padding: 0;
 list-style: none;
 font: 9pt arial, sans-serif;
 background-color: #eee;
}
 /* If the menue is the actual page */
#menu ul li.checked{
 background-color: #4FB999;
}

 /* Styles each "list-item" (or "button") with the same style. */
#menu ul li{
 display: block;
 margin: 0 0 1px 0;
 padding: 3px 3px 3px 3px;
 background-color: #fff;
}

 /* Gives the button a hover-effect. */
#menu ul li:hover{
 margin: 0 0 1px 0;
 padding: 2px 3px 2px 3px;
 border-top: 1px #ccc solid;
 border-bottom: 1px #ccc solid;
 background-color: #fff;
}

 /* Styles the link within the button. */
#menu ul li a{
 display: block;
 color: #4FB999;
 text-decoration: none;
}

 /* Gives the link a hover-effect. */
#menu ul li a:hover{
 color: black;
}


 /* Styles and positions the content-holder. */
#content{
 position: absolute;
 left: 150px; top: 75px;
 width: 600px; height: auto;
 background-color: #fff;
 border-left: 1px #ccc solid; border-top: 1px #ccc solid;
 padding-bottom: 4px;
 z-index: 0;
}


 /* Styles the Header (<h3>). */
#content h3{
 display: block;
 font: 14pt verdana, serif;
 color: #000;
 margin: 1em 0 0 1em; padding: 0 0 .4em 0;
 border-bottom: 1px #ddd solid;
}

 /* Styles the paragraphs (<p>) in #content. */
#content p{
 display: block;
 /* margin: .6em 1em 0 2.4em;*/
 margin: 20px;
 padding: 0 0 .6em 0;
 font: 10pt arial, sans-serif;
 text-align: justify;
 /* text-indent: .8em; */
 line-height: 1.4em;
}

 /* Styles the links within the #content. */
#content a{
 color: black;
 text-decoration: none;
 border-bottom: 1px #4FB999 solid;
}

 /* Gives the links a hover effect. */
#content a:hover{
 color: #4FB999;
 text-decoration: none;
 border-bottom: none;
}
/* Styles the debug inforamtion brought from PHP */
#content .debug{
 position: relative;
 width: 100%; height: auto;
 font: 8pt verdana, sans-serif;
 color: #FF0080;
 padding: 5px;
 text-align: right;

}

/* Styles the table */
table{
   border-style:collapse;
   border: 1px solid red;
   vertical-align:top;
   table-layout: fixed;
   margin-left: 1.5em;
   font: 8pt verdana, sans-serif;
   color:grey
   empty-cells:show;
}
td {
   border-style:hidden;
   border: 1px solid red;
   padding: .2em;
   vertical-align:top;
}
caption {
   caption-side: top;
   border-style:solid;
   border: 1px solid red;
   padding: .5em;
   width: auto;
   font: 10pt verdana, sans-serif;
   text-align: left
}
#content li.c{
 background-color: #fff;
 position: relative;
 list-style: disc;
 height: auto;
 margin-left: 30px;
 padding: 1px;
 font: 10pt arial, sans-serif;
 color: #000;
}
#content span.gchar{
   color: #4FB999;
   font-weight:bold;
}
/* ******** Definitions for Inputs ********************************* */
#input{
 position: relative;
 left: 20px;
 width: 570px;
 height: auto;
 background-color: #fff;
 margin-top: 5px;
 font: 8pt verdana, sans-serif;
 color: #008080;
 text-align: left;
 vertical-align:middle;
 z-index: 0;
}

#input input.field{
   position: relative;
   width: 80%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #E2E2E2;
   border-width: 3px;
   border-color: #4FB999;
   border-style: inset;
}
#input input.fieldNoedit{
   position: relative;
   width: 80%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 2px;
   text-align: middle;
   background-color: #FFFFFF;
   border-width: 1px;
   border-color: #E2E2E2;
   border-style: inset;
}
#input input.fieldNOK{
   position: relative;
   width: 80%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
    color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #FF80FF;
   border-width: 3px;
   border-color: #4FB999;
   border-style: inset;


}

#input input.field_short{
   position: static;
   width: 20%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #E2E2E2;
   border-width: 3px;
   border-color: #4FB999;
/*   border-style: solid;*/
   border-style: inset;
}

#input select{
   position: static;
   width: 80%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #E2E2E2;
   border-width: 3px;
   border-color: #4FB999;
/*   border-style: solid;*/
   border-style: inset;
}

#input textarea{
   position: static;
   width: 81%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #E2E2E2;
   border-width: 3px;
   border-color: #4FB999;
/*   border-style: solid;*/
   border-style: inset;
}
#input textarea.NOK{
   position: static;
   width: 81%;
   /* height: auto; */
   font: 8pt verdana, sans-serif;
   color: #008080;
   margin-top: 5px;
   margin-left: 15px;
   padding: 1px;
   text-align: middle;
   background-color: #FF80FF;
   border-width: 3px;
   border-color: #4FB999;
   border-style: inset;
}
#input checkbox{
   position: relative;
   color: #008080;
   margin-top: 5px;
   margin-left: 30px;
   padding: 3px;
   border-width: 3px;
 }
#input a.help{
/*    display: block; */
/* color: #4FB999; */
   text-decoration: none;
   border-bottom: none;
}
#input input.button{
   position: relative;
  /* left: 15px; */
   width: 100px;
   height: auto;
   font: 6pt verdana, sans-serif;
   color: #000000;
   margin-top: 15px;
   margin-right: 15px;
   padding: 0px;
   text-align: middle;
   background-color: #E2E2E2;
   /*border-top: 1px #4FB999 solid;*/
}
#input span.fn{
   position: relative;
   width: 400px;
   /*margin-left:20px;*/
   text-align:right;
}

/* *** The footer. ************************************************************* */
#footer{
 position: relative;
 width: 100%; height: auto;
 font: 8pt verdana, sans-serif;
 color: #ccc;
 margin-top: 20px;
 margin-left: 20px;
 padding: 5px;
 text-align: left;
 /* border-top: 1px #ccc solid;*/
}
#footer span.pic{
 position: absolute;
 left: 0px ;
 top: 0px;
 margin-left: 30px;

}
/* *** The MESSAGES ************************************************************* */
span.messg{
 position: absolute;
 width: 100%; height: auto;
 font: 10pt verdana, sans-serif;
 color: #FF0000;
 margin-top: 20px;
 padding: 5px;
 text-align: right;
 border-top: 1px #ccc solid;
}

/* /* ERROR MESSG. */
/*span.err{
/* position: absolute;
/* left: 0px; top: 100px;
/* width:50%; height: 75px;
/* font: 10pt verdana, sans-serif;
/* color: #FF0000;
/* background-color: #C0C0C0;
/* text-align: left;
/* z-index: 1;
/*}


 /* Styles the <acronym> tag. */
acronym{
 border-bottom: 1px #000 dotted;
 cursor: help;
}


#dhtmltooltip{
position: absolute;
width: 300px;
border: 1px solid black;
padding: 2px;
font: 7pt verdana, sans-serif;
background-color: #A2E1DE;
visibility: hidden;
z-index: 100;
}