html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'subwayregular';
    src: url('../fonts/subway-webfont.eot');
    src: url('../fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/subway-webfont.woff2') format('woff2'),
         url('../fonts/subway-webfont.woff') format('woff'),
         url('../fonts/subway-webfont.ttf') format('truetype'),
         url('../fonts/subway-webfont.svg#subwayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dottyregular';
    src: url('../fonts/dotty-webfont.eot');
    src: url('../fonts/dotty-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dotty-webfont.woff2') format('woff2'),
         url('../fonts/dotty-webfont.woff') format('woff'),
         url('../fonts/dotty-webfont.ttf') format('truetype'),
         url('../fonts/dotty-webfont.svg#dottyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




html, body {
height:100%;
width:100%;

background-color:#999;
 /*overflow-x: hidden; */
    overflow-y: hidden;	
	padding:0;
	margin:0;
}

#osh { position:absolute; top:0; left:0; height:70%; }

.background{
position:relative;
height:70%;
width:100%;
}

.background img{
	position:relative;
	
	height:100%;
	
}


.overlay{
	
	position:absolute;
	height:100%;
	width:100%;
	background-color:rgba(0,0,0,.75);
	top:0;
	left:0;	
	
}

.popUp{
	position:relative;
	margin:auto;
display:block;
width:50%;
height:auto;
background-color:#1a451f;	
margin-top:50px;
border:#FFF solid 3px;

}

#btnClose{
	position:absolute;
	right:0;
	margin:10px;
	cursor:pointer;
}	

#popUpTitle p{
	padding:10px;
	font-family:'subwayregular';
	color:#FF0;
	display:inline-block;
	margin:10px;
	font-size:32px;
}

.yellowText{
	color:#FF0;	
}

#popUpText p{
	padding:15px;
	color:#FFF;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px
}

#sandwichPopUp{
text-align:center;	
}





.trayHolder img{
	width:100%;
	height:auto;
	cursor:pointer
}

#trayItems{
	position:relative;
width:50%;	
}


#dragTray{
	float:right;
color:#FF0;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	margin-right:50px
}

#dragTray p{
font-size:20px;	
}

#dragTray img{
float:right;
height:100%;
width:auto;	
}

#dragTrayReset{
	position:relative;
	
	color:#FF0;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	margin-top:50px;
	margin-left:20px;
	cursor:pointer;
}



#dropHolder{
	position:absolute;
display:block;
width:100%;
height:55%;
/*background-color:rgba(0,0,0,0.5);*/
top:35%;
left:0;	
}



.dropBox{
display:inline-block;
width:22%;
height:100%;
position:relative;
/*background-color:#093;*/
float:left;	
/*border: solid medium  #ff0*/
}

#drop1 , #fill1, #text1{
margin-left:2%;
}

#drop2, #fill2, #text2{
margin-left:1%;
width:23%	
}

#drop3, #fill3, #text3{
margin-left:3%;
	
	
}

#fillHolder{
	position:absolute;
display:block;
width:100%;
height:24%;
/*background-color:rgba(0,0,0,0.5);*/
top:59%;
left:0;	
}



.fillBox{
display:inline-block;
width:22%;
height:100%;
position:relative;
/*background-color:#ff0;*/
float:left;	
/*border:solid medium #F00;*/
}

#fill0 img{
padding-left:10%	
}



#fill1 img, #fill2 img, #fill3 img{
width:100%;
height:30%;
margin-bottom:5px;	
}


#textHolder{
	position:absolute;
display:block;
width:100%;
height:16%;
/*background-color:rgba(0,0,0,0.5);*/
top:34%;
left:0;	
}



.textBox{
	font-family:Arial, Helvetica, sans-serif;
display:inline-block;
width:22%;
height:100%;
position:relative;
/*background-color:#f00;*/	
float:left;
font-size:1.5em;
color:#1a451f;
/*border:solid medium #06C;*/
}



#dragWord{
	top:-75px;
	display:inline-block;
	left:7%;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
font-size:2.5em;
cursor:pointer;
background-color:#1a451f;
padding:10px;
}



#receipt{
	padding:10px;
font-family:'dottyregular';
text-align:center;
	position:absolute;
	top:0;
	
