/* ------------------------------------------- */
/*                    BODY                     */
/* ------------------------------------------- */
body 
{
 margin-left: 0;
 margin-top: 0;
 background-color: #4D4D4D;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ------------------------------------------- */
/*                   BANNER                    */
/* ------------------------------------------- */
#banner 
{
 height: 8em;
 background-image: url(images/banner-wide_1280x130.jpg);
 background-position: bottom right;
 background-attachment: scroll;
 background-repeat: no-repeat;
}

/* ------------------------------------------- */
/*                  TOPPMENY                   */
/* ------------------------------------------- */
#toppmeny 
{
 margin: 0;
 /*height: 3.2em;*/
 display: flex;
 flex-direction: column;
 list-style: none;
 background-color: #4D4D4D;
 background-repeat: no-repeat;
 font-family: Helvetica, 'Trebuchet MS', 'Lucida Grande',
	Verdana, Lucida, Geneva,
	Arial, sans-serif;
 font-weight: bold;
 font-size: 14px;
}


.innimeny 
{
 height: 3.2em;
 line-height: 3.2em;
 display: block;
 padding-left: 5em;
 padding-right: 5em;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: Black;
 /*float: right;*/
 /*display: inline;*/
 background-color: #222222;
 font-family: Helvetica;
 text-align: center;
}
@media only screen and (min-width : 650px) {
    #toppmeny {
        height: 3.2em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        
    }
    .innimeny 
    {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: Black;
        border-bottom: none;
    }
}

.innimeny:hover 
{
 background-color: #444444;
 text-decoration: none;
}

/* ------------------------------------------- */
/*                 SIDEMENYEN                  */
/* ------------------------------------------- */
#sidemeny 
{
 width: 7em;
 padding-top: 0;
 padding-right: 0;
 padding-bottom: 0;
 padding-left: 0;
 margin-bottom: 0;
 margin-top: 3em;
 font-family: Helvetica, 'Trebuchet MS', 'Lucida Grande',
	Verdana, Lucida, Geneva,
	Arial, sans-serif;
 background-color: #222222;
 color: #cccccc;
}

#produktside .menycontainer #sidemeny {
    width: 90%;
}



#sidemeny ul 
{
 list-style: none;
 margin: 0;
 padding: 0;
 border-style: none;
}

#sidemeny li 
{
 border-bottom-color: #222222;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 margin: 0;/*	border-right: 1px solid #000;*/
}

#sidemeny li a 
{
 display: block;
 padding-top: 0.2em;
 padding-right: 0.2em;
 padding-bottom: 0.2em;
 padding-left: 0.5em;
 border-left-color: #535353;
 border-left-width: 0.5em;
 border-left-style: solid;
 border-right-color: #404040;
 border-right-width: 0.5em;
 border-right-style: solid;
 background-color: #4d4d4d;
 text-decoration: none;
 font-size: smaller;
 width: auto;
}
#produktside #sidemeny li a {
    height: 2em;
}
#sidemeny li a:hover 
{
 border-left-color: #76DEFC;
 border-left-width: 0.5em;
 border-left-style: solid;
 border-right-color: #015095;
 border-right-width: 0.5em;
 border-right-style: solid;
 background-color: #016DAD;
}

#menytittel 
{
 font-weight: bold;
 font-size: large;
 text-decoration: underline;
 padding-bottom: 1em;
}
@media only screen and (min-width : 820px) {
    #sidemeny {
        width: 10em;
    }
    
    #produktside #sidemeny li a {
        height: auto;
    }
    
    #menytittel {
        font-size: x-large;
    }
}
/* ------------------------------------------- */
/*              SIDEMENYEN-SLUTT               */
/* ------------------------------------------- */
/* ------------------------------------------- */
/*                   LINKER                    */
/* ------------------------------------------- */
a:link 
{
 text-decoration: none;
 color: #76DEFC;
}

a:visited 
{
 text-decoration: none;
 color: #76DEFC;
}

a:active 
{
 text-decoration: none;
 color: #76DEFC;
}

img 
{
 border-style: none;
}

div.klikkforbildelinkliste 
{
 position: relative;
 top: 12.9em;
 left: -11.9em;
 text-decoration: underline;
 float: left;
 font-size: smaller;
 margin-bottom: -1em;
}

/* ------------------------------------------- */
/*                   BILDER                    */
/* ------------------------------------------- */
img 
{
 border-style: none;
}

.bilde 
{
 padding-top: 1em;
 padding-right: 1.5em;
 padding-bottom: 0.5em;
 padding-left: 0.5em;
}

.listebilde 
{
 height: 10em;
 float: left;
 margin-top: 1em;
 margin-right: 1em;
 margin-bottom: 1em;
 margin-left: 0;
}
.listebildelink 
{
 height: 10em;
 float: left;
 margin-top: 1em;
 margin-right: 1em;
 margin-bottom: 1em;
 margin-left: 0;
}
.galleria
{ 
    max-width: 700px; 
    height: 400px; 
    background: #222222; 
}
.prodbilde img {
    max-height: 300px;
}

/* ------------------------------------------- */
/*                  FORSIDEN                   */
/* ------------------------------------------- */
#forsidetext 
{
 padding-top: 0;
 padding-right: 2em;
 padding-bottom: 2em;
 padding-left: 2em;
}

