/*butchs_run*/
/*start screen*/

body{
    background: #090909;
    font-family: 'Roboto Condensed', sans-serif;
	background-color: #f2f2f2;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;

    overflow: hidden;
    -webkit-touch-callout: none !important;
}

#wrapper{
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    user-select: none;
}

#gamecontainer {
	width:1920px;
    height:1080px;
    background: url(images/dot-jot_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

.gamelayer {
	width:100%;
	height:100%;
	position:absolute;
	display:none;
	background: url(images/dot-jot_bg.jpg);
}

.game-title{
    position: absolute;
    top: 10%;
    right: 15%;
    text-align: right;
    width: 100%;

    font-family: "Courier New", Courier, monospace;
    font-size: 90px;
    line-height: 80px;

    color: yellow;
    text-shadow: -2px 0 blue, 0 2px blue, 2px 0 blue, 0 -2px blue;
}

.game-option{
    position: relative;
    top: 65%;
    left: 15%;
    text-align: left;
    display: block;

    font-family: "Courier New", Courier, monospace;
    font-size: 48px;

    color: yellow;
    text-shadow: -2px 0 blue, 0 2px blue, 2px 0 blue, 0 -2px blue;

    cursor: pointer;
}

.game-option:hover{
    color: pink;
}

#loadingscreen{
    background: rgba(100, 100, 100, 0.7);
}

#loadingmessage{
    position: relative;
    top: 400px;
    text-align: center;

    height: 48px;
    color: white;
    background: url(images/loader.gif) no-repeat center;
    font: 12px Arial;
}

#gameinterfacescreen {
    background: url(images/dot-jot_bg.jpg) no-repeat;
    background-position: center;
}

 .controller_back{ 
    right: 0px;
     bottom: 0px;
    position: absolute;
 }
 .play_area{
     background-position: center;
     background-repeat: no-repeat;
 
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     transform-origin: center center;
 }

#up_arrow{
	height: 65px;
	width: 77px;

    position: absolute;
    right: 375px;
	bottom: 190px;
	 
	background: url(images/arrow_up.png) no-repeat; 
	border: 0;
 }
 #down_arrow{
	height: 65px;
	width: 77px;

    position: absolute;
    right: 375px;
    bottom: 40px;

	background: url(images/arrow_down.png) no-repeat; 
	border: 0;
}
#right_arrow{
    height: 77px;
    width: 65px;

    position: absolute;
    right: 305px;
    bottom: 110px;

	background: url(images/arrow_right.png) no-repeat; 
	border: 0;
}
#left_arrow{
    height: 77px;
    width: 65px;

    position: absolute;
    right: 460px;
    bottom: 110px;

	background: url(images/arrow_left.png) no-repeat; 
	border: 0;
}

#gameinterfacescreen canvas{
    position: absolute;
    left: 0px;
    top: 15px;    
}
/* Font formatting */

h1 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 130%;
	text-align: left;
	color: #11517a;
}
h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 100%;
	color: #24b3ce;
	text-transform: uppercase;
	text-align: left;
}
p {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 105%;
	color: #24b3ce;
	text-align: left;
}
#memory-left p {
	font-size: 160%;
	line-height: 130%;
	color: #ffffff;
}
/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	background-color: #FFFFFF;
	max-height: 1080px;
}
/* Navigation */

#back {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#logo {
	margin-left: 100px;
	width: 600px;
	height: 58%;
}
/* Jot Dot */

.dotjot_start {
	background-color: #B3B3B3;
	background-repeat: no-repeat;
	background: url(images/hm_start_bg.png);
	height: 1080px;
	max-width: 1920px;
	text-align: center;
}
#dotjotdirections
{
	top: 40%;
	padding-top: 10px;
	padding-right: 35%;
	padding-left: 10%;
	padding-bottom: 10px;
	position: absolute;
	width:55%;
}

#dotjotdirections p {
text-align:center;
font-size:25px;
line-height:150%;
}
.dotjotdirections 
{	color: #ffffff;
	text-align: center;
	font-size: 300%;
	font-weight: 300;

}
.dotjot {
	/* background-color: #B3B3B3; */
	background-repeat: no-repeat;
	max-width: 1920px;
	text-align: center;
	max-height: 1080px;
	height: 100%;
	width: 100%;
	background: url(images/dot-jot_bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.dotjottitle {
	width: 100%;
	padding-left: 3%;
	text-align: right;
	padding-top: 0px;
	float: left;
}
.dotjottitle img {
	width: 100%;
	height: 100%;
}
.dotjotscore {
	float: right;
	width: 20%;
    left: 1250px;
    top: 240px;
	position: absolute;
	color: #ffffff;
	font-size: 250%;
	border: 1px solid #ffffff;
	padding: 20px 90px;
	border: 5px solid #ffffff;
	margin-bottom: 10px;
}
.dotjotlives {
	float: right;
	width: 20%;
    left: 1250px;
    top: 345px;
	position: absolute;
	color: #ffffff;
	font-size: 250%;
	border: 1px solid #ffffff;
	padding: 20px 90px;
	border: 5px solid #ffffff;
	margin-bottom: 10px;
}
.dotjotclient {
	float: right;
	width: 20%;
    left: 1250px;
    top: 450px;
	position: absolute;
	color: #ffffff;
	font-size: 125%;
	border: 1px solid #ffffff;
	padding: 10px 90px 20px 90px;
	border: 5px solid #ffffff;
	margin-bottom: 10px;
}

.dotjot-right img {
	width: 100%;
	height: 100%;
}
.dotjot-left {
	float: left;
	width: 32%;
	margin-top: 0px;
	margin-right: 3%;
	margin-left: 3%;
	margin-bottom: 0;
	padding-bottom: 0;
	/* border: 1px solid #efef12; */
	text-align: center;
	height: 88%;
	background-size: contain;
}
.dotjot-left img {
	width: 100%;
	height: 100%;
}
.shoppinglogoscript {
	border: 1px solid #FF00D6;
	margin: 295px auto 0 auto;
	width: 540px;
	height: 540px;
	text-align: center;
}
#sidebar {
	float: right;
    left: 1210px;
    top: 5px;
    position: absolute;
}

/* Mobile */
@media (max-width: 320px) {
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
}