@charset "UTF-8";

/*********************************

Colors:

#e55a25 : dark orange
#333333 : dark grey
#d2d3d3 : light grey


**********************************/

/*a { color: #e55a25 }*/
a { color: #333; }

body  {
	font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif; /* sets font-size in all browsers to 16p.  Adjustments to individual elements from this point inward are to be made in ems to permit users to change text size if they need. Method used here outlined at http://www.alistapart.com/articles/howtosizetextincss */
	line-height: 1.062em; /* equivalent of 17px */
	background: #FFF url(../images/body-background.jpg) -15px -13px repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #333333;
}
#container { 
	width: 854px;
	background: url(../images/container-background.gif) 0 15px no-repeat;
	margin: 15px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 0px 14px;
	display: inline-block;
} 
.js-enabled-option {
	display: none;
}
.no-js-option {
	display: inline;
}
/* h1, h2, h3, h4 {
	display: block;
	clear: left;
}*/

/* HEADER AREA */

#header { 
	width: 854px;
	padding: 0 !Important;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: 30px !important;
	height: 104px;
	position: relative;
} 
#header .identity a {
	float: left;
	clear: none;
	background: #d94521 url(../images/podiatryhq-logo.gif) top left no-repeat;
	color: #FFF;
	text-indent: -9999px;
	width: 185px;
	height: 104px;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
#header .banner {position: absolute;
	top: 0; right: 0;
	float: right;
	clear: none;
	width: 665px;
	height: 104px;
	text-indent: -9999px;
	background: #EBEBEB url(../images/banner.gif) no-repeat;
}
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* PRIMARY NAV */

ul.primary-nav {
	margin: 3px 0 5px 0 !important;
	padding: 0;
	font-size: 1.062em;
	line-height: 40px;
	height: 40px;
	background: url(../images/nav-menu-ul-bg.gif) top right no-repeat;
	display: block;
}
.primary-nav li {
	list-style-type: none;
	float: left;
}
.primary-nav a, .primary-nav .nav-menu-selected { /* .nav-menu-selected may not  
		have an <a> inside it, so styles are directly applied to the li; colours adjusted below to depict current selection. */
		color: #864e9c;
	height: 39px;
	float: left;
	background: #FFF url(../images/nav-menu-li-bg.gif) repeat-x;
	padding: 0 16px;
}

.primary-nav .nav-menu-selected a { /* where the selected li still is a link, strip the above styles from the selected a so no doubling up occurs */
	padding: 0;
	background: none;
	color: #FFF;
}

.primary-nav a:hover {
	/* background: #eeeded; */
}
.primary-nav .nav-menu-selected {
	background: #FFF url(../images/nav-menu-li-sel-bg.gif) repeat-x;
	color: #FFF;
	line-height: 39px;
}

/* SIDEBAR AREA */

#sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 240px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 3px 0 0 0 !important;
}
#sidebar1 h2, #sidebar1 h3, #sidebar1 p, #sidebar1 select, #sidebar1 label, #sidebar1 input, #sidebar1 .note {
	margin-left: 10px;
	margin-right: 10px;
}
#sidebar1 h2, #sidebar1 h3 {
	margin-top: 0;
}
#sidebar1 h2 {
	font-size: 1.1875em;
	line-height: 100%;
	margin-bottom: 0.3em;
}
#sidebar1 h3 {
	font-size: 1em;
	margin-bottom: 0.2em;
}
#sidebar1 p, #sidebar1 label {
	font-size: 0.75em !important; /* equivalent of 12px */
	margin-top: 0;
	line-height: 125%;
}
/* Contact Us box */

.contact-us {
	width: 100%;
	background: #8da23b url(../images/sidebar-contact-us-bg-whole.gif) left top no-repeat;
	padding-top: 30px !important;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
.contact-us p, .contact-us h2 {
	width: 150px;
}
.contact-us p {
	font-size: 0.75em; /* equivalent of 13px */
	line-height: 107% !important;
	margin-top: 0;
}
.contact-us .button-broadmeadows, .contact-us .button-south-yarra-yarraville {
	width: 209px;
	height: 38px;
	margin-left: 10px;
	margin-bottom: 7px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
}

.contact-us .button-south-yarra-yarraville {
	background: url(../images/button-phone-south-yarra-yarraville.gif) top left no-repeat;
}
.contact-us.button-south-melbourne-flemington {
}
.contact-us .button-broadmeadows { 
	background: url(../images/button-phone-broadmeadows.gif) top left no-repeat;
}
/* Jump To Condition Information Factsheet box */

.condition-info-chooser {
	width: 100%;
	background: #efefed url(../images/sidebar-bg-sticky-uppy-feet.gif) left bottom no-repeat;
	padding: 22px 0 15px 0 !important;
}
.condition-info-chooser p {
	margin-bottom: 0.6em;
}
.condition-info-chooser select {
	margin-right: 0 !important;
}
.condition-info-chooser fieldset, .request-an-appointment fieldset, .send-appointment-request fieldset, .send-email fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}
#conditions-nav-form {
	margin: 0;
}
#conditions-nav-form .go-button {
	width: 3em;
	margin-left: 0;
}

