/*
	This css document includes styles for the menus, buttons and tab elements.
*/

/*** HYPERNAVIGATION *************/
#hypernavigation { margin: 5px auto; width:883px; clear:both; color: #663B8A; font: normal 8pt Tahoma, Helvetica, sans-serif; border-collapse:collapse;}
#hypernavigation td { padding:0; vertical-align:top; height: 31px;}
#hypernavigation a { color: #fff; text-decoration:none; float:left; padding: 5px; }
#hypernavigation a:hover { color: #000; background: #CCCCCC; }
#hypernavigation a.active { font-weight:bold; }
#hypernavigation ul { margin:0; padding:0; }
#hypernavigation li { float:left; margin: 0; padding:0; }
#hypernavigation li a { float:left; padding: 9px 5px 0 5px; height:22px; }

#hypernavigation .back { background:url(../images/navigation/navigation-bar-l.png) left top no-repeat; width:78px; }
.ext-ie #hypernavigation .back { width:85px; }
#hypernavigation .back a { float:left; background:url(../images/navigation/navigation-l.png) left top no-repeat; padding:0 0 0 34px; }
#hypernavigation .back a span { display:block; padding:9px 5px 0 5px; height:22px; width: 40px; cursor:pointer}
#hypernavigation .back a:hover { background: url(../images/navigation/navigation-l.png) left bottom no-repeat; }
#hypernavigation .back a:hover span { background: url(../images/navigation/navigation-l-hover.gif) left top repeat-x; font-weight:bold; text-decoration:underline; }


#hypernavigation .bar { background:url(../images/navigation/navigation-bg-r.png) left top repeat-x;  }

#hypernavigation .bar-left { float:left; background:url(../images/navigation/navigation-bar-l.png) right top no-repeat; height:31px; padding-right:15px; }
#hypernavigation .bar-left li a:hover { background:url(../images/navigation/navigation-l-hover.gif) left top repeat-x; text-decoration:underline; }
#hypernavigation .bar-left .bar-separator { margin: 1px 5px; padding:0; width:0; height: 29px; border-left: 1px solid #AEAFD9; border-right: 1px solid #9596CA; }

#hypernavigation .bar-right { background:url(../images/navigation/navigation-bg-r.png) left top repeat-x; }
#hypernavigation .bar-right .bar-separator { background-image:url(../images/navigation/navigation-separator-r.png); margin-left: 5px; }
#hypernavigation .bar-right li a { color:#000; }
#hypernavigation .bar-right li a:hover { background:url(../images/navigation/navigation-r-hover.gif) left top repeat-x; text-decoration:underline; }

#hypernavigation .bar-right-end { width:10px; background:url(../images/navigation/navigation-r.png) right top no-repeat; }

#hypernavigation .bar-separator { float:left; width:2px; height:14px; padding:0; margin-top: 9px; margin-right: 5px; margin-bottom:0; background-repeat:no-repeat; background-position:center top; }
/*********************************/



/*** SUBNAV **********************/
.subnav { width:883px; height:25px; padding:0; margin:0 auto 5px; background:url(../images/navigation/subnav.gif) left top no-repeat; font: 9pt Arial, Helvetica, sans-serif; }
.subnav div { float:left; background:url(../images/navigation/subnavbar-l-l.png) left top no-repeat; padding-left:3px; }
.subnav div span { float:left; padding: 5px 10px 0 5px; background: #DAD1E1 url(../images/navigation/subnavbar-l-r.png) right top no-repeat; height:20px; }  /* padding: 5px 5px; margin-bottom: 5px; */
.subnav ul { float:left; margin-left:5px; } 
.subnav ul li { float:left; margin-left:5px; padding-top: 5px; padding-bottom: 5px; } 
.subnav ul li a { text-decoration:none; color:#000; } 
.subnav ul li a.active { font-weight:bold; } 
.subnav ul li a:hover { text-decoration:underline; } 
.subnav .bar-separator { float:left; width:3px; height:20px; padding:0; margin-top: 9px; margin-right: 5px; margin-bottom:0; background-repeat:no-repeat; background-position:center top; } 
.subnav .bar-right .bar-separator { background-image:url(../images/navigation/navigation-separator-r.png); margin-left: 5px; }
/*********************************/





/*** TABS ************************/
.tabs { height: 22px; padding:0 0 0 5px; background: 0; margin:0; position:relative; border:0; }
.tabs li { float:left; margin:0; padding:0; margin-left: 3px; }
.tabs li a { float:left; text-decoration:none; color: #474747; font-size: 8pt; position:relative; z-index: 1; outline: none; }
.tabs li a span { background-image:url(../images/sprites/sprite-tabs.gif); float:left; padding:0; margin:0; color: #474747; background-repeat:no-repeat; cursor:pointer; }
.tabs li a span.text { margin-top: 5px; background:0; }

.tabs li a span.left  { background-position: 0 -50px;  padding-left: 8px;  }
.tabs li a span.right { background-position: right -350px; padding-right: 8px; }
.tabs li a span.inner { background-position: 0 -200px; background-repeat: repeat-x; text-align:center; height:22px; }

.tabs li a:hover { z-index: 2; }
.tabs li a:hover span.left  { background-position: 0 -100px;  }
.tabs li a:hover span.right { background-position: right -400px; }
.tabs li a:hover span.inner { background-position: 0 -250px; }
	
.tabs li a.active { z-index: 10; }
.tabs li a.active span { font-weight:bold; }
.tabs li a.active span.left  { background-position: 0 0;  }
.tabs li a.active span.right { background-position: right -300px; }
.tabs li a.active span.inner { background-position: 0 -150px; height:23px;}

.tabs-blue li a span { background-image:url(../images/sprites/sprite-tabs-blue.gif); }
.tabs-blue li a span.text { margin-left: 5px; margin-right: 5px; }

.tabs-grey li a span { background-image:url(../images/sprites/sprite-tabs-grey.gif); }
.tabs-grey li a span.text { margin-top:4px; }
/*********************************/



/*** BUTTON **********************/
.myButton { float:left; text-decoration:none; outline: none; position:relative;}
.myButton span { background-image:url(../images/sprites/sprite-btn.gif); float:left; padding:0; margin:0; background-repeat:no-repeat; cursor:pointer; color:#000;}
.myButton span.text { margin-top: 3px; background:0; font-size:11px; font-weight:bold; text-align:center;}
table .myButton span.text { margin-top: 4px; } /* IE fix */

.myButton span.left  { background-position: 0 0;  padding-left: 3px;  }
.myButton span.right { background-position: right -21px; padding-right: 3px; }
.myButton span.inner { background-position: 0 -42px; background-repeat: repeat-x; text-align:center; height:21px; padding:0 20px 0 21px;}
.myButton:hover {  z-index: 2; } /* for IE */

.myButton:hover span.left  { background-position: 0 -63px;  }
.myButton:hover span.right { background-position: right -84px; }
.myButton:hover span.inner { background-position: 0 -105px; }

.myButton:active span.left  { background-position: 0 -63px;  }
.myButton:active span.right { background-position: right -84px; }
.myButton:active span.inner { background-position: 0 -126px; }

.myButton span { background-image:url(../images/sprites/sprite-btn-blue.gif); color:#fff; }

.myButton-green span { background-image:url(../images/sprites/sprite-btn-blue.gif); color:#fff; }
/*********************************/