@charset "utf-8";
/* CSS Document for Jenny stiudo */

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} /*html5*/
name,year{display:block}

body { background:#fff; margin:0; padding:0; color:#666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px }
a { color:#000; text-decoration:none }
p { margin:0 }
img { border-width:0 }
.tip { margin:30px auto; text-align:center; font-size:11px; line-height:20px}
.tip a{ text-decoration:underline }
.tip a:hover{ text-decoration:none }

#home_mainBody { width:720px; height:530px; margin:30px auto 0 auto; position:relative; z-index:0 }
#home_cross { width:720px; height:400px; background-image:url(images/home_bg_cross.png); background-position:center 20px; position:absolute; top:0; left:0; z-index:1}
#home_circle { width:350px; height:350px; background-image:url(images/home_bg_bigCirclel.png); background-position:center; position:absolute; top:90px; left:185px; z-index:2}
#home_char { width:350px; height:350px; background-image:url(images/home_char0.png); background-position:center; position:absolute; z-index:3}
#home_btLeft { width:86px; height:86px;  position:absolute; top:225px; left:0; z-index:2; background-image:url(images/home_bt_html.png); background-position:center; display:block}
#home_btRight { width:86px; height:86px; position:absolute; top:225px; right:0; z-index:2; background-image:url(images/home_bt_flash.png); background-position:center; display:block}
a#home_btLeft_a { width:86px; height:86px; background-image:url(images/home_bt_html_gray.png); background-position:center; display:block }
a#home_btRight_a { width:86px; height:86px; background-image:url(images/home_bt_flash_gray.png); background-position:center; display:block }
a#home_btLeft_a,
a#home_btRight_a { -webkit-opacity:1; -moz-opacity:1; opacity:1;
	-webkit-transition-property: -webkit-opacity; -moz-transition-property:-moz-opacity; transition-property:opacity;
    -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ;
}
a#home_btLeft_a:hover,
a#home_btRight_a:hover { -webkit-opacity:0; -moz-opacity:0; opacity:0;}

#home_descLeft { width:150px; position:absolute; top:320px; left:-80px; text-align:right; z-index:2}
#home_descRight { width:150px; position:absolute; top:320px; right:-80px; text-align:left; z-index:2}
#home_descLeft img,
#home_descRight img { margin-top:6px }

#home_btDot_1,
#home_btDot_2,
#home_btDot_a_1,
#home_btDot_a_2 { width:28px; height:28px; display:block }
#home_btDot_1 { position:absolute; top:-14px; left:347px; z-index:2; }
#home_btDot_2 { position:absolute; top:30px; left:347px; z-index:2; }
#home_btDot_1,
#home_btDot_2 { background-image:url(images/home_bt_dot_bg.png); background-position:center; background-repeat:no-repeat }
a#home_btDot_a_1,
a#home_btDot_a_2 { -webkit-opacity:0; -moz-opacity:0; opacity:0;
	-webkit-transition-property: -webkit-opacity; -moz-transition-property:-moz-opacity; transition-property:opacity;
    -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ;
}
a#home_btDot_a_1:hover,
a#home_btDot_a_2:hover { -webkit-opacity:1; -moz-opacity:1; opacity:1;}

a span.pupop { background:#666; width:145px; height:28px; color:#fff; display:block; padding:6px 8px; position:absolute; z-index:3; top:14px; left:26px; visibility:hidden;
	-webkit-border-radius:3px; border-radius:3px; }
a span.pupop div { text-decoration:none; }
a span.pupop div.pupopName { font-weight:bolder; font-size:12px; }

#home_btTf { width:52px; height:52px; position:absolute; top:450px; left:334px; z-index:2; background-image:url(images/home_bt_tf_gray.png); background-position:center; display:block;
	-webkit-opacity:0; -moz-opacity:0; opacity:0; }
