body {
margin: auto;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:700;
height:700;
border: 4px solid #800000;
}
#wakayama {
position: absolute;
top:50%;
left:50%;
margin-top: -10px;
margin-left: -30px;
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
padding:9px 18px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
color:#666666;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
}
#wakayama:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
background:-ms-linear-gradient( top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}
#wakayama:active {
position:relative;
top:1px;
}
#ibaraki, #shizuoka, #hukushima, #ehime {
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
padding:9px 18px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
color:#666666;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
}#ibaraki:hover, #shizuoka:hover, #hukushima:hover, #ehime:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
background:-ms-linear-gradient( top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
z-index:2;
}#ibaraki:active, #shizuoka:active, #hukushima:active, #ehime:active {
position:relative;
top:1px;
}
#result{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
height: 460px;
width: 600px;
margin-top: -230px;
margin-left: -300px;
padding: 30px;
z-index:4;
display:none;
}
#result{
height: 460px;
width: 600px;
margin-top: -230px;
margin-left: -400px;
}
#result2{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
position: absolute;
background-color: #7fffd4;
height: 400px;
width: 360px;
margin-left: 180px;
padding: 30px;
display:none;
overflow:scroll;
}
#result2{
height: 400px;
width: 360px;
margin-left: 180px;
}
#result2.img{
width: 300px;
}
#background_layer{
position: fixed;
top:0px;
left:0px;
background-color: #000;
height: 100%;
width: 100%;
z-index:3;
opacity: 0.80;
filter:alpha(opacity=80);
display: none
}
#circle1 {
position:absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
width:100px;
height:100px;
padding:10px;
border: 2px solid #83d32d;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
z-index:1;
}
#circle2 {
position:absolute;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
width:300px;
height:300px;
padding:10px;
border: 2px solid #83d32d;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
z-index:1;
}
#circle3 {
position:absolute;
top:50%;
left:50%;
margin-top: -250px;
margin-left: -250px;
width:500px;
height:500px;
padding:10px;
border: 2px solid #83d32d;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
z-index:1;
}