#forsidetext img 
{
 width:100%;
}
@media only screen and (min-width : 430px) {
    #forsidetext img 
    {
     /*float: right;*/
     width: auto;
    }
}

@media only screen and (min-width : 550px) {
    #forsidetext img 
    {
     float: right;
     width: auto;
    }
}

ul.sirkel 
{
 list-style-type: circle;
}

/* ------------------------------------------- */
/*                LISTE-ELEMENT                */
/* ------------------------------------------- */
.item 
{
 width: 35em;
 min-height: 15.5em;
 border-top-color: white;
 border-top-width: 1px;
 border-top-style: dotted;
 padding-left: 0em;
}

table.kontaktskjema 
{
 border-style: none;
 padding: 0;
 margin: 0;
}

/* ------------------------------------------- */
/*              SKRIFTFORMATERING              */
/* ------------------------------------------- */
.u 
{
 text-decoration: underline;
}

h1 
{
 /*padding-left: 2.5em;*/
 padding-top: 0.5em;
}
@media only screen and (min-width : 440px) {
    h1 {
        padding-left: 2.5em;
        padding-top: 1.5em;
    }
}

/* ------------------------------------------- */
/*             FORMATERING (TABELL)            */
/* ------------------------------------------- */

div.format 
{
 width: 100%;
 margin: auto;
 border-color: #999999;
 border-width: 0.5em;
 border-style: solid;
 line-height: 130%;
 color: White;
 background-color: #222222;
 padding: 0;
 box-sizing: border-box;
}




div.toppcontainer 
{
 color: white;
 clear: left;
 border-bottom-color: #999999;
 border-bottom-width: 0.6em;
 border-bottom-style: solid;
 padding: 0;
}



div.menycontainer 
{
 float: left;
 width: 9em;
 margin: 0;
 padding-right: 0;
 padding-bottom: 0;
 padding-left: 1em;
 background-color: #222222;
 height: 100%;
 font-size: 0.9em;
}

div.hoyrecontainer 
{
 /*margin-left: 8.5em;*/
 border-left-style: none;
 padding-left: 1em;
 background-color: #222222;
}
#produktside .menycontainer {
    width: 90%;
}

div.bunncontainer 
{
 color: white;
 clear: both;
 padding: 1em 0 0 2em;
}

@media only screen and (min-width : 820px) {
    div.format 
    {
        width: 50em;
        box-sizing: initial;
        line-height: 150%; 
    }
    div.menycontainer, #produktside div.menycontainer {
        width: 10em;
        font-size: 1em;
        padding-top: 1em;
        display: inline-block;
        float: left;
    }
    div.hoyrecontainer {
        margin-left: 0.2em;
        float:right;
        display: inline-block;
        width: 37em;
    }
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    div.format 
    {
        width: 60em;
    }
    div.hoyrecontainer {
        width: 47em;
    }
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    div.format 
    {
        width: 70em;
    }
    div.hoyrecontainer {
        width: 57em;
    }
}
/* ------------------------------------------- */
/*         FORMATERING (TABELL) SLUTT          */
/* ------------------------------------------- */
/*form.kontaktskjema 
{
 margin: 0;
 padding-top: 0;
 padding-right: 0;
 padding-bottom: 2em;
 padding-left: 0;
}*/

.flexrad {
    display: flex;
    flex-flow: row wrap;
}
.flexrad div{
    flex: 1;
}
.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    /*min-width: 250px;*/
    flex: 2;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ------------------------------------------- */
/*                KONTAKTSIDER                 */
/* ------------------------------------------- */
.flexrad {
    display: flex;
    flex-flow: row wrap;
}
.flexrad div{
    flex: 1;
}
.kontaktside-container {
    display: flex;
    flex-direction: column;
}
.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    /*min-width: 250px;*/
    flex: 2;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*#kontaktskjema label {
    flex: 1;
}
#kontaktskjema input {
    flex: 1;
    margin-bottom: 1em;
}
#kontaktskjema textarea {
    flex: 3;
}*/
#kontaktskjema header {
  margin: 0 0 20px 0; 
}
#kontaktskjema header div {
  font-size: 90%;
  color: #999;
}
#kontaktskjema header h2 {
  margin: 0 0 5px 0;
}
#kontaktskjema > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 15px 0; 
}
form > div > div {
    width: 100%;
    float: none;
}
#kontakskjema > div > label {
    width: 100%;
    float: none;
    margin: 0 0 5px 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password] {
    width: 90%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
    outline: 0;
    border-color: #4697e4;
}

@media (min-width: 792px) {
  form > div {
  margin: 0 0 10px 0;
  }
  form > div > label
  {
        width: auto;
        float: inherit;
        margin: inherit;
  }
  form > div > div {
  width: 66%;
  float: right;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  select {
    width: 60%; 
  }
}
@media only screen and (min-width: 1200px) {
  form > div > label {
  	text-align: right;
        width: 32%;
        display: inline-block;
  }
}
/* ------------------------------------------- */
/*             KONTAKTSIDER (SLUTT)            */
/* ------------------------------------------- */