/* CSS */
html{ overflow: scroll; }
* { padding: 0; margin: 0; } .separator{ clear: both; } .none{ display: none; } .hide{ visibility: hidden; }
a{color: #000; text-decoration: none;} a:hover, a.on{color: #FFF; text-decoration: none;} p {line-height: 1.3em;} img, fieldset { border: 0; }
h1, h2, h3, h4, h5 {color: #000; font-family: "Helvetica", "Arial", sans-serif;}
body{ background-color: #FFF; color: #000; font-family: "Helvetica", "Arial", sans-serif; font-size: 10px; text-align: left; }

/* HEADER */
#wrapper{ background-color: #FFF; }
#header{ background-color: #FFF; width: 100%; height: 179px; position: relative; }

#header h1{ position: absolute; top: 25px; left: 25px; width: 137px; height: 11px; }
#header h1 a{ display: block; width: 137px; height: 11px; background: transparent url("../img/logo.jpg") top left no-repeat; }

/* NAV */
#header #nav{ position: absolute; top: 25px; left: 656px; }
#header #nav ul{ list-style: none; }
#header #nav li{ display: block; }
#header #nav li a{ display: block; width: 58px; height: 11px; margin-bottom: 3px; }

#header #nav li#projects a{ background: transparent url("../img/nav.jpg") -6px -5px no-repeat; }
#header #nav li#articles a{ background: transparent url("../img/nav.jpg") -6px -19px no-repeat; }
#header #nav li#intro a{ background: transparent url("../img/nav.jpg") -6px -33px no-repeat; }
#header #nav li#phil a{ background: transparent url("../img/nav.jpg") -6px -47px no-repeat; margin-bottom: 2px; }
#header #nav li#clients a{ background: transparent url("../img/nav.jpg") -6px -60px no-repeat; margin-bottom: 4px; }
#header #nav li#works a{ background: transparent url("../img/nav.jpg") -6px -75px no-repeat; margin-bottom: 2px; }
#header #nav li#contact a{ background: transparent url("../img/nav.jpg") -6px -88px no-repeat; }

#header #nav li#projects a.on, #header #nav li#projects a:hover{ background: transparent url("../img/nav.jpg") -6px -403px no-repeat; }
#header #nav li#articles a.on, #header #nav li#articles a:hover{ background: transparent url("../img/nav.jpg") -6px -417px no-repeat; }
#header #nav li#intro a.on, #header #nav li#intro a:hover{ background: transparent url("../img/nav.jpg") -6px -431px no-repeat; }
#header #nav li#phil a.on, #header #nav li#phil a:hover{ background: transparent url("../img/nav.jpg") -6px -445px no-repeat; }
#header #nav li#clients a.on, #header #nav li#clients a:hover{ background: transparent url("../img/nav.jpg") -6px -458px no-repeat; margin-bottom: 4px; }
#header #nav li#works a.on, #header #nav li#works a:hover{ background: transparent url("../img/nav.jpg") -6px -473px no-repeat; margin-bottom: 2px; }
#header #nav li#contact a.on, #header #nav li#contact a:hover{ background: transparent url("../img/nav.jpg") -6px -486px no-repeat; }

/* SUB NAV 1 */
#header #sub_nav1{ position: absolute; top: 25px; left: 814px; }
#header #sub_nav1 ul{ list-style: none; }
#header #sub_nav1 li{ display: block; }
#header #sub_nav1 li a{ display: block; width: 130px; height: 11px; margin-bottom: 3px; }

#header #sub_nav1 li#little_red_book a{ background: transparent url("../img/nav.jpg") -164px -5px no-repeat; }
#header #sub_nav1 li#superwoman a{ background: transparent url("../img/nav.jpg") -164px -19px no-repeat;  }
#header #sub_nav1 li#private_space a{ background: transparent url("../img/nav.jpg") -164px -33px no-repeat; }
#header #sub_nav1 li#quotes_on_typography a{ background: transparent url("../img/nav.jpg") -164px -47px no-repeat; }
#header #sub_nav1 li#ten_days a{ background: transparent url("../img/nav.jpg") -164px -61px no-repeat; margin-bottom: 2px;}
#header #sub_nav1 li#ttf_shopping_bags a{ background: transparent url("../img/nav.jpg") -164px -74px no-repeat; }
#header #sub_nav1 li#mohawk_portfolio a{ background: transparent url("../img/nav.jpg") -164px -88px no-repeat; }

#header #sub_nav1 li#little_red_book a.on, #header #sub_nav1 li#little_red_book a:hover{ background: transparent url("../img/nav.jpg") -164px -403px no-repeat;  }
#header #sub_nav1 li#superwoman a.on, #header #sub_nav1 li#superwoman a:hover{ background: transparent url("../img/nav.jpg") -164px -417px no-repeat; }
#header #sub_nav1 li#private_space a.on, #header #sub_nav1 li#private_space a:hover{ background: transparent url("../img/nav.jpg") -164px -431px no-repeat; }
#header #sub_nav1 li#quotes_on_typography a.on, #header #sub_nav1 li#quotes_on_typography a:hover{ background: transparent url("../img/nav.jpg") -164px -445px no-repeat; }
#header #sub_nav1 li#ten_days a.on, #header #sub_nav1 li#ten_days a:hover{ background: transparent url("../img/nav.jpg") -164px -459px no-repeat; margin-bottom: 2px;}
#header #sub_nav1 li#ttf_shopping_bags a.on, #header #sub_nav1 li#ttf_shopping_bags a:hover{ background: transparent url("../img/nav.jpg") -164px -472px no-repeat; }
#header #sub_nav1 li#mohawk_portfolio a.on, #header #sub_nav1 li#mohawk_portfolio a:hover{ background: transparent url("../img/nav.jpg") -164px -486px no-repeat; }

/* SUB NAV 2 */
#header #sub_nav2{ position: absolute; top: 95px; left: 814px; }
#header #sub_nav2 ul{ list-style: none; }
#header #sub_nav2 li{ display: block; }
#header #sub_nav2 li a{ display: block; width: 140px; height: 11px; }

#header #sub_nav2 li#corporate_communication a{ background: transparent url("../img/nav.jpg") -638px -74px no-repeat; margin-bottom: 4px; }
#header #sub_nav2 li#brand_identity a{ background: transparent url("../img/nav.jpg") -638px -89px no-repeat; margin-bottom: 3px; }
#header #sub_nav2 li#promotional_collaterals a{ background: transparent url("../img/nav.jpg") -638px -102px no-repeat; margin-bottom: 3px; }
#header #sub_nav2 li#posters a{ background: transparent url("../img/nav.jpg") -638px -117px no-repeat; }

#header #sub_nav2 li#corporate_communication a.on, #header #sub_nav2 li#corporate_communication a:hover{ background: transparent url("../img/nav.jpg") -638px -472px no-repeat; margin-bottom: 4px; }
#header #sub_nav2 li#brand_identity a.on, #header #sub_nav2 li#brand_identity a:hover{ background: transparent url("../img/nav.jpg") -638px -487px no-repeat; margin-bottom: 3px; }
#header #sub_nav2 li#promotional_collaterals a.on, #header #sub_nav2 li#promotional_collaterals a:hover{ background: transparent url("../img/nav.jpg") -638px -500px no-repeat; margin-bottom: 3px; }
#header #sub_nav2 li#posters a.on, #header #sub_nav2 li#posters a:hover{ background: transparent url("../img/nav.jpg") -638px -515px no-repeat; }

/* SUB NAV 3 */
#header #sub_nav3{ position: absolute; top: 40px; left: 814px; }
#header #sub_nav3 ul{ list-style: none; }
#header #sub_nav3 li{ display: block; }
#header #sub_nav3 li a{ display: block; width: 150px; height: 11px; }

#header #sub_nav3 li#the_last_designer a{ background: transparent url("../img/nav.jpg") -1108px -6px no-repeat; margin-bottom: 2px; }
#header #sub_nav3 li#mike_chu_on_sandy_choi a{ background: transparent url("../img/nav.jpg") -1108px -19px no-repeat; margin-bottom: 4px; }
#header #sub_nav3 li#rmm_interview a{ background: transparent url("../img/nav.jpg") -1108px -34px no-repeat; margin-bottom: 3px; }
#header #sub_nav3 li#interview_by_jianping_he a{ background: transparent url("../img/nav.jpg") -1108px -48px no-repeat; }

#header #sub_nav3 li#the_last_designer a:hover, #header #sub_nav3 li#the_last_designer a.on{ background: transparent url("../img/nav.jpg") -1108px -185px no-repeat; margin-bottom: 2px; }
#header #sub_nav3 li#mike_chu_on_sandy_choi a:hover, #header #sub_nav3 li#mike_chu_on_sandy_choi a.on{ background: transparent url("../img/nav.jpg") -1108px -198px no-repeat; margin-bottom: 4px; }
#header #sub_nav3 li#rmm_interview a:hover, #header #sub_nav3 li#rmm_interview a.on{ background: transparent url("../img/nav.jpg") -1108px -213px no-repeat; margin-bottom: 3px; }
#header #sub_nav3 li#interview_by_jianping_he a:hover, #header #sub_nav3 li#interview_by_jianping_he a.on{ background: transparent url("../img/nav.jpg") -1108px -227px no-repeat; }

/* HOMEPAGE */
#homepage{ width: 100%; position: relative; }
#homepage div#projects{ width: 778px; height: 449px; position: absolute; top: 0; left: 25px; }
#homepage div#projects a{ display: block; position: absolute; top: 0; left: 0; }
#homepage div#projects a#p1{ background-color: none; z-index: 1; }
#homepage div#projects a#p2{ background-color: none; z-index: 2; }
#homepage div#projects a#p3{ background-color: none; z-index: 3; }
#homepage div#projects a#p4{ background-color: none; z-index: 4; }
#homepage div#projects a#p5{ background-color: none; z-index: 5; }
#homepage div#projects a#p6{ background-color: none; z-index: 6; }
#homepage div#projects a#p7{ background-color: none; z-index: 7; }

/* MAIN */
#maintext{ width: 100%; position: relative; }
/*#maintext img{ position: absolute; top: 0; left: 0; }*/

/* SEVEN PROJECTS */
#seven_projects{ width: 100%; position: relative; }
#seven_projects .horzi_bar{ position: absolute; top: 0; left: 25px; width: 778px; height: 11px; }
#seven_projects .bar1{ background: transparent url("../img/home1-bar.jpg") top left no-repeat; }
#seven_projects .bar2{ background: transparent url("../img/home2-bar.jpg") top left no-repeat; }
#seven_projects .bar3{ background: transparent url("../img/home3-bar.jpg") top left no-repeat; }
#seven_projects .bar4{ background: transparent url("../img/home4-bar.jpg") top left no-repeat; }
#seven_projects .bar5{ background: transparent url("../img/home5-bar.jpg") top left no-repeat; }
#seven_projects .bar6{ background: transparent url("../img/home6-bar.jpg") top left no-repeat; }
#seven_projects .pimg{ position: absolute; }
#seven_projects .ptxt{ position: absolute; }
#seven_projects .pageno{ position: absolute; }
#seven_projects .navleft{ width: 11px; height: 13px; position: absolute; left: 778px; top: 414px; background: transparent url("../img/projects-navleft.jpg") top left no-repeat; }
#seven_projects .navright{ width: 11px; height: 13px; position: absolute; left: 794px; top: 414px; background: transparent url("../img/projects-navright.jpg") top left no-repeat; }

/* WORK */
#work{ width: 100%; position: relative; }
#work .wimg{ position: absolute; }
#work .wtxt{ position: absolute; }
#work .navleft{ width: 11px; height: 13px; position: absolute; left: 935px; top: 133px; background: transparent url("../img/work-navleft.jpg") top left no-repeat; }
#work .navright{ width: 11px; height: 13px; position: absolute; left: 952px; top: 133px; background: transparent url("../img/work-navright.jpg") top left no-repeat; }

#work2{ width: 100%; position: relative; }
#work2 .wimg{ position: absolute; }
#work2 .wtxt{ position: absolute; }
#work2 .navleft{ width: 11px; height: 13px; position: absolute; left: 935px; top: 133px; background: transparent url("../img/work2-navleft.jpg") top left no-repeat; }
#work2 .navright{ width: 11px; height: 13px; position: absolute; left: 952px; top: 133px; background: transparent url("../img/work2-navright.jpg") top left no-repeat; }

/* ARTICLE */
#article{ width: 100%; position: relative; }
#article p{ margin-bottom: 15px; }

/* FOOTER */
#footer{}