@charset "utf-8";
/* CSS Document */
@import "reset.css";
@import "font.css";

body, html {width: 100%; height: 100%;}
body {
	font-family: Arial, "Roboto", "Open Sans", Tahoma, Geneva, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: #fcfcfc;
}

a {text-decoration:none; color:#333;}
a:hover {text-decoration:none;}

.overall {width: 800px; max-width: 100%; margin: 0 auto; padding: 10px 15px;}
.center {text-align: center;}

input, textarea, select {max-width: 100%;}
h1 {font-size: 24px; padding: 5px 0; margin: 0;}

.myform textarea {width: 100%; height: 300px; margin: 5px 0 15px 0; padding: 8px 10px;}
.mybutton {padding: 5px 20px; text-align: center; background-color: #C66309; border: #C66309 1px solid; font-weight: bold; color: #fff; border-radius: 5px; font-size: 15px; cursor: pointer;}
.mybutton2 {padding: 5px 20px; text-align: center; background-color: #969696; border: #969696 1px solid; font-weight: bold; color: #fff; border-radius: 5px; font-size: 15px; cursor: pointer;}

.errorMsg {text-align: center; color: #ff0000;}
.speaker {margin: 15px 0;}
.left {text-align: left;}
.hidden {display: none;}

#result-box {width: 100%;}
.date {font-size: 13px; color: #808080;}

.audio-box {width: 48%; float: left; text-align: center;}
.audio-box audio {max-width: 100%;}
.download-box {width: 48%; float: right; text-align: center; padding-top: 12px;}

.speed-box {display: inline-block; padding-left: 20px;}
.speed {width: 50px; text-align: center; padding: 2px 5px;}

.waiting {margin-top: 15px;}


@media only screen and (max-width : 560px) {
	.myform textarea {height: 150px;}
	.audio-box, .download-box {width: 100%; float: none;}

	.speed-box {padding: 15px 0 0 0;}
}