*{
  margin:0;
  padding:0;
}

body{
  font-family: times;
  font-size:85%;
  color:#555;
  background-image:url('/bgmaker/slash.png?margin=3&linecolor=383838&bgcolor=000000&reverse=true');
  background-color:#000;
  margin-left:10%;
  margin-right:10%;
  line-height:1.4;
  height:1%;
}

h1{
  text-align:center;
  color:#fff;
  padding:30px;
  background-color:#333;
  background-image:url('/bgmaker/gradation.png?margin=3&linecolor=5F5F5F&bgcolor=000000&height=200');
  margin-top:10px;
}

#main{
  background-color:#fff;
  height: 530px;
  _height: 630px;
}

#margin, #height, #width, #alpha{
  width:40px;
  border:1px solid #777;
  padding-left:2px;
  padding-right:2px;
}

#linecolor, #bgcolor{
  width:60px;
  border:1px solid #777;
  text-align:center;
  font-family:arial;
}

dt{
  background-image:url('/bgmaker/gradation.png?linecolor=f2f2f2&bgcolor=ebebeb&height=25&width=100');
  border-bottom:1px solid #ddd;
  padding:2px;
  padding-left:7px;
  margin:5px 3px 5px 3px;
  font-family: arial;
}

#result dt{
  background-image:url('/bgmaker/gradation.png?margin=3&linecolor=E2E7FF&bgcolor=D4D6EC&height=25&width=120');
  border-bottom:1px solid #dde;
}

dd{
  margin:3px;
  margin-left:15px;
}

#sample_area1{
  height:250px;
  width:250px;
}

#sample_area2{
  padding:2px;
  padding-left:7px;
  margin:5px 3px 5px 3px;
  font-family: arial;
  font-weight:bold;
}

#sample_area3{
  background-color:#FFC9C9;
  width:50px;
  height:50px;
}

#sample_area4{
  margin-top:-25px;
  margin-left:30px;
  width:50px;
  height:50px;
}


#form {
  margin:0px;
}

#setting{
  width: 265px;
  _width: 285px;
  float:left;
  background:#fff;
  padding:10px;
}

#result{
  background:#fff;
  margin-left:275px;
  _margin-left:285px;
  padding:10px;
}

#url{
  width:100%;
  margin-right:15px;
}

#footer{
  clear:both;
  background:#333;
  text-align:center;
  font-size:80%;
  padding:10px;
  color:#fff;
  background-image:url('/bgmaker/gradation.png?margin=3&linecolor=444444&bgcolor=000000&height=90');
}

.parent_color{
  margin-left:160px;
  padding:5px;
}

.color{
  width:50px;
  height:50px;
  border:1px solid #999;
  margin:3px
}

#line_pallet, #bg_pallet{
  background-image:url('/bgmaker/slash.png?margin=3&linecolor=cccccc&bgcolor=false');
  width: 232px;
  margin-top:5px;
  margin-left:10px;
  _margin-left:0px;
  border:1px solid #ccc;
}

.disabled{
  background-color:#ccc !important;
  border:1px solid #aaa !important;
  color:#fff;
}

.error_color{
  background-color:red;
  color:#fff;
}

.active_color{
  background-color:#FFE2C9;
}

.default_color{
  background-color:transparent;
}

.parent_track{
  padding:5 5 0 5;
  float:left;
}

.track{
  height:9px;
}
.black_track,.red_track,.green_track,.blue_track{
  width:150px;
  margin:3px;
}
.black_track{
  border-top:2px solid #777777;
}

.red_track{
  border-top:2px solid #FFB4A9;
}

.green_track{
  border-top:2px solid #BDFFA9;
}

.blue_track{
  border-top:2px solid #A9C7FF;
}

.black_track .track{
  border-top:1px solid #cccccc;
}

.red_track .track{
  border-top:1px solid #DE4F41;
}

.green_track .track{
  border-top:1px solid #65C34B;
}

.blue_track .track{
  border-top:1px solid #4D6EB8;
}

.track .handle{
  margin-top:-5px;
  margin-left:-8px;
  width:16px;
  cursor:pointer;
  /*
  width:16px;
  height:16px;
  background-image:url('/icons/red_tri.png');
  */
}

/* this css based by http://hail2u.net/pub/test/031.html */
input#make {
  margin-top:10px;
  margin-left:20px;
  padding-left:5px;
  padding-right:5px;
  border-top: 3px double #cccccc;
  border-right: 3px double #333333;
  border-bottom: 3px double #333333;
  border-left: 3px double #cccccc;
  color: #555;
  background-color: #eee;
  background-image: url("/bgmaker/gradation.png?margin=3&linecolor=F0F0F0&bgcolor=aaaaaa&height=25&width=120");
  background-repeat: repeat-x;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
}

input#make:active {
  border-top: 3px double #333333;
  border-right: 3px double #cccccc;
  border-bottom: 3px double #cccccc;
  border-left: 3px double #333333;
}
/* --- end ---*/

#help{
  text-align:right;
    font-size:85%;
}
#help a:link,
#help a:visited,
#help a:hover {
    font-family:arial;
    font-weight:bold;
    padding-left:3px;
    padding-right:3px;
    color     : #FF3D0E;
    border-bottom:2px solid #FF3D0E;
    text-decoration   : none ;
    cursor:help;
}

a:link {
    color     : #5496FC ;
}
a:visited {
    color     : #5496FC ;
}
a:hover {
    color     : #FFA458 ;
    text-decoration   : none ;
}


a.no_color:link {
  color     : #777 ;
  text-decoration   : none ;
}
a.no_color:visited {
  color     : #777 ;
  text-decoration   : none ;
}
a.no_color:hover {
  color     : #777 ;
  text-decoration   : underline ;
}