p, div, html, body, img, h1, h2, ul, li, h3, h4, dl, dt, dd, ol, input{margin:0; padding:0; font-family:Microsoft JhengHei;}
body { overflow-y:scroll;}
img{border:0;}
ol, ul { list-style: none; }

#wrapper { width:100%;}
.bg_profile{ background:url("../images/02_bg01a.png") center top repeat;}
.bg_photo{ background:url("../images/03_bg01a.png") center top repeat;}
.bg_design{ background:url("../images/04_bg01a.png") center top repeat;}

#bgtop_profile{ width:100%; height:192px; background:url("../images/02_bgtop.png") center top no-repeat;}
#bgtop_photo{ position:relative;width:100%; height:200px; background:url("../images/03_bgtop.png") center top no-repeat;z-index:600;}
#bgtop_design{ position:relative; width:100%; height:192px; background:url("../images/04_bgtop.png") center top no-repeat;z-index:600;}
#bgfooter_profile { width:100%; height:584px; background:url("../images/02_footer.gif") center top no-repeat; }
#bgfooter_profile_s { width:100%; height:584px; background:url("../images/02_footer_s.png") center top no-repeat; }
#bgfooter_photo { position:relative;  width:100%; height:510px; z-index:100;}
#bgfooter_photo_p { position: absolute;  width:100%; height:1024px; top:-514px; background:url("../images/03_footer.gif") center bottom no-repeat; z-index:100;}
#bgfooter_photo_s { position: absolute;  width:100%; height:526px; top:-14px; background:url("../images/03_footer_s.png") center bottom no-repeat; z-index:90;}
#bgfooter_photo_m { position: absolute;  width:100%; height:526px; top:-14px; background:url("../images/03_footer_man.png") center bottom no-repeat; z-index:110;}
#bgfooter_design { position:relative;  width:100%; height:300px; z-index:100;}
#bgfooter_design_p { position: absolute;  width:100%; height:1110px; top:-730px; background:url("../images/04_footer.gif") center bottom no-repeat; z-index:100;}
#bgfooter_design_s { position: absolute;  width:100%; height:678px; top:-298px; background:url("../images/04_footer_s.png") center bottom no-repeat; z-index:90;}
#bgfooter_design_m { position: absolute;  width:100%; height:252px; top:128px; background:url("../images/04_footer_man.png") center bottom no-repeat; z-index:110;}

#container_profile{ position: relative; height: 1230px; width:810px;  margin: 0 auto;}
#container_photo{ position: relative;  width:810px; min-height:500px; margin: 0 auto; z-index:500; }
#container_design{ position: relative;  width:810px;  margin: 0 auto;}
#container_design_pet{ width:810px; margin: 0 auto; }

/* --- PROFILE --- */
#profile_ob01 { position: absolute; top :10px; left:32px; width:772px; height:1167px; background:url("../images/02_ob01.gif") center top no-repeat; z-index:500;}
#profile_ob01s { position: absolute; top :10px; left:32px; width:772px; height:1167px; background:url("../images/02_ob01s.png") center top no-repeat; z-index:400;}
#profile_ob02 { position: absolute; top :54px; left:726px; width:70px;  z-index:600;}
#profile_ob02 img { margin: 5px 0 0 0}
#profile_ob03 { position:absolute; top:566px; left:440px; width:290px; height:190px; z-index:600; }
#profile_ob03_title { float:left; width:290px; margin: 0 0 10px 0;}
#profile_ob03_main { float:left; width:290px; margin: 7px 0;}
#profile_ob03_type { float:left; width:80px;}
#profile_ob03_bar { float:right; width:210px;}
.profile_ob03_font_title{font: bold 16px Arial, Helvetica, sans-serif; color: #452009;}
.profile_ob03_font_main{font: bold 13px Arial, Helvetica, sans-serif; color: #452009; margin: 1px 0 0 0;}
#profile_ob04 { position:absolute; top:768px; left:442px; width:368px; height:280px; z-index:600; }
#profile_ob05 { position:absolute; top:447px; left:433px; width:380px; height:36px; z-index:650; }
#profile_ob05_facebook {float:left; margin: 9px 0 0 25px; width:90px; z-index:700;}
#profile_ob05_google {float:left; margin: 6px 0 0 30px; width:90px; z-index:700;}
#profile_ob05_renren {float:left; margin: 7px 0 0 20px; width:120px; z-index:700;}
#profile_ob06 { position:absolute; top:1330px; left:150px; width:161px; height:456px; z-index:600; }
#profile_ob07 { position:absolute; top:30px; left:80px; width:607px; height:319px; z-index:490; }
#profile_ob08 { position:absolute; top:850px; left:61px; width:292px; z-index:650; }
.profile_ob08_in01 { float:left; margin:15px 0 5px 0;}
.profile_ob08_in02 { float:left; margin:0 0 0 10px;}
.profile_ob08_in03 { float:left; margin:0 0 2px 0;}

/* --responsiveSlides--*/
.rslides { position: relative; list-style: none;  overflow: hidden;  width: 100%;  padding: 0;  margin: 0;}
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; display: none;  width: 100%;  left: 0;  top: 0; }
.rslides li:first-child {  position: relative;  display: block;  float: left;}
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; }

