@charset "utf-8";

.mymodal {
    display: none !important;
}

* {
  font-family: Tahoma, Arial;
}

.error {
  color: white;
  background-color: violet;
  font-size: 20px;
}

/* ------------------- */

/* 2018-03-06
###stuff only used in old files. remove the files too:
category-html5/2/2/test-complete-subCategory2.html
category-html5/2/3/test-complete-subCategory3.html
javascript/test-complete-script.js
*/
/*
#tabs {
  height: 36px;
}

#versionTabs {
  background-color: beige;
  / *width: 20%;* /
  width: 15%;
  float: left;
  height: 100%;
}

#versionTabs table {
  width: 100%;
  table-layout: fixed;
  height: 100%;
}

.versionTab {
  cursor: auto;
  / *width: 100px;* /
  height: 100%;
}
.versionTab .selected {
  background-color: darkseagreen;
  cursor: pointer;
}
.versionTab .selected:hover {
  / *opacity: 0.7;* /
  background-color: #B2CC80;
}
.versionTab .unselected {
  / *background-color: tan;* /
  cursor: pointer;
}
.versionTab .unselected:hover {
  / *opacity: 0.7;* /
  background-color: #B2CC80;
}
.versionTab:hover {
  / *opacity: 0.6;* /
  color: royalblue;
}
.versionTab .content {
  height: 100%;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
*/

div.back {
  float: left;
  width: 40px;
  display: none;   /* 2017-01-05 */
}
div.nav-logo {
  float: left;
}

#audioExistsSignal {
  /*float: left;*/
  width: 3%;
  height: 100%;
  border-radius: 50%;
  font-size: 24px;
}

.languageTab {
  /*width: 100%;*/
  cursor: auto;
  /*height: 100%;*/
  /*
  padding-left: 0px;
  padding-right: 0px;
  */
}
.languageTab .content {
  /*text-align: center; not necessary?*/
  width: 100%;
  height: 100%;
}
/* yield to kevin's code
.languageTab .selected {
  background-color: darkseagreen;
  cursor: pointer;
}
.languageTab .selected:hover {
  / * opacity: 0.7; * /
  background-color: #B2CC80;
}
.languageTab .unselected {
  / * background-color: tan; * /
  cursor: pointer;
}
.languageTab .unselected:hover {
  / * opacity: 0.7; * /
  background-color: #B2CC80;
}
*/
.languageTab .name {
  
  /* 2015-05-20. give up fitText() for now. perhaps try later */
  /*font-size: 24px; set with fitText()*/
  /*font-size: 24px;*/
  /*font-size: 1.3vw; yield to kevin*/
  overflow: hidden;
  
  white-space: nowrap;
  width: 100%;
  height: 100%;
  
}
/* yield to kevin's code
.languageTab:hover {
  / * opacity: 0.6; * /
  color: royalblue;
}
*/

/* 2018-03-06
###stuff only used in old files
.applicationTitle:hover .applicationTitle *:hover {
  text-decoration: none;
}
*/

/* 2018-03-06 ###perhaps only used in old files */
.clear {
  clear: both;
}

/* ------------------- */

/*#main {*/
/*#content {
  background-color: papayawhip;
}*/

#overview {
  height: 100%;
  /* oystein. ###because saw long polish text for category 2 that wrapped and became centered */
  text-align: left;
}

/*
#overview table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
*/

/*
.overviewRow {
  height: 10%;
}
*/

/* ###check if supported by all relevant browser versions */
.vertical-align {
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  /* 2016-12-09. test for ie. fatal - content not shows. ###no it was something else that made the content not show
  display: -ms-flex;
  display: -ms-flexbox;
  -ms-flex-pack: center;
  */
}

.overviewCell {
  cursor: pointer;
  background-color: white;
}
.overviewCell .number {
  /*font-size: 20px;*/
  font-size: 2vw;
}
/* 2017-05-16. too bad we can't have a combination of vw and vh */
.overviewCell .title {
  /*font-size: 20px;*/
  font-size: 1.3vw;
}
.overviewCell:hover {
  /*opacity: 0.6;*/
  color: royalblue;
  background-color: #F0FAFF;
}


