@charset "utf-8";
/* CSS Document */
* {
	padding:0;
	margin:0;
	border:0;
}
body {
	background-image:url(images/bg.png);
	background-repeat:repeat;
	font-family: MyriadPro-Cond;
}
#overlay{
	opacity:0.2;
	background-color:#000000;
	width:100%; height:100%;
	display:none;
	position:fixed;
	top:0px;
	z-index:10;
}
#modal, #modal .element ,#preload{
	behavior: url(PIE.htc);
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
#tooltip,#legend .content .item div.example,#modal .close{
	behavior: url(PIE.htc);
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-khtml-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-khtml-border-radius-topright: 5px;
	-khtml-border-radius-topleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
#modal{
	display:none;
	z-index:11;
	position:absolute;
	padding:15px;
	width:450px;
	top:190px;
	left:266px;
	background-color:#ffffff;
}
#modal .element{
    float: left;
    width: 160px;
    height: 160px;
    position: relative;
}
#modal .element .number{
    position: absolute;
    left: 7px;
    top: 5px;
}
#modal .element .mass{
    position: absolute;
    right: 7px;
    top: 5px;
}
#modal .element .symbol{
    font-size: 91pt;
}
/* solid */
#modal .element .symbol.bus-1 {
	color:#eaeaea;
}
/* liquid */
#modal .element .symbol.bus-2 {
	color:#caefcd;
}
/* gas */
#modal .element .symbol.bus-3 {
	color:#fdacac;
}
/* synthetic */
#modal .element .symbol.bus-4 {
	color:#707071;
}
#modal .element .name{
    position:absolute;
    text-align: center;
    vertical-align: middle;
    font-size: 13pt;
	bottom:3px;
	left:53px;
}
#modal .details{
    float: right;
	position:relative;
	right:30px;
}
#modal .detail table{
	border-collapse:collapse;
}
#modal .details table tr td:first-child{
	padding-right:5px;
	text-align:right;
}
#modal .details table tr td:last-child{
	color:#F00;
	text-align:left;
}
#modal .details .radioactive{
	position:absolute;
	top:0px;
	right:-22px;
	display:none;
	background-image:url(images/radioactive-b.png);
	width:26px; height:26px;
	background-repeat:no-repeat;
}
#tooltip{
	background-color:#fff;
	position:absolute;
	bottom:22px;
	text-align:center;
	left:-5px;
	z-index:20;
	padding:5px;
	display:none;
	-webkit-box-shadow: 0px 0px 6px #000;
	-moz-box-shadow: 0px 0px 6px #000;
	box-shadow: 0px 0px 6px #000;
}
.tooltip{
	cursor:pointer;
}
@font-face {
 font-family: MyriadPro-Cond;
 src: url(fonts/MyriadPro-Cond.otf) format('opentype');
}
table#chem {
	border-collapse:collapse;
}
table#chem tr td {
	width:60px;
	height:60px;
	cursor:pointer;
}
table#chem tr td div {
	position:relative;
}
table#chem tr td.block {
	border:0;
	cursor:default;
}
table#chem tr td.group {
	cursor:default;
	border:0;
	text-align:center;
	vertical-align:bottom;
	font-family:MyriadPro-Cond;
}
table#chem tr td.group span {
	color:#F00;
}

/* big ones */

