@media screen and  (max-width: 768px)
{
/*HIDDEN in mobile version*/
/*Optimized for min-width 300px exkl scrollbar. Iphone5 320px*/
.desktop,  #baseHeader ,#hplCreateAccount,#mainMenuTop, #navSidebar,#linkSettings, #linkListView, #linkMenu1,#linkHome {display:none;}


/*OVERRIDING jQuery UI. Removed width:17 ems from ui-datepicker.   */
.fancybox-skin {padding:5px !important; }

#slider-direction-nav {    top: 30% !important;}

/*HTML ELEMENTS*/
body {margin-left: 0;margin-right: 0;font-size:16px;background-color:white;}
#home p.textCover {font-size:14px;font-weight:500; }
p {margin:0; padding:0px 0px 10px 0px; }
ol li {padding-bottom:20px;}
ul {padding-left:20px; }
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }
    img,   img:hover {border:none;    }
/*IMAGES*/
img {margin-left:auto; margin-right:auto; vertical-align: bottom;     }
img.imgWide  {width: 100%; height:auto;  margin:15px 0px;   }
img.imgNarrow  { width: auto; height:auto; max-width:100%; margin:15px 0px;   }
img.imgNarrow2 {       width: 240px; height:auto; padding:0px; background-color:white;  }
img.IconSmall{ border:none; height:18px; width:auto; vertical-align:baseline; }
img.imgWide.imgArticle  {width: 100%; height:auto;  margin:0 0 30px 0;   padding:0;}
img.divPremiumImg{vertical-align:baseline;height:28px;width:28px; }
img.imgBorder{border:none; border-bottom:#efefef 1px solid; }

/*MAIN HEADERS and H1*/
/*h1 Headers from SYD helper must be positioned, cause they are not included in the same container as the text.*/
h1#pageHeader{ margin-left:20px; margin-bottom:20px; }
h1, .header1, h2.header1, h1.header1, #userRolesHome h2.header1{  font-weight:300; font-size:24px; }

h1.mainHeader,h2.mainHeader{  font-weight:300; font-size:30px; /*display:block;*/ } 

    .subHeading {font-size:50%;  position: relative; margin-bottom:0px; display:inline-block; text-transform:uppercase;    }
/*H2 HEADERS*/
h2, .header2, a.header2{font-weight:bold;font-size:18px;  }

/*H3 HEADERS - formating*/
h3, h2.header3, .header3{font-size:18px; font-weight:bold;}

/*H4 HEADERS*/
h4, .header4{font-size:14px;white-space:normal; font-weight:bold; }


   

/*NEWS SUP*/

/*AREAS*/
/*#baseContainer{position:relative; background-color:white; margin:0px; padding:0px; height:100%; min-width:300px; width:100%}*/
/*@media screen and (max-width:768px)*/
#baseContainer {
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: white;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-width: 300px;
    width: 100%;
}


#navTop { }
#mainMenuTop {margin-top:40px;}
/*#main {float:left; width:100%; position:relative;min-width:300px; margin-top:40px; clear:both; background-color:white;  }*/
/*@media screen and (max-width:768px)*/
#main {
    margin-bottom: 0px;
    top: 0px;
    height: 100%;
    float: left;
    width: 100%;
    position: relative;
    min-width: 300px;
    background-color: white;
}

 #navSidebar, #tdLeft{ position:relative;  float:left; width:94%; padding-left:3%;padding-right:3%;padding-top:10px; }
 /*#mainContent,#tdMain{  position:relative;float:left;  width:94%; padding-left:3%;padding-right:3%;padding-top:10px; padding-bottom:20px;}*/
 /*@media screen and (max-width:768px)*/



#pageWrapper{    float: left;    height: auto;    min-height: 100%; /*margin-bottom:64px;*/}