/* ###didn't work with portal design
.overviewCell .icon {
  padding: 10%;
  / * let bootstrap handle it
  /  *
  height: 100%;
  width: 100%;
  *  /
  max-height: 60px;
  /  *
  height: 60px;
  *  /
  * /
}
*/

#category-or-overview {
  background-color: peachpuff;
}

.category {
  background-color: khaki;
}

.subCategory {
  background-color: lightroyalblue;
}

#head {
  background-color: gainsboro;
}

#head table {
  width: 100%;
  table-layout: fixed;
}

/* 2018-03-06
###stuff only used in old files
#applicationTitle {
  font-size: 24px;
}
#applicationTitle .value {
  color: lightyellow;
  background-color: silver;
  display: inline-block;
  margin: 4px;
}
*/

#categoryNumber {
  font-size: 24px;
}

/* a div containing an img */
#categoryIcon {
  float: left;
  padding: 2px;
}

#categoryName {
  float: left;
  padding: 2px;
  padding-left: 6px;
}
#categoryName .value {
  font-size: 24px;
  text-align: left;
}

#previousNextAndOverviewLinks {
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  background-color: khaki;
}
#previousNextAndOverviewLinks div .content {
  height: 44px;
}
/* yield to kevin's code
#previousNextAndOverviewLinks div .content:hover {
  color: royalblue;
  / * opacity: 0.7; * /
  background-color: #FFFFA3;
}
*/
#overviewLink div {
  padding: 2px;
}

#category table {
  width: 100%;
  table-layout: fixed;
}

/* 2018-03-06 .subCategoryTitle { */
/*.subCategoryMenuItem {*/
    /*white-space: nowrap;*/
/*}*/

/* 2018-03-05, -06 */
/* Desktop */
@media screen and (min-width: 1200px) {
  .subCategoryMenuItem .icon {
    width: 51px;
  }
  .subCategoryMenuItem * {
    padding: 2px;
  }
  .subCategoryMenuItem .content {
    cursor: pointer;
    font-size: 20px;
    text-align: left;
  }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  .subCategoryMenuItem .icon {
    width: 37px;
  }
  .subCategoryMenuItem * {
    padding: 1px;
  }
  .subCategoryMenuItem .content {
    cursor: pointer;
    font-size: 20px;
    text-align: left;
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  .subCategoryMenuItem .icon {
    width: 25px;
  }
  .subCategoryMenuItem * {
    padding: 0px;
  }
  .subCategoryMenuItem .content {
    cursor: pointer;
    font-size: 14px;
    text-align: left;
  }
}



/*
.subCategoryTitle * {
  padding: 2px;
}
.subCategoryTitle .content {
  cursor: pointer;
  font-size: 20px;
  / *font-size: 24px;* /
  text-align: left;
}
*/
/* yield to kevin's code
.subCategoryTitle .selected {
  background-color: yellowgreen;
}
.subCategoryTitle .unselected {
  / * background-color: lemonchiffon; * /
}
.subCategoryTitle:hover {
  / * opacity: 0.6; * /
  color: royalblue;
}
*/
/*
.subCategoryTitle div {
  / * doesn't work * /
  display: table-cell;
  vertical-align: middle;
}
.subCategoryTitle div div {
  / * font-style: italic; (test. works) * /
  height: 100%; / * doesn't work * /
  display: inline-block; / * doesn't work * /
}
*/

/* 2018-03-05
/ * ###.subCategoryTitle not good name since includes the .icon * /
.subCategoryTitle .icon {
  width: 51px;   / * ###??? * /
}
*/

/*html, body, #main, renamed to #content, #subCategory {*/
html, body {
  background: none repeat scroll 0 0 #fff;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}
/*#main {*/
/* 2017-01-04. try to comment it out, to see if it affects the content being showed left-justified in ie.
but then the content doesn't show. neither in chrome nor ie. just a blank area */
#content {
  position: absolute;
  /*top: 78px;*/
  top: 252px;   /* ###preliminary hack. how position #main, renamed to #content??? */
  /*top: 99px; */
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 0px;
}
#subCategory {
  width: 100%;
  height: 100%;
  border: 0px;
}

