html
{
   height: 100%;
   font-family: sans-serif;
   color: #FFFFFF;
}

#body
{
   height: 100%;
   margin: 0;
}

#main
{
   width: 90%;
   height: 100%;
   
   background-color: #007788;
   
   padding-left: 50px;
   padding-right: 50px;
   
   margin: 0 auto;
}

#title
{
    font-size: xx-large;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 30px;
    text-align: center;
}

#subtitle
{
    font-size: x-large;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

.buttonBar
{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

.button
{
    display: inline;
}

.question
{
    width: 50%;
    text-align: right;
    padding: 5px;
    vertical-align: top;
}

.answer
{
    width: 45%;
    text-align: left;
    padding: 5px;
    vertical-align: top;
}

.strategy
{
    width: 50%;
    text-align: right;
    padding: 5px;
    vertical-align: top;
}

.recommendation
{
    width: 45%;
    text-align: left;
    padding: 5px;
    vertical-align: top;
}

.shownColor
{
    color: #FFFFFF;
}

.hiddenColor
{
    color: #008899;
}

.show
{
    display: inline;
}

.hide
{
    display: none;
}

.showhideLink
{
    font-size: small;
    color: #CCCCCC;
}

.bold
{
    font-weight: bold;
}

ul
{
   margin: 0;
}

a:link
{
   text-decoration: none; 
}

a:visited
{
   text-decoration: none; 
}

a:active
{
   text-decoration: none; 
}


a:hover
{
   text-decoration: underline; 
   cursor: pointer;
}