/******************************************************************************
*******************************************************************************
*******************************************************************************

RESPONSIVE

*******************************************************************************
*******************************************************************************
******************************************************************************/

@media (max-width: 770px) { /* BOTH TABLET AND PHONE */

/******************************************************************************
= resets
******************************************************************************/

/* widths */

img,
#content,
div.col1,
div.col2,
div.col3,
div.col4,
.logoHomeLink a,
.mainMenu a span,
.mainMenu ul li:first-child ul span,
div#loginMainBox,
div.loginBtnWorkArea,
.leftCol,
.mainAndRightCol,
.mainCol,
.mainBody,
.rightCol,
ul.documentlist div,
ul.documentlist div:first-child,
.sectionpageColumn,
.sectionpageColumn1,
.sectionpageColumn2,
.sectionpageColumn3,
div.contactItem div.contactItemText
{
	width: auto;
	max-width: 100%;
	min-width: 0;
}



/* heights */

img,
table,
.logoHomeLink a,
.mainMenu a span,
div.loginBtnWorkArea,
.loginBtnSub p,
.GreyPinkUnderline ul a,
.PinkWhite ul a,
.GreyPinkUnderline ul a:visited,
.PinkWhite ul a:visited,
div.col2 div.GreyPinkUnderline h2, 
div.col2 div.PinkWhite h2,
div.col3 div.GreyPinkUnderline h2, 
div.col3 div.PinkWhite h2,
.tools li a,
.tools li a:visited,
.shadowpadding,
.mainContent blockquote,
div#topLinksArea div.linkBox,
div#contactItemsArea div.contactItem,
div.contactItem div.contactItemIcon,
div.contactItem div.contactItemText
{
	height: auto;
	max-height: none;
	min-height: 0;	
}



/* large margin / padding */

.mainMenu
{
	margin-top: 0;
}

.quicksearch .submit,
.tools li a span
{
	margin-left: 0;
}

.mainCol
{
	margin-right: 0;
}

.searchpagerightcolumn,
.siteMap
{
	padding-top: 0;
}



/* floats */

div.col1,
div.col2,
div.col3,
div.col4,
div.list,
.tools,
.tools img,
.regularList li a,
.list a.showAll,
.leftCol,
.mainAndRightCol,
.mainCol,
.mainBody,
.rightCol,
ul.documentlist div,
.sectionpageColumn,
.chartbuttonarea input.chartbuttonleft,
.chartbuttonarea input.chartbuttonright,
div.contactItem div.contactItemIcon,
div.contactItem div.contactItemText,
div.contactItem div.contactItemMethod,
.flexigrid .fgRow,
.flexigrid .fgCell
{
	float: none;	
}



/* overflow */

div.topRow,
div.bottomRow,
.flexigrid .shadowpadding,
.showlines li,
.tools li,
.regularList li,
.mainContent ul.documentlist li,
.flexigrid,
.sectionpageColumn ul,
.siteMap ul,
.regulation table,
div#QAArea div.question,
div#topLinksArea div.linkBox,
.flexigrid .fgRow,
.flexigrid .fgCell,
.flexigrid .fgCell .fgInner,
.mainCol,
.mainBody 
{
	overflow: visible;
}



/* positioning (absolute, fixed)
some may be used to hide things */

.mainMenu ul ul,
.cfs_livesearchList,
.toolsWrapper h2,
.print
{
	position: static;
}



/******************************************************************************
= hard resets (mainly for inline styles)
******************************************************************************/

.mainCol img[style*=height] { /* max-width overrides width */
	height: auto !important;
}



/******************************************************************************
= hidden
******************************************************************************/

.hiddenTxt,
.textSize,
.toolsWrapper h2,
.print,
.mainMenu ul ul /* top menu expansion level */
{
	display: none;
}



/******************************************************************************
= iOS specific
******************************************************************************/

#content input[type=text],
#content input[type=password],
#content input[type=button],
#content input[type=submit]
{
	-webkit-appearance: none;
	border-radius: 0;
}



/******************************************************************************
= framework 
******************************************************************************/

#content { /* wraps all, including header and footer */
	margin: 0;
}

.leftCol,
.mainAndRightCol {
	padding: 0;
}

.ArticlePage .mainAndRightCol {
	min-height: 0;
}

.mainBody {
}

.rightCol {
	position: static;
	clear: both;
	background: none;
	padding: 40px 0 0 0;
}



/******************************************************************************
= topmenu
******************************************************************************/

