@charset "UTF-8";

/* Hiding Data References During Page Load 
http://labs.adobe.com/technologies/spry/samples/data_region/HideDataReferencesSample.html  */ 

.SpryHiddenRegion {
	visibility: hidden;
}
.preloader {
	display: none;
}
.nowrap {
	white-space: nowrap;
}
.center {
	text-align: center;
}

#filter * {
	font-family:Arial, Helvetica, Geneva, Verdana, sans-serif;
}
#filter {
	position: relative;
	/*border: solid 1px #FFF;*/
	background-color: transparent;
	width: 880px;
	height: 820px;
	text-align: center;
  margin: -15px 0 0 -15px;
	z-index: 1000;
}
div.tableContainer {
	clear: both;
	width: 880px;
	position: relative;
}
/* --------------------------------------- */

#filter .multipleFilter {
	position: relative;
	z-index: 10;
	float: left;
	width: 880px;
	color: #000;
	text-align: left;
	margin-bottom: 0;
	border: solid 1px #999;
	text-align: left;
}

#filter .essences-form {
	float: left;
	display: block;
	padding: 6px;
	background: #ccc url(/images/filter/bg_grad_4.gif) repeat-x 0 0;	
}
#filter .essences-form div#meridians, #filter .essences-form div#chakras {
	position: relative;
	width: 430px;
	float: left;
	clear: none;
	background:#fff url(/images/filter/bg_grad_1.gif) repeat-x 0 0;
	border: 1px solid #989898;
	
}
#filter .essences-form div#chakras {
	float: right;
}

/* - - - - - - - - grow thumbnail image - - - - - - - -  */

#key-wrapper {
	position: absolute;
	z-index: 3000;
	margin: 0;
	/*width: 420px; */
	height: 228px; /* 240px; */
	left: 294px;
	top: 106px;
}

#key-wrapper .key.grow {
	position: relative;
	left: 0;
	top: 0;
}
.key.grow .thumbnails {

}

div#meridians .key.grow {
}
div#chakras .key.grow {
	right: 0;
}
.key.grow .thumbs {
	clear: both;
	margin: 10px auto;
}
.key.grow .thumbnails div#meridian-key,
.key.grow .thumbnails div#chakra-key {
	position: relative;
	width: 142px;
	height: 228px;
	float: left;
	display: inline;
	margin-right: 6px;
	padding: 0;
}
.key.grow .thumbnails div#chakra-key { 
	margin-right: 0;
}
.key.grow .thumbnails div#key-image-left,
.key.grow .thumbnails div#key-image-right {
	top: 0px;
	left: 0px;
	width: 142px;
	height: 228px;
	position: relative;
	
	border: 1px solid #989898;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* Full Size: 520 x 325 */
.key.grow .thumbnails img { 
	top: 0px;
	left: 0px;
	width: 142px;
	height: 228px;
	position: absolute;
	
	border: none;
	/*border: 1px solid #989898;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;*/
}
.key.grow .thumbnails div#chakra-key img {
	
}

/* indicator point (ip) */
.key.grow .thumbnails img.ip {
	/*width: 142px;
	height: 142px;*/
	visibility: hidden;
	z-index: 3001;
	border: none;
}
.active  {
	visibility: visible !important;
}


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

img.essence-image {
	position: relative;
	margin: 0;
	width: 51px;
	height: 65px;
	float:left;
	margin:0 10px 5px 0;
}

/* - - - - - - - - tooltip for essence image - - - - - - - -  */ 

/* see also: SpryTooltip.css */

img.essence-image-large {
	position: relative;
	margin: 0;
	width: 127px;
	height: 162px;
	float:left;
	margin:0;
	border: 2px solid #fff;
}


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

#filter .essences-form div ul {
	position: relative;
	display: block;
	width: 245px;
	height: 215px;
	text-decoration: none;
	padding: 4px;
	margin: 2px 0 5px 0;
}

#filter .essences-form li {
	float: left;
	display: block;
  position: relative;
	width: 48%; /* 23.5%; */
	text-decoration: none;
	list-style: none;
	height: 17px;
	/*padding: 3px 2px 0 0;*/
	font-size: 11px;
  margin-bottom: 8px;
  background: none; /* overrides colors specifited in the classes: m01, m02, ... & c01, c02, ...  */
  /*text-indent: 3px;*/ 
 
}
#filter .essences-form li:hover {
	color: #6633ff;
}
#filter .essences-form li span {
	display: block;
  /*position: absolute;
  left: -2px;*/
  float: left;
  position: relative;
  width: 20px;
  height: 16px;
  margin-right: 3px;
}
#filter .essences-form input {
	/*line-height: 1.75em;*/
	/*margin: 0px 6px 0 1px;*/
	/*vertical-align: middle;*/
	position:absolute;
	display: block;
	margin: 0;
	padding: 0;
}
#filter .essences-form li input {
	position: relative;
  z-index: 20;
  margin: 0 auto;
  margin-top: 1px;
  vertical-align: middle;
  height: 16px;
}
#filter input {
	position: relative;
	font-size: 1em;
}

