body{
    margin-left:0px;
    margin-top:0px;
    margin:0;
    padding:0;
    font-family: arial, verdana, geneva, helvetica;
    background-color:#635e50;
}

#errorDiv, #msgDiv, #buyProductDiv{
    position:absolute;
    z-index:100;
    border-radius: 25px;
    padding-left:25px;
    padding-top:25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#errorDiv {
        background-color:#fcc;
}
#buyProductDiv {
        background-color:#fff;
}
#msgDiv
{
    background-color:#6fd8e3;
}
.largebutton, #MsgButton{
  position:relative;
  border-radius: 15px;
  background: #000;
  width:200px;
  padding: 20px;
  color:#fff;
  cursor:pointer;
  margin:auto;
}

.largebutton:hover{
    background:#ccccff;
}
.smallbutton
{
  position:relative;
  border-radius: 5px;
  background: #000;
  width:100px;
  padding: 5px;
  color:#fff;
  cursor:pointer;
  margin:auto; 
}
.smallbutton:hover{
     background:#ccccff;
}

.smalllistbutton
{
  border-radius: 5px;
  background: #000;
  /* width:75px; */
  height:20px;
  padding: 2px;
  color:#fff;
  cursor:pointer;
  margin:2px; 
  float:left;
  
}
#buttonContainer
{
    width:80%;
    margin:auto;
    text-align:center;
}
#two-column-form
{
float:left;
padding-top:2%;
 padding-left:2%;
 padding-right:2%;
width:80%;
background-color:#eee;
min-height:600px;
border-radius:20px;
}
.tinyinput
{
    width: 8%;
    float:left;
    margin-bottom:3px;
}
.tinysmallinput
{
    width: 15%;
    float:left;
    margin-bottom:3px;
}
.smallinput{
    width:27%;
    float:left;
    margin-bottom:3px;
}
.mediuminput{
    width:48%;
    float:left;
    margin-bottom:3px;
}
.largeinput{
    width: 55%;
    float:left;
    margin-bottom:3px;
}
.tinylabel
{
    width: 10%;
    float:left;
    padding-left:15px;  
    margin-bottom:3px;
}
.tinysmalllabel
{
    width: 12%;
    float:left;
    padding-left:15px;  
    margin-bottom:3px;
}
.smalllabel{
    width: 15%;
    float:left;
    padding-left:15px;
    padding-left:15px;
    margin-bottom:3px;
}
.largeTextArea{
    width:90%;
    height:75px;
    margin:auto;
    margin-bottom:10px;
}
.largeTextDiv
{
    width:100%;
    text-align:center;
}
.mediumlabel{
    width: 34%;
    float:left;
    padding-left:15px;
    margin-bottom:3px;
}
.largelabel{
   width:38%;
    float:left;
    padding-left:15px;
    margin-bottom:3px;
}
#header
{
    /*
    position:fixed;
    padding-left:155px;
    */
    width:100%;
    background-color:#000;
    color:#fff;
    height:25px;
}
#header a{
    text-decoration:none;
    color:#fff;
    font-size: 10pt;
}
#header a:hover{
    text-decoration:underline;
    color:#f00;
}
#signout
{
    float:right;
}
/*######################################## LEFT NAVIGATION STYLES */
#logo{
    width:100%;
    height:70px;
    text-align:center;
    vertical-align: middle;
    margin-top:2px;
    margin-bottom:5px;
    overflow-x:hidden;
    overflow-y:hidden;
}
#leftNav
{
   /* position:fixed; */
   float:left;
    padding-left:2px;
    width:20%;
    /* height:100%; */
    max-width:165px;
    background-color:#635e50;
    float:left;
    margin-right:10px;
}
.leftNavLink
{
    width:100%;
    padding-top:2px;
    padding-left:2px;
    height:30px;
     margin-top:5px;
     margin-bottom:5px;
     border-radius:5px;
     background:#ccc;
     border: solid #fff thin;
}
.leftNavLink:hover
{
     background:#fff;
     border: solid #000 thin;
}
.leftNavLink a
{
    text-decoration:none;
    color:#000;
    font-family: arial, verdana;
    width:100%;
}
.leftNavLink a:hover
{
    color: #e8b420;
    text-decoration:underline;
}
.leftNavImg{
    width:25px;
    height:25px;
    border:0px;
    margin-right:3px;
    vertical-align: middle;
}
/*######################################## TOP NAVIGATION STYLES */
#topNav{
    padding-left:155px;
    padding-top:25px;
    width:80%;
    background-color:#635e50;
     margin-top:5px;
     margin-bottom:5px;
}
.topNavLinkActive a{
 color:#000;
 text-decoration:none;
}
.topNavLink a{
 color:#aaa;
 text-decoration:none;
}
.topNavLink a:hover{
 color:#fff;
 text-decoration:none;
}
.topNavLinkActive{
    height:25px;
    margin-top:5px;
    background-color:#eee;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    margin-right:10px;
    float:right;
}
.topNavLink{
    height:25px;
    margin-top:5px;
    background-color:#ccc;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    margin-right:10px;
    float:right;
}
#topNav h1{
    height:30px;
    display: inline-block;
    overflow-x:hidden;
    overflow-y: hidden;
    float:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
    font-size:24pt;
    font-style:bold;
}
/*####################################### MAIN BODY STYLES */
h3{
    padding-top:5px;
}
.highlight{
    font-style:italic;
    color:#f00;
}
.darkRow,.darkRowlrg
{
    background-color:#ccc;
}
.lightRow,.lightRowlrg
{
        background-color:#fff;
}
.darkRow,.lightRow
{
    position:relative;
    width:90%;
    margin:auto;
    border-top:1px;
    border-top-color:#000;
    min-height:20px;
    padding:2px;
    padding-bottom:10px;

}