/* family page */

#popup {
  /*border: solid black 1px;*/
  border: solid rgb(143, 250, 71) 1px; /* 2018-04-06 */
  padding: 3px; /* 2018-04-06 */
  background-color: #dbff66;
  font-size: 11px; /* 2018-04-06 */
}

/* bullets */
.Astrid_Lars_color {
  color: #993399;
  background-color: transparent;
}
.Johanna_Evert_color {
  color: #009999;
  background-color: transparent;
}
.Georg_color {
  color: #0000ff;
  background-color: transparent;
}
.no_color {
  color: transparent;
  background-color: transparent;
}

/* text */
.popupText {
  display: inline-block;
}
.Jan_color {
  color: black;
  background-color: #ffcc00;
}
.Henrik_color {
  color: black;
  background-color: #66cc00;
}
.Eva_color {
  color: black;
  background-color: #ff6600;
}
.other_color {
  color: black;
  background-color: transparent;
}




/* 2018-03-06. merged the three css files (this file bildetema.css + content_from_portal.css + index_from_portal.css) */

/* oystein. elements from index.css that are used in the content of the application,
i.e, the overview (at the time being menu-index.html) and the content itself (at the time being content.html) */



/* oystein comment: only used in menu-index.htm and content.htm */
.menu-text {
  color: #3f3933;
  display: inline;
  float: right;
  font-family: Tahoma,Arial,Helvetica,sans-serif;
  /* oystein. commented out these two. for font size see @media at end */
  /*font-size: 180%;*/
  /*line-height: 120%;*/
  font-weight: 400;
  margin: 7px 27px 0 9px;
  padding-bottom: 2px;
  padding-top: 1px;
  text-align: right;
}
/* oystein comment: end only used in menu-index.htm and content.htm */

/* oystein comment: #bg_a only used in menu-index.htm and content.htm */
/*
#bg_a {
  margin-left: 45px;
  margin-top: 1px;
  display: inline;
  float: left;
  margin-bottom: 0;
  background-color: #dcdcdc;
  background-attachment: scroll;
  background-image: url(images/bg_a_line.png);
  background-position: center center;
  background-repeat: repeat-y;
  width: 1510px;
  padding-top: 0px;
  height: 53px;
}
*/
/* oystein comment: is indeed used */
/* oystein comment: merged with style for html > body #bg_a */
/* 2018-03-06 #bg_a { */
#category_bar {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(0.08, #EDE7D1), color-stop(0.65, #EDE7D1), to(#FFFFFF));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #FFFFFF, #EDE7D1 8%, #EDE7D1 65%, #FFFFFF);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #FFFFFF, #EDE7D1 8%, #EDE7D1 65%, #FFFFFF);

  /* IE 10 */
  background: -ms-linear-gradient(left, #FFFFFF, #EDE7D1 8%, #EDE7D1 65%, #FFFFFF);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #FFFFFF, #EDE7D1 8%, #EDE7D1 65%, #FFFFFF);

  height: auto;
  min-height: 53px;
}

/* oystein comment: only used in content.htm */
/*.title-nr {*/
#categoryNumber {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 400%;
  text-align: center;
  color: #403933;
  line-height: 120%;
  padding-bottom: 2px;
  padding-top: 1px;
  margin-left: 35px;
  margin-top: 4px;
  display: inline;
  float: left;
  margin-bottom: 0;
  width: 70px;
}
/* oystein comment: end only used in content.htm */

/* oystein comment: only used in menu-index.htm and content.htm */
/*.title {*/
#categoryName {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 300%;
  font-weight: bold;
  text-align: left;
  color: #3f3933;
  line-height: 120%;
  padding-bottom: 2px;
  padding-top: 1px;
  margin-left: 15px;
  margin-top: 10px;
  display: inline;
  float: left;
  margin-bottom: 0;
}
/* oystein comment: end only used in menu-index.htm and content.htm */

