body {
	background: #fff url('../images/body-bg.png') repeat-x;
    text-align: center;
    margin: 0;
    padding-bottom: 25px;
    padding-top: 0px;
}

.outofsight {
    display: none;
}

#frame {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    text-align: left;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

/*********************************************************************/
/* FORMS                                                             */
/*********************************************************************/

form {
    margin: 0;
    padding: 0;
}

input.field {
    margin: 0 2px;
    padding: 0;
    border: 1px solid #005a8c;
    height: 16px;
}

input.error {
    border: 1px solid #005a8c;
    background-color: yellow;
}

div#errors {
   border: 2px dotted red;
   padding: 0.6em;
   margin-bottom: 1em;
}

div.alternate {
    width: 325px;
    border: 1px solid #498B9B;
    border-width: 1px 1px 1px 1em;
    background-color: #D7E6E9;
    margin: 4px 2px 2px 4px;
    padding: 4px 4px;
}

div.alternate div.checkbox {
    display: block;
    text-indent: -18px;
    margin: 0px 0px 0px 22px;
    padding: 0px 0px 4px 0px;
}
 
div.alternate label {
    padding: 0px;
    margin: 0px;
}

div.alternate input.check {
    padding: 0px;
    margin: 0px;
    width: 14px;
    height: 14px;
    border-width: 0px;
}

/*********************************************************************/
/* PAGE LAYOUTS                                                      */
/*********************************************************************/

#frame.content-center {
    background: transparent;
}

#frame.content-center div.content {
    width: 1000px;
    background: transparent;
}

#frame.popup div.content {
    width: 500px;
    background: transparent;
}

#frame.content-left {
    background: #fff;
}

#frame.content-left div.content {
    width: 700px;

}

#frame.content-right {
    background: #fff;
}

#frame.content-right div.content {
    width: 700px;
}

#frame.content-full {
    background: transparent;
	width: 1000px;

}

#frame.content-full div.content {
    width: 100%;
}

div#frame.popup div.container {
	padding-right: 10px;
}

.content, .sidebar,  .homepage-box {
    float: left;
    padding: 0;
    margin: 0;
    border: none;
}

.content div.container {
    padding: 12px 0 48px 10px;
}

#frame.content-left div.content div.container {
    padding: 12px 48px 10px 12px;
}

#frame.content-right div.content div.container {
    padding: 12px 12px 48px 24px;
}

#frame.content-center div.content div.container {
    padding: 12px 15px 18px 15px;
}

#frame.content-full div.content div.container {
    padding: 12px 8px;
}

.content h1 {
    margin-bottom: 0.5em;
    clear: both;
}

.content h2 {
    clear: both;
}

.content h2.no-border {
    border-top: none;
    padding-top: 0.5em;
}

.content h3 {
    clear: both;
    margin-bottom: 0.5em;
}

.content p {
    margin: 0.3em 0 1.5em 0;
}

div.inset.right {
    float: right;
    clear: right;
    margin: 0 0 2em 1em;
}

div.inset.left {
    float: left;
    clear: left;
    margin: 0 1em 2em 0;
}

div.inset.fixed {
    width: 162px;
}

div.inset p {
    margin-bottom: 0;
}

div.inset div.image {
    background-color: white;
    border: 1px solid #CF7600;
    text-align: center;
    padding: 0;
}

div.inset div.image p {
    text-align: right;
    margin: 0.25em 0 0 0;
    text-transform: uppercase;
    padding: 0.25em 0.5em;
    background-color: #f2e3bc;
}

div.inset div.image img {
    border: none;
}

div.inset div.image a:hover {
    border: none;
}


/* For the staff list */
div.float-list {
    clear: left;
    margin-left: 30px;
}

div.float-list h3 {
    clear: none;
}

img.inline {
    float: left;
    margin: 0 12px 12px 0;
}

/*********************************************************************/
/* SIDEBARS                                                          */
/*********************************************************************/

div.sidebar {
    width: 300px; 
	background: transparent;
}

div.sidebar div.container {
    padding: 8px 12px 14px 8px;
	background: transparent;
	width: 290px;
}

div.sidebar div.update {
	background: transparent;
	width: 290px;
}

div.sidebar div.container.level1 {
	background: transparent;
	width: 290px;
}

div.sidebar div.container.level2 {
	background: transparent;
	width: 290px;
}

div.sidebar h1 {
	background: #fff url('../images/homepage-box-header.png') repeat-x;
	width: 284px;
    margin: 0;
    padding: 10px 8px 2px 8px;
}

