/* the following lines attempt to clear the css palette */

* {
     margin:0;
     padding:0;
     border: none;
     text-decoration:none;
     list-style:none;
     font-style:normal;
     font-weight: normal;
     font-size: 100%;
     /*
     color: #c4c4c4;
     background-color: rgb(4,4,4);
     */ 
}

q:before, q:after {
     content: ""; 
}

/* standard HTML tags */

html {
     background-color: rgb(4,4,4); 
}

body {
     font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
     background-color: rgb(4,4,4);
     color: #c4c4c4;
     line-height: 140%; 
}

h1 {
     font-size: 1.6em;
     margin-bottom: 10px; 
}

h2 {
     font-size: 1.5em;
     margin-bottom: 10px; 
}

h3 {
     font-size: 1.4em;
     margin-bottom: 10px; 
}

h4 {
     font-size: 1.3em;
     margin-bottom: 10px; 
}

h5 {
     font-size: 1.2em;
     margin-bottom: 10px; 
}

h6 {
     font-size: 1.1em;
     margin-bottom: 10px; 
}

p {
     padding-bottom: 10px; 
}

ol {
     padding-bottom: 10px; 
}

ul {
     padding-bottom: 10px; 
}

strong {
     font-weight: bold; 
}

em {
     font-style: italic; 
}

a:hover {
     text-decoration: underline; 
}

/* attribute selectors do not work on IE6 */

input[type="text"] {
     border: 1px gray solid; 
}

input[type="password"] {
     border: 1px gray solid; 
}

/* this is a fix for IE6 see above, put input[type=text] in this class */

input.tinput {
     border: 1px gray solid; 
}

textarea {
     border: 1px gray solid; 
}

select {
     border: 1px gray solid; 
}

button {
     border: 2px gray outset;
     padding-right: 5px;
     padding-left: 5px;
     text-align: center;
     vertical-align: middle; 
}

button.btnHover {
     color: red; 
}

button.btnActive {
     border: 2px gray inset;
     color: purple; 
}

button.btnUnactive {
     border: 2px gray outset; 
}

/* handy classes */

.hidden {
     display: none; 
}

.centered {
     text-align: center; 
}

.right {
     text-align: right; 
}

.bold {
     font-weight: bold; 
}

.required {
     font-weight: bold; 
}

.bordbot {
     border-bottom: 1px black solid; 
}

.gray {
     color: gray; 
}

/* site specific stuff below */

/* site root page */

#root-container {
     background-color: rgb(4,4,4);
     color: #c4c4c4; 
}

#root-container a {
     color: #c4c4c4; 
}

#root-container #logo {
     width: 800px;
     height: 310px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 200px;
     background-color: rgb(4,4,4);
     background-image: url(../images/yaling-logo.jpg);
     background-repeat: no-repeat;
     background-position: center; 
}

#root-container #skips {
     margin-right: auto;
     margin-left: auto;
     width: 800px;
     text-align: center; 
}

/* homepage */

#container {
     width: 800px;
     background-color: rgb(4,4,4);
     margin-right: auto;
     margin-left: auto;
     min-height: 600px;
     margin-top: 50px; 
}

/* top stripe */

#top-stripe {
     background-image: url(../images/background.gif);
     background-repeat: repeat-x;
     height: 144px;
     width: 100%;
     border-bottom: 1px #999999 solid;
     position: relative; 
}

/* logo */

#top-stripe #logo {
     background-image: url(../images/yaling-logo-header.jpg);
     background-repeat: no-repeat;
     width: 131px;
     height: 144px;
     margin-left: 20px; 
}

/* home and language english */

#top-stripe #lang {
     position: absolute;
     top: 10px;
     left: 680px;
     background-color: #2A2A2B; 
}

#top-stripe #lang ul {
     margin:0;
     padding:0; 
}

#top-stripe #lang li {
     display: inline;
     margin:0;
     padding:0; 
}

#top-stripe #lang li a {
     display: block;
     height: 15px;
     float: left; 
}

#top-stripe #lang li a#home {
     background-image: url(../images/home.gif);
     background-repeat: no-repeat;
     width: 57px; 
}

#top-stripe #lang li a:hover#home {
     background-position: -57px; 
}

#top-stripe #lang li a#home.current {
     background-position: -114px; 
}

#top-stripe #lang li a#cn {
     background-image: url(../images/chinese.gif);
     background-repeat: no-repeat;
     width: 43px;
     border-left: 1px red solid; 
}

#top-stripe #lang li a:hover#cn {
     background-position: -43px; 
}

#top-stripe #lang li a#cn.current {
     background-position: -86px; 
}

/* home and language chinese */

#top-stripe #lang li a#home-cn {
     background-image: url(../cn/images/home.gif);
     background-repeat: no-repeat;
     width: 51px; 
}

