div#inner {
    padding-top: 180px;
    padding-bottom: 80px;
}

div#outer {
    width: 800px;
    margin: auto;
}

h1 {
    text-align: center;
}

table#registration {
    margin: auto;
}
table#registration caption {
    margin-bottom: 10px;
}

table#registration th {
    width: 25%;
}

table#registration td {
    width: 80%;
    padding-left: 15px;
}

table#registration #FirstName,
table#registration #LastName,
table#registration #State,
table#registration #City,
table#registration #ZipCode,
table#registration #BusinessPhone,
table#registration #MobilePhone
{
    width: 160px;
}

table#registration #Email,
table#registration #Company,
table#registration #Title,
table#registration #City
{
    width: 240px;
}

table#registration #Address,
table#registration #Address2
{
    width: 320px;
}

table#registration .submit
{
    text-align: right;
}

div#events h2 {
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
}

#eventsSearch
{
    float: right;
    margin-right: 10%;
}

div#events {
    padding-top: 25px;
}

div.event-rules {
    clear: both;
}

div#available,
div#selected
{    
    height: 550px;
    overflow-x: hidden;
    overflow-y: hidden;

    width: 45%;
    float: left;
}

div#selected {
    clear: right;
}

div#events ul#selectedEvents div.selected-event {
    display: inline-block;
}

span.field-validation-error {
    display: block;
}

div#events div#available ul,
div#events div#selected ul 
{
    height: 445px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 40px;
    margin-top: 20px;
}

div#events div#selected ul
{
    overflow-y: hidden;
}

div#events div#selected li,
div#events div#available li
{
    margin: 5px 25px ;
    padding: 8px;
}

div#events small
{
    display: block;
    clear: left;
}

div#searchform label 
{
    font-weight: 600; 
}

.red-text {
    color: red;
}

div#searchform div.item
{
    margin-bottom: 5px;
}

div#searchform input.search 
{
    width: 275px;
}

div#searchform div.left
{
    float: left;
    margin-right: 45px;
}

label.left {
    float: left;
}

div#searchform input#distance 
{
    width: 25px;
}

div#searchform input.event-time
{
    width: 75px;
}

#continueButton 
{
    clear: both;
    float: right;
    margin-right: 25%;
}

#cake
{
    display: block;
    margin: 0 auto;
    text-align: center;
}

.red-text {
    color: red;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.waiting {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('images/loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .waiting {
    display: block;
}

.submit-button{
    text-align: center;
}

.info-block {
    margin-bottom: 10px;
}

.info-block .label {
    width: 95px;
    text-align: right;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
}

.info-block .info {
    display: inline-block;
}

#EventSelection {
     height: 300px;
    width: 100%;
}

.event-choice {
    width: 250px;
    float: left; 
    margin-right: 10px;
    text-align: center;
}

.event-choice .radio-button{
    margin-bottom: 5px;
}

.event-choice input{
    text-align: center;
}

/* ReSharper disable UnknownHtmlTag */
#EventSelection svg, #EventSelection img{
/* ReSharper restore UnknownHtmlTag */
    margin-top: 10px;    
height: 200px;
    width: 190px;
}