/* Toggler - default style */
	.toggler {
		text-decoration: none;
		font-size: 14px;
		display: block;
		width:80px;
	}
	.toggler-closed {
		font-size:14px;
    color:#667d3a;
    text-decoration:none;
	}
	.toggler-closed:hover {
    color:#2b4100;
    text-decoration:underline;
  }
  
	.toggler-opened {
		color:#2b4100;
		text-decoration:underline;
	}
	
	.toggler-opened:hover {
		color:#2b4100;
	}
	
	
	.toggler-1 {
    padding:20px;
    background:#efefef;
    border:1px solid #b2b2b2;
	}

/* SET DEFAULTS */

* {
  margin:0px;
  padding:0px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  margin:0px;
  padding:0px;
  font-family:arial;
  line-height:125%;
}

.clear {
  clear:both;
}


#header {
  width:100%;
  background:#353535;
}


#header-panel {
  position:relative;
  width:980px;
  margin:0 auto;
  padding:20px 0;
  padding-left:20px;
}

  .welcome {
    position:absolute;
    top:50px;
    right:25px;
    text-align:right;
    font-size:14px;
    color:#ffffff;
  }

  .welcome a {
    margin-right:5px;
    color:#ffffff;
    text-decoration:none;
  }

  .welcome a:hover {
    color:#dbe900;
    text-decoration:underline;;
  }


#nav {
  width:100%;
  background:url('images/bg-nav.jpg') repeat-x;
}


#nav-panel {
  position:relative;
  width:980px;
  height:40px;
  margin:0 auto;
  padding:10px 0px;
}

  .nav-menu {
    position:absolute;
    top:10px;
    left:20px;
  }

  .nav-menu a {
    margin-right:50px;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
  }

  .nav-menu a:hover {
    color:#dbe900;
    text-decoration:underline;
  }

  .profile-link {
    position:absolute;
    top:10px;
    right:20px;
  }

  .profile-link a {
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
    margin-left:40px;
  }

  .profile-link a:hover {
    color:#dbe900;
    text-decoration:underline;
  }




/* SET HOME */

#section1 {
  position:relative;
  width:980px;
  height:200px;
  margin:50px auto 0;
}

#login {
  position:absolute;
  top:0;
  left:0;
  width:280px;
  height:200px;
}

  table.login {
	padding-left:20px;
    font-size:14px;
    color:#707070;
  }
  
  table.login td {
    padding:0 10px 3px 0;
  }
  
  table.login input {
    font-size:14px;
    color:#353535;
    padding:3px 5px;
    border:1px solid #a1a1a1;
  }
  
  table.login p {
    font-size:13px;
  }
  
  a.link {
    font-size:13px;
    color:#4776b6;
    text-decoration:none;
  }
  
  input.sigin {
    display:block;
    width:80px;
    margin:20px auto 0;
    padding:4px 8px;
    text-align:center;
    background:#aeb254;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
  }
  
  input.sigin:hover {
    background:#161616;
    color:#f2f879;
  }

#banner {
  position:absolute;
  top:0;
  right:0;
  width:700px;
  height:300px;
}

#section2 {
  width:100%;
  height:250px;
  padding-top:80px;
  background:url('images/bg-hometwo.png') repeat-x;
}

#section2-panel {
  width:980px;
  margin:0 auto;
}

  #section2-panel h1 {
    float:left;
    margin-left:360px;
    font-size:15px;
    font-weight:normal;
    color:#667d3a;
  }
  
  #contact-info {
    float:right;
    width:465px;
    font-size:15px;
    color:#353535;
  }


 
/* SET PAGE DEFAULTS */
  
#mainbody {
  width:960px;
  padding-left: 20px;
  margin:0 auto 50px;
}

.page-header {
  position:relative;
  width:930px;
  margin-top:20px;
  padding:0 10px 3px 0;
  border-bottom:1px solid #838383;
}

  .page-header h1 {
    font-size:20px;
    color:#333333;
    font-style:italic;
	padding-left:20px;
  }
  
  .page-header h1 span {
    font-size:15px;
  }
  
.page-header-follow {
  position:relative;
  width:230px;
  margin-top:30px;
  padding:0 10px 3px 0;
}
 .page-header-follow h1 {
    font-size:20px;
    color:#333333;
    font-style:italic;
	padding-left:10px;
  }

/* SET ANNOUNCEMENT PAGE */


#member-summary {
  float:left;
  width:280px;
  margin:50px 0;
  padding:20px;
  background:#eaeaea;
  text-align:center;
}
  
  table.member-sum {
    text-align:left;
    padding:5px 0;
    font-size:14px;
    color:#353535;
  }
  
  table.member-sum td {
	vertical-align:text-top;
	width:130px;
    padding:5px 0;
  }

#contents-panel {
  float:right;
  width:620px;
  margin:50px 0;
  margin-right: 20px;
}

#contents-panel-follow {
  float:right;
  width:620px;
  margin-top:30px;
  margin-bottom: 20px;
  margin-right:30px;
}

table.annoucement th {
  padding:7px 0 7px 5px;
  font:15px arial;
  font-weight:bold;
  color:#424242;
  text-align:left;
  border-top:1px solid #858585;
  border-bottom:1px solid #858585;
}

th.view {
  text-align:center;
}


table.annoucement td {
  vertical-align:top;
  padding:15px 0 15px 5px;
  font-size:14px;
  color:#424242;
  border-bottom:1px solid #858585;
}

a.green {
margin-top: 10px;
color:#00CC00;
}

a.red {
color:#FF0000;
margin-top: 10px;
}

a.read {
  font-size:14px;
  color:#667d3a;
  text-decoration:none;
}

a.read:hover {
  color:#2b4100;
  text-decoration:underline;
}



/* SET CPD PAGE */

.event-title {
	padding:10px 10px 10px 10px;
	background:#efefef;
    border:1px solid #b2b2b2;
}

.event-desc {
	margin-left: 15px;
	padding:5px 5px 5px 5px;
	background:#efefef;
}

.request {
  width:660px;
  margin:3px 0;
}

.request-form {
  float:left;
  width:auto;
}

.request p {
  display:inline;
  float:left;
  width:250px;
  padding:3px;
  vertical-align:top;
} 

.request p span {
  float:right;
}

