/* -------------------------------------- v1.0 | 20080212 from  http://meyerweb.com/eric/tools/css/reset/ -----------------  */
/* -------------------------------------- css reset values ----------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul { 	list-style: none; }
blockquote, q { 	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '';	content: none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* --------------------------- end of reset --------------------------------------------------------- */

/* ----------------- a simple grid system based on the work of Nicole Sullivan http://wiki.github.com/stubbornella/oocss/ */

.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.line{*zoom:1; border: 0px solid red;}
.unit{float:left;}
.size100{float:none;border:0px solid red;}
.size90{width:90%; border: 0px solid black;}
.size80{width:80%; border: 0px dashed white;}
.size70{width:60%; border: 0px solid black;}
.size60{width:60%; border: 0px solid black;}
.size50{width:50%; border: 0px solid black;}
.size48{width:48%; border: 0px solid black;}
.size40{width:40%; border: 0px solid black;}
.size30{width:30%; border: 0px solid black;}
.size20{width:20%; border: 0px solid black;}
.size15{width:15%; border: 0px solid black;}
.size10{width:10%; border: 0px solid black;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

/* -------------------------------- end grid values -------------------------------------------------------- */

body { 
line-height: 125%;
font-size: 14px; 
font-family: Arial, Helvetica, sans-serif; 
background-color: #F5F3EF;
}

.bottom_10 {margin-bottom: 10px;}
.bottom_25 {margin-bottom: 25px;}
.bottom_50 {margin-bottom: 50px;}

.float_right {position:relative; float: right;}
.font16{font-size: 16px;}
.font24 {font-size: 24px;}

.height_130 {line-height: 130%}
.height_150  {line-height: 150%}
.height_175  {line-height: 175%}

.indent_15{text-indent: 15px;}

.float_left {float: left;}

.left_10 {margin-left: 10px;}
.left_25 {margin-left: 25px;}
.left_50 { margin-left: 50px;}
.left_100 { margin-left: 100px;}

.left_10pc {margin-left: 10%;}
.left_15pc {margin-left: 15%;}
.left_20pc {margin-left: 20%;}
.left_25pc {margin-left: 25%;}

.color_blue {background-color: #65a8da;} /* home page header blue */
.color_green {background-color: #58AE8B;} /* sub page header green */

.noindent { text-indent: 0px;}

.right { margin: 10px 10px 10px 5px; float: right;}
.right_10 {margin-right: 10px;}

.top_25 { margin-top: 25px;}
.top_10 { margin-top: 10px;}
.top_none {margin-top: 0px;}

.width_100 {width: 100%;}
.width_90 {width: 90%;}
.width_75 {width: 75%;}
.width_60 {width: 60%;}

.table img { float: right;}
.logo img{ margin: 5px 0px 0px 5px;} 
.nav { border-top: 1px solid black; width: 960px;}
.nav img { float: right;}

.title  { font-size: 32px; font-weight:normal; margin-top: 40px; margin-bottom: 10px;}


h1 { font-size: 32px;}
h2 { font-size: 20px; text-align: left; margin: 30px 0px 10px 0px;}
h3 { font-size: 18px; text-align: left; margin: 5px 0px 10px 5px; }
h4 { font-size: 16px; text-align: left; margin: 5px 0px 10px 5px; }

/* --------------------------  the Page class wraps around all the content    ------------------------------------ */

.page {
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 50px;
border: 1px solid black;
background-color: #ffffff;  
color: #1A1A1A; /* text color */
width: 960px;
}

/* -----------------------------------  a header class for each page    ----------------------------------------------- */

.header {
border-bottom: 0px solid black;
height: 100px;
width: 960px;
}

/* --------------------------- the css_box class is a generic box that is extended by other classes ----------------------- */
/* ---------------------------- attempting OOCSS or object oriented css  -------------------------------------------------- */ 

.css_box {
border: 0px solid #00008B;	/* color darkblue -- change 0px to 1px to see the box border  */
margin-top: 10px; 
margin-bottom: 10px;
}

.css_box li {
margin: 3px 0px 0px 25px;
}

.css_box p {
margin-bottom: 7px;
margin-top: 7px;
}

/* -------------------- the css_table class is a generic table that will be extended by other classes ---------------------- */
/* --------------------- attempting OOCSS or object oriented css  ---------------------------------------------------------- */ 

.css_table {
border: 1px solid #B0C4DE;	/* lightsteelblue */
margin-top: 25px;
margin-bottom: 25px;
}

.css_table caption {
background: white;
font-size: 18px;
text-align: left;
padding: 10px 8px 10px 8px;
}

.css_table th {
background: #FFF7E6;
font-size:16px;
border: 0px solid #B0C4DE;  /* lightsteelblue */
padding:5px 8px 5px 8px;
}

.css_table tr {
height: 30px;
line-height: 32px;
border: 1px solid #B0C4DE;	/* lightsteelblue */
}

.css_table td {
padding:0px 8px 0px 8px;
border: 1px solid #B0C4DE;	/* lightsteelblue */
}

.nccalogo {
background-image:url(../jpeg/nccaboard.jpg);
display:block;
height:75px;
width:75px;
}


.alert{
  /* background-color: #FFFFCC; */
  background-image: url(../png/alert.png);
  background-position: left top;
  background-repeat:no-repeat;
}

.alert p{
margin: 10px 0px 0px 75px;
font-size: 16px;
border: 0px solid black;
}

.picture {
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
padding: 4px 8px 4px 4px;
font-size: 10px;
color: black;
margin-left: 10px;
margin-right: 10px;
}

.picture img {
background-color: #ffffff;          
border: 2px solid #CCCCCC;
}

.normal_list li {
list-style-type: square;
}

.nested_list li ul li  {
list-style-type: circle;
margin: 5px 0px 5px 25px;
}

/* ------------------------- a footer class for the bottom of each page --------------------------------- */

.footer {
width: 960px;
height: 100px;
border-top: 1px solid white;
background-color: #e8c89d;
}

.footer p {
font-size: 12px;
margin-top: 25px;
margin-left: 10%;
}

/* ---------------------------- column ------------------------------------------------- */

.column {
margin-left: 25px;
margin-right: 10px;
margin-top: 50px;
}

.column p {
martin-top: 5px;
margin-bottom: 10px;
}

.column p:first-letter {
  font-weight: bold;
  font-size: 120%;
  
}


/* the NEW class defines the What's New area */

.new { width: 450px;
margin: 50px 0px 0px 0px;
}
.new p { margin: 5px 5px 5px 5px; }


/* the CORNER class contains an embedded google doc */

.corner {
width: 450px;
background-color: #e8c89d;
border: 1px solid black;
margin: 25px 0px 0px 0px;
text-indent: 0px;
}

.corner h4 { margin: 10px 0px 0px 10px;}

.corner p {
text-indent: 0px;
margin: 5px 50px 5px 5px;
}



/* -------------- menu css below this point ------------------------------------------ */
/* top and bottom are 2 menus placed one on top of the other */


/* --- topmenu --- */

.topmenu {
position: relative;
float: left;
font-size: 14px;
line-height: 16px;
font-weight: 500;
letter-spacing: .6px;
margin: 0px 0px 0px 160px;  /* positions the top menu 160 pixels from the left side of the container border */
width: 700px;               /* makes the width of the menu container 700px */
border: 0px solid red;      /* add a 1px value to see the border for this element */
}

.topmenu ul{
margin: 0;
padding: 0;
float: left;
}

.topmenu ul li {
display: inline;
}

.topmenu ul li a{
float: left;
color: black;
padding: 8px 12px 4px 12px;     /* creates space around the menu item */
border-width: 0px 1px 1px 1px;  /* no value for the 1st spot because the top menu supplies the border */
border-color: black;
border-style: solid;
background-color: #ffffff;  
text-decoration: none;
}

.topmenu ul li a:visited{
color: purple;
}

.topmenu ul li a:hover{
color: black;
background-color: #AAB9EE;
background-color: #65a8da;
}



/*  --- bottom menu  ---  */

.bottommenu {
position: relative;
float: left;
margin: 0px 0px 0px 185px;	/* sets the bottom menu at 185 pixels from the left */
font-size: 14px;
line-height: 16px;
font-weight: 500;
letter-spacing: .6px;
width: 700px;               /* sets the width of the bottom menu container */
border: 0px solid red;      /* to see the bottom menu container, set this value to 1px */
}

.bottommenu ul{
margin: 0;
padding: 0;
float: left;
}

.bottommenu ul li {
display: inline;        /* causes the <li></li> values to line up horizontally */
}

.bottommenu ul li a{
float: left;
color: black;
padding: 8px 12px 4px 12px;     /* sets the spacing around the menu item */
border-width: 0px 1px 1px 1px;  /* zero value in the 1st spot because the top border is supplied by the bottom border of the header */
border-color: black;
border-style: solid;
background-color: #ffffff;  
text-decoration: none;
}

.bottommenu ul li a:visited{
color: purple;
}

.bottommenu ul li a:hover{
color: black;
background-color: #AAB9EE;
background-color: #65a8da;
}

/* --------------------  bannermenu is an advertisemnet just above the footer  ----------------------------------- */

.bannermenu {
margin: 0 auto;
height: 36px;
margin: 25px 0px 0px 0px;  /* positions the top menu 25 pixels from the left side of the container border */
width: 960px;               /* makes the width of the banner 980px */
border: 0px solid red;      /* change to a 1px value to see the border for this class */
font-size: 22px;
}

.bannermenu ul{
margin: 0;
padding: 0;
float: left;
margin: 0px 0px 0px 40px;
}

.bannermenu ul li {
display: inline;
}

.bannermenu ul li a {
float: left;
color: blue;
padding: 0px 45px 0px 45px;     /* creates space around the menu item */
text-decoration: underline;
}

.bannermenu ul li a:visited{
color: purple;
}

.bannermenu ul li a:hover{
color: silver;
}