#top-stripe #lang li a:hover#home-cn {
     background-position: -51px; 
}

#top-stripe #lang li a#home-cn.current {
     background-position: -102px; 
}

#top-stripe #lang li a#en {
     background-image: url(../cn/images/english.gif);
     background-repeat: no-repeat;
     width: 67px;
     border-left: 1px red solid; 
}

#top-stripe #lang li a:hover#en {
     background-position: -67px; 
}

#top-stripe #lang li a#en.current {
     background-position: -134px; 
}

/* top menu english */

#top-stripe #top-menu {
     position: absolute;
     bottom: 0px;
     left: 337px; 
}

#top-stripe #top-menu ul {
     margin:0;
     padding:0; 
}

#top-stripe #top-menu li {
     display: inline;
     margin:0;
     padding:0; 
}

#top-stripe #top-menu li a {
     display: block;
     height: 41px;
     float: left; 
}

#top-stripe #top-menu li a#story {
     background-image: url(../images/story.gif);
     background-repeat: no-repeat;
     width: 99px; 
}

#top-stripe #top-menu li a:hover#story {
     background-position: -99px; 
}

#top-stripe #top-menu li a#story.current {
     background-position: -198px; 
}

#top-stripe #top-menu li a#boutiques {
     background-image: url(../images/boutiques.gif);
     background-repeat: no-repeat;
     width: 103px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu li a:hover#boutiques {
     background-position: -103px; 
}

#top-stripe #top-menu li a#boutiques.current {
     background-position: -206px; 
}

#top-stripe #top-menu li a#collection {
     background-image: url(../images/collection.gif);
     background-repeat: no-repeat;
     width: 143px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu li a:hover#collection {
     background-position: -143px; 
}

#top-stripe #top-menu li a#collection.current {
     background-position: -286px; 
}

#top-stripe #top-menu li a#contact {
     background-image: url(../images/contact.gif);
     background-repeat: no-repeat;
     width: 115px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu li a:hover#contact {
     background-position: -115px; 
}

#top-stripe #top-menu li a#contact.current {
     background-position: -230px; 
}

/* top menu chinese */

#top-stripe #top-menu-cn {
     position: absolute;
     bottom: 0px;
     left: 378px; 
}

#top-stripe #top-menu-cn ul {
     margin:0;
     padding:0; 
}

#top-stripe #top-menu-cn li {
     display: inline;
     margin:0;
     padding:0; 
}

#top-stripe #top-menu-cn li a {
     display: block;
     height: 41px;
     float: left; 
}

#top-stripe #top-menu-cn li a#story {
     background-image: url(../cn/images/story.gif);
     background-repeat: no-repeat;
     width: 109px; 
}

#top-stripe #top-menu-cn li a:hover#story {
     background-position: -109px; 
}

#top-stripe #top-menu-cn li a#story.current {
     background-position: -218px; 
}

#top-stripe #top-menu-cn li a#boutiques {
     background-image: url(../cn/images/boutiques.gif);
     background-repeat: no-repeat;
     width: 92px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu-cn li a:hover#boutiques {
     background-position: -92px; 
}

#top-stripe #top-menu-cn li a#boutiques.current {
     background-position: -184px; 
}

#top-stripe #top-menu-cn li a#collection {
     background-image: url(../cn/images/collection.gif);
     background-repeat: no-repeat;
     width: 108px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu-cn li a:hover#collection {
     background-position: -108px; 
}

#top-stripe #top-menu-cn li a#collection.current {
     background-position: -216px; 
}

#top-stripe #top-menu-cn li a#contact {
     background-image: url(../cn/images/contact.gif);
     background-repeat: no-repeat;
     width: 110px;
     border-left: 1px #999999 solid; 
}

#top-stripe #top-menu-cn li a:hover#contact {
     background-position: -110px; 
}

#top-stripe #top-menu-cn li a#contact.current {
     background-position: -220px; 
}


/*  content */

#content {
     width: 800px;
     min-height: 310px;
     color: #c4c4c4;
     background-color: rgb(4,4,4);
     position: relative; 
}

#content a {
     color: #c4c4c4; 
}

/* background images */

#homepage #content {
     background-image: url(../images/backgrounds/homepage.jpg);
     background-repeat: no-repeat; 
}

#story-page #content {
     background-image: url(../images/backgrounds/Story.jpg);
     background-repeat: no-repeat; 
}

#boutiques-page #content {
     background-image: url(../images/backgrounds/Boutiques.jpg);
     background-repeat: no-repeat; 
}

#collection-page #content {
     background-image: url(../images/backgrounds/Collection.jpg);
     background-repeat: no-repeat; 
}


#collection-page .yquote{
     font-size: 18px;
     font-style: italic; 
}

#contact-page #content {
     background-image: url(../images/backgrounds/Contact.jpg);
     background-repeat: no-repeat; 
}

