body{
background: #8591a0; /* Old browsers */
background: -moz-linear-gradient(45deg,  #8591a0 0%, #94a1b2 46%, #98a6b7 55%, #7e8a99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#8591a0), color-stop(46%,#94a1b2), color-stop(55%,#98a6b7), color-stop(100%,#7e8a99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,#8591a0 0%,#94a1b2 46%,#98a6b7 55%,#7e8a99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,#8591a0 0%,#94a1b2 46%,#98a6b7 55%,#7e8a99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,#8591a0 0%,#94a1b2 46%,#98a6b7 55%,#7e8a99 100%); /* IE10+ */
background: linear-gradient(45deg,#8591a0 0%,#94a1b2 46%,#98a6b7 55%,#7e8a99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8591a0', endColorstr='#7e8a99',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

#round-corners400 {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 450px;
	width: 450px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:-225px;
	margin-left:-225px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 2px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}

#round-corners300 {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 300px;
	width: 300px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:-150px;
	margin-left:-150px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 2px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}
#round-corners200 {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 150px;
	width: 150px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:-75px;
	margin-left:-75px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 2px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}

#straight400L {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 0px;
	width: 150px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:0px;
	margin-left:-225px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 1px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}

#straight400R {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 0px;
	width: 150px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:0px;
	margin-left:75px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 1px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}

#straight400T {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 150px;
	width: 0px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:-225px;
	margin-left: 0px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 1px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}

#straight400B {
	/* well its a common sense that
	  if you want to create square your
	  height and width must be equal */

	height: 150px;
	width: 0px;
	top: 50%;
    left: 50%; 
    /*margin-top: 50%;
    margin-left: 50%;
	margin-bottom: 50%;
	margin-right: 50%; */
	margin-top:77px;
	margin-left:0px;
	position: absolute;
	background-color: transparent;

	/* In this example i will show you
	 another way of styling border. */

	border-width: 1px;
	border-style: solid;
	border-color: black; /* or hex color code #000000 */

	/* Round the corners 

	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;   */
}
#circleb { 
	width: 40px;
	height: 40px;
	position: absolute;
	background-color: black;
	top: 50%;
    left: 50%; 	
   -moz-border-radius: 20px; 
   -webkit-border-radius: 20px; 
   border-radius: 20px;
}
#circlew { 
   width: 40px;
	height: 40px;
	position: absolute;
	background-color: white;
	top: 50%;
    left: 50%; 	
   -moz-border-radius: 20px; 
   -webkit-border-radius: 20px; 
   border-radius: 20px;
}

.tooltip::after {
    background: #000; /* Hintergrund auf Schwarz stellen */
    width: 290px;
    height: auto;
    color: #FFF; /* Schriftfarbe auf Weiß stellen */
    font-size: 14px; /* Schriftgröße auf 14 Pixel stellen */
    font-family: Arial;
	text-decoration: none;
	text-align: center;
    content: attr(data-tooltip); /* Inhalt des data-tooltips auslesen und in den CSS tooltip setzen */
    top: 50%; /* attr(data-y);*/
	left: 50%; /* attr(data-x); */
	margin-top: 200px; /* attr(data-y);*/
	margin-left: -150px; /* attr(data-x); */
    opacity: 0; /* Element komplett durchsichtig machen */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* Element unsichtbar machen */
    /* border-radius: 10px 10px 10px 10px; */
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
 
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
	text-decoration: none;
}