/** Thanks for taking the time to read the CSS! **/
/**     Site Design by Justin Braithwaite       **/
/**       email: getstarted@webfuel.org         **/

body {
	background-color: #0099ff;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	height: 100%;
	position: relative;
	min-height: 100%; /** Get the footer to stick to the bottom of the browser window **/
	voice-family: "\"}\""; /** Ditto **/
	voice-family: inherit; /** Ditto **/
	height: auto; /** Ditto **/
	
}

html {height: 100%;}

html>body #container {height: auto;}

p {padding:0;margin:15px 0;} /** Sets the default p style **/

img {border: none;} /** No image borders for FireFox **/
/** add a, and div but only after testing it in FF, IE and SAF **/

span.goBack {font-family: Helvetica, Arial, san-serif; font-size: 70%; margin: -10px 0 20px; padding: 0; display: block; }
	
h1 {font-size: 200%; margin: 0; padding-bottom: 0; } /** Headline **/
h1.info {font-family: Helvetica, Arial, san-serif; margin-bottom: 10px;}
h2 {padding: 0px; margin: 10px 0 0} /** Subhead **/
.noListStyle {list-style-type:none;}
.clear-both {clear: both;}
.warning {color: red;}

#copy p {margin: 0 0 20px;} /** Paragraph Copy for Information and Services **/
#copy hr {
	text-align:center;
	width:90%; 
	padding: 0;
	margin: 25px auto;
	height:1px;
	background-color: #fff;
	border-top: 0px;
	border-left:0px;
	border-right:0px;
}
#languageBar { /** Selecting English or Spanish **/
	text-align: right;
	height:20px;
	background: url(/images/langbar.png) repeat-x;
	margin: 0 0 20px 0; 
}
#topBanner {
	background: url(/images/bookAppointmentBanner.png) no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	height: 150px; /** 226 **/
	width: 150px;
}
#welcome {height:150px; width:150px;}
#container { /** The meat of the website **/
	width: 780px;
	margin: 0 auto;
	text-align: left;
}
#logo {
	background: url(/images/logo.png) no-repeat; 
	height: 80px;
	width: 707px;
	margin: 0 0 20px 100px;
}
#sectionPicture {
	padding: 5px 0 10px 0; /** Picture on the main pages **/
}
#menuAndCopy {
	min-height: 600px;
	height:auto !important; /** IE 6 ignores the important tag and gets the height of 100px **/
	height: 650px; /** Other browsers ignore this **/
	padding: 0;
	margin: 0;
}
#copy {
	word-spacing: 1px;
	font: 80% "Book Antiqua", "Palatino Linotype", Palatino, serif;
	line-height: 25px;
	color: #666666;
	width:530px;
	position: relative;
	right:0;
	top:0;
	z-index: 1; /** The grass is in front of the whitebox which is in front of the gradient **/ 
	margin-left: 180px;
	padding:20px 30px 200px;
	background-color:#FFFFFF;
}

a#insurance{
	position: absolute;
	top: 0px;
	right: 20px;
	z-index: 10;
	padding: 4px 10px 2px;
	background-color: #ebebeb;
	border: 2px #dfddde solid !important;
	border-top: none !important;
	text-decoration: none;
	color: #0099ff;
}
a#insurance:hover{
	padding: 4px 10px 2px;
	background-color: #f7f7f7 ;
	border: 2px #dfddde solid !important;
	border-top: none !important;
	text-decoration: none;
	color: #0099ff !important;
}


#menu {
	padding: 0;
	margin: 0;
	padding-top: 25px;
	text-align: right;
	width:180px;
	position:absolute;
	top:130px;
	list-style:none;
}

#menu li a{
	padding:10px 0;
	display: block;
}

#menu .menuInfo .vcard .fn {
	position:absolute;
	right:9999px;
}

#callToAction { padding: 0; text-align: center; margin-bottom: 60px;}

#menuAndCopy #copy #callToAction a {
	border: 0; 
	padding: 4px 0;
	width: 235px; 
	float: left;
	margin: 0 auto;
	background: top left no-repeat;
}
#menuAndCopy #copy #callToAction a.appointment {
	background:#0099ff;
	border: 3px solid #048fec; 
	color: white;
	margin: 0 20px 0 15px;
}

#menuAndCopy #copy #callToAction a.inquiry {
	background:#8cd1ff;
	border: 3px solid #70c2f9; 
	color: #666666;
}
#menuAndCopy #copy #callToAction a.appointment:hover {
	border: 3px solid #0368ab;
}
#menuAndCopy #copy #callToAction a.inquiry:hover {
	border: 3px solid #048fec;
}



