/* The Osteopathic Practice CSS */

/* 
Note on url paths:
To run locally use: url(../images/design/wrapper.gif)
To run on Websiter use: url(/images/design/wrapper.gif)
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #655048;
	color: #000000;
	line-height: 14px;
	font-size: 12px;
	border: 0px;
	padding: 0px;
}

/* The main wrapper div, position relative. Other div's are absolute within this div. */
#wrapper {
	background-color: #CCFFFF;
	background: #CCFFFF;
	position: relative;
	width: 1000px;
	margin: 0px auto;
	border: 0px;
	padding: 0px;
}
	
/* wrapper2 is nested in wrapper and exists simply to fix the IE width bug. Width and margin set on the outer div. Border and padding set on the inner div. */
#wrapper2 {
	margin: 0px;
	border: 1px solid #000000;
	padding: 0px;
	background-color: #CCFFFF;
	background-image: url(images/back2.jpg);
	background-position: 5px 680px;
	background-repeat: no-repeat;
}

#header {
	position: absolute;
	top: 0px;
	left: -180px;
	width: 998px; /* width of wrapper minus border */
	height: 168px;
	background-image: url(images/header.gif);
	background-repeat: no-repeat;
	margin: 0px; border: 0px; padding: 0px;
}

/* hd-tel (header tel) & hd-top (header The Osteopathic Practice) positions a divs to allow a pop-up title text */
#hd-tel {
	position: absolute;
	top: 126px;
	left: 802px;
	width: 180px;
	height: 17px;
}

#hd-top {
	position: absolute;
	top: 124px;
	left: 34px;
	width: 687px;
	height: 19px;
}

/*
div content has relative positioning rather then absolute so that it takes up space within div wrapper.
The height of the content div sets the height of the wrapper.
*/
#content {
	position: relative;
	height: 500px; /* IE takes this as the height and then incorrectly re-sizes if required */;
	text-align: left;
	margin: 0px;
	border: 0px;
	padding: 168px 192px 20px 5px;
	background-color: #FFFFFF;
	width:620px;
	left: 181px;
}

#content-wide {
	position: relative;
	height: 500px; /* IE takes this as the height and then incorrectly re-sizes if required */;
	text-align: left;
	margin: 0px;
	border: 0px;
	padding: 168px 20px 20px 5px;
	background-color: #FFFFFF;
	width:792px;
	left: 181px;
}

.rightimage {
	float: right;
	margin: 10px;
	padding: 0px;
}
.leftimage {
	float: left;
	margin: 10px;
	padding: 5px;
}

/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 650px;
}

html>body div#content-wide {
  height: auto; 
  min-height: 650px;
}

/* Add a bit of space between points in lists within the content area */
#content ul {margin: 0px; border: 0px; padding: 14px 10px 0px 35px;} /* Padding left gives space for indent as used by p (20px) plus extra for the bullet */
#content li {margin-bottom: 0.5em;}

/* ul within a table cell - has no padding */
#content ul.list-in-tbl {padding: 0px;}

/* Class to hide images so they can be pre-loaded. Can be used to hide any object */
.hidden {display: none;}

p {
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	margin: 5px;
	border: 0px;
	padding: 14px 10px 0px 20px;
}

/* Standard headings */
.h1 {
	color: #655048;
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
	margin: 0px;
	border: 0px;
	padding: 22px 2px 0px 14px;
}
h1 {
	color: #655048;
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
	margin: 0px;
	border: 0px;
	padding: 22px 2px 0px 14px;
}
* html h1 {height: 1%;} 

.h2 {
	color: #333333;
	font-weight: bold;
	font-size: 18px;
	line-height: 20px;
	margin: 0px;
	border: 0px;
	padding: 15px 2px 0px 14px;
}

h2 {
	color: #333333;
	font-weight: bold;
	font-size: 18px;
	line-height: 20px;
	margin: 0px;
	border: 0px;
	padding: 15px 2px 0px 14px;
}
* html h2 {height: 1%;} 

