#viewport {
	background: #ffffff	url(../images/bg/bg-panel.jpg) no-repeat 0 0;
	width: 620px;
	height: 426px;
	padding: 24px 0 0 20px;
	overflow: hidden;
}


/* root element for tabs  */
#main #viewport ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:255px;
}

/* single tab */
#main #viewport ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
	list-style-type: none;
	height:255px;
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a { 
	font-size:11px;
	display:block;
	height: 255px;  
	width: 201px;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
	text-indent: -999px;
	overflow: hidden;
}

#main #viewport ul.tabs a:active {
	outline:none;		
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
/*#main #viewport ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: 0 -255px;		
	cursor:default !important; 
	color:#000 !important;
}
*/

/* ---------- PURLS ---------- */
#main #viewport ul.tabs a#purltab, #main #viewport ul.tabs a:visited#purltab {background: url(../images/bg/bg-tabs.jpg) no-repeat 0 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#purltab, #main #viewport ul.tabs a:focus#purltab {
	background-position: 0 -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#purltab.current, #main #viewport ul.tabs a:visited#purltab.current {background: url(../images/bg/bg-tabs.jpg) no-repeat 0 -255px;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#purltab.current, #main #viewport ul.tabs a:focus#purltab.current {
	background-position: 0 -255px;	
	color:#fff;	
}



/* ---------- EMAIL ---------- */
#main #viewport ul.tabs a#emailtab, #main #viewport ul.tabs a:visited#emailtab {background: url(../images/bg/bg-tabs.jpg) no-repeat -201px 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#emailtab, #main #viewport ul.tabs a:focus#emailtab {
	background-position: -201px -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#emailtab.current, #main #viewport ul.tabs a:visited#emailtab.current {background: url(../images/bg/bg-tabs.jpg) no-repeat -201px -255px;}



/* ---------- MICRO SITES ---------- */
#main #viewport ul.tabs a#microtab, #main #viewport ul.tabs a:visited#microtab {background: url(../images/bg/bg-tabs.jpg) no-repeat -402px 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#microtab, #main #viewport ul.tabs a:focus#microtab {
	background-position: -402px -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#microtab.current, #main #viewport ul.tabs a:visited#microtab.current {background: url(../images/bg/bg-tabs.jpg) no-repeat -402px -255px;}

/* ---------- PURLS ---------- */
#main #viewport ul.tabs a#purltab, #main #viewport ul.tabs a:visited#purltab {background: url(../images/bg/bg-tabs.jpg) no-repeat 0 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#purltab, #main #viewport ul.tabs a:focus#purltab {
	background-position: 0 -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#purltab.current, #main #viewport ul.tabs a:visited#purltab.current {background: url(../images/bg/bg-tabs.jpg) no-repeat 0 -255px;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#purltab.current, #main #viewport ul.tabs a:focus#purltab.current {
	background-position: 0 -255px;	
	color:#fff;	
}



/* ---------- BRAND MANAGER ---------- */
#main #viewport ul.tabs a#aksessbrand, #main #viewport ul.tabs a:visited#aksessbrand {background: url(../images/bg/bg-aksess.jpg) no-repeat 0 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#aksessbrand, #main #viewport ul.tabs a:focus#aksessbrand {
	background-position: 0 -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#aksessbrand.current, #main #viewport ul.tabs a:visited#aksessbrand.current {background: url(../images/bg/bg-aksess.jpg) no-repeat 0 -255px;}

#main #viewport ul.tabs a:hover#aksessbrand.current, #main #viewport ul.tabs a:focus#aksessbrand.current {
	background-position: 0 -255px;	
	color:#fff;	
}

/* ---------- DOCUMENT MANAGER ---------- */
#main #viewport ul.tabs a#aksessmanager, #main #viewport ul.tabs a:visited#aksessmanager {background: url(../images/bg/bg-aksess.jpg) no-repeat -201px 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#aksessmanager, #main #viewport ul.tabs a:focus#aksessmanager {
	background-position: -201px -255px;	
	color:#fff;	
}

/* link inside the tab. uses a background image */
#main #viewport ul.tabs a#aksessmanager.current, #main #viewport ul.tabs a:visited#aksessmanager.current {background: url(../images/bg/bg-aksess.jpg) no-repeat -201px -255px;}

/* ---------- DIGITAL ASSETS ---------- */
#main #viewport ul.tabs a#aksessassets, #main #viewport ul.tabs a:visited#aksessassets {background: url(../images/bg/bg-aksess.jpg) no-repeat -402px 0;}

/* when mouse enters the tab move the background image */
#main #viewport ul.tabs a:hover#aksessassets, #main #viewport ul.tabs a:focus#aksessassets {
	background-position: -402px -255px;	
	color:#fff;	
}





/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}

div.panes {height: 132px; overflow: hidden;}


/* tab pane styling */

/*div.panes div {
	display:none;		
	padding:15px 10px;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}
*/