/*COLORS
   
    Green background on home page:
    Green background in buttons, login link mobile:#99cc33
    Green dates on home page:#669933;
    Green background on hover in left meny etc: #c3d18d
    Green links, text new item, logoutsigns:#6d9b0a; (loginlink #73881d) 
    
    Red background in buttons: from #cc4949 to #cc0000
    Red text: color:#990000;


    Blue links: #00588b
    Turkosblå bakgrund - ej använd #3399cc
    Snygg sida: linear-gradient(to right, rgb(112, 184, 219) 0%, rgb(41, 122, 163) 100%)
    Fin turkos i headers och bakom erbjudande: rgb(41, 122, 163)
    bra ljusblå matt bakgrund: #cadfe8
    Grey horisontal row: #d3d3d3 
    Grey-light background for create new task, todays date in calender #efefef;
    Grey text (completed etc) #a5a5a5
    Grey background for selected text in lightbox: lightgrey

    Blue-light in left menu:
   
    */

/*HTML ELEMENTS*/
html, form ,body{ margin:0px; padding:0px; width:100%; height:100%; }
/*#premium { font-family:Verdana, sans-serif; font-size:12px;letter-spacing:0; line-height:18px;color:rgb(44,47,62); color:#333; background-color:white;}*/

body { font-family:"Open Sans", Verdana, Tahoma, Arial, Sans-Serif; font-size:12px;font-size:14px;  letter-spacing:0;color:#333;  line-height:1.5; /*line-height:24px;*/ background-color:white; } 
input{ padding:0px; padding-left:3px;}
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"], .submit {
    font-family: Tahoma, Arial, Sans-Serif; }
