.pickup:hover {
cursor: pointer;
}

.pickup:active {
cursor: move;
}

#dragarea {
position: relative;
}

/* build a nativity */

#stable {
width:700px; 
height:373px; 
padding-bottom: 300px;
z-index:1;
overflow:visible;
background: url(../fun/nativity/stable.png) no-repeat top left;
}

#items {
z-index:3;
}

#isaac { 
position:absolute;
left:0;
top:420px;
z-index: 10; 
width: 109px; 
height: 172px;
background: url(../fun/nativity/isaac.png) no-repeat top left;
}

#david {
position:absolute;
left:60px;
top:420px;
z-index: 11; 
width: 128px; 
height: 172px;
background: url(../fun/nativity/david.png) no-repeat top left;
}

#moses {
position:absolute;
left:110px;
top:420px;
z-index: 12; 
width: 91px; 
height: 176px;
background: url(../fun/nativity/moses.png) no-repeat top left;
}

#melchior {
position:absolute;
left:500px;
top:400px;
z-index: 13; 
width: 97px; 
height: 194px;
background: url(../fun/nativity/melchior.png) no-repeat top left;
}

#balthazar {
position:absolute;
left:540px;
top:420px;
z-index: 14; 
width: 112px; 
height: 177px;
background: url(../fun/nativity/balthazar.png) no-repeat top left;
}

#gaspar {
position:absolute;
left:580px;
top:420px;
z-index: 15; 
width: 118px; 
height: 176px;
background: url(../fun/nativity/gaspar.png) no-repeat top left;
}

#joseph {
position:absolute;
left:300px;
top:420px;
z-index: 16; 
width: 91px; 
height: 173px;
background: url(../fun/nativity/joseph.png) no-repeat top left;
}

#mary {
position:absolute;
left:350px;
top:420px;
z-index: 17; 
width: 80px; 
height: 173px;
background: url(../fun/nativity/mary.png) no-repeat top left;
}

#sheep-r {
position:absolute;
left:125px;
top:520px; 
z-index: 18; 
width: 104px; 
height: 75px;
background: url(../fun/nativity/sheep-r.png) no-repeat top left;
}

#sheep-l {
position:absolute;
left:100px;
top:520px; 
z-index: 19; 
width: 104px; 
height: 75px;
background: url(../fun/nativity/sheep-l.png) no-repeat top left;
}

#manger {
position:absolute;
left:390px;
top:540px; 
z-index: 20; 
width: 97px; 
height: 55px;
background: url(../fun/nativity/manger.png) no-repeat top left;
}

#jesus {
position:absolute;
left:405px;
top:525px; 
z-index: 21; 
width: 72px; 
height: 29px;
background: url(../fun/nativity/jesus.png) no-repeat top left;
}

#spider {
position:absolute;
left:215px;
top:440px; 
z-index: 22; 
width: 73px; 
height: 58px;
background: url(../fun/nativity/spider.png) no-repeat top left;
}

#gabriel {
position:absolute;
left:245px;
top:605px; 
z-index: 15; 
width: 103px; 
height: 145px;
background: url(../fun/nativity/gabriel.png) no-repeat top left;
}

#kenny {
position:absolute;
left:360px;
top:610px; 
z-index: 08; 
width: 122px; 
height: 142px;
background: url(../fun/nativity/kenny.png) no-repeat top left;
}

#daisy {
position:absolute;
left:500px;
top:650px; 
z-index: 08; 
width: 147px; 
height: 106px;
background: url(../fun/nativity/daisy.png) no-repeat top left;
}


/* decorate a tree */

#tree {
float: right;
width:450px; 
height:650px; 
margin-bottom: 15px;
z-index:1;
overflow:visible;
background: url(../fun/tree/treeblank.gif) no-repeat top left;
}

#candle-blue { 
position:absolute;
left:0;
top:0;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/candle-blue.png) no-repeat top left;
}

#candle-green { 
position:absolute;
left:50px;
top:0;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/candle-green.png) no-repeat top left;
}

#candle-red { 
position:absolute;
left:100px;
top:0;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/candle-red.png) no-repeat top left;
}

#candle-grey { 
position:absolute;
left:150px;
top:0;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/candle-grey.png) no-repeat top left;
}

#star { 
position:absolute;
left:200px;
top:0;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/star.png) no-repeat top left;
}

#light-blue { 
position:absolute;
left:0;
top:60px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/light-blue.png) no-repeat top left;
}

#light-green { 
position:absolute;
left:50px;
top:60px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/light-green.png) no-repeat top left;
}

#light-red { 
position:absolute;
left:100px;
top:60px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/light-red.png) no-repeat top left;
}

