* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
img {
  display: block;
}
body {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  font-family: Arial Rounded MT Bold,Arial,Helvetica,"Nimbus Sans L","Bitstream Vera Sans",sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #2890af;
  position: relative;
  
}

.outer {
  overflow: hidden;
  padding: 5%;  /*** luft runt hela alltet */
  border:15px solid #dbb73b;

}

.needle {
  width: 100%;
  height: 10px;
}

.needle1 {
  position: absolute;
  top:0px;
  left:0px
}

.needle2 {
  position: absolute;
  right: 0px;
  top:0px;
}

a {
  text-decoration: none;
  color: black;
}

#progresstitle {
	visibility: hidden;
}


/* ---------------------------- Pins Section --------------------------------- */

#pins {
	height:20px;
	white-space:nowrap;
	overflow-x: hidden;

/*	background:#CCF; */   /* debug color */
}

#pins img { 
  float: left;
  width: 12px;  /* width is updated from js */
  visibility:visible;
  overflow-x: hidden;
  height: 10px;
}

#pins .middlepin {
  border-style: solid;
  border-width:5px 5px 5px 5px;
  border-color:white;

  -moz-border-image:    url("bilder/barn_web/tab_unselected_middle.png") 5 5 5 5;
  -webkit-border-image: url("bilder/barn_web/tab_unselected_middle.png") 5 5 5 5;
  -o-border-image:      url("bilder/barn_web/tab_unselected_middle.png") 5 5 5 5; 
  -ms-border-image:     url("bilder/barn_web/tab_unselected_middle.png") 5 5 5 5; 
  border-image:         url("bilder/barn_web/tab_unselected_middle.png") 5 5 5 5; 
}

#pins .leftpin {
  border-style: solid;
  border-width:5px 5px 5px 5px;
  border-color:white;
 	-moz-border-image:    url("bilder/barn_web/tab_unselected_left.png") 5 5 5 5;
	-webkit-border-image: url("bilder/barn_web/tab_unselected_left.png") 5 5 5 5;
    -o-border-image:      url("bilder/barn_web/tab_unselected_left.png") 5 5 5 5; 
    -ms-border-image:     url("bilder/barn_web/tab_unselected_left.png") 5 5 5 5; 
	border-image:         url("bilder/barn_web/tab_unselected_left.png") 5 5 5 5; 
}

#pins .rightpin {
  border-style: solid;
  border-width:5px 5px 5px 5px;
  border-color:white;
 	-moz-border-image:    url("bilder/barn_web/tab_unselected_right.png") 5 5 5 5;
	-webkit-border-image: url("bilder/barn_web/tab_unselected_right.png") 5 5 5 5;
    -o-border-image:      url("bilder/barn_web/tab_unselected_right.png") 5 5 5 5; 
    -ms-border-image:     url("bilder/barn_web/tab_unselected_right.png") 5 5 5 5; 
	border-image:         url("bilder/barn_web/tab_unselected_right.png") 5 5 5 5;
}
#pins img.selected {
	-moz-border-image:    url("bilder/barn_web/tab_selected_middle.png") 5 5 5 5;
	-webkit-border-image: url("bilder/barn_web/tab_selected_middle.png") 5 5 5 5;
    -o-border-image:      url("bilder/barn_web/tab_selected_middle.png") 5 5 5 5; 
    -ms-border-image:     url("bilder/barn_web/tab_selected_middle.png") 5 5 5 5; 
	border-image:         url("bilder/barn_web/tab_selected_middle.png") 5 5 5 5;
}

#pins .leftpin.selected {
	-moz-border-image:    url("bilder/barn_web/tab_selected_left.png") 5 5 5 5;
	-webkit-border-image: url("bilder/barn_web/tab_selected_left.png") 5 5 5 5;
    -o-border-image:      url("bilder/barn_web/tab_selected_left.png") 5 5 5 5; 
    -ms-border-image:     url("bilder/barn_web/tab_selected_left.png") 5 5 5 5; 
	border-image:         url("bilder/barn_web/tab_selected_left.png") 5 5 5 5;
}

