@charset "iso-8859-1";
/* CSS Document */

.panel-body:hover{
text-decoration:none!important;}
*:focus{
text-decoration:none!important;}


.woff  application/x-font-woff
.navbar{}

body {
  padding-top: 50px;
  font-family:verdana;
}


#portrait-vy, #tel-vy{
display:none;
 }
 
 #arrow-navigator{
 display:none;
 }
  
#start-button-cover-wrap{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:10000;
background-color:#eaeaea;
opacity:0.9;
display:block;
}

.start-button-cover{
position:absolute;
width:250px;
height:120px;
display:block;
left: 41%;
top:42%;

}
.start-button-cover #play_btt_l7s{
width:250px!important;
  background-size:40% auto;
  margin-bottom:20px;
  padding-left:20px;
  }
  
a{
 outline:none!important;
 }

.starter-template {
  padding: 0px 40px 15px 0px;
  text-align: center;
}

a.link-block{
	float:left;
	font-size:18px;
	padding:0;
	margin-right:3%;
	margin-bottom:3%;
	border:1px solid #8c8c8c;
	border-radius:5px;
	
}
a:hover.link-block{
	text-decoration:none;
	text-decoration:none;
	
}

a.link-block > ins{
text-decoration:none;
}

.box-shadow{
box-shadow:none;
}

.box-shadow:hover{
box-shadow: 0px 0px 8px #000;
}

.front-omslag{
  position:absolute;
  width:100%;
  height:100%;
  background-image:url('/i/front_omslag.png');
  left:0;
  top:0;
  z-index:10000;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-color:#f4b963;
  opacity:0.9;
  cursor:pointer;
 }

.book-block{
	width:210px;
	height:160px;
	background-image:url('/i/book_omslag.png');
	background-size:100%;
	
}

.level-block{
	width:180px;
	height:120px;
}

.level-block1{
	width:180px;
	height:120px;
	background-image:url('/i/Las1_omslag.png');
	background-size:100%;
	
}

.level-block2{
	width:180px;
	height:120px;
	background-image:url('/i/Las2_omslag.png');
	background-size:100%;
	
}

.level-block3{
	width:180px;
	height:120px;
	background-image:url('/i/Las3_omslag.png');
	background-size:100%;
	
}
.chapter-block{
	width:220px;
	height:120px;
	background-image:url('/i/chapter_omslag.png');
	background-size:100%;
	
}

.exercice-block{
	width:140px;
	height:95px;
	background-image:url('/i/exercice_omslag.png');
	background-size:100%;
}

.title-book-block{
	font-size:24px;
	color:#d12436;
	text-transform:uppercase;
}


.sub_navbar{
border-radius:0!important;
background-color:#f8f6e8;

}

.container .jumbotron{
float:left;
width:100%;
padding:10px 20px;
text-align:left;
-moz-border-radius: 2px!important;
border-radius: 2px!important;


}
.jumbotron a{
font-size:14px!important;
  float:right;}
.jumbotron-back-top{
margin-bottom:0;
  border-bottom:1px solid white;

 }
.jumbotron-sound-top{
margin-bottom:30px;

 }
.jumbotron-sound-top h2{
font-size:20px;
  float:left;
  margin:5px 0px 0px 10px ;

}
h2 span{
font-size:22px;
padding-left:20px;
 
}
.btn-group{
float:left;
  margin-top:3px;

}

.bottom_align{
margin-top:25px; 
 }

.btn-default-noborder {
border:none;
}

.jumbotron-sound-bottom{
margin-bottom:0;
  border-bottom:1px solid white;
  margin-top:30px;
 }

.jumbotron a{
font-size:16px;}

