*
{ 
margin: 0px;
padding: 0px;
text-decoration:none; 
}

img
{
border-style: none;
}

html
{
background-image: radial-gradient(#660000, #000000);
	min-height:100%;
	background-size:cover;
	z-index:-1;
	animation-name:changeback;
	animation-duration:5s;
}

a:link 
{
  color: white;
}

#menu
{
position:relative;
width: 100%;
height:50px;
top:5px;
margin:auto;
margin-top: 5px;
background-image: linear-gradient(yellow 10%,green 12%, green 88%, yellow 90%);

}

#menubox
{
	position:relative;
	width:1100px;
	height:30px;
	padding-top:3px;
	padding-bottom:3px;
	margin:auto;
	text-align:center;

font-family: "Century Gothic", Verdana, sans-serif;
font-size:26px;
font-weight:bold;
color:white;
}

.amenu
{
position: relative;
width:220px;
height:30px;
float:left;
margin:auto;
padding-top:5px;
}

#breaker
{
	position:relative;
	width:100%;
	height:10px;
	background-image: linear-gradient(red,yellow,red);
	
}

#line1
{
	position:relative;
	top:100px;
	width:1200px;
	height:5px;
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)33%, rgba(255,0,0,1)66%, rgba(255,0,0,0));
	margin:auto;
	
}

#background1
{
	position:relative;
    top:150px;
	height:600px;
	width:1000px;
	margin:auto;
	background-image: url("images/map3.jpg");

}


#line2
{
	position:relative;
	top:200px;
	width:1200px;
	height:5px;
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)33%, rgba(255,0,0,1)66%, rgba(255,0,0,0));
	margin:auto;
}

.donut1-ring {
    position: absolute;
	top:380px;
	left:85px;
    width: 50px;
    height: 50px;
	cursor:crosshair;
}

.donut2-ring {
    position: absolute;
	top:556px;
	left:410px;
    width: 20px;
    height: 20px;
	cursor:crosshair;
}

.donut3-ring {
    position: absolute;
	top:307px;
	left:470px;
    width: 20px;
    height: 20px;
	cursor:crosshair;
}

.donut4-ring {
    position: absolute;
	top:326px;
	left:480px;
    width: 20px;
    height: 20px;
	cursor:crosshair;
}

.donut5-ring {
    position: absolute;
	top:389px;
	left:611px;
    width: 20px;
    height: 20px;
	cursor:crosshair;
}

.donut6-ring {
    position: absolute;
	top:392px;
	left:632px;
    width: 20px;
    height: 20px;
	cursor:crosshair;
}


.ring {
    position: absolute;
    width: 50%;
    height: 50%;
	
}

.ring.red {
    top: 0;
    left: 0;
    background-color: red;
    border-radius: 100% 0 0 0;
}

.ring.blue {
    top: 0;
    right: 0;
    background-color: red;
    border-radius: 0 100% 0 0;
}

.ring.orange {
    bottom: 0;
    left: 0;
    background-color: red;
    border-radius: 0 0 0 100%;
}

.ring.green {
    bottom: 0;
    right: 0;
    background-color: red;
    border-radius: 0 0 100% 0;
}

.cutout {
    width: 80%;
    height: 80%;
    background-color: white;
    position: absolute;
    top: 10%;
    left: 10%;
    border-radius: 50%;
    pointer-events: none;

}

#backnew
{
	position:relative;
	top:50px;
	width: 600px;
	height:500px;
	margin:auto;
	background-color:black;
	border-radius:25px;
	opacity:0.8;
	color:white;
	padding: 20px;
	text-align:center;

	font-size:18px;
	font-family: 'Source Serif Pro', serif;
}

#butclose
{
	position:absolute;
	top:530px;
	left: 450px;
	width:100px;
	height:30px;
	background-color:cyan;
	text-align:center;
	padding:5px;
	font-size:20px;
}