.topmenu li li a:hover:before,
.topmenu li li.active a:before {
	display: none;
}



/******************************************************************************
= footer
******************************************************************************/

.footer > div {
	border-top: 1px solid rgb(220,218,216);
	padding-top: 10px;
}

.footer .tool-links li {
	margin-bottom: 5px;
}

.footer .news li, 
.footer .shortcuts li {
	margin-bottom: 15px; 
}

.footer .more a {
	margin: 0;
}



/******************************************************************************
= webparts flexigrid piece of crap
******************************************************************************/

.flexigrid,
.flexigrid .fgCell,
.flexigrid .fgCell .fgInner
{
	width: auto !important;	/* override inline style */
}

.flexigrid .fgCell {
	margin-bottom: 30px; /* originally insane values */
	padding-bottom: 0; 
}



/******************************************************************************
= misc
******************************************************************************/

.mainContent .introText,
.mainContent .ingress {
	padding-right: 0;
	font-size: 1.3em;
}

#content .list ul,
#content .tools ul {
	margin-right: 0;
}

.regularList li {
	padding-left: 0;
	padding-right: 0;
}

.relatedLinks {
	padding-left: 0;
}

.relatedLinks li {
	margin-bottom: 10px;
}

ul.documentlist,
.mainContent ul.documentlist {
	padding-left: 0;	
	min-width: 0;
}

.showlines li {
	background-image: none; /* originally faux bg image lines */
	border-bottom: 1px solid rgb(220,218,216);
}

div.PinkWhite h2,
div.col3 div.GreyPinkUnderline h2, /* illogical, but follows original css */
div.col3 div.PinkWhite h2 {
	background: #9a4d9e; /* originally angled bg images */
}



/* toplinksarea (fat links used in contact area etc) */

div#topLinksArea {
	float: none;
	width: auto;
}



/* QAArea (accordion module) */

#content #QAArea {
	float: none;
	width: auto;
}

#content #QAArea .question {
	padding-right: 10px;
}

#content #QAArea .question h2 {
	background-position: right;
}

div#QAArea div.question h2:hover {
    background-color: transparent;
}

div#QAArea div.question:hover h2 {
	color: inherit;
}



/******************************************************************************
= local (left) menu
******************************************************************************/

.localMenu a {
	margin-bottom: 15px;
}



/******************************************************************************
= rows
******************************************************************************/

.StartPage .apply-options .inner {
	width: auto;
}

.StartPage .apply-options .actions {
	min-width: 0;
}

#content .apply-options .actions li {
	margin-right: 30px;
}

.StartPage .apply-options.short .actions strong {
	margin-bottom: 0;
}

.StartPage .apply-options img {
	display: none;
}



/******************************************************************************
= actions, buttons
******************************************************************************/

#content .actions strong {
	font-size: 1.1em;
	background-position: left 2px;
}

.subPageBoxContainer,
.buttons li {
	display: block;
	width: auto;
}

.subPageBox,
.subPageBoxTall,
.buttons a  {
	height: auto !important; /* override js equalheight function */	
	min-height: 0;
}

.buttons a {
	padding-bottom: 20px;
}



/******************************************************************************
= login-info 
******************************************************************************/

.StartPage .login-info ul {
	width: auto;
	margin-right: 0;
}



/******************************************************************************
= list2
******************************************************************************/

.column.one .list2 li {
	margin-right: 0;
}



/******************************************************************************
= row boxflow (deadlines, video, banner, etc)
******************************************************************************/

.deadlines li,
div.GreyPinkCalendar li {
	margin-bottom: 15px;
	line-height: 1.4;
}



/******************************************************************************
= guidance
******************************************************************************/

.guidance {
	margin-right: -10px;
}

#content .guidance h2,
.guidance ul {
	margin-right: 0;
}

#content .guidance h2,
.guidance ul,
.guidance p {
	display: block;
	max-width: none;
}

.guidance ul {
	margin-bottom: 15px;
}

.guidance p {
	margin-left: 12px;
}

.guidance p a {
	margin-bottom: 10px;
}



/******************************************************************************
= table overflow handling.
******************************************************************************/

/* enable side-scrolling in tables (doens't work on old devices / OS) */

#content table { 
	border: none;
	display: block;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch; /* iOS scroll improvement */
	height: auto !important; /* override inline styles */
	width: 100%;
	padding-right: 10px; /* overflow content padding when needed */
}






} /* end @media BOTH TABLET AND PHONE ****************************************
******************************************************************************
******************************************************************************

= TABLET

******************************************************************************
******************************************************************************
******************************************************************************/