textarea.CPD-request {
  resize:none;
  font: 13px arial;
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.CPD-request {
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.save-request {
  padding:6px 9px;
  color:#ffffff;
  background:#656a86;
  border:1px solid #aaaaaa;
}
  
table.cpd-title {
  margin-top:30px;
  border-collapse:collapse;
}
  
  table.cpd-title th {
    padding:5px 0;
    background:#ff9000;
    font-size:14px;
    color:#000000;
  }
  
table.cpd-menu {
  font-size:14px;
  color:#333333;
  border-collapse:collapse;
}

table.cpd-menu td {
	padding:5px 10px 5px 10px;
    vertical-align:top;
}

table.cpd-menu a:link {
	text-decoration:none;
}

table.cpd-menu a:visited {
	text-decoration:none;
}

table.cpd-menu a:hover {
	text-decoration:underline;
}

  input.choose-attach {
    width:190px;
    margin-top:5px;
	margin-bottom:5px;
  }
  
table.cpd {
  font-size:14px;
  color:#333333;
  border-collapse:collapse;
}
  
  table.cpd a:link {
	text-decoration:none;
}

  table.cpd a:visited {
	text-decoration:none;
}
  
  table.cpd td {
    padding:10px 10px;
    vertical-align:top;
  }
  
  table.cpd td p {
    margin-left:40px;
    font-weight:bold;
    text-decoration:underline;
  }
  
  td.cpd-events {
    border-bottom:1px solid #ff7200;
  }
  
  td.cpd-events ul {
    margin-left:20px;
  }
  
  td.description ol {
    margin-left:20px;
    font-size:14px;
    color:#ff7200;
    font-weight:bold;
  }
  
  td.description ul {
    margin-left:40px;
    list-style-position:inside;
    font-size:14px;
    color:#333333;
  }

  td.year, td.credit-hour, td.max-annum {
    text-align:center;
  }
  
   td.year, td.credit-hour, td.earn-point {
    text-align:center;
  }

  tr.end {
    border-bottom:1px solid #ff7200;
  }
  
   tr.cpdTitle
  {
		margin-top:30px;
		border-collapse:collapse;
  }
  
  tr.cpdTitle th
  {
    padding:5px 0;
    background:#ff9000;
    font-size:14px;
    color:#000000;
  }

/* SET MEMBER PROFILE */

a.edit-profile {
  position:absolute;
  top:0;
  right:10px;
  font-size:15px;
  color:#333333;
  text-decoration:none;
}

a.edit-profile:hover {
  color:#ff7200;
  text-decoration:underline;
}


#member {
  margin:30px 0;
  text-align:center;
}

  
  input.choose-file {
    width:190px;
    margin-top:10px;
  }
  

h1.info {
  font-size:15px;
  color:#ffffff;
  text-align:center;
  margin:10px 0;
  padding:5px 0;
  background:#8e92a7;
}

.profile-panel {
  width: 675px;
  margin:3px 0;
  padding:0 0 0 20px;
}

  .data {
    display:inline;
    float:left;
    width:250px;
    padding:3px;
  }
  
  .show-text {
    float:left;
    width:300px;
    padding:3px;
  }
  
  .edit-text {
    float:left;
    width:400px;
  }
  
  .edit-text input, .edit-text select {
    width:350px;
    padding:3px;
    border:1px solid #aaaaaa;
    color:#333333;
  }
  
  input.gender {
	border: none;
    width:auto;
    margin-right:5px;
  }
  
  input.btn {
    width:auto;
    margin:5px 10px 0 0;
    padding:6px 9px;
    color:#ffffff;
    background:#656a86;
  }
  
  input.btn:hover {
    background:#121212;
  }


  .data span, .show-text span {
    float:right;
  }
  
  textarea {
    width:350px;
    padding:3px;
    font:14px arial;
    color:#333333;
  }


/* SET CHANGE PASSWORD */

.password-panel {
  width:950px;
  margin:3px 0;
}

.password-panel p {
  display:inline;
  float:left;
  width:250px;
  padding:3px;
  vertical-align:top;
} 

.password-panel a {
  display:inline;
  color:#424242;
  font-size:14px;
  float:left;
  width:500px;
  padding:3px;
  overflow:visible;
} 

.password-panel p span {
  float:right;
}

.change-password {
  float:left;
  width:auto;
}

input.password {
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.captcha {
  width:100px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.save-password {
  padding:6px 9px;
  color:#ffffff;
  background:#656a86;
  border:1px solid #aaaaaa;
}

input.save-password:hover {
  background:#121212;
}

ul.password-terms {
  list-style-position:inside;
  list-style-type:decimal;
  font-size:14px;
  color:#424242;
}



/* SET FONT */

h1.pg-title {
  font-size:18px;
  font-weight:bold;
  color:#2b480a;
}


h1.article {
  font-size:16px;
  color:#424242;
}


p {
  font-size:14px;
  color:#424242;
}



/* SET FOOTER */

#footer {
  width:100%;
  border-top:1px solid #d0d0d0;
}

#footer-section {
  width:980px;
  margin:0 auto;
  padding:20px 0 0 20px;
  font-size:13px;
  color:#353535;
}

#footer-section p {
  font-size:13px;
  color:#7c7c7c;
}

#footer-section a {
  display:inline-block;
  margin:0 30px 10px 0;
  color:#353535;
  text-decoration:none;
}

#footer-section a:hover {
  color:#404f25;
  text-decoration:underline;
}

/*------------------*/
/* Self added class */

