@charset "UTF-8";

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}

/* Style */

html, body {
	height: 100%; width: 100%;
	overflow: hidden;
}

body {
	background: #f0f0f0 url('bg-body-shade.png');
}

small {
	font-size: 0.8em;
}

p {
	font-size: 15px;
}

:focus {
	background-color: #f0f0f0;
}

a {
	color: #000000;
	text-decoration: none;
}

span.more {
/*
	padding-left: 0.5em;
	font-size: 16px; line-height: 16px;
	color: #808080;
	text-decoration: none;*/
	
	display: none;
}

a.more {
	cursor: default;
}

/*a:hover {
	text-decoration: underline;
}*/

.card {
	float: left;
	height: 290px; width: 480px;
	margin: 0;
	background: transparent url('bg-card.png') center center no-repeat;
	font-family: 'gentilis', 'Georgia', '微軟正黑體', serif;
	white-space: nowrap;
}

.card .content {
	margin: 5px 10px;
	height: 280px;
}

.card-small {
	height: 193px; width: 320px;
	background: transparent url('bg-card-small.png') center center no-repeat;
	font-family: 'gentilis', 'Georgia', '微軟正黑體', serif;
	white-space: nowrap;

	position: absolute;
	display: none;
}

.card-small .content {
	margin: 5px 10px;
	height: 183px; width: 300px;
}

.cube {
	position: absolute;
	height: 96px; width: 160px;
	background: transparent url('bg-cube-m.png') center center no-repeat;
	display: none;
}

/*
#cube-1 {
	top: 1px;left: 580px;
}

#cube-2 {
	top: 50px;left: 870px;
}

#cube-3 {
	top: 350px;left: 900px;
}

#cube-4 {
	top: 500px;left: 900px;
}*/

#card-icon img {
	margin: 0 -2px;
}

#front {
	position: absolute;
	background: transparent url('bg-card-strip.png') center center no-repeat;
	float: none;
	top: 100px;
	left: 7px;
}

#front #card-icon {
	width: 60px; height: 60px;
	float: left;
	margin: 0;
	padding: 90px 10px 140px 10px;
	overflow: hidden;
}

#front .content {
	float: right;
	width: 380px;
	margin: 0 10px;
}

#front .content .col-2-left {
	width: 140px; margin-right: 20px;
	float: left;
}

#front .content .col-2-right {
	width: 220px;
	float: right;
}

.project {
	display: none;
}

/*
#moztw {
	display: block;
	top: 418px;
	left: 55px;
}

#gfxtw {
	display: block;
	top: 387px;
	left: 568px;
}

#stellarium {
	display: block;
	top: 178px;
	left: 680px;
}*/

#front h1 {
	font-size: 34px; line-height: 100%;
	font-family: 'gentilis', "Times New Roman", serif;
	font-weight: bold;
	padding-top: 20px;
	text-shadow: #808080 0 0 2px;
}

.content h2 {
	font-size: 20px; line-height: 100%;
	font-weight: bold;
	padding-top: 10px;
	clear: both;
	text-shadow: #808080 0 0 1px;
}

#aka {
	font-size: 18px; line-height: 100%;
	font-weight: bold;
	text-shadow: #808080 0 0 1px;
}

#contact-list img {
	vertical-align: middle;
	margin: 1px 4px;
	opacity: 0.7;
}
.icon-list {
	margin: 2px 0;
	width: 460px;
}
.icon-list li {
	float: left; width: 20px; height: 20px;
}
.icon-list li:hover {
	background-color: #f0f0f0;
}
.icon-list li img, .icon-list li .sprite {
	display: block; height: 16px; width: 16px; margin: 2px;
	opacity: 0.5;
}
.icon-list li img:hover, .icon-list li .sprite:hover {
	opacity: 1;
}

.feature img {
	float: right;
	margin: 5px 0 0 20px;
}

.feature h2:first-child {
	font-size: 16px; line-height: 100%;
	font-variant: small-caps;
	color: #808080;
	padding: 0;
}

.feature p {
	padding-top: 5px;
	white-space: normal;
	line-height: 1.2em;
	text-align: justify;
}

.feature [lang="zh-TW"] {
	text-shadow: #808080 0 0 1px;
}

/* sprites images
http://timc.idv.tw/canvas-css-sprites/
 */

.sprite {display: block; background: transparent url('favicons.png?2') no-repeat; text-indent: -10000px; }
.generic { background-position: 0 0; width: 16px; height: 16px}
.tiramisu { background-position: -18px 0; width: 16px; height: 16px}
.wordpress { background-position: -36px 0; width: 16px; height: 16px}
.wordpress-com { background-position: -54px 0; width: 16px; height: 16px}
.facebook { background-position: -72px 0; width: 16px; height: 16px}
.twitter { background-position: -90px 0; width: 16px; height: 16px}
.linkedin { background-position: 0 -18px; width: 16px; height: 16px}
.anobii { background-position: -18px -18px; width: 16px; height: 16px}
.flickr { background-position: -36px -18px; width: 16px; height: 16px}
.plurk { background-position: -54px -18px; width: 16px; height: 16px}
.blogger { background-position: -72px -18px; width: 16px; height: 16px}
.wretch { background-position: -90px -18px; width: 16px; height: 16px}
.pixnet { background-position: 0 -36px; width: 16px; height: 16px}
.mozilla { background-position: -18px -36px; width: 16px; height: 16px}
.delicious { background-position: -36px -36px; width: 16px; height: 16px}
.stellarium { background-position: -54px -36px; width: 16px; height: 16px}
.ncu { background-position: -72px -36px; width: 16px; height: 16px}
.famfamfam-camera { background-position: -90px -36px; width: 16px; height: 16px}
.uep-phy { background-position: 0 -54px; width: 16px; height: 16px}
.gfx { background-position: -18px -54px; width: 16px; height: 16px}
.demolab { background-position: -36px -54px; width: 16px; height: 16px}
.slideshare { background-position: -54px -54px; width: 16px; height: 16px}
.netvibes { background-position: -72px -54px; width: 16px; height: 16px}


/* data:

generic: http://b.static.ak.fbcdn.net/images/icons/hidden.gif
tiramisu: http://beta.timc.idv.tw/favicon.ico
wordpress: http://www.wordpress.org/favicon.ico
wordpress-com: http://www.wordpress.com/favicon.ico
facebook: http://www.facebook.com/favicon.ico
twitter: http://twitter.com/favicon.ico
linkedin: http://www.linkedin.com/favicon.ico
anobii: http://www.anobii.com/favicon.ico
flickr: http://www.flickr.com/favicon.ico
plurk: http://www.plurk.com/favicon.ico
blogger: http://www.blogger.com/favicon.ico
wretch: http://www.wretch.cc/favicon.ico
pixnet: http://www.pixnet.net/favicon.ico
mozilla: http://moztw.org/favicon.ico
delicious: http://delicious.com/favicon.ico
stellarium: http://www.stellarium.org/favicon.ico
ncu: http://sci.ncu.edu.tw/favicon.ico
famfamfam-camera: http://www.famfamfam.com/lab/icons/silk/icons/camera.png
uep-phy: http://uep.phy.ncu.edu.tw/favicon.ico
gfx: http://gfx.tw/favicon.ico
demolab: http://archive.demo.phy.tw/favicon.ico
slideshare: http://www.slideshare.net/favicon.ico
netvibes: http://cdn.netvibes.com/favicon.ico


*/