/*
Vertical Accordions
*/

#vertical_container
{
}

#vertical_container h1
{
width: 200px;
margin: 0;
padding: 10px 10px 10px 10px;
background: #666 url('/lib/images/bkgr/subnav-h1.png') repeat-x left bottom;
color: #fff;
font: normal 11px "Trebuchet MS", Trebuchet, Helevetica, sans-serif;
text-align: left;
font-size:13px;
font-weight:normal;
letter-spacing:normal;

}

#vertical_container h1 a
{
color: #fff;
text-decoration: none;
font-weight:normal;
letter-spacing:0px;
}

#vertical_container h2
{
width: 200px;
margin: 0;
padding: 10px;
background: #999 url('/lib/images/bkgr/subnav-h2.png') repeat-x left bottom;
color: #fff;
font: normal 12px "Trebuchet MS", Trebuchet, Helevetica, sans-serif;
text-align: left;
letter-spacing:normal;
}

#vertical_container h2 a
{
color: #fff;
text-decoration: none;
text-transform: lowercase;
}

#vertical_container h2.currentPage
{
background: #83a938 url('/lib/images/bkgr/subnav-h2-active.png') repeat-x left bottom;
}

.accordion_toggle {
display: block;
height: 30px;
width: 200px;
margin: 0;
padding: 0 10px;
background: #999 url('/lib/images/bkgr/subnav-h2.png') repeat-x left bottom;
color: #fff;
font-weight: normal;
text-align: left;
text-decoration: none;
text-transform: lowercase;
line-height: 30px;
outline: none;
font-size: 11px;
cursor: pointer;
letter-spacing:normal;
font-size:12px;
}

.accordion_toggle_active 
{
background: #ccc url('/lib/images/bkgr/subnav-h2-active.png') repeat-x left bottom;
color: #FFFFFF;
border-bottom: 1px solid #d1d1d1;
}

.accordion_content {
margin: 0;
padding: 4px 0 0 0;
background-color: #eee;
color: #444;
overflow: hidden;
}

.accordion_content h3 {
margin: 15px 0 5px 0;
color: #09f;
letter-spacing:normal;

}

h3.currentPageSet 
{
background: #83a938 url('/lib/images/bkgr/subnav-h2-active.png') repeat-x left bottom;
}

.accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}

.vertical_accordion_toggle {
display: block;
height: 30px;
width: 600px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #fff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}

.vertical_accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #333;
border-bottom: 1px solid #f68263;
}

.vertical_accordion_content {
background-color: #fff;
color: #444;
overflow: hidden;
}

.vertical_accordion_content h3 {
margin: 15px 0 5px 10px;
color: #0099FF;
letter-spacing:normal;
font-size:12px;
}

.vertical_accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}

/*
Horizontal Accordion
*/

.horizontal_accordion_toggle {
/* REQUIRED */
float: left;	/* This make sure it stays horizontal */
/* REQUIRED */

display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #fff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}

.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
border-right: 1px solid #f68263;
}

.horizontal_accordion_content {
/* REQUIRED */
height: 100px;	/* We need to define a height for the accordion as it stretches the width */
float: left;	/* This make sure it stays horizontal */
/* REQUIRED */

overflow: hidden;
background-color: #fff;
color: #444;
}

.horizontal_accordion_content p {
width: 450px;
line-height: 150%;
padding: 5px 10px 15px 10px;
}


/* Container styling*/
#horizontal_container {
margin: 20px auto 20px auto;
width: 680px;   
height: 100px;    
}

#vertical_nested_container {
margin: 20px auto 20px auto;
width: 620px;
}










.accordion_content ul
{
float: left;
width: 220px;
margin: 0;
padding: 0;
text-align: left;
}

.accordion_content ul li
{
float: left;
clear: both;
width: 200px;
margin: 0;
padding: 0 0 1px 20px;
border-bottom: 1px dotted #999;
background-color: #eee;
}

.accordion_content ul li.indent
{
padding: 0 0 1px 40px;
background-color: #fff;
}

.accordion_content ul li.indent a
{
width: 149px;
padding-right: 10px;
font-size: 12px;
}

.accordion_content ul li a span
{
text-transform: uppercase;
}

.accordion_content ul li.indent a.currentPage
{
font-size: 12px;
}

.accordion_content ul li.last
{
border: none;
}

.accordion_content ul li a
{
float: left;
clear: both;
width: 185px;
margin: 0;
padding: 2px 0;
color: #666;
font: normal 12px "Trebuchet MS", Trebuchet, Helevetica, sans-serif;
text-decoration: none;
text-transform: lowercase;
}

.accordion_content ul li a:hover
{
color: #83a938;
}

.accordion_content ul li a.currentPage
{
color: #83a938;
}