@charset "UTF-8";

html{
	background:rgba(0,0,0,1.00);
}
body{
	font-family: "karmina-sans", Helvetica, Arial, sans-serif;
	/*color:#5E5745;*/
	color:#736357;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}

/***** testing and debugging only - remove when live *****/
#screensize{
	position: absolute;
	top: 40px;
	right: 10px;
	font-size: 24px;
	color: #E775D8;
}
/* *************************************************** */

#topbarTitle{
	display:none;
}
#imgPreLoad{
	display:none;
}
#title{
	text-align: center;
	margin: 43px auto 0;
	height: 100px;
	position: relative;
	background-image: url(../img/bar.png);
	background-repeat: repeat-x;
	background-position: 0% 30px;
}
#gallipoliLogo{
	height:100px
}
#gallipoliLogo img{
	height:100%;
}

#wrap{
	max-width:960px;
	margin: 0 auto 0;
	position:relative;
	overflow: hidden;
	padding-bottom: 90px;
}
h1,p{
	margin:0;
}
#reset, #reset2{
	position: absolute;
	top:3px;
	right:3px;
	background:url(../img/reset.png);
	width:30px;
	height:45px;
	z-index: 10;
	display:none;
}
#reset2{
	z-index:110;
}

.droppable{
	position: absolute;
	z-index: 95;
}

.draggable{
	position:absolute;
	top:0;
	left:0;
	z-index:10;	
	width:inherit;
	height:inherit;
	background-position: center center;
}

#items{
	float:left;
	position:relative;
	max-width:600px;
}

.item{
	width:160px;
	height:160px;
	/*border:1px solid #5E5745;*/
	background:rgba(187,174,147,0.6);
	border-radius:5px;
	display:inline-block;
	float:left;
	margin:5px;
	position: relative;

}
.itemName{
	font-size:24px;
	font-weight:700;
	margin-left:5px;
	cursor:pointer;
	color:rgba(115,29,29,1.00);
}
.nopicItem{
	width:160px;
	height:50px;
	background:rgba(187,174,147,0.6);
	border-radius:5px;
	display:inline-block;
	float:left;
	margin:5px;
	position: relative;
}
.info{
	position:absolute;
	bottom:5px;
	right:5px;
	background:url(../img/info.png);
	width: 26px;
	height:26px;
	background-size:cover;
	cursor:pointer;
	z-index:100;
}
.itemHolder{
	position:relative;
	width:160px;
	height:130px;
	cursor:move;
	background-repeat:no-repeat;
}
.hovered{
	border: 2px solid #fff;
	background:rgba(209,156,157,0.61);
}

#right{
	width:340px;
	height:540px;
	position:relative;
	float:right;
	background:rgba(232,231,224,1.00);
}
#base{
	width:340px;
	height:540px;
	background:url(../img/basefigdark.png);
	position:relative;

}

#base img{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
}
#hatTarget{
	top:5px;
	left: 140px;
	width:60px;
	height:40px;
}
#hatDrag{
	background:url(../img/hat-drag.png);
	background-size: contain;
	background-repeat: no-repeat;	

}

#hatBadgeTarget{
	top:9px;
	left: 138px;
	width:32px;
	height:35px;
	
}
#hatBadgeDrag{
	background:url(../img/hatBadge-drag.png);
	background-size: contain;
	background-repeat: no-repeat;	

}

#tunicBadgeTarget{
	top:85px;
	left: 155px;
	width:25px;
	height:25px;
}
#tunicBadgeDrag{
	background:url(../img/tunicBadge-drag.png);
	background-size: contain;
	background-repeat: no-repeat;	
}


#beltTarget{
	top:165px;
	left: 125px;
	width:85px;
	height:65px;
}
#beltDrag{
	background:url(../img/belt-drag.png);
	background-size: contain;
	background-repeat: no-repeat;	

}

#gunTarget{
	top:205px;
	left: 60px;
	width:30px;
	height:65px;
	}
#gunDrag{
	background:url(../img/gun-drag.png);
	background-size: contain;
	background-repeat:no-repeat;
}

#putteeTarget{
	top:375px;
	left: 130px;
	width:90px;
	height:75px;
	}
#putteeDrag{
	background:url(../img/puttee-drag.png);
	background-size: contain;
	background-repeat:no-repeat;
}

.PIC360{display:none;overflow:hidden;}
.PIC360 ul,.PIC360 li{margin:0; padding:0;}
.PIC360 li{list-style:none;}

.PIC360{width:340px; height: 540px; position: absolute; top:0; right:0px; z-index: 102;}

#nafWords{
	width:320px;
	position:absolute;
	bottom:0;
	margin:10px;
	font-size:18px;
	font-weight:700;
	text-align:center;
	color:rgba(115,29,29,1.00);
	background-color: rgba(255,255,255,0.5);
	border-radius: 5px;
}