.logout a:link {text-decoration:none; color:#EEEEEE;}      /* unvisited link */
.logout a:visited {text-decoration:none; color:#EEEEEE;}  /* visited link */
.logout a:hover {text-decoration:underline; color:#EEEEEE;}  /* mouse over link */
.logout a:active {text-decoration:none; color:#EEEEEE;}  /* selected link */

#content h1 {font-size:180%; color:#EEEEEE;}
#content h1 {margin:0; padding:10px 15px; background:url("images/content-h1.gif") 0 0 repeat-x; letter-spacing:-1px;}

.msg {padding:10px; padding-left:35px;}
.msg.warning {background:url("images/ico-warning.gif") 10px 50% no-repeat;}
.msg.warning {border:2px solid #F2DD8C; background-color:#FFF5CC;}
.msg.warning a {color:#df0000;} .msg.warning a:hover, .msg.warning a:active, .msg.warning a:focus {color:#303030;}
.msg.info {background:url("images/ico-info.gif") 10px 50% no-repeat;}
.msg.info {border:2px solid #B8E2FB; background-color:#E8F6FF;}
.msg.done {background:url("images/ico-done.gif") 10px 50% no-repeat;}
.msg.done {border:2px solid #BBDF8D; background-color:#EAF7D9;}
.msg.error {background:url("images/ico-delete.gif") 10px 50% no-repeat;}
.msg.error {border:2px solid #FFAEAE; background-color:#FEEBEB;}

.tableheader {
text-align:center; 
background-color:#555555; 
padding:5px 5px 5px 5px; 
font-size:12px; 
font-weight:bold; 
color:#FFFFFF;	
}

.tableheader a:link {text-decoration:none; color:#FFFFFF;}      /* unvisited link */
.tableheader a:visited {text-decoration:none; color:#FFFFFF;}  /* visited link */
.tableheader a:hover {text-decoration:underline; color:#FFFFFF;}  /* mouse over link */
.tableheader a:active {text-decoration:none; color:#FFFFFF;}  /* selected link */

.tabledata {
text-align:center; 
background-color:#E8F6FF;
padding:2px 2px 2px 2px; 
font-size:12px; 
color:#000000;
}

.bgwhite {
	background-color:#FFF;
}
.bgblack {
	background-color:#000;
}
.bggrey {
	background-color:#CCC;
}
.bgred {
	background-color:#F00;
}

.tabledata a:link {text-decoration:none; color:#000000;}      /* unvisited link */
.tabledata a:visited {text-decoration:none; color:#000000;}  /* visited link */
.tabledata a:hover {text-decoration:underline; color:#000000;}  /* mouse over link */
.tabledata a:active {text-decoration:none; color:#000000;}  /* selected link */

.tabledataform {
background-color:#E8F6FF;
padding:2px 2px 2px 2px; 
font-size:12px; 
color:#000000;
}

.tabledataform a:link {text-decoration:none; color:#000000;}      /* unvisited link */
.tabledataform a:visited {text-decoration:none; color:#000000;}  /* visited link */
.tabledataform a:hover {text-decoration:underline; color:#000000;}  /* mouse over link */
.tabledataform a:active {text-decoration:none; color:#000000;}  /* selected link */

/*----------------*/
/* KMChew - Added */
/*----------------*/
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }













/*
    Unminified development version of the datepicker stylesheet. Please use the
    minified version in production - remember to run a find/replace on the
    minified file to update the image locations to suit your installation - more
    info can be found in the header of the minified file.
    
    F.Y.I: Here's the HTML produced for each instance of the datePicker, in this
    case associated with a form element whose id is "demo-1"
    
<div id="fd-demo-1" class="date-picker drag-enabled" aria-describedby="fd-dp-aria-describedby" aria-labelledby="demo-1_label" aria-hidden="false" role="application" dir="ltr">
    <div>
        <table class="date-picker-table" role="grid">
            <thead class="date-picker-thead">
                <tr role="presentation">
                    <th class="date-picker-title drag-enabled" colspan="7"><span class="month-display drag-enabled">January&nbsp;</span><span class="year-display drag-enabled">2013</span></th>
                </tr>
                <tr role="presentation">
                    <th><span class="prev-but prev-year" id="demo-1-prev-year-but" title="Previous year">«</span></th>
                    <th><span class="prev-but prev-month" id="demo-1-prev-month-but" title="Previous month">‹</span></th>
                    <th colspan="3"><span class="today-but fd-disabled" id="demo-1-today-but" title="">Today</span></th>
                    <th><span class="next-but next-month" id="demo-1-next-month-but" title="Next month">›</span></th>
                    <th><span class="next-but next-year" id="demo-1-next-year-but" title="Next year">»</span></th>
                </tr>
                <tr>
                    <th class="date-picker-day-header" scope="col" role="columnheader" id="demo-1-col-0" title="Monday">Mon</th>
                    <th class="date-picker-day-header" scope="col" role="columnheader" id="demo-1-col-1" title="Tuesday"><span class="fd-day-header" title="Tuesday">Tue</span></th>
                    <th class="date-picker-day-header" scope="col" role="columnheader" id="demo-1-col-2" title="Wednesday"><span class="fd-day-header" title="Wednesday">Wed</span></th>
                    <th class="date-picker-day-header" scope="col" role="columnheader" id="demo-1-col-3" title="Thursday"><span class="fd-day-header" title="Thursday">Thu</span></th>
                    <th class="date-picker-day-header" scope="col" role="columnheader" id="demo-1-col-4" title="Friday"><span class="fd-day-header" title="Friday">Fri</span></th>
                    <th class="date-picker-day-header date-picker-highlight" scope="col" role="columnheader" id="demo-1-col-5" title="Saturday"><span class="fd-day-header" title="Saturday">Sat</span></th>
                    <th class="date-picker-day-header date-picker-highlight" scope="col" role="columnheader" id="demo-1-col-6" title="Sunday"><span class="fd-day-header" title="Sunday">Sun</span></th>
                </tr>
            </thead>
            <tbody>
                <tr role="row">
                    <td aria-describedby="demo-1-col-0" aria-selected="false" role="gridcell" class="date-picker-unused" title="">&nbsp;</td>
                    <td aria-describedby="demo-1-col-1" aria-selected="false" role="gridcell" title="January 01, 2013" class="day-1 cell-1 cd-20130101 yyyymm-201301 mmdd-0101">1</td>
                    <td aria-describedby="demo-1-col-2" aria-selected="false" role="gridcell" title="January 02, 2013" class="day-2 cell-2 cd-20130102 yyyymm-201301 mmdd-0102">2</td>
                    <td aria-describedby="demo-1-col-3" aria-selected="false" role="gridcell" title="January 03, 2013" class="day-3 cell-3 cd-20130103 yyyymm-201301 mmdd-0103">3</td>
                    <td aria-describedby="demo-1-col-4" aria-selected="false" role="gridcell" title="January 04, 2013" class="day-4 cell-4 cd-20130104 yyyymm-201301 mmdd-0104">4</td>
                    <td aria-describedby="demo-1-col-5" aria-selected="false" role="gridcell" title="January 05, 2013" class="day-5 cell-5 cd-20130105 yyyymm-201301 mmdd-0105 date-picker-highlight">5</td>
                    <td aria-describedby="demo-1-col-6" aria-selected="false" role="gridcell" title="January 06, 2013" class="day-6 cell-6 cd-20130106 yyyymm-201301 mmdd-0106 date-picker-highlight">6</td>
                </tr>
                <tr role="row">
                    <td aria-describedby="demo-1-col-0" aria-selected="false" role="gridcell" title="January 07, 2013" class="day-0 cell-7 cd-20130107 yyyymm-201301 mmdd-0107">7</td>
                    <td aria-describedby="demo-1-col-1" aria-selected="false" role="gridcell" title="January 08, 2013" class="day-1 cell-8 cd-20130108 yyyymm-201301 mmdd-0108">8</td>
                    <td aria-describedby="demo-1-col-2" aria-selected="false" role="gridcell" title="January 09, 2013" class="day-2 cell-9 cd-20130109 yyyymm-201301 mmdd-0109">9</td>
                    <td aria-describedby="demo-1-col-3" aria-selected="false" role="gridcell" title="January 10, 2013" class="day-3 cell-10 cd-20130110 yyyymm-201301 mmdd-0110">10</td>
                    <td aria-describedby="demo-1-col-4" aria-selected="false" role="gridcell" title="January 11, 2013" class="day-4 cell-11 cd-20130111 yyyymm-201301 mmdd-0111">11</td>
                    <td aria-describedby="demo-1-col-5" aria-selected="false" role="gridcell" title="January 12, 2013" id="demo-1-date-picker-hover" class="day-5 cell-12 cd-20130112 yyyymm-201301 mmdd-0112 date-picker-today date-picker-highlight date-picker-hover" tabindex="0">12</td>
                    <td aria-describedby="demo-1-col-6" aria-selected="false" role="gridcell" title="January 13, 2013" class="day-6 cell-13 cd-20130113 yyyymm-201301 mmdd-0113 date-picker-highlight">13</td>
                </tr>
                
                ... snip ...
                
            </tbody>
        </table>
    </div>
</div>

*/

/* 
    Hide the datepickers associated input by using a className 
*/
.fd-hidden-input
    {
    display:none;
    }
/* 
    Screen reader class - used to hide spans inside each cell from the visual 
    display. See: http://webaim.org/techniques/css/invisiblecontent/ 
*/
.fd-screen-reader
    {
    position:absolute;
    left:-999em;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden; 
    -moz-outline: 0 none;
         outline: 0 none;
    } 
/* 
    The wrapper div 
*/
.date-picker
    {
    position:absolute;        
    z-index:9999;
    text-align:center;
    /* 
    Change the font-size to suit your needs. The following line is for the demo
    that has a 14px font-size defined on the body tag.
     
    All other rules are "em" based and inherit from the font-size set here. 
    */
    font:900 0.8em/1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Verdana, Arial, "Lucida Grande", sans-serif;
    background:transparent;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;                        
            user-select:none;
    /*
    Set the fade in/out animation time here. This is used for browsers that
    support CSS transitions. Non-supporting browsers receive the fade effect
    using a Javascript fallback.
    */
    opacity:1;
    -webkit-transition:opacity .75s ease-in-out;
       -moz-transition:opacity .75s ease-in-out;
        -ms-transition:opacity .75s ease-in-out;
         -o-transition:opacity .75s ease-in-out;
            transition:opacity .75s ease-in-out;
    }
/*
    The following rule is used whenever CSS Animations are supported by the
    browser
*/
.date-picker.fd-dp-fade
    {
    opacity:0;
    }
/* 
    Styles for the static datePickers 
*/
.static-datepicker
    {
    position:relative;        
    top:5px;
    left:0;
    margin-bottom:1.5em;
    }
/* 
    The iframe hack to cover selectlists in IE6 
*/
.iehack
    {
    position:absolute;
    background:#fff;
    z-index:9998;
    padding:0;
    margin:0;
    border:0;
    display:none;
    }
/* 
    The activation "button" created beside each input for popup datePickers 
*/
.date-picker-control span
    {
    display:block;
    width:18px;
    height:18px;
    overflow:hidden;
    margin:auto 0;
    resize:none;
    outline:none;
    }
/*
    The hover effect on the activation button
*/
.date-picker-button-active span,
.date-picker-control:focus span,
.date-picker-control:hover span,
.date-picker-control:active span
    {
    outline:none;
    box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
    border-radius:2px;
    }
/* 
    A base64 encoded image-sprite is used for the activation button. IE6 and 7
    get fed "normal" png images within the rule that follows.
*/
.date-picker-control:link,
.date-picker-control:visited
    {
    position:relative;
    display: -moz-inline-box;
    border:0 none;
    padding:0;
    margin:0 4px;
    background-color:transparent;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAB+CAYAAAAp+EF2AAAD8ElEQVRo3u2Zu0scXxTHz8zcXR0H8UnEIpXyQ8TGaJNCFAlqEUyTMlUaWTC/IoR0vxQ2vz8hfZJGIki2URARkkbxhSJq4avI7uqK7x2V9XF/93v83WGzmIezKVLcL1zmvubcc+49w352xurr63tZW1s7EI1GPSkloVxfX5Ou55f8sYuLCz+TybwRMNLf3++dn5+jk8vl5eU39Ww2G/TlX6+urrzZ2dkBAU9gZGVlBZ08If+qC9r5Y6WlpeQ4jmf/714oI9orhCuOj49peXmZDg4OCDo6OqKSkhKswm0stL+/T5WVlWTbNvchVLQxhjpsiEgkQm1tbWwANy8uLlJ9fT2Vl5dzGzePjY1RR0cH1zFvfX2dOjs7ybIs2tjYoOHhYbLhHizrmyBcc0tuH25GKLhCqMOGQEgTExMcKzQ1NUX/vntHjoiS1l8lxbwYdHJywl4cHh5y3/b2NteF53kcGjYQK66urtL1wzYSKjQtMfyRuru7eRz7hT1FG8L8oaEhsmEAljFJb/Bt0uMoOiwdGmxwaOPj48FebG1tUTqRIqfYDSaXp1I0MjLCdZXFtLa2xp7BSCKRuDnxWCwmVZxSnYZU8Ut1QjKVSkl1rFJtolSTZTweD9o7OztydHRUai0sLMiWlhYpckPTp5J7YmgLIQhpokPMVRAakml6eppc1+WbsJG+73Pq64TE4wNDqOs80qeIMHGSAqvV1dUFmQsjjY2NQeZCu7u71NzcHGQ5rq2trUH+wYbARKxeVVXFhlCHERQtpAjGtYeYU11dze2ysrKbFFEe+Ol02kNCYlIymeRnDZN1/DjJmZkZbus8gnGMbW5u0unpqW8pF1/W1NQMKPc8TOQHULCjwROPvqKiIq5jQYSv2zCiUuANGRkZGRl9R5ZiyGcK/2KK3NyQDHmmfn3fgiFjiiHdAhjSVQwZA0O6v4EhXcOQIRiSQSudZjrRAt7dmSHn5uaooaGBKioqAg9Qurq6fsiQ4jaG1GHk8uKdGRJuK/Tjk9NaWloKQvseQ3Jo7e3tvCcwNjk5SU1NTQEvoYA8enp6uL63t0fz8/NBaDjlwcFBMgz5awx5phLQLZAhz8CQzxRDxpR7bkiGPFMp8Nb8RhgZGRn9iCHNe0jDkIYhzXtI8x7SvIc0MjIyuhNDPn/x9NP9qsbeomgxhWHI7MU5HWa/xgWMvOj/mwpgSJqZlb0CnhTKkMKJkmHIkN+y3394T8Xql1QrEomG+5b9+MkjevCgmRxbqJVtev3qn59+y76dIS2HjdgolhOOIUEeXwY+M23chGPxzeZb9p/EkBk/w39iCmFI/9QnMOSnezX3eiMiQmEYEkaSiWT8P0zZxbn5chQoAAAAAElFTkSuQmCC);
    background-repeat:no-repeat;
    background-position:0 -72px;
    min-width:18px;
    line-height:1;
    cursor:pointer;
    visibility:visible;
    text-decoration:none;
    vertical-align:text-bottom;
    resize:none;         
    }
/* 
    IE6 & 7 fed "normal" png images 
*/
.oldie .date-picker-control:link,
.oldie .date-picker-control:visited
    {
    /* 
    IE7 gets a non-base64 encoded image sprite of the base64 encoded image 
    declared above. That's all you have to do for IE7 support as it inherits
    the background-position declarations used to reposition the sprite
    */
    *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-sprite.png);
    /* 
    IE6 gets the filter treatment and an individual image for each animation 
    state. This pattern is repeated for all other image-based rules within the
    stylesheet
    */
    _background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-normal.png');        
    } 
/* 
    If the datepicker has a valid date then use a different icon for the
    activation button to let the user know. It's a little detail but it's the
    little things in life etc
*/
.date-picker-dateval:link,
.date-picker-dateval:visited
    {
    background-position:0 -108px;
    } 
/* 
    Again, IE6 gets a "normal" png image from the server. Rinse, repeat.
*/
.oldie .date-picker-dateval:link,
.oldie .date-picker-dateval:visited
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-selected.png');        
    }                           
/* 
    Hover states etc for the activation button 
*/
.date-picker-button-active:link,
.date-picker-button-active:visited,
.date-picker-control:focus,
.date-picker-control:hover,
.date-picker-control:active
    {
    background-position:0 0;
    }
/* 
    IE 6 activation button hover states 
*/
.oldie .date-picker-button-active:link,
.oldie .date-picker-button-active:visited,
.oldie .date-picker-control:focus,
.oldie .date-picker-control:hover,
.oldie .date-picker-control:active
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-focused.png');             
    }
/* 
    Disabled activation button 
*/
.date-picker-control-disabled:link,
.date-picker-control-disabled:visited,
.date-picker-control-disabled:hover,
.date-picker-control-disabled:active
    {
    background-position:0 -36px;
    cursor:default;
    }
/* 
    IE 6 disabled activation button 
*/
.oldie .date-picker-control-disabled:link,
.oldie .date-picker-control-disabled:visited,
.oldie .date-picker-control-disabled:hover,
.oldie .date-picker-control-disabled:active
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-disabled.png');                       
    }
.date-picker-control-disabled:hover span,
.date-picker-control-disabled:active span
    {
    box-shadow:none !important;
    }
/*  
    Feed IE6 the following rule, IE7 should handle the min-width declared
    previously. 
 */
.oldie .date-picker-control
    {
    _width:18px;
    }
/* 
    IE, older Safari & Opera. Seperate CSS rule seems to be required. 
*/
.date-picker-control
    {
    display:inline-block;
    }
/* 
    Default datepicker "button" styles 
*/
.date-picker th span
    {
    display:block;
    padding:0;
    margin:0;
    text-align:center;
    line-height:1em;
    border:0 none;
    background:transparent;
    font-weight:bold;
    cursor:pointer;
    }
/* 
    The "month, year" display 
*/
.date-picker .month-display,
.date-picker .year-display
    {
    display:inline;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:normal;
    font-size:1.2em;
    }
/* 
    Generic button class for Next & Previous (both month & year) buttons 
*/
.date-picker .prev-but,
.date-picker .next-but
    {
    font-weight:normal;
    font-size:2.4em;
    font-family: georgia, times new roman, palatino, times, bookman, serif;
    cursor:pointer;
    }
.date-picker .prev-but,
.date-picker .next-but,
.date-picker .today-but
    {         
    -webkit-transition:all .2s ease-in-out;
       -moz-transition:all .2s ease-in-out;
        -ms-transition:all .2s ease-in-out;
         -o-transition:all .2s ease-in-out;
            transition:all .2s ease-in-out;        
    }
/* 
    Hover effect for Next & Previous (month, year) buttons 
*/
.date-picker .prev-but:hover,
.date-picker .next-but:hover,
.date-picker .today-but:hover
    {
    color:#a84444;
    }
.date-picker .prev-but:hover,
.date-picker .next-but:hover
    {
    /*        
    Uncomment this if you want a scale effect...
    
    -webkit-transform:scale(1.6);
       -moz-transform:scale(1.6);
        -ms-transform:scale(1.6);
         -o-transform:scale(1.6);
            transform:scale(1.6);
    
    text-shadow:0 2px 1px rgba(0,0,0,.4);
    */
    }
/* 
    Today button 
*/
.date-picker .today-but
    {
    text-align:center;
    margin:0 auto;
    font-weight:normal;
    font-size:1em;
    width:100%;
    text-decoration:none;
    padding-top:0.3em;
    text-transform:uppercase;
    vertical-align:middle;
    cursor:pointer          
    }
/* 
    Disabled buttons 
*/ 
.date-picker-disabled .prev-but,
.date-picker-disabled .next-but,
.date-picker-disabled .today-but,
.date-picker-disabled .prev-but:hover,
.date-picker-disabled .next-but:hover,
.date-picker-disabled .today-but:hover,
.date-picker .prev-but.fd-disabled:hover,
.date-picker .next-but.fd-disabled:hover,
.date-picker .fd-disabled,
.date-picker .fd-disabled:hover
    {
    color:#aaa;
    cursor:default !important; 
    opacity:1;        
    }   
.date-picker .prev-but.fd-disabled:hover,
.date-picker .next-but.fd-disabled:hover
    {
    /*   
    Uncomment this if you have uncommented the "scale" rules above
    
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
            transform:scale(1);
    */
    text-shadow:0 -1px 1px rgba(255,255,255,.8);
    }
/* 
    The gradient background image 
*/
.date-picker table,
.date-picker td,
.date-picker tbody th,
.date-picker .day-disabled,
.date-picker .date-picker-hover.day-disabled,
.date-picker .date-picker-unused,
.date-picker .month-out 
    {
    background-color:#fff;
    background-image:url(data:image/gif;base64,R0lGODlhJgBbAMQAAAAAAP////7+/v39/fz8/Pv7+/r6+vn5+fj4+Pf39/b29vX19fT09PPz8/Ly8vHx8fDw8O/v7+7u7u3t7ezs7Ovr6+rq6unp6ejo6Ofn5+bm5uXl5f///wAAAAAAAAAAACH5BAEAABwALAAAAAAmAFsAAAX/4CaOZGmeaKqubOu+cCzPWm3feK7vfO//wCAvQywaj8ikcslsOp/QJWZKrVqv2Kx2y+16v9qLeEwum8/otHqttrjf8Lh8Tq/b7/aKfs/v+/+AgYKDhIWGgRSJiouMjY6PkJGSkROVlpeYmZqbnJ2enRKhoqOkpaanqKmqqRGtrq+wsbKztLW2tRC5uru8vb6/wMHCwQ/FxsfIycrLzM3OzQ7R0tPU1dbX0Q3a29zd3t/g4eLj4gzm5+jp6uvs7e7v7gvy8/T19vf4+fr7+gr+/wADChxIsKDBgwYTKFzIsKHDhxAjSpwoEYHFixgzatzIsaPHjx4PiBxJsqTJkyhTi6pcybKly5QGYsqcSbOmzZs4c+rMWaCnz59AgwodSrSo0aIEkipdyrSp06dQo0qdSrUq1AFYs2rdyrWr169gw4odS/argLNo06pdy7at27dw48qd6zaA3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4tOHAIAOw==);
    background-repeat:repeat-x;
    background-position:0 0;
    }
.oldie .date-picker table,
.oldie .date-picker td,
.oldie .date-picker tbody th,
.oldie .date-picker .day-disabled,
.oldie .date-picker .date-picker-hover.day-disabled,
.oldie .date-picker .date-picker-unused,
.oldie .date-picker .month-out 
    {
    *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-gradient.gif);
    /* 
    Remove from IE6 as it has a bug that never caches images on dynamically 
    created elements which results in one http request being made for each
    cell of each table rendered by the script. 
    */
    _background-image:none;
    }
.date-picker table
    {
    table-layout:auto;
    empty-cells:show;
    border-spacing:2px;
    border-collapse:separate;
    position:relative;               
    margin:0;
    padding:0;
    border:1px solid #ccc;        
    background-position:0 -20px; 
    text-align:center;
    padding:0.3em; 
    width:auto;
    height:auto;
    color:#555;         
    font-size:1em;
    border-radius:0.8em;
    box-shadow:0px 0px 5px #aaa;
    }
/*
    Create a "Lifted Corners" effect on the table. Ripped straight from @necolas
    http://nicolasgallagher.com/css-drop-shadows-without-images/
*/
.date-picker table:before,
.date-picker table:after
    {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
    }

.date-picker table:after
    {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
    }
.oldie .date-picker table:before,
.oldie .date-picker table:after
    {
    display:none;
    }

/* 
    Common TD & TH styling 
*/
.date-picker td,
.date-picker tbody th
    {                 
    border:0 none;
    padding:0;
    text-align:center;
    vertical-align:middle;               
    cursor:pointer;
    background-position:0 -35px; 
    width:3em;
    height:3em;   
    overflow:hidden;      
    outline:transparent none 0px;        
    border:1px solid #ccc;
    text-transform:none;
    font-weight:normal;
    text-shadow:0 1px #fff;
    border-radius:2px;
    }
.date-picker th
    {
    border:0 none;
    padding:0;        
    font-weight:bold;
    color:#333;
    text-align:center;
    vertical-align:middle; 
    text-transform:none;
    }
.date-picker .date-picker-week-header
    {                          
    border:1px solid #dcdcdc;        
    font-style:oblique;  
    background:transparent;
    cursor:default;         
    }
.date-picker .date-picker-thead .date-picker-week-header
    {                          
    border:0 none;
    cursor:help;         
    }
/* 
    The "mon tue wed etc" day header styles 
*/
.date-picker .date-picker-day-header
    {
    cursor:help;
    border:0 none;
    padding:0 0 0.2em 0;
    text-transform:lowercase;
    height:auto;
    }
/* 
    tfoot status bar 
*/
.date-picker .date-picker-statusbar
    {
    cursor:default;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:0.1em;
    border:0 none;
    background:#fff;
    height:2.8em;
    }
/* 
    TD cell that is _not_ used to display a day of the month 
*/
.date-picker .date-picker-unused
    {
    border-color:#dcdcdc;          
    cursor:default !important;
    background-position:0 -25px;
    }
/* 
    The TH cell used to display the "month, year" title 
*/
.date-picker .date-picker-title
    {
    width:auto;
    height:auto;
    padding:0.4em 0;
    }
/* 
    The "todays date" cell style 
*/
.date-picker .date-picker-today
    {
    background:#fff url(data:image/gif;base64,R0lGODlhKwEoAJEAAKnT6v////X6+gAAACH5BAAAAAAALAAAAAArASgAAALXjI+py+0Po5y02ouz3lz4D4biSJbmiabqyrbuC8fyLAcCgOf0zvf+DwwKhyJbDkdMKpfMpnNo1D2n1Kr1GowCsNyu99uNgsfksnlnPKvX7LbA5o7L51Q4/Y7P8+z6vv9fwgc4SJgnWIiYuHao2OgY9hgpecU4aXkJVIm5yQmj2QkaavIpWmpKapraiaraasnqGusIK1tbSGub64er23vH6xvsBixcfEZsnAyGrNyMxewcPQUtXb1EbZ0thK3d3cPtHV4jTl5Xft4Ejr4eyO6e9R7/LU8/UwAAOw==) no-repeat 0 0;
    }
.oldie .date-picker .date-picker-today
    {
    *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-today.gif) no-repeat 0 0;
    }
.date-picker .month-out.date-picker-highlight 
    {
    color:#b87676;
    }
/* 
    The "highlight days" style 
*/
.date-picker .date-picker-highlight
    {
    color:#a86666;
    }
/* 
    The "active cursor" style 
*/
.date-picker td
    {
    /*
    
    Uncomment this if you want a transition on the cursor cells scale effect
    
    -webkit-transition: all .2s ease;    
       -moz-transition: all .2s ease;    
        -ms-transition: all .2s ease;    
         -o-transition: all .2s ease;    
            transition: all .2s ease;    
    */
    }
/*
    Keyboard users get a scaled cursor. webKit exhibits buggy behaviour when 
    scaling TD cells so commented out until I find a curious CSS based fix.
    Opera no longer appears to apply the scale... ho hum...
*/
.date-picker-focus .date-picker-hover
    {
    /*
    -webkit-transform:scale(1.25);
    */
       -moz-transform:scale(1.25);
        -ms-transform:scale(1.25);
         -o-transform:scale(1.25);
            transform:scale(1.25);
    }

.date-picker .date-picker-hover,
.date-picker .month-out.date-picker-hover
    {
    background:#fff url(data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAASwAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAwICAgICAwICAwUDAwMFBQQDAwQFBgUFBQUFBggGBwcHBwYICAkKCgoJCAwMDAwMDA4ODg4OEBAQEBAQEBAQEAEDBAQGBgYMCAgMEg4MDhIUEBAQEBQREBAQEBARERAQEBAQEBEQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIwIIAwERAAIRAQMRAf/EAHgAAQEBAQEBAAAAAAAAAAAAAAABBAMCCQEBAQEBAQEAAAAAAAAAAAAAAAECAwQFEAABAQgBAwMFAQEBAAAAAAAAEwFh0QIDkwQVVDFBgSFRBRFxkaGyczVEEQEAAgMBAAIDAQAAAAAAAAAAARFRAhITMQMhcTIi/9oADAMBAAIRAxEAPwD6R53yGZJm5EkmRUlZLUnYxjKkzGMYyZvb6npiIp8f7Ps26n8z8uOzzuTUuTRNcwx6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNnncmpcmiOYPTbMmyzuTUuTRHMHptmTZ5vJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZvJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzmf+mpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmzzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZ53JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZZvkqv0+RymfXpVqf201rH4hj7Z/3P7Z1XlpzsWeKLFWiixV4osVeKLFniixZ4osV9miixZ4osWeKLFXiixUUWKvFFioosWeKLFXiixZ4osVaKLFniixZ4osWeKLFWiixUUWKiixV4osWeKLFvXqKLFWiixb06iixZ4osWeKLFniixVoosVFFioosWeKLFniixV4osVeKLFniixZ4osWeKLFXiixUUWKvFFioosWeKLFniixUUWLPFFizxRYq0UWKiixUUWLPFFizxRYs8UWKvFFioosWeKLFXiixZ4osVaKLFXii3n5Wp9PlMxntWq/20a/EL9v9z+5ZWVTTnYq8FirPcFivqCxV4LFXgsVBYo/9gsVBYqCxV4LFQWK+nUFirwWKgFXgsVBYq8FioLFQWKgsVZ7gsVeCxUFirwCoLFX/ALBYqCxUFioLFfUFirwWKs9wWKgsVeCxV4LFQWKv/YLFQWKvBYqAVBYq8FioLFfTqCxV4LFQCr/2CxUFivqCxV4LFWe4LFQWKvBYq8FjaoLFQWKvBYr3+oLFQDKoLFXgsVZ7gsV9QW7fLf8AWzf96v8AbSa/EN/b/c/uWQ05J5AM69QHdoDyBfIACAXsBAHkAzoA7dQHkCsIIUPIBgFYAaBADfuAb0AoEZ9wKBAAAAzqBWgQA37gX2AnkB5AoE8+QKzuBG+AKQQoeQDOgDt1AeQKAAgFaBADfuBfYCeQHkCt6AQA37gOwFIBRPIBnXqA7tA2fLf9bN/3q/20zr8Q6fb/AHP7lkNOQwgFAgNAAOwAB2KJ+AKQOxQIAAIn4KqkAoAAJ+AK0gAADAHcAA7tKAAA0AAIAD2AM6AAABncojfAFAn4ApA7FAgAAAD2KDQAAgAPYAzoAaUAHYgdigRAqjCAUCD/2Q==) no-repeat 0 0;
    cursor:pointer;
    border-color:rgb(100,130,170) !important;
    border-color:rgba(100,130,170,.7) !important;
    color:rgb(100,130,170); 
    text-shadow: 0px 1px 1px #fff;        
    box-shadow:0 0 6px rgba(100,130,170,.6);
    }
.oldie .date-picker .date-picker-hover,
.oldie .date-picker .month-out.date-picker-hover
    {
    *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-cursor.jpg) no-repeat 0 0;
    }
/* 
    The "disabled days" style 
*/
.date-picker .day-disabled
    {          
    color:#888;
    cursor:default;
    text-decoration:line-through;
    background-position:0 -15px;
    } 
.date-picker .month-out 
    {
    border-color:#ddd;
    border-color:rgba(220,220,220,0.8);
    color:#aaa;
    background-position:0 -25px;
    } 
/* 
    The "selected date" style - color changed below also 
*/
.date-picker .date-picker-selected-date
    {
    border-color:#888 !important;
    border-color:rgba(7,7,7,.6) !important;
    }
/* 
    The date "out of range" style 
*/
.date-picker .out-of-range,
.date-picker .not-selectable
    {           
    color:#ccc;
    font-style:oblique;
    background:#fcfcfc;
    cursor:default;              
    } 
/* 
    Week number "out of range" && "month-out" styles 
*/
.date-picker th.month-out,
.date-picker th.out-of-range
    {
    color:#aaa;
    font-style:oblique;
    background:#fcfcfc;          
    }
/* 
    Week numbers "out of range" 
*/
.date-picker .out-of-range
    {
    opacity:0.6;
    }  
/* 
    Used when the entire grid is full but the next/prev months dates cannot be 
    selected 
*/
.date-picker .not-selectable
    {         
    opacity:0.8;
    }
.oldie .date-picker .out-of-range
    {
    filter:alpha(opacity=60);
    }
.oldie .date-picker .not-selectable
    {
    filter:alpha(opacity=80);
    }
.date-picker tr
    {
    display:table-row;
    }
.date-picker sup
    {
    font-size:0.86em;
    letter-spacing:normal;
    text-transform:none;
    height: 0;
	line-height: 1;
	position: relative;
	top:-0.2em;	
	vertical-align: baseline !important;
	vertical-align: top;  
    }
.date-picker .date-picker-day-header,
.date-picker .month-display,
.date-picker .year-display
    {            
    text-shadow: 0px 1px 1px #fff;
    }
.date-picker .month-display,
.date-picker .year-display
    {            
    cursor:default;                            
    }
.date-picker td:focus,
.date-picker .date-picker-hover 
    {
    overflow:hidden;
	-moz-outline:0 none;
         outline:0 none;        
	-o-highlight:0 none;
    }
/* 
    The "pulse" animation on focused button and datepicker cursor
*/
.date-picker-focus .date-picker-hover,
.date-picker-control:focus span
    {
    -webkit-animation:fd-dp-pulse 1.5s infinite alternate;
       -moz-animation:fd-dp-pulse 1.5s infinite alternate;
        -ms-animation:fd-dp-pulse 1.5s infinite alternate;
         -o-animation:fd-dp-pulse 1.5s infinite alternate;
    }
/* 
    The "selected date" style 
*/
.date-picker .date-picker-selected-date
    {
    color:#333;
    color:rgba(3,3,3,.8);
    font-weight:bold;
    font-size:1.2em;
    width:2.4em;
    height:2.4em;
    }
/*
    Remove the box-shadow & lifted corner effect for the inline datepickers
*/
.static-datepicker table
    {
    box-shadow:0 0 0 transparent;
    }
.static-datepicker table:before,
.static-datepicker table:after
    {
    display:none;
    }
/*
    Add a box-shadow and enhance border for datepickers that have keyboard focus
*/
.date-picker-focus table
    {
    border-color:#999;
    border-color:rgba(153,153,153,.8);
    box-shadow:0px 0px 5px #aaa;
    }
/* 
    Draggable datepickers 
*/
.date-picker .drag-enabled,
.date-picker .drag-enabled span
    {
    cursor:move;
    }    
/* 
    Disabled datePicker 
*/
.date-picker-disabled table
    {
    opacity:.8 !important;
    }
.date-picker-disabled table:before,
.date-picker-disabled table:after
    {
    display:none;
    }
.oldie .date-picker-disabled table
    {
    filter:alpha(opacity=80);                  
    }
.date-picker-disabled,
.date-picker-disabled td,
.date-picker-disabled th,
.date-picker-disabled th span
    {
    cursor:default !important;          
    }
.date-picker-disabled .prev-but:hover,
.date-picker-disabled .next-but:hover
    {
    /*    
    Uncomment this if you have used the previous scale rules previously
    declared within the file (for the prev-but and next-but classes)
    
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
            transform:scale(1);
    */
    text-shadow:none;
    }
body.fd-drag-active 
    {
    -webkit-touch-callout:none; 
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;     
    }
/* 
    Glow effect for the focused (keyboard active) cursor cell and popup
    datepickers activation button 
*/
@-webkit-keyframes fd-dp-pulse {
    from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)}
    to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)}
}
@-moz-keyframes fd-dp-pulse {
    from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)}
    to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)}
}
@-ms-keyframes fd-dp-pulse {
    from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)}
    to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)}
}
@-o-keyframes fd-dp-pulse {
    from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)}
    to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)}
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/* SET DEFAULTS */