a.lasbok1{
color:#729153;}
a.lasbok2{
color:#657799;}
a.lasbok3{
color:#f0a123;}

.panel{
height:100%;
}
.panel-body{
height:65%;
color:black;
}
.panel-footer{
height:35%;
}

.footer-book-block{
background-image:url(/i/next-ico.png);
display:block;
height:100%;
background-repeat:no-repeat;
width:100%;
background-position:90% 50%}

.ico-sound{
background-image:url(/i/sound.png);
background-repeat:no-repeat;
padding-left:30px;
background-position:3% 50%
}

.ico-instructions{
background-image:url(/i/info.png);
  background-repeat:no-repeat;
  padding-left:30px;
  background-position:3% 50%
}

.ico-reload{
background-image:url(/i/reload.png);
  background-repeat:no-repeat;
  padding-left:30px;
  background-position:3% 50%
}

.word-card-smaord{
 float:left;
  /*-moz-border-radius: 3px;
 border-radius: 3px;
 background-color:white;*/
 color:#3b3b3b;
 margin-right:10px;
   /*box-shadow: 2px 2px 3px #ededed;*/
 cursor:pointer;
 font-size:48px;
 padding:10px;
 color:#383838!important;
   /*border:1px solid #e5e5e5;*/
 padding-top:10px;
 margin-bottom:10px
}

.word-card-sammansatta{
 float:left;
 /*-moz-border-radius: 3px;
 border-radius: 3px;
 background-color:white;*/
 color:#3b3b3b;
 margin-right:10px;
  /*box-shadow: 2px 2px 3px #ededed;*/
 cursor:pointer;
 font-size:48px;
 padding:10px;
 color:#383838!important;
  /*border:1px solid #e5e5e5;*/
 padding-top:10px;
 margin-bottom:10px
}


.word-card-lasoving{

 /*-moz-border-radius: 3px;
 border-radius: 3px;
 background-color:white;*/
 color:#3b3b3b;
  /*box-shadow: 2px 2px 3px #ededed;*/
 cursor:pointer;
 font-size:48px;
 padding:10px;
 color:#383838!important;
  /*border:1px solid #e5e5e5;*/
 padding-top:10px;
 margin-bottom:10px;

}

.card{
	width:70px;
	height:94px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:white;
	font-size:18px;
	color:#3b3b3b;
	margin-right:2%;
	margin-bottom:2%;
	box-shadow: 2px 2px 3px #B7B7B7;
	cursor:pointer;
	font-size:38px;
  padding-top:22px;
  color:#383838;
    border:1px solid #e5e5e5;
  }

.lead{
	float:left;
	width:100%;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin:0px;
	padding:20px;
	
}
#main-scene-exercice{
	float:left;
	width:100%;
}

#mellanrumpil1{
left:-10px; 
}


#mellanrumpil2{
left:-200px;
}


.main-scene-exercice-matafram{
	float:left;
	width:100%;
  font-size: 21px;
  text-align:left;
 padding-left:70px;
  }


.speed_values_lines{
height:7px;
width:1px;
background-color:#000000;
}
.foursec{
position:absolute;
left:407px;
bottom:15px
}
.threesec{
float:left;  
position:absolute;
left:475px;
bottom:15px  
}
.twosec{
float:left;  
position:absolute;
left:535px;
bottom:15px  
}
.onesec{
position:absolute;
left:594px;
bottom:15px;
float:left;  
}
.zerosec{
position:absolute;
left:653px;
bottom:15px;
float:left;  
}

.milliseconds_1{
height:5px;
position:absolute;
left:621px;
bottom:17px;
float:left;  
}
.milliseconds_2{
height:5px;
position:absolute;
left:629px;
bottom:17px;
float:left;  
}

.milliseconds_3{
height:5px;
position:absolute;
left:637px;
bottom:17px;
float:left;  
}
.milliseconds_4{
height:5px;
position:absolute;
left:645px;
bottom:17px;
float:left;  
}    

.wrap_speed_values{
float:left;
position:relative;
right:-404px;
width:400px; 
height:15px;	
font-size:10px;
}
.wrap_speed_values div{float:left;
width:62px;
}

.bottomtext-placement-matafram{
float:left;
padding-left:40px;
padding-top:7px;

}

.progress{
	margin-top:20px;
}

/* Ljudsegmentering */
#snapbox, #no-snapbox{
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:#f8f6e8;
	font-size:18px;
	color:#3b3b3b;
	margin-right:4%;
	margin-bottom:4%;
	box-shadow: 2px 2px 3px #ededed;
	width:100%;
	height:96px;

}
#no-snapbox > .card{
	cursor: default;}
