/* *****************************   */
/*    CSS for It's Elemental 

	  NOVA 04.28.11 DCH
	  
	  							   */

/* *****************************   */

/* ***************************** */
/*     GENERAL STUFF             */
/* ***************************** */

* {

	padding: 0;
	margin: 0;

}

body {
	margin: 0;
	padding: 0;
	background-color: #666;
}

.interactive-container a:link, .interactive-container a:visited, .interactive-container a:active, .interactive-container a:hover {

	color: #666;
	text-decoration: none;
}

.horline {

	float: left;
	height: 1px;
	background-color: #d6d6d6;
}

.clearfix { clear: both; }


/* ***************************** */
/*      MAIN CONTENT BLOCKS      */
/* ***************************** */

.interactive-container {

	width:900px;
	height:500px;
	margin: 0;
	padding: 0;
	position: relative;
	border: 1px solid #336699;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	background: #ffffff url('../images/back-fade.jpg') no-repeat;

}

.interactive-container ul {

	list-style-type: none;
	padding: 0;
	margin: 0;	
}

.interactive-container li {

	padding: 0;
	margin: 0;	
}

.interactive-container h1 {

	width: 146px;
	height: 41px;
	background: url('../images/title.png') no-repeat;
	text-indent: -9999px;
	margin: 24px 0 55px 9px;
	padding: 0;
}

.interactive-container h2 {

	font-size: 11px;
	margin-top: 0;
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: bold;
	color: #666;
	
}

.selection-container {

	float: left;
	width:175px;
	/*height: 500px;*/ /* temp */
	padding: 0;
	margin: 0;	
}

.selection-container h2, .selection-container p, .selection-container ul, .selection-container form, .selection-container .horline {

	margin: 0 0 0 11px;
	padding: 0;
}

.selection-container p {
	
	margin-top: 12px;
	margin-bottom: 3px;
}

.selection-container form {
	
	margin-top: 0px;
	margin-bottom: 3px;
}

.selection-container .section-family {

	margin-top:45px;
}

.selection-container ul {

	padding: 0;
	margin: 10px 0 0 0;	
	line-height: 0;
}

.selection-container li {

	padding: 0;
	margin: 0 0 8px 11px;
	line-height: 12px;
	vertical-align: middle;
}

.periodic-table-container {

	float: left;
	width:715px;
	margin: 14px 0 0 10px;
	
}

.periodic-table-container-extras {

	position: relative;
	width:715px;
	bottom: 10px;
	
}

.pbs-nav {

	float: left;
	width:112px;
	height: 45px; /* temp */
	margin-top: 6px;

}

/* ***************************** */
/*   SELECTION CONTAINER BLOCK   */
/* ***************************** */

.title-divider {

	margin-top: 0px;
	width: 148px;
}

/* ***************************** */
/*   PERIODIC POPUP BLOCK        */
/* ***************************** */

/* gfx side */



.periodic-element-pu-gfx {

	float: left;
	width: 72px;
	background-color: #e6ecf3;
	padding: 6px;
	color: #666;
	font-weight: normal;
	font-size: 14px;
	border: 1px solid #ccc;

}

.periodic-element-pu-abbr {
	font-size: 36px;
	font-weight: bold;
	margin-top: 6px;
}


/* text side */

.periodic-element-pu-text {

	float: left;
	width: 195px;
	color: #333;
	margin-left: 7px;
	line-height: 14px;
}

.periodic-element-pu-text p {

	margin-top: 0px;
	margin-bottom: 2px;
	padding: 0;

}

.periodic-element-pu-name-format {
	font-size: 14px;
	font-weight: bold;
	
}

#filter-info p.periodic-element-pu-rank-section {

	margin-top: 12px;

}

.periodic-element-divider {

	margin-top: 2px;
	width: 195px;
	margin-bottom: 7px;
}



/* ***************************** */
/*   PERIODIC CONTAINER BLOCK    */
/* ***************************** */

.periodic-element-chart, .periodic-element-chart-slug {

	width: 30px;
	/*height: 38px;*/
	border: 1px solid #ccc;
	color: #666;
	font-weight: normal;
	font-size: 11px;
	padding: 3px 2px 1px 3px;
	margin:1px;

}

.periodic-element-chart-number {

}

.periodic-element-chart-abbr {

	font-weight: bold;

}

.periodic-element-chart-mass {

}

.periodic-element-chart-filtered {
	
	border: 1px solid #000;
	color: #000;
	
}

.periodic-element-chart ul, .periodic-element-chart-slug ul {

	list-style-type: none;
	padding: 0;
	margin: 0;	
	line-height: 0;

}

.periodic-element-chart li, .periodic-element-chart-slug li {

	padding: 0;
	margin: 0 0 1px 0;
	line-height: 12px;

}

.element-active {
	border: 1px solid #000;

}

.slug-explain {
	font-size: smaller;
}

.hide-info {
	display: none;
}


/* ***************************** */
/*      FILTER BLOCK             */
/* ***************************** */

.filter-hit {
	color: #000;
	border: 1px solid #000;

}

.family-alkali.filter-hit { background-color: #b9eeb9 }
.family-alkali { background-color: #e6f9e6 }

.family-alkaline.filter-hit { background-color: #ffcaa8 }
.family-alkaline { background-color: #ffe8d9 }

.family-transition.filter-hit { background-color: #b9cadc }
.family-transition { background-color: #e1e8f0 }

.family-metalloids.filter-hit { background-color: #eeb9b9 }
.family-metalloids { background-color: #f9e6e6 }

.family-lathanides.filter-hit { background-color: #caffff }
.family-lathanides { background-color: #ecffff }

.family-actinides.filter-hit { background-color: #caa8ca }
.family-actinides { background-color: #ece0ec }

.family-nonmetals.filter-hit { background-color: #ffffa8 }
.family-nonmetals { background-color: #ffffe0 }

.family-halogens.filter-hit { background-color: #ffffa8 }
.family-halogens { background-color: #ffffe0 }

.family-noble.filter-hit { background-color: #ffb9dc }
.family-noble { background-color: #ffe6f3 }

.family-none { background-color: #fff }


.family-active { color: #336699; }

.family-list-style-type {

	float: left;
	width: 12px;
	height: 13px;
	border: 1px solid #666;
	margin: -2px 9px 0 0;

}



/* ********************* */
/*   PBS CREDITS BLOCK   */
/* ********************* */

.nova-link {

	float: left;
	margin-left: 25px;
	width: 61px;
	height: 19px;
	background: url('../images/nova.png') no-repeat;
}

.pbs-link {

	float: left;
	margin-left: 7px;
	width: 19px;
	height: 19px;
	background: url('../images/pbs.png') no-repeat;
}

.credits-divider {

	float: left;
	margin-left: 9px;
	margin-top: 5px;
	width: 103px;
	height: 1px;
	background-color: #c2c2c2;
}

.credits {

	float: right;
	margin-top: 4px;	
}

/* ********************* */
/*   FAMILY POPUP TEXT   */
/* ********************* */

p.family-text {

	margin-top: 0px;
	margin-bottom: 6px;

}

.family-text .title {

	font-weight: bold;

}