* {
  margin:0px;
  padding:0px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  margin:0px;
  padding:0px;
  font-family:arial;
  line-height:125%;
}

.clear {
  clear:both;
}


#header {
  width:100%;
  background:#353535;
}


#header-panel {
  position:relative;
  width:980px;
  margin:0 auto;
  padding:20px 0;
  padding-left:20px;
}

  .welcome {
    position:absolute;
    top:50px;
    right:25px;
    text-align:right;
    font-size:14px;
    color:#ffffff;
  }

  .welcome a {
    margin-right:5px;
    color:#ffffff;
    text-decoration:none;
  }

  .welcome a:hover {
    color:#dbe900;
    text-decoration:underline;;
  }


#nav {
  width:100%;
  background:url('images/bg-nav.jpg') repeat-x;
}


#nav-panel {
  position:relative;
  width:980px;
  height:40px;
  margin:0 auto;
  padding:10px 0px;
}

  .nav-menu {
    position:absolute;
    top:10px;
    left:20px;
  }

  .nav-menu a {
    margin-right:50px;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
  }

  .nav-menu a:hover {
    color:#dbe900;
    text-decoration:underline;
  }

  .profile-link {
    position:absolute;
    top:10px;
    right:20px;
  }

  .profile-link a {
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
    margin-left:40px;
  }

  .profile-link a:hover {
    color:#dbe900;
    text-decoration:underline;
  }