display:block;
width:25%;
height:60%;
background-color:#FFF;
margin-left:10%;
margin-top:5%;
border:#000 solid 2px;
}

#receiptTop{
margin-top:10px;	
}

#receiptSentence0, #receiptSentence1, #receiptSentence2, #receiptSentence3, #receiptSentence4{
	font-size:2em;	
	margin-top:10px;
}

#receiptBottom{
	margin-top:50px;
position:relative;
bottom:0;	
}

#printBtn{
	position:relative;
	font-family:'subwayregular';
	float:right;
	margin-right:20px;
	margin-top:20px;
display:block;
color:#FF0;
font-size:2em;
border:#FFF solid 2px;
padding:3px;
cursor:pointer;

	
}


.footer{
	position:absolute;
	bottom:0;
	background-color:#1a451f;
	height:10%;
	width:100%
}	

#sentenceCount, #prevSentence{
	font-family:'subwayregular';
	color:#FF0;
	display:inline-block;
	margin:10px;
	font-size:32px;
}	

#counter, #sentenceDisplay{
	color:#FFF;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px
}

#bottom1, #bottom2{
	width:100%;
	text-align:center;
}


/*IPAD LANDSCAPE****************************************************************************************************/

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

.popUp{
	
width:60%;
	
margin-top:10px;

}

.dropBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#069;*/	
}

#drop1{
margin-left:1%	
}

#drop2{
margin-left:1%;
width:200px;	
}

#drop3{
margin-left:2%;
width:200px;	
}


.fillBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#f00;*/	
}

#fill0 img{
padding-left:2%	
}

#fill1{
margin-left:1%	
}

#fill2{
margin-left:1%;
width:200px;	
}

#fill3{
margin-left:1%;
width:200px;	
}

.textBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#f00;*/	
}

#text1{
margin-left:1%	
}

#text2{
margin-left:1%;
width:200px;	
}

#text3{
margin-left:1%;
width:200px;	
}




#printBtn{
	position:absolute;
	font-family:'subwayregular';
	float:right;
	right:20px;
	bottom:65px;
display:inline-block;
background-color:#1a451f;

	
}

#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:25%;
	height:auto;

}

}


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

#dropHolder{
	height:23%;
/*background-color:rgba(0,0,0,0.5);*/
top:13%;
}


.dropBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#069;*/	
}

#drop1{
margin-left:1%	
}

#drop2{
margin-left:1%;
width:200px;	
}

#drop3{
margin-left:2%;
width:200px;	
}

#fillHolder{
	top:24%;
	height:10%
}

.fillBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#f00;*/
}

#fill0 img{
padding-left:2%	
}

#fill1{
margin-left:1%	
}

#fill2{
margin-left:2%;
width:200px;	
}

#fill3{
margin-left:3%;
width:200px;	
}


#textHolder {
	top:14%	;
	height:7%
}



.textBox{
display:inline-block;
width:190px;
height:100%;
position:relative;
/*background-color:#f00;*/
}

#text1{
margin-left:2%	
}

#text2{
margin-left:2%;
width:200px;	
}

#text3{
margin-left:3%;
width:200px;	
}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.background{
	
height:40%;
width:auto;	
}




#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:30%;
	height:auto;

}

}

/*MEL LAPTOP MEDIA QUERY ******************************************************/
@media only screen and (min-width:1300px) and (max-height:653px) { 
	.popUp{
	
width:50%;
	
margin-top:10px;

}

.popUp img{
	
width:40%;
height:auto;
	
}
	
	.dropBox{
display:inline-block;
width:180px;
height:100%;
position:relative;
/*background-color:#069;	*/
}

#drop1 , #fill1, #text1{
margin-left:2%	
}

#drop2, #fill2, #text2{
margin-left:1%;
width:200px;	
}

#drop3, #fill3, #text3{
margin-left:2%;
width:190px;	
}



.fillBox{
display:inline-block;
width:180px;
height:100%;
position:relative;
/*background-color:#ff0;*/
float:left;	
}

#fill0 img{
padding-left:3%	
}


.textBox{
	font-family:Arial, Helvetica, sans-serif;
display:inline-block;
width:180px;
height:100%;
position:relative;
/*background-color:#f00;*/
float:left;
font-size:1em;
color:#1a451f;
}

#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:30%;
	height:auto;

}

}