#light-orange { 
position:absolute;
left:150px;
top:60px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/light-orange.png) no-repeat top left;
}

#light-pink { 
position:absolute;
left:200px;
top:60px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/light-pink.png) no-repeat top left;
}

#bauble-blue { 
position:absolute;
left:0px;
top:120px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/bauble-blue.png) no-repeat top left;
}

#bauble-green { 
position:absolute;
left:50px;
top:120px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/bauble-green.png) no-repeat top left;
}

#bauble-red { 
position:absolute;
left:100px;
top:120px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/bauble-red.png) no-repeat top left;
}

#bauble-orange { 
position:absolute;
left:150px;
top:120px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/bauble-orange.png) no-repeat top left;
}

#bauble-pink { 
position:absolute;
left:200px;
top:120px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/bauble-pink.png) no-repeat top left;
}

#gift-blue { 
position:absolute;
left:0;
top:180px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/gift-blue.png) no-repeat top left;
}

#gift-green { 
position:absolute;
left:50px;
top:180px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/gift-green.png) no-repeat top left;
}

#gift-red { 
position:absolute;
left:100px;
top:180px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/gift-red.png) no-repeat top left;
}

#gingerbread { 
position:absolute;
left:150px;
top:180px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/gingerbread.png) no-repeat top left;
}

#snowflake { 
position:absolute;
left:200px;
top:180px;
z-index: 10; 
width: 48px; 
height: 48px;
background: url(../fun/tree/snowflake.png) no-repeat top left;
}


/* make a magi */

#magistage {
width:700px; 
height:670px;
margin-bottom: 15px; 
z-index:1;
overflow:visible;
background: #fff;
}

#magi-headblack { 
position:absolute;
left:25px;
top:405px;
z-index: 20; 
width: 60px; 
height: 69px;
background: url(../fun/makeamagi/face-black.png) no-repeat top left;
}

#magi-headbrown { 
position:absolute;
left:85px;
top:405px;
z-index: 20; 
width: 79px; 
height: 69px;
background: url(../fun/makeamagi/face-brown.png) no-repeat top left;
}

#magi-headwhite { 
position:absolute;
left:165px;
top:405px;
z-index: 20; 
width: 79px; 
height: 69px;
background: url(../fun/makeamagi/face-white.png) no-repeat top left;
}

#magi-beardwhite { 
position:absolute;
left:30px;
top:480px;
z-index: 25; 
width: 49px; 
height: 62px;
background: url(../fun/makeamagi/beard-white.png) no-repeat top left;
}

#magi-beardbrown { 
position:absolute;
left:100px;
top:480px;
z-index: 25; 
width: 49px; 
height: 45px;
background: url(../fun/makeamagi/bread-brown.png) no-repeat top left;
}

#magi-beardblack { 
position:absolute;
left:190px;
top:490px;
z-index: 25; 
width: 32px; 
height: 37px;
background: url(../fun/makeamagi/beard-black.png) no-repeat top left;
}

#magi-crown1 { 
position:absolute;
left:20px;
top:565px;
z-index: 30; 
width: 79px; 
height: 34px;
background: url(../fun/makeamagi/crown1.png) no-repeat top left;
}

#magi-crown2 { 
position:absolute;
left:80px;
top:540px;
z-index: 30; 
width: 117px; 
height: 63px;
background: url(../fun/makeamagi/crown2.png) no-repeat top left;
}

#magi-crown3 { 
position:absolute;
left:175px;
top:560px;
z-index: 30; 
width: 71px; 
height: 43px;
background: url(../fun/makeamagi/crown3.png) no-repeat top left;
}

#magi-gift1 { 
position:absolute;
left:320px;
top:605px;
z-index: 35; 
width: 163px; 
height: 51px;
background: url(../fun/makeamagi/gift1.png) no-repeat top left;
}

#magi-gift2 { 
position:absolute;
left:520px;
top:585px;
z-index: 35; 
width: 52px; 
height: 72px;
background: url(../fun/makeamagi/gift2.png) no-repeat top left;
}

#magi-gift3 { 
position:absolute;
left:590px;
top:590px;
z-index: 35; 
width: 41px; 
height: 64px;
background: url(../fun/makeamagi/gift3.png) no-repeat top left;
}

#magi-bodygreen { 
position:absolute;
left:80px;
top:120px;
z-index: 15; 
width: 112px; 
height: 235px;
background: url(../fun/makeamagi/g-body.png) no-repeat top left;
}

#magi-bodypurple { 
position:absolute;
left:290px;
top:120px;
z-index: 15; 
width: 112px; 
height: 235px;
background: url(../fun/makeamagi/p-body.png) no-repeat top left;
}