#whitebox { /** A white box that drops from the copy to the bottom of the page **/
	background-color: white;
	width:590px;
	height:80%;
	position: absolute;
	bottom: 0;
	margin-left: 180px;
	margin-top: -200px;
	z-index: 0; /** The grass is in front of the whitebox which is in front of the gradient **/ 
}
#gradient { 
	background: url(/images/bg.png);
	width:100%;
	height:398px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
#grass { 
	background-image: url(/images/footer-interlaced.png);
	background-repeat: repeat-x;
	width:100%;
	height:205px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2; 
}
#woman {
	background:url(/images/woman.png);
	width:260px;
	height:300px;
	position:absolute;
	bottom:50px;
	z-index: 6;
	margin-left:-40px; /* For Safari */
	padding: 0;
}
#footer {
	width:100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left:0;
	height:15px;
	z-index: 5;
	margin-bottom: 0px;
	font: 60% helvetica, ariel, san-serif;
	color:white;
	overflow: hidden;
}
#footer ul, #footer li {padding: 0; margin: 0;}
#footer li {display: inline;}
#footer ul {margin-left: 150px;}

#map {
	font-family: Helvetica, Ariel, San-serif;
	line-height: normal;
	color: black;
	width:530px;
	height:300px;
	border:2px solid #979797;
	margin: 35px 0 40px;
}
#braithwaiteBio{
	height: 220px;
	width:250px;
	position: relative;
	float: left;
	padding: 0 20px 0 0;
}
.hours, .numbers {margin-top: 10px;}
.menuInfo {
	margin-top: 10px;
	margin-right: 10px;
	font: 70% helvetica, ariel, san-serif;
	color: #444444;
}
p#lang {
	padding: 3px 0 0 0;
	margin: 0 5px;
	color: white;
	font: 60% helvetica, ariel, san-serif;
}
a.smallLinks { /* the small links at the top and bottom of the page */
	text-decoration: none;
	margin:0 10px;
	color: white;
}
img#bottomCopyPicture {
	position: relative;
	margin:-50px 0 -110px;
	z-index:-1;
}

#contact_form label, #admin_form label {width: 100px; display: inline-block; text-align: right; padding-right: 20px}
#contact_form label.radio-label{width: inherit;}

#contact_form .text-input:focus, 
#appointment textarea.comment:focus, 
#admin_form .text-input:focus,
#confirm_appointment .text-input:focus,
#confirm_appointment textarea#response:focus
{outline: #0099ff 2px solid;}

#contact_form .text-input, 
#admin_form .text-input,
#confirm_appointment .text-input {height: 15px; background-color: #efefef; border: 10px solid #efefef; width: 260px;}

#contact_form ul, #admin_form ul {list-style: none; padding: 0; margin: 0;}
#contact_form li, #admin_form li {margin-bottom: 15px;}
#contact_form li span, #admin_form li span {margin-left: 10px;}
.error {color: red;}
#contact_form .date-input {height: 20px; border: 0; width: 155px;  padding: 10px 0 0 10px; background-color: transparent; overflow: visible; background: url('/images/calendar-field.gif') 0 0 no-repeat; }
#contact_form .date-input:focus { outline: 0;}
#contact_form #time {width: 90px; margin-left: 20px;}
#contact_form label.comment {vertical-align: top;}

#contact_form textarea.comment {height: 100px; background-color: #efefef; border: 0; padding: 10px; width: 260px;}

#contact_form #newsletter {margin: 0px 0 10px 38px;}
#contact_form #newsletter span{margin-left: 20px;}
#contact_form span.comment{vertical-align: top;}

#copy #contact_form input.submit, 
#copy #admin_form input.submit,  
#copy #confirm_appointment input.submit  { background-color: #0099ff; color: white; border: 0; height:40px; width:280px; margin-left: 123px; cursor: pointer; text-transform: uppercase; 	border: 3px solid #048fec;}

#copy #contact_form input.submit:visited, 
#copy #admin_form input.submit:visited, 
#copy #confirm_appointment input.submit:visited 	{color: white;}

#copy #contact_form input.submit:hover, 
#copy #admin_form input.submit:hover, 
#copy #confirm_appointment input.submit:hover  		{background-color: #0066cc;}



/** Admin Section **/

ul.appointments {list-style: none; margin: 20px 0 0 0 ; padding: 0;}
.pending {margin: 20px 0 0 0px !important;}
.quote {font-size: 5em; float: left; width: 40px; height: 50px; position: relative; top: 20px; font-family: Georgia; }
.comment {width: 480px; float: left;}
.confirmation-list {margin: 20px 0; padding: 0;}
.input-options input {float: left; margin-right: 10px}

#confirm_appointment textarea#response {height: 200px; background-color: #efefef; border: 0; padding: 10px; width: 508px;}

#confirm_appointment input#subject {width: 510px;}
#reply_option { width: 150px; margin: 20px 0;}
#copy #confirm_appointment input.submit {float: right;}
#confirm_appointment label {margin-bottom: 10px; display: block;}
#confirm_appointment {margin-bottom: 30px;}
#admin_form {margin-top: 20px;}

/**  Links **/

#copy a:link {text-decoration: none; color: #0099ff; border-bottom: 1px dotted #e6e6e6;}
#copy a:visited {text-decoration: none; color: #0066cc; border-bottom: 1px #e6e6e6 dotted;}
#copy a:hover {text-decoration: none; color: #0099ff; border-bottom: 1px #111111 dotted;}
#copy a:active {}

#sidebar a {
	font-family: Helvetica, Ariel, san-serif;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .75em;
	padding: 5px 10px 5px 0 !important;
	color: #046fb7;
}
#sidebar a:link {color: #0379c9;}
#sidebar a:visited {color: #0379c9;}
#sidebar a:active {color: #0379c9;}
#sidebar a:hover {color: black;}

