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

/* ----- LOGOS RESPONSIVITY ----- */
@media only screen and (min-width: 0px){
	#superlogo, #longlogo, #mediumlogo {
		visibility: visible;
		display: none;
	}
}
@media only screen and (min-width: 545px){
	#mediumlogo {
		visibility: visible;
		display: inline;
	}
	#shortlogo {
		visibility: hidden;
		display: none;
	}
}
@media screen and (min-width: 768px){
	#longlogo {
		visibility: visible;
		display: inline;
	}
	#mediumlogo {
		visibility: hidden;
		display: none;
	}
}
@media screen and (min-width: 920px) {
	#longlogo {
		visibility: hidden;
		display: none;
	}
	#superlogo {
		visibility: visible;
		display: block;
		margin: 0 auto;
		width: 1024px;
		/* width: 100%; */
	}
	#imageHelper {
		background-color: white;
	}
}

/*  ----- BREAKPOINT: MOBILE SIZE AND UP (ALL) ----- */
body {
	font-family: Helvetica, Calibri, Verdana, sans-serif;
	font-size: 100%;
	background: #F2F2F2;}
#wrapper {
	overflow: auto;
	width: 100%;
	margin: 0 auto;
	background-color: white;
	position: relative;}
img {max-width: 100%;}
img.center {
    display: block;
    margin: 0 auto;
    margin-top: 2em;}
h1, h2, h3 {
	font-family: Calibri, Verdana, sans-serif;
	/* font-family: Garamond, Cambria, "Times New Roman", serif; */
	color: black;
	/* font-weight: bold; */
	margin: .5em .25em 0 .25em;}
h1 {font-size: 150%;}
h2 {
	font-size: 125%;
	margin-left: .31em;}
p {
	font-family: 'Open Sans', Helvetica, Calibri, sans-serif;
	color: black;
	margin: .5em;
	line-height: 150%;}
p a {	color: blue;}
.profile {
	margin: .25em;
	background-color: white;
	border: 1px solid lightgrey;
}
.profile img {
	float: left;
	margin: .5em;
	padding: 0;
	display: none;
}
.box {
	margin: .25em;
	/* border: 1px solid lightgrey; */
}
.linkbox {
	clear: left;
	margin: .25em;
	background-color: white;
	border: 1px solid lightgrey;
}
.linkbox img {
	float: left;
	padding: 0;
	margin-left: 0;
	margin-right: .5em;
}
.address {
	font-family: Helvetica, Calibri, sans-serif;
	color: black;
	margin: .5em;
	line-height: 150%;}
.name {
	font-family: Helvetica, Calibri, sans-serif;
	font-weight: bold;
	color: black;
	margin: 0;}
header {
	position: relative;
	background-color: #edebeb;
	border-bottom: 1px solid lightgrey;
	width: 100%;
}
body {
	position: relative;}
footer {
	margin: 0;
	background: lightgray;
	/* background: #edebeb; */
    display: table;
    table-layout: auto;
    width: 100%;
    margin-top: 1em;
}
footer p {
	font-size: 75%;
	font-family: Helvetica, Calibri, sans-serif;
	color: black;
	text-align: center;
	margin: 3em 1.5em 1em 1.5em;
	padding: .5em;}
em {font-style: italic;}
strong {font-weight: bold;}
ul {
	list-style-type: circle;
	font-family: Helvetica, Calibri, sans-serif;
	margin: 1em 1.5em 1em 2.5em;
	line-height: 150%;}
ul li {margin-top: .5em; margin-left: 1em;}
dl {
	list-style-type: circle;
	font-family: Helvetica, Calibri, sans-serif;
	margin: 1em 1.5em 1em 2.5em;
	line-height: 150%;}
dl a {color: red;}
dt {
	font-weight: bold;
	margin-top: 1em;}
