body {
	background-color: #333333;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:link {
	color: #eee;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #eee;
}
a:hover {
	text-decoration:underline;
	color: #eee;
}
a:active {
	text-decoration: none;
	color: #eee;
}

/* loading frame */
#loading {
	height: 200px;
	width: 320px;
	margin-left: -160px;
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 200px;
	font-family:Verdana, Geneva, sans-serif;
	color:#FFF;
	line-height:40px;
	text-align:center;
}
#loading .title {
	font-size:18px;
}
#loading .normal {
	font-size:14px;
}
#loading #pro-frame {
	position: absolute;	top: 80px; left: 60px; width: 200px; height: 4px; z-index:0;
	background-color:#666;
	-webkit-border-radius:2px;
}
#loading #pro-bar {
	position: absolute; top: 80px; left: 60px; height: 4px; z-index:1;
	background-color:#ccc;
	-webkit-border-radius:2px;
}


/* top bar */
#top-bar {
	position: absolute;	width: 100%; left: 0px; height: 50px;	top: 0px; z-index: 0;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #444), color-stop(0.53, #000));
	text-align:center; color:rgba(255, 255, 220, 0.9); font-family:"Arial Rounded MT Bold"; font-size: 22px; line-height: 50px;
	padding-top: 1px;
}
#top-bar-glossy {
	position: absolute;	width: 100%; left: 0px; height: 25px;	top: 0px; z-index: 1;
	background-color:rgba(255, 255, 255, 0.2);
}
#top-bar #btn-facebook {
	position:absolute; top:14px; right:10px; width:25px; height:25px; cursor:pointer;
	background-repeat:no-repeat; background-image:url(../img/facebook1.png);
	font-size:20px; line-height:25px;
}
#top-bar #btn-twitter {
	position:absolute; top:14px; right:50px; cursor:pointer;
}
#top-bar #btn-home {
	position:absolute; top:9px;left:15px; width:120px; height:32px; cursor:pointer; line-height:32px; text-align:center;
	background-image:-webkit-gradient(linear, right bottom, right top, color-stop(0, #36f), color-stop(0.53, #369));
	font-size:15px; font-family:Arial, Helvetica, sans-serif; 
	-webkit-border-radius:4px;
}


/* periodic table */
#peri_table {
	position: absolute;	top: 50px; height: 600px; width: 704px;
	background-image:url(../img/pad/periodic_table.jpg); background-position:center center;	background-repeat:no-repeat;
}
.peri_table_v{
	left: 32px;
}
.peri_table_h {
	left: 0px;
}
#peri_table .element_btn {
	position:absolute; width: 36px; height: 36px; cursor:pointer;
	-webkit-border-radius: 5px;
	border:none;
}
#peri_table .element_btn_highlight {
	position:absolute; width: 36px; height: 36px; cursor:pointer;
	-webkit-border-radius: 5px;
	border:2px solid #FF0;
}

/* property panel */
#property_panel {
	position: absolute; bottom:0px;
	background-color: #222;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#eee;
}
.property_panel_h {
	width: 320px; right:0px; 
}
.property_panel_v {
	width: 768px; left:0px;
}
#panel_title {
	position: absolute; width: 100%; height: 30px; top:0px; left:0px;
	font-size: 15px; text-indent: 20px; line-height:30px;
	background-color:#666;
	border-bottom: 1px solid #666;
}
#element_symbol {
	position: absolute;	width: 200px; height: 140px; top: 30px; left:0px;
	border-bottom:1px solid #666;
}
#element_symbol #ele_name {
	text-align:center; line-height:100px; font-size:70px; color:#FF0;
}
#element_symbol #ele_fullname {
	text-align:center; line-height:40px; font-size:22px;
}
#element_img {
	position: absolute;	width: 200px; height: 150px; top: 170px; left:0px;
	background-position:center center; background-repeat:no-repeat;
	font-size: 15px; text-align: center; color:#FC6; line-height: 150px;
}
#element_property {
	position: absolute;	width: 320px; height:280px;
	text-indent: 20px; line-height:30px; font-size:16px; padding-top:10px;
}
.element_property_h {
	border-left: none; border-right: none; border-top:1px solid #666;
	left:0px; top:320px;
}
.element_property_v {
	border-left:1px solid #666; border-right: 1px solid #666; border-top: none;
	left:200px; top:30px;
}
#ext_link {
	position: absolute; width:248px; top:30px; right:0px;
	font-size: 14px; line-height:40px; text-indent: 20px;
}
#ads_v {
	position:absolute; width: 180px; height:150px; top:160px; right: 30px;
	background-color:#222;
}
#ads_h {
	position:absolute; width: 320px; height:50px; bottom:0px; right:0px;
	background-color:#222;
}


/* search box */
#search_box {
	position:absolute; top: 10px; right:10px; width:220px;
	color:#FFF; font-size: 15px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* calculation box */
#cal_switch {
	position: absolute; width: 150px; left: 20px; top: 10px; height:34px;
	background-image:url(../img/pad/calculator_btn.png); background-position:left center; background-repeat:no-repeat;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px;	color: #fff; line-height:17px; padding-left:44px;
	cursor: pointer;
}
#cal_box {
	position: absolute; width: 320px; left: 120px; top: 10px; height: 140px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px;	color: #fff; background-color: #bbb;
	-webkit-border-radius: 6px; -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8);	
}
#cal_close {
	position: absolute; width:20px; height: 20px; top: -5px; right:-5px;
	line-height:20px; text-align:center; color:#333; background-color:#fff; font-size: 14px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;
	-webkit-border-radius: 10px; -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8);	
	cursor: pointer;
}
#cal_display {
	position:absolute; top: 20px; left: 10px; width: 290px; height:40px;
	background-color:#eee; padding-right: 10px;
	overflow:hidden;
	text-align:right; line-height:40px; color:#222;
	-webkit-border-radius: 3px;
}
.cal_key_num {
	position: absolute; width:25px; height: 25px;
	line-height:25px; text-align:center; color:#333; background-color:#eee; font-size: 15px;
	-webkit-border-radius: 11px;
	cursor: pointer;
}
.cal_key_other {
	position: absolute; width:80px; height: 25px;
	line-height:25px; text-align:center; color:#333; background-color:#eee; font-size: 15px;
	-webkit-border-radius: 11px;
	cursor: pointer;
}
#cal_tip {
	position:absolute; top:145px; left:-15px;  width:360px;
	font-size: 13px; color:#FFC;
}

/* footage */
#footage {
	font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #999; text-align: center; padding-top: 5px;
	position: absolute; left: 0px;	bottom: 8px; height: 16px;
	border-top: #666 1px solid;
	z-index: 2;
}
.footage_v {
	width: 768px;
}
.footage_h {
	width: 704px;
}