@charset "utf-8";


/* CSS Document */





html,body,p,span,h1,h2,h3,h4,h5,h6,em,strong,div,input,table,tr,td,li,ul,a {


	padding:0;


	margin:0;


	border:none;


	outline:none;


}





@font-face {


  	font-family: "Gurakhh";


  	src:url("../../include/fonts/Gurakhh.ttf") format("truetype");


}


body {


	font-family:Arial, sans-serif;


	font-size:100%;


	padding: 4px;


	background: #f5f5f5;


}





h2 {


	background:#333;


	color:#fff;


	text-align:center;


	margin:10px 0;


	font-family:"Gurakhh";


	font-size:200%;


	border-radius:5px;


	padding:6px 0 0 0;


}





.passage-audio {


	width:100%;


	margin:0 auto;


	padding:0;


	position:relative;


	z-index:45;


}





.reading_page {


	max-width:1000px;


	margin:0 auto;


	}





.reading_page table td {


	padding-top:8px;


}





#passage-text.speaking {


	user-select:none;


	font-family:Gurakhh;


}





#passage-text {


	box-shadow:0 0 0 5px hsl(0,0%,80%),0 0 0 8px hsl(0,0%,90%);


	background:url(../images/bg1.png) no-repeat;position:relative; background-size:100% 100%;top:5px;


}





.autofocus-current-word label,.playback-rate label, .autofocus-current-word,.playback-rate  {


	font-weight: bold;


	font-family: monospace;


	font-size: 14px;


}





.passage p {


	font:normal 180%/140% "Gurakhh";


	padding:0 3%;


	height:500px;


	text-align:justify;


	text-shadow:1px 1px 0px rgba(0,0,0,.6);


	z-index:20;


	position:relative;


}





.initialized span[data-begin]:hover {


	background-color:#e67e22;


	box-shadow:0 0 5px rgba(0,0,0,.3);


}


.initialized span[data-begin]:focus{


	background-color:transparent;


	box-shadow:none;


	}





.initialized span[data-begin].speaking {


	background-color:#e67e22;


	box-shadow:0 0 5px rgba(0,0,0,.3);


	color:#fff;


	border-radius: 2px;	


}





.initialized span[data-begin] {


	cursor:pointer;


	-moz-user-select:none;


	-webkit-user-select:none;


	-ms-user-select:none;


	user-select:none;


}





.error {


	color:red;


}





ul.pagination1 li{


	color:#fff;


	list-style:none;


}





.pagination1 {


	margin-bottom:20px;


}





ul.red {


	outline:10px solid red;


}





ul.simplePagerNav li {


	display:block;


}





ul.simplePagerNav li a {


	color:#333;


	text-decoration:none;


	padding:7px 14px;


	float:left;


	font-family: Gurakhh;


	font-weight:bold;


}





ul.simplePagerNav li.currentPage a {


	display:inline-block;


	border-radius:3px;


	border:solid 1px silver;


	background:#e9e9e9;


	box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(0,0,0,.1);


	text-decoration:none;


	color:#717171;


	text-shadow:0 1px 0 rgba(255,255,255,1);


}





#scene_img {


	width:100%;


	height:100%;


	position:absolute;


	left:0;


	bottom:0;


	z-index:10;


	background-size:100%;


	background-position:center bottom;


	background-repeat:no-repeat;


	transition:all 0.7s ease-in-out;


	}





.logo_in_story {


	position:absolute;


	top:0;


	left:0;


	width:100%;


	height:100%;


	background:url(../../include/img/sikhville.png) no-repeat scroll 50% 50% ;


	background-size:30%;


	}


.carrot-flat-button {


	position: relative;


	vertical-align: top;


	height: 40px;


	padding:7px 22px;


	font-size: 15px;


	color: white;


	text-align: center;


	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);


	background: #e67e22;


	border: 0;


	border-bottom: 2px solid #da751c;


	cursor: pointer;


	-webkit-box-shadow: inset 0 -2px #da751c;


	box-shadow: inset 0 -2px #da751c;


	border-radius: 5px;


	line-height: 32px;


}





input[type='range'] {


	-webkit-appearance: none;


	background-color: #999;


	height: 4px;


	vertical-align: middle;


}


input[type='range']::-moz-range-track {


	 -moz-appearance: none;


	background-color: #999;


	height: 4px;


	vertical-align: middle;


}


input[type='range']::-webkit-slider-thumb {


	 -webkit-appearance: none !important;


	 border-radius: 20px;


	 background-color: #FFF;


	 box-shadow:inset 0 0 10px rgba(000,000,000,0.2);


	 border: 1px solid #999;


	 height: 20px;


	 width: 20px;


	 padding:5px;


}


input[type='range']::-moz-range-thumb {


	 -moz-appearance: none;


	 border-radius: 20px;


	 background-color: #FFF;


	 box-shadow:inset 0 0 10px rgba(000,000,000,0.2);


	 border: 1px solid #999;


	 height: 20px;


	 width: 20px;


	 padding:5px;


}





@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {


.passage p {


	font-size:90%;


	line-height:140%;


	height:215px;


}


.carrot-flat-button {


	font-family: monospace;


	font-size: 12px;


	width:80%;


	line-height:100%;


	border-radius:2px;


	padding:4px 8px;


}


h2 {


	margin:5px 0;


	font-size:130%;


	border-radius:2px;


}


}





@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {


.passage p {


	font-size:90%;


	padding:0 2.5%;


	line-height:140%;


	height:250px;


}


.carrot-flat-button {


	font-family: monospace;


	font-size: 12px;


	width:80%;


	line-height:100%;


	padding:4px 8px;


	border-radius:2px;


	


}


h2 {


	margin:5px 0;


	font-size:130%;


	border-radius:2px;


}





}





@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {


.passage p {


	font-size:190%;


	padding:0 3% 7%;


	line-height:137%;


	height:410px;


}





}





@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {


.passage p {


	font-size:190%;


	padding:0 3%;


	line-height:132%;


	height:520px;


}


}











.audiojs {


	margin:0; 


	width:50px; 


	height:50px;


	position: relative;


}





.audiojs .play-pause{


	height: 40px;


	padding: 0;


	width: 40px;


	position: relative;


	z-index: 10;


	top: 3px;


	left: 3px;


	background: rgba(0,0,0,.7);


	border: 2px solid #fff;


	border-radius: 50%;


	}


.audiojs .play {


background: url("../../include/img/player-graphics.png") 1px 2px no-repeat;


}


	


	


.audiojs .scrubber {


	margin: 0 10px;


	width: 80%;


	}	


.audiojs .time {


	display:none;


}


.audiojs .loaded, .audiojs {


	background:none;


	box-shadow:none;


	}	


	


.audiojs .scrubber{


/*	background:none;


	margin: 0;


	width: 100%;


	top: -43px;


	height:3px;


*/	display:none;


	}	


	


	


	


@-webkit-keyframes rotate {


  0% { -webkit-transform: rotate(0deg); }


  25% { -webkit-transform: rotate(90deg); }


  50% { -webkit-transform: rotate(180deg); }


  75% { -webkit-transform: rotate(270deg); }


  100% { -webkit-transform: rotate(360deg); }


}





	


.audiojs .loading {


	background: url("../../include/img/player-graphics.png") 2px -31px no-repeat;


	animation: rotate 2s linear 0 infinite normal; -webkit-animation: rotate 2s linear 0 infinite normal;


}	


.audiojs .loading, .audiojs .play, .audiojs .pause{


	width:40px;


	height:40px;


	}