#magi-bodyyellow { 
position:absolute;
left:520px;
top:120px;
z-index: 15; 
width: 112px; 
height: 235px;
background: url(../fun/makeamagi/y-body.png) no-repeat top left;
}

#magi-g-leftarm1 { 
position:absolute;
left:250px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/g-arm-l1.png) no-repeat top left;
}

#magi-g-leftarm2 { 
position:absolute;
left:260px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/g-arm-l2.png) no-repeat top left;
}

#magi-g-rightarm1 { 
position:absolute;
left:315px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/g-arm-r1.png) no-repeat top left;
}

#magi-g-rightarm2 { 
position:absolute;
left:320px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/g-arm-r2.png) no-repeat top left;
}

#magi-p-leftarm1 { 
position:absolute;
left:400px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/p-arm-l1.png) no-repeat top left;
}

#magi-p-leftarm2 { 
position:absolute;
left:420px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/p-arm-l2.png) no-repeat top left;
}

#magi-p-rightarm1 { 
position:absolute;
left:465px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/p-arm-r1.png) no-repeat top left;
}

#magi-p-rightarm2 { 
position:absolute;
left:470px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/p-arm-r2.png) no-repeat top left;
}

#magi-y-leftarm1 { 
position:absolute;
left:550px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/y-arm-l1.png) no-repeat top left;
}

#magi-y-leftarm2 { 
position:absolute;
left:560px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/y-arm-l2.png) no-repeat top left;
}

#magi-y-rightarm1 { 
position:absolute;
left:615px;
top:405px;
z-index: 10; 
width: 66px; 
height: 94px;
background: url(../fun/makeamagi/y-arm-r1.png) no-repeat top left;
}

#magi-y-rightarm2 { 
position:absolute;
left:620px;
top:495px;
z-index: 10; 
width: 49px; 
height: 103px;
background: url(../fun/makeamagi/y-arm-r2.png) no-repeat top left;
}


/* puzzle */

#puzzle {
position: relative;
width: 675px;
border: 0px solid red;
}

#pieces {
width:250px; 
height:450px; 
position: absolute;
top: 0px;
left: 0px; 
border: 0px solid green;
}

#canvas {
width:400px;
height:400px;
background: #a96705;
position: absolute;
top: 0;
right: 0;
z-index:5;
}

#canvasFinal {
width:400px;
height:400px;
float:right;
position:absolute;
display:none;
z-index:9;
text-align: center;
padding-top: 310px;
}

.drag {
margin:0px;
width:100px;
height:100px;
border:0px solid blue;
z-index:10;
}

.droppableP {
width:156px;
height:156px;
border:0px solid aqua;
background-color:transparent;
float:left;
margin:-28px;
z-index:10;
}

.sensible {
margin:27px;
width:100px;
height:100px;
border:0px solid red;
z-index:10;
}

.piece {
z-index:10;
}


/* slider 

#puzzle {
position:absolute; 
left:380px; 
top:250px; 
width:400px; 
height:400px; 
border: 3px solid #40407C;
}

.sortableitem {
float: left;
width: 100px;
height: 100px;
}

.sorthelper {
background-color: #40407C;
float: left;
}

.sortableactive {
background-color: #eee;
}

.sortablehover {
background-color: #eee;
}

#note {
position:absolute; 
left:350px; 
top:250px; 
width:180px; 
z-index:3;
}

*/


/* sort puzzle */

#puzzle { 
width: 280px; 
margin: 0 auto 10px auto; 
}
	
#sortable { 
list-style-type: none; 
margin:0px; 
padding: 0px; 
width:279px; 
height:279px; 
background:url(../fun/puzzle1/sort01.jpg) center center no-repeat; 
}

#sortable li { 
margin: 3px 3px 0 0; 
float: left; 
width: 90px; 
height: 90px; 
color:#fff;
padding-left: 0;
}

#stats { 
margin-top:25px; 
width:279px; 
text-align: center; 
font-size:18px;}

#time, #moves { 
font-size: 22px;
}

#start {
background: #000; 
color:#fff; 
opacity: 0.75; 
font-size:16px; 
text-align:center; 
padding: 15px 0; 
margin: 125px 0; 
width: 100%; 
float:left; 
cursor:pointer;
}


/* memory */

#pairswrapper { 
position: relative; 
width: 280px; 
height: 372px;
margin: 0 auto;
}

#information { 
position: absolute; 
width: 280px; 
height: 372px;
top: 0; 
left: 0; 
font-size: 120%; 
}

#information p { 
text-align: center; 
padding: 30px;
}
    