/* SET HOME */

#section1 {
  position:relative;
  width:980px;
  height:200px;
  margin:50px auto 0;
}

#login {
  position:absolute;
  top:0;
  left:0;
  width:280px;
  height:200px;
}

  table.login {
	padding-left:20px;
    font-size:14px;
    color:#707070;
  }
  
  table.login td {
    padding:0 10px 3px 0;
  }
  
  table.login input {
    font-size:14px;
    color:#353535;
    padding:3px 5px;
    border:1px solid #a1a1a1;
  }
  
  table.login p {
    font-size:13px;
  }
  
  a.link {
    font-size:13px;
    color:#4776b6;
    text-decoration:none;
  }
  
  input.sigin {
    display:block;
    width:80px;
    margin:20px auto 0;
    padding:4px 8px;
    text-align:center;
    background:#aeb254;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
  }
  
  input.sigin:hover {
    background:#161616;
    color:#f2f879;
  }

#banner {
  position:absolute;
  top:0;
  right:0;
  width:700px;
  height:300px;
}

#section2 {
  width:100%;
  height:250px;
  padding-top:80px;
  background:url('images/bg-hometwo.png') repeat-x;
}

#section2-panel {
  width:980px;
  margin:0 auto;
}

  #section2-panel h1 {
    float:left;
    margin-left:360px;
    font-size:15px;
    font-weight:normal;
    color:#667d3a;
  }
  
  #contact-info {
    float:right;
    width:465px;
    font-size:15px;
    color:#353535;
  }


 