/* alkaline */
#modal .element.type-1 {
	background-image:url(images/grads/alkalines-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* alkaline earth */
#modal .element.type-2 {
	background-image:url(images/grads/alkalines_earth-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* trans metals */
#modal .element.type-3 {
	background-image:url(images/grads/trans_metals-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* other metals */
#modal .element.type-4 {
	background-image:url(images/grads/other_metals-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* Lantanoides */
#modal .element.type-5 {
	background-image:url(images/grads/lantanoides-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* actinoides */
#modal .element.type-6 {
	background-image:url(images/grads/actinoides-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* half-metals */
#modal .element.type-7 {
	background-image:url(images/grads/hmetals-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* non-metals */
#modal .element.type-8 {
	background-image:url(images/grads/nmetals-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* halogenes */
#modal .element.type-9 {
	background-image:url(images/grads/halogenes-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* gas */
#modal .element.type-10 {
	background-image:url(images/grads/gas-b.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}

/**/
/* alkaline */
table#chem tr td.type-1 , .t1{
	background-image:url(images/grads/alkalines.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* alkaline earth */
table#chem tr td.type-2, .t2 {
	background-image:url(images/grads/alkalines_earth.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* trans metals */
table#chem tr td.type-3, .t3 {
	background-image:url(images/grads/trans_metals.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* other metals */
table#chem tr td.type-4, .t4 {
	background-image:url(images/grads/other_metals.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* Lantanoides */
table#chem tr td.type-5 , .t5{
	background-image:url(images/grads/lantanoides.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* actinoides */
table#chem tr td.type-6, .t6 {
	background-image:url(images/grads/actinoides.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* half-metals */
table#chem tr td.type-7, .t7 {
	background-image:url(images/grads/hmetals.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* non-metals */
table#chem tr td.type-8, .t8 {
	background-image:url(images/grads/nmetals.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* halogenes */
table#chem tr td.type-9, .t9 {
	background-image:url(images/grads/halogenes.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
/* gas */
table#chem tr td.type-10, .t10 {
	background-image:url(images/grads/gas.png);
	background-repeat:repeat;
	text-align:center;
	vertical-align:middle;
}
table#chem tr td:hover {
	background-position:0px 62px;
}
table#chem tr td span.num {
	position:absolute;
	top:-7px;
	right:6px;
	font-size:9pt;
	color:#ffffff;
	text-shadow:1px 1px 1px #000;
	font-family:MyriadPro-Cond;
}
table#chem tr td img[alt=radioactive] {
	position:absolute;
	top:-5px;
	left:3px;
}
/* solid */
.simbolis.bus-1 {
	color:#eaeaea;
}
/* liquid */
.simbolis.bus-2 {
	color:#caefcd;
}
/* gas */
.simbolis.bus-3 {
	color:#fdacac;
}
/* synthetic */
.simbolis.bus-4 {
	color:#707071;
}
table#chem tr td span.simbolis {
	font-size:29pt;
	text-shadow:1px 1px 1px #000;
	font-family:MyriadPro-Cond;
}
table#chem.actin,table#chem.extend{
	position:relative;
	top:26px;
}
table#chem tr.lantan,table#chem tr.actin{
	display:none;
}
table#chem tr td.lan .simbolis{
	font-size:23px !important;
}
table#chem tr td.lan .num{
	top:-17px !important;
}
table#chem tr td.act .simbolis{
	font-size:23px !important;
}
table#chem tr td.act .num{
	top:-17px !important;
}
#legend{
	position:relative;
	top:40px;
	width:500px;
}
h3.legend{
	cursor:pointer;
}
#legend .content{
	float:left;
}
#legend .content2{
	float:right;
}
#legend .content .item,#legend .content2 .item{
	display:block;
	margin-bottom:5px;
        cursor: pointer;
}
#legend .content .item div , #legend .content .item p,#legend .content2 .item div , #legend .content2 .item p{
	display:inline-block;
}
#legend .content .item div.example{
	width:51px;height:27px;
	margin-right:5px;
	border:1px solid #b8b8b8;
}
#legend .content2 .item div.simbolis{
	font-size:36px;
	margin-right:10px;
}
#footer{
	clear:both;
	height:150px;
}
#preload{
	padding:10px;
	background-color:#ffffff;
	position:absolute;
	top:250px;
	left:500px;
	z-index:11;
}
#modal .close{
	position:absolute;
	background-color:#000;
	right:-12px;
	width:30px;
	height:30px;
	top:-10px;
	color:#ffffff;
	cursor:pointer;
	text-align:center;
	vertical-align:middle;
	font-size:27px;
}
#ads{
    position: absolute;
    right: -500px;
    bottom: -180px;
}
#ads .item{
    margin-bottom: 5px;
    opacity:0.3;
}
#ads .item:hover{
    margin-bottom: 5px;
    opacity:1;
}
.invinsible{
    opacity:0.2;
}