/*========== XHTML and CSS is written by Ashung ==========*/
/*========== 2008.05.07 ==================================*/
* {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none;
}
img, fieldset {
    border: 0;
}
*:focus {
    outline: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, button, select, textarea {
    font-family: Tohame, Helvetica, Arial, sans-serif;
    font-size: inherit;
}
a {
    color: #333;
    text-decoration: none;
}
body {
    color: #333333;
    background: #f9f9f9 url(images/body_bg.png) repeat-x;
    font: 75%/1.6 Tohame, Helvetica, Arial, sans-serif;
    text-align: center;  
}
.container {
    width: 900px;
    padding: 0 0 30px 0;
    margin: 0 auto;
    text-align: left;
}

/* Logo and navbar
==========================================================*/
.header {
    position: relative;
    height: 58px;
    margin: 45px 10px 9px;
    background: #f6f6f6 url(images/bg.png) repeat-x 0 -58px;
}
.header h1, .nav {
    position: relative;
    float: left;
    display: inline;
    height: 58px;
    margin: 0 -10px 0;
    padding: 0 10px;
    background: url(images/bg.png) no-repeat;
}
.nav {
    float: right;
    padding-left: 0;
    overflow: hidden;
    background-position: 100% -116px;
}
.header h1 a {
    float: left;
}
.header h1 .logo {
    display: block;
    margin: 13px 0 0 16px;
}
.header h1 .sitename {
    display: none;
}
.nav li {
    float: left;
    display: inline;
    padding: 0 15px;
    margin: 19px 0 0 -2px;
    background: url(images/edge.gif) no-repeat 0 50%;
}
.nav a {
    float: left;
    text-align: center;
    font: bold 110% Corbel, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.nav a span {
    display: block;
    height: 20px;
    line-height: 20px;
}

/*= Fixed nav width */
.nav a.page-home    { width: 3.5em; }
.nav a.page-studio  { width: 4em;   }
.nav a.page-about   { width: 7.5em; }
.nav a.page-service { width: 4em;   }
.nav a.page-contact { width: 6.5em; }

/*= just move your mouse */
.nav a:hover, .nav a:active {
    color: #eb008b;
    /* IE is so fucking! */
    cursor: pointer;
}
.nav a span.zh,
.nav a:hover span.en  {
    display: none;
}
.nav a:hover span.zh {
    display: block;
}

/*= You're not here */
body.page-home    .nav a.page-home,
body.page-studio  .nav a.page-studio,
body.page-about   .nav a.page-about,
body.page-service .nav a.page-service,
body.page-contact .nav a.page-contact {
    color: #eb008b;
}
body.page-home    .nav a.page-home    span.en,
body.page-studio  .nav a.page-studio  span.en,
body.page-about   .nav a.page-about   span.en,
body.page-service .nav a.page-service span.en,
body.page-contact .nav a.page-contact span.en {
    display: none;
}
body.page-home    .nav a.page-home    span.zh,
body.page-studio  .nav a.page-studio  span.zh,
body.page-about   .nav a.page-about   span.zh,
body.page-service .nav a.page-service span.zh,
body.page-contact .nav a.page-contact span.zh {
    display: block;
}

/*= tools */
.tools {
    position: absolute;
    top: -30px;
    right: -2px;
}
.tools li {
    float: left;
    margin-right: 3px;
    height: 16px;
    line-height: 16px;
    font-size: 95%;
}
.tools a {
    float: left;
    height: 16px;
    overflow: hidden;
    padding: 0 0 0 6px;
    text-transform: capitalize;
    color: #999;
    text-decoration: none;
    background: #fff url(images/link_bg.png) no-repeat;
}
.tools a span {
    display: block;
    padding: 0 6px 0 0;
    background: url(images/link_bg.png) no-repeat 100% 0;
}
.tools a:hover, .tools a:active {
    color: #fff;
    background-color: #eb008b;
    background-position: 0 -16px; 
}
.tools a:hover span, .tools a:active span {
    background-position: 100% -16px;
}

/* Footer Copyrights
==========================================================*/
.footer, .footer ul {
    clear: both;
    background: url(images/bg.png) no-repeat 0 -1560px;
}
.footer ul {
    background-position: 100% -1630px;
}
.footer li {
    height: 35px;
    line-height: 35px;
    margin: 0 10px;
    text-align: center;
    color: #999;
    font-size: 90%;
    background: #f6f6f6 url(images/bg.png) repeat-x 0 -1595px;
}
.footer a {
    color: #999;
}

/* Main
==========================================================*/
.main, .main .inner1, .main .inner2 {
    height: 462px;
    background: url(images/bg.png) no-repeat;
}
.main {
    padding: 0 0 0 7px;
    background-position: 0 -174px;
    margin-bottom: 6px;
}
.main .inner1 {
    padding: 0 7px 0 0;
    background-position: 100% -1098px;
}
.main .inner2 {
    /* container(900)-main padding(7)-inner1 padding(7) */
    width: 886px;
    overflow: hidden;
    background-repeat: repeat-x;
    background-position:  0 -636px;
}
.content {
    margin-top: 6px;
    height: 448px;
    overflow: hidden;
}

/*= page background images */
body.page-studio .content {
    background: url(images/img1.jpg) no-repeat;
}
body.page-about .content {
    background: url(images/img2.jpg) no-repeat;
}
body.page-service .content {
    background: url(images/img3.jpg) no-repeat;
}
body.page-contact .content {
    background: url(images/img4.gif) no-repeat;
}
body.page-links .content {
    background: url(images/img5.jpg) no-repeat;
}


/*= page heading */
.content h2 {
    margin: 0 21px 22px 295px;
    height: 84px;
    overflow: hidden;
    background: url(images/heading.png) no-repeat 100% 0;
    font: 130%/8em Corbel, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}
.content h2 span.zh {
    color: #999;
}
body.page-about .content h2,
body.page-contact .content h2 {
    margin-left: 305px;
}

/* tabpanel
==========================================================*/
ul.tabpanel-tab {
    height: 28px;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative; /* IE */
}
ul.tabpanel-tab li {
    float: left;
    margin-right: 1px;
}
ul.tabpanel-tab a {
    float: left;
    padding: 0 2px 0 0;
    color: #666;
    background: url(images/tab.png) no-repeat 100% -28px;
} 
ul.tabpanel-tab span {
    display: block;
    float: left;
    padding: 0 13px 0 15px;
    height: 28px;
    line-height: 28px;
    overflow: hidden;
    background: url(images/tab.png) no-repeat 0 -28px;
}
ul.tabpanel-tab a:hover,
ul.tabpanel-tab a.current {
    background-position: 100% 0;
    color: #000;
    cursor: pointer;
}
ul.tabpanel-tab a:hover span,
ul.tabpanel-tab a.current span {
    background-position: 0 0;
}
.tabpanel .tabpanel-body {
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
    height: 290px;
}
.tabpanel .tabpanel-body .wrap {
    margin: 1px;
    height: 288px;
    overflow: auto;
}

/* page-studio, gallery
==========================================================*/
.studio {
    margin: 0 21px 0 295px;
}
.gallery {
    width: 528px;
    margin: 10px 0 10px 20px;
}
.gallery:after {
    content: "css.is.written.by.Ashung";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.gallery li {
    float: left;
    margin: 0 20px 10px 0;
}
.gallery li a {
    float: left;
    width: 110px;
    height: 130px;
    overflow: hidden;
    text-align: center;
	border:1px solid #fff;
}
.gallery li a img {
    display: block;
    margin: auto;
}
.gallery li a:hover {
	border:1px solid #ccc
}

/* page-about
==========================================================*/
.about {
    margin: 0 15px 0 305px;
    padding-left: 250px;
    height: 316px;
    overflow: hidden;
    background: url(images/box.png) no-repeat;
}
.about p {
    margin-top: 30px;
}

/* page-service
==========================================================*/
.service {
    margin: 0 21px 0 295px;
}
.serviceintro {
    margin-bottom: 20px;
}
.service .tabpanel-body {
    height: 205px;
    background: #fff url(images/tab_bg.png) repeat-x 0 100%;
}
.service .tabpanel-body .wrap {
    height: 203px;
}
.servicedetial {
    margin: 10px 30px;
    padding-left: 160px;
}
.servicedetial dt {
    float: left;
    display: inline;
    height: 42px;
    width: 140px;
    margin: 60px 0 -102px -160px;
    background: url(images/flower.gif) no-repeat 0 0;
}
.servicedetial dt strong {
    display: block;
    height: 42px;
    line-height: 42px;
    margin-left: 42px;
    color: #eb008b;
    text-align: center;
    text-indent: -42px;
    font-size: 130%;
    font-weight: normal;
    background: url(images/flower.gif) no-repeat 100% 100%;
}
.servicedetial dd {
    clear: both;
    padding-left: 3em; 
}
.servicedetial dd strong {
    float: left;
    display: inline;
    margin-left: -3em;
}
* html .servicedetial dd strong {
    margin-right: -3px;
}

/* page-contact
==========================================================*/
.contact {
    margin-left: 305px;
}
.contactinfo {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}
.contactinfo li {
    width: 49%;
    float: left;
    white-space: nowrap;
}
.contactform li {
    clear: both;
    margin-bottom: 5px;
}
.contactform input.txt, .contactform textarea {
    border: 1px solid #9b9b9b;
    border-width: 1px 0 0 1px;
    background-color: #eee;
    font-size: 120%;
    overflow: visible;
}
.contactform input.txt {
    height: 1.4em;
    line-height: 1.4;
    width: 235px;
}
.contactform textarea {
    overflow: auto;
    width: 320px;
}
.contactform input.btn {
    height: 20px;
    line-height: 20px;
    border: 0;
    padding: 0 20px;
    color: #fff;
    background: url(images/button.gif) repeat-x;
    cursor: pointer;
    overflow: visible;
}
.contactform label {
    float: left;
    width: 7em;
}
* html .contactform label {
    margin-right: -3px; /* ie 3px bug */
}
.contactform .indent {
    padding-left: 7em;
}

/*= some useful colour */
.pink, .pink:link, .pink:visited {
    color: #eb008b;
}
.black, .black:link, .black:visited {
    color: #333;
}
.gray, .gray:link, .gray:visited {
    color: #999;
}
.hidden {
    display: none;
}