@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Basic */

	body {
		background: #fff;
	}

	body, input, select, textarea {
		color: #a2a2a2;
		font-family: 'Open Sans', Helvetica, sans-serif;
		font-size: 10pt;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #787878;
		text-decoration: none;
	}
	
	#language a {
		border:none;
		-moz-transition: -webkit-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
		-webkit-transition: -webkit-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
		-o-transition: -webkit-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
		-ms-transition: -webkit-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, filter 0.2s ease-in-out;
		-webkit-filter: grayscale(1);
  		filter: grayscale(1);
	}
	
	#language a.active {
		-webkit-filter: grayscale(0);
  		filter: grayscale(0);
	}

	a:hover {
		border-bottom-color: transparent;
		color: #39c !important;
		text-decoration: none;
	}
	
	#language a:hover {
		-webkit-filter: grayscale(0);
  		filter: grayscale(0);
	}

	strong, b {
		color: #787878;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}
	
	article p {
		margin: 0 0 1em 0;
	}
	
	article p:last-child {
		margin: 0 0 4em 0;
	}
	
	article p:last {
		margin: 0 0 1em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #787878;
		line-height: 1em;
		margin: 0 0 1em 0;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}

	h1 {
		font-size: 2em;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.25em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 2px #efefef;
		margin: 2em 0;
	}
	
	.right {
			float: right;
	}
	
	.clear{clear:both}


/* Header */

	#header {
		background-color: #1f1815;
		background-attachment: scroll, fixed;
		background-image: url("../images/bg.jpg");
		background-position:  top left;
		background-repeat: no-repeat;
		background-size: 100%;
		color: rgba(255, 255, 255, 0.5);
		left: 0;
		padding: 0;
		text-align: left;
		top: 0;
		width: 100%;
	}

	#header strong, #header b {
		color: #ffffff;
	}

	#header h2, #header h3, #header h4, #header h5, #header h6 {
		color: #ffffff;
	}

	#header h1 {
		color: rgba(255, 255, 255, 0.5);
		font-size: 1.2em;
		margin: 0 0 .5em 0;
	}
	
	#header .logoContainer {
		padding:2em;
	}
	
	#header .loginContainer {
		padding:2em 2em 1em 2em;
	}
	
	#header .logoContainer {
		background-color:rgba(255,255,255,0.5);
		text-align:left;
	}
		
	#header .logoContainer div {
		margin:0em auto;
		display:inline-block;
		padding:0em;
		vertical-align:middle;
	}
	
	#header .logoContainer div:last-child {
		margin-left:2em;
	}
	
	div.nhoservice, #header .logoContainer div.nhoservice {
		background-image: url("../images/nhoservice.png");
		background-position:  top left;
		background-repeat: no-repeat;
		background-size: auto 100%;
		width:160px;
		height:43px;
	}
	
	div.epenn, #header .logoContainer div.epenn {
		background-image: url("../images/epenn.png");
		background-position:  top left;
		background-repeat: no-repeat;
		background-size: auto 100%;
		width:88px;
		height:55px;
	}
	
	div.handverksdata, #header .logoContainer div.handverksdata {
		background-image: url("../images/handverksdata.png");
		background-position:  top left;
		background-repeat: no-repeat;
		background-size: auto 100%;
		width:250px;
		height:42px;
	}
	
	
	div.logos div{float:left; margin:0 2em 2em 0}

/* Footer */

	#footer {
		bottom: 0;
		left: 0;
		padding: 0 3em 1em 0;
		text-align: right;
		width: 100%;
		color:#33FF33;
	}

	#footer .icons {
		margin: 1em 0 0 0;
	}

	#footer .icons a, #header a {
		color: rgba(255, 255, 255, 0.4);
	}

	#footer .copyright {
		color:#81BFFE;
		font-size: 0.8em;
		list-style: none;
		margin: 1em 0 0 0;
		padding: 0;
	}

	#footer .copyright li {
		border-left: solid 1px rgba(255, 255, 255, 0.25);
		display: inline-block;
		line-height: 1em;
		margin-left: 0.75em;
		padding-left: 0.75em;
	}

	#footer .copyright li:first-child {
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
	}

	#footer .copyright li a {
		color: inherit;
	}

/* Main */

	#main, .extranet {
		margin:0;
		max-width: 54em;
		padding: 2.5em 2em 2em 2em;
		width: 100%;
	}
	
	#language {
		text-align: right;
	}
	
/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

	.icon:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
	}

	.icon > .label {
		display: none;
	}
	