/* SET PAGE DEFAULTS */
  
#mainbody {
  width:960px;
  padding-left: 20px;
  margin:0 auto 50px;
}

.page-header {
  position:relative;
  width:930px;
  margin-top:20px;
  padding:0 10px 3px 0;
  border-bottom:1px solid #838383;
}

  .page-header h1 {
    font-size:20px;
    color:#333333;
    font-style:italic;
	padding-left:20px;
  }
  
  .page-header h1 span {
    font-size:15px;
  }
  
.page-header-follow {
  position:relative;
  width:230px;
  margin-top:30px;
  padding:0 10px 3px 0;
}
 .page-header-follow h1 {
    font-size:20px;
    color:#333333;
    font-style:italic;
	padding-left:10px;
  }

/* SET ANNOUNCEMENT PAGE */


#member-summary {
  float:left;
  width:280px;
  margin:50px 0;
  padding:20px;
  background:#eaeaea;
  text-align:center;
}
  
  table.member-sum {
    text-align:left;
    padding:5px 0;
    font-size:14px;
    color:#353535;
  }
  
  table.member-sum td {
	vertical-align:text-top;
	width:130px;
    padding:5px 0;
  }

#contents-panel {
  float:right;
  width:620px;
  margin:50px 0;
  margin-right: 20px;
}