/*Note: Margin-buttom for mainContent must correspond to height for mainFooter. And thw height in #mainfooter  div.wideDivMargins must be set. */
#mainContent {    padding: 0px;    position: relative;    float: left;    top:40px;   margin-bottom:980px;  /*padding-left: 3%;    padding-right: 3%;    padding-top: 10px;    padding-bottom: 20px;*/}
#mainfooter{        width: 100%;      text-align: center;    bottom: 0px;    position: absolute;    margin: 0; height:940px;  }
/*Exclude padding total 40px from the height.*/

#baseFooter {        /*height: 940px;*/  width:100%;  }
#copyrightContainer {  height:80px;   padding:10px 30px;       margin: 0px;    clear: both;    position: relative;    line-height:25px;    color: white;}
#linkContainer  div.wideDivMargins {height:840px;    }
#floatContainer {    float: left;    min-height: 100%;    height: auto;}


/*MOBILE NAVIGATION BAR*/
/*Header on mobileNavbar. Huvudrubrikens placering på topMenu. Header in mobile version must not be wrapped*/
#mobileNavbar h2.headerNavbar { display: inline-block; position: fixed;padding:0; margin:0;  text-align: center; line-height: 18px;height:29px; margin-top:11px; z-index: 2; left:40px;
   width: 80%; overflow: hidden;  text-overflow: ellipsis;  /*testar*/    -webkit-overflow-scrolling: touch; color:white;font-size:18px; text-transform:uppercase; white-space:nowrap;     }
#mobileNavbar {background-color:#3399cc; position:fixed; top:0px; left:0px; z-index:6;  top:0px; height:40px; display: block; padding:0; margin:0;width: 100%;border-bottom:solid 1px black; }
    #mobileNavbar .subHeading {display:none;    }
#mobileNavbar h2 img {display:none;}
.linkNavBarLeft{position: absolute; top:0px; left:0px; padding: 7px 10px 7px 7px; width:26px; height:26px;z-index:700; cursor:pointer; border:none; }
.linkNavBarRight{position: absolute; top:0px; right:0px; padding: 7px 7px 7px 10px; width:26px; height:26px;z-index:700; cursor:pointer; border:none; }
img[src='/resources/Images/dropdown_icon.png'].linkNavBarRight {width:auto;    }

/*top navigation*/
#topMenu a{ float:left; width:100%;background-color:#3399cc; padding-left: 10px;  position:relative; display:block; text-transform:uppercase;  color:#efefef; line-height:40px; font-size:120%; text-align:left; } 
#topMenu a:hover{font-weight:bold;;background-color:#efefef; text-decoration:none;color:black; }
#topMenu .activeTopMenu{  font-weight:bold; /*text-shadow:1px 1px 0px #283238;*/ background-color:#efefef; color:black;text-decoration:none;}
#topMenu{ min-height:40px;background-color:#3399cc; position:fixed; z-index:1;  top:0px; height:auto;  padding:0% ; margin:0;width: 100%;  border-bottom:solid 1px black; }