div.sidebar h1.level1 {
	background: #fff url('../images/homepage-box-header.png') repeat-x;
	width: 284px;
}

div.sidebar h1.level2 {
	background: #fff url('../images/homepage-box-header.png') repeat-x;
	width: 284px;
}

div.sidebar h1, .sidebar h1.update {
	background: #fff url('../images/update-box-header.png') repeat-x;
	height: 30px;
	width: 284px;
	border-left: none;
}

.sidebar h1.update {
  color: #fff;
}

div.sidebar p {
    margin: 0 0 1.5em 0;
}

ul {
    list-style-image: url('../images/bullet.png');
    margin: 0.5em 0.5em 0 1.5em;
    padding: 0;
}

div.sidebar div.container li, .content li {
    margin: 0;
    padding: 0 0 0.5em 0;
}

div.sidebar form {
    margin-top: 0.5em;
}

div.sidebar select {
    width: 120px;
}

div.sidebar input.field {
    float: left;
    width: 120px;
}

/*********************************************************************/
/* UPDATE BOX                                                          */
/*********************************************************************/

div.update h1 {
	background: #fff url('../images/update-box-header.png') repeat-x;
	height: 30px;
	width: 323px;
	border-left: none;
}

/*********************************************************************/
/* BREADCRUMBS                                                       */
/*********************************************************************/

div.breadcrumbs {
    background: #125687;
	border-bottom: solid 2px #a2ad00;
    clear: both;
    margin: 0;
    height: 2.1em;
    padding: 5px 10px 0 10px;
}

div.breadcrumbs.big {
    padding: 5px 10px;
    height: auto;
}

div.breadcrumbs.big p {
    margin: 0 0 0.5em 0;
}

div.breadcrumbs.big h1 {
    margin: 0 0 0.1em 0;
}

div.breadcrumbs img {
    float: left;
    margin: 0 10px 0 0;
}

div.breadcrumbs.big form {
    margin-top: 1.7em;
}

div.breadcrumbs form {
	float: right;
}

div.breadcrumbs select {
    margin: 0;
    border: none;
    font-size: 120%;
}

/*********************************************************************/
/* HEADER                                                            */
/*********************************************************************/

#header {
	background: transparent url('../images/header-bg.png');
	height: 150px;
	width: 1000px;
    position: relative;
}

#header div#tools {
  float: right;
  text-align: right;
  width: 280px;
  height: 25px;
  padding: 6px 6px 0px 0px;
}

#header input.field {
  width: 150px;
}

#header input {
  float: right;
  margin: 2px;
}

#header div#logo {
  float: left;
}

#header div#logo img {
  border: none;
  height: 150px;
  width: 300px;
}

#header div#tagline {
  float: right;
  padding: 6px 6px 0px 0px;
}

#header div#tagline img {
  border: none;
  height: 50px;
  width: 375px;
}


/*********************************************************************/
/* FOOTERS                                                           */
/*********************************************************************/

#footer {
    clear: both;
    background: #aa9d71;
    border-top: 2px solid #fff;
    margin: 0;
    height: 4.5em;
    padding: 2px 12px;
    text-align: center;
}

#footer p {
    margin: 0;
}

#subfooter {
    clear: both;
    background: #0082c0;
    color: #fff;
    margin: 0;
    height: 1.5em;
    padding: 2px 12px;
    text-align: center;
}

#subfooter a {
    color: #fff;
}

#subfooter p {
    margin: 0;
    padding: 0;
}

/*********************************************************************/
/* MISCELLANEOUS                                                     */
/*********************************************************************/

.separator {
    padding: 0 0.5em;
}

.clearing {
    clear: both;
}

p.topborder {
    border-top: 1px solid #001ca8;
    padding-top: 5px;
	padding-bottom: 10px;
}

.indented {
	padding-left: 20px;
}

.rightcol {
	float: left;
	width: 250px;
}

/*********************************************************************/
/* TOC FOR INDEX PAGES                                               */
/*********************************************************************/

ul.toc-buttons {
    margin-left: 0 !important;
    padding: 0;
    font-size: 88%;
}

ul.toc-buttons li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
    text-transform: uppercase;
}

ul.toc-buttons li a {
    padding: 2px 4px;
    border: 1px solid #e68f1a;
    background-color: #f2e3bc;
}

ul.toc-buttons li a:hover {
    background-color: #e68f1a;
    color: white;
}

ul.toc-buttons li.current a {
    background-color: #1c3f95;
    color: white;
}

/*********************************************************************/
/* CLICKABLE MAPS                                                    */
/*********************************************************************/

