/* This is the main table that contains both the menu and the actual calculator/planner. */
#plan_full {
   background: black;
   color: white;
   border: 0px;
   text-align: center;
   width: 100%;
}
/* This is the cell that contains the calculator/planner menu. */
#plan_menu_cell {
   vertical-align: top;
}
/* This is the <div> that contains the calculator/planner menu. */
#plan_menu {
   background: black;
   color: white;
   border: 1px white solid;
   text-align: center;
   padding: 10px;
   padding-top: 5px;
   padding-bottom: 20px;
   vertical-align: top;
}
/* This is the header of the calculator/planner menu, saying simply "MENU". */
#plan_menu_header {
   border-bottom: 2px blue solid;
   font-family: Verdana, Tahoma, Arial, Sans-serif;
   font-size: large;
   font-weight: bold;
   line-height: 250%;
}
/* This is the link colors for the calculator/planner menu. */
#plan_menu a:link {
   color: white;
}
#plan_menu a:visited {
   color: orange;
}
#plan_menu a:hover {
   color: yellow;
}

/* This is the <div> that contains the whole calculator/planner. */
#plan_container {
   color: white;
   text-align: center;
   padding: 20px;
   max-width: 100%;
   margin-right: 7%;
   margin-left: 3.5%;
}
/* This is the header of the calculator/planner. */
#plan_header {
   border-bottom: 2px blue solid;
   font-family: Verdana, Tahoma, Arial, Sans-serif;
   font-size: xx-large;
   margin-bottom: 10px;
   padding-bottom: 10px;
}
/* This is the table that contains the buttons and text fields for current/goal/final XP and username. */
#plan_table_xp {
   text-align: center;
   vertical-align: middle;
   width: 100%;
}
/* These aer the text fields for the username/level/xp. */
#plan_user {
   width: 130px;
}
#plan_cur_lvl {
   width: 60px;
   text-align: center;
}
#plan_goal_lvl {
   width: 60px;
   text-align: center;
}
#plan_cur_xp {
   width: 100px;
   text-align: center;
}
#plan_goal_xp {
   width: 100px;
   text-align: center;
}
/* This is the <select> element for the drop-down category menu. */
#plan_category_list {
   width: 80%;
}
/* This is the message that says how much XP/levels are gained/required. */
#plan_message {
   background: black;
   border: 1px white solid;
   border-bottom: none;
   text-align: center;
   margin-top: 12px;
}
/* This is the table that contains the activities list. */
#plan_table_list {
   background: black;
   border: 1px white solid;
   text-align: center;
   width: 100%;
}
/* This is the column headers for the activities list. */
#plan_listhead {
   font-weight: bold;
}
/* This is for the text fields to enter the number of activities (in each row). */
.plan_edit {
   width: 50px;
}
/* This is for rows that are available at the current level. */
.plan_availablerow {
   font-family: Verdana, Tahoma, Arial, Sans-serif;
   background-color: #00AA00;
   color: #white;
}
/* This is for rows that are UNavailable at the current level. */
.plan_unavailablerow {
   font-family: Verdana, Tahoma, Arial, Sans-serif;
   background-color: #EE0000;
   color: #white;
}