/* --------------------------------------------------------- */
/*                        Periodic Table                              */
/*                www.periodni.com    2011                   */
/* --------------------------------------------------------- */

#psedesni {
	position: relative;
	top: 0px;
	left: 0px;
 	margin: auto;
	border: 0px  #cacaba solid;
	width: 850px;
}
#footer {
	position: relative;
	width: 100%;
	margin-top: 0px;
	clear: both;
}
#nocss {
	position: absolute;
	top:0px;
	left:-6000px;
	clear: both;
}
h1 {
	position: relative;
	margin: 0;
	top: 15px;
	left: 0;
	width: 100%;
	color: #238e68;
	font: bold 20pt cursive;
	text-align: center;
}

img {border: 0px;}
p {
	margin: 0;
	padding: 0;
	text-align: justify;
	color: #123456;
}

a:link {
	color: #000000;
	text-decoration: none;
 }
a:visited {
	color: #000000;
	text-decoration: none;
 }
a:active {
	color: #000000;
	text-decoration: none;
 }
a:hover {
	color: #00f;
	text-decoration: none;
 }


/* ------------------------------------------- */
/*                     GOOGLE                      */
/* ------------------------------------------ */
.google-search {
	position: absolute;
	top: 60px;
	left: 195px;
	font: normal 11pt sans-serif;
	border: 0px solid #cacaba;
}

