/* IAIM CSS */

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-size: 14px;
	line-height: 16px;
	font-weight: normal;
	margin: 0; border: 0; padding: 0;
	background: 0 0 repeat-y url(../images-design/baby-massage-body-bg.jpg) #FFFFFF;
}

/* Reset browsers default margin, padding and font sizes */
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears in non-IE browsers */
	height: 100%; margin-bottom: 1px;
}

#wpr { /* Site wrapper */
	position: relative;
	width: 100%;
	padding: 0 0 3px 0; /* Padding-bottom is space below footer */
}

#content {
	position: relative;
	height: 570px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 10px 0; /* margin at bottom is distance between end of content and footer */
	padding: 157px 0 0 195px; /* padding top set rather than margin-top for Firefox */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto;
  min-height: 570px;
}

#hd { /* Header */
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 135px;
	background: 0 0 repeat-x url(../images-design/hd-bg.gif) #663398;
}

img#hdlogo, img#hdtl {
	position: absolute;
	top: 0;	
}
img#hdlogo {right: 0;}
img#hdtl {left: 0;}

/* Add right padding and a bit of space between points in lists within the content area */
div#content ol, div#content ul {margin: 0; border: 0; padding: 0 10px 5px 30px;}
div#content li {
	margin-bottom: 0.5em;
	font-size: 16px; /* Set font size and color same as for p */
	line-height: 19px;
}

/* Space before each sub-list for the web site map or other nested lists */
#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #663398;
	font-weight: bold;
	margin: 10px 10px 10px 0;
	border: 0;
	background-color: transparent;
}

h1, .h1 {
	font-size: 25px;
	line-height: 27px;
	margin-top: 0; /* Margin top not recognised by IE in this context so set top spacing with content padding-top */
}

h2, .h2 {
	font-size: 20px;
	line-height: 22px;
	background-color: #D6FFFF;
	border: 1px solid #74CACF;
	padding: 6px 5px;
}

h3, .h3 {
	font-size: 18px;
	line-height: 20px;
}

p {
	text-align: left;
	font-size: 16px; 
	line-height: 19px;
	margin: 0; /* No margin-bottom on p or will extend below div#content */
	border: 0;
	padding: 0 10px 10px 0;
	color: #333333;
}

table {
	padding: 0 10px 10px 0; /* Same as p */
	font-size: 16px; color: #333333; /* Same as p */
}

hr {
	color: #663399;
	background-color: #663399;
	height: 1px;
	margin: 10px 10px 10px 0;
}

/* Image styles - also applied to object for flash */
img.right, object.right, img.right-no-border, object.right-no-border {
	margin: 5px 0 5px 10px;
	float: right;
	border: 1px solid #000000;
	padding: 0;
}

img.left, object.left, img.left-no-border, object.left-no-border {
	margin: 5px 16px 5px 0; /* Margin right must be large enough to keep li bullets off image and narrow enough to allow 2 images at same level on page */
	float: left;
	border: 1px solid #000000;
	padding: 0;
}
img.left-no-border, img.right-no-border, object.left-no-border, object.right-no-border {border: 0;}

img.extra-space-right {margin-right: 30px;} /* Extra right margin to push li bullets further from img edge */

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

.not-bold {font-weight: normal;}

