body {background: url("/images/games/slider-images/Stars-and-bursts.png") 58% 90% no-repeat #ee1b2e;}

#start {
    font-family:franklin-gothic-urw-cond,sans-serif;
    text-transform:uppercase;
 	position:absolute;
  	top:175px;
	/*left:0px;*/
	left:110px;
    background: #fff;
    color: #ee1b2e;
    font-weight: 700;
    font-size: 1.8em;
    /*font-size: 2.3em;
    max-width: 200px;*/
    text-align: center;
    padding: 2px 0px 0px 0px;
}

#start:hover {cursor:pointer;}

#start::before {
    content: "";
    background: url(/Images/label-small.png) left center no-repeat;
    display: block;
    height: 60px;
    width: 40px;
    top: -5px;
    left: -40px;
    position: absolute;
}

#start::after {
    content: "";
    background: url(/Images/label-small.png) right center no-repeat;
    display: block;
    height: 60px;
    width: 40px;
    top: -5px;
    right: -40px;
    position: absolute;
}

#puzzle-holder 
{
    width:100%; display:block;
    padding: 60px 0px 150px 0px;
}

#puzzle {
  /*width: 700px;*/
  width: 600px;
  /*height:400px;*/
  height:420px;
  position: relative;
  margin: 0px auto;
  border:10px solid white;
  background-color:white;
}

#puzzle-info {
  /*width: 298px;
  width: 198px;*/
  width:180px;
  height: 400px;
  display: block;
  float: right;
}

#image {
	width:400px;
	height:400px;
	/*background-image:url(http://www.onge.co.uk/images/uploads/pic.jpg);*/
	background-image:url("/images/games/slider-images/slider-graphic.jpg");
	position:relative;
	background-color:White;
	margin:0px auto;
	float:left;
}
#image:hover {cursor:pointer;}

#image div {
	width:100px;
	height:100px;
	/*background-image:url(http://www.onge.co.uk/images/uploads/pic.jpg);*/
	background-image:url("/images/games/slider-images/slider-graphic.jpg");
	background-repeat:no-repeat;
	position:absolute;
}
#counter {
	/*position:absolute;
	left:450px;
	top:10px;
	font-family:Arial, Helvetica, sans-serif;*/
	font-family:franklin-gothic-urw-cond,sans-serif;
	text-transform:uppercase;
    font-size:1em;
    font-weight:600;
    color:#ee1b2e;
	display:none;
	text-align:left;
	padding:20px;
	line-height: 1.8em;
}
#clock {
	/*position:absolute;
	left:450px;
	top:100px;
	font-family:Arial, Helvetica, sans-serif;*/
	font-family:franklin-gothic-urw-cond,sans-serif;
	text-transform:uppercase;
	font-size:1em;
	font-weight:600;
	color:#ee1b2e;
	display:none;
	text-align:left;
	padding:20px;
	line-height: 1.8em;
}
#counter span, #clock span {
	font-size:300%;
}
.sq1 {
	background-position:0 0;
}
.sq2 {
	background-position:33% 0;
}
.sq3 {
	background-position:66% 0;
}
.sq4 {
	background-position:100% 0;
}
.sq5 {
	background-position:0 33%;
}
.sq6 {
	background-position:33% 33%;
}
.sq7 {
	background-position:66% 33%;
}
.sq8 {
	background-position:100% 33%;
}
.sq9 {
	background-position:0 66%;
}
.sq10 {
	background-position:33% 66%;
}
.sq11 {
	background-position:66% 66%;
}
.sq12 {
	background-position:100% 66%;
}
.sq13 {
	background-position:0 100%;
}
.sq14 {
	background-position:33% 100%;
}
.sq15 {
	background-position:66% 100%;
}
.sq16 {
	background-position:100% 100%;
}
#pos1 {
	top:0;
	left:0;
}
#pos2 {
	top:0;
	left:25%;
}
#pos3 {
	top:0;
	left:50%;
}
#pos4 {
	top:0;
	left:75%;
}
#pos5 {
	top:25%;
	left:0;
}
#pos6 {
	top:25%;
	left:25%;
}
#pos7 {
	top:25%;
	left:50%;
}
#pos8 {
	top:25%;
	left:75%;
}
#pos9 {
	top:50%;
	left:0;
}
#pos10 {
	top:50%;
	left:25%;
}
#pos11 {
	top:50%;
	left:50%;
}
#pos12 {
	top:50%;
	left:75%;
}
#pos13 {
	top:75%;
	left:0;
}
#pos14 {
	top:75%;
	left:25%;
}
#pos15 {
	top:75%;
	left:50%;
}
#pos16 {
	top:75%;
	left:75%;
}
.pointer {
	background-image:none !important;
	background-color:#fff;
}



#game-popup {
    width:300px; background-color:White; padding:30px 12px 12px 12px; position:absolute; 
    top:45%; left:50%; margin-left:-150px; display:none; z-index:99999;
    -webkit-box-shadow: 4px 4px 2px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    4px 4px 2px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         4px 4px 2px 0px rgba(50, 50, 50, 0.3);
}
    #game-popup-close {color:#ee1b2e; float:right; font-weight:800; margin-top:-25px; font-size:1em;}
    #game-popup-close:hover {cursor:pointer;}
    #game-popup-info {
        display:block; background-color:#ee1b2e; color:White;
        font-family:franklin-gothic-urw-cond,sans-serif;
        font-size:2em; text-transform:uppercase; font-weight:800;  padding:30px 20px 10px;
    }
    #game-popup-info span {
        font-size:0.7em;
    }    
    #game-popup-info::before {
        width:46px; height:46px; display:block; background-image:url("/images/games/four-in-a-row/winner-star.png");
        background-size:46px;
        position:absolute; left:50%; margin:-55px 0px 0px -23px; content:"";
    }
    #game-play-again {
        border:none;                display:inline-block;           font-weight:800;
        text-transform:uppercase;   color:#ee1b2e;                  position:relative;
        background:url(/Images/button3.png) no-repeat;              padding:14px 30px 30px 20px;
        background-size:100%;
        min-width:100px;            font-size:0.6em;                clear:both;
        height: 53px;
    }
    #game-play-again:hover {
        text-decoration:none; background:url(/Images/button3.png) bottom no-repeat;
        padding:14px 30px 30px 20px; background-size:100%; cursor:pointer;        
    }



@media(max-width:768px){



    #start {
        left:50%;
        width:200px;
        margin-left:-100px;
        top:35%;
    }


    #puzzle-holder {
        padding-top:30px;
    }

    #puzzle {
        width:320px;
        border:none;
        background-color:transparent;
    }

    #image {
        width:320px;
        background-color:transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height:320px;
        background-image:url("/images/games/slider-images/slider-graphic2.jpg");
    }

    #image div {
        width:25%;
        height:25%;
        background-image:url("/images/games/slider-images/slider-graphic2.jpg");
    }

    #puzzle-info{
        clear:both;
        float:left;
        width:100%;
        background:white;
        height:130px;
        margin-bottom:20px;
    }

    #counter {
        width:50%;
        float:left;
    }

    #clock {
        width:50%;
        float:right;
    }



}


@media(max-width:330px){

    div#puzzle-holder {
        margin-left:-15px;
    }

}