.h3 {
	font-size: 13px;
	line-height: 13px;
	color: #333333;
	font-weight: bold;
	margin: 0px;
	border: 0px;
	padding: 15px 2px 0px 14px;
	text-align:	center;
}

h3 {
	font-size: 13px;
	line-height: 13px;
	color: #333333;
	font-weight: bold;
	margin: 0px;
	border: 0px;
	padding: 15px 2px 0px 14px;
	text-align:	center;
}
* html h3 {height: 1%;} 

table {margin: 10px 0px 0px 20px;}

/* Additional styles available from Websiter editor */
.underline {text-decoration: underline;}
.centrealign {text-align: center;}
.rightalign {text-align: right;}

hr {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 1px;
}

/* Tel icon - class can apply to a div or p */
.tel-icon {
	color: #CCFFFF;
	font-weight: bold;
	font-size: 18px;
	line-height: 18px;
	width: 180px; /* Width must be set to centre the div when margin left and right is set to auto */
	margin: 0px auto; border: 0px;
	padding: 24px 10px 24px 40px; /*Padding top and bottom sets height of icon relative to text */
	background-image: url(/images/design/tel.gif);
	background-repeat: no-repeat;
	background-position: 0px center;
	text-align: left;
}

/* Page footer */
#footer {
	height: 42px; /* Height is required to fix bug in IE to allow border-top to display */
	color: #000000;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	background-color: #FFFFFF;
    margin: 0px;
	border-top: 3px solid #85726B;
	padding-top: 2px;
}
html>body #footer {
  height: auto; 
  min-height: 42px;
}

#footer a:active {font-weight: normal; color: #666666;}

#footer a:visited {font-weight: normal; color: #666666;}

#footer a:hover {font-weight: normal; color: #666666;}

#footer a {font-weight: normal; color: #666666;}
#footer a:hover {color: #000000;}

#footer a.swd { /* Normal text credit link */
	color: #000000;
	text-decoration: none;
    font-weight: normal;
}

/* Image styles */
img {
	background-position: center;
	vertical-align: middle;
}

img.right {
	background: #FFFFFF;
	margin: 5px 5px 5px 10px;
	float: right;
	border: 1px solid #000000;
}

img.right40 {
	background: #FFFFFF;
	margin: 5px 10px 5px 5px;
	float: left;
	border: 1px solid #000000;
}

img.left40 {
	background: #FFFFFF;
	margin: 5px 10px 5px 5px;
	float: left;
	border: 1px solid #000000;
}

img.left {
	background: #FFFFFF;
	margin: 5px 10px 5px 5px;
	float: left;
	border: 1px solid #000000;
}

img.right40 {margin: 5px 40px 5px 5px;}  

img.left40 {margin: 5px 40px 5px 5px;}  /* Additional right-hand padding to position lists to right of left-aligned images. Note .left40 is a misnamed synonymn */

/* Basic links */
a {
	color: #5E5F12;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {
	color: #990066;
	text-decoration: underline;
}

/* Right hand buttons */
#rh-btns {
	position: absolute;
	top: 169px;
	left: 810px;
	width: 189px;
	height: 431px;
	margin: 0px; border: 0px; padding: 0px;
}

#btn-adults {
	width: 189px;
	height: 108px;
	margin: 0px; border: 0px; padding: 0px;
	background-repeat: no-repeat;
}

#btn-mumstobe {
	width: 189px;
	height: 108px;
	margin: 0px; border: 0px; padding: 0px;
	background-repeat: no-repeat;
}

#btn-children {
	width: 189px;
	height: 108px;
	margin: 0px; border: 0px; padding: 0px;
	background-repeat: no-repeat;
}

#btn-babies {
	width: 189px;
	height: 108px;
	margin: 0px; border: 0px; padding: 0px;
	background-repeat: no-repeat;
}

#btn-babies {background-image: url(/images/design/btn-babies.jpg);}
#btn-children {background-image: url(/images/design/btn-children.jpg);}
#btn-mumstobe {background-image: url(/images/design/btn-mumstobe.jpg);}
#btn-adults {background-image: url(/images/design/btn-adults.jpg);}