/* Basic links */
a {
	color: #028B95;
	/*font-weight: bold;*/
	text-decoration: underline;
}
a:hover {color: #663398;}

a.txt, a.txt:hover { /* Normal text credit link */
	color: #333333;
	text-decoration: none;
    font-weight: normal;
}

a img {border: 0;} /* Remove border from image links */

dfn, span.tip {	/* Indicates a term has a pop-up tip */
	color: #663398;
	font-style: normal; /* Remove default dfn italic */
}
dfn:hover, span.tip:hover {cursor: help;}

.hbox { /* Highlighted box - apply to p or div */
	background-color: #F7DFFF;
	text-align: left;
	font-size: 16px; 
	line-height: 19px;
	margin: 0 10px 10px 0; /* No margin-bottom on p or will extend below div#content */
	border: 1px solid #C26FDF;
	padding: 10px 10px 10px 10px;
	color: #3D0A4F;
}
.box a {color: #663398;}
.box a:hover {color: #028B95;}

/* Menu (navigation) panel */

div#nav {/* Menu (navigation) panel */
	position: absolute;
	top: 104px;
	left: 195px;
	height: 23px; /* Matches div#nav a line-height. IE will re-size this if more menu options are added */
	width: 800px; /* This will need to be increased if more menu options are added */
	background-color: #028B95; /* Required only in case an extra top-level link is added which spills over to a second line */
}
/* Standards compliant browsers recognise this height setting
This will allow new top-level menu options to be displayed if added without updating style sheet to increase width of #nav */
html>body div#nav {
  height: auto; 
  min-height: 23px;
}

div#nav ul {margin: 0; border: 0; padding: 0;}

div#nav ul li {
	list-style: none;
	margin: 0; border: 0; padding: 0;
	width: 80px;  /* Min top level menu width - in case new meu items added without updating style sheet */
	float: left; /* Lines up the top level menu options from left to right */
}
div#nav ul li li {
	width: 200px; /* Required to set width of secondary menu levels in IE */
	border-bottom: 1px solid #9FFFFF;
}

/* Width of top-level individual menu nodes reset here     */
div#nav ul li#mn1 {width: 45px;}  /* Home.  Note: the full 'div#nav ul li#mn1' rather than just '#mn1' is required by IE */
div#nav ul li#mn3 {width: 117px;} /* Instructor training   */
div#nav ul li#mn2 {width: 100px;} /* Infant massage        */
div#nav ul li#mn5 {width: 125px;} /* National Conference   */
div#nav ul li#mn37 {width: 55px;} /* Join us!              */
div#nav ul li#mn4 {width: 128px;} /* Members resources     */
div#nav ul li#mn6 {width: 97px;}  /* News & Events     */
div#nav ul li#mn7 {width: 62px;}  /* About us              */
div#nav ul li#mn8 {width: 70px;}  /* Contact Us            */

/* Background colour to drop-down options */
div#nav ul ul li {
	background-color: #D6FFFF;
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but is breaks the pop-out functionality! For IE, 0 to 100 */
	opacity: 0.95;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.95;         /* for Mozilla, 0 to 1 */
} 
/* Remove opacity on hover 
div#nav ul ul li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
*/

div#nav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 23px;
	font-weight: bold;
	text-align: center;
	display: block;
	margin: 0;
	border: 0;
	border-left: 1px solid #00797F;
	padding: 0;
	color: #FFFFFF;
	text-decoration: none;
}
/* Remove left border from first in list */
div#nav ul li#mn1 a {border: 0;}
div#nav ul li a:hover {color: #D6FFFF;}

div#nav ul li li a {
	color: #028B95;
	border: 0; /* Remove border from sub-options - replaced for div#nav ul ul */
}
div#nav ul li li a:hover {color: #FFFFFF; background-color: #028B95;}
div#nav ul ul {border: 1px solid #C2EFEF;} /* Border around pop-out menus */

/* Position pop-out menus */
div#nav li {position: relative;}

div#nav ul ul {
	position: absolute;
	z-index: 500;
}

div#nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Show/Hide on hover */
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}


div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{display: block;}

/* Footer */
div#ft {
	position: relative;
	width: 100%
	height: 35px;
	background-color: #FFFFFF;
	padding: 0 0 0 195px;
}

/* Privacy, Terms, etc, see below for styling of #ft links */
#ftl, #ftr {
	margin: 3px 0 0 0; padding: 0 10px;
	font-size: 10px;
	line-height: 13px;
	color: #000000;
}
#ftl {float: left; text-align: left; margin-left: 0; padding-left: 0;}
#ftr {float: right; text-align: right;}

/* Footer links */
#ft a {color: #000000; font-weight: normal;}
#ft a:hover {color: #076010;}

#ft a.txt, #ft2 a.txt:hover { /* Normal text credit link */
	color: #000000;
	text-decoration: none;
    font-weight: normal;
}