#pins .rightpin.selected {
	-moz-border-image:    url("bilder/barn_web/tab_selected_right.png") 5 5 5 5;
	-webkit-border-image: url("bilder/barn_web/tab_selected_right.png") 5 5 5 5;
    -o-border-image:      url("bilder/barn_web/tab_selected_right.png") 5 5 5 5; 
    -ms-border-image:     url("bilder/barn_web/tab_selected_right.png") 5 5 5 5; 
	border-image:         url("bilder/barn_web/tab_selected_right.png") 5 5 5 5;
}

#pins p {
	position:absolute;
	font-size: 11px;
	/*font-weight:normal; */
	color: #777;
	margin-top: 0px;
}

#pins .iepin {
  border-style: solid;
  border-width:1px 1px 1px 1px;
  border-color:#CCC;
}
#pins .ieselected {
  border-style: solid;
  border-width:1px 1px 1px 1px;
  /*background:#A1B1BF; vuxen css */
  background:#AA73B1;
}


@media only screen and (min-width : 400px) {  /* wide screen */
#pins {
	height:30px;
}
 #pins p {
	margin-top: 0px;  
  }
  .outer {
    min-height: 780px;
  }
}


/* ---------------------------- QA - Question and Answers --------------------------------- */


#qa { /* section - hela övre delen med fråga och svarsknappar */
  height: 490px;   /* kandidatvyn placeras alltid detta avstånd under frågan. Se testatypen.js rad 314 för hur högt vyn animeras.*/
  margin-top: 0;
  padding: 0;
  display: block;
  clear: both;
	overflow:hidden;
  -moz-transition: opacity 0.3s linear; 
  -webkit-transition: opacity 0.3s linear; 
  transition: opacity 0.3s linear; 
  font-size: 22px;

/*   background: #DFF; */  /* debug color */
}

#qa div .q { /* Question "q" class */
  margin-top: 0;
  font-weight:normal;
  margin-bottom: 3%;
}
#qa div .a { /* Answer "a" class */
  display: block;
  color: #125168;
  text-align: center;
  text-shadow: 1px 1px 1px #FFF;
}

#qa div .a.ibtn  {  /* image button MOBIL */
  width: 90%;
  height: auto;
  margin: 0 0 6% 5%;
  position: relative;
  float: left;
  left: 0px;
  padding-bottom: 6%;	 /* more white beneath picture in button*/
  background-image: url(bilder/barn_web/box_image.png);
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}

#qa div .a.ibtn.selected p{
  background-image: url(bilder/barn_mobil/button_image_selected.png);
}

#qa div .a.tbtn { /* text button MOBIL */
  width: 100%;
  height: auto;
  float: left;
  margin: 0 0 5% 0;     
  position: relative;
  left: 0;
  background-image: url(	bilder/barn_mobil/button_text.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}

#qa div .a.tbtn.selected { 
  background-image: url(	bilder/barn_mobil/button_text_selected.png);
}

#qa img  {  /* image inside the button */
	width: 90%;
	height: auto;
	position: relative;
  margin: 5%;
}

#qa .a.ibtn p{  /* texten i bildknappar MOBIL */ /* 194x36 */
	text-align: center;
	position: absolute;
 	width: 90%;
 	padding-top: 3%;
 	padding-bottom: 3%;
	width: 80%;
    left: 10%;
    top:65%;
 	background-size: 100% 100%;
  	background-repeat: no-repeat;
 	background-position:center;
 	background-image: url(	bilder/barn_web/button_image.png);
  }

#qa .a.tbtn p {  /* texten i textknappar MOBIL */
	text-align: center;
	position: relative;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
}



