/* Style for a simple plain background with no borders */
#plan_body {
    margin: 0;
    padding: 0;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    vertical-align: middle;
    background-color: #f0f0f0;
} 


/* Style for a light gray background inside a shadwowbox */
#plan_main
{
   background-color:  #f0f0f0;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* shadows */
    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

    /* round corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


/* Style for plan and data display region */
#plan_div
{    

}


/* Style for control panel with highlighted region and shadowbox */
/* Size and color are set in index file*/
#plan_table
{

    /* shadows */
    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

    /* round corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Provide headline formats */
#plan_h1 
{
    margin:0px 0px 7px 3px; 
    font-size: 2em;
    font-weight:bold;
    color: #dadada;
}
#plan_h2 
{
    margin-top: 20px;     
    text-align:center;
    font-size: 1.5em;
    color: #606060;
}
#plan_h3 
{
    margin-top: 16px;     
    text-align:center;
    font-size: 1.25em;
    color: #606060;
}


/* Provide standard button and input formats */
#plan_button {
   width                    : 110px;
   height                   : 40px;
   padding-right            : 20px;
   text-indent              : 4px;
   text-align               : center;
   vertical-align           : middle;
   margin: 0px;
   margin-bottom: 0px;
   border: 3px; 
   border-style: solid;
   border-color: #007ACC;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   font-size                : 1em;
   font-weight              : 500;
   line-height:100%;
   color                    : #404040;
   cursor                   : pointer;
   cursor                   : hand;
   outline                  : none;

   * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
   background: #f2f5f6; /* Old browsers */
   background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
}

#plan_button:hover { border-color: #FF00FF; }
#plan_button:active 
{
    * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c8d7dc+0,e3eaed+63,f2f5f6+100 */                                       
    background: #c8d7dc; /* Old browsers */
    background: -moz-linear-gradient(top, #c8d7dc 0%, #e3eaed 63%, #f2f5f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8d7dc), color-stop(63%,#e3eaed), color-stop(100%,#f2f5f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* W3C */
}

/* Provide unique button for submitting an entry and input formats */
#submit_button {
   width                    : 110px;
   height                   : 40px;
   padding-right            : 20px;
   text-indent              : 4px;
   text-align               : center;
   vertical-align           : middle;
   margin: 0px;
   margin-bottom: 0px;
   border: 3px; 
   border-style: solid;
   border-color: #00FFCC;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   font-size                : 1em;
   font-weight              : 500;
   line-height:100%;
   color                    : #404040;
   cursor                   : pointer;
   cursor                   : hand;
   outline                  : none;

   * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
   background: #f2f5f6; /* Old browsers */
   background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
}

#submit_button:hover { border-color: #00FF00; }
#submit_button:active 
{
    * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c8d7dc+0,e3eaed+63,f2f5f6+100 */                                       
    background: #c8d7dc; /* Old browsers */
    background: -moz-linear-gradient(top, #c8d7dc 0%, #e3eaed 63%, #f2f5f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8d7dc), color-stop(63%,#e3eaed), color-stop(100%,#f2f5f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c8d7dc 0%,#e3eaed 63%,#f2f5f6 100%); /* W3C */
}


input[type=text]
{
   width                    : 98px;
   height                   : 26px;
   line-height              : 30px;
   padding-right            : 10px;
   text-indent              : 0px;
   text-align               : center;
   vertical-align           : middle;
   margin: 0px;
   margin-bottom: 0px;
   padding: 4px;
   border: 3px; 
   border-style: solid;
   border-color: #007ACC;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   font-size                : 1em;
   font-weight              : 500;
   color                    : #404040;
   cursor                   : pointer;
   cursor                   : hand;
   outline                  : none;

   * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
   background: #f2f5f6; /* Old browsers */
   background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */

}

input[type=text]:hover
{
  border-color: #FF00FF; 
}

input[type=text]:focus
{
  box-shadow: inset 0 0 5px #000099; font-weight: 600;
}


input[type=number]
{
   width                    : 98px;
   height                   : 26px;
   line-height              : 30px;
   padding-right            : 10px;
   text-indent              : 0px;
   text-align               : center;
   vertical-align           : middle;
   margin: 0px;
   margin-bottom: 0px;
   padding: 4px;
   border: 3px; 
   border-style: solid;
   border-color: #007ACC;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   font-size                : 1em;
   font-weight              : 500;
   color                    : #404040;
   cursor                   : pointer;
   cursor                   : hand;
   outline                  : none;

   * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
   background: #f2f5f6; /* Old browsers */
   background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */

}

input[type=number]:hover
{
  border-color: #FF00FF; 
}

input[type=number]:focus
{
  box-shadow: inset 0 0 5px #000099; font-weight: 600;
}