/* --------------------------------------------------------- */
/*      PERIODNI  SUSTAV  ELEMENATA          */
/*      p = periode    s = skupine    e = elementi      */
/* --------------------------------------------------------- */
.periodni {
	position: relative;
	top: 0px;
	left: 0px;
	width: 850px;
	height: 572px;
	border: 0px  #f00 solid;
}
.periodni h1 {
	position: relative;
	margin: 0px;
	top: -0px;
	left: 20px;
	width: 718px;
	color: #123456;
	font: bold 22pt cursive;
	text-align: center;
}
.sy, .sysh {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 100%;
	color: #000;
	padding: 15px 0px 19px 1px;
	font: bold 11pt serif;
	text-align: center;
}
.sysh {
	top: 0px;
	left: 0px;
}
.ab {
	position: absolute;
	top: 1px;
	left: 3px;
	color: #000;
	font: 7pt serif;
	text-align: left;
}
.mm {
	position: absolute;
	top: 36px;
	width: 100%;
	color: #000;
	font: 8pt serif;
	text-align: center;
}
a.bs:link {color: #fff;}
a.bs:visited {color: #fff;}
a.bs:active {color: #f00;}
a.bs:hover {color: #f00;}

a.sy:link {display: block; width: 100%;}
a.sy:visited {display: block;}
a.sy:active {display: block;}
a.sy:hover {
	display: block;
	/* background: #ddf; */
	color: #00f;
	border: 1px inset #eee;
}

.ab-lac, .sy-lac {
	position: absolute;
	color: #000;
	text-align: center;
	width: 38px;
}
.ab-lac {
	top: 10px;
	font: 7pt serif;
}
.sy-lac {
	top: -1px;
	left: -1px;
	padding: 28px 0px 8px 1px;
	font: bold 10pt serif;
}
a.sy-lac:link {display: block;}
a.sy-lac:visited {display: block;}
a.sy-lac:active {display: block;}
a.sy-lac:hover {
	display: block;
	background: #ffd;
	color: #00f;
	border: 1px inset;
}
.lantanoidi, .aktinoidi {
 position: absolute;
 height: 32px;
 width: 105px; 
 color: #d00;
 font: 11pt serif;
 text-align: right;
 padding-top: 16px;
 left:0px;
}
.lantanoidi {top:435px;}
.aktinoidi {top:490px;}

#la-okvir, #ak-okvir {
 position: absolute;
 left:108px;
 height: 60px;
 width: 698px;

}
#la-okvir {top:429px;}
#ak-okvir {top:486px;}
.vidi {background: #ef2; visibility: visible;}
.nevidi {visibility: hidden;}
  
.copyr {
 position: absolute;
 left: 590px;
 top: 382px;
 color: #cacaba;
 font: 8pt sans-serif;
 text-align: left;
 }
.copyr a:link {color: #a8a9b9}
.copyr a:hover {color: #00f}


/* periode */
.p1, .p2, .p3, .p4, .p5, .p6, .p7 {
 position: absolute;
 left: 0px;
 height: 32px;
 width: 20px;
 color: #e00;
 font: bold 10pt serif;
 text-align: center;
 padding-top: 16px;
}
.p1 {top: 20px;}
.p2 {top: 76px;}
.p3 {top: 132px;}
.p4 {top: 188px;}
.p5 {top: 244px;}
.p6 {top: 300px;}
.p7 {top: 356px;}

.e1, .e2, .e3, .e4, .e5, .e6, .e7, .e8, .e9, .e10 , .e11, .e12, .e13, .e14, .e15, .e16, .e17, .e18, .e19, .e20, .e21, .e22, .e23, .e24, .e25, .e26, .e27, .e28, .e29, .e30, .e31, .e32, .e33, .e34, .e35, .e36, .e37, .e38, .e39, .e40, .e41, .e42, .e43, .e44, .e45, .e46, .e47, .e48, .e49, .e50, .e51, .e52, .e53, .e54, .e55, .e56, .e57, .e58, .e59, .e60, .e61, .e62, .e63, .e64, .e65, .e66, .e67, .e68, .e69, .e70, .e71, .e72, .e73, .e74, .e75, .e76, .e77, .e78, .e79, .e80, .e81, .e82, .e83, .e84, .e85, .e86, .e87, .e88, .e89, .e90, .e91, .e92, .e93, .e94, .e95, .e96, .e97, .e98, .e99, .e100, .e101, .e102, .e103, .e104, .e105, .e106, .e107, .e108, .e109, .e110, .e111, .e112, .e57la , .e89ac {
 position: absolute;
 height: 53px;
 width: 43px;
 color: #fff;
 border: 1px outset #eee;
 padding: 0px;
 background: #baeafa;  /*plavo*/
 }
.e80, .e35 {
background: #ffd8a8;}  /*crveno*/
.e1, .e2, .e7, .e8, .e9, .e10, .e17, .e18, .e36, .e54, .e86 {
background: #afc;}  /*zeleno*/
.e57la , .e57, .e58, .e59, .e60, .e61, .e62, .e63, .e64, .e65, .e66, .e67, .e68, .e69, .e70, .e71  {
background: #dbebff;}  /*lantanoidi*/
.e89ac, .e89, .e90, .e91, .e92, .e93, .e94, .e95, .e96, .e97, .e98, .e99, .e100, .e101, .e102, .e103 {
background: #c2e2ff;}  /*aktinoidi*/ 

.e1, .e2 {
top: 20px;}
.e3, .e4, .e5, .e6, .e7, .e8, .e9, .e10 {
top: 76px;}
.e11, .e12, .e13, .e14, .e15, .e16, .e17, .e18 {
top: 132px;}
.e19, .e20, .e21, .e22, .e23, .e24, .e25, .e26, .e27, .e28, .e29, .e30, .e31, .e32, .e33, .e34, .e35, .e36 {
top: 188px;}
.e37, .e38, .e39, .e40, .e41, .e42, .e43, .e44, .e45, .e46, .e47, .e48, .e49, .e50, .e51, .e52, .e53, .e54 {
top: 244px;}
.e55, .e56, .e72, .e73, .e74, .e75, .e76, .e77, .e78, .e79, .e80, .e81, .e82, .e83, .e84, .e85, .e86, .e57la {
top: 300px;}
.e87, .e88, .e104, .e105, .e106, .e107, .e108, .e109, .e110, .e111, .e112, .e89ac  {
top: 356px;}
.e57, .e58, .e59, .e60, .e61, .e62, .e63, .e64, .e65, .e66, .e67, .e68, .e69, .e70, .e71 {
top: 432px;}
.e89, .e90, .e91, .e92, .e93, .e94, .e95, .e96, .e97, .e98, .e99, .e100, .e101, .e102, .e103 {
top: 488px;}

/* skupine */
.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12, .s13, .s14, .s15, .s16, .s17, .s18  {
 position: absolute;
 height: 32px;
 width: 38px;
 color: #e00;
 font: bold 10pt serif;
 text-align: center;
 } 
.s1, .s18 {top: 3px;}
.s2, .s13, .s14, .s15, .s16, .s17  {top: 59px;}
.s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {top: 170px;}

.s1 {left: 20px;}
.s2 {left: 66px;}
.s3 {left: 112px;}
.s4 {left: 158px;}
.s5 {left: 204px;}
.s6 {left: 250px;}
.s7 {left: 296px;}
.s8 {left: 342px;}
.s9 {left: 388px;}
.s10 {left: 434px;}
.s11 {left: 480px;}
.s12 {left: 526px;}
.s13 {left: 572px;}
.s14 {left: 618px;}
.s15 {left: 664px;}
.s16 {left: 710px;}
.s17 {left: 756px;}
.s18 {left: 802px;}

.e1, .e3, .e11, .e19, .e37, .e55, .e87 {
left: 20px;}
.e4, .e12, .e20, .e38, .e56, .e88 {
left: 66px;}
.e21, .e39, .e57la, .e57, .e89, .e89ac {
left: 112px;}
.e22, .e40, .e58, .e72, .e90, .e104 {
left: 158px;}
.e23, .e41, .e59, .e73, .e91, .e105 {
left: 204px;}
.e24, .e42, .e60, .e74, .e92, .e106 {
left: 250px;}
.e25, .e43, .e61, .e75, .e93, .e107 {
left: 296px;}
.e26, .e44, .e62, .e76 , .e94, .e108 {
left: 342px;}
.e27, .e45, .e63, .e77, .e95, .e109 {
left: 388px;}
.e28, .e46, .e64, .e78, .e96, .e110 {
left: 434px;}
.e29, .e47, .e65, .e79, .e97, .e111 {
left: 480px;}
.e30, .e48, .e66, .e80, .e98, .e112 {
left: 526px;}
.e5, .e13, .e31, .e49, .e67, .e81, .e99 {
left: 572px;}
.e6, .e14, .e32, .e50, .e68, .e82, .e100 {
left: 618px;}
.e7, .e15, .e33, .e51, .e69, .e83, .e101 {
left: 664px;}
.e8, .e16, .e34, .e52, .e70, .e84, .e102 {
left: 710px;}
.e9, .e17, .e35, .e53, .e71, .e85, .e103 {
left: 756px;}
.e2, .e10, .e18, .e36, .e54, .e86 {
left: 802px;}

.leg {color: #000;}
.leg-a, .leg-s, .leg-l, .leg-g , .leg-temp {
 position: absolute;
 top: 550px; /*550*/
 width: 134px;
 font: 11px/150% verdana,sans-serif;
 color: #fff;
 text-align: center;
 border: 1px outset;
 padding: 1px;
}

.leg-temp {
	left: 8px;
	width: 100px;
	background: #fff;  /*bijelo*/
}
.leg-s {
	left: 112px;
	background: #baeafa;  /*plavo*/
}
.leg-l {
	left: 250px;
	background: #ffd8a8;  /*crveno*/
}
.leg-g {
	left: 388px;
	background: #afc;     /*zeleno*/
}
.leg-a {
	left: 526px;
	width: 319px;
	background: #eee;     /*sivo*/
}

/* --------------------------------------------------------- */
/*                www.periodni.com    2011                  */