#btn-babies:hover {background-image: url(/images/design/btn-babies-hvr.jpg);cursor: pointer;}
#btn-children:hover {background-image: url(/images/design/btn-children-hvr.jpg);cursor: pointer;}
#btn-mumstobe:hover {background-image: url(/images/design/btn-mumstobe-hvr.jpg);cursor: pointer;}
#btn-adults:hover {background-image: url(/images/design/btn-adults-hvr.jpg);cursor: pointer;}


/* The following code sets menu position, basic display and sub menu pop ups */

/* Remove menu indents */
#navpanel {
	position: absolute;
	left: 3px;
	top: 143px;
	margin: 0px 0px 0px 0px;
	border: 80px;
	padding: 0px;
	height: auto;
}

/* Remove list bullets */
#navpanel li {list-style-type: none;}

/* Remove sub-list indents */
#navpanel ul {
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 178px; /* Set width for IE, minus the 1px border */
}
/* Set width for standards compliant browsers */
html>body #navpanel ul {width: 178px;}

/* Fix position of menu list */
#navpanel li {position: relative;}

/* Fix position of sub-menus */
#navpanel ul ul {
	position: absolute;
	top: 0px;
	left: 100%;
	width: 178px;
}

/* Hide sub menus by default */
#navpanel ul ul {display: none;}
#navpanel ul ul ul {display: none; width: 178px;}
#navpanel ul li:hover ul ul {display: none;}

/* Show submenus on rollover */
#navpanel ul li:hover ul {display: block;}
#navpanel ul ul li:hover ul {display: block;}

/* The following code controls the colour of menu options */
/* Set menu link display default */
/* Set menu link font colour on hover */
#navpanel ul a:visited {
	display: block;
	color: #000000;
	font-size: 12px;
	line-height: 16px; /* Sets the hieght of the menu option box */
	text-decoration: none;
	background-image: url(/images/design/menu-blt.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
	margin: 0px;
	padding: 4px 4px 4px 25px; /* Padding left sets position of text from left */
}

#navpanel ul a {
	display: block;
	color: #000000;
	font-size: 12px;
	line-height: 16px; /* Sets the hieght of the menu option box */
	text-decoration: none;
	background-image: url(/images/design/menu-blt.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
	margin: 0px;
	padding: 4px 4px 4px 25px; /* Padding left sets position of text from left */
}

#navpanel ul a:active {
	display: block;
	color: #D4D011;
	font-size: 12px;
	background-image: url(/images/design/menu-blt-hvr.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
}

#navpanel ul a:hover {
	display: block;
	color: #D4D011;
	font-size: 12px;
	background-image: url(/images/design/menu-blt-hvr.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
}

#navpanel ul li {
	background-color: #CCFFFF;
	margin: 0px 0px 1px 0px; /* Add space below each top level menu option */
	border: 1px solid #FFFFFF;
	padding: 0px;
}

#navpanel ul ul li {margin: 0px;} /* Remove space below each pop-out menu option or curser looses focus when hovering over gap */

/* Set sub-menu display properties default */
#navpanel ul ul a:visited {
	display: block;
	color: #FFFFFF;
	font-weight: bold;
    background-color: #93837A;
	background-image: none;
	margin: 0px;
	border: 1px solid #CCFFFF;
	padding: 4px;
}
	
#navpanel ul ul a {
	display: block;
	color: #FFFFFF;
	font-weight: bold;
    background-color: #93837A;
	background-image: none;
	margin: 0px;
	border: 1px solid #CCFFFF;
	padding: 4px;
}
	
/* Set menu level 2 font colour */
#navpanel ul ul a:active {
	color: #CCFFFF;
	background-color: #FFFFFF;
	background-image: none;
}

#navpanel ul ul a:hover {
	color: #CCFFFF;
	background-color: #FFFFFF;
	background-image: none;
}