#contents-panel-follow {
  float:right;
  width:620px;
  margin-top:30px;
  margin-bottom: 20px;
  margin-right:30px;
}

table.annoucement th {
  padding:7px 0 7px 5px;
  font:15px arial;
  font-weight:bold;
  color:#424242;
  text-align:left;
  border-top:1px solid #858585;
  border-bottom:1px solid #858585;
}

th.view {
  text-align:center;
}


table.annoucement td {
  vertical-align:top;
  padding:15px 0 15px 5px;
  font-size:14px;
  color:#424242;
  border-bottom:1px solid #858585;
}

a.green {
margin-top: 10px;
color:#00CC00;
}

a.red {
color:#FF0000;
margin-top: 10px;
}

a.read {
  font-size:14px;
  color:#667d3a;
  text-decoration:none;
}

a.read:hover {
  color:#2b4100;
  text-decoration:underline;
}



/* SET CPD PAGE */

.event-title {
	padding:10px 10px 10px 10px;
	background:#efefef;
    border:1px solid #b2b2b2;
}

.event-desc {
	margin-left: 15px;
	padding:5px 5px 5px 5px;
	background:#efefef;
}

.request {
  width:660px;
  margin:3px 0;
}

.request-form {
  float:left;
  width:auto;
}

.request p {
  display:inline;
  float:left;
  width:250px;
  padding:3px;
  vertical-align:top;
} 

.request p span {
  float:right;
}