.consonant{
	color:#383838;

}
.vowel{
	color:#d21e27;

}
.backcard-consonant{
	background-color:#383838!important;
	box-shadow: none!important;
    background-image:url('/i/kort1.png');
	background-repeat:no-repeat;
	background-size:68px 92px;
}
  .backcard-vowel{
	background-color:#d21e27!important;
	box-shadow: none!important;
	background-image:url('/i/kort2.png');
	background-repeat:no-repeat;
	background-size:68px 92px;

}

.main-scene-exercice-ljudsegemtering #c_2{
	position:relative;
	left:-90px;
}
.main-scene-exercice-ljudsegemtering #c_3{
	position:relative;
	left:-180px;
}
.main-scene-exercice-ljudsegemtering #c_5{
	position:relative;
	left:-360px;
}
.main-scene-exercice-ljudsegemtering #c_6{
	position:relative;
	left:-450px;
}
.main-scene-exercice-ljudsegemtering #c_7{
	position:relative;
	left:-540px;
}


.main-scene-exercice-ljudsegemtering #c_8{
	position:relative;
	left:-630px;
}
.main-scene-exercice-ljudsegemtering #c_9{
	position:relative;
	left:-720px;
}
.main-scene-exercice-ljudsegemtering #c_a{
	position:relative;
	left:-270px;
}
.main-scene-exercice-ljudsegemtering #c_b{
	position:relative;
	left:-360px;
}









/* Ljudsyntes */
#bild-box img{
	width:118px;
	height:148px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:white;
	color:#3b3b3b;
	margin-right:10px;
	box-shadow: 2px 2px 3px #ededed;
	cursor:pointer;
	font-size:24px;
	padding:5px;
	color:#383838!important;
	border:1px solid #e5e5e5;
	padding-top:10px
}

/* Lasa orden */
.image-control-snapbox{
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:#f8f6e8;
	font-size:18px;
	color:#3b3b3b;
	margin-right:10px;
	box-shadow: 2px 2px 3px #ededed;
	height:170px;
	width:92px;
	margin-top:10px;
}
.image-control-snapbox img{
	width:90px;
	height:113px;
}

.wrapp-image-control-snapbox{
float:left;
	margin-bottom:20px;
}

.word-card{
	height:60px;
	width:92px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:white;
	color:#3b3b3b;
	margin-right:10px;
	box-shadow: 2px 2px 3px #ededed;
	cursor:pointer;
	font-size:24px;
	padding:5px;
	color:#383838!important;
	border:1px solid #e5e5e5;
	padding-top:10px;
    margin-bottom:10px
}

.word-card img{
position:relative;
top:-22px;}
#wrapper-wc-lasaord{
	float:left;
	width:100%;

}

#wrapper-wc-lasaord .word-card{	font-size:21px;	padding:12px 0px 2px 0px;}

.word-wrapper{
float:left;
height:200px;
width:100%;

}

.wrap-flash-card{
margin:50px auto;
height:100px;
width:150px;

}

.wrap-flash-card-svar{
float:left;
height:100px;
width:100%;

}

.btn-group input[type="checkbox"], input[type="radio"]
{
margin-top:10px;
margin-left:20px
}

.drop-here-img{
	/* background-image:url(/i/drop-here-arrow.png);
	background-repeat:no-repeat;
	background-position:55% 100%;
	opacity:1;
	filter:alpha(opacity=100); */ /* For IE8 and earlier */
	border:1px dotted #ababab;
	background-size:80%;
}
.drop-here{
	/* background-image:url(/i/drop-here-arrow.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	float:left;
	border:1px dotted #ababab;
	filter:alpha(opacity=70);*/ /* For IE8 and earlier */
}


#speedslider{
width:250px;
  height:20px;
}

.speedslider_wrap{

position:relative;
right:-357px;
bottom:2px;
padding-left:50px;
padding-top:13px;
width:350px;
height:40px;
background-image:url('/i/symbol_speed.png');
background-repeat:no-repeat;
}

