/* $Id */

body, input, select
{
  font-family: Arial, Verdana, Helvetica, "Trebuchet MS", sans-serif;
  font-size: small;
  color: #444444;
}

h1
{
  font-size: medium;
}

div, img
{
  padding: 0;
  margin: 0;
  border: 0;
}

p.browser_note
{
  font-style: italic;
}

div#content
{
  padding: 10px;
}

div#calculator
{
  display: none;  /* JavaScript reverses this */
  float: left;
  border: 1px solid #AAAAAA;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

div#court_container
{
  float: left;
  padding: 0 2em 2em 2em;
}

#court_container span.instructions
{
  display: block;
  float: left;
  width: 220px;
  max-width: 220px;
  padding: 0 30px 20px 30px;
}

div#chart_container
{
  float: left;
}

div#court
{
  float: left;
  clear: left;
  position: relative;
  width: 280px;
  height: 350px;
  background-color: green;
}

span.corner 
{
  position: absolute;
  font-family: TimesNR, Times, serif;
}

span.bottom
{
  bottom: -1.5em;
}

span.top
{
  top: -1.5em;
}

span.left
{
  left: -1.5em;
}

span.right
{
  right: -1.5em;
}

div#yard_line
{
  position: absolute;
  top: 2.86%;  /* 1/35 */
  left: 3.57%; /* 1/28 */
  width: 92.86%; /* 26/28  */
  height: 94.29%; /* 33/35 */
  border: 1px dashed white;
  margin-left: -1px;
  margin-top: -1px;
}

div.hoop
{
  position: absolute;
  height: 1px;
  width: 4px;
  background-color: white;
}

div#hoop1
{
  bottom: 20%;
  left: 25%;
  margin-left: -2px;
}

div#hoop2
{
  top: 20%;
  left: 25%;
  margin-left: -2px;
}

div#hoop3
{
  top: 20%;
  right: 25%;
  margin-right: -2px;
}

div#hoop4
{
  bottom: 20%;
  right: 25%;
  margin-right: -2px;
}

div#hoop5
{
  bottom: 30%;
  left: 50%;
  margin-left: -2px;
}

div#hoop6
{
  top: 30%;
  left: 50%;
  margin-left: -2px;
}

div#peg
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background-color: white;
  margin-left: -1px;
  margin-top: -1px;
}

div.ball
{
  position: absolute;
  width: 6px;
  height: 6px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px
}

div.ball:hover
{
  cursor: move;
}

div#blue
{
  top: 7px;
  left: 267px;
  background-color: blue;
}

div#yellow
{
  top: 198px;
  left: 267px;
  background-color: yellow;
}

div#chart
{
  float: left;
  height: 410px;
  width: 440px;
  margin-left: 20px;
  margin-top: -14px;
}

table#coordinates
{
  clear: left;
  float: left;
  margin-top: 67px;
}

#coordinates td
{
  padding: 2px 4px;
  text-align: right;
}

#coordinates td:last-child
{
  text-align: left;
}

#coordinates input
{
  width: 3em;
  float: left;
  text-align: right;
}

div#chart_container
{
  margin-top: 17px;
}

div#controls_container
{
  float: left;
  clear: left;
  width: 100%;
  margin-left: 72px;
}

div#ball_controls_container
{
  position: relative;
  clear: left;
  float: left;
  width: 286px;
}

div#controls
{
  position: relative;
  float: left;
}

div#aiming_line
{
  position: absolute;
  left: 20px;
  z-index: 10;
  border-left: 1px solid #888888;
  width: 5px;
  height: 80px;
  margin-top: -20px;
}

div#aiming_line:hover
{
  cursor: move;
}

div#gap_line
{
  position: absolute;
  height: 19px;
  width: 280px;
  border-bottom: 1px solid #888888;
  z-index: -10;
}

div#yellow_container
{
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
}

img#yellow_control:hover
{
  cursor: move;
}

span.instructions
{
  font-style: italic;
}

span#yellow_instructions
{
  display: block;
  width: 100px;
  float: left;
  padding-left: 10px;
}

span#aiming_instructions
{
  display: block;
  float: left;
  clear: left;
  margin-top: 20px;
}

form#graph_selector
{
  clear: left;
  float: left;
  margin-top: 20px;
  margin-bottom: 40px;
}

#graph_selector span
{
  display: block;
  float: left;
  padding-top: 2px;
}

#graph_selector div
{
  float: left;
  margin-left: 1em;
}

div#p13_1_control
{
  clear: left;
  float: left;
  width: 330px;
  margin-top: 20px;
}

div#p13_1_select_container
{
  margin-bottom: 10px;
}

div#cd_container
{
  float: right;
}

div.slider_container
{
  float: left;
  clear: left;
  width: 100%;
}

div#slider
{
  width: 200px;
  float: left;
}

div#footer
{
  float: left;
  clear: left;
  font-size: x-small;
  padding: 0 10px 30px 10px;
}