/****************************************************************************/
/* Page defaults.                                                           */
/****************************************************************************/

body {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10pt;
  margin: 0px;
  padding: 0px;
  align-content:center;
}

a {
  color: #000080;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: #000080;
}

a:hover {
  color: #800000;
  text-decoration: underline;
}

h4 {
  font-size: 10pt;
}

ul {
  list-style-type: square;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.vertical-center {
      float: right;
    margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/****************************************************************************/
/* Menu                                                                     */
/****************************************************************************/


#nav {
display:table; /* centers modern browsers */
margin:0 auto; /* centers modern browsers */
text-align:center; /* centers IE6/7 */
}
#nav ul {
list-style:none;
display:inline-block; /* IE6/7 haslayout trip-switch */
}
#nav ul {
display:inline; /* IE6/7 haslayout trip-switch, and IE6/7 only need ul to be display inline, yet does no harm to others */
}
#nav li {
display:inline;
}
#nav a {
float:left;
text-decoration:none; 
padding:0 60px; /* variable width */
}

.parent_menu
{
width: 110px;
background-color: #8AE0F2;
color: #ffffff;
text-align: center;
height: 30px;
margin-right: 5px;
}
.child_menu
{
width: 110px;
background-color: #8AF2D0;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
}
.sub_menu
{
width: 110px;
background-color: #8AF2D0;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
}
.selected_menu
{
background-color: #8AF29C;
}
.hover_menu
{
background-color: #8AE0F2;
color:#fff;
}


/****************************************************************************/
/* Layout objects.                                                          */
/****************************************************************************/

#titleBar {
  background-color: #8AACF2;
  border-top: 2px solid #c0c0c0;
  border-bottom: 2px solid #606060;
  color: #ffffff;
  font-size: 8pt;
  font-weight: bold;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
}

#status {
  float: right;
}

#title {
  color: #ffffff;
  font-size: 16pt;
  font-style: italic;
}


#main {
  text-align: center;  /* Needed for IE 5.x. */
}

#left {
  text-align: left;  
}

#wrapper {
  text-align: left;  /* Counteracts the above text alignment. */
  margin: 1em auto 1em auto;
}

#subTitle {
  color: #339966;
  font-size: 12pt;
  font-weight: bold;
  padding: 0px 1em 2px 0px;
  text-align: left;
}

#RecipeTitle {
  color: black;
  font-size: 12pt;
  font-weight: bold;
  padding: 0px 1em 2px 0px;
  text-align: left;
}

#IngredientTitle {
  color: black;
  font-size: 10pt;
  font-weight: bold;
  padding: 0px 1em 2px 0px;
  text-align: left;
}

#Ingredient {
  color: black;
  font-size: 10pt;
  font-weight: normal;
  padding: 0px 1em 2px 0px;
  text-align: left;
}

#InstructionTitle {
  color: black;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
}

#Instruction {
  color: black;
  font-size: 10pt;
  font-weight: normal;
  padding: 0px 1em 2px 0px;
  text-align: left;
}

#underline {
  border-top: 1px solid #808080;
  font-size: 8pt;
  font-weight: bold;
  padding: 2px;
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
}

#underlineNoPad {
  border-top: 1px solid #808080;
  font-size: 8pt;
  font-weight: bold;
  text-align: left;
}

#contact {
  float: left;
}

#copyright {
  border-top: 1px dotted #808080;
  font-size: 8pt;
  font-weight: bold;
  padding: 2px;
  padding-left: 1em;
  padding-right: 1em;
  text-align: right;
}

#topselect {
  border-bottom: 1px dotted #808080;
  font-size: 8pt;
  font-weight: bold;
  padding: 2px;
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
}

/****************************************************************************/
/* Tables.                                                                  */
/****************************************************************************/
tablerow.centerit {
  align-content:center;
text-align: center;
}

td, th {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10pt;
  padding: 2px;
  padding-left: .3em;
  padding-right: .3em;
}

td.makeright{
  text-align: left;
}

td.padleft{
    border: 1px solid black;
    background-color: lightblue;
    padding: 50px 30px 50px 80px;
}
}