aside h1 {border-bottom: none;}
aside ul {font-style: italic;}
aside ul a {font-style: normal;}
aside {
	background-color: #F2F2F2;
	/* background-color: #E6F9FF; */
	/* background-color: #f6f4f4; */
	padding: .1em 0 1em 0;
	margin: .25em;
	border: 1px solid #f3f2f2;}
/* FORM ELEMENTS */
form {
	line-height: 150%;
	font-family: Helvetica, Calibri, sans-serif;
	color: black;
	margin: .5em;
	line-height: 150%;
	overflow: hidden;}
button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	float: right;
	border-radius: 10px;}
input[type="text"] {
	background-color: #edebeb;
}
textarea {
	background-color: #edebeb;
}
label, input[type="text"] {
	display: inline-block;
}
.inputlabel {
	width: 35%;
	text-align: right;
}
.inputlabel + input[type="text"] {
	width: 35%;
	margin: 0 20% 0 4%;
}
input[type="text"] {
	margin-right: 0;
}
input[type="text"] {
	float: right;
}
textarea {
	width: 98%;
}
/* END OF FORM ELEMENTS */
/* NAVIGATION */
#clearfix {
	margin: 0;
	background: #5B9BD5;
	/* background: #edebeb; */
    display: table;
    table-layout: auto;
    width: 100%;
    font-size: 4vw;}
#clearfix li {
    display: table-cell;
    list-style: none;
	float: left;
	font-size: 75%;
	width: 17%;}
#clearfix a {
	font-family:'Open Sans', Helvetica, Verdana, sans-serif;
	color: white;
	text-decoration: none;
    display: block;
    text-align: left;
    margin: .25em;
    margin-left: 0;
    padding: .5em;
    padding-right: 0;
	border-right: 1px solid #bababa;}
#clearfix a:hover {
	font-weight: bold;
	color: blue;}
.active {
	background-color: #9CF;
}
.arrow {
	visibility: hidden;
	display: none;
}
/* END NAVIGATION */
/* SUBMENU */
#clearfix ul {
	display: none;
}
/* DROPDOWN */
#namemenu:hover ul, #subAbout:hover, #subAbout:focus, .sub:active {
	visibility: visible;
	display: block;
	position: absolute;
	top: 145px;
	background-color: #5B9BD5;
	padding: 0;
	margin: 0;
	width: 40%;
	border: 1px solid lightgrey;
	z-index: 1;
}

#softwaremenu:hover ul, #subSoftware:hover, #subSoftware:focus {
	visibility: visible;
	display: block;
	position: absolute;
	left: 20%;
	top: 100px;
	background-color: #5B9BD5;
	padding: 0;
	margin: 0;
	width: 40%;
	border: 1px solid lightgrey;
	z-index: 1;
}
#programmenu:hover ul, #subProgram:hover, #subProgram:focus {
	visibility: visible;
	display: block;
	position: absolute;
	left: 40%;
	top: 100px;
	background-color: #5B9BD5;
	padding: 0;
	margin: 0;
	width: 40%;
	border: 1px solid lightgrey;
	z-index: 1;
}
#servicemenu:hover ul, #subService:hover, #subService:focus {
	visibility: visible;
	display: block;
	position: absolute;
	left: 40%;
	top: 100px;
	background-color: #5B9BD5;
	padding: 0;
	margin: 0;
	width: 40%;
	border: 1px solid lightgrey;
	z-index: 1;
}
#namemenu:hover ul a, #programmenu:hover ul a , #servicemenu:hover ul a {
	border: none;
}
.arrow {
	visibility: hidden;
	display: none;
	font-size: 75%;
	color: white;
}
#subAbout li, #subSoftware li,#subProgram li, #subService li {
	display: initial;
	list-style: initial;
	float: initial;
	font-size: 93%;
	width: 0;}
