body {
    background: White;
	width: 100%;        /* new */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
    height:100%;
}
 #container {
    background: White;
	width: 95%;        /* new */
	max-width: 922px;  /* new */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
    min-height:100%;
    position:relative;
    }
 #header { 
	padding: 15px 0px;
    text-align: center;
} 
 #body {
    padding:10px;
	padding-bottom:60px;    /* Height of the footer */
}
#mainContent {
    /* padding: 0px 20px */
    /* padding-bottom:60px; */   /* Height of the footer */
    }
 #footer { 
	position: fixed;
    bottom: 0;
    width:100%;
    height:65px;
    text-align: center;
	background: Black;
    color: white;
	float: left;
    z-index: 111;
    /* max-width:922px; */
} 
 .marginset {
    margin: 12px auto;
    padding: 0px
    }
 
 .TBLabel {
     background-color: black;
     color: white;
     width:400px;
     height: 26px;
     line-height:20px;
    font-size: medium; 
    vertical-align: middle;
    text-align:  center;
    }
 .tblabel2
 {
     background-color: black;
     color: white;
     width:400px;
     height: 36px;
     display: block;
     float: left;
     padding-top: 2px; /*This needs to be modified to fit */
}
.button {
    FONT-SIZE: 14px;
    Background-color: #FF0066;
    text-align: Left
    }
    /* Miscellaneous classes for reuse */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
    text-align: center;
}
    .fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
    .marginset {
    margin: 12 auto;
    padding: 10px
    }

 .rounded {
  border-radius: 20px;
  background: #f0f0f0;
  padding: 10px 10px 10px 10px; 
}
  .roundedsmall {
  border-radius: 10px;
  background: #f0f0f0;
  /*padding: 10px 10px 10px 10px;*/ 
}
   .tbox01 
{
  border-radius: 6px;
  background: white;
  padding: 5px 5px 5px 5px;
  text-align: center;
  color: gray; 
  font-size:small;
}
   .tbox02 
{
  border: 1px solid gray;
  border-radius: 6px;
  background-image: linear-gradient(45deg, #e7e8e9 , #fdfdfd);
  padding: 5px 5px 5px 5px;
  text-align: left;
  color: gray;
  font-size:small;
}

   .tlabel01 
{
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  color: black;
  font-size:small;
}


.gradient1 {
  background-image: linear-gradient(45deg, #e7e8e9 , #fdfdfd)
}
.gradient2 {
  background-image: linear-gradient(90deg, #ace74a, #90c43c)
}
.gradient3 {
  background-image: linear-gradient(90deg, #414042, #000000)
}
/*
  linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                  \---------------------------------/ \----------------------------/
                    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

*/

.shadow {
    position: relative;
    z-index:2;
    box-shadow: 0 8px 16px -6px black;
    top: 0px;
    left: 0px;
}
 .btntb
{
  background-color: #ace74a;
  border-color:  #ace74a;
  /*background-image: linear-gradient(90deg, #ace74a, #90c43c);*/
  color:black;
  height: 35px;
  width: 200px;
  text-transform: uppercase !important;
    top: 0px;
    left: 0px;
}
.btntest
{
    background-color: #44d200;
    text-align:center;
    border: solid 1px #44d200;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #001563;    
    height: 25px;  
    padding: 10px 30px 30px 30px;
    border-radius: 6px;

}

.btntest:hover
{
    background-color: black;
    border: solid 1px grey;
    color: white;   
}
.btntest:focus
{
    outline:none;
}
  .btntbz
{
  background-color: black;
  border-color: black;
  color:#ace74a;
  height: 35px;
  text-transform: uppercase;
  width: 200px;
}
 .btntx
{
  background-color: #44d200;
  border-color: darkgray;
  border-width: 1px;
  color:black;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-image: url("DDLImage.png");
  
}
    .MakeCapsStyle
    {
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: medium;
        } 
    
   h1
    {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: 100;
      font-size: 28pt;
      /* color: #424242; */
      color: black;
      line-height: 28px;
      text-align:center;
      /* text-decoration: underline; */
      /* content: ''; */
      /* width: 100%; */
      /* position: absolute;*/
      /* left: 0; 
      /* bottom: 4px;

      border-width: 0 0 1px;
      border-style: solid;
      border-bottom-color: grey; */

      /* border-bottom: 2px solid #c1c1c1; */
      border-bottom: 2px solid black;
      padding-bottom: 10px; 
      /*background-color: grey;*/
    }
    h2 
    {
        margin: 20px 0px 8px 0px;
        font-family: "Verdana";
        font-size: medium;
        font-weight: normal;
        color: #365f91;
}
    
       .style5    {
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            font-weight: bold;
        }
       .style5a
    {
        text-align: center;
    }
        .style4
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: x-small;
        }
        .style6
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: medium;
        }
        .style7
    {
        font-size: small;
    }
    .style22
        {   /* this sets the font size for the Bookdisp2 user instructions */
            font-size: small;
        }
     .style100
    {
        text-align: right;
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
        .style102
        {
            /* font-size: xx-small; */
        }
     #scrolledGridView
    {
        overflow-x: scroll; 
        text-align: left;
        width: 400px; /* i.e. too small for all the columns */
    }

    .pinned
    {
        position: fixed; /* i.e. not scrolled */
        background-color: White; /* prevent the scrolled columns showing through */
        z-index: 100; /* keep the pinned on top of the scrollables */
        border: thin solid black;
    }
    .scrolled
    {
        position: relative;
        left: 150px; /* i.e. col1 Width + col2 width */
        overflow: hidden;
        white-space: nowrap;
        min-width: 200px; /* set your real column widths here */
    }
    .col1
    {
        left: 0px;
        width: 150px;
    }
    .col2
    {
        left: 50px; /* i.e. col1 Width */
        width: 100px;
    }

       .myGrid { background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;
    font-size: 10px;
}
       .myGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #333333; }
       .myGrid th { padding: 4px 2px; color: Black; border-left: solid 1px #c1c1c1; font-size: small; padding-left: 5px }
       .myGrid .alt {background: #fcfcfc url(/css/grd_alt.png) repeat-x top; }
       .myGrid .pgr {background: #424242 url(/css/grd_head1.png) repeat-x top; }
       .myGrid .pgr table { margin: 5px 0; }
       .myGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }   
       .myGrid .pgr a { color: #666; text-decoration: none; }
       .myGrid .pgr a:hover { color: #000; text-decoration: none; } 
       .myGrid .ed { color: #000; font-size: x-small; 
}

    .mGrid { background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;
    font-size: xx-small;
}
       .mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #333333; }
       .mGrid th { padding: 4px 2px; color: black; font-weight: bold; background: #44d200; border-left: solid 1px #525252; font-size: 0.9em; }
       .mGrid .alt {background: #ffffc url(/css/grd_alt.png) repeat-x top; }
       .mGrid .pgr {background: #424242 url(/css/grd_head1.png) repeat-x top; }
       .mGrid .pgr table { margin: 5px 0; }
       .mGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }   
       .mGrid .pgr a { color: #666; text-decoration: none; }
       .mGrid .pgr a:hover { color: #000; text-decoration: none; }
    .mGrid .ed {
        color: #000;
        font-size: x-small;
    }
  .mDView { background-color: #fff; color:Black; border: solid 1px #525252; border-collapse:collapse;
    font-size: small;
    margin-right: 0px;
}
       .mDView td { padding: 2px; border: solid 1px #c1c1c1; color: Black; }
       .mDView th { padding: 4px 2px; color: Black; background: #44d200; border-left: solid 1px #525252; font-size: 0.9em; }
       .mDView .fh { padding: 4px 2px; color: Black; background: #44d200; border-left: solid 1px #525252; font-size: 0.9em; }
       .mDView .alt {background: #fcfcfc url(/css/grd_alt.png) repeat-x top; }
       .mDView .cmd {height: 30px; background: #44d200; font-weight: bold;}
       .mDView .cmd a {color: Black;}
       .mDView .edit {font-size: xx-small;}
       .mDView .pgr {background: #44d200; }
       .mDView .pgr table { margin: 5px 0; }
       .mDView .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }   
       .mDView .pgr a { color: #666; text-decoration: none; }
       .mDView .pgr a:hover { color: #000; text-decoration: none; 
}

/*.calendarWrapper
{
    background-color: #4CCAEF;
    padding: 5px;
    display: inline-block;
}*/

.myCalendar
{
    background-color: white;
    width: 300px;
    border: none !important;
    /*border: 2px solid #ddd !important;*/
}

    .myCalendar a
    {
        text-decoration: none;
    }

    .myCalendar .myCalendarTitle
    {
        font-weight: bold;
        font-size: 28px;
        /* font-variant:   small-caps;*/
        text-transform: uppercase; 
        height: 40px;
        line-height: 40px;
        /* background-color: #4CCAEF; */
        background-color: white;
        color: #000000;
        border: none !important;
    }

    .myCalendar th.myCalendarDayHeader
    {
        height: 25px;
        font-size: 18px;
        /*font-style:normal;*/
        text-align:center;
        /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: #44d200 !important;
        /* text-decoration-color: green;*/
    }

    .myCalendar tr
    {
        border-bottom: solid 2px #ddd;
        font-size: 16px;
        color: green;
    }

    .myCalendar table tr
    {
        border-bottom: none !important;
        color: green;
    }

    .myCalendar tr:last-child td
    {
        border-bottom: none;
        color: green;
    }

    .myCalendar tr td.myCalendarDay, .myCalendar tr th.myCalendarDayHeader
    {
        border-right: solid 1px #ddd;
        color: green;
    }

    .myCalendar tr td:last-child.myCalendarDay, .myCalendar tr th:last-child.myCalendarDayHeader
    {
        border-right: none;
    }

    .myCalendar td.myCalendarDay:nth-child(7) a
    {
        color: #c52e2e !important;
    }

    .myCalendar .myCalendarNextPrev
    {
        text-align: center;
    }

        .myCalendar .myCalendarNextPrev a
        {
            font-size: 1px;
        }

        .myCalendar .myCalendarNextPrev:nth-child(1) a
        {
            color: #4CCAEF!important;
            background: url("Arrow2.png") no-repeat center center;
        }

            .myCalendar .myCalendarNextPrev:nth-child(1) a:hover, .myCalendar .myCalendarNextPrev:nth-child(3) a:hover
            {
                background-color: transparent;
            }

        .myCalendar .myCalendarNextPrev:nth-child(3) a
        {
            color: #4CCAEF!important;
            background: url("Arrow1.png") no-repeat center center;
        }

    .myCalendar td.myCalendarSelector a
    {
        /*background-color: black;*/
        background-color: #44d200;
        color: #2d3338 !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size:larger;
    }

    .myCalendar .myCalendarDayHeader a,
    .myCalendar .myCalendarDay a,
    .myCalendar .myCalendarSelector a,
    .myCalendar .myCalendarNextPrev a
    {
        display: block;
        line-height: 20px;
    }

          .myCalendar .calWeds
{
    background-color: #daf7bd;
}  

    .myCalendar .myCalendarToday
    {
        /*background-color: #44d200;*/
        background-color: black;
        /*background-color: lightblue;*/
        color: white !important;
        /*-webkit-box-shadow: 1px 1px 8px 1px #8f8f8f;
        box-shadow: 1px 1px 8px 1px #8f8f8f;*/
        /*display: inline-block;
        width: 22px !important;
        height: 19px !important;
        border: 2px solid #f2f2f2;
        margin-left: -1px;
        margin-top: -1px;
        position: relative;*/
    }

        .myCalendar .myCalendarToday a
        {
            /*color: #44d200 !important;*/
            color: gray !important;
            font-weight: bold;
        }

            /*.myCalendar .myCalendarToday a:after
            {
                /*content: "TODAY";*/
                color: #000000;
                font-size: 0.5em;
                display: inline-block;
                pointer-events: none;
                width: 100%;
                float: left;
            }*/

    .myCalendar .myCalendarDay a:hover,
    .myCalendar .myCalendarSelector a:hover
    {
        background-color: #25bae5;
    }
       
.Calendar 
{ 
    background-color: White;
    border-color: #3366CC; 
    border-top-width: 0px;
    color: #003399;
    font-family: Arial; 
    font-size: x-small; 
    font-weight: bold; 
    width: 300px;
    height: 200px;
}
       .Calendar .calBody
{
    font-weight: normal;
    font-size: medium;
    color: Gray;
}
       .Calendar .calTitle 
{   
    background-color: #44d200;
    height: 25px;
    border-width: 1px;
    font-size: 10pt;
    font-weight: bold;
    color: White; 
    border-style: solid;
    border-width: 6px;
    border-color: #44d200;
    padding: 0px 0px 0px 0px;
}
       .Calendar .calDay 
{
    background-color: #99CCCC; 
    color: #336666; 
    Height: 1px
}
       
       .Calendar .calPtrs
{
    color: White; 
    font-size: 8pt;
}  
       .Calendar .calSds
{
    background-color: #009999;
    font-weight: bold;
    color: #CCFF99
}  
       .Calendar .calWeds
{
    background-color: #CCCCFF;
}  
 .Calendar .calSS
{
    background-color: #99CCCC;
    color: #336666;
}  
   .BookTable  
{
    color: Black; 
    font-size: medium;
    Height: 1px
}  
   .BookTable  
{
    color: Black; 
    font-size: medium;
    Height: 1px
}  
  .BookTable .th  
{
    /*background-color: #016533;*/
    background-color: #44d200;
    color: black;
    font-size: medium;
    Height: 1px
}  
  .BookTable .td  
{
    color: Black; 
    font-size: medium;
    Height: 1px
}  
.MainTable  
{
    color: Black; 
    font-size: medium;
    Height: 1px;
    background-color: #44d200;
} 
.dispTable  
{
    color: #ddd; 
    font-size: medium;
    Height: 1px;
    background-color: lightgray;
    /*border: 1px solid yellow;*/
    border-left:none;
} 
/*ul { list-style-type: none; }
.bullet1 { list-style-image: url("images/list_bullet.jpg")}
.bullet2 { list-style-image: url("images/list_bullet2.jpg")}
ol { list-style-type: none; }*/