body
{
  text-align: center;
  background-color: White;
}

#container
{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  background-color: #DDDDDD;
  padding: 5px;
  border: 1px solid gray;
}

#header
{
  float: none;
  width: 932px;
  height: 190px;
  margin: 5px;
  padding: 5px;
  background: #000000 url(pictures/gradient-horizontal1.png) repeat-x; 
  border: 1px solid gray;
}

#header h1
{
  font-size: 39px;
  padding-top: 5px; 
  margin-top: 1px;
  padding-bottom: 1px; 
  margin-bottom: 1px;
}

#menu
{
  float: left;
  width: 200px;
  height: 580px;
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
  background: #000000 url(pictures/gradient-vertical1.png) repeat-x;
}

#menu ul
{
  padding-left: 15px;
}

#menu ul li
{
  list-style-type: none;
  padding-left: 1px;
  width: 190px;
}

#menu ul li:hover
{
}

#content
{
  float: left;
  width: 700px;
  margin: 5px;
  padding: 10px;  
  background-color: #F6F6F6;
  border: 1px solid gray;
}

#content table
{
  border-spacing: 10px;
}

#content table tr td
{
  vertical-align: top;
}

#content hr
{
  background-color: #AAAAAA;
  height: 2px;
  border: 1px solid #AAAAAA;
}

#footer
{
  clear: both;
  margin: 7px;
  margin-left: 227px;
  width: 710px;
  padding: 5px;
  background-color: #DDDDDD;
  border: 1px solid gray;
}

img.CenteredImage
{
  margin-left:auto;
  margin-right:auto;
  display:block;
}


form 
{
    width: 100%;
    margin: 0 auto;
}

label, input 
{
    /* in order to define widths */
    display: inline-block;
}

label 
{
    width: 30%;
    /* positions the label text beside the input */
    text-align: right;
}

label + input[type=text], input[type=number], input[type=email]
{
    width: 30%;
    /* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0.5% 30% 0.5% 4%;
}

label + textarea
{
    width: 30%;
    /* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0.5% 30% 1% 4%;
}

input[type=checkbox]
{
	vertical-align: top;
	width: auto;
    /* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0.5% 1% auto 8%;
}

label[for="gdprAccepted"]
{
	width: 80%;
    /* positions the label text beside the input */
    text-align: left;
}

input[type=checkbox] + label[for="socialEvent"], label[for="extraDinner"]
{
	width: auto;
    /* positions the label text beside the input */
    text-align: left;
}
input[type=submit]
{
	width=20%;
	/* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 1% 40% 0 40%;
}