/* Classes for the active page menu item, gets displayed with img class="menuHome menuNormal" */
img.menuHome {background: url(/images/menuHome.png) no-repeat;	border: none;	height: 15px;	width: 116px; margin-right: 10px;}
img.menuInformation {background: url(/images/menuInformation.png) no-repeat;	border: none;	height: 15px;	width: 116px; margin-right: 10px;}
img.menuServices {background: url(/images/menuServices.png) no-repeat;	border: none;	height: 15px;	width: 116px; margin-right: 10px;}
img.menuAboutUs {background: url(/images/menuAboutUs.png) no-repeat;	border: none;	height: 15px;	width: 116px; margin-right: 10px;}
img.menuBlog {background: url(/images/menuBlog.png) no-repeat;	border: none;	height: 18px;	width: 116px; margin-right: 10px;}

img.menuNormal{background-position: 0 0px;}
img.menuUp{background-position: 0 -15px;}
img.menuDown{background-position: 0 -30px;}
/* End of Classes for the active page menu item */

/** Menu Rollover **/
a#info img {height: 15px; width: 116px; background: url(/images/menuInformation.png) top left no-repeat; border:none; margin-right: 10px;}
a#home img {height: 15px; width: 116px; background: url(/images/menuHome.png) top left no-repeat; border:none; margin-right: 10px;}
a#services img {height: 15px; width: 116px; background: url(/images/menuServices.png) top left no-repeat; border:none; margin-right: 10px;}
a#about img {height: 15px; width: 116px; background: url(/images/menuAboutUs.png) top left no-repeat; border:none; margin-right: 10px;}
a#blog img {height: 18px; width: 116px; background: url(/images/menuBlog.png)top left no-repeat; border:none; margin-right: 10px;}
a#admin img {height: 15px; width: 116px; background: url(/images/menuAdmin.png)top left no-repeat; border:none; margin-right: 10px;}

/* Links */
a#home img {background-image: ;background-position: 0 -15px; border:none;}
a#info img {background-position: 0 -15px;}
a#services img {background-position: 0 -15px;}
a#about img {background-position: 0 -15px;}
a#blog img {background-position: 0 -18px;}
a#admin img {background-position: 0 -15px;}

/* Visited */
a#home:visited img {background-position: 0 -15px;}
a#info:visited img {background-position: 0 -15px;}
a#services:visited img {background-position: 0 -15px;}
a#about:visited img {background-position: 0 -15px;}
a#blog:visited img {background-position: 0 -18px;}
a#admin:visited img {background-position: 0 -15px;}

/* Hover */
a#home:hover img {background-position: 0 -30px;}
a#info:hover img {background-position: 0 -30px;}
a#services:hover img {background-position: 0 -30px;}
a#about:hover img {background-position: 0 -30px;}
a#blog:hover img {background-position: 0 -36px;}
a#admin:hover img {background-position: 0 -30px;}
/** End of Menu Rollover **/