/* oystein comment: #bg_b only used in content.htm */
/*
#bg_b {
  margin-left: 45px;
  margin-top: 0px;
  display: inline;
  float: left;
  margin-bottom: 0;
  background-color: #dcdcdc;
  width: 1510px;
  padding-top: 0px;
  height: 52px;
}
*/
/* oystein comment: is indeed used */
/* oystein comment: merged with style for html > body #bg_b */
/* 2018-03-06 #bg_b { */
#subCategory_bar {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(0.25, #EDE7D1), color-stop(0.75, #EDE7D1), to(#FFFFFF));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #FFFFFF, #EDE7D1 25%, #EDE7D1 75%, #FFFFFF);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #FFFFFF, #EDE7D1 25%, #EDE7D1 75%, #FFFFFF);

  /* IE 10 */
  background: -ms-linear-gradient(left, #FFFFFF, #EDE7D1 25%, #EDE7D1 75%, #FFFFFF);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #FFFFFF, #EDE7D1 25%, #EDE7D1 75%, #FFFFFF);

  height: auto;
  /*min-height: 53px;*/
  min-height: 59px;   /* 2018-03-02 fixed jumping. ###not */
}

/*
#bg_b_line {
  margin-left: 0px;
  margin-top: 0px;
  display: inline;
  float: left;
  height: 1px;
  margin-bottom: 0;
  width: 1510px;
}
*/

/* 2018-03-06
###stuff only used in old files
/ * oystein comment: only used in content.htm * /
.sub_menu1 {
  color: #3f3933;
  font-family: Tahoma,Arial,Helvetica,sans-serif;
  font-size: 250%;
  font-weight: 500;
  display: inline;
  float: left;
  line-height: 100%;
  margin-left: 328px;
  / *margin-top: -34px;* /
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 2px;
  padding-top: 1px;
  text-align: left;
}
*/

/* 2018-03-06
sub_menu2 and subCategoryTitle -> subCategoryMenuItem
*/
/* .sub_menu2 { */
.subCategoryMenuItem {
  color: #3f3933;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 250%;
  font-weight: 500;
  display: inline;
  float: left;
  line-height: 100%;
  /*margin-left: 136px;*/
  /*margin-left: 80px;*/ /* 2018-03-05 */
  /*margin-top: -34px;*/
  margin-top: 10px; /* 2018-03-05 reactivate */
  margin-bottom: 0;
  padding-bottom: 2px;
  padding-top: 1px;
  text-align: left;
}

/* 2018-03-05, -6 */
/* Desktop */
@media screen and (min-width: 1200px) {
  .subCategoryMenuItem {
    margin-left: 80px;
    /*margin-top: -11px;*/
    /*height: 55px;*/
  }
  /*2018-03-05
  .subCategoryMenuItem .content {
    margin-top: 20px;
  }
  */
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  .subCategoryMenuItem {
    margin-left: 60px;
    /*margin-top: -6px;*/
    /*height: 40px;*/
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  .subCategoryMenuItem {
    margin-left: 50px;
    /*margin-top: 0px;*/
    /*height: 30px;*/
  }
}


  
/*
.sub_menu {
  color: #3f3933;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 250%;
  font-weight: 500;
  display: inline;
  float: left;
  line-height: 100%;
  margin-left: 80px;
  / *margin-top: -34px;* / 2018-03-05 fixed syntax error with comment in comment. ###did it have any consequences?
  margin-bottom: 0;
  padding-bottom: 2px;
  padding-top: 1px;
  text-align: left;
}
li:first-child .sub_menu {
  margin-left: 328px;
}
*/

/* oystein comment: end only used in menu-index.html and content.htm */
/* oystein comment: merged with style for html > body #bodyContainer */
#bodyContainer {
  background-color: #fff;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 0;
  padding-top: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: auto;
  min-height: 600px;
}

