html, body {
	background-color:purple;
	
}

 
.wrapper {
	display:flex;
	height: 150vmin;
	width: 150vmin;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: 50% 5%;
	position:relative;
} 

.knotcontainer { 
	display: flex;
	justify-content: left;
	width:auto; 
	height:70px; 
	background-color:purple; 
	padding-top:5px; 
	padding-left:15px; 
	padding-right:15px; 
	margin-bottom: 5px;
	position:relative;
        } 

.knotbox {
	float: left;
	width:100px;
	height:50px;
	margin: 5px;
	background-color:white;
	text-align: center;
	Position: relative;
	
		}
	
.knotboxtxt {
	float: left;
	width:100px;
	height:50px;
	margin: 5px;
	text-align: center;
	Position: relative;
	
		}


	/* Child Text Container */
.dragtoobx div{
	 margin-left: -60px;
	 background: black;
	 color: white;
	 margin-bottom: 5px;
	 font-family: sans-serif;
	 font-size: 12px;
	 opacity: 100;
	 visibility: hidden;
	 -webkit-transition: visibility 0s, opacity 0.5s linear; 
	 transition: visibility 0s, opacity 0.5s linear;
	}

/* Tooltip Position bottom */
.dragtoobxbt div {
	position: absolute;
	 top: 100%;
	 left: 50%;
}
	
/* Tooltip Position right */
.dragtoobxrt div {
	position: absolute;
	top: -5px;
    left: 105%;
}

/* Tooltip Position left */
.dragtoobxlt div {
	position: absolute;
	top: 20px;
	right: 105%;
}
/* Hover on Parent Container  */
.dragtoobx:hover{
	 cursor: pointer;
	}

.dragtoobx:hover div{
	 width: 150px;
	 padding: 8px 15px;
	 visibility: visible;
	 opacity: 0.7; 
	 
	}
	
.dragtoobx {
	height:50px;
	width: 50px;
	/*background-color:purple;*/
	background-image: url("images/fleurdelis.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	
		}
			

.halfhitchpos {
	position: absolute;
	top: 17%;
	left: 13%;
}

	
.reefpos {
	position: absolute;
	top: 21%;
	left: 22%;
}

.bowpos {
	position: absolute;
	top: 28.3%;
	left: 38%;
}
.sheetpos {
	position: absolute;
	top: 25.1%;
	left: 30%;
}

.timberpos {
	position: absolute;
	top: 32.5%;
	left: 43%;
}

.clovepos {
	position: absolute;
	top: 33.5%;
	left: 57%;
}

.tautpos {
	position: absolute;
	top: 15.5%;
	left: 84%;
}

.rules {
	height:150vmin;
	width: 20vmin;
	border: thin black;
	position:absolute;
	top: 2%;
	left: 100%;
}