/***********************************
Copyright 2008-2009
The City University of New York
Office of University Relations
Office of Communications and Media
Eri Sahagun, Web Developer
web.cuny.edu
************************************/
/*** tabs.css ***/

/***
<div#tabsbar> is the whole bar 
that contains .tabs .search & .login
************************************/
#tabsbar {
	width: 1000px;
	height: 32px;
	padding: 0;
	margin: 0 auto;
	background-image: url(../images/global/tabs/tabs-bg.gif);
	background-repeat: repeat-x;
	background-position: bottom left ;
}
#tabsbar div.login a:hover {
	background-color: transparent;
}


/***
<div.tabs> is the section of the bar that
contains the menu lists (image buttons)
which their <a> tags have classes
.tab1 to .tab1
***************************************/

.tabs {
	float:left;
	width:665px;
	height: 21px;
	background-color:#656f74;
	padding: 0 0 0 16px;
	margin:0; 
}
.tabs ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
.tabs ul li {
	float:left; 
	position:relative;
	font-size: 9.5pt;
	line-height: 11.5pt;	
	font-weight: normal;
	padding: 0;
	letter-spacing: 0;
}
.tabs ul li a {
	color:#fff; 
}
.tabs ul li a, 
.tabs ul li a:visited {
	float:left; 
	display:block; 
	text-decoration:none; 
	border:0;
}
.tabs ul li:hover {width:auto;}
.tabs ul li a img { 
	border:0;
}

/***
<div.tabs> <ul> <li> <a.tabsN>
are each of menu links/buttons
IMPORTANT
do not remove; IE6 wont' work
***************************************/

.tabs ul li a.tab1:hover,
.tabs ul li a.tab2:hover,
.tabs ul li a.tab3:hover,
.tabs ul li a.tab4:hover,
.tabs ul li a.tab5:hover, 
.tabs ul li a.tab6:hover,
.tabs ul li a.tab7:hover {border-color:#656f74; color:#fff;}


.tabs ul li:hover a.tab1,
.tabs ul li:hover a.tab2,
.tabs ul li:hover a.tab3,
.tabs ul li:hover a.tab4,
.tabs ul li:hover a.tab5,
.tabs ul li:hover a.tab6,
.tabs ul li:hover a.tab7 {border-color:#656f74; color:#fff;}

/***
<div.tabs> <ul> <li> <a.tabsN> <img/>
Rollover Functionality
***************************************/
/*
.tabs a {
	display:block;
}
*/
.tabs a:hover img {
	visibility:hidden;
}
.tabs a.tab1,
.tabs a.tab2,
.tabs a.tab3,
.tabs a.tab4,
.tabs a.tab5,
.tabs a.tab6,
.tabs a.tab7 {
		height: 21px;
		margin: 0;
		padding: 0;
}
.tabs a.tab1 {
		background:url(../images/global/tabs-on/tabs-about.gif) bottom left no-repeat; 	
		width: 64px;
}
.tabs a.tab2 {
		background:url(../images/global/tabs-on/tabs-academics.gif) bottom left no-repeat; 	
		width: 96px;
}
.tabs a.tab3 {
		background:url(../images/global/tabs-on/tabs-admissions.gif) bottom left no-repeat; 	
		width: 101px;
}
.tabs a.tab4 {
		background:url(../images/global/tabs-on/tabs-research.gif) bottom left no-repeat; 	
		width: 90px;
}
.tabs a.tab5 {
		background:url(../images/global/tabs-on/tabs-news.gif) bottom left no-repeat; 	
		width: 117px;
}
.tabs a.tab6 {
		background:url(../images/global/tabs-on/tabs-libraries.gif) bottom left no-repeat; 	
		width: 85px;
}
.tabs a.tab7 {
		background:url(../images/global/tabs-on/tabs-employment.gif) bottom left no-repeat; 	
		width: 110px;
}


/************************************************
* HERE is where it starts getting COMPLICATED   *
* because there are <table> nested inside <ul>  *
* and DEPTH-2 <table> nested in DEPTH-1 <table> *
*************************************************/

/***
<div.tabs> <table> is the DEPTH-1 flyout-menu box
<div.tabs> <table> <ul> is the list in flyout-menu
****************************************************/
.tabs ul li:hover div.tab-drop-top { 
	display: block;
	width: 188px;	
	height: 15px;
	position:absolute;
	top:21px;
	background-image: url(../images/global/tabs/tabs-drop-bg-top.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.tabs ul li ul,
.tabs ul li ul li,
.tabs ul li table ul {
	display: none;
}
.tabs ul li table a {
	color: #1d3a83;
	background-color:#eee; 	
}
.tabs ul li table a:hover { width:180px; background-color:#666f74; color:#fff; }

.tabs ul li table ul li { 
	line-height:10pt;
	background-image: url(../images/global/tabs/tabs-drop-bg.png);
	background-repeat: repeat-y;
	background-position: right top;
	padding-right: 7px;
	width: 181px;
}



.tabs ul li table ul { 
	background-image: url(../images/global/tabs/tabs-drop-bg-bottom.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 188px;
	padding: 0 0 23px 0;
}


.tabs table {
	margin:0;
	padding:0;
	border:0;
	border-collapse:collapse;
	position:absolute;
	top:0;
	left:0px;
}
.tabs table td {
	padding:0;
}
/***
<div.tabs> <table> <ul> <li> <table> 
is the DEPTH-2 flyout-menu
***************************************/
/*
.tabs ul li table ul li table ul li {
	border: 0;
}
*/


/***
for non-IE browsers 
**********************/

.tabs ul li:hover ul {
	display:block;
	position:absolute;
	top:36px;
	left:0;
	border:0;
}
.tabs ul li:hover ul li {
	display:block;
	visibility: visible;
}

.tabs ul li:hover ul li a {
	display:block;
	background-image: url(../images/global/bullet-blue.gif);
	background-repeat: no-repeat;
	background-position: 13px 8px;
	height:auto;
	padding: 2px 7px 2px 24px;
	width:150px;
}

.tabs ul li:hover ul li a:hover {
	background-image: url(../images/global/bullet-white.gif);
	background-repeat: no-repeat;
	background-position: 13px 8px;
	width:150px;	
}

/***
IE (see main-ie6.css and main-ie8.css)  
*************************/
.tabs-end {
	float: left;
}


/***
<div.search> and <div.login> 
float next to <div.tabs>
****************************************/

.search {	
	float:left;
	width:187px;
	height:29px;
	background-image: url(../images/global/tabs/tabs-search-bg.gif);
	background-repeat: repeat-x;
	padding: 0; 
	margin: 0;
	
}
.search .searchform {
	width: 190px;
	height: 21px;
	padding: 0 0;
	margin:0;	
}
.search .searchinput { 
	background-image: url(../images/global/tabs/tabs-search-bg.gif);
	background-repeat: repeat-x;
	height: 17px;
	width: 112px;
	margin: 0 0 0 0px;
	padding: 3px 0 0 3px;
	font-size: 8pt;
	line-height: 8pt;
	float:left;
	border:0px;
}
.search .searchbutton {
	display:block;
	margin:0;
	padding:0;
}


.login {
/*
	float:left;
	padding: 0 0 0 14px;
*/
	margin: 0 0 0 892px;
	background-image: url(../images/global/tabs/login-bg.gif);
	background-position: top left;
	background-repeat: repeat-x;

}
.login img {
	float: none;
    margin-left: 0px;
}