@charset "utf-8";

/* CSS Document */
/* Layout of page */


html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 210px; /* bottom = footer height */
}

#container {
	width: 70%;
	margin: 0 auto;
}

#logo {
	width: 100%;
	height: 60px;
	line-height: 60px;
}

#subtitle {
	width: 100%;
	height: 50;
	margin-bottom: 1%;
}

.network {
	margin-left: 10px;
}

#header {
	position: relative;
	width: 100%;
	height: 270px;
	margin-bottom: 2%;
}

#imagemap {
	position: absolute;
	top: 0px;
	left: 0px;
}

#step {
	/*float: right;*/
	position: absolute;
	top: 50px;
    left: 350px;
	/*width: 60%;*/
}

#infobox {
	/*float: right;*/
	position: absolute;
	top: -20px;
    right: 20px;
	/*width: 43px;
	height: 43px;
	width: 60%;*/
}

#content {
	width: 65%;
	float: left;
}

#menu {
	width: 33%;
	float: left;
    padding-left: 2%;	
}

div.clear {
    clear: both;
}

#footer {
	position: absolute;
	bottom: 0;
	width: 70%;
	height: 210px;
}

#project_logos {
	width: 35%;
	float: left;
}
#copyright {
	width: 35%;
	float: left;
}
#eu_logo {
	width: 25%;
	float: left;
}

/*step 1-5 highlight circles*/
#step-highlight-nr1 {
	position: relative;
	top: 37px;
	left: 186px;
}

#step-highlight-nr2 {
	position: relative;
	top: 142px;
	left: 220px;
}

#step-highlight-nr3 {
	position: relative;
	top: 208px;
	left: 132px;
}

#step-highlight-nr4 {
	position: relative;
	top: 142px;
	left: 41px;
}

#step-highlight-nr5 {
	position: relative;
	top: 37px;
	left: 76px;
}

#point-highlight {
	position: relative;
	width: 133px;
	height: 133px;	
	top: 26px;
	left: 84px;	
}

/* Fonts*/

body, div, .ui-accordion {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
}

h1 {
	font-size: 2.4em;
	}

h2 {
	font-size: 1.8em;
	}

#menu h2 {
	font-size: 1.4em;
	}

#menu h3 {
	font-size: 0.9em;
}

/* Colors and lay-out*/

#logo {
	background: url(../assets/oppla_drop_logo.png) no-repeat left;
	padding-left: 80px;
}

#subtitle {
	color: #75767A;
}

#header {
	background: #D8EBEF url(../assets/5-steps.png) no-repeat left;
}

#header button {
	background-color: #D8EBEF;
	color: #35ACAA;
}

#menu h2 {
	background-color: #6D6E72;
	color: white;
	margin: 0 auto;
	padding-left: 25px;
	height: 35px;
}

#infobox {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 15px;
	font-style: italic;
	border-bottom-style: none;
	
}

#content li {
	list-style-image: url(../assets/oppla_drop_bullet.png)
}

#footer {
	/*background-color: #BCBDC1; 75767A 6D6E72*/
	background-color: #BCBDC1;
	font-size: 0.5em;
}

#project_logos, #eu_logo {
	padding: 10px 10px 10px 10px;
}

h1, h2, h3, h4, a:link {
	color: #34ABA9;
}

a:link:hover {
	color:#6D6E72
}


/* Styling of step highlight*/
/* Small circle for each step */
.step-highlight {
	border-radius: 50%;
	display: inline-block;
	/*margin-right: 20px; */
	width: 33px;
	height: 33px;
	background: #D7ECEF;
	/*background: transparent;*/
	display: block;
	border: 5px solid #35ACAA;
	color: #35ACAA;
	text-align: center;
	vertical-align: middle;
	line-height: 33px;
		
}

.point-highlight-nr1 {
	background-image: url(../assets/active_step.png);
    -ms-transform: rotate(35deg); /* IE 9 */
    -webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */
    transform: rotate(35deg);
}

.point-highlight-nr2 {
	background-image: url(../assets/active_step.png);
    -ms-transform: rotate(110deg); /* IE 9 */
    -webkit-transform: rotate(110deg); /* Chrome, Safari, Opera */
    transform: rotate(110deg);
}

.point-highlight-nr3 {
	background-image: url(../assets/active_step.png);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.point-highlight-nr4 {
	background-image: url(../assets/active_step.png);
    -ms-transform: rotate(250deg); /* IE 9 */
    -webkit-transform: rotate(250deg); /* Chrome, Safari, Opera */
    transform: rotate(250deg);
}
.point-highlight-nr5 {
	background-image: url(../assets/active_step.png);
    -ms-transform: rotate(325deg); /* IE 9 */
    -webkit-transform: rotate(325deg); /* Chrome, Safari, Opera */
    transform: rotate(325deg);
}

.image_in_list{
	vertical-align: middle;
	border-radius: 10%;
}

.image_in_text {
	float: left;
	margin: 0 10px 10px 0px;
	border-radius: 10%;
}


/* Tooltip styling*/

.function {
	color: #34ABA9;
    border-bottom: 1px dashed #34ABA9;
    text-decoration: none; 
}

#infobox .function {
	border-bottom-style: none;
}


/* Tooltip popup styling*/

/* oppla skin */
.tpd-skin-oppla .tpd-content,
/*.tpd-skin-oppla .tpd-title, */
.tpd-skin-oppla .tpd-close { color: #6D6E72; }

/* different Title color*/
.tpd-skin-oppla .tpd-title { color: #ffffff; }

.tpd-skin-oppla .tpd-background-content { background-color: #F2F5F7; }
.tpd-skin-oppla .tpd-background {
  border-width: 1px;
  border-color: rgba(6,0,12,.6);
}
.tpd-skin-oppla .tpd-background-title { background-color: #35ACAA; }
/* line below the title */
.tpd-skin-oppla .tpd-title-wrapper { border-bottom: 1px solid #2a1fb4; }
/* shadow */
.tpd-skin-oppla .tpd-background-shadow { box-shadow: 0 0 8px rgba(0,0,0,.15); }
/* spinner */
.tpd-skin-oppla .tpd-spinner-spin {
  border-color: rgba(255,255,255,.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-oppla a { color: #35ACAA; }
.tpd-skin-oppla a:hover { color: #c6c6c6; }