/* The drop down menus are not <a> elements */
.sub {
	font-family: Helvetica, Verdana, sans-serif;
	color: black;
	text-decoration: none;
    display: block;
    text-align: left;
    margin: .25em;
    padding: .5em;
	border-right: 1px solid #bababa;}
.sub:hover, a:hover {
	font-weight: bold;
	color: coral;
	background-color: #9CF;
}
.warning {
	color: red;
	font-weight: bold;
}
/* Hides the aside when it's empty, to correct for the menu height */
.uglyfix {
	visibility: hidden;
}
/* ----- BOXES ON FRONT PAGE ---- */
/* ----- LONGBOXLEFT AND GENERAL----- */
.longboxLeft {
	display: inline-block;
	margin-top: 1em;
	display: table;
	width: 96%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	background: #1F1F1F;
	overflow: auto;
}
.boxP {
	display: inline-block;
	font-family: Calibri, 'Open Sans', Helvetica, sans-serif;
	font-weight: 100;
	font-size: 1em;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: .5em;
	line-height: 1.25em;
}
.boxP, .boxheader, .boxlink {
	color: white;
}
.boxheader {
	display: inline-block;
	margin: 2%;
	font-family: Calibri, sans-serif;
	font-weight: 100;
	font-size: 1.5em;}
.boxlink {
	display: block;
	font-family: Calibri, sans-serif;
	font-weight: 100;
	font-size: 1.5em;
	margin-left: 2%;
	margin-top: .75em;
	margin-right: 4%;
	margin-bottom: 0;
	text-align: right;
	margin-bottom: .75em;
}
.longboxLeft a, .coursebox a {
	text-decoration: none;
}
.longboxLeft a:hover .boxlink, .coursebox a:hover .boxlink {
	font-weight: 500;
	text-decoration: underline;
}
.pict img {
	display: none;
}
/* ----- /LONGBOXLEFT AND GENERAL----- */
/* ----- COURSEBOX ----- */
.coursebox {
	display: inline-block;
	background-color: #1F1F1F;
	/* margin-top: 1em; */
	display: table;
	width: 96%;
	margin-top: 1em;
	margin-left: 1.5%;
	margin-right: 1.5%;
	background: #5B9BD5;
	overflow: auto;
}
/* ----- /COURSEBOX ----- */
.coursebox .boxheader, .boxheader {
	margin-top: 0.75em;
}
/* ----- LANGUAGE SELECTOR ----- */
.lang a {
	position: relative;
	color: black;
	text-decoration: none;
	text-align: right;
	padding: .5em;
}
/* ----- ABOUT IN FOOTER ----- */
.about h1{
	color: white;
}
.about p {
	position: relative;
	text-align: left;
	margin-left: 1em;
	font-size: 1em; 
}
/* ----- SIGN UP BUTTON ----- */
.signup {
	display: block;
	background: green;
	color: white;
	width: 75%;
	margin: auto;
	text-align: center;
	font-size: 2em;
	text-decoration: none;
	font-family: Calibri, sans-serif;
	font-weight: 100;
	font-size: 1.5em;
	padding-top: .5em;
	padding-bottom: .5em;
	border-radius: 10px;
}
/* ----- IMAGES OF COURSEBOX ----- */

/* bakgrundsbild för longbox till vänster*/
/* måste vara en sådan här regel för varje bakgrundsbild, lägg också till id i HTML-filen*/
#blue {
	width: 100%;
	height: 100%;
	background-image: url(images/blue.jpg);
	/*background-size: 1773px, 500px;*/
}
/* bakgrundsbild för longbox till vänster*/
/* måste vara en sådan här regel för varje bakgrundsbild, lägg också till id i HTML-filen*/
#steel {
	width: 100%;
	height: 100%;
	background-image: url(images/steel_rolls3.jpg);
	/*background-size: 1773px, 500px;*/
}
/* bakgrundsbild för longbox till höger*/
/* måste vara en sådan här regel för varje bakgrundsbild, lägg också till id i HTML-filen*/
#kalle {
	height: 100%;
	background-image: url(images/steel_rolls3.jpg);
	/*background-size: 1773px, 500px;*/
}
.toleapgray {
	background-color: rgb(113, 128, 144);
}
.toleapdarkblue {
	background-color: rgb(29, 52, 80);
}
.sideMenu {
	visibility: hidden;
}
.sideMenuItem {
	background: #F2F2F2;
}

