body,
html {
		height: 100%;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 100px;    /* height of footer */
	/*
	 * Relates to the pseudo class & sibling bug, see
	 * http://css-tricks.com/webkit-sibling-bug/ for more details
	 
	 
		removed this bugfix

		-webkit-animation: bugfix infinite 1s;
	 */ 
		-webkit-animation: infinite 1s;
	
}
h1 {
	font-family: Papyrus;
	color:#24522c;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.05em;
	word-spacing: 0.5rem;
	padding: 0 15px;
}
#holder{
    min-height: 100%;
    position:relative;
}
footer{
    width:100%;
    left: 0;
    bottom: 0;
	text-align: center;
}
/* Also relates to the pseudo class & sibling bug 

*/
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.UI_outer {
	overflow: hidden;
}

.UI_slide {
	padding: 0px;
}

.UI_content {
	margin-top: 0px;
}

.UI_content ul,
.UI_content ol {
	margin: 0px 0px;
}

/* @group .nav */


.UI_nav_buttom {
	width: 100%;
	margin: 0;
	padding: 3px 0;
	background:#e6e4d8;
}
.UI_nav {
	width: 100%;
	margin: 0;
	padding: 0;
	background-image:url('images/2016_HomePage_andscape_design_santa_barbara_big_nav.jpg');	
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
.UI_navMain li {list-style:none;margin:0;float:left;display:block;padding:2px 1px;}

/* @end nav */

/* This is the clicked label that controls the menu */
.UI_slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 10px 13px 6px 0;
}
.UI_slide-phone {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 7px 70px 6px 0;
}
.UI_slide_res {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 2;
	display: none;
	margin: 10px 105px 6px 0;
}

/* Kill the nasty outlines everywhere */
.UI_slide-toggle,
.UI_slide-toggle:active,
.UI_slide-toggle:focus {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* The :after pseudo element has an icon that covers the checkbox */
.UI_slide-toggle:after {
	content: "☰";
	color: #fff;
	background: #4E8547;
	display: block;
	height: 30px;
	width: 38px;
	border-radius: 4px;
	font: 20px/30px 'responav';
	text-align: center;
	margin-left: -49px;
	border-width: 2px;
	border-color: coral;
}
.UI_slide-phone-btn {
	color: #fff;
	background: #4E8547;
	display: block;
	height: 25px;
	width: 38px;
	border-radius: 4px;
	padding-top:5px;
	text-align: center;
}
.UI_slide_res_btn {
	background: #fff;
	display: block;
	height: 27px;
	width: 38px;
	border-radius: 4px;
	padding-top:3px;
	text-align: center;
	border: 1px solid #C606;
}

/* This is the checkbox */
.UI_slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
/* When it's checked replace the menu icon with a close icon */
.UI_slide-checkbox:checked ~ .UI_slide-toggle:after {
	content: '☓';
	font-weight:bold;
}
/*
 * I set the width pretty high because I wanted to test on an Ipad in portrait mode,
 * depending on your website you can probably make this narrower
 */
@media handheld, only screen and (max-width: 660px) {

	/* Only show the menu link on smaller screens */
	.UI_slide-toggle {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
	}

	.UI_slide-phone {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
	}
	.UI_slide_res {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
	}
	
	/*
	 * The transition value determines the speed
	 * at which the content will slide over
	 */
	.UI_slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	.UI_slide,
	.UI_nav {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}

	/*
	 * When the checkbox is checked slide the content
	 * over and the checkbox with it
	*/	 
	.UI_slide-checkbox:checked ~ .UI_slide {
		-webkit-transform: translateX(180px) scale(1);
		-moz-transform: translateX(180px) scale(1);
		-ms-transform: translateX(180px) scale(1);
		-o-transform: translateX(180px) scale(1);
		transform: translateX(180px) scale(1);
	}

	.UI_nav {
		border-radius: 0;

		/*
		 * The width determines how much of the page you want to
		 * remain visible once the menu slides over
		 */
		width: 180px;

		/*
		 * Must be absolutely positioned otherwise it won't sit
		 * side by side with the content but instead above it
		 * */
		position: absolute;
		left: 0;
		top: 0;

		/* Keeps the menu hidden off-canvas to the left */
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.UI_nav li {float:none;}
	.UI_nav li:first-child a {border-top:none;}
	.UI_nav li:last-child a {border-bottom:none;}
	span.line_break {display: block;}
	.main_top_image {max-width:100%;position:relative;margin:0;}
	h1 {
		margin: 60px 5px 5px 5px;
	}
}


.indent {margin-left:10px;}

table.max500 {width:100%;}