* {
	}
body {
    //width : 1024px;
	//height: 610px;
	text-align: center;
    margin: 0 auto;
    text-shadow: 1px 1px 2px #808080;
    font-family:"ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","メイリオ";
}
header {
    //height:20px;
}
section {
	position:relative;
	float:left;
    margin-top:10px;
    margin-left:10px;
	width:625px;
    height:625px;
	background-color:#fffff9;
    box-shadow:0px 0px 10px #808080;
  
	background-image: url(./load.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
section img {
    width:625px;
    height:625px;
}
canvas {
	position: absolute;
	top:0px;
	left:0px;
	//width:400px;
	//height:600px;
	//border:1px solid #ccc;
	}
nav {
	float:left;
	width:389px;
	height: 645px;
	position: relative;
	background-color:#e6c0c0;
    box-shadow:-10px 0px 10px #808080;
    text-align:center;
}
#navigation {
	float:left;
width:323px;
height:50px;
	border-top: 1px solid #f7e1e1;
	border-bottom:1px solid #d5b0b0;
	border-right: 1px solid #d5b0b0;
	border-left: 1px solid #f7e1e1;
	left: 0px;
    font-size: 36px;
	box-shadow:0px 1px 1px #ffffff;
}
#return {
	float:left;
	width: 62px;
	height:50px;
	border-top: 1px solid #f7e1e1;
	border-bottom:1px solid #d5b0b0;
	border-right: 1px solid #d5b0b0;
	border-left: 1px solid #f7e1e1;
	box-shadow:0px 1px 1px #ffffff;
	cursor: pointer;
}
#return:hover {
background-color:#c6a0a0;
}
#return a {
text-decoration:none;
bottom: 0px;
}
#return a:link {
color:black;
}
#return a:visited {
color:black;
}
#explanation {
	margin-top: 5px;
	clear: left;
    width:389px;
	height:10px;
	//background-color:#7d7d7d;
}
#colors {
    width:330px;
	padding-left:29px;
}
li {
	float: left;
	width:50px;
	height:50px;
	margin: 2px;
	list-style-type: none;
	border-radius : 5px;
    cursor: pointer;
	}
#green {
	background-color: #37a34a;
	}
#water {
	background-color: #00bfff;
	}
#blue {
	background-color: #006eb0;
	}
#red {
	background-color: #e8383d;
	}
#pink {
	background-color: #ff69b4;
	}
#orange {
	background-color: orange;
	}
#yellow {
	background-color: yellow;
	}
#yellowgreen {
	background-color: #9acd32;
	}
#brown {
	background-color: #ac6b25;
	}
#gray {
	background-color: #7d7d7d;
	}
#black {
	background-color: black;
	}
#white {
	background-color: white;
	padding-top:2px;
	font-size: 8px;
	}
	
#style {
    clear:left;
    width:220px;
	padding-left:84px;
}
.weight{
	background-color: white; 
	}
.transparency{
    background-color: white; 
	}
.space{
    cursor: default;
    }
#style #light
{
	fill:gray;
}

#sliders {
	clear:left;
	width:340px;
	margin:0 auto;
}
form {
	clear:left;
}
#sliders div{
	float:left;
}
.label {
	width:50px;
}
#light {
	color :#7d7d7d;
}
#sliders form input {
	width:230px;
	height:50px;
}
input[type="range"]::-webkit-slider-thumb {
	width:30px;
	height:30px;
}

#buttons {
	clear: left;
    width:389px;
	}
#delete_button {
	margin-left: 10px;
	margin-right: 10px;
	width: 100px;
	height: 30px;
	}
#print_button {
	margin-left: 10px;
	margin-right: 10px;
	width: 100px;
	height: 30px;
	}
    
#ad2 {
width:300px;
height:250px;
//border:1px solid red;
position: absolute;
bottom: 23px;
right:45px;
}
footer {
	clear: left;
}

@media screen and (orientation : portrait) {
}

@media screen and (max-width: 1023px) {

body {
    //width:none;
    }
section{
margin:10 auto;
//width:748px;
}
nav{ 
clear:left;
width:768px;
height:265px;
}
#sliders {
	display: none;
}
#ad2 {
left:none;
bottom:7px;
//right:2px;
}
}

@media screen and (min-width: 1024px) {
    body {
        width: 1024px;
    }
}

@media print{
nav {display:none;}
}