/* List */


	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

	ul li {
		padding-left: 0.5em;
	}

	ul.icons, #language ul {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}
	
	#language ul li {
		float:right;
	}
	
	#language ul {
		margin:1em 1em 0 0;
	}

	ul.icons li {
		display: inline-block;
		padding: 0 1em 0 0;
	}

	ul.icons li:last-child {
		padding-right: 0;
	}

	ul.icons li .icon:before {
		font-size: 1.5em;
	}

	ul.actions {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

	ul.actions li {
		display: inline-block;
		padding: 0 1em 0 0;
		vertical-align: middle;
	}

	ul.actions li:last-child {
		padding-right: 0;
	}

	ul.labeled-icons {
		list-style: none;
		padding: 0;
	}

	ul.labeled-icons li {
		line-height: 1.75em;
		margin: 1.5em 0 0 0;
		padding-left: 2.25em;
		position: relative;
	}

	ul.labeled-icons li:first-child {
		margin-top: 0;
	}

	ul.labeled-icons li a {
		color: inherit;
	}

	ul.labeled-icons li h3 {
		color: #b2b2b2;
		left: 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 1em;
	}

	
/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 0.35em;
		border: solid 3px #efefef;
		color: #787878 !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 3.15em;
		height: calc(2.75em + 6px);
		line-height: 2.75em;
		min-width: 10em;
		padding: 0 1.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}
	
	.extranet input[type="submit"]{margin-right:1em}
	
	#header input[type="submit"],
	#header input[type="reset"],
	#header input[type="button"],
	#header .button {
		color: #ffffff !important;
	}

	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	.button:hover,
	#header input[type="submit"]:hover,
	#header input[type="reset"]:hover,
	#header input[type="button"]:hover,
	#header .button:hover {
		border-color: #39c;
		color: #39c !important;
	}

	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active,
	.button:active {
		background-color: rgba(51, 153, 204, 0.1);
		border-color: #39c;
		color: #39c !important;
	}

	input[type="submit"].icon,
	input[type="reset"].icon,
	input[type="button"].icon,
	.button.icon {
		padding-left: 1.35em;
	}

	input[type="submit"].icon:before,
	input[type="reset"].icon:before,
	input[type="button"].icon:before,
	.button.icon:before {
		margin-right: 0.5em;
	}
		
/* Form */

	form {
		margin: 0 0 2em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #f7f7f7;
		border-radius: 0.35em;
		border: solid 2px transparent;
		display: block;
		outline: 0;
		padding: 0 0.75em;
		text-decoration: none;
		width: 100%;
		margin-bottom:.75em;
	}
	
	.login input[type="text"],
	.login input[type="password"],
	.login input[type="email"],
	.login select,
	.login textarea {
		width: auto;
	}

	input[type="text"]:invalid,
	input[type="password"]:invalid,
	input[type="email"]:invalid,
	select:invalid,
	textarea:invalid {
		box-shadow: none;
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	select:focus,
	textarea:focus {
		border-color: #39c;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em;
	}

	::-webkit-input-placeholder {
		color: #b2b2b2 !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: #b2b2b2 !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: #b2b2b2 !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: #b2b2b2 !important;
		opacity: 1.0;
	}

	.formerize-placeholder {
		color: #b2b2b2 !important;
		opacity: 1.0;
	}

/* Section/Article */

	article.half {
		width:48%;
		display:inline-block;
	}
	
	article.half:nth-child(even) {
		float:right;
	}

	header.major h2 {
		font-size: 2em;
	}
	
	article.news {
		font-size:.95em;
		line-height:1.5em;
	}
	

/* Image */

	.image {
		border-radius: 0.35em;
		border: 0;
		display: inline-block;
		position: relative;
	}

	.image img {
		border-radius: 0.35em;
		display: block;
	}

	.image.fit img {
		width: 100%;
	}
	
	#language img {
		width:2em;
	}
	
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
/* Styles */
	body, input, select, textarea {
		color: #a2a2a2;
		font-size: 11pt;
		line-height: 1.75em;
	}
}

/* iPads Desktops and laptops ----------- */
@media only screen 
and (min-width : 768px) {
/* Styles */
/* Header */

	#header {
		height: 100%;
		position: fixed;
		width: 35%;
		background-size: auto 100%;
	}
	
	#header .logoContainer, #header .loginContainer {
		padding:3em;
	}
	
	#header .logoContainer div {
		margin:0em auto;
		display:block;
	}
	
	#header .logoContainer div:last-child {
		margin-top:3em;
		margin-left:auto;
	}
	
	#header .logoContainer div.nhoservice {
		width:200px;
		height:54px;
	}
	
	#header .logoContainer div.epenn {
		width:110px;
		height:68px;
	}
	
	/* Main */

	#main {
		margin-left: 35%;
		width: calc(100% - 35%);
		padding: 3em 4em 4em 4em;
	}
	
	#language {
		right: 0;
		padding: 0;
		position: fixed;
		top: 0;
	}
	
	#footer {
		position: fixed;
		text-align: right;
		width: 35%;
	}
	
	#footer .copyright {
		color: rgba(255, 255, 255, 0.4);
	}
	
	/* List */

	#language ul li {
		float:none;
	}
	
	/* Section/Article */
	
	article.news {
		font-size:.8em;
	}
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1024px) {
/* Styles */
	body, input, select, textarea {
		font-size: 12pt;
	}
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
	#header .logoContainer div.nhoservice {
		background-image: url("../images/nhoservice@2x.png");
	}
	
	#header .logoContainer div.epenn {
		background-image: url("../images/epenn@2x.png");
	}
	
	div.handverksdata, #header .logoContainer div.handverksdata {
		background-image: url("../images/handverksdata@2x.png");
	}
}