/* oystein comment: used in menu-index.html and content.htm */
/* oystein comment: merged with style for html > body #ContentContainer */
#ContentContainer {
  background-color: #fff;
  border: 0 solid #111;
  /* float: left; */
  padding: 25px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  min-height: 600px;
}

/* 2018-03-06
###stuff only used in old files
/ * oystein comment: only used in content.htm * /
.Txt_Lorem {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 120%;
  color: #3f3933;
  float: left;
  margin-right: 6em;
  padding-top: 8px;
}
/ * oystein comment: end only used in content.htm * /
*/



/* oystein comment: only used in menu-index.htm and content.htm */
.nav-home {
  float: left;
  margin-left: 5px;
}
/* oystein comment: end only used in menu-index.htm and content.htm */

/* oystein comment: only used in content.htm */
.nav-cat-bar-prev {
  margin-left: 30px;
  margin-top: 12px;
  float: left;
}

.nav-cat-bar-next {
  margin-left: 30px;
  margin-top: 12px;
  float: left;
}

.nav-sub-bar-prev {
  margin-left: 88px;
  margin-top: 10px;
  float: left;
}

.nav-sub-bar-next {
  margin-left: 30px;
  margin-top: 10px;
  float: left;
}

.nav-sub-bar-menu {
  float: left;
  /*margin-left: -60px;*/ /* 2018-03-05 */
  margin-top: -11px; /* 2018-03-05 reactivate */
}
/* oystein comment: end only used in content.htm */

/* 2018-03-05 */
/* Desktop */
@media screen and (min-width: 1200px) {
  .nav-sub-bar-menu {
    margin-left: -60px;
  }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  .nav-sub-bar-menu {
    margin-left: -46px;
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  .nav-sub-bar-menu {
    margin-left: -36px;
  }
}



/* oystein comment: only used in menu-index.htm and content.htm */
.nav-speaker {
  float: right;
  margin-right: 26px;
  margin-top: 13px;
  opacity: 0;
}
/* oystein comment: end only used in menu-index.htm and content.htm */



/* oystein comment: only used in menu-index.htm */
.rounded-list a {
  position: relative;
  display: block;
   /* padding: .4em .4em .4em 2em;
  margin: .5em 0 0 1.2em;
  */
  /* margin: 0.2em 1em 0.5em 1.2em; */
  padding: 0.2em 1em 0.5em 1.2em;
   /*  padding: 0; */
  /* background: #ddd; */
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out; 
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#f4f0e3), color-stop(0.35, #f4f0e3), color-stop(0.55, #f4f0e3), to(#FFFFFF));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #f4f0e3 35%, #f4f0e3 55%, #FFFFFF);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #f4f0e3 35%, #f4f0e3 55%, #FFFFFF);

  /* IE 10 */
  background: -ms-linear-gradient(left, #f4f0e3 35%, #f4f0e3 55%, #FFFFFF);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #f4f0e3 35%, #f4f0e3 55%, #FFFFFF);  
}

.menu_item {
  padding: 0.1em 0.1em 0.1em 1.3em;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: scale(1.3);  
}

/* tried to comment this out. didn't fix the problem with bottom cells that continue in the next column */
.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute; 
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #E0D6AF;
  height: 2em;
  width: 2em;
  /*line-height: 2em;*/
  line-height: 1.5em; /* better vertical centering of the category numbers (li counter) in circles */
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

.menu_icon {
  /* 2017-05-16. make overview a bit more responsive height-wise
  height: 40px;*/
  height: 4vh;
  padding-left: 0;
  display: block;
  /*display: inline-block;*/ /* attempt at fixing problem on ipad */
  float: right; /* attempt at fixing problem on ipad */
  margin-left:auto; 
  margin-top: 0.3em;
}

/*.menu_text {
  float: left;
  height: 40px;
  margin: 7px 0 0 -8px;
  / * margin-top: 6px; * /
  / * padding-right: 68px;* /
/ *  display: inline-block;
}*/
.menu_text {
  display: inline-block;
  float: left;
  /*height: 30px;*/
  padding: 11px 0 0 10px;
}

/* menu bar */

/* 2018-03-06 ###not used
.clearfix:after {
  display:block;
  clear:both;
}
*/
/* oystein comment: end only used in menu-index.htm */



/* oystein comment: only used in menu-index.htm and content.htm */
/* ###kevin used #navigation for both languages and subcategories */

#language-navigation ul {
  margin: 0;
  padding: 0;
}

#language-navigation ul li {
  list-style-type: none;
  display: inline;
}

