@charset "utf-8";

/*
|--------------------------------------------------------------------------
| --- > TABS
|--------------------------------------------------------------------------
|
| @package		---
| @subpackage	Frontend - Tabs
| @company		---
| @phone		201-739-3887
| @fax			---
| @author		Joey Avino
| @email		javino@gabriels.net
| @link			---
| @copyright	---
| @requires		mootools.1.2.js / tabs.gif (you can edit using tabs.psd)
|
| NOTES: 	It's recommended you do not change the names of these class
|			but you specify an ID to use and add properties to that.
|
| 			Keep in mind that div { position: relative; } needs to be
|			set as global styles.
|
|			Use background images for borders for the tabs.
|			Specifying borders in CSS will throw off the positioning of
|			all of the elements and it's very difficult to fix. You may
|			use CSS borders for the content holder.
|
*/

/*
|--------------------------------------------------------------------------
| --- > TABS > SETUP
|--------------------------------------------------------------------------
|
| Use this area to position all of the elements on the page.
|
*/

	/* ----- 1: Set the width and position you want the entire tab box. -------------- */
	.tab_wrapper { width: 403px; }

	/* ----- 2: Set the height you want the tabs using font style and padding (not height) -------------- */
	.tab_menu a { font: bold 12px Arial, Helvetica, sans-serif; padding: 8px 5px; color: #ffffff !important;}

	/* ----- 3: Set how you would like the tabs spaced. -------------- */
	.tab_menu li { margin-right: 3px; }

	/* ----- 4: Set the type of border/backround/font color you would like for the tabs -------------- */
	.tab_menu a { color: white; }

	/* ----- 5: Set the background/font/style attributes you want to use for the content pages. -------------- */
	.tab_content { font: 12px Arial, Helvetica, sans-serif; color: #666666 !important; padding: 2px; background: white;  }

	/* ----- 6: Set the border. If you don't want one, you may leave this blank.  -------------- */
	.tab_content {

		/* ----- Image or CSS Border -------------- */
		border: 1px solid #aab0bc;
		/* ----- Set this to the negation of the stroke of your border -------------- */
		top: -1px;		
	}

	/* ----- 7: Set what you want the tab to look when on that page. -------------- */
	.tab_menu a.selected { color: #CC0000 !important; background-position: 0px 0px; }

	/* ----- 8: Set what you want the tab to look when rolled over. -------------- */
	/* ----- 	We don't use a:hover. -------------- */
	.tab_menu a.hover { color: #CC0000 !important; background-position: 0px -100px; }





	/* ----- ROUNDED CORNERS -------------- */
	/* ----- To use rounded corners on the tabs, use the below CSS. -------------- */
	/* ----- If you would like to omit rounded coreners, leave these items blank. -------------- */
	/* ------------------------------------------------------------------------------------------------------------------ */

	/* ----- 9: Set the background image of the li tag and the a to be the same thing. -------------- */
	.tab_menu li { 				background-image: url('/images/tabs.gif'); }
	.tab_menu a { 				background-image: url('/images/tabs.gif'); }
	.tab_menu a.selected  { 	background-image: url('/images/tabs.gif'); }
	.tab_menu a.hover { 		background-image: url('/images/tabs.gif'); }

		/* ----- Default image positioning as per tabs.psd -------------- */
		.tab_menu li { 				background-position: right 0px; }
		.tab_menu li.selected  { 	background-position: right -200px; }
		.tab_menu li.hover { 		background-position: right -100px; }
	
		.tab_menu a { 				background-position: 0px 0px; }
		.tab_menu a.selected  { 	background-position: 0px -200px; }
		.tab_menu a.hover { 		background-position: 0px -100px; }

	/* ----- 10: Set margin of the link to be the width of your rounded corner from the image file. -------------- */
	.tab_menu a { margin-right: 5px; }

	/* ----- 11: Set the padding-left of the a tag to be the number specified in step 2 added to the margin-right set in step 10. -------------- */
	.tab_menu a { padding-left: 10px; }



	
	

	


/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

/*
|--------------------------------------------------------------------------
| --- > TABS > NECESSARY ATTRIBUTES
|--------------------------------------------------------------------------
|
| Do not edit below this line. Experienced CSS developers only.
|
*/

	.tab_wrapper ul { margin: 0px; padding: 0px; }

	.tab_menu { z-index: 2; }
		.tab_menu li { cursor: pointer; display: inline; float: left; }
			.tab_menu li {}
				.tab_menu a { display: block; background-repeat: no-repeat; }
				.tab_menu .last_link { margin-right: 0px; }

			li span.rounded_left { top: 0px; left: 0px; display: none; z-index: 3; }
			li span.rounded_right { top: 0px; right: 0px; display: none; z-index: 3; }

	.tab_content { overflow: hidden; z-index: 1;  }
		/*.tab_page { display: none; }*/
	
	.clear { clear: both; }
	
	div { position: relative; }