body { background: #424242; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
h1 { font-family: Helvetica, Arial, Verdana; font-size: 200%; font-weight: normal; }
h2 { font-family: Helvetica, Arial, Verdana; font-size: 160%; font-weight: normal; padding-bottom: 0; margin-bottom: 0; }
h3 { font-family: Helvetica, Arial, Verdana; font-size: 100%; font-weight: bold; padding-bottom: 0; margin-bottom: 0; }
a { color: #800; }
a:visited { color: #a00; }
a:active, a:hover { color: #f00; }
a img { border: none; text-decoration: none; }
hr { background: #999; height: 1px; border: 0; margin: -10px auto 0 0; margin-bottom: 8px; width: 500px; text-align: left; }
/* strong { font-weight: normal; background: #ffff99; } */
td { vertical-align: top; }
input.text, textarea { background: #fff url(/images/input_bg.gif) repeat-x scroll center top; border: 1px solid #ccc; }

.required-label { font-style: italic; color: #555; }

blockquote {
	font-style: italic;
	font-size: 120%;
	color: #fff;
	font-family: Georgia, serif;
	line-height: 150%;
	margin: 0;
}
blockquote a, blockquote a:visited
{
	color: #676767;
}
.quoteauthor {
	font-size: 80%;
	text-align: right;
}

.disabled { background: #ccc; color: #333; }

legend { font-weight: bold;  }
fieldset { border: 1px solid #333; border-style: solid none none none; background: #f2f6fb; margin-bottom: 14px; }

.form th { text-align: right; font-weight: normal;  padding-right: 8px; vertical-align: top; }
.form td { padding-bottom: 5px; }
.form { border-collapse: collapse; }

.list-actions a, .list-actions a:visited { margin-right: 8px; }

#demo-banner { text-align: center; background: #f9ca27; padding: 4px; font-size: 0.9em; font-weight: bold; }

#header {position: relative; background: #ccc url('../images/logo.png') no-repeat 0 bottom; height: 118px; padding: 0 80px 0 80px; margin: 0; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
#header { background-color: #ccc; }
}

#header.loggedIn { background-image: none; padding: 4px 80px 0 80px; }
#header #businessName { font-size: 2em; }

#header #style-user { margin-top: 15px; }

#auth { position: absolute; top: 2px; right: 15px; font-size: 0.8em; text-align: right; }
#auth form { padding: 0; margin: 0; }
#auth input.text { background: #666666; border: 1px inset #999; color: #d0ac43; padding: 4px 6px 4px 6px; margin: 0px; }
#auth input.username { margin-right: 3px; width: 140px; }
#auth input.password { margin-right: 8px; width: 100px; }
#auth .button, #auth .button:visited, #auth .button:hover { color: #333; margin-left: 8px; }

#menu {
	position: absolute;
	bottom: 0;
	right: 15px;
	background: transparent;
	list-style: none;
	padding: 0;
	margin: 40px 0 0 0;
	text-align: right;
	text-transform: uppercase;
}
.loggedIn #menu {
	text-align: left;
	left: 67px;
}
#menu li {
	float: left;
	font-weight: 600;
	margin-left: 6px;
	min-width: 85px; width: auto !important; width: 85px;
	text-align: center;
}
#menu li a { text-decoration: none; }
#menu li a:hover { color: #111; }
#menu li.selected a { color: #999; }

#menu a span { display: none; }
#menu a { width: 88px; height: 28px; display: block; }

#tab-pricing { background-image: url(../images/tab_pricing.png); }
.selected #tab-pricing { background-image: url(../images/tab_pricing_selected.png); }

#tab-features { background-image: url(../images/tab_features.png); }
.selected #tab-features { background-image: url(../images/tab_features_selected.png); }

#tab-help { background-image: url(../images/tab_help.png); }
.selected #tab-help { background-image: url(../images/tab_help_selected.png); }

#menu #tab-appointments { background-image: url(../images/tab_appointments.png); width: 117px; }
#menu .selected #tab-appointments { background-image: url(../images/tab_appointments_selected.png); width: 117px; }

#menu #tab-forms { background-image: url(../images/tab_forms.png); width: 110px; }
#menu .selected #tab-forms { background-image: url(../images/tab_forms_selected.png); width: 110px; }

#menu #tab-products { background-image: url(../images/tab_products.png); width: 110px; }
#menu .selected #tab-products { background-image: url(../images/tab_products_selected.png); width: 110px; }

#menu #tab-preferences { background-image: url(../images/tab_preferences.png); width: 117px; }
#menu .selected #tab-preferences { background-image: url(../images/tab_preferences_selected.png); width: 117px; }

#content { font-size: 0.9em; background: #ffffff; margin: 10px 0 0 0; padding: 32px 80px; }
#content p { width: 625px; padding-top: 0; margin-top: 0; }
#content p.varwidth { width: 100%; }
#content fieldset p { width: auto; }
#content table p { width: auto; }

/**
 *	Page Title Formatting:
 */
#title { margin-top: -32px; margin-left: -80px; margin-bottom: 24px; }
#title span.wrapper { display: inline-block; background: #424242; padding: 0 80px 8px 80px; }
#title h1 { color: #fff; margin: 0; text-transform: uppercase; }
#title ul { padding: 0; margin: 0; }
#title li { border-left: 2px solid #999; color: #fff; display: inline; padding: 0 6px 0 10px; }
#title li.first { border: none; padding-left: 4px; }
#title .submenu { font-size: 12px; text-transform: capitalize; font-family: Helvetica, Verdana, Sans-Serif; }
#title .submenu a { color: #bbb; text-decoration: none; }
#title .submenu a:visited { color: #bbb; }
#title .submenu a:hover { color: #fff; }
#title .submenu .selected, #title .submenu .selected a:visited { color: #fff; font-weight: 700; }

#previewTable { margin: -40px; }
#previewPortfolio { text-align: right; padding-right: 58px; }
#loading { background: #F00; color: #FFF; position: absolute; top: 0; right: 0; }

/*
	Index:
*/
#home {	padding: 16px 0 16px 0; }
#home table { margin-top: 32px; }
#home td { padding: 0; }
#home td img { display: block; margin-bottom: 10px; }
#home li { padding-top: 6px; }
#home ol { margin-top: 0; margin-left: 25px; padding: 0; }

#home #howworks h2 { margin: 26px 0 4px 0; font-size: 20px; }
#home #howworks li { margin-bottom: 6px; }
#home #howworks ul { margin-bottom: 10px; }
#home #screenshot { }

#home a img { border: none;}
#home-title span { display: none; }
#home-title { background-image: url(../images/home_heading.png); background-reeat: norepeat; width: 378px; height: 23px;  }

/**
 *	Features:
 */ 
#feature-container { margin: 0 0; }
#feature-container td { padding: 24px 32px 0px 60px; }
#feature-container td p { margin: 0; }
#feature-container td h3 { margin: 0; }
#client-booking { background: url('../images/feature-client-booking.png') no-repeat left 24px; }
#website-integration { background: url('../images/feature-website-integration.png') no-repeat left 24px; }
#customization-colors { background: url('../images/feature-customization-colors.png') no-repeat left 24px; }
#customization-html { background: url('../images/feature-customization-html.png') no-repeat left 24px; }
#mult-staff { background: url('../images/feature-mult-staff.png') no-repeat left 24px; }
#feature-reminders { background: url('../images/feature-reminders.png') no-repeat left 24px; }
#feature-credit-cards { background: url('../images/feature-credit-cards.png') no-repeat left 24px; }
#instant-notification { background: url('../images/feature-instant-notification.png') no-repeat left 24px; }
#feature-forms { background: url('../images/feature-forms.png') no-repeat left 24px; }
#feature-history { background: url('../images/feature-history.png') no-repeat left 24px; }
#feature-ecommerce { background: url('../images/feature-ecommerce.png') no-repeat left 24px; }
#feature-iphone { background: url('../images/feature-iphone.png') no-repeat left 24px; }
#feature-export { background: url('../images/feature-export.png') no-repeat left 24px; }

/**
 * Pricing & Signup
 */

#signup { width: 700px; padding: 10px 0; margin: 0 auto; }

/**
 * Help
 */
#help li {
	margin-bottom: 6px;
}
#help ul {
	list-style: none;
	margin: 8px 0 8px 12px;
	padding: 0;
}
#help ul a {
	text-decoration: none;
}
#help ul a:hover {
	text-decoration: underline;
}

/* classes for all pages */
.version { margin: -30px 0 0 auto; text-align:right; }
.pageIntro { width: 342px; }
.rightPane { width: 282px; margin-left: 402px; margin-top: -219px; padding-left: 2px; background: #fff; }
div>.rightPane { width: 282px; margin-left: 402px; margin-top: -209px; padding-left: 2px; background: #fff; }
.back { padding-right: 45px; }
.eyecandyDescription { margin-left: 320px; }
.eyecandy { width: 600px; padding: 100px 0 100px 100px; }

span.error { color: #f00; }
div.error { border: 2px solid #f00; background: #ffe5e5; padding: 8px; width: 50%; font-weight: bold; margin: 10px 0; }
input.error { border: 2px solid #c00; }
.notice { border: 2px solid #090; background: #e2f9e1; padding: 8px; width: 50%; font-weight: bold; margin: 10px 0; }

.times {width: 200px; height: 200px; overflow: auto; border: 1px solid #ccc; background: #f5f5f5; padding: 2px; }

.payed { color: #008A00; font-weight: bold; }
.notpayed { color: #F00; font-weight: bold; }

.footnote { font-size: .8em; }

.alert { font-weight: bold; color: #008A00; }
.highlight { background: #ffff99 !important; }

.big { font-size: 180%; font-family: Georgia, "sans serif"; }
.small { font-size: 80%; color: #888; }
.smallLabel { font-size: 80%; color: #000; }
.label { font-weight: bold; margin-right: 5px; }
.caption { color: #666; font-size: 90%; }

.titleAction { font-size: 10pt; font-family: verdana; }

.list { width: 500px; border: 1px solid #ccc; border-collapse: collapse; }
.list td { padding: 5px; }
.list th { text-align: left; background: #ddd; padding: 5px; }
.even { background: #efefef; }
.odd { background: #fafafa; }
.key { font-weight: bold; }
.title { background: #ccc; }
.list .total { border-top: 1px solid #000; }

.subsection { border: 1px solid #ccc; margin: 1em 0 0 0; padding: 10px; width: 625px; }

img.frame { border: 1px solid #ccc; }

.question { font-weight: bold; }

.bold { font-weight: bold; background: none; }

#appointments { position: relative; width: 600px; }
#days { position: relative; top: 0; left: 0; width: 200px; }

.rightAlert { float: right; background: #ffff99; }
/* #times { position: absolute; top: 0; left: 210px; } */

.infobox { border: 1px solid #dedede; background: #fafafa; width: 250px; float: right; clear: right; margin-top: 10px; }
.infobox h3 { padding: 3px; background: #efefef; margin: 0; font-size: 1em; font-weight: bold; }
#content .infobox p { padding: 3px; width: auto; }
.infobox ul { margin: 0; padding: 3px 3px 3px 20px; }

.sortableList { 
  list-style-type:none;
  margin:0;
  padding:0;
}

.sortableList li {
 margin:0;
 padding: 6px;
 cursor:move;
}

/**
 * Calendar
 */
.calendar { border: 1px solid #ccc; background: #efefef; font-size: 1.5em; margin-bottom: 0px; }
.calendarHeading { width: 23em; }
.calendar td { width: 2em; height: 2em; vertical-align: top; }
.calendar .date { margin: 0; padding: 0; color: #aaa; font-size: .5em; }
.calendar .day { background: #fafafa; cursor: pointer; }
.calendar .selected { background: #f8e0de; }
.calendar .apptCount { text-align: center; }
.calendar .highlight { background: #ffff99; }
 
/**
 * Appointments
 */
 .apptsTitle { margin: 0 0 8px 0; }
 
 .show-container a { margin-right: 5px; }
 
.todaysAppointments { border: 1px solid #ccc; padding: 0; margin: 0 0 20px 0; width: 600px; }
.todaysAppointments p { margin: 10px; }
.todaysAppointments.time { font-weight: bold; }
.todaysAppointments h2 { color: #222; padding: 0; margin: 8px; font-family: Verdana, Arial; font-weight: bold; font-size: 100%; font-weight: bold; }
.todaysAppointments .list { width: 100%; border: none; }
.todaysAppointments .list td { padding: 8px; }
.todaysAppointments .list tr { border-top: 1px solid #ccc; cursor: pointer; }
.todaysAppointments .list tr.even { background: #fafafa; }
.todaysAppointments .list tr.odd { background: #efefef; }
.pane.todaysAppointments { padding: 0; }

/******************/
/* help appts php must be changed if height is changed */
.timeslot { height: 20px; font-size: 0.9em; }
.newHour { border-top: 1px solid #ddd; }
.newHalfHour { border-top: 1px solid #fff; }

.unavailable
{
	border: 1px solid #eed7d7;
	background: url(../images/unavailable_stripe.png);/*#ffe5e5*/;
	width: 230px;
	color: #999;
	font-weight: bold;
	padding: 2px;
	cursor: pointer;
}

.appointment
{
	border: 1px solid #1a55d0;
	background: #98b8ee;
	padding-left: 3px;
	float: left;
	cursor: pointer;
	width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 1;
}

.appointment a, .appointment a:visited
{
	color: inherit;
	text-decoration: none;
}

.appointment a:hover
{
	text-decoration: underline;
}

.apptTime
{
	color: #1b55ce;
	float: right;
	font-size: 0.9em;
	font-weight: bold;
}

.ampm
{
	font-variant: small-caps;
}

.appointmentListing
{
	float: left;
	position: relative;
	background: #eee;
}

.timeListing
{
	width: 80px;
	background: #efefef;
	text-align: right;
	padding-right: 4px;
	float: left;
	position: relative;
	
	color: #333;
	font-size: 0.8em;
	font-weight: bold;
}
/******************/

#leftApptBlock { float: left;  padding: 0 5px 8px 5px; }
#leftApptBlock p { width: auto; }
#leftApptBlock ul.indented { list-style-type: none; margin-top: 2px; padding-left: 20px; margin-left: 0; }
#leftApptBlock h3 { font-size: 0.9em; font-weight: bold; margin-top: 8px; }
#leftApptBlock .calendar { border: 1px solid #ccc; background: #efefef; font-size: 1.2em; }
#leftApptBlock .calendarHeading { width: 16em; }
#leftApptBlock .calendar td { width: 1.7em; height: 1.7em; vertical-align: top; }

#rightApptBlock { margin-left: 15px; float: left; position: relative; }
#rightApptBlock .createAppt { position: absolute; top: 5px; right: 5px; margin: 0; width: auto; font-size: 0.8em; }

/**
 * Appointment edit
 */
.editDialog {
	border: 2px solid #000;
	background: #fff;
	padding: 8px;
    position: absolute;
    top:150px;
    left:50%;
    z-index:9999;
    width:525px;
    height:auto;
    margin:-100px 0 0 -200px;
    }

#overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:5000;   
    background-color:#000;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }

    
/**
 * Design
 */
#design { width: 800px; }
#design td { vertical-align: top; }

/**
 * Contact footer
 */
 
.footer { color: #a9a9a9; font-size: 70%; }
.footer a, .footer a:hover, .footer a:visited { text-decoration: none; color: #999999; }
.footer a:hover { text-decoration: underline; }
.footer p { margin: 4px 0; width: 100%; }
#footerContact { margin: 0 80px 0 80px; padding: 16px 0; text-align: right;}
#poweredby { margin: 24px 80px 2px 80px; text-align: right;}
#poweredby a { text-decoration: underline; }

/** For panes */
.submenu .paneTabActive { color: #fff; font-weight: 700; }
#title .submenu a.paneTabActive, #title .submenu a.paneTabActive:visited  { color: #fff !important; }

.paneTabs {
  float:left;
  width:100%;
  padding: 0;
  margin: 0;
  font-size:93%;
  line-height:normal;
  }
.paneTabs ul {
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
  }
.paneTabs li {
  display:inline;
  margin:0;
  padding:0;
  }
.paneTabs a {
  float:left;
  background:url("../images/tableftB.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
.paneTabs a span {
  float:left;
  display:block;
  background:url("../images/tabrightB.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#333;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.paneTabs a span {float:none;}
/* End IE5-Mac hack */
.paneTabs a:hover, .paneTabs .paneTabActive {
  background-position:0% -42px;
  }
.paneTabs a:hover span, .paneTabs .paneTabActive span {
  background-position:100% -42px;
  color:#000;
  }
.pane { clear: both; border: 1px solid #ccc; padding: 15px 10px 10px 10px; width: 800px; }
.pane fieldset { padding: 8px; }
.pane h3 { margin: 0 0 8px 0; }

/** Preferences */
.preferences .pane { line-height: 180%; }

/** Instructions when starting */
.instructions { font-weight: normal; line-height: 1.4em; }

/** Schedule Payment */
.prompt { font-size: 85%; }

/** Products */
.productImage { float: left; margin-right: 12px; }
.productDescription { float: left; }

/** Popup */
.popup-content {
	padding: 6px;
	background: #fff url(../images/panel_grad_bg.png) repeat-x scroll 0px 0px;
	background-position: bottom;
}


div.popup .bottom {
  bottom:-20px;
  height:20px;
  left:20px;
  position:absolute;
  right:20px;
  background: transparent url(../images/shadows_repeat_x.png) repeat-x scroll 0px -30px;
}

.popup .right {
	background: transparent url(../images/shadows_repeat_y.png) repeat-y scroll -30px 0px;
	bottom:20px;
	position:absolute;
	right:-20px;
	top:20px;
	width:20px;
}

.popup .left {
	background: transparent url(../images/shadows_repeat_y.png) repeat-y scroll 0px;
	bottom:20px;
	left:-20px;
	position:absolute;
	top:20px;
	width:20px;
}

.popup .top {
	background: transparent url(../images/shadows_repeat_x.png) repeat-x scroll 0px 0px;
	height:20px;
	left:20px;
	position:absolute;
	right:20px;
	top:-20px;
}

div.popup div.topleft {
  background: transparent url(../images/shadow_corners.png) no-repeat scroll 0px 0px;
  height:40px;
  left:-20px;
  position:absolute;
  top:-20px;
  width:40px;
}

div.popup div.topright {
  background: transparent url(../images/shadow_corners.png) no-repeat scroll 0px -80px;
  height:40px;
  position:absolute;
  right:-20px;
  top:-20px;
  width:40px;
}

div.popup div.bottomleft {
  background: transparent url(../images/shadow_corners.png) no-repeat scroll 0px -40px;
  bottom:-20px;
  height:40px;
  left:-20px;
  position:absolute;
  width:40px;
}

div.popup div.bottomright {
  background: transparent url(../images/shadow_corners.png) no-repeat scroll 0px -120px;
  bottom:-20px;
  height:40px;
  position:absolute;
  right:-20px;
  width:40px;
}