/*#language-navigation li:before {*/
#language-navigation li:after {
  content: " | ";
  color: #ffffff;
  text-shadow: 1px 1px 1px #B8AE8F;
}
/*#language-navigation li:first-child:before {*/
#language-navigation li:last-child:after {
  content: none;
}

#language-navigation ul a {
  text-decoration: none;
  padding: 0;
  color: #444;
}

/*#language-navigation ul a:hover .title {*/
#language-navigation ul .name:hover {
  color: #FE9800;
  cursor: pointer;
}
/* oystein. ###how does :active work?
#language-navigation ul a:active {
  color: #FE9800;
}
*/
/*#language-navigation ul .selected .title {*/
#language-navigation ul .selected .name {
  color: #FE9800;
}

#subCategory-navigation ul {
  margin: 0;
  /* oystein */
  margin-left: 200px;
  padding: 0;
}

#subCategory-navigation ul li {
  list-style-type: none;
  display: inline;
}

/*
/ *#subCategory-navigation li:before {* /
#subCategory-navigation li:after {
  content: " | ";
  color: #ffffff;
  text-shadow: 1px 1px 1px #B8AE8F;
}
/ *#subCategory-navigation li:first-child:before {* /
#subCategory-navigation li:last-child:after {
  content: none;
}
*/

#subCategory-navigation ul a {
  text-decoration: none;
  padding: 0;
  color: #444;
}

#subCategory-navigation ul a:hover .title {
  color: #FE9800;
}

/* oystein
#subCategory-navigation ul a:active {
  color: #FE9800;
}
*/
#subCategory-navigation ul .selected .title {
  color: #FE9800;
}

.nav-sub-bar-next img:hover {
  transform: scale(1.3);  
}
.nav-sub-bar-prev img:hover {
  transform: scale(1.3);  
}
.nav-cat-bar-next img:hover {
  transform: scale(1.3);  
}
.nav-cat-bar-prev img:hover {
  transform: scale(1.3);  
}
/* oystein comment: end only used in menu-index.htm and content.htm */



/* oystein. additions */

/* Desktop */
/*@media screen and (min-width: 737px) {*/
@media screen and (min-width: 1200px) {   /* 2018-03-05 */
  #language-navigation {
    font-size: 24px;
  }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  #language-navigation {
    font-size: 16px;
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  #language-navigation {
    font-size: 10px;
  }
}



/* test ###don't work
.fa-volume-up {
  color: red;
  color: red !important;
  background-color: red;
}
*/



/* Fortunately, you can tell the browser to keep specific elements together with break-inside. */
li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

/* 2018-03-06. merged contd */

body {
  background-color: #FBF8EF;
  background-attachment: scroll;
  /*background-image: url(images/site_bg-1150x639.jpg);*/
  background-image: url(../images/site_bg-1150x639.jpg);
  background-repeat: repeat;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body.bildtema-clean {
    background-color: #ffffff;
}

body * {
  font-size: 100%;
}

/* 2017-05-16. make overview scrollable */
#overview {
  overflow: auto;
}

/* 2018-03-06 ###not used
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
*/

p {
  margin-bottom: 1.1em;
  margin-top: 0;
}

#main p.lastNode {
  margin-bottom: 0;
}

a:link img, a:visited img {
  border: none;
}

div.clearFloat {
  clear: both;
  font-size: 0;
  height: 0;
  line-height: 0px;
}

/* 2018-03-06 ###not used
/ * oystein comment: not used * /
li.clearFloat {
  clear: both;
}
*/