td.makeleft{
  text-align: left;
  font-weight: normal;
}

td.freeform {
  padding: .25em .75em;
}

td.separator {
  background-color: #8AACF2;
    }

td.center {
  align-content:center;
    }

table.help {
  border: 1px solid #000000;
  border-bottom-width: 0px;
  empty-cells: show;
  margin-left: auto;
  margin-right: auto;
}

table.help th {
  background-color: #66cccc;
  color: #ffffff;
  font-weight: bold;
  border-bottom: 1px solid #000000;
}

table.main {
  border: 1px solid #000000;
  border-bottom-width: 0px;
  empty-cells: show;
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
}

table.main.multi {
  margin-left: 0px;  /* To make multiple tables flush left. */
}

table.main td, table.main th {
  color: #000000;
}

table.main td {
  border-bottom: 1px solid #000000;
}


table.main th {
  background-color: #8AF2D0;
  color: #ffffff;
  font-weight: bold;
  border-bottom: 1px solid #000000;
}

table.main th.alt {
  background-color: #339999;
}

table.main th.blue {
  background-color: #006666;
}

table.main tr {
  border-bottom: 1px solid #000000;
}

table.main tr.alt {
  background-color: #339999;
}

table.main tr.alt2 {
  background-color: #006666;
}

table.main tr.converter {
  background-color: #FFFFFF;
}

/* For free form text and tables within the main table display. */

table.main div.freeForm {
  padding: .25em .75em;
}

table.main div.freeForm.text {
  width: 36em;
}

table.main div.freeForm table td, div.freeForm table th {
  border-style: none;
}

/****************************************************************************/
/* Div center.                                                           */
/****************************************************************************/

div.center {
  align-content:center;
}

/****************************************************************************/
/* Form elements.                                                           */
/****************************************************************************/

input, select {
  background-color: #ffffff;
  color: #000000;
  font-size: 10pt;
}

input.button {
  background-color: #66ff99;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  border-style: solid;
  border-width: 2px;
  color: #000000;
  font-family: sans-serif;
  font-weight: bold;
}

input.checkbox, input.radio {
  background-color: #ffffff;
}

tr.alt input.checkbox, tr.alt input.radio {
  background-color: #d0d0d0;
}

tr.alt input[type="checkbox"], tr.alt input[type="radio"],
input[type="checkbox"], input[type="radio"] {
  background-color: #ffffff;
}

/****************************************************************************/
/* Text messages.                                                           */
/****************************************************************************/

.error, .info {
  border: 1px solid #000000;
  font-weight: bold;
  padding: 2px;
  padding-left: .5em;
  padding-right: .5em;
  white-space: nowrap;
}

.error {
  background-color: #ffff66;
  color: #800000;
}

.info {
  background-color: #208020;
  color: #ffffff;
}

.small {
  font-size: 8pt;
}

/******************************************************************************
* Printer styles.                                                             *
******************************************************************************/

@media print {

  a, a:visited, table.main a, table.main a:visited {
    color: #000000;
    font-weight: normal;
  }

  body {
    background-color: #ffffff;
    color: #000000;
  }

  input.button {
    background-color: #66ff99;
    border: 1px outset;
  }

  input.checkbox, input.radio {
    background-color: #ffffff;
  }

  tr.alt input.checkbox, tr.alt input.radio {
    background-color: #e0e0e0;
  }

 #titleBar, #copyright {
    background-color: #ffffff;
    border-width: 0px;
    color: #000000;
  }

  #copyright {
    border-top: 1px solid #000000;
  }

  #title {
    color: #000000;
    font-size: 10pt;
  }

  .menuBar, #subTitle {
    display: none;
  }

  .error, .info {
    background-color: #e0e0e0;
    color: #000000;
  }

  table.main td {
    border-top-width: 0px;
    border-bottom: 1px solid #000000;
  }

  table.main th, table.main th.afc, table.main th.nfc {
    background-color: #c0c0c0;
    color: #000000;
    border-top-width: 0px;
    border-bottom: 1px solid #000000;
  }

  table.main tr {
    background-color: #ffffff;
  }

  table.main tr.alt {
    background-color: #e0e0e0;
  }
}