/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 16, 2018, 3:02:20 PM
    Author     : Shaam
*/

body{
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}



table img{    
    padding: 0px !important;
    margin: 0px !important;
    position: relative;
    vertical-align: top;}

.clk1{
    position:absolute;
    z-index:0;
}


.clk1[clkid="1"] {
    top: 160px;
    left: 83px;
}

.clk1[clkid="2"] {
    top: 160px;
    left: 344px;
}

.clk1[clkid="3"] {
    top: 349px;
    left: 52px;
}

.clk1[clkid="4"] {
    top: 349px;
    left: 344px;
}

.clk1[clkid="5"] {
    top: 538px;
    left: 72px;
}

.clk1[clkid="6"] {
    top: 538px;
    left: 325px;
}

.clk1[clkid="7"] {
    top: 158px;
    left: 38px;
}	

.clk1[clkid="8"] {
    top: 158px;
    left: 258px;
}

td{
    position:relative;
}

.clk1[clkid="9"] {
    top: 345px;
    left: 58px;
}

.clk1[clkid="10"] {
    top: 372px;
    left: 268px;
}		

.wPaint-canvas{
    opacity:0.5;}

button.jp-stop {
    background-color: transparent;
    border: hidden;
    color: transparent;
}

#jquery_jplayer_1{
    display:none;
}

.inactive_click{
    display:none;
}

div#jp_container_1 {
    position: absolute;
    top: 720px;
    left: 670px;
}




button.jp-play {
    background-color: transparent;
    border: hidden;
    color: transparent;
}

img.p3image1 {
    top: 25%;
    display: none;
    max-width: 95%;
}

img.p2image1 {
    top: auto;
    max-width: 87%;
    left: 40px;
    bottom: 13%;
    display: none;
}

img.p4image1 {
    top: 22%;
    display: none;
    max-width: 90%;
    left: 30PX;
}

img.p5image1 {
    top: -10px;
    max-width: 90%;
    left: 7px;
    display: none;
}
.clickedimg img{
    width:100%;
    height:auto;
    display: block;
    min-height: 0 !important
}
.clickedimg{
    position: relative;
}
.clickedimg .blink_me{
    top:50%;
    left:50%;
}
.clickedimg:nth-child(2) .blink_me
{
    left:75%;
}
.clickedimg.col-50{
    width: 50%;
    float: left;
}
.clickedimg {
    position: relative;
    float: left;
    width: 100%;
    cursor: pointer;
}
.clickedimg.col-37 {
    width: 37.5%;
    float: left;
}
.clickedimg.col-31 {
    float: left;
    width: 31.25%;
}
img.area {
    width: 15px;
    position: absolute;
    cursor:pointer;
}

.clicker2{
    opacity:0;
}
.choser {
    width: 2vw;
    height: 2vw;
    position: absolute;
    cursor: pointer;
    background-size: cover;
    background-size: 100%;
}
.choser[ids="1"], .choser[ids="3"],.choser[ids="5"],.choser[ids="7"],.choser[ids="9"],.choser[ids="11"]{
    background-image:url(../../images/icons/correct-gray.png);
}

.choser[ids="2"], .choser[ids="4"],.choser[ids="6"],.choser[ids="8"],.choser[ids="10"],.choser[ids="12"]{
    background-image:url(../../images/icons/wrong-gray.png);
}

.choser[ids="12"] {
    /*top: 64%;*/
    /*left: 46%;*/
    top: 68%;
    left: 35%;
}
.choser[ids="11"] {
    /*top: 64%;*/
    /*left: 36%;*/
    top: 68%;
    left: 22%;
}
.choser[ids="10"] {
    top: 30%;
    left: 80%;
}
.choser[ids="9"] {
    top: 30%;
    left: 70%;
}
.choser[ids="8"] {
    top: 30%;
    left: 34%;
}
.choser[ids="7"] {
    top: 30%;
    left: 24%;
}


.choser[ids="6"] {
    top: 64%;
    left: 46%;
}
.choser[ids="5"] {
    top: 64%;
    left: 36%;
}
.choser[ids="4"] {
    top: 30%;
    left: 80%;
}
.choser[ids="3"] {
    top: 30%;
    left: 70%;
}
.choser[ids="2"] {
    top: 30%;
    left: 34%;
}
.choser[ids="1"] {
    top: 30%;
    left: 24%;
}

.wrong-green{background-image:url(../../images/icons/wrong-green.png)  !important;}
.wrong-red{background-image:url(../../images/icons/wrong-red.png)  !important;}
.correct-green{background-image:url(../../images/icons/correct-green.png) !important;}
.correct-red{background-image:url(../../images/icons/correct-red.png)  !important;}

.wPaint-menu{
    display: visible !important;
}


#diagramContainer {
    padding: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}    


.item {
    height:80px; width: 80px;
    float: left;
    position:absolute;
}


div#item_left1 {
    left: 130px;
    top: 120px;
}

div#item_right1 {
    left: 240px;
    top: 130px;
}

div#item_left2 {
    left: 130px;
    top: 220px;
}

div#item_right2 {
    left: 240px;
    top: 220px;
}

