html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0 0 1px 0;
	background: #cab0d4 url(images/bg.png) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
}

#container {
	min-height: 100%;
	margin: 0;
}

/*
fixme
need to make sure page goes all the way to bottom of viewport even if content is minimal.
height: 100% on #container doesn't do it
apparently XHTML does not allow height property?  :(
*/

#left_bg {
	background: #fff url(images/border-left-bg.png) repeat-y;
	margin: 0 auto;
	max-width: 900px;
}

#left {
	background: url(images/border-left.png) no-repeat;
}

#right_bg {
	background: url(images/border-right-bg.png) repeat-y right;
}

#right {
	background: url(images/border-right.png) no-repeat top right;
	min-height: 500px; /* image is only 500px tall, though */
	padding: 0 20px;
}

#masthead {
	background: url(images/header-bg.png) repeat-x;
	padding-top: 21px;
	height: 60px;
	clear: right;
	/*margin: 0 5px;*/
}



/*****
http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/ explains what I'm doing
with negative margins and floats.  I use SEARCHTHIS to denote those items explained in the article.
*****/

#content {
	margin: 14px 0;
	float: left; /* SEARCHTHIS */
	width: 100%; /* SEARCHTHIS */
}

/* do i even need content AND squeeze since we're going with a static left-hand sidebar?  i don't think i do... 20090329 */

body #content {
	margin-left: -200px;
}

body #squeeze {
	margin-left: 200px;
	padding-left: 20px;
}

#sidebar {
	float: left; /* SEARCHTHIS */
	width: 200px; /* SEARCHTHIS */
	/*z-index: 2;*/ /* This ensures the sidebar is still clickable. */
	position: relative; /* This (really?) ensures that the sidebar is still clickable. */
}












a {
	text-decoration: none;
	color: #000;
}

img {
	border: 0;
}











#masthead > h1 {
	margin: 0;
}

#logo {
	float: left;
	margin: 0 7px 0 -7px;
}

#masthead > h1 span {
	line-height: 50px;
	font-family: Garamond, Times, serif;
}




#navbar {
	border-bottom: #cab0d4 1px solid;
	margin: 0 -14px;
	font-size: 80%;
	/*padding-top: 0.2em;*/
	/*padding-bottom: 0.5em;*/
}





#breadcrumb {
	/*padding: 0.2em 0 0.5em 0.5em;*/
	padding: 0.2em 0.8em 0.5em;
}

#breadcrumb a:hover {
	text-decoration: underline;
}







/* ALL RULES BELOW APPLY TO DROP-DOWN NAVIGATION */
/* fixme: move them to a different CSS file */

#navbar > ul {
/*	position: absolute;
	right: 20px;
	top: 20px;*/
	float: right;
}

#navbar > ul {
	/* display: inline; */
	/* padding: 0; */
	margin: 0;
	padding: 0;
}

#navbar li {
	display: block;
	margin: 0;
	padding: 0;
}

/* use this to try to get navbar highlight same as menu item highlight */
#navbar > ul > li {
	position: relative;
	float: left;
    border-right: #cab0d4 1px solid;
	padding: 0 2px;
}

#navbar > ul > li.last {
	border: 0;
}

#navbar > ul ul {
	/* background-color: white; */
	/*border: 1px solid black;*/
	border: 1px solid #cab0d4;
	position: absolute;
	left: -999em; /* WAY off-screen */
}

#navbar > ul > li:hover > ul {
	left: -1px;
	z-index: 1000;
}

#navbar > ul ul {
	background: #fff;
	padding: 2px;
}

#navbar > ul ul li {
	background: #fff;
	white-space: nowrap;
}

#navbar > ul ul li:hover {
	background: #ceeac2;
}

/* link needs to cover the entire width of submenu */
#navbar > ul a {
	display: block;
	padding: .25em .5em;
}

#navbar > ul a:hover {
	background: #ceeac2;
}







/*
#large-nav ul {
	padding: 0;
	width: 200px;
	font-family: serif;
	font-size: 140%;
	font-weight: bold;
	margin: 0;
}

#large-nav li {
	height: 80px;
	list-style-type: none;
	margin: 5px 0;
	background: no-repeat;
	padding-left: 10px;
}

#large-nav li a {
	display: block;
	height: 58px;
    border: #cab0d4 1px solid;
	border-left: none;
	padding: 10px 10px 10px 50px;
}

#large-nav li.menu-169 {
	background-image: url(images/question-nav-icon.png);
}

#large-nav li.menu-173 {
	background-image: url(images/exclamation-nav-icon.png);
}

#large-nav li.menu-174 {
	background-image: url(images/logo-nav-icon.png);
}
*/

#large-nav ul {
	padding: 0;
	width: 200px;
	/*font-family: Garamond, Times, serif;*/
	font-size: 140%;
	font-weight: bold;
	line-height: 30px;
	margin: 0;
}