/* Request an Appointment box */
.request-an-appointment {
	width: 100%;
	padding: 22px 0 0 0;
	background: #f0c682 url(../images/sidebar-request-appt-bg-shim.gif) top left repeat-x;
	display: inline-block;
}
.request-an-appointment form {
	margin: 0;
}
.request-an-appointment select {
	width: 15em;
}
#request-appointment-form div, #request-appointment-form fieldset div {
	margin-bottom: 5px;
}
.sameline1, .sameline2 {
	width: 115px !important;
	margin-right: 0;
	display:inline-block;
	zoom:1;
	*display:inline;
}
.send-email .sameline1, .send-email .sameline2 {
	width: 180px !important;
}
.request-an-appointment label {
	clear: both;
	display: block;
	font-weight: bold;
	font-size: 1em !important;
}
#time, #datepicker {
	clear: both;
	width: 94px;
}
.request-an-appointment .note {
	line-height: 100%;
	font-size: 0.6875em;
	margin-bottom: 5px;
	margin-left: 15px;
	margin-right: 15px;
	width: 93%;
}
.request-an-appointment #submit-button {
	margin-bottom: 15px !Important;	
	margin-top: 8px !important;
}

/* Standalone Request Appointment Page */
.required-marker {
	color: red;
}
.send-appointment-request label, .send-email label {
	display: block;
	width: 13em;
	font-weight: bold !important;
	margin-top: 0.5em;
}
.send-email textarea {
	width: 37em;
	height: 10em;
}
.send-email textarea {
	font-family: inherit;
	font-size: 0.95em;
	line-height: 110%;
	padding: 3px;
}
.error-message {
	color: #000;
	background: #f1a7a9;
	padding: 0.5em;
	margin-left: 35px;
	margin-right: 80px;
	margin-bottom: 10px;
}
.error-message p, .error-message ul {
	margin: 0 !important;
}
.error-message strong {
	text-transform: none !important;
	font-weight: bold !important;
}
.captcha-container {
	padding: 10px 0 5px 0;
	display: block;
	clear: none;
}
.captcha-container a, .captcha-container a img {
	border: 0;
	padding: 0;
	margin: 0;
}
.captcha-container a img {
	float: left;
	margin: 0;
	margin-left: 2px;
}
.captcha-container label {
	margin-top: 0;
	width: 5.7em !important;
	clear: none;
	float: left;
	clear: left;
	font-size: 100%:
	line-height: 160%;
	font-weight: normal !Important;
}
.captcha-container input {
	float: left;
}
.captcha-container img#captcha {
	float: left;	
	vertical-align: bottom;
	margin-bottom: 5px;
	height: 38px;
}
.captcha-buttons {
	width: 30px; 
	float: left; 
}
#sidebar1 .captcha-container {
	margin: 0 10px;
	padding: 0;
}
#sidebar1 .captcha-pic {
	width: 110px !important;
	float: left;
}
#sidebar1 .captcha-container img {
	height: 28px;
}
#sidebar1 .captcha-container label {
	width: 6em !important;
	display: block;
}
#sidebar1 .captcha-container strong { 
	font-size: 0.75em; 
}
#sidebar1 .type-captcha {
	float: left;
	clear: none;
	margin-top: 6px;
	width: 105px;
	padding: 0;
}
#sidebar1 .type-captcha input {
	margin-left: 0;
}
#sidebar1 .captcha-container label, #sidebar1 .captcha-container input {
	float: none;
	clear: none;
}

/* MAIN CONTENT AREA */