p {margin-top:0px;}
hr{ color:#d3d3d3; clear:both;}
a {margin:0px; padding:0px;}



/*MAIN HEADER*/
h1, .header1, h2.header1{  white-space:normal; font-family:"Open Sans", Verdana, Tahoma, Arial, Sans-Serif;display:inline-block;  text-align:left; color: #333; margin:0;padding:0; letter-spacing:0; }


/*H2 HEADERS*/
h2, .header2, a.header2{margin:0;padding:0; white-space:normal; font-family:"Open Sans", Verdana, Tahoma, Arial, Sans-Serif; color: #333;margin:0;padding:0; }
ol h2{ margin-top:0px; padding-top:0px;  }
article h2 {margin-top:20px; }
#premium h2 {  padding: 0; margin: 0 0 10px 0; display:block; width:100%;  }
#referenceSection h2{color:#333; color:white; font-weight:bold;  font-size:12pt; ;padding-left:30px;  padding:0; margin:0;    }
#referenceSection h2 a {color:white;}
/*H3 HEADERS - formating*/
h3, h2.header3, .header3{margin:0;padding:0;/*font-weight:bold;*/ white-space:normal;font-family:"Open Sans", Verdana, Tahoma, Arial, Sans-Serif;color: #333;  }

/*H4 HEADERS*/
h4, .header4{ margin:0;padding:0; font-weight:bold; white-space:normal; font-family:"Open Sans", Verdana, Tahoma, Arial, Sans-Serif;color: #333; }

/*FONT SIZES*/
.smallerFont {font-size:smaller;
}

/*NEWS SUP*/
sup{   font-size:8pt;      padding:4px;  background-color:#c3d18d;  border-radius:3px;  text-transform: uppercase;  letter-spacing:1px;  vertical-align:central;  font-weight:normal;}
a sup{  color:black;}

/*USED???*/
/*.sendEmailFooter {color:#efefef;}
#homeDemo { width:1000px;height:300px;  background-color:rgb(236,243,251);  padding:30px;}
#homeDemo img {float:right; width:auto; height:100%;   }*/
/*LISTs IN COLUMNS*/
/*.homeCol ul, .homeCol ul li {margin:0px 0px 0px 7px; padding:0px;}
.homeCol ol li, .homeCol ol {margin:0px 0px 0px 9px; padding:0px;}*/
/*MIXED*/

/*.sydCheckbox {display:none;}
.sydCheckbox + label {font-size:14pt; background-color:red;display:inline-block; background:url('../Images/checked.png') no-repeat; background-position: left;padding-left:30px;background-size:24px; line-height:30px; padding-right:20px;}
.sydCheckbox:checked + label{background:url('../Images/unchecked.png') no-repeat;background-size:24px;  background-position: left;  }*/


/*DON'T KNOW WHERE*/



/*AREAS*/
#mainContent {padding:0; width:100%;}


/*HEADER - LOGIN BUTTONS*/
a.loginButton:hover, a.createButton:hover {opacity:0.6;  }



/*TOPMENU - only in desktop css*/


/*MOBILE NAVIGATION BAR - only in mobile CSS*/


/* SMART FORMATING*/
.required{ color:#000000; font-weight:bold; padding-left:5px; }
.late{ color:#990000; }
.disabled {opacity:0.4;}
.completed, .laterStartDate{ color:#a5a5a5; }
.important{font-weight:bold; }

/*BUTTONS*/



.confirmButton, .listbankenCopy, .selectButton, .bgGreen{background-color:#99cc33; color:white; /*background-color:#669933;*/ 
background: #99cc33;/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(-45deg,  #b0d836 0%, #99cc33 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b0d836), color-stop(100%,#99cc33)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #b0d836 0%,#99cc33 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #b0d836 0%,#99cc33 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #b0d836 0%,#99cc33 100%); /* IE10+ */
background: linear-gradient(135deg,  #b0d836 0%,#99cc33 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d836', endColorstr='#99cc33',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

.bgGreen {color:black;
}
.deleteButton{background-color:#cc0000 ; color:white;
background: #cc0000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(-45deg,  #cc4949 0%, #cc0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cc4949), color-stop(100%,#cc0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #cc4949 0%,#cc0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #cc4949 0%,#cc0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #cc4949 0%,#cc0000 100%); /* IE10+ */
background: linear-gradient(135deg,  #cc4949 0%,#cc0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc4949', endColorstr='#cc0000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

.textButton, #editForm .textButton, #listView .textButton, .miniButtonLeft, .miniButtonRight,.largeButtonLeft, .listbankenCopy, .readMoreButton {line-height:100%; text-align:center; text-transform:uppercase; display:block; color:#ffffff; cursor:pointer; border-radius:3px; border:none; }
.textButton:hover, .linkButton:hover, .miniButtonLeft:hover, .miniButtonRight:hover, .homeOfferPremium:hover,.largeButtonLeft:hover, .listbankenCopy:hover, .readMoreButton:hover, .selectButton:hover { text-decoration:none; opacity:0.8; }
.taskMenu a:hover { text-decoration:none; }
.socialMediaButton {padding-right: 20px; height:35px; width:35px; }
.textButton.exampleButton, .textButton.tipsButton {padding-bottom:12px; padding-top:20px; width:auto;}
/*Select another area*/
.selectButton, .selectButton a{ padding:15px 10px; line-height:100%; text-align:center; text-transform:uppercase; display:block;  cursor:pointer; border-radius:3px; border:none;}


/*LINK COLOR*/
/*Blue links - default*/
a, .linkGeneral { color:#00588b; text-decoration:none;}
a:hover, .linkGeneral:hover { text-decoration:underline;}
.linkGeneral:hover{cursor:pointer;}
#listView .contextMenuPopup a, .completedContextMenuPopup a{ font-size: 10pt;  color:#00588b; text-decoration:none;}
#listView .contextMenuPopup a:hover, .completedContextMenuPopup a:hover {  text-decoration:none;}

/*Black links*/
.homeNewsContainer a { color:black; text-decoration:none;}
.homeNewsContainer a:hover{ text-decoration:underline;}

/*Green links*/
#editForm .displayEmail, #listView a, #editForm a, .linkStartDate, .linkEndDate { color:#6d9b0a; text-decoration:none;}
#listView a:hover,#baseHeader a:hover,#crudContainer .editForm,.linkStartDate:hover, .linkEndDate:hover { text-decoration:none;}

/*LightGrey links*/
#copyrightContainer a{ color:#efefef; }

/*WARNINGS AND ERROR MESSAGES*/
.noScript {text-align:center; width:100%; background-color:red; }
.requiredFieldMissing{ border:dotted 1px Red; }


/*OVERRIDING JQUERY UI   */
.ui-selecting,.ui-selected { background: #c3d18d !important ; }
.ui-state-highlight {color:green !important;} /*Today's date*/
.ui-state-active {color: black !important; font-weight:bold; background-color:#c3d18d !important; background-image:none !important;} /*Selected date*/




/*COMMON CLASSES*/
/*Containers for each area*/
.wideDivMargins {clear:both; position:relative; margin:auto; }
.infoWide{    width:100%; margin:0; padding:0; }
.infoWide.lowHeight {height:50px;    }
.infoWide span.price {font-weight:bold;  ;font-size:200%;}
.colRight{float:right;}
.colLeft {float:left;}
.colPaddingLarge  {padding:50px;    }
.colPadding, .colPaddingMedium{padding:30px;}
.colPaddingH{padding:0 30px;}
.colPaddingSmall  {padding:20px;    }
.paddingMini {padding:10px;}
.colCenter {text-align:center;}
/*Background colors*/
.bgGray {background-color:#efefef;}
.bgBlue, .bgExample{background-color:aliceblue;}
.bgWhite {background-color:white !important;}
.halfCol.autoHeight {height:auto;}
p.textCover {font-size:20px;font-weight:500; }
ul.userRolesList{}

/*Images*/
img.work, img.userAdvantages, img.listbankenCover, img.exampleCover {display:block; width:100%;}
img.work:hover,img.userAdvantages, img.userAdvantages:hover, img.listbankenCover:hover, img.exampleCover:hover {}
img.rotateLeft {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera*/
}
/*IMAGES GENERAL*/
img.fullWidth{width:100%;}
img.fullHeight{height:100%;}
div.hideOverflow {overflow:hidden; position:relative; max-height:330px; }
img.imgBorder{border:#efefef 1px solid; }

/*HOME*/

#userRolesHome img {width:100%; height:auto;border: 3px transparent solid;}


#userRolesHome img:hover {opacity:0.6; border: 3px #3399cc solid;}


/*GUIDE*/
/*Guide examples*/
/*#guideMain .infoWideContainer:first-of-type{ top:-27px; position:relative;}*/
#guideMain a, #home a {color:black;}
#guideMain h1, #guideMain h2, #home h1, #home h2{margin-bottom:10px;}
#home h2.premiumHeader {margin-bottom:0;}
#guideIntro {float:left; position:relative;  width:100%;   padding-top:40px;padding-bottom:50px; background-color:rgba(242,242,242,1); background-color:white;}
#guideIntro h2, #premium #guideIntro p{position:relative; padding-left:80px; }
#guideIntro  p.filmHeader{padding-left:0;}

#guideInfo1 {background-color:#89bcd8;/*background-color:#d3d3d3;*/ color:black; float:right;  }
#guideInfo1 img{float:left; display:block;position:relative;  }
#guideInfo1 .rightColumn{width:auto;}
#guideInfo1 h2 {padding-top:40px;margin-left:80px; width:auto;}
#guideInfo1 a{color:black;}
#guideInfo1 a:hover{text-decoration:none;}

#guideInfo2 {background-color:white; color:black; width:100%; }
#guideInfo2 img{ display:block;position:relative;  }
#guideInfo2 .rightColumn{width:auto;}
#guideInfo2 h2, #premium #guideInfo2 p {padding-top:40px;margin-left:80px; width:auto; }
#guideInfo2 a{color:black;}
#guideInfo2 a:hover{text-decoration:none;}

#guideSmooth {/*background-color:AppWorkspace;background-color: rgba(218, 222, 231, 1);*/  background-color:#efefef; padding-top:30px; clear:both; padding-left:0; padding-right:0;padding-bottom:10px;padding-top:20px;}
#guideSmooth h2{text-align:center;}
#guideSmooth p { text-align:center; width:60%; margin-left:auto; margin-right:auto;}
#guideSmooth img{height:150px; width:auto; display:block; margin-left:auto; margin-right:auto;margin-bottom:20px; }
/*Video*/
#premium .colRight .video, #premium .colLeft .video { width:100%; float:right;margin-top:40px; display:inline-block;}


/*REFERENCE SECTION*/
#referenceContainer, #articleContainer{background-color:#efefef;background-color:#888888; color:white;  width:100%; float:left; /*float:left;*/ display:none; height:auto;margin:0; padding-top:20px;}
#referenceContainer #paddingDiv {padding-left:50px;    }
#referenceSection, #articleSection { clear:both; float:left; width:100%; /*background-color:yellow;*/padding-bottom:30px; }
#referenceSection ul, #articleSection ul {list-style-type:none;/*background-color:yellow;*/ padding-left:20px;    }
#referenceSection .linkColumn>ul{/*background-color:red;*/ padding-left:0; margin:0; margin-top:5px;}
#referenceSection div.linkColumn{width:16%; }
#referenceSection div.linkColumn a{/*font-size:12px;*/ color:white;}
#referenceContainer div.linkColumn {float:left;padding:0 0 0 0px ;width:16%; }


/* GUIDE - MAIN MENU */
#mainMenu {width: 250px; /*padding-left:30px;*/ overflow:hidden;  }
#mainMenu a {color:black;  background-color:transparent;  }
#mainMenu ul {list-style-type:none; margin-left:0; padding-left:30px; margin-top:0;   }
#mainMenu .sectionHeader {  height: 16px; padding:8px 15px 8px 19px;  font-size: 110%; text-transform: uppercase; border-bottom:1px solid #d3d3d3; border-radius:3px;  }
#mainMenu .sectionHeader:hover{ color:#ffffff; background-color:#3399cc;  cursor: pointer;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAgCAMAAAD37KLcAAAAY1BMVEX///+jyjiiyTehyDagxzWfxjWdxTOcwzKbwjGZwDCYvy+WvS2UuyyTuiuRuCmPtiiOtCaMsiWKsSSJryKHrSGFqx+Eqh6CqB2Apht/pRp9oxl8ohh7oBd5nxZ4nhV3nRR2nBMWnGXoAAAAF0lEQVQY02NkZACB/wwMLOgshlEWYRYAyjYCnLHi8JsAAAAASUVORK5CYII=') /*/resources/Images/submenu_itemhover.png*/; background-repeat:no-repeat;background-size:auto 100%; }
#mainMenu .sectionHeader.current  { background-color:#3399cc;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAgCAMAAAD37KLcAAAAY1BMVEX///+jyjiiyTehyDagxzWfxjWdxTOcwzKbwjGZwDCYvy+WvS2UuyyTuiuRuCmPtiiOtCaMsiWKsSSJryKHrSGFqx+Eqh6CqB2Apht/pRp9oxl8ohh7oBd5nxZ4nhV3nRR2nBMWnGXoAAAAF0lEQVQY02NkZACB/wwMLOgshlEWYRYAyjYCnLHi8JsAAAAASUVORK5CYII=') /*/resources/Images/submenu_itemhover.png*/; background-repeat:no-repeat; background-size:auto 100%; }
#mainMenu .sectionHeader.dragHover { background-color: #d3d3d3; }
#mainMenu .sectionContent{position:relative; margin-left: 9px; font-size:90%; overflow:hidden; }
#mainMenu .childContainer{  position:relative; margin-left:18px;}/*Indenting for each task level*/
#guideMain  #mainMenu IMG.sectionImage {display:inline-block;  height:18px; width:auto; position: relative; vertical-align:baseline;
   top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
#mainMenu DIV.sectionText {display:inline-block; padding-left:8px;position: relative; bottom:3px;     }/*Distance from image*/
#mainMenu .item {  padding-top:2px; padding-bottom:2px;padding-left:15px; color:#000000; border-radius:3px; position:relative;}/*Setting distance arrow to text*/
#mainMenu .item:hover { /*background-color: #c3d18d !important;*/ background-color:#e4e4e4 !important;  cursor: pointer; }
#mainMenu .item.current  { /*background-color: #c3d18d;*/ background-color:#e4e4e4; }
#mainMenu .item.dragMode { background-color:transparent; }/*Color of mainMenu when dragging an item*/
#mainMenu .item.dragHover { background-color:#e4e4e4; }

#mainMenu IMG.arrowIcon { /*padding-right: 4px;*/  position:absolute; left: 0; top:0; width:9px; height:9px; padding: 7px 10px 0 3px; vertical-align:central;overflow:hidden; }/*Positioning the arrow*/
#mainMenu .counterValue { margin-left:8px; font-size:80%; }
#mainMenu .menuLeafNode { /*margin-left:16px;*/ }
#mainMenu #menuItem-actionLists_New, #mainMenu #menuItem-actionContexts_New, #mainMenu #menuItem-actionTags_New, #mainMenu #menuItem-listmainlists/*,  #mainMenu #menuItem-listinbox*//*, #mainMenu #menuItem-listlate,#mainMenu #menuItem-listtoday,#mainMenu #menuItem-listweek,#mainMenu #menuItem-listimportant,#mainMenu #menuItem-listplanned,#mainMenu #menuItem-listcomplete,#mainMenu #menuItem-listlatest*/  {/*color:#6d9b0a;*/ text-transform:uppercase; }

/*Button that opens and hides reference section*/


.guideMinimized {
    width:100%;
    height:4px;
    background-color:#888888;
  background: linear-gradient(top,  #D1D1D1,  #8C8C8C);
  background: -ms-linear-gradient(top,  #D1D1D1,  #8C8C8C);
  display:none;

}

.guideButton {
      cursor:pointer;
  background: #efefef;
  background-image: -webkit-linear-gradient(top, #8c8c8c, #595959);
  background-image: -moz-linear-gradient(top, #8c8c8c, #595959);
  background-image: -ms-linear-gradient(top, #8c8c8c, #595959);
  background-image: -o-linear-gradient(top, #8c8c8c, #595959);
  background-image: linear-gradient(to bottom, #8c8c8c, #595959);
   border-radius: 0px 0px 3px 3px;
  -webkit-border-radius: 0px 0px 3px 3px;
  -moz-border-radius: 0px 0px 3px 3px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  text-align:center;
  font-weight:bold;
  vertical-align:central;
  padding: 2px 13px 5px 13px;
  text-decoration: none;
  width:auto;
  height:20px;
  position:relative;
  z-index:5;
  left:80px;
  box-shadow: 0px 1px 2px #363636;
  -webkit-box-shadow: 0px 1px 2px #363636;
  -moz-box-shadow: 0px 1px 2px #363636;
   display:inline;
   float:left;   }

.guideButton:hover {    opacity:0.6;  /*background: #adaaad;
  background-image: -webkit-linear-gradient(top, #adaaad, #9c999c);
  background-image: -moz-linear-gradient(top, #adaaad, #9c999c);
  background-image: -ms-linear-gradient(top, #adaaad, #9c999c);
  background-image: -o-linear-gradient(top, #adaaad, #9c999c);
  background-image: linear-gradient(to bottom, #adaaad, #9c999c);*/
  text-decoration: none; }

.guideWrapper{    position:relative;    background-color:#efefef; display:none;}
.guideContainer{  background-color:#efefef;}

/*GUIDE SUBPAGES, centered with large margins*/
.example h2 {margin-top:0px; padding-top:0px; /*white-space:normal;*/padding-bottom:10px;   }
#guide .exampleBox  {margin:0px; padding:10px 22px; background-color:#efefef; }
#guide h3 {margin:0px; padding:0px; }
#guide ul li {padding-bottom:10px;}
#guide ol li {padding-bottom:10px;}
/*#guide h2+p{ margin-top:10px;}*/
#guide article+p {color:blue;  font-size:24px;  }
#imgMenu {float:right; margin-left:20px;margin-bottom:50px;padding:0;margin-top:0;}
div.rightColumnMenu { }
div.someFunctions {clear:both;}
    div.someFunctions .premiumCol {margin-left:20px;    }
.standardText {text-transform:uppercase; font-size:80%; margin-bottom:10px;   }

/*Tips box*/
.tipsBox {border: 2px dashed  #3399cc; padding:10px; margin-bottom:20px; min-height:55px; border-radius: 5px; /*float:right; width:300px; margin-left:50px;*/}
.tipsBox IMG.boxIcon {width:45px; height:45px;padding: 5px 20px 5px 8px; float:left;  }
    .tipsBox IMG.boxIcon.lbIcon {height:53px;    }

/*PREMIUM*/

/*Centered headers over the features*/
#premium .premiumCol h3  {text-align:center; font-weight:normal;  }
img.premiumIcon {height:24px; width:24px; vertical-align:middle;}
#premium a {color:#333;}
#premium a.confirmButton {color:white;} 

#premium #premiumIncluded h2, #premium #includedFunctions h3{text-align:center;}
#premium #premiumIncluded img{height:150px; width:auto; display:block; margin-left:auto; margin-right:auto;margin-bottom:20px; }
.allFeatures {margin-top:40px;}
#premium .premiumCol/*, #premium .featureCol*/  { text-align:center;   }
.premiumFeatures a {color:#333; }
.premiumCol ul, .premiumCol ul li {margin:0px 0px 0px 7px; padding:0px;}
.premiumCol ol li, .premiumCol ol {margin:0px 0px 0px 9px; padding:0px;}
.premiumCol img {width:36px; height:36px; display:block;margin:auto; margin-bottom:10px; margin-top:10px;}
.premiumCol:hover{background-color:#efefef;}




/*EXAMPLE*/
#introExample h1 { position:absolute; bottom:50px; left:50px; color:#3399cc;  }
.userExample{position:relative;  }
.userExample img { margin-bottom:0px; height:auto; /*border-radius:10px;*/border: 3px transparent solid;}
.userExample img:hover {opacity:0.6; border: 3px #3399cc solid;}


.userExample h2, #userRolesHome h2  {position:relative;margin-left:15px; left:0px; top:0px; margin:0; display:inline-block;/*text-transform:uppercase;*/  margin-bottom:20px; font-size:24px;color:black;line-height:120%; font-weight:500;white-space:normal;padding-top:10px; }




.highlightWords {color:#3399cc}
.highlightWordsBlack {color:black;}
.userExample .transperantArea {background-color:white;opacity:0.8; width:100%; position:absolute; left:0; bottom:0;height:80px; }
.userExample .transperantArea:hover{opacity:0.8;}

#handleTasksDiv  {border:1px solid #efefef; background-color:#efefef; float:left; }
#handleTasksDiv#workflow{margin:0 auto; width:800px; margin-left:auto; margin-right:auto; }

.articleOverview h2{width:100%; top:60px; text-align:center; position:relative;   }
.articleOverview a {color:#333;}
.articleOverview img{width:100%;height:100%; padding:0; margin:0; display:inline-block;}
.articleOverview:hover,  .articlePresentation img:hover{opacity:0.5;}
.articleOverviewTextLeft2{width:100%; text-align:center;}




/*LISTBANKEN*/
#listbanken {background-color:white;position:relative;}
.bottomLine {border-bottom:2px solid #efefef;}
#listbankenIntro p{position:absolute; top:100px; left:50px;  }
#listbankenIntro {height:300px}
#listbankenInfo {/*background-color:aliceblue;*/ background-color:#efefef; }
#listbankenInfo .selectButton {margin-bottom:30px;    }
#listbankenAreas{padding:30px 30px 30px 30px; background-color:#efefef;}
/*#listbankenAreas .articleOverview h2 {margin-top:40px; text-align:center; }*/
#listbankenContainer{background-color:#efefef;  position:relative; /*clear:both;*/ /*width:100%;*/ padding: 30px; float:left;  }
.listbankenDetails .divListbankenImg {
    width:160px;height:120px; overflow:hidden; margin-right:15px;
}


.articlePresentation, .listbankenOverview {background-color:#efefef;width:640px; height:200px; margin-bottom:30px; float:left; /*margin-right:30px;*/ /*padding:10px;*/ /*width:50%; margin: 0 0 20px 0; display:inline-block; position:relative;margin-right:30px;  float:left;*/ }
.articlePresentation { width:440px;}
.articlePresentation h2, /*.listbankenOverview h2, .listbankenDetails h2*/{margin:0; padding:20px 0 0 0 ; font-size:140%; width:100%; white-space:normal;}
.articlePresentation h2:hover, .listbankenOverview  h2:hover {opacity:1;}
.articlePresentation a, .listbankenOverview a{color:black; text-align:left; /*text-transform:uppercase;*/  }

.articlePresentation .articleDescription {/*background-color:yellow;*/ margin-left:10px;  float:left; }
.articlePresentation .articleDescription:hover{opacity:0.8;}

.listbankenItem{                    }
.listbankenDetails {background-color:white;float:left; width:96%;padding:2%; height:120px;position:relative; /*margin-bottom:20px;*/ margin:0; margin-top:40px;       }
/*.listbankenDetails img{margin-right:15px; border:1px solid #efefef;  }*/
#demo .listbankenDetails img{background-image:url('/cdn/Resources/Cover/Listbanken_mobil.jpg');  background-repeat: no-repeat; background-size:160px 120px; height:auto;  }
#julplanering .listbankenDetails img{background: url('/cdn/Resources/Photos/julplanering.jpg');background-repeat: no-repeat; background-size:160px 120px; height:auto;  }
#bokforing .listbankenDetails img{background-image:url('/cdn/Resources/Photos/bokforing.jpg'); background-repeat: no-repeat;  background-size:160px 120px;  height:auto; }
#packlistor .listbankenDetails img{background-image:url('/cdn/Resources/Photos/packlistor_saveyourday.jpg');  background-repeat: no-repeat; background-size:160px 120px;height:auto; }
#brollop .listbankenDetails img{background-image:url('/cdn/Images/shutterstock_113785513.jpg');  background-repeat: no-repeat; background-size:160px 120px;height:auto; }
/*SHOW LIST DOWNLOAD LIST*/
.listbankenDetails a.textButton.confirmButton{display:inline-block; margin-right:10px; width:150px;margin-top:10px;}

.listbankenList{background-color:white; /*clear:both;*/ display:none; float:left;width:100%;  } 
.listbankenList p {font-weight:bold;padding-left:15px; } 
.listbankenList ul{list-style-image:url('/cdn/Resources/Images/unchecked_18x18.png'); padding-left:50px; }
.listbankenList li{line-height:32px;}

.listbankenBgContainer {position:relative; }

/*METHOLOGY*/


/*METHOLOGY SUB PAGES

    
/*Numbered lists in articles*/


#guide ul.check-marker-list li {
padding-left:30px;
   background: url('/cdn/Images/blue_check_marker.png') no-repeat ;
    /*list-style-image: url('/cdn/Images/green_check_marker.png');*/
    background-size:18px;
    background-position-y:4px;

}

ul.check-marker-list{
    list-style-image: none;
    list-style-type:none;
   padding-left:20px;
}




 
ol.rounded-list {
     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';*/
    /*font-size:15px;*/
    /*font-family:Arial, sans-serif;*/
    padding: 0 0 0 20px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
 #guide  .rounded-list li h2, .rounded-list li h2{ position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #efefef;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;  
    font-size:18px;
    
    }
 .rounded-list li h2:hover {   background: #eee;     }

  .rounded-list li h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: /*#87ceeb;*/#3399cc;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

    .rounded-list li h2, .rounded-list li h2:hover, .rounded-list li h2:hover::before {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

/*SUBPAGES LISTBANKEN AND METODIK*/
#introArticle .oneThirdCol {background-color:#efefef;}
#listbanken #introArticle .oneThirdCol {background-color:white;}
#introArticle h1 {position:relative; color:black; line-height:1.2;margin-bottom:10px;margin-top:10p; }


 /* FOOTER */
#baseFooter{ font-size:12px; text-align:left; color:black; background-color:#d3d3d3;box-shadow: -15px 0 15px -15px #888, 15px 0 15px -15px #888; float:left; }
#linkContainer { float:left;  }
#copyrightContainer{background-color: rgba(53, 53, 53, 1);background-color:#3399cc; color: white; height:20px; padding:10px 60px; position: relative; bottom:0px; clear:both;  margin:0px;   }
.alignRight {text-align:right;  float:right; padding-right:35px;}
p.headerP { margin-bottom:5px; font-size:16px;}
div.linkColumn a{color: black; display:block; font-weight:normal; font-size:12px; padding-bottom:5px;  }

div.linkColumn a.socialLink{display:inline-block;padding-top:10px;  }
#linkContainer a.loginButton,  #linkContainer a.createButton{ margin-top:20px;border-color:transparent; position:relative; top:0; right:0; float:left; display:inline-block;}
#linkContainer a.createButton{ margin-left:15px; /*background-color:#99cc33;*/}
#linkContainer input,#linkContainer button  {margin-top:10px; display:block; padding:5px;/*font-size:11px;*/}

/*Addind IOS toggle support*/
.hide { display: none !important; }


/*OLD - Maybe used in news. Don't delete. Lists under get started menu*/
 .marketingList ul { list-style-type:square; list-style-image:url('/cdn/Resources/Images/checked_18x18.png'); }
 .readMore {display:none;}
 .screenshot {border: 1px solid black; border-radius:3px; }
.screenshot.shadow { box-shadow:10px 10px 5px #888888;    }


/*METODIK /TIPS /OM SAVEYOURDAY*/

/*Headers used in articles with green surrounding and an image before the header. Example:  <div class="infoBox">
<div class="infoBoxHeader confirmButton"><h2>Bli effektivare - utveckla listskrivandet</h2></div>*/
h1 IMG { width:20px; height:20px;  }
.infoBox {position:relative; margin-bottom:20px; clear:both;}
.infoBoxHeader {height:45px; border-radius: 5px; position:relative; margin-bottom:10px;  } 
.infoBox .infoBoxHeader IMG{ height:35px; width:35px; position:absolute; top:5px; left:10px; padding:0px;}
.infoBox H2 {padding:15px 0px 0px 60px; height:25px; position:relative; font-family:"Bentonsansbold", arial, sans-serif; color: black; text-transform:uppercase;  }
.infoBox IMG {height:18px; width:18px; }




#areaContainer {background-color:#efefef; float:left; position:relative; }
#areaContainer.fullWidth {width:100%;    }
#areaContainer .oneThirdCol img:hover{ opacity:0.5; }
/*Heading for Read more.*/
.step h3.MoreArticles, h3.MoreArticles {padding-left:15px; font-weight:normal; font-size:14px; }
h3.MoreArticles{padding-left:0;}


/*WORK FLOW - Article pages*/
#workflow {padding-bottom:20px; margin-bottom:40px; width:100%; position:relative; height:100px;}
#workFlowIntro p{margin-top:10px;}
#workFlowIntro2 { height:300px;/*background-color:aliceblue;*/ padding:0 30px;background-color:#efefef;}
#workflow a, #workflow a:hover {display:block; float:left; margin-right:20px; margin-top:20px;  margin-bottom:20px; background-color:#efefef;border-radius: 50%;padding:40px 0px; width:100px; height:20px; font-size:12px; color:#3399cc; text-transform:uppercase; text-decoration:none; text-align:center;}
#workflow a:hover {color:white; opacity:0.8;background-color:#3399cc;}
#workflow h2 {font-size:12px; font-weight:normal; color:white;}
#workflow a.currentLink {color:white; opacity:0.8;background-color:#3399cc;}



/*WORK FLOW + links to articles - Only valid on the overview on the methology page*/
#workflow .step {display:inline-block;  background-color:aliceblue; }
#workflow .step h2 {font-size:16px; font-weight:normal;}
#workflow .step a {/*color:red;*/ float:none;margin-left:20px;width:140px;padding: 60px 0; color:white;  }
#workflow .step ul a, ul.linkArticles a { float:none;margin-left:0; display:inline; background-color:transparent; border-radius: 0;padding:0;  font-size:14px;color:#00588b; text-transform:none; text-align:left; }
#workflow ul, ul.linkArticles {padding-left:15px; margin:0; list-style-type:none; padding-top:10px;}
#workflow li {}
#workflow .step ul a:hover {color:#3399cc; opacity:1;background-color:transparent; text-decoration:underline;}
/*ul.linkArticles a {font-size:14px;}*/












/*Css inkopierad från wordpress 2014-05-07*/

/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/


.exampleList ul {
	list-style-type: none;
/*list-style-type: circle;
	list-style-image: url("/wp-content/uploads/2014/02/unchecked.png");*/
	padding: 0;
	padding-left: 0px;
	margin: 0;
}

.exampleList li {

	padding-left: 25px;
	padding-bottom: 10px;
   
	background: url('/cdn/Resources/Images/unchecked.png') no-repeat 0 0; 
    background-size:18px;
    vertical-align:middle;
}

.exampleList {
	background-color: #efefef;
	font-size: 80%;
	width: 200px;
	float: left;
	border: 1px solid grey;
	border-radius: 3px;
	margin: 10px 20px 20px 0;
	padding: 10px; padding-left:20px;
	background-color: none;
	box-shadow: 10px 10px 5px #888888;
}

.overview {
	background-color: lightblue;
}

.wide {
	width: 80%;
}

#guide h2, #guide h3, #guide #H4 {   white-space:normal;
}

.exampleList h3, .exampleList H2, .exampleList h4 {
	padding-left: 25px;
	font-weight: bold;
	font-size: 130%;
    line-break:loose;
    white-space:normal;
}

.exampleList .late {
	color: red;
}

.exampleList .important {
	font-weight: bold;
}

.exampleList .later {
	color: lightgray;
}

.exampleList .date {
	font-size: 60%;
	padding-left: 10px;
	text-align: right;
}

.exampleList .listLink {
	font-size: 60%;
	padding-left: 10px;
	color: #6d9b0a;
}


/*News section*/
.homeNewsItem .screenshot
.textButton:hover, .linkButton:hover {
	text-decoration: none;
	opacity: .8;
}

.wp-caption {
	background: none;
}

.textSection {
	width: 100%;
	clear: both;
}



.quote {
    padding: 0px 25px;
    font-style:italic;
}
.exampleListInfo {clear:both;padding-left:25px;}

/* Below - panels*/


#container {
    width:100%;
    margin:0;
    margin-top:30px;

}
/* --------- COLLAPSIBLE PANELS ----------*/
.expandable-panel {
    width:100%;
    position:relative;
    min-height:50px;
    overflow:auto;
    margin-bottom: 20px;
    border:1px solid #999;
    border-radius:5px;
}
.expandable-panel-heading {
    width:100%;
    cursor:pointer;
    min-height:50px;

     clear:both;
    background-color:#E5E5E5;
    position:relative;
}
.expandable-panel-heading:hover {
    color:#666;
}
.expandable-panel-heading h2 {
    padding:14px 10px 9px 15px;
    font-size:18px;
    line-height:20px;
}
.expandable-panel-content {
    padding:0 30px;
    margin-top:-999px;
}
.expandable-panel-content p {
    padding:4px 0 6px 0;
}
.expandable-panel-content p:first-child {
    padding-top:10px;
}
.expandable-panel-content p:last-child {
    padding-bottom:15px;
}
.icon-close-open {
    width:20px;
    height:20px;
    position:absolute;
    background-image:url(http://i.imgur.com/Ir4S1H7.png);
    right:15px;
}

/*Lägger till styling content listbaken datum*/
.taskDate {
    float: right;
    font-size: 80%;
    padding-right: 10px;
}




/*Saving due stop background colors suggestions*/
#homeWide .slider-wrapper { position:relative;    margin: 0px 0px 0px 0px; padding: 30px 30px 0px 30px; height:368px;background:#efefef;



/*Until 20150909*/
                       
/*background: rgb(157,204,63); 
background: -moz-radial-gradient(center, ellipse cover,  rgba(157,204,63,1) 4%, rgba(153,204,51,1) 28%, rgba(130,155,66,1) 98%);*
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(4%,rgba(157,204,63,1)), color-stop(28%,rgba(153,204,51,1)), color-stop(98%,rgba(130,155,66,1))); 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(157,204,63,1) 4%,rgba(153,204,51,1) 28%,rgba(130,155,66,1) 98%);
background: -o-radial-gradient(center, ellipse cover,  rgba(157,204,63,1) 4%,rgba(153,204,51,1) 28%,rgba(130,155,66,1) 98%); 
background: -ms-radial-gradient(center, ellipse cover,  rgba(157,204,63,1) 4%,rgba(153,204,51,1) 28%,rgba(130,155,66,1) 98%);
background: radial-gradient(ellipse at center,  rgba(157,204,63,1) 4%,rgba(153,204,51,1) 28%,rgba(130,155,66,1) 98%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc3f', endColorstr='#829b42',GradientType=1 );*/ 


/*Himmelsblått, första ursprungligt, nästa försök göra ljusare*/
 /*background:linear-gradient(to right, rgb(112, 184, 219) 0%, #cadfe8 100%);*/    
  /*background:linear-gradient(to right, #a4cee2 0%, #cadfe8 100%);*/    
/*Linus förslag - visar inget alls?!*/
/*background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9))); background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));*/

/*Turkos 
linear-gradient(to right, rgb(112, 184, 219) 0%, rgb(41, 122, 163) 100%)*/              



 /*mossgrön - background: rgb(255,252,252); 
background: -moz-linear-gradient(45deg,  rgba(255,252,252,1) 0%, rgba(153,204,51,1) 38%, rgba(127,163,44,1) 63%, rgba(101,145,0,1) 86%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,252,252,1)), color-stop(38%,rgba(153,204,51,1)), color-stop(63%,rgba(127,163,44,1)), color-stop(86%,rgba(101,145,0,1)));  
background: -webkit-linear-gradient(45deg,  rgba(255,252,252,1) 0%,rgba(153,204,51,1) 38%,rgba(127,163,44,1) 63%,rgba(101,145,0,1) 86%);  
background: -o-linear-gradient(45deg,  rgba(255,252,252,1) 0%,rgba(153,204,51,1) 38%,rgba(127,163,44,1) 63%,rgba(101,145,0,1) 86%);  
background: -ms-linear-gradient(45deg,  rgba(255,252,252,1) 0%,rgba(153,204,51,1) 38%,rgba(127,163,44,1) 63%,rgba(101,145,0,1) 86%);  
background: linear-gradient(45deg,  rgba(255,252,252,1) 0%,rgba(153,204,51,1) 38%,rgba(127,163,44,1) 63%,rgba(101,145,0,1) 86%);  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#659100',GradientType=1 );*/  
 


                     
                            
/*Ljusgrönare variant                            
background: #99cc33; background: #fffcfc;  Old browsers 
background: -moz-linear-gradient(45deg,  #fffcfc 0%, #92cc20 56%, #72aa00 90%);  FF3.6+ 
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fffcfc), color-stop(56%,#92cc20), color-stop(90%,#72aa00));  Chrome,Safari4+ 
background: -webkit-linear-gradient(45deg,  #fffcfc 0%,#92cc20 56%,#72aa00 90%);  Chrome10+,Safari5.1+ 
background: -o-linear-gradient(45deg,  #fffcfc 0%,#92cc20 56%,#72aa00 90%);  Opera 11.10+ 
background: -ms-linear-gradient(45deg,  #fffcfc 0%,#92cc20 56%,#72aa00 90%);  IE10+ 
background: linear-gradient(45deg,  #fffcfc 0%,#92cc20 56%,#72aa00 90%);  W3C 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#72aa00',GradientType=1 );  IE6-9 fallback on horizontal gradient*/ 
 }