@media only screen and (min-width : 400px) {  /* wide screen */
  #qa {
    height: 300px;  /* kandidatvyn placeras alltid detta avstånd under frågan. Se rad 313 i testatypen.js för hur högt vyn animeras.*/
    display: block;
    margin: 0;
    clear: both;
    padding-left: 0px;
	overflow:hidden;
    font-size: 26px;

  }
  #qa div .a.ibtn {
	width:49%;
    float: left;
    margin: 0 2% 2% 0; 
    padding-bottom: 3.3%;
	background-image: url(	bilder/barn_web/box_image.png);
  }
  
  
  #qa div .a.ibtn.selected p{
	background-image: url(	bilder/barn_web/button_image_selected.png);
  }
      
  #qa div .a.tbtn { /* Text button WEBB */
    float: left;
  	width: 49%;
   	margin: 0 2% 2% 0; 
  	background-image: url(	bilder/barn_web/button_text.png);
  }
  #qa div .a.tbtn.selected {
  	background-image: url(	bilder/barn_web/button_text_selected.png);
  }

  #qa .a.ibtn p {  /* texten i bildknappar WEBB */
    top:57%;
}
#qa img  {  /* image inside the button */
	width: 90%;
	margin: 5% 5% 5% 5%;
}

#qa .a.tbtn p { /* texten i textknappar WEBB */
}
}


/* ---------------------------- CS - CANDIDATE SECION --------------------------------- */


#cs {    
  background-image: url(bilder/barn_web/candidate_bkg.png);
  background-repeat: repeat;
  /* background: #FF00FF;  ink to debug */
  position: relative;
  top: 0;
  margin:0;
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 15px 70% 20px;
  max-height: 100%;
  max-width: 100%;

  float: left;
  
  position: relative;
  
  -moz-transition: top 0.4s linear; 
  -webkit-transition: top 0.4s linear; 
  -o-transition: top 0.4s linear; 
  -ms-transition: top 0.4s linear; 
  transition: top 0.4s linear;
  -webkit-backface-visibility: hidden; /* fixes flicker on Android tablet */

}

#cs .grid {  /* the candidate cells are added into this grid */
	margin:0;
	padding-bottom: 20px;
	width:100%;
	height: auto;
	display: block;
	float: left;
}

#cs.flat {
  -moz-box-shadow:    none;
  box-shadow:         none;
}

#cs .q {
	/*font-weight: normal; Personer du kan bli-texten */
	position: relative;
	left: 0px;
	margin:0 0 4px 0;
}


#cs .hide-button a {
  display: block;
  height: 20px;
  width: 50px;
  float: right;
  padding: 5px 20px 5px 20px;
  margin-top: -22px;
  margin-right: 5px;
  position: relative;
  
  background-image: url(bilder/quiz_web/arrow.png);
  background-repeat: no-repeat;
  background-size: 8px 9px;
  background-position: 80% 50%;

}

#cs .c {						 /* candidate cell for mobile */
  width: 24%;
  float: left;
  margin: 1px 1px 1px 1px;
  position: relative;
  left: 0px;
  opacity: 1;
  -moz-transition: opacity 0.5s linear; 
  -webkit-transition: opacity 0.5s linear; 
  transition: opacity 0.5s linear; 
  -webkit-transform:translate3d(0,0,0); /* fixes flickering on Android Tablet */

}

#cs .c img { 
  width: 100%;
  height: auto;
  -moz-transition: opacity 0.3s linear; 
  -webkit-transition: opacity 0.3s linear; 
  transition: opacity 0.3s linear; 
  -webkit-transform:translate3d(0,0,0); /* fixes flickering on Android Tablet */

}

#cs .crossed {						 /* crossed cell for mobile */
  position: absolute;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
  top: 0;  /* place it on top of the other image */
  z-index:2;
  -moz-transition: opacity 0.3s linear; 
  -webkit-transition: opacity 0.3s linear; 
  transition: opacity 0.3s linear; 
  -webkit-transform:translate3d(0,0,0); /* fixes flickering on Android Tablet */
}

#cs .crossed img { /***/
  opacity: 0; /* krysset är osynligt  */
  width: 100%;
  height: auto;
  
  -moz-transition: opacity 0.5s linear; 
  -webkit-transition: opacity 0.5s linear; 
  transition: opacity 0.5s linear; 
  -webkit-transform:translate3d(0,0,0); /* fixes flickering on Android Tablet */
}
#cs .showcross img {  /***/
  opacity: 0.92; /***/
  -webkit-transform:translate3d(0,0,0); /* fixes flickering on Android Tablet */
}