.footerBox {
	/*border: 1px solid red;*/
	max-width: 300px;
	margin: 0 auto;
}
.footerBox p strong {
	line-height: 2em;

}

@media only screen and (min-width: 1012px){
	#footerWrapper {
		display: block;
		display: table;
		width: 1024px;
		margin: 0 auto;

	}
	.footerBox {
		width: 25%;
		display: table-cell;
		/* border: 1px solid red; for testing */

	}
	.footerBox p {
		text-align: left;
		padding-left: 0;
	}
}

/* ----- BREAKPOINT: IPAD SIZE AND UP ----- */
@media only screen and (min-width: 750px) {
	p, ul, dl, .address, #name, form {
		margin: 1.5em;
	}
	.profile {
		margin: 1.5em;
	}
	.profile .address {
		margin: .5em;
	}
	.profile img {
		display: initial;
	}
	.box {
		margin: initial;
		border: initial;
	}
	.linkbox {
		border: none;
	}
	ul {
		margin-left: 3em;
	}
	dl {
		margin-left: 3em;
	}
	h1 {
		margin-left: 1em;
	}
	h2 {
		margin-left: 1.2em;
	}
	#clearfix {
		font-size: 100%;
	}
	#clearfix li {
		font-size: 93%;
		width: 17.5%;
	}
	.right {
		width: 35%;
		float: right;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	}
	/* ----- BELOW: MENU DOES NOT FOLLOW, REMOVE TO FOLLOW ----- */
	header {
		z-index: 2;
		position: initial;
		width: 100%;
		top: 0;
		margin: 0
	}
	body {
		position: initial;
	}
		/* ----- BOXES ON FRONT PAGE ----- */
	/* ----- LONGBOXLEFT AND GENERAL----- */
	.float {
		float: left;
	}
	.boxlink {
		margin-bottom: initial;
	}
	.longboxLeft {
		/* float: left; */
		width: 73%;
		height: 252px;
	}
	.content {
		width: 95%;
	}
	.boxP {
		margin-left: 2em;
		margin-top: 1em;
	}
	.coursebox .boxP {
		font-size: .85em;
	}
	.boxheader {
		margin-left: 1.4em;
	}
	.pict img {
		display: none;
	}
	.content {
		height: 253px;
	}
	.coursebox, .content {
		position: relative;
	}
	.boxlink {
		position: absolute;
		right: .25em;
		bottom: .5em;
	}
	/* ----- /LONGBOXLEFT AND GENERAL----- */
	/* ----- COURSEBOX ----- */
	.coursebox {
		display: block;
		width: 21.9%;
		height: 250px;
	}
	.coursebox .boxP {
		margin-left: 1em;
		margin-right: 1em;
	}
	.coursebox .boxheader {
		margin-left: .6em;
	}
	.fourth {
		width: 21.9%;
	}
	/* ----- LANGUAGE SELECT ----- */
	.lang a {
		color: darkgrey;
		position: absolute;
		right: 3em;
		top: .5em;
	}
	.black {
		color: white;
	}
	/* ----- COURSEBOXES ----- */
	#crane {
		background-image: url(images/crane2.png);
		background-size: 215px, 506px;
	}
	.fixBottom {
		margin-bottom: 1em;
	}
	.fixTop {
		margin-top: 0;
	}
}

/* ----- BREAKPOINT: FOR ASIDE ----- */
@media only screen and (min-width: 947px) {
	#intro {
		float: left;
		width: 60%;
		margin-right: 1.5em;
	}
	#outro {
		clear:left;
		width: 60%;
		margin-right: 1.5em;
	}
	aside {
		padding: .1em 1em .5em 0;
		margin: 2em 2em 0em 60%;
		/* box-shadow: 8px 8px 25px grey; */
		border: none;
	}
}