a#home_btTf_a { width:52px; height:52px; background-image:url(images/home_bt_tf.png); background-position:center; display:block }
a#home_btTf_a { -webkit-opacity:0; -moz-opacity:0; opacity:0;
	-webkit-transition-property: -webkit-opacity; -moz-transition-property:-moz-opacity; transition-property:opacity;
    -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ;
}
a#home_btTf_a:hover { -webkit-opacity:1; -moz-opacity:1; opacity:1;}
#home_descTf { width:150px; position:absolute; top:492px; left:422px; text-align:left; z-index:3; -webkit-opacity:0; opacity:0 }

/*jenny and brain's name and title animation*/
@-webkit-keyframes namePupup {
	0% {-webkit-transform:scale(0.01); }
	80% {-webkit-transform:scale(1.1); }
	100% {-webkit-transform:scale(1); }
}
@keyframes namePupup {
	0% {transform:scale(0.01); }
	80% {transform:scale(1.1); }
	100% {transform:scale(1); }
}
a:hover span.pupop { visibility:visible;
	-webkit-animation-name:namePupup; animation-name:namePupup;
	-webkit-animation-duration:0.2s; animation-duration:0.2s;
	-webkit-animation-timing-function:linear; animation-timing-function:linear; }
a span.pupop { -webkit-transform-origin:top left; transform-origin:top left; }

/*circle background animation 0s-0.5s*/
@-webkit-keyframes circleAnimation {
	0% {-webkit-transform:scale(0.01); }
	95% {-webkit-transform:scale(1.02); }
	100% {-webkit-transform:scale(1); }
}
@keyframes circleAnimation {
	0% {transform:scale(0.01); }
	95% {transform:scale(1.02); }
	100% {transform:scale(1); }
}
#home_circle{-webkit-animation-name:circleAnimation;animation-name:circleAnimation;
	-webkit-animation-duration:0.5s;animation-duration:0.5s;
	-webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; }
	
/*circle photo animation 0.5s-1s*/
@-webkit-keyframes crossCharAnimation {
	0% { -webkit-opacity:0 }
	50% { -webkit-opacity:0 }
	100% { -webkit-opacity:1 }
}
@keyframes crossCharAnimation {
	0% { opacity:0 }
	50% { opacity:0 }
	100% { opacity:1 }
}
#home_char
{-webkit-animation-name:crossCharAnimation; animation-name:crossCharAnimation;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; }

/*cross line background animation 0.5s-1s*/
@-webkit-keyframes crossLineAnimation {
	0% { -webkit-opacity:0 }
	50% { -webkit-opacity:0 }
	100% { -webkit-opacity:1 }
}
@keyframes crossLineAnimation {
	0% { opacity:0 }
	50% { opacity:0 }
	100% { opacity:1 }
}
#home_cross{-webkit-animation-name:crossLineAnimation; animation-name:crossLineAnimation;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease-in; animation-timing-function:ease-in; }

/*button animation 0.5s-1s*/
@-webkit-keyframes buttonAnimation1 {
	0% {left:50px; -webkit-opacity:0 }
	50% {left:50px; -webkit-opacity:0 }
	100% {left:0;-webkit-opacity:1 }
}
@keyframes buttonAnimation1 {
	0% {left:50px; opacity:0 }
	50% {left:50px; opacity:0 }
	100% {left:0; opacity:1 }
}
#home_btLeft {-webkit-animation-name:buttonAnimation1; animation-name:buttonAnimation1;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease; animation-timing-function:ease; }
	
@-webkit-keyframes buttonAnimation2 {
	0% {right:50px; -webkit-opacity:0 }
	50% {right:50px; -webkit-opacity:0 }
	100% {right:0;-webkit-opacity:1 }
}
@keyframes buttonAnimation2 {
	0% {right:50px; opacity:0 }
	50% {right:50px; opacity:0 }
	100% {right:0; opacity:1 }
}
#home_btRight {-webkit-animation-name:buttonAnimation2; animation-name:buttonAnimation2;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease; animation-timing-function:ease; }