.ui-slider .ui-slider-handle {

	width: 15px!important;
	height: 28px!important;

}

#play_btt_l7s{
	width:180px;
	height:50px!important;
	background:url('/i/btt_bookmark_play.png') no-repeat;
	background-size:60%;
	background-color:#729153;
	background-position:10px 50%;
	color:white;
	font-size:16px!important;
	position:relative;
	margin-right:40px;

}


.playagain{
display:none!important;
}

.start_pos{
font-size:22px;
margin:7px 0 0 0;
  text-align:left;
}

/* vokalhuset */
.no-marg{
margin-bottom:20px;
margin-top:0px;}

.no-pad{
padding-top:0}

.vokalhuset{

	background:url('/i/vokalhuset.jpg') no-repeat 0px 0%;
  height:372px;
  width:1050px;
  padding:160px 50px 0 50px;

}

#firstfloor, #secondfloor{
	width:950px;	
	height:110px;
	float:left;
}



.card-vkh{
	width:30px;
	height:44px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:white;
	color:#3b3b3b;
	box-shadow: 2px 2px 3px #8d8d8d;
	cursor:pointer;
	font-size:28px;
	color:#383838;
	margin-right:2px;
  }
.card-vkh:hover{
	background-color:#b0b9b0;
    }
.kort-a, .kort-e{
	margin-right:98px;
}

.kort-i{
	margin-right:162px}
.kort-o{
	margin-right:162px}

.kort-u{
	margin-right:98px
}

.kort-y{
	margin-right:34px
}
    
#firstfloor span{	
	width:30px;
	height:44px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color:#3b3b3b;
	cursor:pointer;
	font-size:28px;
	color:#383838;
	margin-right:2px;
}

#answer1{
	margin-right:10px;
	margin-bottom:10px;
}

.tillbaka_align{
margin-left:1000px;
margin-top:-57px;
margin-bottom:80px;

float:left;
}


#mellanrumpil1{
cursor:pointer;
left:10px;
}

#mellanrumpil2{
cursor:pointer;
left:10px;

}

#arrow-left{
left:10px;
}

#arrow-right{
left:10px;
}
.arrow-navigator{
display:none

}

/*IPAD*/
@media (min-width: 768px) and (max-width: 1024px){

body, html {
overflow-x:hidden!important;
ontouchstart:"";
}


#firstfloor span{	
	width:30px;
	height:44px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color:#3b3b3b;
	cursor:pointer;
	font-size:24px;
	color:#383838;
	margin-right:0px;
}



#play_btt_l7s{
	width:180px;
	height:50px!important;
	background:url('/i/btt_bookmark_play.png') no-repeat;
	background-size:60%;
	background-color:#729153;
	background-position:10px 50%;
	color:white;
	font-size:16px!important;
	position:relative;
	margin-right:40px;
}

#start-button-cover-wrap{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:10000;
background-color:#FFF;
opacity:0.9;
display:block;
}


.start-button-cover{
width:350px;
height:200px;
display:block;
position:absolute;
left: 36%;
top:35%;

}

.start_pos{
font-size:22px!important;
margin:7px 15px!important;
}

.start_pos2{
font-size:22px!important;
margin:7px 35px!important;
}

#mellanrumpil2-ipad{
font-size:40px!important;
margin-right:60px;
cursor:pointer;
}
#mellanrumpil1-ipad{
font-size:40px!important;
cursor:pointer;
}

.glyphicon:active{
color:#C0C0C0!important;
}

.arrow-navigator{
width:170px;
height:105px;
background-color:#EEE;
border-radius:7px;
position:fixed;
top:250px;
left:770px;
display:block;
padding:10px;
font-size:12px;
}


.main-scene-exercice-matafram{
min-height:200px!important;
padding-left:30px!important;

}

.lead{
padding-left:30px!important;
}

.matafram-instructions-ipad{
display:block;
position:fixed;
left:785px;
top:255px;
width:200px;
font-size:12px!important;
}


#mellanrumpil1{
display:none!important;
}

#mellanrumpil1:active{
color:#C0C0C0;
}

#mellanrumpil2{
display:none!important;
}

