﻿@media screen and (min-width : 769px), print 
{

/* HIDDEN in desktop version */
#mobileNavbar, .f, #dragDropContainer, #linkHome, #linkMenu2, #linkListView, .mobile, #topMenu a.mobile {display: none; }

/*HTML ELEMENTS*/
ol li{ padding:0px 0px 10px 0px; }


/*IMAGES*/
img.imgWide {       width: 500px; height:auto; padding:15px 0px; background-color:white;  }
img.imgNarrow {       width: auto; height:auto; max-width:500px; padding:15px 0px; background-color:white;  }
img.imgNarrow2 {       width: 240px; height:auto; padding:0px; background-color:white;  }
img.IconSmall{ border:none; height:18px; width:auto;vertical-align:text-bottom; }
h1 img.IconSmall{ vertical-align:baseline; }
/*Hardcoded width - change if total page width is changed*/
img.imgWide.imgArticle{width:620px; height:auto; padding:0; margin:50px 220px 30px; }

/*MAIN HEADERS* and H1*/
h1, .header1, h2.header1, #userRolesHome h2#header1.header1{  font-weight:300; font-size:36px; }
h1.mainHeader,h2.mainHeader  { font-weight:500; font-size:40px; }
/*Headers from SYD helper must be positioned, cause they are not included in the same container as the text.*/
h1#pageHeader{ margin-left:220px; margin-top:50px; margin-bottom:20px; }


    .subHeading {/*top:-25px;*/font-size:50%;  position: relative; margin-bottom:0px; display:inline-block; text-transform:uppercase;    }
/*H2 HEADERS*/
h2, .header2, a.header2{font-weight:300;font-size:28px;  }


/*H3 HEADERS - formating*/
h3, h2.header3, .header3{font-size:24px}


/*H4 HEADERS*/
h4, .header4{font-size:18px; }

/*NEWS SUP*/


/*AREAS*/
#baseContainer{ position:absolute; min-height:100%;right:0px;left:0px;  background-color:white; margin:0 auto; width:1060px; height:auto; box-shadow: -15px 0 15px -15px #888, 15px 0 15px -15px #888; /*border: solid 1px #efefef;*/}
#baseHeader{ height:80px; width:1060px; position:relative; }
#navTop{ position:relative; width:100%; height:40px;  }
#main {float:left; width:100%; height:100%; position:relative; top:0px; background-color:white; margin-bottom:0px;}

/*Note: Margin-buttom for mainContent must correspond to height for mainFooter. And thw height in #mainfooter  div.wideDivMargins must be set. */
#mainContent {    padding: 0 0 0px 0;  position:relative; float:left; width:100%; margin:0; margin-bottom:460px;  background-color:white;  }
#mainfooter{        width: 100%;    /*padding: 7px 0;*/    text-align: center;    bottom: 0px;    position: absolute;    margin: 0; height:460px; padding:0;   }
/*Exclude padding from the height.*/
#mainfooter  div.wideDivMargins {height:370px;  width:100%;  }
/*Width needed only for the English version*/
#baseFooter {        height: 420px;  width:100%;  }

#pageWrapper{    float: left;    height: auto;    min-height: 100%;}
#floatContainer {    float: left;    min-height: 100%;    height: auto;}

/*HEADER*/
a.loginButton  {color: black; color:#3399cc;  border: 1px solid #3399cc; padding:5px; position:absolute; top:15px; right:160px;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; position:absolute; top:15px; right:30px; font-size:10pt; background-color:#3399cc; width:110px; text-transform:uppercase; /*background-color:rgba(41, 196, 245, 1);*/ border-radius:5px; text-align:center;}
.logo{ position:absolute; top:10px; left:30px;  }
.logo img {width: 250px; height:49px;    }
#flagSection {padding-top:17px;  display:block;position:absolute; right:300px;}
#flagEn img,#flagSv img{ height:26px; width:26px; padding-left: 3px;}





/*TOPMENU*/
#topMenu{ position:absolute; top:0px;  height:40px; vertical-align:bottom; width:100%;  background-color:#3399cc; padding:0;  font-size:16px;  }
#topMenu a{ float:left; width:auto; display:block; text-transform:uppercase;  color:white; line-height:40px; font-size:100%; text-align:center; padding: 0 20px;}

#topMenu a:first-of-type {padding-left:35px; /*padding-top:3px;*/  }
#topMenu a:hover{ text-decoration:underline;  }
#topMenu .activeTopMenu{ text-decoration:underline; color:black;}
#topMenu a img {height:22px; width:22px;}


/*COMMON CLASSES*/
/*Containers for each area*/
 .ingress { font-weight:bold;  }
.intro {width:1060px;height:300px; padding:0; margin:0; background-color:#efefef;background-size:cover; position:relative; }
/*.introTwoThird {height:300px; overflow:hidden;    }*/
#introArticle{height:300px;overflow:hidden; }
.infoWideContainer {padding:30px 80px 40px 80px;}
 .infoWide{    height:250px; }
 .infoWide.lowHeight {height:180px;   }
 .infoWideContainer:nth-of-type(2n+1){    background-color:#efefef; }
.infoWideContainer:nth-of-type(2n){    background-color:white; }
.paddingRight {padding-right:30px; height:100%;}
.paddingLeft {padding-left:30px;}
.halfCol{width:50%; height:100%;   }
.oneThirdCol{width:33%;height:100%;  }
.twoThirdCol {width:67%; height:100%; }
/*p.shortDescr { height:220px;}*/
.highCol {height: 280px;   }
.colPaddingSmallNotLeft{padding:0px 20px 20px 0;}
.colPaddingSmallNotRight{padding:0px 0 20px 20px;}
.colPaddingSmallLeftRight{padding:0px 10px 20px 10px;}
ul.normalList , ol.normalList  {margin: 0;    padding: 0;  margin-bottom:30px;  padding-left: 20px;}
ul.normalList li, ol.normalList li  {padding-bottom: 20px;}
.wideDivMargins {padding:30px; padding-top:20px;}

/*Columns hyssat mild grön: #e2f3be #eaf2cd*/







/*HOME*/

img.divPremiumImg {height:28px;width:28px;  }
#premiumInfo .divPremiumInfo{float:right; width:680px;padding-right:60px; text-align:center;color:black;padding-left:0px;}
#premiumInfo h2{color:white; text-align:center; font-family:Bentonsansbold, arial, sans-serif;font-size:170%;white-space:normal;padding-bottom:10px;}

#homeIntro h1{position:absolute;top:15px; left: 30px; color:black;  display:block; padding:20px; /*background-color:white; opacity:0.5;*/ text-shadow: 1px 1px white;}
.bgHomeIntro {opacity:0.2; background-color:white;}
#homeIntro p{top:100px;  left: 50px;  position:absolute;}
#userRolesHome.infoWide{height:320px;}
#home .homeOfferPremium {z-index:5; font-size:24px;  color:white; display:block;  border-radius:5px;  position:absolute;left: 50px; bottom: 60px; padding:10px 30px 8px 30px; width:250px; height:40px;text-align: center; text-transform:uppercase;   }
  
 /*#home .homeOfferPremium:hover {background-color:#3399cc;}*/
#home .offerFreeMonths{z-index:600; color:black; text-transform:uppercase; position:absolute;left: 30px; bottom: 20px; width:310px;font-size:1.1em; text-align:center;display:block; padding:0px; margin:0px; /*padding-bottom:5px;*/ }
.alignIcon{ position:relative; margin:0px; top:3px; padding:0px;}
img.platformIndependent{width:auto; height:250px;margin:auto; display:block; }





/*slideshow front page*/


/*#homeWide #slider img {height: 326px; width: 435px;  box-shadow: 5px 5px 5px #2F4F4F; border-radius:3px; margin-bottom:10px; border:1px black solid;}
#homeWide #slider .noshadow img  {box-shadow:none; border:none;}

#homeWide .slider-wrapper .sliderText{margin:0px; padding:0px;  width:400px; height: 220px;text-align: center; position:absolute; top:0px; left: 480px; color:black; font-size:140%; }
    #homeWide .slider-wrapper ul.sliderList {text-align:left; margin:0; padding:0;   margin-left:68px;  }
    #homeWide .slider-wrapper .sliderList li {padding-bottom:5px;    }
#homeWide .slider-wrapper .sliderText h2, #homeWide .slider-wrapper .sliderText h1 {padding:0px 0px 10px 0px; margin:auto; color:black;/*rgb(41, 122, 163)*/
/*;white-space:normal; width:100%;*/ /*text-shadow:1px 1px 0px #283238;*/ 
/*font-size:2.0em; line-height:1.2; text-transform:none;font-family:"Bentonsansbold", arial, sans-serif;font-weight :bold; }*/
/*#homeWide .slider-wrapper p{ font-weight:normal; line-height:150%;}*/






/*Used in English version*/
.homePostit{ position:absolute; top:-25px; left:50px; }

/*Postit mha text*/
#divPostit {font-family:'Comic Sans MS';   position:relative; float:right; display:block; margin: 0px 0px 20px 20px; 
            z-index:1; padding-left:20px; padding-right:10px;  width:230px; 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;
 }
/*#divPostit .divNeedle {width:100%;position:relative; text-align:center;}*/
#divPostit.postitAlone{position:relative;  display:block;clear:both; float:none;}

#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;}


    
/*Newslist */
 /*.newsListItemPublished { margin: 10px 0 20px 0; font-style:italic;}
 .newsList { margin: 0px; }
 .newsListReleaseDate { clear: both; float: left;width: 100px; }*/




/*GUIDE*/

#guide, .guide {margin:0 0px 30px 0px; /*width:620px;*/ margin-left:220px; margin-right:220px;  /*columns: 400px 2;*/}
/*gif movies*/
.example {    padding: 20px 10px 30px 10px;    background-color:#c3d18d; border-radius: 3px;    margin:20px 0px; }
.divFloatRight {float:right; padding-left:20px; padding-bottom:20px; }
.example img {    border: 1px solid grey;    /*height:100%;*/    }
.example .imgShadow { border-radius: 3px; background-color:#efefef;	box-shadow: 10px 10px 5px #888888;   }
    .example .imgShadow .bgWhite {background-color:white;    }
.gifMovie {    width:500px; height:375px;    border: 1px solid grey;	border-radius: 3px;	box-shadow: 10px 10px 5px #888888;    }
#guideMain .infoWideContainer:first-of-type {padding-top:60px; height:230px; top:-27px; position:relative;}
.infoWide.smartLists{height:600px; }
.infoWideContainer.collectAll{height:320px;}
     #guide h3 {font-weight:300;    }

/*Guide - tables*/
table.guideTable {padding:0;   }
.guideTable,.guideTable th , .guideTable td { border: 1px solid #e4e4e4; border-spacing:0px; padding: 7px;}
.guideTable tr>td:first-child {width:140px;   }

/*VIDEO*/
 div .videoCol {      width:900px;     float:left;      margin:30px 80px;      }
.videoCol .video { display:inline-block;   }
.videoCol .video iframe {width:426px;  height:240px;    }
.videoCol .video:first-of-type {float:left; margin-right:46px;    }
 .newsListItem .video iframe{width:426px; height:240px; }



/*PREMIUM*/
#premiumIntro h1{position:absolute;top:40px; left: 80px;}
#premiumIntro p{top:120px;  left: 80px;  position:absolute; /*line-height:18px;text-align:left; width:240px;  font-size:12px;letter-spacing:0;*/ }
/*#premiumIntro p:nth-of-type(2){top:185px;  left: 80px;  position:absolute; font-weight:bold; /*line-height:18px;text-align:left; width:240px; font-size:12px;letter-spacing:0;*/ 
.homeCol { width: 260px; height: 210px;padding:10px; margin-left:30px; margin-bottom:30px; background:#efefef;   /*background-color:#eaf2cd;*/position:relative; float:left;  }
.premiumCol { width: 260px; height: 190px;padding:10px; margin-left:30px; margin-bottom:20px; /*background:#efefef;*/   /*background-color:#eaf2cd;*/position:relative; float:left;  }
.collectAll .premiumCol{width:33%; padding:0; margin-left:0;}
.premiumFeatures {margin-left:30px;}
.collectAll .premiumFeatures{margin-left:0;}
#premiumBuy {padding: 30px 80px; background-color:aliceblue; background-color: rgba(246, 241, 237, 1); background-color:#efefef;background-color:rgba(242,242,242,1); }
#premiumBuy .paysonLink {margin-top:-45px;}
#premium #premiumIncluded p { text-align:center; width:60%; margin-left:auto; margin-right:auto;}
#premium #premiumInfoEnd {padding:20px 60px;  height:auto;background-color:#efefef; border: solid 1px #efefef;}
#premium #premiumIncluded {/*background-color:AppWorkspace;background-color: rgba(218, 222, 231, 1);*/  background-color:white; padding-top:30px;  padding-left:0; padding-right:0;padding-bottom:10px;padding-top:20px;}

/*EXAMPLE*/
.userExample{display:inline-block; width:33%;  }
.userExample img {display:inline-block;width:300px;}

.articleOverview {width:640px;height:200px;  margin:30px 0 20px 0; padding:0; border:solid 1px #efefef; position:relative; overflow:hidden;background-color:white;  }

/*LISTBANKEN*/
#introArticle h1.areaHeader, #introArticle h2.areaHeader  {top:100px; display:inline-block; width:100%; text-align:center;}
#demo .listbankenDetails img, #julplanering .listbankenDetails img,#bokforing .listbankenDetails img,
#packlistor .listbankenDetails img, #brollop .listbankenDetails img{background-size:160px 100%;margin-right:20px; float:left;}
.listbankenDetails .divListbankenImg {float:left; }

#listbankenContainer a.displayList, #listbankenContainer a.downloadList {position:absolute; bottom:10px;}
#listbankenContainer a.downloadList{left:360px;}
#listbanken #introArticle .oneThirdCol h1 {top:110px; width:100%; text-align:center;}
#listbankenIntro h1{position:absolute; top:50px; left:50px;  }

.articlePresentation img, .listbankenOverview img, .listbankenDetails img{width:160px; height:auto; /*float:left;*/ display:inline-block;}
/*#listbankenInfo ul {padding-left:20px;}*/
#listbankenInfo p {margin-top:0px; margin-bottom:30px;}

/*METHOLOGY*/
.imgContainer { width:100%; height:160px; overflow:hidden; margin-bottom:20px;}

/*Wrok flow - Methology subpages*/
#workFlowIntro  { /*background-color:aliceblue;*/ padding:40px 80px 0 80px;   }

/*WORK FLOW + links to articles - Only valid on the overview on the methology page*/
#workflow .step {display:inline-block; width:190px; margin-right:10px; float:left; margin-top:20px;background-color:aliceblue; margin-bottom:30px;}
#workflow .step p{background-color:aliceblue; height:250px;  padding:15px;  }
#workflow ul, ul.linkArticles {padding-left:15px; margin:0; list-style-type:none; height:220px; padding-top:10px;}
ul.linkArticles {padding-left:0; margin:0; list-style-type:none; height:80px; padding-top:10px;}
#workflow .step:last-of-type {margin-right:5px;    }
#workflow .step:first-of-type {margin-left:5px;} 
#linkOthers {padding:40px 60px; margin-top:30px; clear:both;}


/*BUTTONS*/
.textButton {position: relative; margin:0 0 10px 0;   width:216px; height:24px; font-size:14px;font-family:Arial, Sans-Serif;   padding:10px 0px 2px 0px; }
.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;  }
/*.miniButtonLeft {position: relative; height:35px; margin:10px; width:100px; padding:4px 0px 0px 0px; text-align:center; color:white; float:left;  }
.listbankenCopy {position: relative; display:block; height:35px; margin:10px; margin-left:23px; width:100px; padding:4px 0px 0px 0px; text-align:center; color:white;  }
.miniButtonRight{position: relative; height:35px; margin:10px; width:100px;  padding:4px 0px 0px 0px; text-align:center; color:white; float:right;}
.largeButtonLeft {position: relative; height:35px; margin:10px; width:240px; padding:4px 0px 0px 0px; text-align:center; color:white; float:left; }
.miniButton {position: relative; margin-top:10px; margin-bottom:20px; width:185px; height:12px; font-size:12px;font-family:Arial, Sans-Serif;   padding:8px 0px 8px 0px; }*/
.imageButton {width:130px; height:31px; padding:13px 5px 0px 50px; line-height:100%;text-transform:uppercase; display:block; color:#ffffff; cursor:pointer;  background:url('/cdn/Resources/Images/home_button_register.png') no-repeat top;   }
/*.linkRegister,.linkUpgrade{ position:relative; width:130px; height:31px; padding:15px 5px 5px 50px; margin-bottom:40px; line-height:100%; text-transform:uppercase; display:block; color:#ffffff; cursor:pointer; background:url('Images/home_button_register.png') no-repeat top; }*/


/*ABOUT SAVEYOURDAY*/
 div#about div.infoWide{    height:auto; }
#aboutLinks{margin-top:20px; margin-bottom:30px;   }
#aboutLinks h3{font-size:20px;}
/*quote section*/
blockquote {	font-family: Georgia, serif;	font-size: 16px;	font-style: italic;	/*width: 520px;*/	margin: 0.25em 0;	padding: 0.25em 20px 0.25em 40px ;	line-height: 1.45;	position: relative;	color: #383838;	}
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 {float:right;}


/*FOOTER*/
#linkContainer {  /*padding:30px 80px;*/ /*display:none;*/  }

    /*footer .wideDivMargins {width:1000px;    }*/

}








 