@-webkit-keyframes buttonAnimation3 {
	0% {top:15px; -webkit-opacity:0 }
	40% {top:15px; -webkit-opacity:0 }
	100% {top:-14px;-webkit-opacity:1 }
}
@keyframes buttonAnimation3 {
	0% {top:15px; opacity:0 }
	40% {top:15px; opacity:0 }
	100% {top:-14px; opacity:1 }
}
#home_btDot_1 {-webkit-animation-name:buttonAnimation3; animation-name:buttonAnimation3;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease; animation-timing-function:ease; }
	
@-webkit-keyframes buttonAnimation4 {
	0% {top:50px; -webkit-opacity:0 }
	50% {top:50px; -webkit-opacity:0 }
	100% {top:30px; -webkit-opacity:1 }
}
@keyframes buttonAnimation4 {
	0% {top:50px; opacity:0 }
	50% {top:50px; opacity:0 }
	100% {top:30px; opacity:1 }
}
#home_btDot_2 {-webkit-animation-name:buttonAnimation4; animation-name:buttonAnimation4;
	-webkit-animation-duration:1s; animation-duration:1s;
	-webkit-animation-timing-function:ease; animation-timing-function:ease; }

/*description animation 1s-1.5s*/
@-webkit-keyframes popupAnimation {
	0% {top:300px; -webkit-opacity:0 }
	66% {top:300px; -webkit-opacity:0 }
	100% {top:320px;-webkit-opacity:1 }
}
@keyframes popupAnimation {
	0% {top:300px; opacity:0 }
	66% {top:300px; opacity:0 }
	100% {top:320px; opacity:1 }
}
#home_descLeft,
#home_descRight{-webkit-animation-name:popupAnimation; animation-name:popupAnimation;
	-webkit-animation-duration:1.5s; animation-duration:1.5s;
	-webkit-animation-timing-function:ease; animation-timing-function:ease; }
	


/*inner page*/
header { width:880px; height:70px; margin:0 auto; overflow:hidden }
#topBar_logo { width:215px; height:48px; margin-top:15px; float:left }
#topBar_logo a { width:215px; height:48px; display:block; background-image:url(images/inner_logo.gif) }

#topBar_nav { width: 480px; margin:15px 0 0 0; padding:0; list-style:none; float:right }
#topBar_nav li { width:130px; margin:0 0 0 20px; padding:0; list-style:0; display:inline-block; font-size:15px; line-height:35px; }
#topBar_nav li a { color:#000000; background-image:url(images/inner_nav_dot.png); background-repeat:no-repeat; background-position:0 10px; background-size:0 0; padding-left:0;
	background-image:none\9;
	-webkit-transition-property: color padding-left background; -moz-transition-property:color padding-left background; transition-property: color padding-left background;
    -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ; }
#topBar_nav li a:hover,
#topBar_nav li.current a { color:#dd0000; padding-left:12px; background-image:url(images/inner_nav_dot.png); background-repeat:no-repeat; background-position:2px 6px; background-size:8px 8px; }

