* { margin: 0; padding: 0; background: white; }

img { border: 0; }

input, select {
	margin-left: 0.5em;
	border: 1px solid gray;
	padding: 0.2em;
}

#warning {
	position: absolute;
	left: 20px;
	top: 40px;
	padding: 3px;
	border: 1px solid red;
	background: #ffc;
  font-size: 10px;
	line-height: 1.5;
}
#warning a {
	background: transparent;
  font-size: 10px;
}

#message {
	position:absolute;
	left: 100px;
	top: 100px;
	padding: 20px;
	background: #ffe;
	border: 1px solid gray;
	color: green;
	font-size: x-large;
	z-index: 90;
}

ul {
	list-style-type: none;
}

dt {
	border-bottom: 1px solid gray;
	font-size: 16px;
	height: 20px;
}

#menu {
	position: absolute;
	left: 0px;
	top: 0px;
	
	width: 100%;
	background: #eee;
	border-bottom: 1px ridge #ccc;
}
#menu li {
  display: inline;
  font-size: 14px;
  padding: 0 2px;
	background: transparent;
	border-right: 1px ridge #ccc;
}
#menu li.no_separator {
  border: 0;
}
#menu button {
	background: #eee;
	border: 1px solid #eee;
}
#menu button:hover {
	background: #eee;
	border: 1px outset #eee;
}

#function {
	position: absolute;
	display: none;
	
	width: 120px;
	
	border: 1px ridge #ccc;
	z-index: 100;
}

#function li {
	border: 0;
	border-bottom: 1px ridge #ccc;
}
#function li.no_separator {
  border: 0;
}

#function button {
	width: 100%;
	text-align: center;
	background: #eee;
	border: 0;
}
#function button:hover {
	color: #fff;
	background: #006;
	border: 0;
}

#palette {
	position: absolute;
	left: 20px;
	top: 50px;
	
	width: 120px;
	height: 465px;
	
	overflow: scroll;
	
	border: 1px solid gray;
	padding-bottom: 10px;
}
#palette img {
	background: transparent;
}
#palette dt {
	margin-bottom: 10px;
}
#palette dd {
	padding: 0 10px;
	
	height: 20px;
	font-size: 14px;
	font-family: monospace;
}
.palette_color {
	width: 16px;
	height: 16px;
	border: 1px solid gray;
	margin-right: 0.5em;
}
#palette img.selected {
	border: 1px solid red;
}
#palette dd.selected {
	background: #ffff99;
}
#palette dt:after { content: " ^"; }
#palette dt.close:after { content: " v" !important; }


#canvas_area {
	position: absolute;
	
	width: 190px;
	
	left: 170px;
	top: 50px;
	
	border: 1px solid gray;
}

#next_and_hold_area {
	position: absolute;
	
	left: 400px;
	top: 355px;
	
	border: 1px solid gray;
}
#next_and_hold_area th, #next_and_hold_area option {
	font-size: 12px;
	line-height: 16px;
}
.next_and_hold_preview {
	position: relative;
	width: 36px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 2px;
	border: 1px solid #ccc;
	padding: 0;
}
#preview_hold {
	margin-left: 10px;
}

#preview_next_1 {
	height: 30px;
	margin-left: 4px;
	margin-right: 2px;
}

#hold option,
#next_1 option,
#next_2 option,
#next_3 option {
	position: relative;
	width: 70px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
}
.mino_0_0 { background: url(images/minos/0-0.gif); }
.mino_0_1 { background: url(images/minos/0-1.gif); }
.mino_0_2 { background: url(images/minos/0-2.gif); }
.mino_0_3 { background: url(images/minos/0-3.gif); }
.mino_0_4 { background: url(images/minos/0-4.gif); }
.mino_0_5 { background: url(images/minos/0-5.gif); }
.mino_0_6 { background: url(images/minos/0-6.gif); }
.mino_0_7 { background: url(images/minos/0-7.gif); }
.mino_0_8 { background: url(images/minos/0-8.gif); }
.mino_0_9 { background: url(images/minos/0-9.gif); }
.mino_1_0 { background: url(images/minos/1-0.gif); }
.mino_1_1 { background: url(images/minos/1-1.gif); }
.mino_1_2 { background: url(images/minos/1-2.gif); }
.mino_1_3 { background: url(images/minos/1-3.gif); }
.mino_1_4 { background: url(images/minos/1-4.gif); }
.mino_1_5 { background: url(images/minos/1-5.gif); }
.mino_1_6 { background: url(images/minos/1-6.gif); }
.mino_1_7 { background: url(images/minos/1-7.gif); }
.mino_1_8 { background: url(images/minos/1-8.gif); }
.mino_1_9 { background: url(images/minos/1-9.gif); }

#canvas {
	position: relative;
	
	width: 170px;
	height: 357px;
	
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	
	margin: 10px;
}

#canvas img {
	position: absolute;
	width: 16px;
	height: 16px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	
	cursor: pointer;
}