/* Set sub-menu 2 font colour default */
#navpanel ul ul ul a:visited {
	font-weight: bold;
	color: #CCFFFF;
	background-color: #D4D011;
	border: 1px solid #CCFFFF;
}

#navpanel ul ul ul a {
	font-weight: bold;
	color: #CCFFFF;
	background-color: #D4D011;
	border: 1px solid #CCFFFF;
}

/* Set sub-menu 2 font colour on hover */
#navpanel ul ul ul a:active {
	background-color: #FFFFFF;
	background-image: none;
}

#navpanel ul ul ul a:hover {
	background-color: #FFFFFF;
	background-image: none;
}

/* Address in LH menu */
#address {
	width: 178px;
	color: #000000;
	font-size: 13px;
	line-height: 15px;
	margin: 5px 0px 0px 0px;
	border: 0px;
	padding: 0px;
	height: auto;
	top: 500px;
}

#address .cj {
	font-size: 14px;
	font-weight: bold;
}

#address .ro {font-size: 14px;}

#address .tel {
	font-size: 16px;
	font-weight: bold;
}

/* CSS to replace tables - used for web enquiry forms */

/* The div with class tbl-out centres correctly in standards compliant browsers (as left and right margin set to auto). IE doesn't recognise auto. Div (centrefix) fixes this as IE incorrectly centres an element with text-align:center; */
.centrefix {text-align: center;} 

/* Width and margin set on a containing table wrapper (tbl-out) and not inner table div (tbl-in) to fix the IE width bug */
.tbl-out {
	width: 460px; 
	margin: 0px auto;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #D4D011;
	padding: 5px;
	background-color: #EFED86;
}

div.row {
  clear: both;
  margin: 0px;
  border: 0px;
  padding: 0px;
}
/* Standards compliant browsers don't add their own spacing so need top padding */
html>body div.row {padding: 2px 0px 0px 0px;}

div.third-space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}

div.half-space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}

div.third-space {height: 4px; line-height: 4px;}

div.row label {
  float: left;
  width: 175px;
  text-align: right;
}

/* Attempt to get phone and e-mail radios on the same line - fix this later
label.inline {display: inline;}
input.inline {display: inline;}
*/

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 245px;
  text-align: left;
  margin-right: 2px;	/* Required to stop right side touching the fieldset border in IE */
}


/* Left align labels in the field area - used for labels that contain check boxes */
span.fld label {text-align: left;}

/* Classes to define 2 field columns (left and right) */
div.row span.fld-coll {
  float: left;
  width: 170px;
  text-align: left;
}
div.row span.fld-colr {
  float: right;
  width: 190px;
  text-align: left;
}

div.row span.fld-full-width {
  float: left;
  width: 424px;
  text-align: left;
  margin: 0px;
}

/* The spacer is user to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer {
  clear: both;
}

/* Class full (full width) ensures fields fill their containing element */
.full {width: 100%;}

.bld {font-weight: bold;}  /* Set bold text in selects */

fieldset {
	border:1px solid #D4D011;
	padding: 0px 8px 10px 5px;	/* Can't add padding to top as IE incorrectly puts this outside the fieldset so have added a bottom margin on the legend */
}

legend {
	border:1px solid #D4D011;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #CCFFFF;
	background-color: #EFED86;
}

form {border: 0px; margin: 0px; padding: 0px;}	/* Stops IE adding space around a form */

/* Style for the input boxes */
textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #222222;
	margin: 0px; padding: 0px;
}

select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #222222;
	margin: 0px; padding: 0px;
}

input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #222222;
	margin: 0px; padding: 0px;
}

/* Buttons */
input.btn {
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	width: 120px;
}

/* Hide 'Site Map' and 'Thank you' page from Site Map */
#map17 {display: none;}

#map16 {display: none;}

#map13 {display: none;}

/* Hide off menu pages from LH menu */
#navpanel #map28 {display: none;}

/* Styles for the navbar on the left side. */