/* 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; /* IE centre fix */
	margin: 25px 0; /* Space top and bottom */
} 

/* 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: 600px; 
	margin: 0 auto;
	text-align: left;
	background: 0 0 url(../images-design/webform-bg.jpg) repeat-y #C58DE8;
}

.tbl-in {
	border: 1px solid #C2EFEF;
	padding: 5px;
}

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

div.space, div.half-space, div.third-space {
  clear: both;
  height: 12px;
  line-height: 12px;
}
div.half-space {height: 6px; line-height: 6px;}
div.third-space {height: 4px; line-height: 4px;}

div.row label {
  float: left;
  width: 210px;
  text-align: right;
  color: #201130;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 350px;
  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: 572px;
  text-align: left;
  margin: 0;
}

/* 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 #9657AF;
	padding: 0 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 #9657AF;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #381D54;
}

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

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

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

/* News/Event items */
p.news-event-info {
	/* Currently left unstlyed, .h3 applied instead */
}

p.news-event-info span.label {
  float: left;
  width: 80px;
  text-align: left;
  margin-right: 10px;
  padding: 0;
}

div.news-event-info-spacer {clear: both; height: 18px;}

/* Remove bold font weight - used for dates within headings for the dynamically generated list of news items */
/*.nobold {font-weight: normal;} - already defined */
h3.news-event a {
	color: #663398;
	font-weight: bold;
	 text-decoration: none;
}
h3.news-event a:hover {color: #028B95;}

h3.news-event .nobold {
	font-weight: normal;
	font-size: 12px; /* Smaller than h3 */
}
p.news-event-hidden {
	color: red;
	font-weight: bold;
}

/* Quick links box wrapper - for graphical link boxes within content area */
/*
div.qlbox-wpr { 
	position: relative;
	margin: 10px 0 0 0;
	width: 438px;
	height: 343px;
	background: 0 0 url(../images-design/infant-massage-home.jpg) no-repeat;
}
*/
div.qlbox-wpr {
	position: relative;
	margin: 10px 0 0 0;
	width: 438px;
	height: 342px;
	background: 0 0 url(../images-design/infant-massage-home.jpg) no-repeat;
}
div.qlbox {
	position: relative;
	float: left;
	width: 146px;
	height: 342px;
}
div.qlbox-train {background: 0 0 url(../images-design/qlbox-train-bg.jpg) no-repeat;}
div.qlbox-resources {background: 0 0 url(../images-design/qlbox-resources-bg.jpg) no-repeat;}
div.qlbox-learn {background: 0 0 url(../images-design/qlbox-learn-bg.jpg) no-repeat;}

div.qlbox h3 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 114px 2px 12px 11px;
	border: 0; padding: 0;
	background-color: transparent;
}
div.qlbox h3, div.qlbox h3 a {
	color: #FFFFFF;
	font-size: 17px;
	line-height: 17px;
	font-weight: bold;
	text-decoration: none;
}
div.qlbox h3 a:hover {text-decoration: underline;}

div.qlbox p {
	text-align: left;
	font-size: 12px; 
	line-height: 13px;
	margin: 0;
	border: 0;
	padding: 0 12px 8px 11px;
	color: #333333;
}
div.qlbox p a {
	color: #028B95;
	font-weight: bold;
	text-decoration: underline;
}
div.qlbox p a:hover {color: #663398;}

div.qlbox p.more { /* More link */
	position: absolute;
	top: 306px;
	left: 0;
}

/* Text pointing to PayPal subscription buttons */
div.subscription-txt {
	float: left;
	margin: 2px 10px 0 0;
	font-size: 16px; line-height: 19px;
	font-weight: bold;
	color: #351A4D;
}

/* IAIM members resources page styles */
.picturetitle {color: #000000; font: 10px verdana, arial, sans-serif; font-weight: bold;}
.price {color: #7079f4; font: 15px verdana, arial, sans-serif; font-weight: bold;}
.picturecomments {color: #666666; font: 10px geneva, verdana, arial, sans-serif;}