html {font-size: 70%;}
body {font-family:verdana,Arial,helvetica,sans-serif;color:#555;line-height:1.2em;}
h1, h2, h3, h4, h5, h6 {font-family:Arial,verdana,helvetica,sans-serif;}
body, div, fieldset {margin:0;padding:0;}
fieldset {width:auto;padding:0 10px 10px 10px;border: none;}
label {display:block;font-weight:bold;margin-top:10px;}
label span {font-weight:normal;color:#666;}
h1 {color:#8CB30A;font-size:2em;font-weight:normal;}
h2 {color:#999;font-size:1.8em;}
h3 {color:#666;font-size:1.6em;margin-bottom:5px;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}
a {color:#333;text-decoration:underline;}
a:hover {font-weight:bold;}
a img {border:none;}
ul {list-style:square;}
ul li {margin:7px 0;}
ul li ul {margin-bottom:5px;}
input, textarea, select {border:1px solid #666;padding:1px 4px;margin:1px;font-family:inherit;font-size:1em;}
button {padding:2px 5px;margin:1px;font-family:inherit;font-size:1em;font-weight:bold;cursor:pointer;color:#333;}
button.img {background:none;}
input.cbox {border:none;}
textarea {width:100%;height:100px;}
table {width:100%;background:#ccc;padding:0;border-spacing:0;font-size:inherit;}
th {background:#666;color:#fff;font-weight:bold;text-align:center;font-size:1.3em;padding:5px;}
td {margin:1px;padding:5px;vertical-align:top;color:#333;border-bottom:1px solid #ddd;}

/* classes */
.clear {clear:both;}
.odd {background:#fff;}
.even {background:#eee;}
.even:hover, .odd:hover {background:#ddd;}

.xcenter {width:auto;margin:10px auto;text-align:center;}
.xbig {font-size:1.4em;font-weight:bold;}
.xsmall {font-size:0.9em;}
p .xsmall, li .xsmall, td .xsmall {color:#999;}
.aright {text-align:right;}
.fleft {float:left;}
.fright {float:right;}
.sbox {border-bottom:1px solid #ddd;}
.tbox {border-top:1px solid #ddd;}

.hdot {background: url(../img/to.jpg) bottom left repeat-x;padding-bottom:3px;}
.special {font-weight:bold;}

/* containers */

#page {position:relative;width:1000px;margin:0 auto;}
#head {color:#666;height:200px;background:url(../img/green.gif) top left repeat-x;}
#head h1, #head p {color:#fff;margin:0 10px;padding:0;}
#head h1 a {color:#fff;}
#logo {float:left;}
#menu_top {float:right;width:720px;}
#menu_top img {border:none;}

#line {clear:both;height:3px;background: url(../img/to.jpg) top left repeat-x;}
#breadcrumb p {margin:3px 10px;text-transform:uppercase;}
#breadcrumb a {font-weight:bold;text-decoration:none;}
#topic {width:100%;background:#fff url(../img/gray.gif) top left repeat-y;}



#left {float:left;width:257px;}

#menu {float:right;margin:10px 5px 10px 0;}
#menu ul {list-style:none;text-align:right;}
#menu ul li {margin:0;padding:8px;}
#menu ul li ul {text-align:right;margin-bottom:-10px;}
#menu a {color:#444;margin:0;text-decoration:none;text-transform:uppercase;}
#menu a.sub {text-transform:lowercase;margin-right:10px;}

#news_div {background: url(../img/news.jpg) top left no-repeat;padding:60px 10px 10px 10px;}


#right {float:right;width:720px;}

#msg {width:100%;padding:15px 10px;background:#8CB30A;color:#fff;}
#msg p {margin:0;font-weight:bold;}

#menu_bottom {clear:both;background: url(../img/to.jpg) top left repeat-x;padding-top:5px;font-size:0.9em;}
#menu_bottom ul {list-style:none;text-align:right;}
#menu_bottom li {display:inline;margin:0 10px;}
#menu_bottom a {color:#444;margin:0;text-decoration:none;text-transform:uppercase;}
#menu_bottom a:hover {font-weight:normal;text-decoration:underline;} 

#foot {background:#fff;margin:0 auto;text-align: center;font-size:0.90em;color:#666;}
#foot p span {line-height:30px;color:#999;font-size:0.9em;}
/* search */
#sitesearch {text-align:center;margin-top:15px;font-size:0.9em;}

/* pagination */
#pager {margin:5px 0;background: url(../img/to.jpg) top left repeat-x;padding-top:10px;}
#pager span.n {color:#fff;background:#8CB30A;padding:0 5px;}
#pager a {margin:0 3px;}
/* news */
#news {display:block;}
div.newsmenu {text-align:right;background: url(../img/to.jpg) bottom left repeat-x;padding-bottom:10px;}
#news a.link {font-size:12px;}
#news h3.newstitle {font-size:12px;color:#333;margin-bottom:0;font-weight:normal;text-transform:uppercase;}
#news p {font-size:11px;color:#666;line-height:14px;margin-top:3px;}
#news .newsdata {color:#222;margin:3px 0;font-weight:bold;font-size:0.9em;}

/* --- link --- */
#link {float:right;width:180px;margin-top:50px;background:#89B20B;padding:20px 10px;}
#link ul {list-style:none;margin:0;}
#link ul li {margin:3px 0;}
#link a {color:#fff;text-decoration:none;}


a[target$='_blank'] { padding:0 0 0 20px;background:url(../img/external_link.gif) no-repeat 3px center; }
a[target$='_blank'] img { padding-left:0;background:none;}


/* slideshow */
/**
Stylesheet: Slideshow.css
CSS for Slideshow.

License:
MIT-style license.

Copyright:
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

HTML:
<div class="slideshow">
<div class="slideshow-images" />
<div class="slideshow-captions" />
<div class="slideshow-controller" />
<div class="slideshow-loader" />
<div class="slideshow-thumbnails" />
</div>

Notes:
These next four rules are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/
#show {width:593px;margin:0 auto 0 auto;}
.slideshow {display: block;position: relative;z-index: 0;}
.slideshow-images {display: block;overflow: hidden;position: relative;}
.slideshow-images img {display: block;position: absolute;z-index: 1;}
.slideshow-thumbnails {overflow: hidden;}

/**
HTML:
<div class="slideshow-images">
<img />
<img />
</div>

Notes:
The images div is where the slides are shown.
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {height: 300px;width: 540px;}
.slideshow-images-visible {opacity: 1;}
.slideshow-images-prev {opacity: 0;}
.slideshow-images-next {opacity: 0;}
.slideshow-images img {float: left;left: 0;top: 0;}

/**
Notes:
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/

.slideshow {height: auto;margin: 0 auto;width: 750px;}
.slideshow a img {border: 0;}

/**
HTML:
<div class="slideshow-captions">
...
</div>

Notes:
Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {background: #000;bottom: 0;color: #FFF;font: normal 12px/22px Arial, sans-serif;left: 0;overflow: hidden;position: absolute;text-indent: 10px;width: 100%;z-index: 10000;}
.slideshow-captions-hidden {height: 0;opacity: 0;}
.slideshow-captions-visible {height: 22px;opacity: .7;}

/**
HTML:
<div class="slideshow-controller">
<ul>
<li class="first"><a /></li>
<li class="prev"><a /></li>
<li class="pause play"><a /></li>
<li class="next"><a /></li>
<li class="last"><a /></li>
</ul>
</div>

Notes:
Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {background: url(../img/controller.png) no-repeat;height: 42px;left: 50%;margin: -21px 0 0 -119px;overflow: hidden;position: absolute;top: 50%;width: 238px;z-index: 10000;}
.slideshow-controller * {margin: 0;padding: 0;}
.slideshow-controller-hidden {opacity: 0;}
.slideshow-controller-visible {opacity: 1;}
.slideshow-controller a {cursor: pointer;display: block;height: 18px;overflow: hidden;position: absolute;top: 12px;}
.slideshow-controller a.active {background-position: 0 18px;}
.slideshow-controller li {list-style: none;}
.slideshow-controller li.first a {background-image: url(../img/controller-first.gif);left: 33px;width: 19px;}
.slideshow-controller li.last a {background-image: url(../img/controller-last.gif);left: 186px;width: 19px;}
.slideshow-controller li.next a {background-image: url(../img/controller-next.gif);left: 145px;width: 28px;}
.slideshow-controller li.pause a {background-image: url(../img/controller-pause.gif);left: 109px;width: 20px;}
.slideshow-controller li.play a {background-position: 20px 0;}
.slideshow-controller li.play a.active {background-position: 20px 18px;}
.slideshow-controller li.prev a {background-image: url(../img/controller-prev.gif);left: 65px;width: 28px;}

/**
HTML:
<div class="slideshow-loader" />

Notes:
Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {height: 28px;right: 0;position: absolute;top: 0;width: 28px;z-index: 10001;}
.slideshow-loader-hidden {opacity: 0;}
.slideshow-loader-visible {opacity: 1;}

/**
HTML:
<div class="slideshow-thumbnails">
<ul>
<li><a class="slideshow-thumbnails-active" /></li>
<li><a class="slideshow-thumbnails-inactive" /></li>
...
<li><a class="slideshow-thumbnails-inactive" /></li>
</ul>
</div>

Notes:
Customize the active / inactive classes to affect the thumbnails animation.
Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {bottom: -65px;height: 65px;left: 0;position: absolute;width: 100%;}
.slideshow-thumbnails * {margin: 0;padding: 0;}
.slideshow-thumbnails ul {height: 65px;left: 0;position: absolute;top: 0;width: 10000px;}
.slideshow-thumbnails li {float: left;list-style: none;margin: 5px 5px 5px 0;position: relative;}
.slideshow-thumbnails a {display: block;float: left;padding: 0;position: relative;}
.slideshow-thumbnails a:hover {background-color: #FF9 !important;opacity: 1 !important;}
.slideshow-thumbnails img {display: block;}
.slideshow-thumbnails-active {background-color: #9FF;opacity: 1;}
.slideshow-thumbnails-inactive {background-color: #FFF;opacity: .5;}