/* IPAD EXCEPTIONS */

@media (max-width: 770px) and (min-width: 750px) { 

/* top image */

.StartPage .apply-options .inner {
	width: 2000px; /* reverted */
}

.StartPage .apply-options .actions {
	min-width: 420px; /* keep image right */
}

.StartPage .apply-options.short img {
	display: inline-block;
}

} /* end IPAD EXCEPTIONS */



@media (max-width: 770px) and (min-width: 600px) { 

/******************************************************************************
= topmenu
******************************************************************************/

.topmenu {
	position: relative;
	z-index: 5;
}

.topmenu .group1 > a {
	display: inline-block;
	background: url('/search/nb/20070603210204oe_/http://www.lanekassen.no/images/burger.svg') no-repeat 10px center;
	-webkit-background-size: 23px auto;
			background-size: 23px auto;
	padding-left: 43px;
}

.no-svg .topmenu .group1 > a {
	background-image: url('/search/nb/20070603210204oe_/http://www.lanekassen.no/images/burger.png');
}

.topmenu .group1 ul {
	position: absolute;
	left: 0;
	background: #97469D;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s;
			transition: opacity .3s;	
}

.topmenu.tablet_open .group1 ul { /* js toggled class */
	visibility: visible;
	opacity: 1;
}

.topmenu .group1 ul li {
	padding: 5px;
}

.topmenu .group1 ul li a {
	color: #fff;
}

.topmenu li li a:hover {
	text-decoration: underline;
}

.topmenu li li.active a {
	font-weight: bold;
}



/******************************************************************************
= footer
******************************************************************************/

#content .footer > div {
	width: 45%;
	margin: 0 0 30px 0;
}

#content .footer > div:nth-child(odd) {
	margin-right: 5%;	
}



/******************************************************************************
= framework
******************************************************************************/

.leftCol {	
	float: left;
	width: 28%;
	padding: 0 10px 10px 10px;
}

.mainAndRightCol {	
	float: right;
	width: 65%;
	padding: 0 10px 0 0;
}

.rightCol .boxflow > a,
.rightCol .boxflow > div {
	display: inline-block;
	vertical-align: top;
	width: 46%;
	margin-right: 3%;
}

.rightCol .boxflow > *:first-child {
	margin-top: 0;
}

h1 {
	font-size: 1.8em;
}



/******************************************************************************
= local (left) menu
******************************************************************************/

.localMenu {
	padding-left: 5px;
}

.localMenu h2 {
	margin-bottom: 15px;
}



/******************************************************************************
= rows and columns
******************************************************************************/

.ArticlePageWide .column.one,
.ArticlePageWide .column.two { 
	width: 46%;
}



/******************************************************************************
= row boxflow (deadlines, video, banner, etc)
******************************************************************************/

.row.boxflow > div,
.row.boxflow > a {
	width: 46%;
	min-height: 193px;
}

.row.boxflow .video iframe {
	width: 100%;
	height: 193px;
}



/******************************************************************************
= rightCol
******************************************************************************/

.rightCol .video iframe {
	width: 100%;
	height: 130px;
}

.rightCol .banner {
	min-height: 130px;
}






} /* end @media TABLET *******************************************************
******************************************************************************
******************************************************************************

= PHONE

******************************************************************************
******************************************************************************
******************************************************************************/