ul.symbolList {
  display: inline;
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.AbsWrap {
  position: relative;
  width: 100%;
}

.rowWrap {
  width: 100%;
}
/* oystein comment: end not used */

#main, #content {
  margin: 0 auto;
  max-width: 1400px;
  width: auto;
  -webkit-box-shadow: -30px 30px 60px -50px #000, 30px 30px 60px -50px #000;
  -moz-box-shadow: -30px 30px 60px -50px #000, 30px 30px 60px -50px #000;
  box-shadow: -30px 30px 60px -50px #000, 30px 30px 60px -50px #000;
/*
-webkit-box-shadow: -30px 0px 100px -90px #000, 30px 0px 100px -90px #000;
-moz-box-shadow: -30px 0px 100px -90px #000, 30px 0px 100px -90px #000;
box-shadow: -30px 0px 100px -90px #000, 30px 0px 100px -90px #000;
*/
}

/* oystein comment: bad name since used for other/more background then the logo's. bad @id since not unique */
/* oystein comment: merged with style for html > body #logo_bar */
#logo_bar {
  background-color: #fff;
  /*background-color: yellow; test */
  margin-bottom: 0;
  margin-left: 0;
  /*margin-top: 40px;*/
  /*margin-top: 15px;*/
  /*margin-top: 5px;   / * 2018-03-02 * / */
  /*padding: 15px;*/   /* 2018-03-05 */
  /*padding-top: 0;*/
  /*height: auto;*/
  /*height: 76px;*/   /* 2017-01-11. better to set it to the size it gets anyway? less flicker and other problems? 2018-03-05 remove again */
  /*height: 43px;*/   /* 2018-03-02. tried without height. jumps. but it still jumps a little bit with 43=height of apple */
  min-height: 30px;
}

/* Desktop */
/* 2018-03-05 */
@media screen and (min-width: 1200px) {
  #logo_bar {
    margin-top: 5px;
    padding: 15px;
    height: 76px;   /* 2018-03-05 */
  }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  #logo_bar {
    margin-top: 5px;
    padding: 5px;   /* 2018-03-05 */
    height: 51px;   /* 2018-03-05. jumping if smaller value */
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  #logo_bar {
    margin-top: 0px;
    padding: 5px;   /* 2018-03-05 */
    height: 51px;   /* 2018-03-05. jumping if smaller value */
  }
}
/* 2018-03-02 */
/* ###messy with this et al in css called 'index', i.e, overview */
/* not so tall laptop. ###please have another look at the tablet and mobile settings too */
/* ###seems to be used always. doesn't the max-height test work?
@media screen and (max-height: 1100px) {
  #logo_bar {
    margin-top: 5px; / * changing this proves it's actually used * /
    padding: 0px;
  }
}
*/


.lexin-logo {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 300%;
  text-align: left;
  color: #403933;
  line-height: 120%;
  padding-bottom: 8px;
  padding-top: 1px;
  margin-left: 28px;
  margin-top: 0px;
  display: inline;
  float: left;
  margin-bottom: 0;
}

.lexin-logo:hover {
  cursor: pointer;
}

/*
#menu_bg {
  margin-left: 45px;
  margin-top: 0px;
  display: inline;
  float: left;
  margin-bottom: 0;
  background-color: #dcdcdc;
  background-attachment: scroll;
  background-image: url(images/lang_menu_bg.png);
  background-position: center center;
  background-repeat: repeat-y;
  width: 1510px;
  padding-top: 0px;
  height: 37px;
}
*/
/* oystein comment: indeed used */
/* oystein comment: merged with style for html > body #menu_bg */
/*2018-03-06 #menu_bg {*/
#language_bar {
    /* fallback */
    display: none;
  background-color: #EDE7D1;
  background-image: url(images/linear_bg_1.png);
  background-repeat: repeat-y;
  border-bottom: 1px solid #fff;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#EDE7D1), to(#FFFFFF));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(left, #FFFFFF, #EDE7D1);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #FFFFFF, #EDE7D1);

  /* IE 10 */
  background: -ms-linear-gradient(left, #FFFFFF, #EDE7D1);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #FFFFFF, #EDE7D1);
  
  height: auto;
  min-height: 37px;
}