/* colors (style applied to span, etc.) */
.m01, .m02 {
	background: #ff00ff;
}
.m03, .m04 {
	background: #00ff00;
}
.m05, .m06 {
	background: #9900ff;
}
.m07, .m08 {
	background: #ff6600;
}
.m09, .m10 {
	background: #cc0000;
}
.m11, .m12 {
	background: #0066ff;
}
.c01 {
	background: #990066;
}
.c02 {
	background: #6600ff;
}
.c03 {
	background: #000066;
}
.c04 {
	background: #006666;
}
.c05 {
	background: #ff0066;
}
.c06 {
	background: #ff8f00;
}
.c07 {
	background: #13007c;
}
.c08 {
	background: #ff8900;
}
.c09 {
	background: #ff6900;
}
.c10 {
	background: #0d3695;
}
.c11 {
	background: #064d66;
}
.c12 {
	background: #ffa300;
}
.c13 {
	background: #e20000;
}


#filter .essences-form div#chakras ul {
	float: right;
	width: 220px;
}

#filter .essences-form h2 {
	margin: 0;
	font-size: 1.15em;
	text-align: center;
	background: #ffcd93; /* #ffcd93 url(header_bg.gif) repeat-x 0 -4px; */
	text-shadow:0 1px 0 #FFFFFF;
	border-bottom: 1px solid #333;
	padding: 2px 0;
	
}
#filter .instructions {
	position: relative;
	display: block;
	float: left;
	clear: both;
	padding: 1% 1%;
	width: 98%;
	overflow: hidden;
}
#filter .instructions a {
	font-size: 1em;
	color: #d67c11;
}
#filter .instructions a:hover {
	color: #6699FF !important;
}
#filter .instructions p {
	display: inline;
	float: left;
	clear: none;
	width: 48%;
	line-height: 1.5em;
	font-size: .85em;
	color: #eee;
	margin: 0;
}
#filter .essences-form p.left {
	width: 65.5%;
}
#filter .essences-form p.right {
	display: inline;
	float: right;
	width: 34%;
	text-align: right;
}

#filter #instructions-key {
	left:12px;
	position:absolute;
	top:265px;
	width:300px;
	height: 37px;
	z-index:100;
}
#filter #instructions-key p {
	text-align: left;
	line-height: 1.5em;
	font-size: .85em;
	color: #6633ff;
	margin: 0;
	padding: 2px;
}




/* BUTTON SIZES  */
.nav-buttons { overflow: visible; margin: 0; padding: 0;  } /* DO NOT USE: position: absolute;  - IT COVERS OTHER LINKS  */
		#filter .essences-form .nav-buttons { position: relative;  }
.nav-buttons .large { width: 128px; height: 24px; margin: 0px 0px;  position: relative; /* relative */ z-index: 10; overflow: hidden; } /* *margin-top: 15px;IE7win hack */
.nav-buttons .small { width:  70px; height: 24px; margin: 0px 0px;  position: absolute; /* relative */ z-index: 10;  overflow: hidden; }
/* ................................................ check instructions icon height (should be 32px) .................................... BH  */
.nav-buttons .large input { float: left; width: 128px; height: 24px; padding-top: 24px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; }
.nav-buttons .small input { float: left; width:  70px; height: 0; padding-top: 24px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; }

/* hover and active  */
.nav-buttons .large input:hover,
.nav-buttons .small input:hover { background-position: 0 -24px; }

.nav-buttons .large input:active,
.nav-buttons .small input:active { background-position: 0 -48px; border-bottom: 1px solid #666; }

/*  BUTTONS */

/* Multiple Filter Chooser */
#meridian-show-all.large input { background: url(/images/filter/button_show_all_meridians.gif); }
#meridian-remove-all.large input { background: url(/images/filter/button_remove_all_meridians.gif); }
#chakra-show-all.large input { background: url(/images/filter/button_show_all_chakras.gif); }
#chakra-remove-all.large input { background: url(/images/filter/button_remove_all_chakras.gif); }
/* ---- */

#filter .essences-form .button-wrapper {
	width: 99%;
	height: 24px;
	position: absolute;
	bottom: 5px;
	margin: 0 1%;
}