#mellanrumpil2:active{
color:#C0C0C0;
}

.speedslider_wrap{

position:relative;
right:-300px;
bottom:2px;
padding-left:50px;
padding-top:13px;
width:250px;
height:40px;
background-image:url('/i/symbol_speed.png');
background-repeat:no-repeat;
}




.wrap_speed_values{
  position:relative;
right:-350px;
  }
.foursec{
position:absolute;
left:352px;
bottom:15px
}
.threesec{
float:left;  
position:absolute;
left:420px;
bottom:15px  
}
.twosec{
float:left;  
position:absolute;
left:480px;
bottom:15px  
}
.onesec{
position:absolute;
left:539px;
bottom:15px;
float:left;  
}
.zerosec{
position:absolute;
left:598px;
bottom:15px;
float:left;  
}

.milliseconds_1{
height:5px;
position:absolute;
left:566px;
bottom:17px;
float:left;  
}
.milliseconds_2{
height:5px;
position:absolute;
left:574px;
bottom:17px;
float:left;  
}

.milliseconds_3{
height:5px;
position:absolute;
left:582px;
bottom:17px;
float:left;  
}
.milliseconds_4{
height:5px;
position:absolute;
left:590px;
bottom:17px;
float:left;  
}    

.sub_navbar{
width:1084px!important;
}

.vokalhuset{

	background:url('/i/vokalhuset.jpg') no-repeat 0px 0%;
  height:372px;
  width:1050px;
  padding:160px 50px 0 50px;
background-size:90%;
margin-left:-40px;
}

#firstfloor, #secondfloor{
	width:840px;	
	height:90px;
	float:left;

}

.card-vkh{
	width:20px;
	height:34px;
	float:left;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color:white;
	color:#3b3b3b;
	box-shadow: 2px 2px 3px #8d8d8d;
	cursor:pointer;
	font-size:24px;
	color:#383838;
	margin-right:2px;
  }
.card-vkh:hover{
	background-color:#b0b9b0;
    }
.kort-a, .kort-e{
	margin-right:98px;
}

.kort-i{
	margin-right:152px}
.kort-o{
	margin-right:152px}

.kort-u{
	margin-right:98px
}

.kort-y{
	margin-right:34px
}

.playagain{
display:block!important;
}

.playagain .btn{
height:100px!important;
width:200px!important;
font-size:22px;
background-image:none!important;
padding:30px 10px 10px 10px!important;
background-color:#f8f6e8;
}

}
/* Samsung */
@media (min-width: 1025px) and (max-width: 1280px){
#play_btt_l7s{
	width:120px;
	height:40px;
	background:url('/i/btt_bookmark_play.png') no-repeat;
	background-size:80%;
	background-color:#729153;
	background-position:10px 50%!important;
	color:white;
	font-size:16px!important;
	padding-left:40px;
	position:relative;
}

.main-scene-exercice-matafram{
min-height:160px!important;
padding-left:100px!important;
}


.arrow-navigator{
width:170px;
height:105px;
background-color:#EEE;
border-radius:7px;
position:fixed;
top:250px;
left:970px;
display:block;
padding:10px;
font-size:12px;
}

#mellanrumpil1{
display:none
}

#mellanrumpil2{
display:none
}

#mellanrumpil2-ipad{
font-size:40px!important;
margin-right:60px;
cursor:pointer;
}
#mellanrumpil1-ipad{
font-size:40px!important;
cursor:pointer;
}

.glyphicon:active{
color:#C0C0C0!important;
}
}

@media only screen and  (orientation:portrait) {
    #portrait-vy{
  display:block;
  text-align:center;
  }
  #portrait-vy p{
   padding-top:100px;
   font-size:80px;}

.matafram-instructions-ipad {
display:none;
}
 
.container{
display:none;
}

.navbar{
display:none;
}


   
 }



@media only screen and   (max-width: 480px) {
    #portrait-vy{
  display:none;

  }
  #tel-vy{
  display:block;
  text-align:center;
  }
   #tel-vy p{
   padding-top:100px;
   font-size:30px;}

 
.container{
display:none;
}

.navbar{
display:none;
 }
}