/* oystein. stuff here moved to content.css */

/* oystein comment: merged with style for html > body #footer */
#footer {
  margin-top: 0px;
  margin-bottom: 0;
  background-color: #fff;
  padding-top: 2px;
  height: auto;
  min-height: 50px;
}

.Txt_Ett {
  color: #3f3933;
  display: inline;
  font-family: Tahoma,Arial,Helvetica,sans-serif;
  font-size: 140%;
  line-height: 120%;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 21px;
  padding-bottom: 2px;
  padding-top: 1px;
  text-align: center;
}

/* oystein. stuff here moved to content.css */

/*.nav-flag {*/
.version-flag {
  float: right;
  margin-left: 4px;
  margin-top: 0;
}

/* oystein. stuff here moved to content.css */

/* oystein comment: not used
/ * grid * /
.wrapper2 {
  margin-top: 21px;
  padding-bottom: 8px;
}
*/

ol {
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  *list-style: decimal; /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 2px;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  /* count from 4 to 3 */
  -moz-column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-count: 3;
  -webkit-column-gap: 15px;
  column-count: 3;
  column-gap: 15px;
}

ol ol {
  margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

/* oystein. stuff here moved to content.css */


/* oystein comment: not used 
/ *----- Menu Outline -----* /
.menu-wrap {
  width:100%;
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  background:#3e3436;
}
 
.menu {
   / *  width:1000px; * /
  margin:0px auto;
}
 
.menu li {
  margin:0px;
  list-style:none;
  font-family: Trebuchet MS,Tahoma,Arial,Helvetica,Sans-serif;
}
 
.menu a {
  transition:all linear 0.15s;
  color:#919191;
}
 
.menu li:hover > a, .menu .current-item > a {
  text-decoration:none;
  color:#fff;
}
 
.menu .arrow {
  font-size:11px;
  line-height:0%;
}
 
/ *----- Top Level -----* /
.menu > ul > li {
  float:left;
  display:inline-block;
  position:relative;
  font-size:15px;
  border-left: 1px 50% solid rgba(0, 0, 0, 0.07);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  
  / * background: rgba(0, 0, 0, 0) url("../images/main-delimiter.png") no-repeat scroll 98% 4px; * /
}
 
.menu > ul > li:first-child { border-left: none; }
.menu > ul > li:last-child { border-left: none; }

.menu > ul > li > a {
  padding:10px 40px;
  display:inline-block;
  / * text-shadow:0px 1px 0px rgba(0,0,0,0.4); * /
  text-decoration: none;
}
 
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
  background:#2e2728;
}
 
/ *----- Bottom Level -----* /
.menu li:hover .sub-menu {
  z-index:1;
  opacity:1;
}
 
.sub-menu {
  width:160%;
  padding:5px 0px;
  position:absolute;
  top:100%;
  left:0px;
  z-index:-1;
  opacity:0;
  transition:opacity linear 0.15s;
  box-shadow:0px 2px 3px rgba(0,0,0,0.2);
  background:#2e2728;
}
 
.sub-menu li {
  display:block;
  font-size:16px;
}
 
.sub-menu li a {
  padding:10px 30px;
  display:block;
  text-decoration: none;
}
 
.sub-menu li a:hover, .sub-menu .current-item a {
  background:#3e3436;
}

.menu,
.menu ul,
.menu li,
.menu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
end not used*/

/* oystein. stuff here moved to content.css */

/* oystein. additions */

#warning {
  color: crimson;
  background-color: papayawhip;
}

.home {
  height: 1.2em;
}

/* Desktop */
/*@media screen and (min-width: 737px) {*/
@media screen and (min-width: 1200px) {   /* 2018-03-05 */
  .versionFlag {
  }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
  .versionFlag {
    width: 75%;
  }
}
/* Mobile */
@media screen and (max-width: 736px) {
  .versionFlag {
    width: 25%;
  }
}


.modalcontainer {
    display: none;
}