/* div for each filter show & hide buttons */
#filter .essences-form .nav-buttons div {
	margin-right: 5px; /* 20px; */
	float: left;
	clear: none;
}
div#chakras .nav-buttons  { 
	margin-right: 0;
	margin-left: 5px;
	float: right; 
}	

/*#filter .essences-form li.button-wrapper input.show-clear {
	margin-right: 20px;
	float: left;
	width: 11em;
	text-align: center;
	font-size: .85em;
	padding: 0 30px 10px 0;
}
*/



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


#filter #essences-list {
	position: relative;
	z-index: 0;
	float: left;
	width: 100%;
	text-align: left;
}
#filter #essences-list table {
/*width: 100%;*/
}
#filter #essences-list table thead {
/*	display:block; 
	width:100%;
	margin-right: 5%;*/
	
}
#filter #essences-list table tbody {
	table-layout: fixed;
}
html > body tbody.scroll-content {
/*	display:block; 
	height:300px;
	overflow: auto;
	width:100%;
	
	margin-right: 5%;*/
}
/* make the TH elements pretty */
thead.fixedHeader th {
	/*background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;*/
	padding: 4px 3px;
	text-align: left;
}
/* --------------------------------------- */
#filter .message {
	position: relative;
	color: #990000;
	font-size: 1.25em;
	height: 0 !important;
	border: none !important;
	padding: 0 !important;
	
	overflow: visible;
}
#filter .message div {
	position: absolute;
	top: 30px;
	background: none !important;
	border: none !important;
	width:880px;
	left: 0;
}

.c1 td {
	background:#fffddb url(/images/filter/bg_grad_row_1.gif) repeat-x 0 0 !important;
}
.c2 td {
	background:#f3feff url(/images/filter/bg_grad_row_2.gif) repeat-x 0 0 !important;
}
#filter .highlited {
	background-color: #FFFFCC;
	color: #000000;
}
#filter .grayBG {
	background-color: #CCCCCC;
}
#filter pre {
	font-family: "Courier New", Courier, monospace;
	background-color: #F0F7FE;
	padding: 5px;
	overflow: auto;
	font-size: 1.1em;
	margin-left: 10px;
	margin-right: 10px;
	border: 1px solid #CCCCCC;
}
#filter h1 {
	text-align: center;
	background: #F3F3F3 url(/images/filter/header_bg.gif) repeat-x 0 -4px;
	text-shadow:0 1px 0 #FFFFFF;
	/*padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;*/
	font-size: 1.25em;
	line-height: 2em;
	padding: 0;
	overflow: hidden;
	color:#000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	margin: 0;
	text-align: center;
}
#filter h4 {
	color: #000099;
	font-variant: small-caps;
	font-size:120%;
}
#filter th {
	/*background-color: #F3F3F3;*/
	vertical-align: top;
	text-align: center;
}
#filter a {
	text-decoration: none;
	font-size: 1em;
	color: #CC6600;
}
#filter a:hover {
	text-decoration: none;
	color: #000099 !important;
}
#filter .essence-item {
/* width: 95%;
	margin-right: 5%; */
}
#filter .short-desc {
	margin-bottom: 4px;
}
#filter .long-desc {
/*display: block;
	float: left;
	clear: both;*/
}

#filter span.essence-name {
	color: #993300;
	font-size: 1.1em;
	margin-right: .25em;
}
#filter span.latin {
	color: #777;
	font-size: .85em;
}
#filter a.swap-plus-minus {
	height: 1em;
	font-size: .9em;
	color: #CC6600;
	display: block;
display:none; /* <<======= disabled (also enable padding-bottom: 5px    in filterScrollableTable.css:  tbody.scrollContent td, tbody.scrollContent tr.normalRow td  */
	
	/*margin: 3px 20px;*/
	
	float: left;
	text-align: right;
	margin-right: 5px;
	clear: both;
}
#filter a.swap-plus-minus img {
	display: inline;
	margin:0 5px 0 0;
}
#filter .buynow {
	float: left;
	clear: both;
	/*margin-right: 20px;*/
	width: 51px; /* same as essence-image */
	margin-right: 10px;
}
#filter .buynow a {
	font-size: .9em;
	/*color: #CC6600 !important;*/
	color: #fff;
	background-color: #777;
	border-right: #666 1px solid;
	border-bottom: #888 1px solid;
	padding: 1px 4px;
}
#filter .buynow a:hover {
	color: #FF9900 !important;
	background-color: #666;
	border-right: #666 1px solid;
	border-bottom: #888 1px solid;
	padding: 1px 4px;
}
#filter .buynow a:active {
	color: #FF9900 !important;
	background-color: #444;
	border-right: none;
	border-bottom: none;
	border-top: #999 1px solid;
	border-left: #888 1px solid;
	padding: 1px 4px;
}