.inner_mainBody { width:100%; overflow:hidden; margin:20px auto; text-align:center; position:absolute; top:50px; background-color:#fff }
#sec_ab	{ display:block; -webkit-opacity:1; -opacity:1; z-index:3 }
#sec_wd	{ display:none; -webkit-opacity:1; -opacity:1; z-index:2; padding-top:20px }
#sec_gd	{ display:none; -webkit-opacity:1; -opacity:1; z-index:2; padding-top:20px }

.workList { width:800px; margin:0 auto; padding:0; list-style:none; min-height:1000px}
.workList li { margin:0; padding:13px; width:174px; height:174px; float:left; background-repeat:no-repeat; background-position:center 13px; overflow:hidden; position:relative }
.workList_cel_1 { background:url(images/inner_bg_1.png)}/*black*/
.workList_cel_1 a span {color:#fff }
.workList_cel_2 { background:url(images/inner_bg_2.png)}/*gray*/
.workList_cel_3 { background:url(images/inner_bg_3.png)}/*pink*/
.workList_cel_4 { background:url(images/inner_bg_4.png)}/*white*/


.workList li a img {-webkit-opacity:0; opacity:0;
	-webkit-transition-property: -webkit-opacity; -moz-transition-property:-moz-opacity; transition-property:opacity;
    -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ; }
.workList li a:hover img { -webkit-opacity:1; opacity:1; }
.workList li a span { display:block; position:absolute; width:174px; height:88px; top:0; padding-top:100px; text-align:center; font-size:11px; background-repeat:no-repeat; background-position:bottom center; 
	-webkit-transition-property: padding-top color height; -moz-transition-property:padding-top color height; transition-property:padding-top color height;
    -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;  
    -webkit-transition-timing-function:linear ; -moz-transition-timing-function:linear; transition-timing-function:linear ; }
	
.workList li a:hover span { padding-top:138px; background:url(images/inner_bg_desc.png); background-repeat:no-repeat; background-position:bottom center; height:50px; color:#fff }
.workList li a span name { display:block; line-height:1.231; font-size:12px; margin-top:8px }
.workList li a span year { display:block; line-height:18px }


#blackBg { filter:alpha(opacity=0);}
#photoViewerContainer { overflow:hidden; padding-top:0 }
#photoViewerContent { margin:0 0 0 0; }
#photoViewerContent img.photoViewerBigImg { margin:0; background-repeat:no-repeat; background-position:center 120px; filter:alpha(opacity=100); }
#photoViewerClose { position: absolute; top: 8px; right: 8px; background: url(images/pv_close2.png) no-repeat; width: 34px; height: 34px; cursor: pointer; z-index:102}
#photoViewerClose:hover { background: url(images/pv_close.png) no-repeat;}
#photoViewerSwitch { height:20px; text-align:center; padding: 0 20px; margin-top: -26px; }
#photoViewerSwitch a { width:6px; height:6px; margin: 0 8px 0 8px; display:inline-block; background-image:url(images/pv_point.png) no-repeat top}
#photoViewerSwitch a.current,
#photoViewerSwitch a:hover { width:6px; height:6px; background: url(images/pv_point2.png) no-repeat top}
#photoViewerSwitch a img { -webkit-opacity:1; opacity:1; background-image:none; background-repeat:no-repeat; display: block; }
#photoViewerSwitch a.current img,
#photoViewerSwitch a:hover img { background-repeat:no-repeat; -webkit-opacity:0; opacity:0; filter:alpha(opacity=0);}

#photoViewerLeft { left:0; background-position: left middle }
#photoViewerRight { right:0; background-position: right middle }
#photoViewerLeft, 
#photoViewerRight { -webkit-transition-property: background; -moz-transition-property:background; transition-property:background;
    -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;  
    -webkit-transition-timing-function:ease ; -moz-transition-timing-function:ease; transition-timing-function:ease ; }


#photoViewerLeft:hover {background-image:url(images/pv_prev.png); background-repeat:no-repeat ; }
#photoViewerRight:hover {background-image:url(images/pv_next.png); background-repeat:no-repeat ; }
#photoViewerLeft { z-index:101; position:absolute; top:0; cursor:pointer; background-image:url(images/pv_prev.png); background-repeat:repeat; filter:alpha(Opacity=0); -moz-opacity:0; opacity: 0 }
#photoViewerRight { z-index:101; position:absolute; top:0; cursor:pointer; background-image:url(images/pv_next.png); background-repeat:repeat; filter:alpha(Opacity=0); -moz-opacity:0; opacity: 0 }
#photoViewerLeft:hover, #photoViewerRight:hover{ filter:alpha(Opacity=100);-moz-opacity:1; opacity:1; }

#Jenny_cvs { margin:0 auto }