#restartbutton {  /* restart button MOBIL */
  width: 60%;
  float:left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(bilder/barn_mobil/button_image.png);
  overflow:hidden;
  bottom: 0;
  margin-left: 20%;
}
#restartbutton p  {  /* text in restart button MOBIL */
  position: relative;
  text-align: center;
  font-family: Arial Rounded MT Bold,Arial,Helvetica,"Nimbus Sans L","Bitstream Vera Sans",sans-serif;
  text-shadow: 1px 1px 1px #FFF;
  font-weight: normal;
  font-size: 18px;
  color: #125168;
  width: 100%;
  height: auto;
  top: 0;  
  padding: 5% 0 5% 0;
  margin:0;
}


@media only screen and (min-width : 400px) {
  #cs {
	padding-bottom: 0%;
  }
  
  #cs .c {	 /* candidate cell for medium width */
  	width: 16%;  /* 6 cells per row */
  }
  #restartbutton p  {  /* text in restart button WEB */
    font-size: 21px;
    padding: 5% 0 5% 0;
    margin:0;
  }
}

@media only screen and (min-width : 800px) {
  body { 
    width: 800px;  /* max width */
  }
  #cs .c {						 /* candidate cell for wide screen */
  	width: 12%;  /* 8 cells per row */
  }
  #restartbutton p  {  /* text in restart button WEB */
  	font-size: 24px;
    padding: 5% 0 5% 0;
    margin:0;
  }
}

/* ---------------------------- DIPLOMA SECION --------------------------------- */

#diplom { 
  -moz-transform-origin: 50% 25%;
  position: absolute;
  margin-top: 24px;
  top: 15px;
  left: 4%;
  width: 92%;
  background-image: url(bilder/barn_web/candidate_bkg.png);
  opacity: 0;
  visibility:hidden;
  overflow: visible;
 	
}
#diploma-image { 
  width: 94%;
  float: left;	 
  margin: 3% 0% 0% 3%;
  -moz-box-shadow:    2px 2px 5px rgba(50, 50, 50, 0.48);
  box-shadow:         2px 2px 5px rgba(50, 50, 50, 0.48);

}
#diplom p { 
  width: 94%;
  color: black;
  margin: -3% 0% 0% 6%;
  padding-right: 6%;
  font-family: Arial,Helvetica,"Nimbus Sans L","Bitstream Vera Sans",sans-serif;
  font-size: 14px;
}
#diplom h4{ 
  width: 100%;
  font-weight: normal;
  padding: 55% 0% 0% 6%;
}

#needle1 {
  position: absolute;
  top: 0.3%;
  left: 2.0%;
  width: 2%;
  height: 3%;
}

#needle2 {
  position: absolute;
  top: 0.3%;
  left: 95%;
  width: 2%;
}

#restartbuttonbig {  /* restart button MOBIL */
  width: 80%;
  height: auto;
  float: left;
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(	bilder/barn_web/button_image.png);    
  overflow:hidden;
  bottom:0;
  margin: 5% 10% 5% 10%;
}
#restartbuttonbig p {  /* restart button i diplom Mobil */
  position: relative;
  font-family: Arial Rounded MT Bold;
  text-shadow: 1px 1px 1px #FFF;
  font-weight: normal;
  text-align: center;
  width:100%;
  height: auto;
  font-size: 18px;
  color: #125168;
  margin:  0;
  padding: 4% 0 4% 0;
}

@media only screen and (min-width : 800px) {
  
  #diplom img { 
  }
  
  #diplom h4 { 
    padding: 54% 0% 0% 3%;
	font-size: 20px;  
  }
  #diplom p { 
	  font-size: 14px;
	  margin: -3% 0% 0% 3%;
  	  padding-right: 3%;
  }
  #needle1 {
    top: 1.6%;
    left: 2.5%;
  }
 
  #needle2 {
    top: 1.6%;
    left: 96%;
  }
  #restartbuttonbig p {  /* restart button i diplom Mobil */
    font-size: 24px;
    padding: 4% 0 4% 0;
    margin:0;
}
}