#result_area {
	position: absolute;
	
	width: 171px;
	
	left: 400px;
	top: 50px;
	
	border: 1px solid gray;
}
#result {
	padding: 10px;
}
#project_url {
	width: 120px;
}

#password_area {
	position: absolute;
	
	left: 230px;
	top: 700px;
	
	width: 390px;
	
	border: 1px solid gray;
}
#password_area dd {
	position: relative;
	height: 100px;
	width: 390px;
}
#password {
	position: relative;
	border: none;
	height: 100px;
	width: 390px;
}

#information_area {
	position: absolute;
	
	left: 20px;
	top: 700px;
	
	width: 200px;
	font-size: 12px;
	
	overflow: auto;
	
	border: 1px solid gray;
}
#information_area dt {
	border-bottom: 0;
}
#information {
	overflow: auto;
	height: 100px;
}

#information table {
	width: 100%;
	border-bottom: 1px solid gray;
}
#information th {
	font-weight: normal;
	color: black;
	margin: 0;
	width: 5.5em;
	border: 0px;
	border-top: 1px solid gray;
	background-color: #ececec;
}
#information td {
	background-color: white;
	margin: 0;
	padding: 3px;
	border-top: 1px solid gray;
	border-left: 1px solid gray;
}


#thumbnail_area {
	position: absolute;
	
	left: 20px;
	top: 535px;
	
	width: 600px;
	
	border: 1px solid gray;
}
#thumbnails dd {
	position: relative;
}
#thumbnails {
	position: relative;
	overflow: auto;
	
	width: 580px;
	height: 87px;
	
	margin: 10px;
}
#thumbnails li, .thumbnail {
	display: inline;
}
.thumbnail {
	float: left;
	cursor: pointer;
	border: 1px solid gray;
	background: #eef;
}

.thumbnail_chip { width: 3px; height: 3px; }

#thumbnails .selected {
	border: 1px solid red;
}


.indicator { cursor: url("/images/indicator.gif"), wait; }

.color0  { background: white; }
.color1  { background: blue; }
.color2  { background: aqua; }
.color3  { background: lime; }
.color4  { background: fuchsia; }
.color5  { background: orange; }
.color6  { background: red; }
.color7  { background: yellow; }
.color8  { background: silver; }

.color9  { background: url("images/t-9.gif"); }
.color10 { background: url("images/t-10.gif"); }
.color11 { background: url("images/t-11.gif"); }
.color12 { background: url("images/t-12.gif"); }
.color13 { background: url("images/t-13.gif"); }
.color14 { background: url("images/t-14.gif"); }
.color15 { background: url("images/t-15.gif"); }
.color16 { background: url("images/t-16.gif"); }
.color17 { background: url("images/t-17.gif"); }
.color18 { background: url("images/t-18.gif"); }
.color19 { background: url("images/t-19.gif"); }
.color20 { background: url("images/t-20.gif"); }
.color21 { background: url("images/t-21.gif"); }

.color22  { background: blue; }
.color23  { background: aqua; }
.color24  { background: lime; }
.color25  { background: fuchsia; }
.color26  { background: orange; }
.color27  { background: red; }
.color28  { background: yellow; }
.color29  { background: silver; }

.color30 { background: url("images/t-30.gif"); }
.color31 { background: url("images/t-31.gif"); }
.color32 { background: url("images/t-32.gif"); }
.color33 { background: url("images/t-33.gif"); }
.color34 { background: url("images/t-34.gif"); }
.color35 { background: url("images/t-35.gif"); }
.color36 { background: url("images/t-36.gif"); }
.color37 { background: url("images/t-37.gif"); }

.color38 { background: url("images/t-38.gif"); }
.color39 { background: url("images/t-39.gif"); }
.color40 { background: url("images/t-40.gif"); }
.color41 { background: url("images/t-41.gif"); }
.color42 { background: url("images/t-42.gif"); }
.color43 { background: url("images/t-43.gif"); }
.color44 { background: url("images/t-44.gif"); }
.color45 { background: url("images/t-45.gif"); }
.color46 { background: url("images/t-46.gif"); }
.color47 { background: url("images/t-47.gif"); }

.glayer_img {
	z-index: 1000;
}
#load_window {
	text-align: center;
}

.form {
	background: white;
	display: block;
	width: 30em;
	
	position: absolute;
	left: 25%;
	top: 30%;
	z-index: 1001;
	
	line-height: 150%;
	
	padding: 10px;
}

#setting_window select,
#setting_window input {
	width: 10em;
	padding: 3px;
}
#setting_window th {
	width: 16em;
	margin-right: 1em;
	padding: 5px;
	text-align: right;
}
#setting_window label.valid   { color: #000; }
#setting_window label.invalid { color: #f00; }

#password_to_load {
	margin: auto;
	width: 20em;
	height: 10em;
}

#adsense {
	position: absolute;
	right: 0;
	bottom: 0;
}

.decide_button {
	margin-left: 2em;
}

.glayer_img {
	position: fixed!important;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
	background-image: url(glayer.png);
}
* html .glayer_img {
	filter:alpha(opacity=90, style=0);
}