.infoContent{
	display:none;
}
.panelContent{
	color:#4A473F;
}
.panelContent img{
	float:right;
	margin-left:10px;
}

@media only screen and (max-width: 330px){
	.panelContent img{
		width: 100%;
		height: auto;
	}
}

#padding{
	width:100%;
	height:90px;
	float:left;
}


/* Tablets - size of items on left */	
@media only screen and (min-width:800px) and (max-width:960px){

#items{
	max-width:440px;
}

.item{
	width:135px;
	height:135px;
}
.itemHolder{
	width:135px;
	height:110px;
}

.itemName{
	font-size:20px;
}
.nopicItem{
	width:135px;
	height:40px;
}

.info{
	width: 24px;
	height:24px;
}

}

@media only screen and (min-width: 601px) and (max-width: 799px){
	#gallipoliLogo{
		height:76px;
	}
	#title{
	background-image: url(../img/bar.png);
	background-repeat: repeat-x;
	background-position: 0% 15px;
	background-size: auto 20px;
	height:75px;
	}
}

/* SMALL model and droppable locations  for smaller screens*/	
@media only screen and (min-width: 300px) and (max-width: 799px){

#hatTarget{
	top:0px;
	left: 90px;
	width:50px;
	height:35px;
}
#hatBadgeTarget{
	top:5px;
	left: 95px;
	width:30px;
	height:30px;
}
#tunicBadgeTarget{
	top:50px;
	left: 100px;
	width:30px;
	height:30px;
}
#beltTarget{
	top:110px;
	left: 80px;
	width:65px;
	height:60px;
}
#gunTarget{
	top:135px;
	left: 35px;
	width:40px;
	height:65px;
	}

#putteeTarget{
	top: 250px;
	left: 85px;
	width:72px;
	height:75px;
	}
	

	#right{
		width:240px;
		height:450px;
	}	
	#base{
		width:240px;
		height:381px;
		background:url(../img240/basefigdark.png);
	}

	#nafWords{
	/*text-align:left;*/
	width: 90%;
	box-sizing: border-box;
	padding:5px;
	}
	
}

/* small tablets - size of items */
@media only screen and (min-width: 700px) and (max-width: 799px){
	#items{
	max-width:440px;
}

.item{
	width:135px;
	height:135px;
}
.itemHolder{
	width:135px;
	height:110px;
}

.itemName{
	font-size:20px;
}
.nopicItem{
	width:135px;
	height:40px;
}

.info{
	width: 24px;
	height:24px;
}
	
}

/* larger phones item size */
@media only screen and (min-width: 600px) and (max-width:699px){
	#items{
		max-width:340px;
	}
}
@media only screen and (min-width: 480px) and (max-width:599px){
	#items{
		max-width:210px;
	}
}

@media only screen and (min-width: 480px) and (max-width:699px){

.item{
	width:95px;
	height:120px;
	margin:5px;
}
.itemHolder{
	width:90px;
	height:75px;
}

.itemName{
	font-size:16px;
}
.nopicItem{
	width:95px;
	height:40px;
	margin:5px;
}

.info{
	width: 20px;
	height:20px;
}

}

/* small phones */
@media only screen and (max-width:479px){
	#topbarTitle{
		font-size: 18px;
		font-weight:700;
		display: inline-block;
		margin-top:10px;
	}
h1{
	display: none;
}
	#items{
		width:95px;
		height:300px;
	}

.item{
	width: 140px;
	height:50px;
	/*border:1px solid #5E5745;
	background:rgba(187,174,147,0.5);
	border-radius:5px;
	display:inline-block;
	float:left;
	margin:5px;
	*/

}
.panelContent img{
	float:none;
	display: block;
	margin:0 auto;
}
.itemHolder{
	width:66px;
	height:50px;
}
.itemName{
	position:absolute;
	top:0px;
	right:5px;
	font-size:16px;
}
.nopicItem{
	height:25px;
	width: 140px;
}
.nopicItem .itemName{
	position:relative;
	left:5px;
	top:2px;
}
.nopicItem .info{
	bottom: 3px;
}

.info{
	width: 20px;
	height:20px;
}

	#right{
		width:180px;
		height:450px;
	}	
	#base{
		width:240px;
		height:381px;
		background:url(../img240/basefigdark.png);
		background-position:left;
	}
	#padding{
		display:block;
	}
	
}

@media only screen and (max-width: 599px){
	#gallipoliLogo{
		height:50px;
	}
	#title{
	background-image: url(../img/bar.png);
	background-repeat: repeat-x;
	background-position: 0% 10px;
	background-size: auto 10px;
	height:50px;
	}
		#nafWords{
	/*text-align:left;*/
	width: 90%;
	box-sizing: border-box;
	padding:5px;
	}
	

}