@charset "utf-8";
/* CSS Document */

/*Global style setting*/
html, body, div { margin:0; padding:0; font-size:12px}
#container { font-family: "Andale Mono", "Arial Unicode MS", "Verdana"; width:1066px; margin:auto;}
#header { height:75px; background:url(images/title.jpg) no-repeat left top; border-bottom:1px solid #666;}
#header h1, #header  h2 { display:none;}
#nav {}
#nav ul { margin:0; padding:0; padding-top:3px;}
#nav ul li{ list-style:none; display:inline; margin-right:8px;padding:0 5px;}
#nav ul li a { text-decoration:none; color:#000; font-size:13px;}
#nav ul li.hi { border-top:4px solid #000}
#main {border-bottom:1px solid #666; padding-bottom:0px; overflow:hidden; zoom:1}
#main {*padding-bottom:20px !important; *padding-bottom:20px}
#footer { width:350px; height:70px; margin:auto; margin-top:20px;background:url(images/sign.jpg) no-repeat left top; clear:left}
#footer p { margin:0 0 0 65px; padding:0; font-size:9px;}
#footer p#phone { padding-top:20px;}
#footer p#email { float:left; padding-right:5px; background:url(images/bar.jpg) no-repeat right 50%}
#footer p#msn {padding-left:5px;}
.hideSkype { display:none;}


/* For IE, onFocus 的 F 要大寫*/
a{
noFocusline:expression(this.onFocus=this.blur());
}

/* For Firefox */
a:focus{
-moz-outline-style:none;
}


#portfolioList { margin:20px 0; padding:0; overflow:hidden; zoom:1;}
#portfolioList li { margin:14px; padding:0 0 5px 0;list-style:none; width:326px; float:left; border-bottom:1px solid #ccc; margin-bottom:5px;}
#portfolioList li {*margin:14px !important; *margin:11px;}
#portfolioList li img{ margin-bottom:4px; border:1px solid #000}
#portfolioList li a:hover img
{filter:alpa(opacity=80);  /* IE */
-moz-opacity:0.8;          /* Moz + FF */
opacity:0.8;               /* 支持CSS3的瀏覽器(FF1.5也支持) */}
#portfolioList li p { margin:0; padding:0; font-size:12px; display:inline}
#portfolioList li p.p_title { padding-left:10px; background:url(images/dot.jpg) no-repeat left 50%}
#portfolioList li p.p_desc { margin-left:2px;padding-left:10px; color:#000; font-size:11px; text-decoration:none; background:url(images/bar.jpg) no-repeat left 70%; }

#projectList { margin:25px 0; padding:0; width:200px; float:left;}
#projectList li { margin:10px 0; padding:0 0 0 10px;list-style:none;background:url(images/dot.jpg) no-repeat left 50%}
#projectList li a { color:#000; text-decoration:none;}

#content { width:800px; margin-left:200px; margin-top:40px; height:400px; border:1px solid #666; overflow:hidden; zoom:1; position:relative}
#content dl { padding-left:10px; font-size:12px; width:150px;}
#content dl dt { display:none}
#content dl dd { margin:0; padding:0;}
#content dl dd#title { font-weight:bold; border-bottom:1px solid #ccc; padding-bottom:3px; margin-bottom:10px; font-size:11px;}
#content #preview { position:absolute; left:170px; top:0px; width:630px; height:400px;}
#content dl dd a { color:#666; text-decoration:none;padding-right:16px; background:url(images/link.jpg) no-repeat right 60%}
#content dl dd a:hover { border-bottom:1px dotted #666; }


#btnSet { clear:left; position:relative; margin:10px 0;}
#btnSet #thumbBtn {background:url(images/thumb.jpg) no-repeat left 50%; padding-left:40px; height:21px; display:block; width:80px;}
#btnSet a {text-decoration:none; color:#666666}
#btnSet #imgBtnList { margin:0; padding:0; width:400px; position:absolute; top:0; left:200px;}
#btnSet #imgBtnList {*left:200px !important; *left:203px;}
#btnSet #imgBtnList li {width:10px; height:10px; list-style:none; float:left; overflow:hidden; margin-right:4px;}
#btnSet #imgBtnList li a{ text-indent:-50px; width:10px; height:10px; background-color:#666; display:block}
#btnSet #imgBtnList li a.hi {background-color:red;}
#btnSet #imgBtnList li a:hover {background-color:#999;}
#btnSet #imgBtnList li a.hi:hover {background-color:red;}
#btnSet #player {position:absolute; right:70px; top:0; font-size:12px;}