/* Reset styles to normalize */
@import url(../css/normalize.css);


/*******************************************************************************
  Base styles
 ******************************************************************************/

html { font-size: 100%; }
body { margin: 0; padding: 10px 0 0 0; text-align: center; font: 62.5% "Verdana", sans-serif; background: #9e1f63 url(../images/body.png) repeat-x; }
h1 { margin-bottom: 5px;}
h2 { font-size: 1.6em; color: #9e1f63; margin-top: 0; letter-spacing: 1px; font-family: Myriad, 'Trebuchet MS', Verdana, sans-serif; padding-bottom: 5px; }
h2.ad { text-transform: uppercase;
}
h3 { margin-bottom: 5px; font-size: 1.4em; color: #9e1f63; }
h4 { font-size: 1.1em; }
p { margin-bottom: 15px; }
a { color: #9e1f63; text-decoration: none; }
a:hover { color: #b9357c; }
li { margin-left: 20px; }
ul { margin-bottom: 20px;}
/*a:link, a:visited, a:hover { text-decoration: none; }*/
li.heading { list-style: none; margin-left: 0; font-weight: bold;}
a span, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { display: none; }
.alert { color: red; font-weight: bold; }
.clear { clear: both; }
.highlight { background-color: rgb(255, 255, 115); }

/*******************************************************************************
  Common layout elements
 ******************************************************************************/

#outer_container { width: 980px; margin: 0 auto; padding: 0 0 20px 0; background-color: #ffffff; overflow: hidden; }
#inner_container { width: 954px; padding: 20px 0 0 0; margin: 0 auto; text-align: left; }
#top_nav { text-align: right; margin: 0 14px 15px 0; }
#top_nav li { display: inline; border-right: 1px solid #9f1f63; padding: 0 15px 0 10px; margin: 0;}
#top_nav li.last { padding-right: 0; border-right: none; }
#top_nav li a:link, #top_nav li a:visited { color: #9f1f63; }
#top_nav li a:hover { color: #c582a5; }
#top { height: 183px; }
#logo { width: 173px; height: 183px; float: left; position: relative; background: url(../images/logo.png) no-repeat; }
#logo a { display: block; position: absolute; height: 155px; width: 105px; top: 6px; left: 30px; }
#top_right { width: 760px; margin-left: 7px; float: left; }
#nav { height: 36px; margin: 0; padding: 6px 0 0 2px; background: url(../images/nav.png) repeat-x; }
#nav li { width: 143px; height: 25px; float: left; margin: 0 0 0 7px; display: block; background-repeat: no-repeat; position: relative; }

/* The "on" class gets applied via JavaScript, and is for older browsers that don't support hover on elements other than <a>. */
#nav li ul.on, #nav li:hover ul { display: block; }
#nav li.last { margin-right: 0; }
#nav li a:link, #nav li a:visited, #nav li a:active { width: 100%; height: 100%; display: block; }
#nav_about a { background-image: url(../images/nav_about.png); }
#nav_about, #nav_about:hover a, #nav_about a.on, #nav_about a.active { background-image: url(../images/nav_about_on.png); }
#nav_screeners a { background-image: url(../images/nav_screeners.png); }
#nav_screeners, #nav_screeners:hover a, #nav_screeners a.on, #nav_screeners a.active { background-image: url(../images/nav_screeners_on.png); }
#nav_clinicians a { background-image: url(../images/nav_clinicians.png); }
#nav_clinicians, #nav_clinicians:hover a, #nav_clinicians a.on, #nav_clinicians a.active { background-image: url(../images/nav_clinicians_on.png); }
#nav_schools a { background-image: url(../images/nav_schools.png); }
#nav_schools, #nav_schools:hover a, #nav_schools a.on, #nav_schools a.active { background-image: url(../images/nav_schools_on.png); }
#nav_families a { background-image: url(../images/nav_families.png); }
#nav_families, #nav_families:hover a, #nav_families a.on, #nav_families a.active { background-image: url(../images/nav_families_on.png); }
#nav li ul { width: 170px; margin: 0; padding: 11px 0 0 0; position: absolute; display: none; left: -9px; top: 25px; }

/* Prevent dropdown from overrunning ul boundary. */
#nav li.last ul { left: -51px; }
#nav li li { padding: 0; margin: 0; width: 100%; height: auto; }
#nav li li a { background-image: none !important; background-color: #881853; color: #ffffff; width: 100%; height: auto; padding: 7px 5px 7px 27px; border-bottom: 1px solid #a6527e; font-weight: bold; font-size: 0.9em; }
#nav li li a:hover { background-color: #a02164; }
#nav li li.last a { border-bottom: none; }

#main_left a, #nav a, #top_nav a { text-decoration: none; }

#main_image { width: 760px; height: 136px; margin-top: 2px; background: url(../images/banner_about.jpg); }

/* main center area*/
#main { padding-top: 12px; background: url(../images/main_left.png) 0 12px no-repeat; }
#main_left { width: 173px; float: left; padding: 10px 0; text-align: center; }

#main_center { width: 580px; float: left; margin: 1px 0 0 20px; padding-right: 15px; min-height: 440px; }
#main_center h1 { margin-top: 0; margin-bottom: 5px; font-size: 2.2em; }
#main_center p, #main_center ul, #main_center dd, #main_center table { font-size: 1.2em; }
#main_center p, #main_center li { line-height: 1.5em; }
#main_right { float: left; width: 147px; }
#main_right p.callout { font-size: 1.2em; font-weight: bold; line-height: 1.6em; color: #55357c; margin-top: 55px; }

#login_form { width: 135px; margin: 0 auto; padding: 11px; text-align: left; border: 2px solid #d6b7c7; background-color: #ffffff; overflow: hidden; }
#login_form h3 { margin: 0 0 5px 0; font-size: 1.2em; width: 44px; height: 18px; background: url(../images/header_login.png) -4px 0; }
#login_form input.text { width: 130px; margin-bottom: 6px; }
#join_today { color: #9f1f63; font-weight: bold; font-size: 1.1em; float: left; line-height: 20px; }
#join_today:hover { color: #c582a5; }
a#login_submit { width: 46px; height: 21px; display: block; float: right; background: url(../images/button_go.png); }
a#login_submit:hover { width: 46px; height: 21px; display: block; float: right; background-position: 0 21px; }
#left_nav { margin: 5px 0 0 0; padding: 0; }
#left_nav li { width: 172px; height: 30px; padding: 10px 0 8px 0; display: block; text-align: center; background: url(../images/left_nav_button.png) no-repeat; margin: 0; }
#left_nav li:hover, #left_nav li.on, #left_nav li.active { background-position: 0 -50px; }
#left_nav li:hover a, #left_nav li.on a, #left_nav li.active a { color: #ffffff; }
#left_nav li a { width: 132px; height: 18px; margin: 0 auto; padding: 8px 10px 3px 10px; display: block; text-align: left; color: #d0c5dd; font-weight: bold; line-height: 12px; }
#left_nav li.tall a { height: 27px; padding: 2px 20px 0 10px; }
#footer { height: 40px; width: 980px; margin: 0 auto; padding-top: 25px; color: #dca8c4; font-size: 0.9em; background: transparent url(../images/footer.png) 0 0 no-repeat; }
#footer a:link, #footer a:visited, #footer a:hover { color: #dca8c4; font-weight: bold; text-decoration: none; }
#footer a:hover { color: #ffffff; }


/*******************************************************************************
  Box devices
 ******************************************************************************/

.green_box_narrow { width: 431px; background: url(../images/green_box_top.png) no-repeat; }
.green_box_narrow .inner { background: url(../images/green_box_bottom.png) center bottom no-repeat; padding: 25px 18px 21px 25px; }
.green_box_narrow h2 { margin: 0 0 5px 0; color: #603; }
.green_box_narrow ul, .green_box_wide ul { margin: 0; padding: 0; }
.green_box_narrow li, .green_box_wide li { margin:0; list-style-type: none; font-size: .9em !important; padding: 5px 2px 5px 25px; line-height: 1.3em; background: url(../images/green_box_checkmark.gif) 0 3px no-repeat; }
.green_box_narrow a.learn_more { width: 92px; height: 23px; background: url(../images/green_box_learn_more.png); float: right; }
.green_box_narrow a.learn_more:hover { background-position: 0 -23px; }
.green_box_wide { width: 598px; background: url(../images/green_box_wide_top.png) no-repeat; margin-left: -10px;}
.green_box_wide .inner { background: url(../images/green_box_wide_bottom.png) center bottom no-repeat; padding: 25px 18px 21px 25px; }
.green_box_wide h3 { margin: 5px 0; font-size: 1.3em; }
.purple_box { width: 336px; margin-bottom: -3px; background: url(../images/purple_box_top.png); }
.purple_box .inner { background: url(../images/purple_box_bottom.png) center bottom no-repeat; padding: 15px 17px 18px 15px; }
.purple_box .inner .left { width: 85px; height: 96px; float: left; background-repeat: no-repeat; }
.purple_box .inner .right { width: 213px; padding-left: 5px; margin: 0; float: left; }
.purple_box h2 { margin: 5px 0 0 0; font-size: 1.4em;
}
.purple_box p { margin: 0; padding: 3px 3px 3px 0; line-height: 1.6em; }
.purple_box a.learn_more { width: 92px; height: 23px; background: url(../images/purple_box_learn_more.png); float: right; }
.purple_box a.learn_more:hover { background-position: 0 -23px; }


/*******************************************************************************
  Page-specific styles
 ******************************************************************************/

.home #main_center { width: 431px; float: left; margin: 1px 0 0 7px; /*background-color: #eeeeee;*/ ; padding: 0;  }
.home #about_text { padding: 5px 15px; }
.home #about_text h3 { font-size: 1.7em; font-weight: normal; line-height: 1.4em; color: #55357c; margin: 0; }
.home #about_text p { font-size: 1.3em; line-height: 1.6em; margin: 3px 0 5px 0; }
.home #about_read_more { color: #55357c; text-transform: uppercase; font-weight: bold; padding-right: 15px; line-height: 1.5em; background: url(../images/purple_double_arrows.png) right center no-repeat; }
.home #about_read_more:hover { color: #928ba6; }
.home #main_right { float: left; margin-left: 3px; width: 336px; }
.home #clinicians .inner .left { background-image: url(../images/icon_stethoscope.png); }
.home #schools .inner .left { background-image: url(../images/icon_books.png); }
.home #families .inner .left { background-image: url(../images/icon_school.png); background-position: 0 3px; }

/* banner images */
.home #main_image { background-image: url(../images/banner_home.jpg); }
.about #main_image { background-image: url(../images/banner_about.jpg); }
.online #main_image { background-image: url(../images/banner_online.jpg); }
.clinicians #main_image { background-image: url(../images/banner_clinician.jpg); }
.schools #main_image { background-image: url(../images/banner_schools.jpg); }
.family #main_image { background-image: url(../images/banner_family.jpg); }


/* callout table */
table.callout { border-collapse: collapse; }
table.callout th, table.callout td  { vertical-align: top; padding: 5px; border: 1px solid #eee;}
table.callout td.col1 { white-space: nowrap; vertical-align: top; font-weight: bold; }

/* form table */
table.form td { padding: 3px 10px 3px 0; vertical-align: top; }
table.form td.field { line-height: 20px;  }
.required { color: #c30; }
.error { background: #cd1656; color: #fff; padding: 5px;}
.error_highlight input{ border: 2px solid #cd1656; }