#pictures { 
position: absolute; 
top: 0; 
left: 0;
}

.picture { 
width: 93px; 
height: 93px; 
background: url(../fun/memory/memoryb.png); 
float: left;
}

.picture img { 
display: none;
}
  
p#pairsresult { 
text-align: center;
margin: 20px auto 10px auto;
font-size: 120%;
}




/* Smartphones */
@media only screen and (max-width: 651px) {

/* build a nativity */

#stable {
width:320px!important; 
height:208px!important; 
background: url(../fun/nativity/stable-sml.png) no-repeat top left!important;
padding-bottom: 220px!important;
}

#isaac, #moses, #sheep-l, #spider, #gabriel, #daisy, #kenny {
display: none;
}

#david {
left:10px;
top:255px;
}

#melchior {
left:100px;
top:235px;
}

#balthazar {
left:140px;
top:255px;
}

#gaspar {
left:180px;
top:255px;
}

#joseph {
left:150px;
top:50px;
}

#mary {
left:75px;
top:50px;
}

#sheep-r {
left:25px;
top:360px; 
}

#manger {
left:95px;
top:170px; 
}

#jesus {
left:110px;
top:160px; 
}
}


/* Mobile to Tablet */
@media only screen and (max-width: 854px) {

#magistage {
width:100%!important; 
height:600px!important;
margin-bottom: 15px!important; 
z-index:1;
overflow:visible;
background: #fff;
}

#magi-headblack, #magi-crown3, #magi-g-leftarm1, #magi-g-leftarm2, #magi-g-rightarm1, #magi-g-rightarm2, #magi-p-leftarm1, #magi-p-leftarm2, #magi-p-rightarm1, #magi-p-rightarm2, #magi-bodypurple, #magi-bodygreen { 
display: none;
}

#magi-headbrown { 
left:175px;
top:405px;
}

#magi-headwhite { 
left:230px;
top:405px;
}

#magi-beardwhite { 
left:10px;
top:480px;
}

#magi-beardbrown { 
left:65px;
top:480px;
}

#magi-beardblack { 
left:120px;
top:490px;
}

#magi-crown1 { 
left:10px;
top:540px;
}

#magi-crown2 { 
left:90px;
top:515px;
}

#magi-gift1 { 
left:155px;
top:480px;
}

#magi-gift2 { 
left:210px;
top:520px;
}

#magi-gift3 { 
left:260px;
top:520px;
}

#magi-bodyyellow { 
left:45px;
top:240px;
}

#magi-y-leftarm1 { 
left:180px;
top:200px;
}

#magi-y-leftarm2 { 
left:190px;
top:290px;
}

#magi-y-rightarm1 { 
left:245px;
top:200px;
}

#magi-y-rightarm2 { 
left:250px!important;
top:290px!important;
}

/* decorate a tree */

#tree {
float: none!important;
width:320px!important; 
height:462px!important; 
background: url(../fun/tree/treeblank-sml.gif) no-repeat top left!important;
}

#candle-blue, #candle-green, #candle-red, #candle-grey, #bauble-orange, #bauble-pink, #light-pink, #gift-blue { 
display: none;
}

#light-blue { 
left:10px;
top:10px;
}

#light-green { 
left:60px;
top:10px;
}

#light-red { 
left:110px;
top:10px;
}

#light-orange { 
left:160px;
top:10px;
}

#bauble-blue { 
left:10px;
top:50px;
}

#bauble-green { 
left:60px;
top:50px;
}

#bauble-red { 
left:110px;
top:50px;
}

#star { 
left:160px;
top:50px;
}

#gift-green { 
left:10px;
top:100px;
}

#gift-red { 
left:60px;
top:100px;
}

#gingerbread { 
left:110px;
top:100px;
}

#snowflake { 
left:160px;
top:100px;
}

}


/* Landscape Tablets */
@media only screen and (min-width: 421px) and (max-width: 769px) {

/* build a nativity */

#stable {
width:520px!important; 
height:277px!important; 
background: url(../fun/nativity/stable-med.png) no-repeat top left!important;
padding-bottom: 220px!important;
}

#isaac, #moses, #sheep-l, #spider, #gabriel, #daisy, #kenny {
display: none;
}

#david {
left:10px;
top:255px;
}

#melchior {
left:100px;
top:235px;
}

#balthazar {
left:140px;
top:255px;
}

#gaspar {
left:180px;
top:255px;
}

#joseph {
left:150px;
top:50px;
}

#mary {
left:75px;
top:50px;
}

#sheep-r {
left:25px;
top:360px; 
}

#manger {
left:95px;
top:170px; 
}

#jesus {
left:110px;
top:160px; 
}

}