/* -------------------- ANIMATE DIPLOMA APPEARANCE -------------------------*/

@-webkit-keyframes bounceIn {
	  0% { opacity: 0;-webkit-transform: scale(.3); 	}
	 50% { opacity: 1;-webkit-transform: scale(1.05);	}
 	 70% { -webkit-transform: scale(.9);	}
	100% { -webkit-transform: scale(1);	}
}

@-moz-keyframes bounceIn {
	  0% { opacity: 0;-moz-transform: scale(.3);	}
	 50% { opacity: 1;-moz-transform: scale(1.05);	}
	 70% { -moz-transform: scale(.9); }
	100% {	-moz-transform: scale(1);	}
} 

@-o-keyframes bounceIn {
	  0% { opacity: 0;-o-transform: scale(.3);	}
	 50% { opacity: 1;-o-transform: scale(1.05);	}
	 70% { -o-transform: scale(.9);	}
	100% { -o-transform: scale(1);	}
}

@keyframes bounceIn {
	0% { opacity: 0; transform: scale(.3);	}
	50% { opacity: 1; transform: scale(1.05);	}
	70% { transform: scale(.9);	}
	100% {	transform: scale(1);	}
}

.bounceIn {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}






/* -------------- ANIMATE STARS ON TOP OF THE DIPLOMA -----------------*/

@-webkit-keyframes starAnim {
	0% {	opacity:0; -webkit-transform: scale(.1) rotate(-30deg)	}
	25% {	opacity:1; -webkit-transform: scale(1.05) rotate(-60deg)}
	50% {	opacity:1; -webkit-transform: scale(0.9) rotate(-90deg)}
	75% {	opacity:0; -webkit-transform: scale(0.1) rotate(-120deg)}
	100% {	opacity:0; -webkit-transform: scale(0.1) rotate(-30deg)}
}

@-moz-keyframes starAnim {
	0% {	opacity:0; -moz-transform: scale(.1) rotate(-30deg)	}
	25% {	opacity:1; -moz-transform: scale(1.05) rotate(-60deg)}
	50% {	opacity:1; -moz-transform: scale(0.9) rotate(-90deg)}
	75% {	opacity:0; -moz-transform: scale(0.1) rotate(-120deg)}
	100% {	opacity:0; -moz-transform: scale(0.1) rotate(-30deg)}
}

@-o-keyframes starAnim {
	0% {	opacity:0; -o-transform: scale(.1) rotate(-30deg)	}
	25% {	opacity:1; -o-transform: scale(1.05) rotate(-60deg)}
	50% {	opacity:1; -o-transform: scale(0.9) rotate(-90deg)}
	75% {	opacity:0; -o-transform: scale(0.1) rotate(-120deg)}
	100% {	opacity:0; -o-transform: scale(0.1) rotate(-30deg)}
}

@keyframes starAnim {
	0% {	opacity:0; transform: scale(.1) rotate(-30deg)	}
	25% {	opacity:1; transform: scale(1.05) rotate(-60deg)}
	50% {	opacity:1; transform: scale(0.9) rotate(-90deg)}
	75% {	opacity:0; transform: scale(0.1) rotate(-120deg)}
	100% {	opacity:0; transform: scale(0.1) rotate(-30deg)}
}

.starAnim {
	-webkit-animation-name: starAnim;
	-moz-animation-name: starAnim;
	-o-animation-name: starAnim;
	animation-name: starAnim;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 100;
    -moz-animation-iteration-count: 100;
    -o-animation-iteration-count: 100;
    animation-iteration-count: 100;
}

.star1 {
	-webkit-animation-duration: 4.0s;
	-moz-animation-duration: 4.0s;
	-o-animation-duration: 4.0s;
	animation-duration: 4.0s;
}
.star2 {
	-webkit-animation-duration: 5.3s;
	-moz-animation-duration: 5.3s;
	-o-animation-duration: 5.3s;
	animation-duration: 5.3s;
}