/*COMMON CLASSES*/
.intro {width:100%;height:auto; padding:0; margin:0; background-color:#efefef; position:relative; }
.infoWideContainer { float:left;padding:20px; padding-bottom:30px; }
.infoWideContainer:nth-of-type(2n+1){    background-color:white; }
.infoWideContainer:nth-of-type(2n){    background-color:#efefef; }
.infoWide{    height:100%; }
.infoWide.lowHeight {        height: auto;    }  
.halfCol{width:100%;    }
.oneThirdCol{width:100%;  }
.twoThirdCol {width:100%;  }
.colLeft, .colRight {clear:both; position:relative;float:left;    }
.alignRight {text-align:right;  float:right; padding-right:35px;}
/*Mixed orentation*/
.paddingRight {/*padding-bottom:30px;*/ height:100%;}
.paddingLeft {/*padding-bottom:30px;*/}
ul.normalList , ol.normalList  {margin: 0;    padding: 0;  /*margin-bottom:20px;*/  padding-left: 20px; margin-top:5px;}
ul.normalList li, ol.normalList li  {padding-bottom: 20px;}
.wideDivMargins {padding:20px 20px 20px 20px;  position:relative; margin:auto; }
/*.paddingMediumMobile{padding:20px;position:relative; }*/
    .fullWidth {width:100%;    }

   
/*HOME*/
/*#home h1 { position:absolute;left:20px;top:15%;width:60%;}*/
#userRolesHome img {margin-bottom:20px;}
img.platformIndependent{width:100%; height:auto;margin:auto; display:block; }


/*offer front page*/
.homeOfferPremium {font-size:1.4em;  color:white; display:block; background-color: rgb(41, 122, 163); border-radius:50px;  border-radius:50px; position:relative;margin:0px 10px 20px 0px !important; padding:20px 30px;  height:auto; text-align: center;  }
/*slideshow front page*/
#home .homeOfferPremium {/*z-index:5;*/ font-size:24px;  color:white; display:block;  border-radius:5px;  /*position:absolute;left: 50px; bottom: 60px;*/ padding:6px 30px 4px 30px; height:40px;text-transform:uppercase;   }

#home .offerFreeMonths{color:black; text-transform:uppercase; position:relative; font-size:18px; text-align:left;display:block; padding-left:2px; padding-bottom:30px; }


#homeWide {margin:0px auto; padding: 0px; width:100%; }





/*Mobile bacics*/
.logo img {position:relative; text-align:center; display:block;  margin-bottom:15px;}
#home a.loginButton, #home a.createButton, #upperFooter a.loginButton, #upperFooter a.createButton  { padding:5px; width:auto;   border: 2px solid #3399cc;position:relative; margin:auto; margin-bottom:15px;display:inline-block; font-size:10pt; max-width:200px; height:20px; text-align:center; text-transform:uppercase;border-radius:5px; }
#home a.loginButton:hover,#upperFooter a.loginButton:hover, a.createButton:hover, img.linkFlag:hover {opacity:0.6;  }
#home a.loginButton, #upperFooter a.loginButton  {color:#3399cc; background-color:white; position:absolute;top:20px; left:20px;padding:6px 30px 0px 30px; height:40px; font-size:22px; }
#home a.createButton, #upperFooter a.createButton  {color:white;  background-color:#3399cc; }
header .textButton {margin:0;    }
a.loginButtonMobile {display:inline-block; float:left; margin-left:20px;margin-top:10px;height:30px; background-color:#3399cc;max-width:50%;}


/*Flag section*/
#flagSectionMobile { position:relative; display:inline-block; float:right; margin-right:5%;    }
#flagSv img, #flagEn img{ width:30px; height:30px; padding-left:10px; }

/*Home - Premuiminfo*/
#premiumInfo { background-color:#99cc33; }
#premiumInfo .divPremiumImg { text-align:center; }
#premiumInfo .divPremiumImg img  {padding-top:15px; padding-bottom:15px; height:35px;width:35px;}
#premiumInfo .divPremiumInfo{text-align:left; padding:0px 0px; float:right; color:black;}
#premiumInfo h2  {color:white;font-family:Bentonsansbold, arial, sans-serif;font-size:1.4em; text-align:center; white-space:normal;}


/*Postit mha text*/
#divPostit {position:relative;  display:block; z-index:1;   width:230px; margin: 10px auto 20px auto; 
            padding: 0px 20px; height:260px; background-color:#efefef; text-align:left;  
box-shadow: 5px 5px 5px #888; 
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888; 
/*transform: rotate(3deg);
-ms-transform: rotate(3deg);*/  /*IE 9*/ 
/*-webkit-transform: rotate(3deg ) translate3d( 0, 0, 0);*/  /*Safari and Chrome*/ 
text-shadow: rgba(255,255,255,0.01) 0 0 1px;
font-family:'Comic Sans MS';
 }
 #divPostit.postitAlone{}

/*#divPostit .divNeedle {width:100%;display:block; position:relative; text-align:center;}*/
#divPostit img.needle {width:35px; height: 35px;  position:absolute; top:15px; left:105px;}
#divPostit h2 {padding:0px; margin:0px;margin-left:15px;padding-top:60px; display:block; font-size:20px; color:black; font-family:'Comic Sans MS';}
#divPostit p {font-size:16px ; padding: 0px; margin:0px;margin-left:0px; margin-bottom:5px;color:#6d9b0a;  }
#divPostit p:first-of-type {padding-top:15px;     }

#divPostit img.IconSmall {float:left; padding-right:10px;padding-top:5px;}


#homeWide .slider-wrapper { position:relative; box-shadow:none; min-height: 370px;}
#homeWide #slider  { background: #99cc33; background: linear-gradient(to right, #72aa00 0%, #8eb92a  100%);padding:10px 30px;  }
#homeWide #slider img { margin-bottom:40px;  }
#homeWide .slider-wrapper .sliderText{text-align: center; position:relative; color:black; font-size:120%; height:auto; }
#homeWide .slider-wrapper .sliderText h2,#homeWide .slider-wrapper .sliderText h1 {position:relative;z-index: 0;  height:auto; margin:auto; color:white;white-space:normal; text-shadow:1px 1px 0px #283238; font-size:1.5em; line-height:1.2; text-transform:none; font-family:"Roboto condensed", sans-serif; font-weight :bold;padding-bottom:3px; }
#homeWide .slider-wrapper p{ font-weight:normal; line-height:150%;}
#homeWide .slider-wrapper ul.sliderList {text-align:left; margin:0; padding:0; padding-left:15px;  margin-left:40px; margin-top:20px; margin-left:auto; margin-right:auto; display:inline-block; }
#homeWide .slider-wrapper .sliderList li {padding-bottom:15px;    }




 /*GUIDE*/
#guide, .guide {margin:0 20px 30px 20px; }
/*Top and padding-bottom must match, otherwise the footer comes too close.*/
#guide.subPages, .guide.subPages {top:40px; position:relative; padding-bottom:40px;  }
#guide.subPages h1, .guide.subPages h1 {margin-bottom:10px;}
#guideMain h1, #guideMain h2 {padding:0;}
#guideMain {padding:20px 0;}
    #guide h3 {font-weight:bold;
    }

/*Guide - tables*/
table.guideTable {padding:0;    }
.guideTable,.guideTable th , .guideTable td { border: 1px solid #e4e4e4; padding:7px;border-spacing:0px; }

.guideTable tr>td:first-child {width:140px;   } 
 #guide ol {margin-left:10px;
    }
    .ingress {font-weight:bold;padding-top:20px;}

 /*examples and gif movies*/
.example {    padding: 20px 10px 30px 10px;    background-color:#c3d18d;    border-radius: 3px;    margin:20px 0px; }
.example img {    border: 1px solid grey;        }

.gifMovie {        width:100%; height: auto;   }
/*PREMIUM*/

/*#premiumIntro h1{position:relative;top:20px; left: 20px;}*/
/*#premiumIntro p:nth-of-type(1){padding-top:20px;  padding-left: 20px; padding-bottom:0;  position:relative;   }*/
/*#premiumIntro p:nth-of-type(2){padding-top:25px;  padding-left: 20px;  position:relative;   }*/
.premiumCol,div .twoColumns, div .threeColumns {  width:100%; height: auto;/*padding:5%;*/  margin: 0; /*background-color:#efefef;*/position:relative; float:left; padding:20px 0;}
/*.premiumCol:nth-of-type(2n+1){background-color:#efefef;}*/
.premiumCol:nth-of-type(2n){background-color:White;}
#premium hr {display:none;    }
.premiumInfo {  background-color:#efefef;  }
#premiumBuy, #premiumIntroText {padding: 20px 20px; background-color:#efefef; }
#premiumBuy .paysonLink {display:block; margin:auto;}
#premiumBuy .paysonLink.desktop {display:none; margin:auto;}
#premium #premiumInfoEnd {padding:20px; margin-bottom:20px; height:auto;background-color:#efefef; border: solid 1px #efefef;}
#premium #premiumIncluded {  background-color:white; padding:20px;}
/*div.premiumFeatures{padding: 0 20px}*/

/*EXAMPLE */
.userExample{position:relative; display:block; width:100%;  }
.userExample img {display:block;width:100%;border:none;}
.userExample img:hover{border:none;} 
.articleOverview {width:100%;  margin:30px 0 20px 0; padding:0; border:solid 1px #efefef; position:relative; overflow:hidden;background-color:white;  }
    .articleOverview .halfCol, #listbanken #introArticle .oneThirdCol {        height: 200px;    }
    #premium #premiumIncluded p { text-align:center; width:90%; padding:0 5%; }

    /*LISTBANKEN*/
#introArticle h1.areaHeader, #introArticle h2.areaHeader  {top:70px; display:inline-block; width:100%; text-align:center;}
/*#demo .listbankenDetails img, #julplanering .listbankenDetails img,#bokforing .listbankenDetails img,
#packlistor .listbankenDetails img, #bokforing .listbankenDetails img, #demo .listbankenDetails img, #julplanering .listbankenDetails img{background-size:160px 120px; height:120px; width:160px; display:inline-block;}*/

#listbankenContainer{padding-left:0; padding-right:0;}
.listbankenDetails h2.header3 {margin-bottom:10px; margin-top:30px; white-space:normal; height:auto; display:inline-block; width:100%;text-align:center;}
.listbankenDetails {height:auto;}
#listbankenContainer .listbankenDetails a.displayList, #listbankenContainer .listbankenDetails a.downloadList {position:relative; top:0;width:auto; padding-left:10px;padding-right:10px; }
#listbankenContainer .listbankenDetails a.displayList{float:left; margin-right:5px;margin-left:10px;}
#listbankenContainer .listbankenDetails a.downloadList{float:right; margin-left:5px; margin-right:10px;}
.listbankenDetails .divListbankenImg {clear:both;margin:0 auto;}
.articlePresentation img, .listbankenOverview img, .listbankenDetails img{width:160px; height:120px; display:block; margin:auto;  }
    .mobilePaddingV {padding-left:20px; padding-right:20px;
    }

/*#listbankenInfo ul, #listbankenInfo ol {    margin: 0;    padding: 0;    padding-left: 20px;}*/

#listbankenInfo p { margin-bottom:20px; margin-top:5px;}

/*METHOLOGY*/
.imgContainer { width:100%; max-height:300px; overflow:hidden; margin-bottom:20px;}
#areaContainer .colLeft, #areaContainer .colRight {clear:both; position:relative;float:left;   }
/*WORK FLOW - Article pages*/
#workFlowIntro  {  padding:20px 20px;   }

/*WORK FLOW + links to articles - Only valid on the overview on the methology page*/
#workflow .step {display:inline-block; width:100%;  float:left; margin-top:20px;background-color:aliceblue; margin-bottom:30px;}
#workflow .step p{background-color:aliceblue; height:auto;  padding:15px;  }
#workflow ul, ul.linkArticles {padding-left:15px; margin:0; list-style-type:none; height:auto; padding-top:10px; padding-bottom:20px;}
ul.linkArticles {padding-left:0; margin:0; list-style-type:none; /*height:80px;*/ padding-top:10px; }
 #workflow .step  ul li, ul.linkArticles li {padding-bottom:5px;}
/*media all*/
#workflow .step a {    float: none;    width: 140px;    padding: 60px 0;    color: white;    display: block;    margin: auto; margin-top:20px;}
.colPaddingMedium.desktopOnly {    padding:0;overflow:hidden;}


/*Rounded-list*/
 .distanceLeftMobile {padding-left:20px; margin-left:0;    }
    ol.rounded-list {padding:0}
  
/*ABOUT*/

#about .paddingRight {padding-bottom:0;}
#linkOthers {padding:30px 20px; margin-top:30px; clear:both;}
#aboutLinks{margin-top:30px;   }
#aboutLinks h3{font-size:20px;}

/*FOOTER*/
/*#copyrightContainer{ padding-top:9px; padding-left:20px; padding-right:40px; font-size:70%; color: white;  width:100%; }*/
/*@media screen and (max-width:768px)*/
a.loginButton  {color: black; color:#3399cc;  border: 1px solid #3399cc; padding:5px; font-weight:bold; font-size:10pt; background-color:white; width:110px; text-align:center; text-transform:uppercase; /*background-color:rgba(41, 196, 245, 1);*/ border-radius:5px;}
a.createButton  {color:white; border: 1px solid  #3399cc;border-color:#39c; padding:6px;  font-size:10pt; background-color:#3399cc; width:110px; text-transform:uppercase; /*background-color:rgba(41, 196, 245, 1);*/ border-radius:5px; text-align:center;}

  
#linkContainer {  padding:20px 30px;height:auto;  /*display:none;*/  }
#linkContainer a.createButton{ margin-left:10px; background-color:#99cc33;}
#linkContainer input,#linkContainer button  {margin-top:0px; display:block;margin-bottom:10px;}



  div .videoCol {
      width:100%;
     float:none;
      margin:30px 0 ;

 


        }
.videoCol .video {  display:block; margin-bottom:30px; width:100%;      }

 .videoCol .video iframe {width:100%; margin:auto; margin-bottom:30px;   display:inline-block; float:left;  }

.homeCol h2 {color:black;  /*padding: 10px 0px 15px 0px; */ padding: 3% 0px 5% 0px; margin:0px;      }
.premiumCol h2 {color:black;  /*padding: 10px 0px 15px 0px;*/ padding: 3% 0px 5% 0px; margin:0px;      }


div.linkColumn {width:100%;    }
#referenceContainer .linkColumn ul li{padding-bottom:5px;} 
#referenceContainer {padding-top:50px; }
#referenceContainer a#closeGuideBt{display:inline-block; position:fixed;  color:white; top:60px;right:30px; }
 #referenceSection div.linkColumn {width:100%; padding-bottom:20px;    }
/*Quote*/
blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 80%;
	margin: 0.25em 0;
	padding: 0.25em 10%;
	line-height: 1.45;
	position: relative;
	color: #383838;
  display:block;
  margin-top:20px;
	/*background:#ececec;*/
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "\2014 \2009";
}


.referencePhoto {display:block; position:relative; margin-left:auto; margin-right:auto; padding-bottom:20px; }





/*BUTTONS*/
.readMoreButton {position: relative; height:12px; margin-top:10px; width:90px; padding:8px 0px 8px 0px; text-align:center; color:white; display:block; font-family:Arial, Sans-Serif;  float:left; font-size:12px; font-style:normal;  }
.textButton{position: relative; margin:20px auto; width:216px; height:25px; padding:10px 0px 0px 0px; text-align:center; color:white; }
.imageButton,.linkRegister, .linkUpgrade {position:relative; text-align:left; display:block; width:130px; height:31px; margin: 0px auto 20px auto; padding:13px 5px 0px 50px; line-height:100%;text-transform:uppercase; color:#ffffff; cursor:pointer;   background:url('/cdn/Resources/Images/home_button_register.png') no-repeat top; font-size:10pt;  }
/*.miniButtonLeft {position: relative; height:35px; margin:10px 0px 10px 20px; width:100px; padding:4px 0px 0px 0px; text-align:center; color:white; float:left; }
.listbankenCopy {position: relative; height:35px; margin:10px 0px 20px 20px; width:100px; padding:4px 0px 0px 0px; text-align:center; color:white; display:block; }
.miniButtonRight{position: relative; height:35px; margin:10px 20px 10px 0px; width:100px;  padding:4px 0px 0px 0px; text-align:center; color:white; float:right;}
.largeButtonLeft {position: relative; height:35px; margin:10px 0px 10px 20px; width:240px; padding:4px 0px 0px 0px; text-align:center; color:white; float:left; }

.linkRegister, .linkUpgrade{ height:44px; padding:12px 5px 5px 50px; margin-top:20px;}*/

/*media all*/
#guideMain .infoWideContainer:first-of-type {top:0;  position:relative;}
/*media all*/
.guideButton {
    /*right: 40px;
    top: 70px;
  left:0;
    float: right;*/
     
    top: 60px;
  left:20px;
    float: left;
}



}