/******************************************************************************/
/* font-size:75% - typical font is 16px, this reduces it to 12px for ie6 and below */

body {
font-size: 75%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
color: gray;
}

/* for firefox etc */
html>body {
font-size: 12px; 
} 

h1, h2, h3, h5, h6 {
margin:0;
padding:0;
color:#333;
}

h1 {
font-size: 3em;
}

p.subtitle{
margin-top:0;
padding-top:0;
font-style:italic;
}

h2 {
padding:30px 0 5px 0;
font-size: 2em;
}

h3 {
padding:15px 0 5px 0;
font-size: 1.5em;
}

strong{
color:#333;
}

a {
color: #CD3301;
text-decoration: none;
}

a:hover {
color: red;
border-bottom: 1px solid red;
}

blockquote{
font-style:italic;
margin-left:0;
padding-left:0;
}


/******************************************************************************/

#container {
margin: 10px auto;
width:1002px;
background: #fff url('container_middle.jpg');
background-repeat: repeat-y;
}

#container_top { 
background: #fff url('container_top.jpg');
height: 27px;
}

#container_middle { 
margin:0 10px;
}

#container_bottom { 
background: #fff url('container_bottom.jpg');
height: 29px;
}

/******************************************************************************/

#header
{
width:900px;
height:159px;
margin: 21px auto 10px auto;
background-image:url('header.jpg');
}

/******************************************************************************/

#secondaryContent {
float:left;
width: 290px;
margin-top:30px;
margin-bottom:50px;
}

/******************************************************************************/

#primaryContent {
float:left;
width: 590px;
margin-top:30px;
margin-bottom:50px;
padding-right:20px;
}

#primaryContent ul{
padding:0px 0px 0px 15px;
}

#primaryContent ul li{
padding-bottom:10px;
}

/******************************************************************************/

#footer {
font-style:italic;
clear: both;
padding-top:5px;
text-align: center;
}

#footer a{
color: gray;
}

#footer a:hover {
border-bottom: 1px solid gray;
}

/******************************************************************************/

div#breadcrumbs{
width:900px;
margin: 10px auto 10px auto;
text-align:right;
font-style:italic;
font-size:x-small;
}

/******************************************************************************/

div#nav{
margin-left:40px;
margin-right:40px;
background-color: #EFEFEF;
font-size:1.1em;
}


div#nav ul{
padding-left:20px;
margin-left:0;
list-style-type: none;
}

div#nav ul li{
}


div#nav ul li a {
margin-left:0px
}

div#nav ul li a:hover {
color: black;
text-decoration: none;
border-bottom: none;
}

div#nav .boxtop { 
  background: url(images/ne.gif) no-repeat top right; 
}

div#nav .boxtop div { 
  font-size: 0;
  height: 10px; 
  background: url(images/nw.gif) no-repeat top left; 
}

div#nav .boxbottom { 
  background: url(images/se.gif) no-repeat bottom right; 
}

div#nav .boxbottom div { 
  font-size: 0;
  height: 10px; 
  background: url(images/sw.gif) no-repeat bottom left; 
}

#nav .boxcontent {
  padding: 0px 10px 0px 0px;
}

/******************************************************************************/

div#facebook {
padding:60px 40px;
}


/******************************************************************************/

.clear{
clear: both;
}

/******************************************************************************/

.directory > img{
border: 1px solid gray;
padding: 5px 5px;
margin: 15px 0px 5px 10px;
float:right;
}

.teacher-training > img{
border: 1px solid gray;
padding: 5px 5px;
margin: 15px 0px 5px 10px;
float:right;
}

/* articles *******************************************************************/

.credit{
background-color: #EFEFEF;
margin-top:60px;
font-style:italic;
}

.credit img{
padding: 0 10px 10px 0;
float:left;
}

.credit .boxtop { 
  background: url(images/ne.gif) no-repeat top right; 
}

.credit .boxtop div { 
  font-size: 0;
  height: 10px; 
  background: url(images/nw.gif) no-repeat top left; 
}

.credit .boxbottom { 
  background: url(images/se.gif) no-repeat bottom right; 
}

.credit .boxbottom div { 
  font-size: 0;
  height: 10px; 
  background: url(images/sw.gif) no-repeat bottom left; 
}

.credit .boxcontent {
  padding: 0px 10px 0px 10px;
}


/******************************************************************************/
form { 
  margin: 0;
  padding: 0;
}

form fieldset {
  border: 1px solid gray;
  padding: 10px;
  margin: 0 0 15px 0;
}

form fieldset legend {
  font-size:1.2em;
}

form label { 
  display: block;  /* block float the labels to left column, set a width */
  float: left; 
  width: 100px; 
  padding: 0; 
  margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
  text-align: right; 
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required{font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}