.darkRowlrg,.lightRowlrg
{
    position:relative;
    width:90%;
    margin:auto;
    border-top:1px;
    border-top-color:#000;
    height:90px;
    padding:2px;
    padding-bottom:10px;
}

.darkRow:hover,.lightRow:hover
{
    border: solid ;
}

.darkRow a,.lightRow a, .darkRowlrg a, .lightRowlrg a
{
    text-decoration:none;
}
.darkRow a:hover,.lightRow a:hover, .darkRowlrg a:hover, lightRow a:hover
{
    color:#f00;
}
.required{
    color:#f00;
    float:left;
    font-weight: bold;
    margin-left:5px;
    width:5px;
}

#submitButton, .viewButton{
    background:#000;
    margin-top:3px;
    margin-left:3px;
    color:#fff;
    border-radius: 4px;
    padding: 3px;
}
#submitButton:hover, .viewButton:hover, .buyButton:hover{
    background:#ccccff;
    color:#000;
}
.viewButton, .buyButton{
   /* width:115px; 
     clear:right;*/
   float:right;
   
}
.buyButton{
    margin-top:3px;
    margin-left:3px;
    color:#fff;
    border-radius: 4px;
    padding: 3px;
    background:#6fd8e3;
}
.receivePaymentButton{
    float:left;
    margin-top:3px;
    margin-left:3px;
    color:#fff;
    border-radius: 4px;
    padding: 3px;
    background:#6fd8e3;
    cursor:pointer;
}
.receivePaymentButton:hover{
    background:#e8b420;
}
#programSearchForm, #memberSearchForm, #productSearchForm {
    width:70%;
    margin:auto;
    text-align:center;
}
#resumeButton{
    float:right;
    margin-right:25px;
}
#locationSearchForm {
    width:80%;
    margin:auto;
    text-align:center; 
}
#paymentContainer
{
    width:90%;
     margin:auto;
    text-align:center;
}
#tableHeader{
    background:#000;
    color:#fff;
    width:90%;
    margin:auto;
    border-top:1px;
    border-top-color:#000;
    height:20px;
    padding:2px;
    padding-bottom:10px;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}
/*
COLUMN STYLES FOR LIST DISPLAYS.  
COL-1 - COL-6 FOR MEMBER LIST
COL-7 - COL-10 FOR PROGRAM LIST
*/