#fashion-page #content {
     background-image: url(../images/backgrounds/Fashion.jpg);
     background-repeat: no-repeat; 
}

#scarf-page #content {
     background-image: url(../images/backgrounds/Scarf.jpg);
     background-repeat: no-repeat; 
}

#shawl-page #content {
     background-image: url(../images/backgrounds/Shawl.jpg);
     background-repeat: no-repeat; 
}

#cape-page #content {
     background-image: url(../images/backgrounds/Cape.jpg);
     background-repeat: no-repeat; 
}

#lifestyle-page #content {
     background-image: url(../images/backgrounds/Lifestyle.jpg);
     background-repeat: no-repeat; 
}

#blouse-page #content {
     background-image: url(../images/backgrounds/Blouse.jpg);
     background-repeat: no-repeat; 
}

#jacket-page #content {
     background-image: url(../images/backgrounds/Jacket.jpg);
     background-repeat: no-repeat; 
}

#beachwear-page #content {
     background-image: url(../images/backgrounds/BeachWear.jpg);
     background-repeat: no-repeat; 
}

#blanket-page #content {
     background-image: url(../images/backgrounds/Blanket.jpg);
     background-repeat: no-repeat; 
}

#bathrobe-page #content {
     background-image: url(../images/backgrounds/BathRobe.jpg);
     background-repeat: no-repeat; 
}

#cushion-page #content {
     background-image: url(../images/backgrounds/Cushion.jpg);
     background-repeat: no-repeat; 
}

#runners-page #content {
     background-image: url(../images/backgrounds/Runner.jpg);
     background-repeat: no-repeat; 
}

/* boutique locations */

#boutiques-page #content #map {
     float: left;
     position: relative; 
}

#boutiques-page #content #map #swiss a {
     display: block;
     /*background-color: yellow;
     */
     width: 10px;
     height: 10px;
     position: absolute;
     top: 165px;
     left: 65px; 
}

#boutiques-page #content #map #bei a {
     display: block;
     /*background-color: yellow;
     */
     width: 10px;
     height: 10px;
     position: absolute;
     top: 190px;
     left: 230px; 
}

#boutiques-page #content #map #hang a {
     display: block;
     /*background-color: yellow;
     */
     width: 10px;
     height: 10px;
     position: absolute;
     top: 210px;
     left: 245px; 
}

#boutiques-page #content #map #hkg a {
     display: block;
     /*background-color: yellow;
     */
     width: 10px;
     height: 10px;
     position: absolute;
     top: 225px;
     left: 235px; 
}

#boutiques-page iframe#boutfrm {
     height: 350px;
     width: 100%; 
}

#boutloc p {
     width:95%; 
}

/* side menu */

#content #side-menu {
     width: 120px;
     margin-left: 10px;
     background-color: transparent;
     text-align: center;
     float: left; 
}

#content #side-menu ul {
     background-color: transparent; 
}

#content #side-menu li {
     background-color: transparent; 
}

#content #side-menu ul li a.side-menu {
     background-color: transparent;
     border-bottom: 1px red solid;
     padding-top: 10px;
     padding-bottom: 10px;
     display: block; 
}

#content #side-menu ul.sub-side-menu {
     border-bottom: 1px red solid; 
}

#content #side-menu ul li ul li a.sub-side-menu {
     background-color: transparent;
     padding-top: 5px;
     padding-bottom: 5px;
     display: block; 
}

/* content text */

#content #txt {
     width: 380px;
     padding: 10px;
     float: right; 
}

/* sub products images */

#content #txt #subprods { 
}

#content #txt #subprods img {
     border: 1px white solid; 
}

#content #txt #subprods td {
     text-align: center;
     padding-top: 10px;
     padding-right: 10px; 
}

/* sub images */

#content #subimgs { 
}

#content #subimgs img {
     border: 1px white solid; 
}

#content #subimgs td {
     text-align: center;
     padding-right: 10px; 
}

/* end of content block */

#content-end {
     clear: both;
     width: 100%;
     height: 1px; 
}

/* bottom stripe */

#bottom-stripe {
     background-image: url(../images/bottom-stripe.jpg);
     background-repeat: repeat-x;
     height: 144px;
     width: 100%;
     border-top: 1px #999999 solid;
     position: relative;
     clear: both; 
}

#copyright {
     font-size: 11px;
     width: 800px;
     margin-right: auto;
     margin-left: auto;
     text-align: center;
     position: absolute;
     bottom: 0px;
     background-color: transparent;
     color: #c4c4c4; 
}

#root-container #copyright {
     position: relative; 
}

#credits {
     font-size: 9px;
     width: 800px;
     margin-right: auto;
     margin-left: auto;
     text-align: right;
     color: #c4c4c4; 
}

#credits a {
     color: #c4c4c4; 
}