#large-nav li {
    border: #cab0d4 1px solid;
	height: 78px;
	list-style-type: none;
	margin: 14px 0;
	background: #fff;
	/* can we make this pseudo-transparent somehow?  It would be useful if we ever have a front-page bg image (like
	Firefox). http://www.shrutigupta.com/index.php/2005/10/31/how-to-make-the-background-of-a-div-semi-transparent/ */
}

#large-nav li a {
	display: block;
	height: 60px;
	padding: 10px 0 10px 60px;
	background: no-repeat;
	margin: -1px;
}

#large-nav li.question_icon a {
	background-image: url(images/question-nav-icon.png);
}

#large-nav li.exclamation_icon a {
	background-image: url(images/exclamation-nav-icon.png);
}

#large-nav li.lotus_icon a {
	background-image: url(images/logo-nav-icon.png);
	padding-right: 30px;
}









h2, h3 {
	margin-top: 0;
}








#sublinks {
	background: #cab0d4;
	padding: 0;
	margin: 14px 0;
}

#sublinks li {
	list-style-type: none;
	padding: 1px 1px 0 20px;
}

#sublinks li.first {
	background: url(images/corner-top-left.png) no-repeat top left;
}

#sublinks li.last {
	padding-bottom: 1px;
	background: url(images/corner-bottom-left.png) no-repeat bottom left;
}

#sublinks li a {
	display: block;
	background: white;
	font-weight: bold;
	/*font-family: Garamond, Times, serif;*/
	padding: 5px;
	border: white 2px solid;
}

#sublinks li.active a {
	background: #ceeac2;
}







.block {
	border: #cab0d4 1px solid;
	margin: 14px 0;
}

.block h2 {
	background: #ceeac2;
	font-size: 100%;
	padding: 3px;
	margin: 2px 2px 0 2px;
	text-align: center;
}

.block div.content {
	padding: 5px;
}

.clear {
	clear: both;
}



.button {
	background: url(images/green-button-bg.png) repeat-x;
	float: right;
	margin: 0 5px 5px;
}

.button_left {
	background: url(images/green-button-left.png) left no-repeat;
}

.button_right {
	background: url(images/green-button-right.png) right no-repeat;
	height: 32px;
	line-height: 32px;
}

.button_right a {
	display: block;
	padding: 0 10px;
}






.block-block, .block-views, .block-user {
	border: #cab0d4 1px solid;
	margin: 14px 0;
	padding: 5px;
}

#sidebar .block-block h2, #sidebar .block-views h2, #sidebar .block-user h2 {
	/*font-family: Garamond, Times, serif;*/
	font-size: 100%;
	margin-top: 0;
}





#bottom {
	background: url(images/border-bottom.png) repeat-x bottom;
}

#bottom_left {
	background: url(images/border-bottom-left.png) no-repeat bottom left;
}

#bottom_right {
	background: url(images/border-bottom-right.png) no-repeat bottom right;
}



#footer {
	margin: 0 6px;
	/*padding: 14px 14px 20px;*/
	/*padding: 5px 5px 11px;*/
	padding: 0.5em 1em 1em;
	border-top: #cab0d4 1px solid;
	font-size: 80%;
}


#copyright {
	float: left;
}

#contact {
	float: right;
}

#footer a:hover {
	text-decoration: underline;
}





ul.strong li {
	font-weight: bold;
	line-height: 140%;
}

#squeeze p, #squeeze address {
	padding-left: 1em;
	line-height: 140%;
}

#squeeze address {
	font-weight: bold;
}

address {
	font-style: normal;
}

#squeeze p strong {
	/*font-size: 120%;*/
}
#squeeze a {
	border-bottom: #cab0d4 1px solid;
}




.todo {
	font-weight: bold;
	color: red;
}


table#prices th {
	font-size: 120%;
	text-align: left;
}



#map {
	width: 450px;
	height: 450px;
	border: #cab0d4 1px solid;
	margin: 1em 0;
}


div.box {
	border: #cab0d4 1px solid;
	margin: 1em 0;
	padding: 0.5em;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

td.error {
	color: red;
	font-style: italic;
	font-size: 80%;
	padding-bottom: 1em;
}

div.error {
	font-weight: bold;
	color: red;
}


#appointment_form {
	background-color: #eee;
	padding: 0.5em;
	border: #cab0d4 1px solid;
	-moz-border-radius: 10px;
}


td.label {
	text-align: right;
}

td#recaptcha {
	padding: 0.5em 0;
}





ul.links {
	padding-left: 1em;
}

ul.links > li{
	list-style-type: none;
}

ul.links p {
	margin-top: .5em;
}

ul.links > li > a {
	/*font-weight: bold;*/
	font-style: italic;
}