@font-face {
    font-family: 'Chewy';
    src: url('fonts/Chewy.otf') format('opentype'),
		url("fonts/Chewy.ttf") format("truetype"),
        url("fonts/Chewy.woff") format("woff"),
        url("fonts/Chewy.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arial Narrow Bold';
    src: url("fonts/Arial Narrow Bold.otf") format("opentype"),
		 url("fonts/Arial Narrow Bold.ttf") format("truetype"),
		 url("fonts/Arial Narrow Bold.woff") format("woff"),
		 url("fonts/Arial Narrow Bold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arial';
    src: url("fonts/arial.otf") format("opentype"),
		 url("fonts/arial.ttf") format("truetype"),
		 url("fonts/arial.woff") format("woff"),
		 url("fonts/arial.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arial Bold';
    src: url("fonts/Arial-BoldMT.otf") format("opentype"),
		 url("fonts/Arial Bold.ttf") format("truetype"),
		 url("fonts/Arial-BoldMT.woff") format("woff"),
		 url("fonts/Arial-BoldMT.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Digital-7Italic';
    src: url("fonts/Digital-7Italic.otf") format("opentype"),
		 url("fonts/Digital-7Italic.ttf") format("truetype"),
		 url("fonts/Digital-7Italic.woff") format("woff"),
		 url("fonts/Digital-7Italic.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Digital-7MonoItalic';
    src: url("fonts/Digital-7MonoItalic.otf") format("opentype"),
		 url("fonts/digital-7.monoitalic.ttf") format("truetype"),
		 url("fonts/Digital-7MonoItalic.woff") format("woff"),
		 url("fonts/Digital-7MonoItalic.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

body{
}
.shellWrapper{
	position:absolute;
	right:0px;
	top:0px;
	width:1024px;
	height:768px;
	background:#8E3CC7;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	border-radius: 20px;
    transform-origin: left top;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.shellWrapper::after{
	content:".";
	font-family:Chewy;
	opacity: 0;
}

.screenHolder{
	position:absolute;
	width:1004px;
	height:748px;
	background:#FFFFFF;
	margin:10px;
	overflow:hidden;
	border-radius: 14px;
	box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
}

.screenHolder1{
	position:absolute;
	width:1004px;
	height:748px;
	background:#FFFFFF;
	margin:10px;
	overflow:hidden;
	display:none;
	z-index:101;
	border-radius: 14px;
	box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0px 0px 0px 4px rgba(0,0,0,0.2);
}

.loader{
	position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: rgba(255,255,255,1);
    background-image: url(../media/images/loading.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin: 10px;
    border-radius: 10px;
	z-index: 110;
}

.loader .patch{
	position:absolute;
	width:100%;
	height:82px;
	background-position:100% 100%;
	background-repeat:no-repeat;
}

.loadPercent{
	position: absolute;
    width: 100%;
    top: -366px;
    text-align: center;
    font-size: 20px;
    font-family: Arial;
	display: none;
}

.overlay{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	background:rgba(0,0,0,0.5);
	z-index: 40;
}

.endScreenHolder{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	background:rgba(0,0,0,0.5);
	z-index: 52;
}

.deviceTrigger{
	position:absolute;
	left: calc(50% - 50px);
	top: calc(50% - 34px);
	width:104px;
	height:64px;
	background-color:#FFFFFF;
	background:url(../media/images/play.png);
	background-position:50% 50%;
	background-size:100% 100%;
	background-repeat:no-repeat;
}

#next{
	position:absolute;
	left: 888px;
	top: 699px;
	width:107px;
	height:50px;
	cursor:default;
	opacity:1;
	display:none;
	background:url(../media/images/next_normal.png);
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.next_over{
	background:url(../media/images/next_over.png) !important;
	background-size:100% 100% !important;
	background-repeat:no-repeat !important;
}
#end{
	position:absolute;
	left: 830px;
	top: 699px;
	width:165px;
	height:50px;
	cursor:default;
	opacity:1;
	display:none;
	background:url(../media/images/end_normal.png);
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.end_over{
	background:url(../media/images/end_over.png) !important;
	background-size:100% 100% !important;
	background-repeat:no-repeat !important;
}
.deviceTrigger .playtext{
	position:absolute;
	left: -196px;
	top: 73px;
	width: 500px;
	text-align:center;
	font-size:19px;
	font-family:Arial;
}

.endScreen{
	position: absolute;
	left: 220px;
    width: 540px;
    top: 200px;
    height: 180px;
    background: white;
    text-align: center;
    font-size: 30px;
    font-family: Arial;
    padding-top: 60px;
}

.endCloseBtn{
	position:absolute;
	right:0px;
	top:0px;
	width:20px;
	height:20px;
	background:url(../media/images/closebtn.png);
	background-size:100% 100%;
}

.menuHolder{
	position: absolute;
	width:100%;
	z-index:50;
}

.title{
	position:absolute;
	right: 0px;
	top: 0px;
	width: 1004px;
	height: 62px;
	background: #009CCE;
	border: 4px solid #009CCE;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	border-bottom: 0px;
	box-sizing: border-box;
}

.title div{
	letter-spacing: 1px;
	 text-shadow:
   -1px -1px 0 #0270C4,  
    1px -1px 0 #0270C4,
    -1px 1px 0 #0270C4,
     1px 1px 0 #0270C4;
}

.controls-bg{
	background:rgb(152,173,180);
}

.menu-box{
	width:330px;
	height:34px;
	margin-bottom: 2px;
    background: #80c8ff;
}
.menu-box-active{
    background: #ffffff;
}
.menu-box:hover{
    background: #cce9ff;
    cursor: pointer;
}
.menu-box .icon{
	position: relative;
	width:26px;
	height:26px;
    background: #80f8ff;
	left:4px;
	top:4px;
	float: left;
}
.menu-box .number{
	position: relative;
	width:auto;
	height:22px;
	left:9px;
	top:4px;
	float: left;
	font-size: 18px;
    font-family: Arial;
    padding-top: 4px;
}
.menu-box .title{
	position: relative;
	width:285px;
	height:22px;
	left:12px;
	top:4px;
	float: left;
	font-size: 18px;
    font-family: Arial;
    padding-top: 4px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.nav-holder{
	position:absolute;
	height:50px;
	width:100%;
	bottom:0px;
}

.nav-holder #right{
	position:absolute;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid white;
}

.nav-holder #left{
	position:absolute;
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 

	border-right:15px solid white; 
}

.nav-holder .dot{
	position:absolute;
	height:10px;
	width:10px;
	border:2px solid white;
	border-radius:50%;
}

.ui-draggable :after{
	position: absolute;
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -4px;
    
   
}
.emptyBorder{
    position: absolute;
    left: -7px;
    top: -8px;
    right: -7px;
    bottom: -7px;
    border-width: 13px;
    border-style: solid;
    -webkit-border-image: url(../media/images/borderImage.png) 12 round; /* Safari 3.1-5 */
    -o-border-image: url(../media/images/borderImage.png) 12 round; /* Opera 11-12.1 */
    border-image: url(../media/images/borderImage.png) 12 round;
    border-radius: 15px;
}
.emptyBorder1 {
    position: absolute;
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
    border: 4px dashed #758FBF;
    border-radius: 15px;
}
.greyOut {
    color:#999999
} 
b{
font-family: 'Arial Bold';
}

div.hideAfter:after{
	display: none;
}