/* structure */

html {
 background:#177ec3 url(img/blueflame-bg.jpg) repeat-x fixed left bottom;
}
body {
  background:url(img/grey-bg.jpg) repeat-x;
  margin:0; padding:0;
  font:90% "Trebuchet MS", sans-serif;
  border-top:1px solid #666;
}
/* rotating bg images */

body.pic01 { background:url(img/top01.jpg) no-repeat; }
body.pic02 { background:url(img/top02.jpg) no-repeat; }
body.pic03 { background:url(img/top03.jpg) no-repeat; }


#wrapper{
  margin:20px auto;
  width:800px;
  background:#fcfcfc;
  padding:10px 20px;
  border:2px solid #333;
}
#main_area {
  background:#fff;
  text-align:left;
  overflow:hidden;
}
#title h1 {
  font-size:180%;
  font-weight:normal;
  line-height:130%;
  margin:0; padding:0;
}
#title {
  position:relative;
  background:url(img/flash.jpg) no-repeat 3px 6px;
  padding:10px 30px 20px 62px;
}


/* fire rating 
 * not sure the best way to fire this off
 * but figure letting the db or js or summat pick classnames?
 */
#title .fire-rating {
  display:block;
  width:80px; height:64px;
  position:absolute;
  top:1px; right:20px;
  background-repeat:no-repeat;
  background-position:0px 18px;
  font-size:0.9em;
  text-indent:4px;
  }
.fire-rating.low { background:url(img/fr-low.gif); }
.fire-rating.mod { background:url(img/fr-mod.gif); }
.fire-rating.hi  { background:url(img/fr-high.gif); }
.fire-rating.ext { background:url(img/fr-extr.gif); }
.fire-rating span { display:none; }
.fire-rating:hover {
  cursor:help;
}
.fire-rating:hover span {
  display:block;
  background:#fff;
  position:absolute;
  padding:5px 10px;
  border:1px solid;
  width:400px;
  margin:200px 0 0 -400px;
}
#header	{
  background-color:#ccc;
  width:780px; height:200px;
  border:10px solid #ccc;
}
  /* rotating images */
     #header.pic01   { background:url(img/header01.jpg); }
     #header.pic02   { background:url(img/header02.jpg); }
     #header.pic03   { background:url(img/header03.jpg); }

#content_narrow {
  float:left; width:510px;
}

#content{
  padding:20px 10px 0 0;
  line-height:160%;
}

#right_bar {
  float:right;
  width:250px;
  line-height:140%;
  text-align:justify;
}

#right_bar .right_item {
  padding:20px 20px 5px 20px;
  background: #FCE6C9;
  border:1px solid #CD3700;
  font-size:90%;
  margin-bottom:20px;
  color:#5E2612;
}

#right_bar .right_item h1 {
  color:#CD3700;
  margin:0 0 15px 0; padding:0;
  font-size:150%;
  font-weight:normal;
}

#right_bar a,
#right_bar a:visited{
  color:#CD3700;
  text-decoration:none;
}

#right_bar a:hover{
  color:#666;
}

#right_bar ul,
#right_bar li{
  margin:0;
  padding:0;
  list-style:none;
}

#footer	{
  clear:both;
  font-size:80%;
  background:#ccc;
  padding:20px;
  text-align:left;
}
#buttons {
  float:right;
}

/*navigation*/
.nav ul {
  margin:0; padding:0;
  border-top:1px solid #ccc;
}
.nav li {
  margin:0; padding:0;
  list-style:none;
  display:inline;
}
.nav a,
.nav a:visited {
  color:#225799;
  text-decoration:none;
  display:inline-block;
  padding:10px;
  margin:2px 0 10px 0;
}

.nav a:hover{
  color:#333;
  border-top:5px solid #c00;
  margin-top:-5px;
}
/* ncid sub-nav */
.nav.ncid {
  margin:-15px 0 0 160px; padding:8px 0 0 0;
  background:url(img/tick.gif) no-repeat 128px -1px;
}
.nav.ncid ul {
  width:286px;
  border-color:#c00;
  margin:0; padding:0 0 0 2px;
}
.nav.ncid a {
  padding:5px 10px;
}

#onBlog2 .nav .apparatus_page a,
#onBlog3 .nav .ncid_page a,
#onBlog4 .nav .fireside_page a,
#onBlog8 .nav .fireside_page a,
#onBlog9 .nav .fireside_page a,
#onBlog5 .nav .callouts_page a,
#onBlog6 .nav .ourmembers_page a,
#onBlog7 .nav .donations_page a,
.page-home .nav .home_page a,
.page-prevention .nav .fireprevention_page a,
.page-contact .nav .contactus_page a,
.page-about-us .nav .about_page a{
  color:#c00;
  margin-top:-5px;
}

#footer ul 		{margin:0; padding:0; }
#footer li 		{margin:0; padding:0; list-style:none; display:inline; }
#footer a		{color:#000000; font-weight:bold; padding:0 5px 0 0; text-decoration:underline; }
#footer a:hover	{color:#000000; text-decoration:none; }

/* basics */
p {
  margin:0; padding:0 0 15px 0;
}
a {
  color:#000;
}
a:hover	{
  color:#c00;
  text-decoration:none;
}

a img{
border:none;
}


.post-title a,
.post-title a:visited{
color:#cd3700;
text-decoration:none;
}

.post-title a:hover{
color:#f00;
}

#onBlog2 .post{
background:url(img/bottom.png) bottom center no-repeat;
}




/**
 * Forums stuff
 */
.forumList,
.postList{
width:100%;
border:solid #ddd;
border-width:0 0 1px 1px;
border-collapse:collapse;
margin:0 0 1em 0;
}

.forumList th,
.forumList td,
.postList th,
.postList td{
border:solid #ddd;
border-width:1px 1px 0 0;
padding:2px 4px;
}

.forumList .forumFirst{
width:60%;
}

.postList .forumFirst{
width:80%;
}

.forumList th,
.postList th{
background:#f84;
}

.forumList p{
margin:0;
padding:0;
}

.forumList a,
.forumList a:visited,
.postList a,
.postList a:visited{
color:#ce3700;
text-decoration:none;
}

.forumList a:hover,
.postList a:hover{
color:#f00;
}

.forumDescription a{
font-size:160%;
}