/**
 * dark-green:  #00763b (logo text)
 * light-green: #7ac09a (logo border)
 * grey:        #c6c7c8 (logo border)
 * text-grey:   #666 (text)
 */


/**
 * ----- GENERAL PAGE -----
 */

html, body
{
    background-color: #f1f1f1;
    height: 100%;
}

body
{
    text-align: center;
}

#verticalPageSpacer
{
	height: 50%;
	width: 100px;
	margin-bottom: -308px;
	float: left;
}

#pageContainer
{
	text-align: left;
    clear: left;
	width: 940px;
	height: 571px;
	margin: auto auto;
	position: relative;
	
    background-image: url("../images/shadow_grey_bg.jpg");
    background-repeat: no-repeat;
    padding: 8px;
}



/**
 * ----- HEADER -----
 */
#header
{
    position: relative;
    width: 100%;
    height: 104px;
    background-image: url("../images/header_bg.jpg");
    background-repeat: no-repeat;
}

#logo
{
    width: 175px;
    height: 55px;
    display: block;
    position: absolute;
    top: 48px;
    right: 5px;
}
#logo img
{
    display: none;
}

#header span
{
    position: absolute;
    left: -9999px;
}


/**
 * ----- MIDDLE -----
 */
#middle
{
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

#left
{
    height: 332px;
    width: 220px;
    float: left;
}

#contentContainer
{
    float: left;
    width: 720px;
    overflow: auto;
}

.withStaticImageBar #contentContainer
{
    height: 361px;
    overflow: auto;
}

.withDynamicImageBar #contentContainer
{
    height: 317px;
    margin-bottom: 15px;
    overflow: auto;
}




/**
 * ----- FOOTER -----
 */
#footer
{
    width: 100%;
    height: 20px;
    background-image: url("../images/footer_bg.jpg");
    background-repeat: repeat-x;
}


/**
 * ----- NAVIGATION -----
 */
#mainNavigation
{
    padding-top: 83px;
    margin-left: 199px;
}

#mainNavigation li
{
    float: left;
    display: inline;
}

#mainNavigation li a:link,
#mainNavigation li a:visited
{
    display: inline; /* ie6 double margin bug */
    float: left;
    margin: 0 1.8em;
    text-decoration: none;
    
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

#mainNavigation li a:hover,
#mainNavigation li a:active,
#mainNavigation li.active a:link,
#mainNavigation li.active a:visited
{
    color: #00763b;
}


/**
 * ----- SUB-NAVIGATION -----
 */
#subNavigation
{
	margin-top: 2em;
    margin-left: 1.0em;
}

/* first level */
#subNavigation ul
{
}

#subNavigation ul li
{
    margin-top: 1.4em;
    font-size: 11px;
}

#subNavigation ul li a:link,
#subNavigation ul li a:visited
{
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
}

#subNavigation ul li a:hover,
#subNavigation ul li a:active,
#subNavigation ul li.active a:link,
#subNavigation ul li.active a:visited
{
    color: #00763b;
}

/* second level */
#subNavigation ul li ul
{
    margin-left: 1.5em;
}

#subNavigation ul li ul li
{
    margin-top: 0.5em;
}

#subNavigation ul li ul li a:link,
#subNavigation ul li ul li a:visited,
#subNavigation ul li.active ul li a:link,
#subNavigation ul li.active ul li a:visited
{
    text-transform: none;
    color: #666;
    font-size: 80%;
}

#subNavigation ul li ul li a:hover,
#subNavigation ul li ul li a:active,
#subNavigation ul li ul li.active a:link,
#subNavigation ul li ul li.active a:visited,
#subNavigation ul li.active ul li a:hover,
#subNavigation ul li.active ul li a:active,
#subNavigation ul li.active ul li.active a:link,
#subNavigation ul li.active ul li.active a:visited
{
    color: #00763b;
}



/**
 * ----- HELPER CLASSES -----
 */
.clear
{
    line-height: 0%;
    font-size: 0%;
    height: 0;
    width: 0;
    clear: both;
}



/**
 * ----- IMAGE BAR -----
 */
 
 /* dynamic image bar */
.withDynamicImageBar .imageBar
{
    height: 113px;
    padding-bottom: 2px;
}

.withDynamicImageBar .imageBarInner
{
    margin: 0 auto;
    position: relative;
}

.withDynamicImageBar .imageBarNumItems1
{
	width: 179px;
}

.withDynamicImageBar .imageBarNumItems2
{
	width: 354px;
}

.withDynamicImageBar .imageBarNumItems3
{
	width: 529px;
}

.withDynamicImageBar .imageBarNumItems4
{
	width: 708px;
}

.withDynamicImageBar .imageBarNumItems5
{
	width: 887px;
}


/**
 * format arrow icons
 */

.withDynamicImageBar .imageBar .previousLink,
.withDynamicImageBar .imageBar .nextLink
{
	padding-top: 29px;
	width: 20px;
	float: left;
	display: inline;
	position: relative;
}

.withDynamicImageBar .imageBar .previousLink .arrowIconLeft,
.withDynamicImageBar .imageBar .nextLink .arrowIconRight
{
	background-image: url("../images/arrows_imageset.jpg");
	background-repeat: no-repeat;
	width: 20px;
	height: 84px;
	display: block; 
}

.withDynamicImageBar .imageBar .previousLink .arrowIconLeft span,
.withDynamicImageBar .imageBar .nextLink .arrowIconRight span
{
	position: absolute;
	left: -9999px;
}

.withDynamicImageBar .imageBar .nextLinkInactive .layer,
.withDynamicImageBar .imageBar .previousLinkInactive .layer
{
	position: absolute;
	top: 29px;
	left: 0;	
	width: 20px;
	height: 84px;
}


/**
 *  previous buttton
 */

.withDynamicImageBar .imageBar .previousLink .arrowIconLeft
{
	background-position: 0 0;
}

.withDynamicImageBar .imageBar .previousLinkInactive .arrowIconLeft
{
	background-position: -25px 0;
}

.withDynamicImageBar .imageBar .previousLink a.arrowIconLeft:hover,
.withDynamicImageBar .imageBar .previousLink a.arrowIconLeft:active,
.withDynamicImageBar .imageBar .previousLink a.arrowIconLeft:focus
{
	background-position: -50px 0;
	outline: 0;
}


/**
 * next buttton
 */
 
.withDynamicImageBar .imageBar .nextLink .arrowIconRight
{
	background-position: -80px 0;
}

.withDynamicImageBar .imageBar .nextLinkInactive .arrowIconRight
{
	background-position: -105px 0;
}

.withDynamicImageBar .imageBar .nextLink a.arrowIconRight:hover,
.withDynamicImageBar .imageBar .nextLink a.arrowIconRight:active,
.withDynamicImageBar .imageBar .nextLink a.arrowIconRight:focus
{
	background-position: -130px 0;
	outline: 0;
}




.withDynamicImageBar .imageBar .imageBarNumItems1 .itemList,
.withDynamicImageBar .imageBar .imageBarNumItems2 .itemList,
.withDynamicImageBar .imageBar .imageBarNumItems3 .itemList,
.withDynamicImageBar .imageBar .imageBarNumItems4 .itemList,
.withDynamicImageBar .imageBar .imageBarNumItems5 .itemList
{
    float: left;
    overflow: hidden;
}

.withDynamicImageBar .imageBar .itemList
{
    float: left;
    position: relative;
	width: 895px;
	height: 113px;
    overflow: hidden;
}

.withDynamicImageBar .imageBar .itemList .item
{
	display: inline;
	float: left;
	margin: 0 1px;
}

.withDynamicImageBar .imageBar .itemList .item a:link,
.withDynamicImageBar .imageBar .itemList .item a:visited
{
	display: block;
	width: 177px;
    height: 113px;
	color: #666;
	text-decoration: none;
	font-size: 10px;
	cursor: pointer; /* ie6 fix */
}

.withDynamicImageBar .imageBar .itemList .item a:hover,
.withDynamicImageBar .imageBar .itemList .item a:active
{
	color: #00763b;
	
	/* fix for ie6 (do a change - here backround color -
	   that inner span styling takes effect on hovering) */
	background: #fff; 
}

.withDynamicImageBar .imageBar .itemList .item a:link .label,
.withDynamicImageBar .imageBar .itemList .item a:visited .label,
.withDynamicImageBar .imageBar .itemList .item .linkFake .label
{
	display: block;
	width: 177px;
	height: 29px;
	text-align: center;
}

.withDynamicImageBar .imageBar .itemList .item .image
{
	display: block;
	position: relative;
	width: 177px;
	height: 84px;
	
	background-color: #e2e3e4;
	text-align: center;
}

.imageBar .extra
{
	visibility: hidden;
	position: absolute;
	top: 3px;
	right: 3px;
	background-image: url('../images/zoom.png');
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
}

.imageBar a:link .extra,
.imageBar a:visited .extra
{
	visibility: hidden;
}

.imageBar a:hover .extra,
.imageBar a:active .extra
{
	visibility: visible;
}


  /* static image bar */
.withStaticImageBar .imageBar
{
	background-position: top center;
    background-repeat: no-repeat;
    height: 86px;
    position: relative;
}