@charset "utf-8";

/* reset 
--------------------------------------------------- */
html, body, div, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* font-size
--------------------------------------------------- */
body { font-size: 16px; }
h1 { font-size: 12px;}
   }
h2 { font-size: 32px; color: #000080;}
h3 { font-size: 20px; }
h4 { font-size: 18px; color: #008080;}
p { font-size: 16px; }

.triple { color: #4b0082; }
.g1 { color: #0000ff; }
.g2 { color: #8b0000; }
.g3 { color: #556b2f; }

.result1 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result2 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result3 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result4 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result5 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result6 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result7 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result8 { background: linear-gradient(transparent 90%, #66cdaa 60%); }
.result9 { background: linear-gradient(transparent 90%, #66cdaa 60%); }


/* body
--------------------------------------------------- */
body {
  background: #F4A460;
  color: #333;
}

.race table {
border: 1px #000000 double;
border-collapse: collapse;
}

.race td {
border: 1px #000000 solid;
text-align: center;
vertical-align: middle;
}

.race th {
border: 1px #000000 solid;
}

td.hname {text-align: left; font-weight: bold;}

td.waku1 {background: #FFF;color : #000; }
td.waku2 {background: #000;color : #FFF;}
td.waku3 {background: #ff0000;color : #FFF;}
td.waku4 {background: #0000ff;color : #FFF;}
td.waku5 {background: #ffff00;color : #000;}
td.waku6 {background: #008000;color : #FFF;}
td.waku7 {background: #ffa500;color : #000;}
td.waku8 {background: #ffc0cb;color : #000;}

td.odds1 {color : #ff0000;font-weight: bold;}
td.odds2 {color : #0000ff;font-weight: bold;}


    #racetable th.non,
    #racetable td.non {
        display: none;
    }


/* layout
--------------------------------------------------- */
#container {
  width: 320px;
  background: #FFF;
  margin: 5px auto;
  padding: 10px;
}
#header {
  margin-bottom: 10px;
}
#content {
  margin-bottom: 20px;
}
#footer {
  border-top: 1px dotted #666;
  padding-top: 10px;
  text-align: center; 
}

.typetext{
font-size:22pt;
width:8em;
}

input#submit_button {

padding: 12px 20px;
font-size: 1em;
background-color: #F4A460;

}

.formwrap{
width: 80%;  
margin: 0 auto;
}


img { 
    max-width: 95%; 
    height:auto;
}

#header p.lead {
  background-color: #F5F5DC;
}

/*FORM1*/

/*まず、フォーム全体の囲み罫や背景などを指定*/
form#form1 {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #666;
	background: #F0F8F1;
	/*↓背景グラデーションの指定*/
	background: -moz-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: -webkit-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: linear-gradient(#FBFCFC, #F0F8F1);
}

/*リスト要素<ul>を初期化*/
form#form1 ul {
	padding:0;
	margin:0
}
/*<li>も初期化し、ボーダーなどを指定*/
form#form1 ul li {
	list-style:none;
	margin:0px;
	padding:10px;
	border-top: 2px solid #FFF;
	font-size: 12px;
}
/*最初の<li>にはボーダーをつけない（:first-child疑似クラスによる指定）*/
form#form1 ul li:first-child {
	border-top:none;}


/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form1 ul li span {
	width: 17em;
	margin:0px;
	display:block;
	float:left;
/* floatでなく、CSS3 の「display: inline-block」を使う手もアリ 
	display: inline-block;*/
}

/*「:after」で <li>の末尾でフロートをクリア*/
form#form1 ul li:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;     /*←フロートをクリア*/
}

/* テキスト入力部品の見た目を統一する */
form#form1 ul li label .txtfiled, form#form1 select {
	width:250px;
	padding:3px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
    background: #fff;
	-webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
	-moz-box-shadow: 2px 3px 5px -2px #ddd inset;
	box-shadow: 2px 3px 5px -2px #ddd inset;
	/*角丸にする*/
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}
form#form1 select {
	/*selectは250では大きすぎるので*/
	width:100px;
}

/*チェックボックス、ラジオボタンのブロックの指定*/
form#form1 ul li p {
	margin:5px 0 0 40px;
}
/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form1 ul li p label {
	margin-right: 2em;
	display: block;
	float: left;
}
/*input要素とテキストがくっつかないように右にマージンを少し*/
form#form1 ul li p label input {
	margin-right:0.5em;
}
/*チェックボックス、ラジオボタンの label要素にロールオーバー時の変化を指定する*/
form#form1 ul li p label:hover {
	background : #FFF;
	color: #096;
	font-weight:bold;
}
/*チェックボックスの<label>の横幅を統一する（<p>にクラス名.checkをつけて）*/
form#form1 ul li p.check label {
	width: 9em;
}
/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
form#form1 ul li input[type="submit"] ,
form#form1 ul li input[type="reset"] {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	font-size:130%;
	font-weight: bold;
	width:150px;
	padding: 5px 0;
	margin-right:0.5em;
	border-style:none;
	color: #fff;
	background:#90E733;
/*↓背景グラデーションの指定です*/
	background: -moz-linear-gradient(top, #90E733, #428000 50%, #90E733);
	background: -webkit-linear-gradient(top, #90E733, #428000 50%, #90E733);
	background: linear-gradient(#90E733, #428000 50%, #90E733);
/*↓以下、ボックスの角丸、シャドウ、テキストシャドウの指定*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	box-shadow: 2px 2px 3px 1px #666;
	text-shadow: 1px 1px 2px #000; 
}

form#form1 ul li input[type="submit"]:hover ,
form#form1 ul li input[type="reset"]:hover {
/*↓ここではロールオーバー時の透明度を変更。もちろんグラデーションを指定してもOK*/
	opacity: 0.8;
	font-size:135%;
}