textarea.CPD-request {
  resize:none;
  font: 13px arial;
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.CPD-request {
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.save-request {
  padding:6px 9px;
  color:#ffffff;
  background:#656a86;
  border:1px solid #aaaaaa;
}
  
table.cpd-title {
  margin-top:30px;
  border-collapse:collapse;
}
  
  table.cpd-title th {
    padding:5px 0;
    background:#ff9000;
    font-size:14px;
    color:#000000;
  }
  
table.cpd-menu {
  font-size:14px;
  color:#333333;
  border-collapse:collapse;
}

table.cpd-menu td {
	padding:5px 10px 5px 10px;
    vertical-align:top;
}

table.cpd-menu a:link {
	text-decoration:none;
}

table.cpd-menu a:visited {
	text-decoration:none;
}

table.cpd-menu a:hover {
	text-decoration:underline;
}

  input.choose-attach {
    width:190px;
    margin-top:5px;
	margin-bottom:5px;
  }
  
table.cpd {
  font-size:14px;
  color:#333333;
  border-collapse:collapse;
}
  
  table.cpd a:link {
	text-decoration:none;
}

  table.cpd a:visited {
	text-decoration:none;
}
  
  table.cpd td {
    padding:10px 10px;
    vertical-align:top;
  }
  
  table.cpd td p {
    margin-left:40px;
    font-weight:bold;
    text-decoration:underline;
  }
  
  td.cpd-events {
    border-bottom:1px solid #ff7200;
  }
  
  td.cpd-events ul {
    margin-left:20px;
  }
  
  td.description ol {
    margin-left:20px;
    font-size:14px;
    color:#ff7200;
    font-weight:bold;
  }
  
  td.description ul {
    margin-left:40px;
    list-style-position:inside;
    font-size:14px;
    color:#333333;
  }

  td.year, td.credit-hour, td.max-annum {
    text-align:center;
  }
  
   td.year, td.credit-hour, td.earn-point {
    text-align:center;
  }

  tr.end {
    border-bottom:1px solid #ff7200;
  }
  
   tr.cpdTitle
  {
		margin-top:30px;
		border-collapse:collapse;
  }
  
  tr.cpdTitle th
  {
    padding:5px 0;
    background:#ff9000;
    font-size:14px;
    color:#000000;
  }

/* SET MEMBER PROFILE */

a.edit-profile {
  position:absolute;
  top:0;
  right:10px;
  font-size:15px;
  color:#333333;
  text-decoration:none;
}

a.edit-profile:hover {
  color:#ff7200;
  text-decoration:underline;
}


#member {
  margin:30px 0;
  text-align:center;
}

  
  input.choose-file {
    width:190px;
    margin-top:10px;
  }
  

h1.info {
  font-size:15px;
  color:#ffffff;
  text-align:center;
  margin:10px 0;
  padding:5px 0;
  background:#8e92a7;
}

.profile-panel {
  width: 675px;
  margin:3px 0;
  padding:0 0 0 20px;
}

  .data {
    display:inline;
    float:left;
    width:250px;
    padding:3px;
  }
  
  .show-text {
    float:left;
    width:300px;
    padding:3px;
  }
  
  .edit-text {
    float:left;
    width:400px;
  }
  
  .edit-text input, .edit-text select {
    width:350px;
    padding:3px;
    border:1px solid #aaaaaa;
    color:#333333;
  }
  
  input.gender {
	border: none;
    width:auto;
    margin-right:5px;
  }
  
  input.btn {
    width:auto;
    margin:5px 10px 0 0;
    padding:6px 9px;
    color:#ffffff;
    background:#656a86;
  }
  
  input.btn:hover {
    background:#121212;
  }


  .data span, .show-text span {
    float:right;
  }
  
  textarea {
    width:350px;
    padding:3px;
    font:14px arial;
    color:#333333;
  }


/* SET CHANGE PASSWORD */

.password-panel {
  width:950px;
  margin:3px 0;
}

.password-panel p {
  display:inline;
  float:left;
  width:250px;
  padding:3px;
  vertical-align:top;
} 

.password-panel a {
  display:inline;
  color:#424242;
  font-size:14px;
  float:left;
  width:500px;
  padding:3px;
  overflow:visible;
} 

.password-panel p span {
  float:right;
}

.change-password {
  float:left;
  width:auto;
}

input.password {
  width:350px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.captcha {
  width:100px;
  padding:3px;
  border:1px solid #aaaaaa;
  color:#333333;
}

input.save-password {
  padding:6px 9px;
  color:#ffffff;
  background:#656a86;
  border:1px solid #aaaaaa;
}

input.save-password:hover {
  background:#121212;
}

ul.password-terms {
  list-style-position:inside;
  list-style-type:decimal;
  font-size:14px;
  color:#424242;
}



/* SET FONT */

h1.pg-title {
  font-size:18px;
  font-weight:bold;
  color:#2b480a;
}


h1.article {
  font-size:16px;
  color:#424242;
}


p {
  font-size:14px;
  color:#424242;
}



/* SET FOOTER */

#footer {
  width:100%;
  border-top:1px solid #d0d0d0;
}

#footer-section {
  width:980px;
  margin:0 auto;
  padding:20px 0 0 20px;
  font-size:13px;
  color:#353535;
}

#footer-section p {
  font-size:13px;
  color:#7c7c7c;
}

#footer-section a {
  display:inline-block;
  margin:0 30px 10px 0;
  color:#353535;
  text-decoration:none;
}

#footer-section a:hover {
  color:#404f25;
  text-decoration:underline;
}

/*------------------*/
/* Self added class */

.logout a:link {text-decoration:none; color:#EEEEEE;}      /* unvisited link */
.logout a:visited {text-decoration:none; color:#EEEEEE;}  /* visited link */
.logout a:hover {text-decoration:underline; color:#EEEEEE;}  /* mouse over link */
.logout a:active {text-decoration:none; color:#EEEEEE;}  /* selected link */

#content h1 {font-size:180%; color:#EEEEEE;}
#content h1 {margin:0; padding:10px 15px; background:url("images/content-h1.gif") 0 0 repeat-x; letter-spacing:-1px;}

.msg {padding:10px; padding-left:35px;}
.msg.warning {background:url("images/ico-warning.gif") 10px 50% no-repeat;}
.msg.warning {border:2px solid #F2DD8C; background-color:#FFF5CC;}
.msg.warning a {color:#df0000;} .msg.warning a:hover, .msg.warning a:active, .msg.warning a:focus {color:#303030;}
.msg.info {background:url("images/ico-info.gif") 10px 50% no-repeat;}
.msg.info {border:2px solid #B8E2FB; background-color:#E8F6FF;}
.msg.done {background:url("images/ico-done.gif") 10px 50% no-repeat;}
.msg.done {border:2px solid #BBDF8D; background-color:#EAF7D9;}
.msg.error {background:url("images/ico-delete.gif") 10px 50% no-repeat;}
.msg.error {border:2px solid #FFAEAE; background-color:#FEEBEB;}

.tableheader {
text-align:center; 
background-color:#555555; 
padding:5px 5px 5px 5px; 
font-size:12px; 
font-weight:bold; 
color:#FFFFFF;	
}

.tableheader a:link {text-decoration:none; color:#FFFFFF;}      /* unvisited link */
.tableheader a:visited {text-decoration:none; color:#FFFFFF;}  /* visited link */
.tableheader a:hover {text-decoration:underline; color:#FFFFFF;}  /* mouse over link */
.tableheader a:active {text-decoration:none; color:#FFFFFF;}  /* selected link */

.tabledata {
text-align:center; 
background-color:#E8F6FF;
padding:2px 2px 2px 2px; 
font-size:12px; 
color:#000000;
}

.bgwhite {
	background-color:#FFF;
}
.bgblack {
	background-color:#000;
}
.bggrey {
	background-color:#CCC;
}
.bgred {
	background-color:#F00;
}

.tabledata a:link {text-decoration:none; color:#000000;}      /* unvisited link */
.tabledata a:visited {text-decoration:none; color:#000000;}  /* visited link */
.tabledata a:hover {text-decoration:underline; color:#000000;}  /* mouse over link */
.tabledata a:active {text-decoration:none; color:#000000;}  /* selected link */

.tabledataform {
background-color:#E8F6FF;
padding:2px 2px 2px 2px; 
font-size:12px; 
color:#000000;
}

.tabledataform a:link {text-decoration:none; color:#000000;}      /* unvisited link */
.tabledataform a:visited {text-decoration:none; color:#000000;}  /* visited link */
.tabledataform a:hover {text-decoration:underline; color:#000000;}  /* mouse over link */
.tabledataform a:active {text-decoration:none; color:#000000;}  /* selected link */

/*----------------*/
/* KMChew - Added */
/*----------------*/
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }