/* dronehtml.css
*/
body {
  background-image: linear-gradient(to right, #dbe, #edf, #dbe);
  background-color: #edf;
  color: #333;
  width: 100%;
  height: 100%;
  font-size: 16px;
}
a {color:#c80;}
nav a, .menu a, a.navi {color:#332;}
a:hover {color:#3a7;}
.cover {
  background-image: url('../Images/drone-racing-track_cover.jpeg');
  height: 37.5vw; /* = 600/1600*100 */
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.header {
  background-image: url('../Images/drone-racing-track_head.jpeg');
  height: 4em;
  width: 100%;
/*  opacity: 0.3;*/
  background-repeat: repeat-x;
  background-size: contain;
}
.header h1 {
  position: absolute;
  top: 36vw;
  width: 100%;
  font-size: 4vw;
  text-shadow: #111 0.2em 0.2em 0.2em;
}
h1.alphabet {
	font-size: 8em;
	margin-top: 0;
/*  text-shadow: white 0.1em 0.1em 0.1em;*/
}

h2 {margin:1em auto 0.6em auto;}

.introduction {
  margin-top: 1em;
}

.flight-control {
  height: 35em;
  width: 60em;
  margin: 1.7em auto;
  position: relative;
/*  border: dashed 1px green; */
}
.flight-control * {position: absolute;}
.flight-control label {
  color: black;
  font-weight: 600;
/*  background-color:white;*/
}
.transmitter {
  background-image: url('../Images/Control/transmitter.png');
  height: 15em;
  width: 24em;
  top: 15em;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.drone {
  background-image: url('../Images/Control/HS210F-grey.png');
  height: 35em;
  width: 35em;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  opacity:0.4;
}

/* stick-mode
   arranged on top-left part of flight-control
*/
/* buttons to select mode
   arranged above flight-control
   use radio buttons but no display, use labels instead.
*/
label[for="mode1"],
label[for="mode2"],
label[for="mode3"] { cursor:pointer; }

input[name="mode"],
.flight-control {display:none;}

input[type="radio"][id="mode1"]:checked ~.mode1,
input[type="radio"][id="mode2"]:checked ~.mode2,
input[type="radio"][id="mode3"]:checked ~.mode3 {display:block;}

input[disabled] + label {opacity:0.5;}

label.mode {
  border: 1px solid green;
  border-radius: 0.3em;
  padding: 0.2em 0.5em;
  margin: 2em .2em 0 .2em;
  line-height: 2.2;
  background-color: white;
  background-image: linear-gradient(to bottom, white, #ccc);
}
input[name="mode"]:checked + label {
  background-color: #afa;
  background-image: linear-gradient(to bottom, #afa, #dfd);
}
.flight-control .throttle,
.flight-control .elevator {top:13%;} /* up-down */
.flight-control .rudder,
.flight-control .aileron {top:28%;} /* left-right */
.mode1 .elevator, .mode1 .rudder,
.mode2 .throttle, .mode2 .rudder,
.mode3 .elevator, .mode3 .aileron,
.mode4 .throttle, .mode4 .aileron {left:9.9%;} /* left stick */
.mode1 .throttle, .mode1 .aileron,
.mode2 .elevator, .mode2 .aileron,
.mode3 .throttle, .mode3 .rudder,
.mode4 .elevator, .mode4 .rudder {left:30.6%;} /* right stick */
.flight-control h4.stick-mode {
  transform: translate(-50%,0%);
  /*  border: dashed 1px green;*/
}

.flight-control h4.line2 {
  font-size:0.85em;
  transform: translate(-50%,75%);
}
.flight-control h4.line3 {
  transform: translate(-50%,120%);
}
.flight-control img.stick-mode {
  width:7.5em;
  transform: translate(-50%,-10%);
/*  opacity:0.7;*/
/*  border: dashed 1px green;*/
}

.under-construction {
  top:61%; left:20%;
  transform: translate(-50%,-50%);
  font-size: 1.3em;
  background-color: white;
  padding: 0.3em 0;
  opacity: 0.6;
}

/* radio button controls and shown arrow image;
   controls arranged on lower-left part with transmitter image,
   moving arrows shown on right part with drone image.
*/
/* 動きを表示する矢印画像を縮小して同じ中心をキープするため縮小画像を右上に移動
   背景のドローン画像の見た目の向きと重心を矢印画像との整合性をとる
*/
.flight-control img.shown {
  top: 50%; right: 29.17%;
  transform: translate(50%,-50%);
  opacity: 0.7;
  width: 58.33%; /* 基準幅 Wmax: 35/60 */
/*  border: dashed 1px green;*/
}
/* 縮小率を長さではなく画像の面積比で表現するため
   名目縮小率の平方根を表示縮小率とする
*/
.flight-control img.cos45 {/* 名目 r: cos(45)=0.707 */
  width: 49.0%; /* = Wmax * r; r: sqrt(cos(45))=0.841 */
}
.flight-control img.half {/* 名目 r: 0.5 */
  width: 41.2%; /* r: sqrt(0.5)=0.707 */
}
.flight-control img.half45 {/* 名目 r: 0.5*cos(45) = 0.3535 */
  width: 34.7%;/* r: sqrt(0.5*cos(45))=0.5946 */
}
label.forward {top:34%; right:1%;}
label.backward {top:72%; right:49%;}
label.right {top:77%; right:6%;}
label.left {top:30%; right:40%;}
label.ascent {top:0; right:26%;}
label.descent {top:87%; right:25%;}
label.clockwise {top:70%; right:35%;}
label.anticlockwise {top:45%; right:45%;}
label.max {transform: translate(0,1.1em);}

label.round-label,
label.text-label {cursor:pointer;}
input[type="radio"] {display:none;}
/* radio button の代わりに丸い label で表示 */

.flight-control input + label + img,
.flight-control input + label + img + label,
.flight-control input + label + img + label + img,
.flight-control input + label + img + label + img + label {display: none;}
.flight-control input:checked + label + img,
.flight-control input:checked + label + img + label,
.flight-control input:checked + label + img + label + img,
.flight-control input:checked + label + img + label + img + label {display: block;}
.flight-control input:checked + label {
  background-color: #363;
  background-image: linear-gradient(to bottom, #363, #9c9);
}

/* ラジオボタンを画面上の円周上に45度刻みで0〜315度まで配置
中心位置は2種類: 左neutral {top:59.9%; left:9.3%;}, 右 {top:59.9%; left:29.5%;},
 right, right-up, up, left-up, left, left-down, down, right-down
90度の位置: 左up {top:51.5%; left:9.3%;} から円の縦方向半径: 59.9% - 51.5% = 8.4%
もとの画面の縦横比は高さ35 幅60なので 縦方向基準で 35/60 = 0.5833 で補正し横方向半径: 4.9%
計算例: 左right-up {59.9%; 9.3%;} + {8.4%*sin(45); 4.9%*cos(45);} = {top:53.96%; left:12.75%;}
半分の円 縦方向半径: 4.2% にも配置
*/
/* right stick mode 2 */
label[for="r2-neutral"],
#r2-neutral {top: 59.9%; left: 29.5%;}
/* full */
label[for="r2f-right"],
#r2f-right {top: 59.9%; left: 34.4%;}
label[for="r2f-right-up"],
#r2f-right-up {top: 53.96%; left: 32.95%;}
label[for="r2f-up"],
#r2f-up {top: 51.5%; left: 29.5%;}
label[for="r2f-left-up"],
#r2f-left-up {top: 53.96%; left: 26.05%;}
label[for="r2f-left"],
#r2f-left {top: 59.9%; left: 24.6%;}
label[for="r2f-left-down"],
#r2f-left-down {top: 65.84%; left: 26.05%;}
label[for="r2f-down"],
#r2f-down {top: 68.3%; left: 29.5%;}
label[for="r2f-right-down"],
#r2f-right-down {top: 65.84%; left: 32.95%;}
/* half */
label[for="r2h-right"],
#r2h-right {top: 59.9%; left: 31.95%;}
label[for="r2h-right-up"],
#r2h-right-up {top: 56.96%; left: 31.22%;}
label[for="r2h-up"],
#r2h-up {top: 55.7%; left: 29.5%;}
label[for="r2h-left-up"],
#r2h-left-up {top: 56.96%; left: 27.78%;}
label[for="r2h-left"],
#r2h-left {top: 59.9%; left: 27.05%;}
label[for="r2h-left-down"],
#r2h-left-down {top: 62.84%; left: 27.78%;}
label[for="r2h-down"],
#r2h-down {top: 64.1%; left: 29.5%;}
label[for="r2h-right-down"],
#r2h-right-down {top: 62.84%; left: 31.22%;}

/* left stick mode2 */
label[for="l2-neutral"],
#l2-neutral {top: 59.9%; left: 9.3%}
/* full */
label[for="l2f-right"],
#l2f-right {top: 59.9%; left: 14.2%;}
label[for="l2f-right-up"],
#l2f-right-up {top: 53.96%; left: 12.75%;}
label[for="l2f-up"],
#l2f-up {top: 51.5%; left: 9.3%;}
label[for="l2f-left-up"],
#l2f-left-up {top: 53.96%; left: 5.85%;}
label[for="l2f-left"],
#l2f-left {top: 59.9%; left: 4.4%;}
label[for="l2f-left-down"],
#l2f-left-down {top: 65.84%; left: 5.85%;}
label[for="l2f-down"],
#l2f-down {top: 68.3%; left: 9.3%;}
label[for="l2f-right-down"],
#l2f-right-down {top: 65.84%; left: 12.75%;}
/* half */
label[for="l2h-right"],
#l2h-right {top: 59.9%; left: 11.75%;}
label[for="l2h-right-up"],
#l2h-right-up {top: 56.96%; left: 11.02%;}
label[for="l2h-up"],
#l2h-up {top: 55.7%; left: 9.3%;}
label[for="l2h-left-up"],
#l2h-left-up {top: 56.96%; left: 7.58%;}
label[for="l2h-left"],
#l2h-left {top: 59.9%; left: 6.85%;}
label[for="l2h-left-down"],
#l2h-left-down {top: 62.84%; left: 7.58%;}
label[for="l2h-down"],
#l2h-down {top: 64.1%; left: 9.3%;}
label[for="l2h-right-down"],
#l2h-right-down {top: 62.84%; left: 11.02%;}

label.round-label {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border:2px solid green;
  transform: translate(-15%, -15%);
  background-image: linear-gradient(to bottom, white, #aaa);
}
label.text-label[for="r2f-right"],
label.text-label[for="l2f-right"] {transform: translate(1em,0.0em);}
label.text-label[for="r2f-up"],
label.text-label[for="l2f-up"] {transform: translate(calc(0.5em - 50%),-1.5em);}
label.text-label[for="r2f-left"],
label.text-label[for="l2f-left"] {transform: translate(calc(-0.2em - 100%),-0.7em);}
label.text-label[for="r2f-down"],
label.text-label[for="l2f-down"] {transform: translate(calc(0.5em - 50%),0.6em);}