div#item_left3 {
    left: 130px;
    top: 320px;
}

div#item_right3 {
    left: 240px;
    top: 320px;
}

div#item_left4 {
    left: 130px;
    top: 400px;
}

div#item_right4 {
    left: 240px;
    top: 400px;
}

div#item_left5 {
    left: 130px;
    top: 470px;
}

div#item_right5{
    left: 240px;
    top: 470px;
}

div#item_left6 {
    left: 130px;
    top: 560px;
}

div#item_right6{
    left: 240px;
    top: 560px;
}


.green{
    background-image:url(../../images/icons/correct1.png)}
.red{
    background-image:url(../../images/icons/wrong1.png)}
.jsplumb-endpoint.jsplumb-endpoint-anchor.jsplumb-draggable.jsplumb-droppable.jsplumb-endpoint-connected.jsplumb-endpoint-full {
    z-index: 1;
}
#Image-Maps-Com-image-maps-2016-01-09-052156{
    width:100%;
    height:100%;
}

.blink_me.centric{
    top: 50%;
    left: 50%;
}

img.clicker2{
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    transform: none;
}
img#image_001{
    width: 24%;
    bottom: 12.4%;
    position: absolute;
    top: auto;
    left: 16.3%;
}
img#image_002 {
    width: 29%;
    position: absolute;
    top: 36%;
    left: 56%;
}

img#image_003{
    position: absolute;
    width: 27%;
    left: 14%;
    top: 70%;
}

img#image_004{
    position: absolute;
    width: 19%;
    left: 60.9%;
    top: 46.4%;
}


img#image_005{
    position: absolute;
    width: 34%;
    left: 54%;
    top: 10.5%;
}

img#image_006{
    position: absolute;
    width: 27%;
    left: 15%;
    top: 30.5%;
}

.magazine-viewport .page img[sid="1"]{
    top: 6%;
    width: 28%;
    position: absolute;
    left: 7%;
}

.blink_me[sid="1"]{
    top: 14%;
    left: 21%;
}

.blink_me[sid="2"]{
    top: 14%;
    left: 68%;
}

.blink_me[sid="3"]{
    top: 36%;
    left: 20%;
}

.blink_me[sid="4"]{
    top: 36%;
    left: 68%;
}

.blink_me[sid="5"]{
    top: 60%;
    left: 20%;
}

.blink_me[sid="6"]{
    left: 68%;
    top: 61%;
}

.blink_me[sid="7"]{
    top: 81%;
    left: 20%;
}

.blink_me[sid="8"]{
    top: 81%;
    left: 68%;
}
.magazine-viewport .page img[sid="2"]{
    width: 37%;
    top: 6%;
    position: absolute;
}

.magazine-viewport .page img[sid="3"]{
    position: absolute;
    top: 28%;
    left: 7%;
    width: 32%;
}
.magazine-viewport .page img[sid="4"]{
    position: absolute;
    top: 28%;
    left: 51%;
    width: 31%;
}
.magazine-viewport .page img[sid="5"]{
    position: absolute;
    top: 50%;
    left: 7%;
    width: 26%;
}
.magazine-viewport .page img[sid="6"]{
    position: absolute;
    top: 50%;
    left: 51%;
    width: 26%;
}
.magazine-viewport .page img[sid="7"]{
    position: absolute;
    top: 75%;
    left: 7%;
    width: 28%;
}

.magazine-viewport .page img[sid="8"]{
    position: absolute;
    top: 76%;
    left: 52%;
    width: 32%;
}


div#wPaint-demo60 {
    position: absolute;
    width: 500px;
    height: 430px;
    top: 36% !important;
    left: 14% !important;
}
.eraser {
    width: 16%;
    position: absolute;
    top: 84%;
    left: 8%;
    height: 10%;
    cursor: pointer;
}
.magazine-viewport .page img[title="black"]{
    top: 87%;
    left: 29%;
    transform: rotate(52deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="red"]{
    top: 81%;
    left: 26%;
    transform: rotate(45deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="blue"]{
    top: 80%;
    left: 15%;
    transform: rotate(29deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="brown"]{
    top: 76%;
    left: 10%;
    transform: rotate(23deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="green"]{
    top: 68%;
    left: 8%;
    transform: rotate(24deg);
    width: 3.5%;
}
.magazine-viewport .page img[title="orange"]{
    top: 77%;
    left: 5%;
    transform: rotate(14deg);
    width: 3.5%;
}

.magazine-viewport .page img[title="orange"] {
    right: 5%;
    left: auto;
    transform: rotate(-14deg);
}

.magazine-viewport .page img[title="green"] {
    right: 8%;
    left: auto;
    transform: rotate(-24deg);
}
.magazine-viewport .page img[title="brown"] {
    right: 10%;
    left: auto;
    transform: rotate(-23deg);
}
.magazine-viewport .page img[title="blue"] {
    right: 15%;
    left: auto;
    transform: rotate(-29deg);
}
.magazine-viewport .page img[title="red"] {
    right: 26%;
    left: auto;
    transform: rotate(-45deg);
}
.magazine-viewport .page img[title="black"] {
    right: 29%;
    left: auto;
    transform: rotate(-52deg);
}