﻿body, html { background-color: #fe9900; margin: 0; padding: 0; }
body { font-family: arial, helvetica, sans-serif; font-size: 75%; padding: 50px 0 0 0; }

h1 { font-size: 1.4em; padding: 5px 0 35px 0; margin: 0; color: #f60; font-weight: normal; }
h2 { font-size: 1.1em; padding: 5px 0; margin: 0; color: #f60; font-weight: normal; }
h3 { font-size: 1.0em; padding: 5px 0; margin: 0; color: #f60; font-weight: normal; }

input, select, th, td { font-size: 1em; }
textarea { font-family: arial, helvetica, sans-serif; }

a, a:link, a:visited { color: #09f; }
a:hover { color: #f30; }

.clear { clear: both; line-height: 1px; height: 1px; font-size: 1px; }

#outer { width: 880px; margin: auto; }

#col-left { width: 188px; border: solid 1px #fff; float: left; background-color: #e5d9af; }
#col-right { margin-left: 200px; padding: 220px 0 0 0; min-height: 474px; border: solid 1px #999; background-color: #fff; background-image: url('./images/header.jpg'); background-repeat: no-repeat; }
#footer { margin: 10px 0 0 200px; padding: 20px; border: solid 1px #999; background-color: #fff; text-align: center; }

ul#left-menu { padding: 79px 0 0 0; margin: 0; list-style: none; width: 188px; }
ul#left-menu li { display: block; width: 188px; border-top: solid 1px #fff; border-bottom: solid 1px #fff; margin-bottom: 2px; list-style: none; }
ul#left-menu li a { display: block; background-color: #FE9900; color: #fff; width: 179px; padding: 0 0 0 9px; line-height: 28px; text-decoration: none; }
ul#left-menu li a:hover, ul#left-menu li#appointments a { background-color: #fff; color: #000; }
ul#left-menu li#questionnaire { margin-bottom: 24px; }
ul#left-menu li#questionnaire a { line-height: 48px; font-weight: bold; }

#col-left #login { padding: 24px 0 0 8px; }
#col-left #login .heading { font-size: 1.4em; font-weight: bold; color: #fd6500; }
#col-left #login .field { padding-bottom: 8px; }
#col-left #login .field .input input { width: 168px; border: solid 1px #666; }
#col-left #login a { line-height: 34px; }
#col-left #login .validation ul { padding: 0; margin: 0; list-style: none; }
#col-left #login .validation ul li { padding: 0; margin: 0; list-style: none; }

#col-left #logged-in { padding: 10px; text-align: right; }

#content { padding: 40px; }

#footer .phone { font-weight: bold; font-size: 1.4em; }
#footer .email, #footer .website, #footer .location { line-height: 22px; }


table.form { border-collapse: collapse; }
table.form .star { color: #f60; }
table.form tr th { text-align: left; vertical-align: top; line-height: 22px; padding-right: 6px; }
table.form tr td input,
table.form tr td textarea,
table.form tr td select { border: solid 1px #666; }


.textbox-medium { width: 298px; }
.textbox-small { width: 198px; }
.textbox-date-day { width: 15px; }
.textbox-date-month { width: 15px; }
.textbox-date-year { width: 30px; }


table.grid { border: solid 1px #ccc; border-collapse: collapse; background-color: #fff; }
table.grid tr th, table.grid tr.grid-header td { font-weight: bold; line-height: 18px; background-color: #09f; color: #fff; border-bottom: solid 1px #ccc; padding: 2px 5px; text-align: center; }
table.grid tr td { padding: 2px 8px; line-height: 16px; vertical-align: top; border-left: solid 1px #ccc; border-right: solid 1px #ccc; }
table.grid tr td.center { text-align: center; }
table.grid tr.alt td { background-color: #fd6; }


.instructions { padding-bottom: 24px; font-weight: bold; }

a.back-to-appointments { float: right; width: 200px; height: 25px; background-image: url('./images/back-to-appointments.gif'); background-repeat: no-repeat; }
a.back-to-appointments span { display: none; }

/* default messages */
.message { padding: 10px; margin-bottom: 10px; }
.message-normal { border: solid 1px #fe9900; background-color: #fce1b8; color: #fe9900; }
.message-success { border: solid 1px #b2db37; background-color: #ebf5ce; color: #7ca600; }
.message-error { border: solid 1px #d66640; background-color: #fad1c3; color: #803d26; }

.message ul { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

.validation { margin-bottom: 1em; }
/* end default message */


/* calendar */
.calendar a { text-decoration: none; font-weight: bold; }
.calendar .greyed-out { color: #999 !important; background-color: #fff !important; }
/* end calendar */


/* home page */
#page-home h2 { float: left; margin: 0; padding: 0; line-height: 32px; }
#page-home #services { padding: 0 0 32px 130px; }
#page-home #services .field { line-height: 24px; }
#page-home #services .field .title { font-weight: bold; }

#page-home #buttons { padding-top: 32px; }
#page-home #buttons a { display: block; width: 150px; height: 25px; float: left; margin-left: 32px; background-image: url('./images/home-buttons.gif'); background-repeat: no-repeat; }
#page-home #buttons a span { display: none; }

#page-home #buttons #sign-in { }
#page-home #buttons #register { background-position: 0 -25px; }
/* end home page */

/* members home page */
#page-members-home .field { line-height: 32px; }
#page-members-home .field .title { font-weight: bold; }

#page-members-home #buttons { padding-top: 32px; }
#page-members-home #buttons a { display: block; margin-right: 30px; margin-bottom: 15px; width: 250px; height: 25px; float: left;
								background-image: url('./images/dashboard-button-single.gif'); background-repeat: no-repeat; background-position: 0 0;
								color: #fff; text-decoration: none; line-height: 25px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 14px; }
#page-members-home #buttons a:hover { background-position: 0 -25px; }
/*#page-members-home #buttons a span { display: none; }*/

/*#page-members-home #buttons #new-appointment { }
#page-members-home #buttons #appointments { background-position: 0 -25px; }
#page-members-home #buttons #history { background-position: 0 -50px; }
#page-members-home #buttons #your-details { background-position: 0 -75px; }
#page-members-home #buttons #change-password { background-position: 0 -100px; }*/
/* end members home page */

/* register page */
#page-register table.form th { width: 175px; text-align: right; }
#page-register table.form tr.submit td { padding: 8px 0 0 180px; }
/* end register page */


/* your details page */
#page-your-details table.form th { width: 144px; text-align: right; }
#page-your-details table.form tr.submit td { padding: 8px 0 0 150px; }
#page-your-details .note { padding: 10px 0 0 0; }
/* end your details page */


/* change password page */
#page-change-password table.form th { width: 144px; text-align: right; }
#page-change-password table.form tr.submit td { padding: 8px 0 0 150px; }
#page-change-password .note { padding: 10px 0 0 0; }
/* end change password page */


/* login page */
#page-login .form { padding: 0 0 0 130px; }
#page-login .form .heading { font-size: 1.4em; font-weight: bold; color: #fd6500; }
#page-login .form .field { padding-bottom: 8px; }
#page-login .form .field .description { font-size: 10px; line-height: 14px; color: #666; }
#page-login .form .field .input input { width: 250px; border: solid 1px #666; line-height: 30px; font-size: 20px; color: #333; }
#page-login .form a { line-height: 34px; }
#page-login .form .validation ul { padding: 0; margin: 0; list-style: none; }
#page-login .form .validation ul li { padding: 0; margin: 0; list-style: none; }
/* end login page */


/* new appointment page */
#page-new-appointment #services { border-bottom: solid 1px #999; padding: 0 0 20px 0; }
#page-new-appointment #services h2 { float: left; padding: 0; margin: 0; text-transform: uppercase; }
#page-new-appointment #services .offset-stuff { padding-left: 150px; }

#page-new-appointment #locations { border-bottom: solid 1px #999; padding: 20px 0; }
#page-new-appointment #locations h2 { text-transform: uppercase; }
#page-new-appointment #locations .offset-stuff { padding: 20px 0 0 65px; }
#page-new-appointment #locations table.form tr th { width: 85px; text-align: right; }
#page-new-appointment #locations table.form tr td.cell { padding-bottom: 8px; }
#page-new-appointment #locations table.form tr td select { min-width: 200px; }

#page-new-appointment #time-selection { border-bottom: solid 1px #999; padding: 20px 0; }
#page-new-appointment #time-selection h2 { float: left; padding: 0; margin: 0; text-transform: uppercase; }
#page-new-appointment #time-selection .offset-stuff { padding-left: 150px; line-height: 20px; }
#page-new-appointment #time-selection .offset-stuff ul { margin: 0; padding: 20px 0 20px 15px; }

#page-new-appointment .note { padding: 20px 0 0 0; }

#page-new-appointment .no-times { color: #f00; font-weight: bold; font-size: 1.2em; line-height: 2em; }
/* end new appointment page */


/* confirm appointment page */
#page-confirm-appointment .section { padding: 20px 0; border-bottom: solid 1px #999; }
#page-confirm-appointment .section h2 { text-transform: uppercase; float: left; padding: 0; }
#page-confirm-appointment .section .offset-stuff { padding-left: 150px; }
#page-confirm-appointment #confirm { padding: 20px 0 20px 150px; }
/* end confirm appointment page */

/* create appointment pages */
.page-create-appointment .section { padding: 20px 0; border-bottom: solid 1px #999; }
.page-create-appointment .section h2 { text-transform: uppercase; float: left; padding: 0; }
.page-create-appointment .section .offset-stuff { margin-left: 140px; }
.page-create-appointment .no-times { padding: 10px 0; color: #f00; font-weight: bold; }

#page-clinic-appointment .section .offset-stuff { margin-left: 120px; }
#page-clinic-appointment .section .offset-stuff .calendar-panel { float: left; }
#page-clinic-appointment .section .offset-stuff .message-panel { float: right; width: 205px; padding: 5px 5px 5px 29px; border: solid 1px #f00; background-color: #fbb; background-image: url('./images/exclamation.gif'); background-repeat: no-repeat; background-position: 0px center; }
#page-clinic-appointment .section .offset-stuff .select-date { clear: both; padding-top: 5px; }

ul.time-list { display: block; margin: 0; padding: 10px 0 10px 20px; }
ul.time-list li { float: left; margin-right: 80px; }
/* end create appointment pages */