<!DOCTYPE html>
<html>

<head>
  <title> Rock Step - Triple Step - Triple Step </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


<style>

body {
  margin-left: 20;
  margin-right: 20;
  padding: 0;
}

h1 {
  font-family: sans-serif, Avenir, 'Poiret One' ;
  font: 8px;
  /* font size and typeface not working */
  text-align: center;
  text-transform: capitalize;
  color: rgb(61, 61, 92);
}

.responsive {
    padding: 0px;
    float: left;
    width: 12.5%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 24.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 320px){
    .responsive {
        width: 50%;
    }
}


form.buttons {

}

form.buttons input {
  width: 150px;
  height: 150px;
  /*hide the labels*/
  font-size: 0; 
  line-height: 0;
  border: 0;
  margin: ;
}
</style>
</head>

<body>
<!--
/* For devices smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}
-->

<h1> rock step - triple step - triple step </h1>
<br>
<br>
<form action="cgi-bin/play.cgi" class="buttons">
  <input type="submit" name="p" value="BasicTurn.mp3" style="background:url(images/choreology1-BasicTurn.svg) no-repeat;" />
  <input type="submit" name="p" value="Follow.mp3" style="background:url(images/choreology2-Follow.svg) no-repeat;" />

  <input type="submit" name="p" value="AmericanSpin.mp3" style="background:url(images/choreology3-AmericanSpin.svg) no-repeat;" />
  <input type="submit" name="p" value="Bump.mp3" style="background:url(images/choreology4-Bump.svg) no-repeat;" />

  <input type="submit" name="p" value="StopAndGo.mp3" style="background:url(images/choreology5-StopAndGo.svg) no-repeat;" />
  <input type="submit" name="p" value="Windmill.mp3" style="background:url(images/choreology6-Windmill.svg) no-repeat;" />

  <input type="submit" name="p" value="SpanishArms.mp3" style="background:url(images/choreology7-SpanishArms.svg) no-repeat;" />
  <input type="submit" name="p" value="Hucklebuck.mp3" style="background:url(images/choreology8-Hucklebuck.svg) no-repeat;" />

<!--  "Whip" of "The Whip" options - needs testing with music playing in the background
  <input type="submit" name="p" value="TheWhip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
--> 
  <input type="submit" name="p" value="Whip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
  <input type="submit" name="p" value="ChickenWalks.mp3" style="background:url(images/choreology10-ChickenWalks.svg) no-repeat;" />
  <div class="tempo">
  <br>
  <br>
  <br>
<!--  no slider for the launch day
    <input id="slider3" type="range" min ="100" max="180" step ="1" style="width: 640px" /> 

    <input id="slider3" type="range" min ="100" max="180" step ="1" orient="vertical" style="-webkit-appearance: slider-vertical; writing-mode: bt-lr" /> 
 -->  
  </div>

</form>


</body>

</html>