/* ----- BREAKPOINT: FOR SIDEMENU ----- */
@media only screen and (min-width: 750px) {
	#introForSideMenu {
		float: left;
		width: 100%;
		margin-right: 1.5em;
	}
	#outro {
		clear:left;
		width: 60%;
		margin-right: 1.5em;
	}
	#sideMenu {
		display: block;
		position: relative;
		padding: .1em 1em .5em 0;
		margin: 1em 1em 0em 76%;
		border: none;
	}
	.sideMenuItem {
		background-color: #F2F2F2;
		position: absolute;
	}
	.sideMenuItem h2 {
		
	}
}

/* ----- BREAKPOINT: COMPUTER SIZE AND UP ----- */
@media only screen and (min-width: 1068px) {
	body {
		background-color: white;
	}
	footer {
		position: relative;
		margin-top: 1em;
	}
	header {
		position: relative;
		/* box-shadow: 10px -1px 25px grey, -10px -1px 25px grey; */
		background: #5B9BD5;
	}	
	#clearfix {
		margin-left: 20px;
		/* margin-right: 20px; */
		width: 1020px;
		margin: 0 auto;
		box-shadow: none;
	}
	#wrapper {
		width: 1068px;
		/*box-shadow: 10px 10px 25px grey, -10px 10px 25px grey; */
		min-height: 99vh;
	}

	#clearfix li {
		float: none;
		width: 10%;
	}
	#clearfix a {
		border-right: none;
	}
	#namemenu:hover ul, #subAbout:hover, #subAbout:focus {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 40px;
		left: 68%;
		width: 20%;
		border: 1px solid lightgrey;
	}
	#softwaremenu:hover ul, #subSoftware:hover, #subSoftware:focus {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 40px;
		left: 100px;
		width: 20%;
		border: 1px solid lightgrey;
	}
	#programmenu:hover ul, #subProgram:hover, #subProgram:focus {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 40px;
		left: 205px;
		width: 20%;
		border: 1px solid lightgrey;
	}
	#servicemenu:hover ul, #subService:hover, #subService:focus {
		visibility: visible;
		display: initial;
		position: absolute;
		top: 40px;
		/* left: 31%; */
		left: 306px;
		width: 20%;
		border: 1px solid lightgrey;
	}
	/* heigth between list items in submenues */
	#subSoftware li, #subProgram li, #subAbout li, #subService li {
		margin: 0;
	}
	#namemenu:hover ul a:hover, #programmenu:hover ul a:hover, #programmenu:hover ul a:hover{
		background-color: #9CF;
	}
	.arrow {
		visibility: initial;
		display: initial;
		font-size: 75%;
		color: white;
	}
	/* ALTERNATIVE 1 for computer - menu does NOT follow */
	
	header {
		position: initial;
		width: 1068px;
		top: 0;
		margin: 0 auto;
		width: 100%;
	}
	body {
		position: initial;
	}
	/* ALTERNATIVE 2 for computer - menu DOES follow */
	/*
	header {
		position: fixed;
		width: 1066px;
		border-right: 1px solid lightgrey;
		border-left: 1px solid lightgrey;
	}
	body {
		position: relative;
		top: 75px;}
	*/
	/* ----- BOXES ON FRONT PAGE ----- */
	.pict img {
		display: inline-block;
		height: 250px;
	}
	.content {
		width: 70%;
		clear: left;
	}
	.coursebox .boxP {
		font-size: 1em;
	}
	.pict {
		float: right;
	}
	.narrow {
		width: 50%;
	}
	.hide {
		display: none;
	}
	.sideMenu {
		visibility: visible;
		background: blue;
		/*
		position: fixed;
		width: 300px;
		top: 0;
		left: 0;
		*/
		
	}
	.section-inner {
		width: 1024px;
		margin: 0 auto;
		position: relative;
	}
	.clearfix {
		position: absolute;
		width: 1024px;
		margin: 0 auto;
	}
	#wrapper {
		overflow: hidden;
	}
	/* To fix the issue with the lang selector */
	.lang a {
	}
	.high {
		height: 400px;
	}
	.high .boxlink {
		margin-top: 0;
	}
}

/* TARGETS INTERNET EXPLORER 10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS styles go here */
	#subSoftware li, #subService li, #subProgram li {
		display: block;
		width: 100%;
	}
}