div.clickable-map {
    background: transparent url('http://production.nccp.org/images/states.png') no-repeat;
    height:368px;
    width:500px;
    position: relative;
    z-index: 1;
}

div.clickable-map a.state-link {
    position: absolute;
    font-size: 88%;
    top: 0;
    left: 0;
    width: 24px;
    height: 16px;
    margin-top: -6px;
    margin-left: -10px;
    text-align: center;
    line-height: 16px;
    background-color: #d5d0c2;
}
div.clickable-map a:hover.state-link {
    text-decoration: none;
    background-color: #b2cfc3;
    color: white;
}

div.notes {
    width: 545px;
}

/*********************************************************************/
/* SPECIAL FOR PROFILES                                              */
/*********************************************************************/

.ec-leftcol, .profile-leftcol {
	float:left;
	margin-right:4px;
}

.ec-rightcol, .profile-rightcol {
	float:right;
}

.ec-clearnone, .profile-clearnone {
	clear: none;
}

#featured-product	{
	float: left;
    background: transparent url('../images/bg_featuredtool.jpg') no-repeat;
	width: 330px;
	height: 429px;
	font: 16px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: bold;
}


#EntryLoginBlock	{
	float: left;
    background-color: #e2dfaf;
	width: 300px;
	height: 429px;
	font: 16px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: bold;
	padding: 20px;
	border: 8px groove #8784a4;
	margin-right: 20px;
}

.access_btn	{
	margin-top: 10px;	
}

#featured-title	{
	padding: 20px 0 20px 20px;
}

#right-side	{
	padding: 0 0 20px 0px;
	margin-left: 350px;
	font: 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#full-size	{
	padding: 10px 20px 20px 20px;
	font: 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.home-title	{
	font: 22px/27px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #002d61;
	font-weight: bold;
}

#home_center_area	{
	clear: both;
	margin-top: 20px;
	padding-top: 20px;
}

#clearbox	{
	clear: both;
}

.home_bottom_block	{
    background: transparent url('../images/bg_box.gif') no-repeat;
}
.box_stay_informed	{
    background: transparent url('../images/bg_box_stay_informed.gif') no-repeat;
	padding: 30px 10px 10px 20px;
}
.box_log_in	{
    background: transparent url('../images/bg_box_log_in.gif') no-repeat;
	padding: 30px 10px 10px 20px;
}
.box_useful_tools	{
    background: transparent url('../images/bg_box_useful_tools.gif') no-repeat;
	padding: 30px 10px 10px 20px;
}
.box_useful_tools_big	{
    background: transparent url('../images/bg_box_log_in_big.gif') no-repeat;
	padding: 30px 10px 10px 20px;
}
.box_useful_tools_big	{
    background: transparent url('../images/bg_box_full.gif') no-repeat;
	padding: 10px 10px 10px 20px;
}

#nav_bar	{
	background-color: #0082c0;
	float: left;
	width: 1000px;
	height: 40px;
}

#toolMainCallOut	{
	background: #fff;
	border:15px groove #0096db;
	margin: 20px auto;
	padding:30px;
	width: 600px;
}

#smallBox	{
	background: #fff;
	border:10px groove #125687;
	margin: 5px;
	padding:10px;
}

#progressBox	{
	color: #8d9437;
	font-weight: bold;
	padding: 0px 10px 10px 20px;
}

#progressBox #selectedBox	{
	color: #fff;
	background: #125687;
	border: 1px solid #8e9300;
	padding: 5px;
	margin-right: 2px;
	float: left;
}

#progressBox #unselectedBox	{
	color: #8e9300;
	background: #e1deae;
	border: 1px solid #8e9300;
	padding: 5px;
	margin-right: 2px;
	float: left;
}

.graph { 
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
    }
.graph .bar { 
	display: block;
	position: relative;
	background: #B1D632; 
	text-align: center; 
	color: #333; 
	height: 15px; 
	line-height: 15px;
}
.graph .bar span { position: absolute; left: 20px; }

#organizedResults	{
	border: 1px solid #000;
	padding: 5px 5px 20px 5px;
	width:710px;
}
#dhtmltooltip{
	position: absolute;
	width: 150px;
	border: 2px solid black;
	padding: 2px;
	background-color: light#e7e3d6;
	visibility: hidden;
	z-index: 100;
	/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
	filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.fade :hover{opacity:0.8;}

.instructions{float:right;}
.instructions a:hover{border-bottom:2px solid #555;}
.instructions ul{width:300px;height:100px;}
.instructions ul li{display:block;float:left;width:50px;padding:0 5px;}
.print{float:left;}
.hidden{display:none;float:left;height:auto;float:left;width:300px;}