#col1, #col2, #col3, #col4, #col5, #col7, #col8, #col9, #col10, #col11,
#col12, #col13, #col14, #col15, #col16, #col17, #col18
{
      float:left;
      border-left: 1px solid #fff;
      text-align:center;
}
/*

*/
.col1, .col2, .col3, .col4, .col5, .col6, 
.col7, .col8, .col9, .col10, .col11,  
.col12, .col13, .col14, .col15, .col16, .col17, .col18{
   float:left;
   border-left: 1px solid #aaa;
   height:30px;
   text-align:center; 
   font-size:10pt;
   display:inline;
   overflow-x:hidden;
   padding-top:0px;
   padding-bottom:0px;
   text-align:center; 
}

.col6, #col6, .col10, #col10,#col11, .col11
{
   text-align:center; 
   font-size:10pt;
   display:inline;
   overflow-x:hidden;
    clear: right;
}

/* member list table columns */
 #col1, .col1{width:12%;float:left;padding-left:2px;padding-right:2px;} 
#col2, .col2{width:10%;float:left;padding-left:2px;padding-right:2px;}
#col3, .col3{width:18%;float:left;padding-left:2px;padding-right:2px;}
#col4, .col4{width:20%;float:left;padding-left:2px;padding-right:2px;}
#col5, .col5 {width:20%;float:left;padding-left:2px;padding-right:2px;} /*table header column 5 spans 2 cols */
#col6, .col6{width:15%;float:left;padding-left:2px;padding-right:2px;}/* #col6 div not being used */

/* prgram list table columsn */

#col7, .col7{width:20%;float:left;padding-left:2px;padding-right:2px;}
#col8, .col8{width:5%;float:left;padding-left:2px;padding-right:2px;}
#col9, .col9{width:20%;float:left;padding-left:2px;padding-right:2px;}
#col10, .col10{width:30%;float:left;padding-left:2px;padding-right:2px;}
#col11, .col11{width:20%;float:left;padding-left:2px;padding-right:2px;}

#col12,.col12{width:14%;float:left;padding-left:2px;padding-right:2px;}
#col13, .col13{width:14%;float:left;padding-left:2px;padding-right:2px;}
#col14, .col14{width:14%;float:left;padding-left:2px;padding-right:2px;}
#col15, .col15{width:25%;float:left;padding-left:2px;padding-right:2px;}
#col16, .col16{width:6%;float:left;padding-left:2px;padding-right:2px;}
#col17, .col17 {width:6%;float:left;padding-left:2px;padding-right:2px;}
#col18, .col18 {width:14%;float:left;padding-left:2px;padding-right:2px;}

.col12, .col13, .col14, .col15, .col16, .col17, .col18
{
height:85px;
}
.productThumbnail
{
    width:65px;
    height:80px;
}
.manageProductImage
{
    float:left;
    width:130px;
    height:190px;
    border: solid #ccc;
    text-align:center;
}
#productPhotoFile, #helpImage{
    display:none;
}
#productPhotoFileButton
{
    width:120px;
    margin:auto;
    border: solid #000;
    font-size:8pt;
    overflow:hidden;
    text-align:center;
    padding:2px;
    cursor:pointer;
}
.manageProductThumbnail{
        width:125px;
    height:160px;
}
.viewMemberButton
{
    float:left;
    margin-left:3px;
}
/*-------------------- worktab styles */
#contentDiv
{
    width:100%;
    height:300px;
    overflow-y:scroll;
    background:#fff;
    border:solid #ccc;
    padding:15px;
}
#worktabs
{
    margin-top:25px;
    padding-top:50px;
    width:90%;
    margin:auto;

}
#worktabs h3{
    float:left;
}
.largeTextAreainput
{
    width:90%;
    margin:auto;
}
#productDescription
{
   margin-left:15px;
    width:80%;
    height:65px;
    float:left;
    padding:0px;
}
#signaturediv
{
    width:95%;
    border: solid;
    height:55px;
    padding:10px;
    margin:auto;
}

/* 
//################################ ECOMMERCE STYLES
//################################################
*/

