body{letter-spacing: 0.1em;}
p{font-size: 1em;
    line-height: 1.7em;
    color: #333;
    font-family: "メイリオ";}

fieldset {
    border:none;    
}
 
form {
    margin:0 auto;    
}

label {
  display: block;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #999999;
}

input {
  width: 100%;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
  
}

input:required {
  background:#fafafa;
  border: 1px solid #ff6633;
}

input:focus { 
    background-color:#fff4e9;
    background-image:none;
    color:#333;
}


textarea {
  width: 100%;
  height: 200px;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}

textarea:required {
  background:#fafafa;
  border: 1px solid #ff6633;
}

textarea:focus {
  background-color:#fff4e9;
    background-image:none;
    color:#333;

}

button {
	border: 1px solid #ff6633;
	color:#ff6633;
	background: #fafafa;
	padding:.5em 1em;  
    -moz-border-radius:2em;
    -webkit-border-radius:2em;
    border-radius:2em;
 }

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}


#signup-email {
    border:1px solid #999999;
    color:#9E9E9E;
    padding:10px;
    width:300px;
}
 
 
#signup-button {margin:0;
	border: 1px solid #ff6633;
	color:#ff6633;
	background: #fafafa;
	padding:.5em .5em;  
    -moz-border-radius:2em;
    -webkit-border-radius:2em;
    border-radius:2em;
}
 
#signup-button:hover, #signup-button:focus {
  opacity: 0.75;
  cursor: pointer;
}

#signup-button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}







.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.error {
color:#999;
background:#fafafa;
border: 1px solid #D9D9D9;
padding:5px;
}

.error:before {
    content: "\2718";
	color:red;
	margin-right:.4em;
}


 
#signup-response {
    display:inline;color:#999;
}
 
.response-waiting {
    
}

.response-waiting:before {
    content: "\262F";
	color:#ff6633;
	margin-right:.4em;
	font-weight:bold;
	}
 
.response-success {
}

.response-success:before {
    content: "\2714";
	color:green;
	margin-right:.4em;
}
 
.response-error {	
	
}

.response-error:before {
    content: "\2718";
	color:red;
	margin-right:.4em;
}

table.symbols{margin:auto;width:95%;max-width:992px}
td.play{width:8%;border:1px #ccc solid;background:#fafafa;color:#ff9966;font-size:3em;padding:3px 5px;}
td.symbol{width:20%;border:1px #ccc solid;background:#999;color:#fff4ef;padding-bottom:.7em;}
td.samples{width:36%;border:1px #ccc solid;background:#fff4ef;}
.playbutton{cursor:pointer;}
.playbutton:hover{color:#999;}
.playbutton:active{color:#666;}
.highlighted{color:#ff9966;font: bold 1.2em monospace;}

.rwd-line{display: block;}
@media screen and (min-width: 768px){.rwd-line{display: inline; }}