/*----------------------------------
indexTabs.css
Author: Andrew Sherman
Client: RFIDTags.com
Decrip: Stylehseet for index tabs
-----------------------------------*/

/*---
temp styles for test page !!DELETE ON DEPLOY
----*/

* {
	margin: 0;
	padding: 0;
}

div#wrapper {
	width: 600px;
	padding-top: 20px;
	margin: 0 auto;
}


/*--------------------------
TOC
=tabBox
=tabs
	=individual tab styling
=scroller
=content
=panels
	=inner panel styling
--------------------------*/

/*--------------------------------------------
=tabBox - parent container for full tab piece
---------------------------------------------*/

#tabBox {
	/*position: relative;*/
	width: 592px;
	padding-bottom: 10px;
	background: #D4D5D6;
}

/*-------------
=tabs - tabs
-------------*/

ul#tabs {
	/*position: absolute;*/
	position: relative;
	width: 592px;
	height: 51px;
	margin: 0 auto -1px;
	list-style: none;
	/*background: #ff0000;*/
	}
	ul#tabs li {
		position: absolute; /*IF using position ab to position and gain active tab high index, hover low index!!*/
		width: 143px;
		/*text-indent: -9999px;*/
		/*top: 0;/*?*/
		text-align: center;
	}
	ul#tabs li.active {
		/*background-position: bottom left;/*positions sprite correctly for state*/
		height: 51px;
		/*z-index: 10;/*? this is supposed to bring item to front but items already all at front*/
	}
	ul#tabs li:hover {
		background-position: bottom left;/*!!doesn't work*/
		}
		ul#tabs li a {
			display: block;
			height: 34px;/*51-17*/
			padding-left: 35px;
			padding-top: 17px;
			font-family: tahoma, arial;
			font-size: 12px;
			color: #3474A4;
			font-weight: bold;
			text-decoration: none;
			outline-style:none; /*removed dotted line on click*/
}

/*---------------------
=individual tab styling
----------------------*/
/*=readerTypeBtn*/
ul#tabs li#readerTypeBtn {
	margin-left: 10px;
	background: url(images/tabs/readerTypeBtnSprite.png) no-repeat top left;
}
ul#tabs li#readerTypeBtn:hover {
	background: url(images/tabs/readerTypeBtnSprite.png) no-repeat center left;
}
ul#tabs li#readerTypeBtn.active {
	background: url(images/tabs/readerTypeBtnSprite.png) no-repeat bottom left;
}

/*=manufBtn*/
ul#tabs li#manufBtn {
	margin-left: 152px;
	background: url(images/tabs/manufacturerBtnSprite.png) no-repeat top left;
}
ul#tabs li#manufBtn:hover {
	background: url(images/tabs/manufacturerBtnSprite.png) no-repeat center left;
}
ul#tabs li#manufBtn.active {
	background: url(images/tabs/manufacturerBtnSprite.png) no-repeat bottom left;
}

/*=freqBtn*/
ul#tabs li#freqBtn {
	margin-left: 294px;
	background: url(images/tabs/freqBtnSprite.png) no-repeat top left;
}
ul#tabs li#freqBtn:hover {
	background: url(images/tabs/freqBtnSprite.png) no-repeat center left;
}
ul#tabs li#freqBtn.active {
	background: url(images/tabs/freqBtnSprite.png) no-repeat bottom left;
}

/*=cSearchBtn*/
/*
ul#tabs li#cSearchBtn {
	margin-left: 436px;
	background: url(images/tabs/tagTypeSprite.png) no-repeat top left;
}
ul#tabs li#cSearchBtn:hover {
	background: url(images/tabs/tagTypeSprite.png) no-repeat center left;
}
ul#tabs li#cSearchBtn.active {
	background: url(images/tabs/tagTypeSprite.png) no-repeat bottom left;
}
*/


/*--------------------------------------------------------------------------
=scroller - window through which content is visible
	*- scroller will need to increase/decrease in size based on size of panel
---------------------------------------------------------------------------*/

div#scroller {
	width: 588px;
	/*height: 349px;*/
	/*height: 500px;*/
	margin-left: 2px;
	border-top: 1px solid #BBBCBD;
	background: #fff;
	overflow: hidden;
}

/*-----------------------------------------------------------------------
=content - container for content panels -> content panels go inside here
-----------------------------------------------------------------------*/

div#tabContent {
	width: 588px;
	/*height: 600px;*/
}

/*------
=panels
--------*/

div#vMarketPanel, div#appPanel, div#freqPanel, div#cSearchPanel {
	width: 588px;
	/*height: 500px;*/
	/*background: #ff0000;*/
}


/*-------------------
=inner panel styling
--------------------*/

div#tabContent div h2 {
	/*margin-top: 20px; -> use padding instead to avoid first element spacial issues with tab bottom*/
	/*padding-top: 20px;*/
	padding-top: 10px;
	margin-bottom: 0px !important;
	font-weight: bold;
	font-size: 17px;
	color: #3474A4;
	font-family: arial;
	clear: left;
	}
	div#tabContent div h2 a {
		font-weight: bold;
		font-size: 17px;
		color: #3474A4;
		font-family: arial;
		text-decoration: none;
	}
	div#tabContent div h2 a:hover {
		text-decoration: underline;
}
div#tabContent div p {
	/*margin-top: 0;*/
	margin-top: 5px;
	/*font-size: 11px;*/
	font-size: 13px;
	font-family: arial;
	line-height: normal !important;
}
div#tabContent div h2, div#tabContent div p {
	margin-left: 75px;
	margin-right: 10px;
}
div#tabContent div p.img {
	display: inline;
	margin-left: 5px;
	/*margin-top: -5px !important;*/
	margin-top: -25px !important;
	float: left;
}

/*-----------------------------------------------
top top links on headers -> non-js fallback only
-----------------------------------------------*/
a.toTopLink {
	font-size: 11px !important;
}

/*-------------------------------------------------------------
tab description text -> text above tabs to describe its usage
---------------------------------------------------------------*/

p#indexTabsDescrTxt {
	font-size: 11px;
	color: #666;
	font-weight: bold;
}