#main-content { 
	position: relative;
	margin: 0 240px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	/* padding: 0 0.9375em; */ /* rough equivalent of 0px 15px */
	font-size: 0.8125em; /* equivalent of 13px */
} 
#main-content h1, #main-content h2, #main-content h2, #main-content p, #main-content form {
	margin-left: 35px;
	margin-right: 80px;
}
#main-content ul, #main-content ol {
	list-style-position: outside;
	margin-left: 60px;
	margin-right: 100px;
}
#main-content h1 {
	font-size: 1.45em;
	margin-top: 2.5em;
	color: #333;
	padding-bottom: 0.4em; /*
	border-bottom: 2px solid red;*/
}
#main-content h2 {
	margin-top: 1.7em;
	font-weight: bold;
	color: #e55a25;
	color: #333333;
	margin-bottom: -1em;


	font-size: 1.1em;
	margin-bottom: -.4em;

}
#main-content p em, #main-content p strong {
	font-weight: normal;
	text-transform: uppercase;
	font-style: normal;
}
#main-content h3 {
	margin-top: 1.7em;
	font-size: 0.95em;
	margin-bottom: -0.7em;
}
#main-content .short-content {
	width: 440px;
	padding-left: 94px;
	padding-top: 30px;
}
.short-content h1, .short-content h2, .short-content p {
	margin-left: 0 !important;
	margin-right: 20px !important;
}
#main-content #welcome-text {
	background: url(../images/big-foot-sore-toe.gif) 0 25px no-repeat;
	margin-left: 25px;
}
#welcome-text .pre-h1 { /* like general h1*/
	font-size: 1.4em;
	margin-top: 1.6em;
	font-weight: bold;
	margin-bottom: .32em;
}
#welcome-text h1 {
	color: #e55a25;
	font-size: 1.9em;
	margin-top: 0;
	font-weight: bold;
}
.breadcrumb-link {
	font-size: 80%;
	margin-left: 16px;
	display: block;
	width: auto !Important;
	padding-top: 5px;
	margin-bottom: -12px;
}
#submit-button, #email-button {	
	display: block;
	overflow: hidden;
	border: none !important;
}
#sidebar1 a.phone-no-button {
	padding:0 !important;
	margin: 0 !Important;
	border: 0 !important;
}
a.phone-no-button img {
	border: 0 !important;
	background: none !Important;
	padding:0 !Important;
	margin: 0 !Important;
}
#sidebar1 .request-an-appointment #submit-button {
	background: url(../images/btn-send-appt-request.png);
	width: 209px;
	height: 38px;	
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	margin-left: 16px;
	margin-bottom: 0;
}

#main-content form.send-appointment-request #submit-button, .send-email #submit-button {
	background: url(../images/btn-send-appt-request-white-bg.png);
	width: 209px;
	height: 38px;
	margin: 30px auto 0 auto;
}
.send-email #submit-button {
	background: url(../images/btn-send-email-white-bg.png);
}
#submit-button span {
	text-indent: -9999px;
	display: inline-block;
	zoom:1;
	*display:inline;
}

.send-email #submit-butotn {
	background: url(../images/btn-send-appt-request-white-bg.png);
}

.btn-request-appointment {
	background: url(../images/btn-request-appointment.png);
	text-indent: -9999px;
	width: 194px;
	height: 51px;
	display: block;
	overflow: hidden;
	margin: 30px auto 0 auto;
	cursor: pointer;
}
ul.surgery-hours-links {
	list-style-position: inside;
}
dl {
	margin: 0 80px 1.8em 35px;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0 0 1em 0;
}
ul, ol {
	margin-left: 35px;
	margin-right: 80px;
}

/* Locations page */

img.location-photo {
	float: right;
	clear: none;
	position: absolute;
	top: 90px;
	right: 70px;
}
ul.locations {
	margin-left: 35px !important;
	list-style-position: outside !important;
	list-style-type: none;
	padding: 0 !important;
}
.locations li {
	line-height: 160%;
	margin: 0 !important;
	padding: 0 !important;	
}
.locations a {
	font-weight: bold;
}

.one-clinic-location {
	display: inline-block;
	margin-left: 35px;
	margin-right: 80px;
	margin-bottom: 1em;
	display: none;
}
.one-clinic-location h2 {
	font-size: 1.2em !important;
	font-weight: bold !important;
	margin: 0 !important;
}
.one-clinic-location img {
	width: 60px;
	height: 60px;
	padding: 0.4em;
	border: 1px solid #e0e0d5;
	display: none;
}


/* Individual Location focus */
.big-location-image {
	width: 530px;
	margin-left: 35px;
	height: 150px;
	border: 1px solid red;
	display: block;
	margin-top: -10px;
}
.location-address-and-contact {
	float: left;
	clear: none;
}
.location-blurb {
	float: right;
	clear: none;
}

.one-clinics-contact {
	margin-left: 35px;
	margin-right: 80px;
	margin-bottom: 2em;
}
.one-clinics-contact h2 {
	font-size: 1.25em !important;
	margin-left: 0 !important;
	margin-bottom: .2em !Important;
	margin-top: 0 !important;	
}
h2.surgery-hours {
	color: #000;
	font-weight: bold;
	font-size: 1.25em !important;
	margin-bottom: 0;
}
dl.clinic-hours {
	margin-top: 1em;
	clear: none;
	width: 16em;
	line-height: 160%;
	margin-bottom: 0;
}
dl.clinic-hours dt {
	margin: 0;
	font-weight: normal;
	font-style: italic;
	width: 7em;
	clear: left !Important;

	display: inline-block;
	zoom:1;
	*display:inline;


}
dl.clinic-hours dd {
	margin: 0;
	clear: right !important;
	width: 8em;

	display: inline-block;
	zoom:1;
	*display:inline;


}
#main-content .phone-no {
	margin-top: 0.6em !important;
}

