/* CSS Document */

body {background-color:#8b5d28;margin:0px 0px; padding:0px 0px;color:#333333;
	font-family: 'Kreon', 'Lucida Console', 'monospace';
	font-size:2.15vw; background-image:url(cork.png); background-repeat: repeat;
	overflow-x: hidden;overflow-y: scroll;font-weight:300;
}
#wrap {width:100%;margin:0 auto;}
#header img {width:100%;position:relative;z-index:800;}
img {position:absolute;}
.card {background-image:url(card.png);background-repeat:no-repeat;background-size:100%;
	width:65%;margin:0 auto;}
.card p {display:block;width:44%;float:left;margin-left:3%;line-height: 145%;}
.clear {display:block;width:100%;clear:both;height:25px;}

.button {background-image:url(unchecked.png);background-repeat:no-repeat;background-size:100%;
	cursor: pointer; padding-right:20%;}
.button:hover {background-image:url(hover.png);}
.button.active {background-image:url(select.png);}

.z200, .z400, .z800, .z900 {position:relative;z-index:200;width:65%;margin:0 auto;}
.z400 {z-index:400;}
.z800 {z-index:800;}
.z900 {z-index:900;}

#card1 {position:relative;z-index:600;top:-12vw;}
#card2 {position:relative;z-index:600;top:1vw;left:7vw;}
#card3 {position:relative;z-index:300;top:30vw;left:-7vw;}
#card4 {position:relative;z-index:300;top:55vw;}
#card5 {position:relative;z-index:700;top:80vw;left:-5vw;}

#blue {width:18%;top:-35vw;left:18vw;}
#sticker {width:58%;top:-22vw;left:35vw;}
#sheet {width:98%;top:-28vw;left:-20vw;}
#kdx {width:107%;top:-15vw;left:5vw;}
#lucekey {width:42%;top:7vw;left:50vw;}
#play {width:50%;top:-55vw;left:-5vw;}
#addie {width:107%;top:18vw;left:-5vw;}
#s50 {width:70%;top:4vw;left:-15vw;}
#luce {width:107%;top:45vw;left:-5vw;}
#s100 {width:75%;top:25vw;left:25vw;}
#cart {position:absolute;width:50%;top:80vw;left:-12vw;}
#pay {position:absolute;width:60%;top:-20vw;left:-7vw;}
#shop {position:absolute;width:50%;top:-14vw;left:37vw;}

@media only screen and (max-width: 1024px) {}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body{font-size:3vw; }
.card {width:90%;padding-top:1%;}
.card p {line-height: 143%;}
#card1 {left:0vw;}
#card2 {left:0vw;}
#card3 {left:0vw;}
#card4 {left:0vw;}
#card5 {left:0vw;}

#blue {width:23%;top:-40vw;left:15vw;}
#sheet {width:98%;top:-28vw;left:-35vw;}	
#lucekey {width:42%;top:34vw;left:60vw;}
#play {width:50%;top:-65vw;left:-5vw;}
#s50 {width:70%;top:-5vw;left:-18vw;}
#s100 {width:75%;top:20vw;left:25vw;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}