/* -- legend --*/
#diagram { position:absolute; top:377px; left: 11px; z-index: 600; width:300px; height:300px; opacity:0.6;}
.legend {float:left;width:250px;}
.skills {float:left;clear:both;width:100%;}
.skills ul,.skills li {display:block;list-style:none;margin:0;padding:0;}
.skills li {float:right;clear:both;padding:0 15px;height:35px;line-height:35px;color:#fff;margin-bottom:1px;font-size:18px;}
.skills .jq {background:#97BE0D; }
.skills .css {background:#D84F5F;}
.skills .html {background:#88B8E6;}
.skills .php {background:#BEDBE9;}
.skills .sql {background:#EDEBEE;}
.get {display:none;}

/* -- ui-progressbar--*/
.ui-progressbar {height: 15px; overflow: hidden;z-index:600;}
.ui-progressbar .ui-progressbar-value {	background: url("../images/02_bar_01.gif");	margin: -1px;	height: 100%;}
.ui-progressbar .ui-progressbar-overlay {background: url("../images/animated-overlay.gif"); height: 100%;filter: alpha(opacity=25);	opacity: 0.25;}
.ui-progressbar-indeterminate .ui-progressbar-value {background-image: none;}
.ui-progressbar-value {background-color: #125;}
.ui-widget-content {border: 1px solid #a47d35;	background: #fff url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;	color: #333333; }
.ui-widget-header {	border: 1px solid #e78f08;	background: #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color: #ffffff;	font-weight: bold;}

/* ---PHOTO--- */
/*--Stapel--*/
.container { position: relative; width:780px; left:25px; margin: 15px 0 0 0; }
.clr {clear: both;padding: 0;height: 0;margin: 0;}
.container > header,.main {	width: 780px; margin: 0 auto; padding: 0;}
.container > header {padding: 30px 25px 50px 25px;}
/* -tp-*/
.tp-grid {list-style-type: none; position: relative; display: block; left:-1px;}
.tp-grid li {position: absolute;cursor: pointer; border: 5px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none;	overflow: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden;	backface-visibility: hidden;}
.no-js .tp-grid li {position: relative;	display: inline-block;}
.tp-grid li a {	display: block;	outline: none;}
.tp-grid li img {display: block;border: none;}
.tp-info,.tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 40%; width: 75%; padding: 10px; font-weight: 700; text-align: right; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1),5px 0 5px -3px rgba(0,0,0,0.4),inset 0 0 5px rgba(0,0,0,0.04);}
.touch .tp-info {left: 0px;}
.no-touch .tp-info {-webkit-transition: all 0.3s ease-in-out;	-moz-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.no-touch .tp-grid li:hover .tp-info {-webkit-transition-delay: 150ms;-moz-transition-delay: 150ms;	-o-transition-delay: 150ms;	-ms-transition-delay: 150ms;	transition-delay: 150ms;}
.no-touch .tp-open li:hover .tp-info {left: 0px;}
.tp-title {	padding: 10px 40px 10px 0;left: 0px;}
.tp-title span:nth-child(2){color: #aaa;padding: 0 5px;	background: #F7F7F7;right: 0px;	height: 100%;	line-height: 40px;	top: 0px;	position: absolute;	display: block;}
/* -Custom elements style- */
.wrapper {position: relative;padding: 0 0 50px 0;}
.topbar {position: relative; height:46px;  padding: 0 0;margin: 0 0 20px 0; background:url("../images/03_topbar.png") center top no-repeat;}
.topbar h2{	display: inline-block; font-weight: 500; width: 70%; font:18px Arial, Helvetica, sans-serif;  color: #333; padding:11px 0 0 24px;}
.back {	width: 757px;height: 46px;position: absolute;left: 0; top: 0; padding: 13px 0 0 0; text-align: right;	cursor: pointer;display: none;	-webkit-touch-callout: none; -webkit-user-select: none;	-khtml-user-select: none; -moz-user-select: none;	-ms-user-select: none;	user-select: none; font:14px Arial, Helvetica, sans-serif;  color: #777;}
.no-touch .back:hover {color: #333;	}
/* -Loader- */
.loader {left: 50%;	position: absolute;	margin-left: -120px;}
.loader i {	display: inline-block;	width: 40px;	height: 40px;	-webkit-animation: loading 1s linear infinite forwards;	-moz-animation: loading 1s linear infinite forwards;	-o-animation: loading 1s linear infinite forwards;	-ms-animation: loading 1s linear infinite forwards;	animation: loading 1s linear infinite forwards;}
.cssanimations .loader span {display: none;}
.no-cssanimations .loader i {display: none;}
.loader i:nth-child(2){	-webkit-animation-delay: 0.1s;	-moz-animation-delay: 0.1s;	-o-animation-delay: 0.1s;	-ms-animation-delay: 0.1s;	animation-delay: 0.1s;}
.loader i:nth-child(3){	-webkit-animation-delay: 0.2s;	-moz-animation-delay: 0.2s;	-o-animation-delay: 0.2s;	-ms-animation-delay: 0.2s;	animation-delay: 0.2s;}
.loader i:nth-child(4){	-webkit-animation-delay: 0.3s;	-moz-animation-delay: 0.3s;	-o-animation-delay: 0.3s;	-ms-animation-delay: 0.3s;	animation-delay: 0.3s;}
.loader i:nth-child(5){	-webkit-animation-delay: 0.4s;	-moz-animation-delay: 0.4s;	-o-animation-delay: 0.4s;	-ms-animation-delay: 0.4s;	animation-delay: 0.4s;}
.loader i:nth-child(6){	-webkit-animation-delay: 0.5s;	-moz-animation-delay: 0.5s;	-o-animation-delay: 0.5s;	-ms-animation-delay: 0.5s;	animation-delay: 0.5s;}
@-webkit-keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-webkit-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@-moz-keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-moz-transform: scale(0.25) rotate(75deg);	background-color: rgba(155,155,155,0.9);}
}
@-o-keyframes loading{
0%{opacity: 0;background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-o-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@-ms-keyframes loading{
0%{opacity: 0;background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-ms-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@media screen and (max-width: 680px){
.topbar h2, .topbar h3 { text-align: left; padding: 0; display: block;}
.back { left: auto; right: 0px; margin-left: 0px;}
}

/* --- DESIGN --- */
#design_ob01 { position:relative; width:780px; height:106px; background:url("../images/04_ob01.png") center top no-repeat; margin: 40px 0 0 25px; z-index:200;}
#design_ob02 { position:relative;width:780px; min-height: 550px; background:url("../images/04_ob02.png") center top repeat-y; margin: 0 0 0 25px;z-index:200;}
#design_ob03 { width:780px; height:144px; background:url("../images/04_ob03.png") center top no-repeat; margin: 0 0 0 25px;}

/* -- quicksand --*/
ul#filterOptions {width: 730px;	height: 52px;margin: 0 0;overflow: hidden; padding: 50px 0 0 29px;}
ul#filterOptions li { height: 33px;  display: inline-block; float: left;  }
ul#filterOptions li a {	height: 13px; padding: 10px 42px;  background: #cfcfcf ; background:url("../images/04_btn01.png") center top repeat-x; text-decoration: none;	display: block; font:12px Arial, Helvetica, sans-serif; color: #666;}
ul#filterOptions li a:hover { background: #c9c9c9; background:url("../images/04_btn01on.png") center top repeat-x;color: #000;}
ul#filterOptions li.active a { background: #999; background:url("../images/04_btn01on.png") center top repeat-x;color: #333;}
/*- OUR DATA HOLDER -*/
ul.ourHolder {	width: 730px;  overflow: hidden; margin: 0 0 0 26px; padding:5px 0 10px 0; }
ul.ourHolder li.item {	width: 240px; height: 220px; float: left; text-align: center;	overflow: hidden; margin: 10px 0 0 0;}
ul.ourHolder li.item h3 { margin: 0 0 0 0; font: 12px/20px Arial, Helvetica, sans-serif; color: #333; }
/*#parent{ border: 5px solid #666; width: 800px; height: 500px; margin: 30px; }*/

/* --pep-- */
.pep{cursor:pointer; }
/* design pet */
.peppable1{ position: relative; width: 88px; height: 49px; top: 200px; left: 40px;  background:url("../images/04_pet01.png") center top no-repeat; }
.peppable2{ position: relative; width: 57px; height: 69px; top: 180px; left: 130px;  background:url("../images/04_pet02.png") center top no-repeat; }
.peppable3{ position: relative; width: 61px; height: 54px; top: 200px; left: 190px;  background:url("../images/04_pet03.png") center top no-repeat;  }
.peppable4{ position: relative; width: 56px; height: 55px; top: 195px; left: 260px;  background:url("../images/04_pet04.png") center top no-repeat;  }
.peppable5{ position: relative; width: 49px; height: 79px; top: 200px; left: 320px;  background:url("../images/04_pet05.png") center top no-repeat;  }
.peppable6{ position: relative; width: 106px; height: 50px; top: 200px; left: 380px;  background:url("../images/04_pet06.png") center top no-repeat;  }
.peppable7{ position: relative; width: 163px; height: 62px; top: 190px; left: 490px;  background:url("../images/04_pet07.png") center top no-repeat;  }
.peppable8{ position: relative; width: 59px; height: 68px; top: 180px; left: 660px;  background:url("../images/04_pet08.png") center top no-repeat;  }
.peppable9{ position: relative; width: 67px; height: 82px; top: 170px; left: 720px;  background:url("../images/04_pet09.png") center top no-repeat;  }
/* photo pet */
.peppable_p1{ position: relative; width: 97px; height: 117px; top: 60px; left: 60px;  background:url("../images/03_pet01.png") center top no-repeat; }
.peppable_p2{ position: relative; width: 59px; height: 93px; top: 75px; left: 160px;  background:url("../images/03_pet02.png") center top no-repeat; }
.peppable_p3{ position: relative; width: 59px; height: 93px; top: 75px; left: 220px;  background:url("../images/03_pet03.png") center top no-repeat;  }
.peppable_p4{ position: relative; width: 65px; height: 101px; top: 70px; left: 280px;  background:url("../images/03_pet04.png") center top no-repeat;  }
.peppable_p5{ position: relative; width: 120px; height: 137px; top: 60px; left: 350px;  background:url("../images/03_pet05.png") center top no-repeat;  }
.peppable_p6{ position: relative; width: 93px; height: 124px; top: 60px; left: 470px;  background:url("../images/03_pet06.png") center top no-repeat;  }
.peppable_p7{ position: relative; width: 64px; height: 101px; top: 90px; left: 560px;  background:url("../images/03_pet07.png") center top no-repeat;  }
.peppable_p8{ position: relative; width: 58px; height: 105px; top: 92px; left: 625px;  background:url("../images/03_pet08.png") center top no-repeat;  }
.peppable_p9{ position: relative; width: 69px; height: 105px; top: 93px; left: 680px;  background:url("../images/03_pet09.png") center top no-repeat;  }

/* --fancybox-- */
.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{padding: 0; margin: 0;	border: 0; outline: none; vertical-align: top;}
.fancybox-wrap {position: absolute;	top: 0;	left: 0; z-index: 8020;}
.fancybox-skin {position: relative; background: #f9f9f9; color: #444; text-shadow: none;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.fancybox-opened {z-index: 8030;}
.fancybox-opened .fancybox-skin {-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.fancybox-outer, .fancybox-inner {position: relative;}
.fancybox-inner {overflow: hidden;}
.fancybox-type-iframe .fancybox-inner {	-webkit-overflow-scrolling: touch;}
.fancybox-error {color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;	margin: 0;	padding: 15px;	white-space: nowrap;}
.fancybox-image, .fancybox-iframe {	display: block;	width: 100%;height: 100%;}
.fancybox-image {max-width: 100%;	max-height: 100%;}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fancybox_sprite.png');}
#fancybox-loading {	position: fixed;top: 50%; left: 50%; margin-top: -22px;	margin-left: -22px;	background-position: 0 -108px;	opacity: 0.8; cursor: pointer; z-index: 8060;}
#fancybox-loading div {	width: 44px; height: 44px;	background: url('../images/fancybox_loading.gif') center center no-repeat;}
.fancybox-close { position: absolute; top: -18px; right: -18px;	width: 36px; height: 36px; cursor: pointer;	z-index: 8040;}
.fancybox-nav {	position: absolute;	top: 0;	width: 40%;	height: 100%;	cursor: pointer; text-decoration: none;	background: transparent url('../images/blank.gif'); /* helps IE */	-webkit-tap-highlight-color: rgba(0,0,0,0);	z-index: 8040;}
.fancybox-prev {left: 0;}
.fancybox-next {right: 0;}
.fancybox-nav span {position: absolute;	top: 50%;width: 36px; height: 34px;	margin-top: -18px;	cursor: pointer;z-index: 8040; visibility: hidden;}
.fancybox-prev span {left: 10px; background-position: 0 -36px;}
.fancybox-next span { right: 10px;	background-position: 0 -72px;}
.fancybox-nav:hover span { visibility: visible;}
.fancybox-tmp {	position: absolute;	top: -99999px;	left: -99999px;	visibility: hidden;	max-width: 99999px;	max-height: 99999px;	overflow: visible !important;}
/* Overlay helper */
.fancybox-lock { overflow: hidden;}
.fancybox-overlay {	position: absolute;	top: 0;	left: 0; overflow: hidden;	display: none; z-index: 8010; background: url('../images/fancybox_overlay.png');}
.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0;}
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll;}
/* Title helper */
.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050;}
.fancybox-opened .fancybox-title { visibility: visible;}
.fancybox-title-float-wrap { position: absolute; bottom: 0;	right: 50%;	margin-bottom: -35px; z-index: 8050; text-align: center;}
.fancybox-title-float-wrap .child {	display: inline-block;	margin-right: -100%;padding: 2px 20px;background: transparent; background: rgba(0, 0, 0, 0.8);	-webkit-border-radius: 15px;  -moz-border-radius: 15px; border-radius: 15px;	text-shadow: 0 1px 2px #222;	color: #FFF;	font-weight: bold;	line-height: 24px;	white-space: nowrap;}
.fancybox-title-outside-wrap { position: relative;	margin-top: 10px;color: #fff;}
.fancybox-title-inside-wrap { padding-top: 10px;}
.fancybox-title-over-wrap {	position: absolute;	bottom: 0;	left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8);}

/*font*/
p {font:12px/20px Arial, Helvetica, sans-serif; color: #333; text-align:justify;}
h1 {font:bold 22px/25px Arial, Helvetica, sans-serif; color: #333;}
h2 {font:bold 16px Arial, Helvetica, sans-serif; color: #333;}
h3 {font:bold 14px Arial, Helvetica, sans-serif; color: #333; margin: 0 0 8px 0;}
h4 {font:bold 13px Arial, Helvetica, sans-serif; color: #333; }
h5 {font:11px Arial, Helvetica, sans-serif; color: #333;}