@media (max-width: 600px) { 



/******************************************************************************
= hidden
******************************************************************************/

.funcMenu a,
#content .login span
{
	display: none;
}



/******************************************************************************
= video
******************************************************************************/

#content .video iframe,
iframe[src*=vimeo],
iframe[src*=youtube] {
	width: 100%;
	height: 180px;
}



/******************************************************************************
= header
******************************************************************************/

.header .funcMenu {
	padding-top: 20px;
}

.header .funcMenu li {
	border: none;
	padding: 0;
	margin: 0;
}

.header .funcMenu .language {
	display: inline;
}

.header .funcMenu li:nth-last-child(2) {
	border-left: 1px solid rgb(220,218,216);
	padding-left: 12px;
	margin-left: 10px;
}

.logoHomeLink {
	clear: none;
	margin: 7px 10px 7px 17px;
	width: 130px;
	max-width: 40%;
}



/* search */

.header .quicksearch {
	float: none;
	clear: both;
	font-size: 1.2em;
	text-align: center;
	padding: 0;
	overflow: hidden;
	height: 0;
	-webkit-transition: height .3s;
			transition: height .3s;	
}

.quicksearch.mobile_open { /* js toggled class */
	height: 60px;
	overflow: visible;
}

.quicksearch fieldset {
	border-top: 1px solid rgb(220,218,216);
	padding-top: 15px;
}

.quicksearch .cfs_autosuggestList {
	text-align: left;
}

.searchResult input[type=text] {
	width: 200px;
}



/******************************************************************************
= topmenu
******************************************************************************/

.topmenu {
	overflow: hidden;
	position: relative;
	z-index: 5;
}

.topmenu .group1,
.topmenu .group2 {
	background: #97469D;
	text-align: left;
	float: left;
}

.topmenu .group2 {
	margin: 0;
}

.topmenu .group1 li,
.topmenu .group2 {
	width: 100%;
	height: 0;
	-webkit-transition: height .3s;
			transition: height .3s;
}

.topmenu.mobile_open .group1 li, /* js toggled class */ 
.topmenu.mobile_open .group2 { 
	height: 50px;
}

.topmenu .group1 a,
.topmenu .group2 a {
	border-top: 1px solid rgba(255,255,255, .3);
	padding: 15px 10px;
	color: #fff;
}

.topmenu .group3 {
	float: none;
	position: absolute;
	right: 0;
}

.topmenu li a:hover {
	text-decoration: underline;
}

.topmenu .active a {
	font-weight: bold;
}

#content .header a.login.alternate {
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 0;
}



/* js generated buttons */

#btn_topmenu, 
#btn_search {
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 65%;
			background-size: auto 65%;
	padding: 19px 27px;
	border-right: 1px solid rgb(220,218,216);
}

#btn_topmenu {
	background-image: url(/search/nb/20070603210204oe_/http://www.lanekassen.no/images/burger.svg);
}

#btn_search {
	background-image: url(/search/nb/20070603210204oe_/http://www.lanekassen.no/images/search.svg);
}

.no-svg #btn_topmenu {
	background-image: url(/search/nb/20070603210204oe_/http://www.lanekassen.no/images/burger.png);
}

.no-svg #btn_search {
	background-image: url(/search/nb/20070603210204oe_/http://www.lanekassen.no/images/search.png);
}



/******************************************************************************
= footer
******************************************************************************/

#content .footer > div {
	display: block;
	width: auto;
	margin: 0 0 40px 0;
}

#content .footer > div:first-child {
	border: none;
	padding: 0;
}



/******************************************************************************
= localMenu (left)
******************************************************************************/

.localMenu {
	background: rgb(246,244,242);
	border-top: 1px solid rgb(220,218,216);
	border-bottom: 1px solid rgb(220,218,216);
	margin-top: -1px; /* border overlap */
	position: relative;
	padding: 10px 10px 10px 57px;
	overflow: hidden;
	height: 20px;
	-webkit-transition: padding-top .3s;
			transition: padding-top .3s;
}

.localMenu.mobile_open { /* js controlled */
	height: auto;
	overflow: visible;
	padding-top: 55px;
	padding-left: 10px;
}

.localMenu:not(.mobile_open) h2 {
	font-size: 1.1em;
	padding-left: 10px;
}

.localMenu:not(.mobile_open) a { /* shows first menu item if no h2 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.localMenu:not(.mobile_open) a:before {
	display: none;
}

.localMenu.mobile_open h2 a {
	padding-left: 10px;
}

.localMenu.mobile_open h2 a:before {
	content: "‹";
	font: 1.4em/.9 arial, sans-serif;
	display: block;
	left: -3px;
}

.btn_localmenu {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 40px;
	width: 100%;
	z-index: 2;
}

.btn_localmenu:before {
	content: "";
	position: absolute;
	left: 22px;
	top: 12px;
	border-style: solid;
	border-width: 8px;
	border-color: transparent transparent transparent #000;
	z-index: 2;
}

.localMenu.mobile_open .btn_localmenu:before {
	border-color: #000 transparent transparent transparent;
	left: 18px;
	top: 16px;
}

.btn_localmenu:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 55px;
	height: 40px;
	background: rgb(220,218,216);
}



/******************************************************************************
= breadcrumbs
******************************************************************************/

#breadCrumb {
	display: none;
}



/******************************************************************************
= framework
******************************************************************************/

.mainAndRightCol {	/* main content holder on most pages (not front) */
	padding: 10px;
}

.leftCol {
	margin-bottom: 0;
	clear: both;
}

h1 {
	font-size: 1.6em;
}



/******************************************************************************
= rows and columns
******************************************************************************/

