@charset "utf-8";
/* CSS Document */

/* Styles for the tabs */
div.wrap { width:967px; margin-bottom:10px; margin-left: 7px; font-size: 12px; clear: both; position: relative; }
.wrap .pane  { background:#fff url(images/backgroundTabArea.gif) no-repeat left top; display:none; _background-image:none; }
.wrap .pane .subpane{ float: right; width: 676px; padding: 17px 5px 5px; background: url(none); margin-right: 20px; min-height:420px; }
.wrap .pane .pane.subpane p { margin-right: 10px; margin-left: 15px; }

/* get rid of those system borders being generated for A tags */
a:active {  outline:none; }
:focus { -moz-outline-style:none; }
/* root element for tabs  */
ul.tabs { list-style:none; margin:0px 0px 0px 0px !important; padding:0; height:41px; }
.subtabs, .tabs.subtabs {
	margin: 0px 0px 0px 20px;
	padding: 20px 0px 0px;
	width: 227px;
	float: left;
}
.subtabs li, .tabs.subtabs li { clear: left; list-style: none; float: left; width: 227px; }
/* single tab */
ul.tabs li   { float:left; text-indent:0; padding:0; margin:0 !important; list-style-image:none !important; }
/* link inside the tab. uses a background image */
ul.tabs a { background: url(images/backgroundMainTabs.gif) no-repeat 0px 0px; display:block; height: 41px; width: 153px; text-align:center; text-decoration:none; 
color:#FFF; padding:0px; margin:0px 26px 0px 0px; position:relative; top:1px; font: 14px/29px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; }
/* link inside the tab. uses a background image */
.subtabs a, .tabs.subtabs a { background: url(images/backgroundSubTabs.gif) no-repeat 0px 0px; display:block; height: 30px; width: 227px; text-decoration:none; text-align: left; 
color:#333; padding:0px; margin:0px 0px 1px; position:relative; top:1px; font: 15px/29px "Trebuchet MS", Arial, Helvetica, sans-serif; text-indent: 15px; }
.tabs.subtabs a { margin-left:20px; text-transform:none; }
ul.tabs a:active, .subtabs a:active, .tabs.subtabs a:active { outline:none; }
/* when mouse enters the tab move the background image */
ul.tabs a:hover { color:#FFF; background: url(images/backgroundMainTabs.gif) no-repeat left -82px; }
.subtabs a:hover, .tabs.subtabs a:hover { color:#00AEEF; background: url(none); }
/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { cursor:pointer !important; background: url(images/backgroundMainTabs.gif) no-repeat left -41px; }
.subtabs a.current, .subtabs a.current:hover, .subtabs li.current a, .tabs.subtabs a.current, .tabs.subtabs a.current:hover, .tabs.subtabs li.current a { cursor:pointer !important; 
background: url(images/backgroundSubTabs.gif) no-repeat left -30px; color: #FFF; }
/* initially all panes are hidden */ 
div.panes div.pane { display:none;}