.one-clinics-contact div, .one-clinics-contact .phone-no, .one-clinics-contact a {
	margin-left: 0em;
} 
#contact_number {
	width: 15em;
}
.one-clinics-contact .phone-no {
	margin-top: 0em;
	font-weight: bold !important;
	margin-bottom: 0.4em !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.one-clinics-contact a {
	/* margin-left: 1.5em; */
}
.maplink {
	font-size: 90%;
}
.btn-email-link {
	margin: 3em auto 0 auto  !important;

	display: block;

	background: url(../images/btn-email-link.png);	
	width: 190px;
	height: 46px;	
	overflow: hidden;
	cursor: pointer;
	text-align: center;
}
.btn-email-link span {
	text-indent: -9999px;
	display: inline-block;
	zoom:1;
	*display:inline;
}

/* CONDITIONS INDEX PAGE */

.conditions-list {
	width: 550px;
	padding: 0;	
	clear: none;
	margin: 0 0 50px 35px !important;
}
.conditions-list li {
	display:inline-block;
	zoom:1;
	*display:inline;
	width: 29%;
	list-style-type: none;
	font-size: 110%;
	line-height: 150%;
	clear: none;
}
div.note {
	/*background-color: #f6f6f4;*/
	font-size: 90%;
	line-height: 90%;
	width: 500px;
	margin-left: 35px;
}
div.note p {
	margin: 0 !important;
	line-height: 110%;
}
div.note strong {
	text-transform: none !important;
	font-weight: bold !important;
}


/* LOCATIONS FOOTER AREA */

#locations-footer {
	border-top: 1px dotted #d8d2d4;
	font-size: 0.8125em;
	margin-top: 50px;
	border-bottom: 11px solid #adb0bb;
	background: url(../images/footer-bg-shim.gif) bottom left repeat-x;
}
.footer-one-location { /* Each represents one location, so set this percentage depending on number of clinics required on a single row. */
	width: 22% !important; /* Note when setting this that each div has a horizontal padding, set below, that must also be acounted for. */
	padding: 0 1% 25px 1%;
	
	clear: none;
	
	display:inline-block;
	zoom:1;
	*display:inline;	
	
	/*border-left: 1px dotted #999;	*/
	text-align: center;
	background: url(../images/location-info-div-divider.gif) bottom left no-repeat;
}
.footer-one-location:first-child, #locations-footer div.first {
	border: none !important;
	background: none !important;
}
#locations-footer h2 {
	font-size: 1.5em;
	margin-top: 1.2em;
	color: #e55a25;
}
#locations-footer h2, #locations-footer p {
	text-align: center;
}
#locations-footer div div {
	line-height: 100%;
	margin-bottom: 1em;
}

#locations-footer div.phone-no {
	letter-spacing: 130;
	font-weight: bold;
	display:inline-block;
	zoom:1;
	*display:inline;	
}
 div.phone-no {
	font-size: 115% !important;
}

.telephone-symbol {
	text-indent: 20px;
	font-size: 115%;
	vertical-align: top;
	
	width: 19px;
	height: 15px;
	background: url(../images/phone-on-white-bg.gif) 0 1px no-repeat;
	display:inline-block;
	zoom: 1;
	*display:inline;
	overflow: hidden !important;
}
.footer-one-location a.more-info {
	cursor: pointer;
	color: #FFF;
	background: #e55a25;
	line-height: 40px;
	height: 40px;

	display:inline-block;
	zoom: 1;
	*display:inline;

	margin-top: 7px;
	background: url(../images/location-info-arrowlink-left.gif);
	padding-left: 18px;
	font-size: 90%; /* equivalent of 12px */
	text-decoration: none;
}
.footer-one-location a.more-info span {
	background: url(../images/location-info-arrowlink-right.gif) top right no-repeat;
	line-height: 40px;
	height: 40px;
	display:inline-block;
	zoom: 1;
	*display:inline;
	padding-right: 24px;
}


/* FOOTER AREA */

#footer { 
	text-align: center;
	padding: 0 0.9375em; /* equivalent of 0px 15px to match the left alignment of the elements in the divs that appear above it. */
	font-size: 0.75em; /* equivalent of 12px */
	margin: 3px 0 60px 0;
}
#footer a {
	color: #000;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}


/* GENERAL */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}