.row h1 {
	margin-top: 10px; /* due to no breadcrumbs */
}

#content .column {
	float: none;
	width: auto;
}

.column.one {
	padding-right: 2%;
}

.column.two {
	border-top: 1px solid rgb(220,218,216);
	background: none;
	padding-left: 2%;
}

.StartPage .column.two {
	border-radius: 0;
}



/* apply-options */

.apply-options {
	background: rgb(246,244,242);
}

.StartPage .apply-options {
	border-top: 1px solid #fff;
	border-bottom: 1px solid transparent;
	padding: 10px;
}

.column .apply-options {
	padding: 20px 10px;
	border: none;
	-webkit-box-shadow: 0px 1px 3px #aaa;	
			box-shadow: 0px 1px 3px #aaa;	
}

.ArticlePageWide .apply-options {
	margin-top: 5px;	
}

#content .apply-options .intent {
	font-size: 1.1em;
	margin: 0;
	cursor: pointer;
}

.apply-options .intent span { /* extra heading text for mobile */
	display: inline;
}

.apply-options .intent:before {
	content: "";
	border-style: solid;
	border-width: 8px;
	border-color: transparent transparent transparent #000;
	margin-right: 14px;
	margin-left: 8px;
	vertical-align: baseline;
}

.apply-options.mobile_open .intent:before {
	border-color: #000 transparent transparent transparent;
	vertical-align: bottom;
}

#content .apply-options .warning,
#content .apply-options .actions,
#content .apply-options .action,
#content .apply-options .endlinks {
	display: none; 
}

#content .apply-options.mobile_open .warning,
#content .apply-options.mobile_open .actions,
#content .apply-options.mobile_open .action,
#content .apply-options.mobile_open .endlinks { /* toogleclass js */
	display: block;
}

.apply-options .warning {
	padding: 20px 0;
}

.StartPage .apply-options .warning {
	border-bottom: 1px solid rgb(220,218,216);
}

.apply-options .warning strong {
	background: #e00;
	color: #fff;
	padding: 1px 3px;
	border-radius: 4px;
}

.StartPage .apply-options .actions {
	margin-bottom: 20px;
}

#content .apply-options .actions li {
	display: block;
	margin: 0;
	padding: 20px 0;
}

.StartPage .apply-options .actions li {
	border-bottom: 1px solid rgb(220,218,216);
}



/******************************************************************************
= login-info 
******************************************************************************/

.StartPage .login-info {
	padding: 0 0 20px 5px;
}

.ArticlePageWide .login-info {
	border-top: none;
}

.login-info ul {
	min-width: 90%; /* break button underneath */
}



/******************************************************************************
= list2
******************************************************************************/
	
#content .list2 li {
	display: block;
	width: auto;
}



/******************************************************************************
= row boxflow (deadlines, video, banner, etc)
******************************************************************************/

.row.boxflow > div,
.row.boxflow > a {
	display: block;
	width: auto;
	margin-left: 0;
	min-height: 0;
}



/******************************************************************************
= guidance
******************************************************************************/

.guidance {
	margin-left: -10px;
	padding: 20px 10px;
	border-radius: 0;
}



/******************************************************************************
= table overflow handling.
******************************************************************************/

/* js expandview button */

.expandview {
	display: block;
	float: right;
	margin: 0 -15px 5px 0; /* can use neg top margin to reduce spacing */
	width: 40px;
	height: 40px;
	background: #000;
	color: #fff;
	border-radius: 50px 0 0 50px;
	text-align: center;
	position: relative;
	z-index: 2;
}

.expandview:after {
	content: "›";
	font: 36px/34px arial, sans-serif;
}



/* overflow_open class. toggled with expandview button. */

body.overflow_open .mainAndRightCol,
body.overflow_open #content table {
	overflow: visible;
}

body.overflow_open .mainAndRightCol {
	zoom: .7;
}

body.overflow_open #content table {
	display: table;
}

body.overflow_open .expandview:after {
	content: "‹";
}



/* ways to disable expand function */

#content table.noexpand {
/*
- add this class to a table to disable expand function
- adding CSS "overflow: hidden" to a table also disables expand function
*/
}






} /* end @media phone ********************************************************
******************************************************************************
******************************************************************************

= DEVICE SPECIFIC FOR TABLET AND MOBILE

******************************************************************************
******************************************************************************
******************************************************************************/

@media (max-device-width: 1000px) {

.globalMenu li.fontsize { /* hide font size info */ 
	display: none;
}



} /* end @media device specific */