.ebody{
    background-color:#fff;
}
.bdiv1, .bdiv2
    {
        width:40%;
        overflow-x:hidden;
        overflow-y:hidden;
        border-bottom: solid #ccc;
        float:left;
        display:inline;
    }
    .bdiv3
    {
        width:80%;
        overflow-x:hidden;
        overflow-y:hidden;
        border-bottom: solid #ccc;
        float:left;
    }
    .bdivImage
    {
        width:90px;
        height:120px;
        float:left;
        margin-right:2px;
        margin-bottom:2px;
    }
    .cclabel
    {
        width: 100px;
        float: left;
    }
    #ccard, #ccname{
        width: 200px;
        float: left;
    }
    #ccamount{
        width: 200px;
        float: left;
    }
    #cccode, #ccexpiry
    {
        width:50px;
        float:left;
    }
    
    #CP
    {
        padding:2px;
        display:none;
        width:100%;
        background-color:#fff;
        text-align:left;
        border: solid thin #aaa;
    }
    #CNP
    {
        padding:2px;
        display:block;
        width:100%;
        background-color:#fff;
        text-align:left;
        border: solid thin #aaa;
    }
    #buttonContainer{
        width:100%;
        text-align:center;
    }
    .ccbutton
    {
        border-radius: 15px;
        padding: 5px;
        color: #000;
        background-color: #6fd8e3;
        cursor: pointer;
        margin: auto;
    }
 
    .container
    {
        width:81%;
        text-align:center;
        margin:auto;
    }
  
    #cnpTab, #cpTab
    {
         float:right;
         height:25px;
         border-top-left-radius: 15px;
         border-top-right-radius: 15px;
         cursor: pointer;
    }
    #cnpTab{
        background-color:#fff;
    }
     #cpTab{
        background-color:#aaa;
    }
    #memPayLeftDiv, #memPayRightDiv
    {
        width:50%;
        float:left;
        padding:10px;
        margin-left:10px;
        border: solid #ccc;
    }
    #participantPaymentHistory
    {
        width:45%; 
        height:100%;
        float:right;
        margin-right:10px;
        overflow-y: scroll;
    }
    #phistoryColumn1
    {
        width:24%;
    }
    #phistoryColumn2
    {
        width:24%;
    }
    #phistoryColumn3
    {
        width:48%;
    }
    #phistoryColumn1,#phistoryColumn2,#phistoryColumn3
    {
        float:left;
        border-left: 1px solid #fff;
        text-align:center;
      }
      
      #activityHistory{
          height:500px;
          overflow-x:scroll;
      }
      
/* ******************************** CALENDAR STYLE INFOR */
.calCell
{
    float:left;
    width:13.5%;
    min-width:75px;
    height:135px;
    border:solid #000;
    text-align:center;
    font-family:arial, verdana;
    overflow-y:hidden;
}

.topCell
{
    background-color:#ccc;
    width:100%;
    height:10px;
    min-height:15px;
    font-size:9pt;
}
.today
{
    background:#ccccff;
    float:left;
    min-width:95px;
    height:135px;
    text-align:center;
    font-size:9pt;
    font-family:arial, verdana;
    overflow-y:hidden;
    
}
#calendarContainer
{
    width:75%;
    min-width:539px;
    margin:auto;
}
.today a,.calCell a{
    text-decoration:none;
    color:#f00;
}
.today a:hover,.calCell a:hover{
    color:#f00;
}
.calendarbutton, .calendareventbutton
{
    width:100%;
    border-radius: 2px;
    border: 1px;
    background:none;
    cursor:pointer;
}
.calendarbutton:hover
{
    background:#ccc;
}
.calendarbutton .title, .calendareventbutton .title
{
    font-weight:bold;
    width:100%;
}

.calendareventbutton:hover
{
    background:#fcc;
}
.calendareventbutton .title
{
    color:#f00;
}
#loginForm
{
    padding-top:25px;
    padding-bottom:25px;
    margin-top:75px;
    width:35%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    border-radius: 20px;
    border-color:#e8b420;
    background-color:#ccc;
}
#multiColumn
{
    width:33%;
    float:left;
}

#footer
{
    width:100%;
    height:100px;
    color:#fff;
    background-color:#000;
    text-align:center;
    margin-top:25px;
}
#footer a{
    color:#fff;
    text-decoration:none;
}
#footer a:hover{
    color:#f00;
    text-decoration:none;
}
.mediumTextArea
{
    width:75%;
    height:160px;
}
.smallTextArea
{
    width:75%;
    height:60px;   
}