#navigation {
	font-weight: bold;
	height: 500px;
	left: 0;
	padding-right: 0px;
	padding-top: 0px;
	position: absolute;
	top: 135px;
	width: 178px;
	background: url(images/left_green_panel_178.jpg);
	background-position: left;
	margin: 5px;
	background-repeat: repeat-y;
}

#navigation a {
	border-right: 3px dotted #0000FF;
	color: #0000FF;
	padding-right: 5px;
}

#navigation a:hover {
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

#navigation ul {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 30px;
	list-style-type: none;
	margin-bottom: 4px;
	padding-right: 5px;
	text-align: right;
	white-space: nowrap;
}

.nogap {
	line-height: 14px;
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Styles for the pullquote on the right side. */
#right-column {
	background-color: #F6F6F6;
	border-bottom: 1px solid #0000FF;
	border-left: 1px solid #0000FF;
	border-right: 1px solid #0000FF;
	border-top: 1px solid #0000FF;
	font-size: 14px;
	margin: 20px 20px 5px 0px;
	padding-left: 0px;
	padding-right: 5px;
	padding-top: 10px;
	position: absolute;
	right: 0px;
	top: 135px;
	width: 175px;
}

#right-column h3{
	color: #655048;
	font-size: 12px;
	font-weight: bold;
}

#right-column p {
	color: #655048;
	font-size: 11px;
	font-style: italic;
	font-style: italic;
	line-height: normal;
	text-align: left;
}

#right-column strong {
	color: #655048;
	font-style: normal;
}

/* when name of page and name of navigation element are the same
the page will display a highlight in the navigation bar */
body#rheumatoidarthritis a#navrheumatoidarthritis
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#pregnancy a#navpregnancy
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#osteoporosis a#navosteoporosis
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#osteoarthritis a#navosteoarthritis
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#links a#navlinks body#headaches a#navheadaches
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#exercises a#navexercises
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#advice a#navadvice
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#practitioners a#navpractitioners
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#cranial a#navcranial
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#needling a#navneedling
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#kinesiology a#navkinesiology
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#nutrition a#navnutrition
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#orthotics a#navorthotics
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#bowen a#navbowen
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#aromatherapy a#navaromatherapy
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#reflexology a#navreflexology
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#indian a#navindian
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#massage a#navmassage
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#homeopathy a#navhomeopathy
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#chiropody a#navchiropody
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#sportsinjuries a#navsportsinjuries
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#osteopathy a#navosteopathy
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#aboutus a#navaboutus
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#contactus a#navcontactus
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#index a#navindex
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}

body#links a#navlinks
{
	border-right: 3px #FDAC00 dotted;
	color: #FDAC00;
}


a:visited {
	color: #C88700;
	font-weight: bold;
	text-decoration: none;
}

a:link {
	color: #C88700;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #D14013;
	font-weight: bold;
	text-decoration: none;
}

#leftcol {
	font-weight: bold;
	left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	position: relative;
	top: 165px;
	width: 178px;
	background: url(images/left_green_panel_178.jpg);
	background-position: left;
	margin: 0px;
	background-repeat: repeat-y;
	height: 100%;
	bottom: 100px;
}

#main-title {
	margin-left: 180px;
	margin-right: 0;
	color: #655048;
	font-size: 2.4em;
	font-style: normal;
	font-weight: bold;
	line-height: 1;
	height: 80px;
	letter-spacing: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 40px;
	text-align: left;
	width:600px;
}

#Prac-Table {
	border: none;
	outline: None;
}
#Prac-Table h1 {
	color: #515151;
	font-size: 1.2em;
	font-style: normal;
	font-weight: bold;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 9px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 10px;
}

#Prac-Table h2 {
	color: #515151;
	font-size: .9em;
	font-style: normal;
	font-weight: bold;
	font-weight: bold;
	margin: 0;
	padding-bottom: 5px;
	padding-left: 0;
	padding-top: 5px;
}

.Advice-Buttons a img {
	border: none;
}

.Advice-Buttons table {
	margin-left:45px
}