@import url("cssreset.css");
@import url("base2.css");

/* Tutorial ball slider */
/*-------------------------------------------------------*/

body {
    overflow:hidden;
    margin:0;
    padding:0;
}

#wrapper {
    position:relative;
    width:100%;
    min-height:544px;
    background:url("../brand/images/bg_pearl.png") no-repeat center bottom;
}


ul.catPearl {
    text-align:center;
}
ul.catPearl li {
    display:inline-block;
    width:380px;
    height:70px;
    margin-right:22px;
    font-size:1.3em;
}
ul.catPearl li:last-child {
    margin-right:0;
}

ul.catPearl li a {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background:#d5d5d5;
    border:1px solid #808080;
    line-height:70px;
    color:#808080;
    text-decoration:none;
}

ul.catPearl li a:after {
    content:'';
    position:absolute;
    left:50%;
    bottom:-20px;
    margin-left:-10px;
    border-top:20px solid #d5d5d5;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
}
ul.catPearl li a:before {
    content:'';
    position:absolute;
    left:50%;
    bottom:-21px;
    margin-left:-10px;
    border-top:20px solid #808080;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
}

ul.catPearl li a:hover {
    background:#f7c3c8;
}
ul.catPearl li a:hover:after {
    border-top:20px solid #f7c3c8;
}


ul.catPearl li.active {
    position:relative;
    background:#f7c3c8;
    border:1px solid #808080;
    line-height:70px;
    color:#808080;
}
ul.catPearl li.active:after {
    content:'';
    position:absolute;
    left:50%;
    bottom:-20px;
    margin-left:-10px;
    border-top:20px solid #f7c3c8;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
}
ul.catPearl li.active:before {
    content:'';
    position:absolute;
    left:50%;
    bottom:-21px;
    margin-left:-10px;
    border-top:20px solid #808080;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
}


.pearlImg {
    padding-top:65px;
}

#slider {
    position:absolute;
    left:0;
    right:0;
    bottom:100px;
    width:400px;
    margin:0 auto 5px;
    background:#999999;
    border-radius:10px;
    z-index:100;
}
#slider_5 {
    position:absolute;
    left:0;
    right:0;
    bottom:100px;
    width:520px;
    margin:0 auto 5px;
    background:#999999;
    border-radius:10px;
    z-index:100;
}
#slider_7 {
    position:absolute;
    left:0;
    right:0;
    bottom:100px;
    width:580px;
    margin:0 auto 5px;
    background:#999999;
    border-radius:10px;
    z-index:100;
}

#amount {
    width:1em;
    border:0;
    font-weight:bold;
    border:1px solid #f00;
}
#slider .ui-slider-handle,#slider_5 .ui-slider-handle,#slider_7 .ui-slider-handle {
    border-color:#D2969E;
    background:#D2969E;
    border-radius:10px;
    outline:none;
}

ul.sliderTxt_4 {
    display:table;
    position:absolute;
    left:0;
    right:0;
    bottom:60px;
    width:520px;
    margin:0 auto;
    padding:0 0.5em;
    text-align:center;
    z-index:100;
}
ul.sliderTxt_5 {
    display:table;
    position:absolute;
    left:0;
    right:0;
    bottom:60px;
    width:660px;
    margin:0 auto;
    padding:0 0.5em;
    text-align:center;
    z-index:100;
}
ul.sliderTxt_7 {
    display:table;
    position:absolute;
    left:0;
    right:0;
    bottom:60px;
    width:680px;
    margin:0 auto;
    padding:0 0.5em;
    text-align:center;
    z-index:100;
}
ul.sliderTxt_4 li,ul.sliderTxt_5 li,ul.sliderTxt_7 li  {
    display:table-cell;
    font-size:1.2em;
    color:#6b6b6b;
}
ul.sliderTxt_4 li:last-child,ul.sliderTxt_5 li:last-child,ul.sliderTxt_7 li:last-child {
    margin-right:0;
}

ul.sliderTxt_4 li {
    width:25%;
}
ul.sliderTxt_5 li {
    width:2em;
}
ul.sliderTxt_7 li {
    width:3em;
}


/* - 1200px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

ul.catPearl li {
    width:31%;
    margin-right:2%;
}



}
/* - 1200px end */


/* - 768px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 768px) {



}
/* - 768px end */


/* - 640px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {

ul.catPearl li {
    width:30%;
    margin-right:2%;
}

img#pearl {
}
#slider,#slider_5,#slider_7 {
    width:90%;
}
ul.sliderTxt_4,ul.sliderTxt_5,ul.sliderTxt_7 {
    bottom:70px;
    text-align:center;
}
ul.sliderTxt_4 {
    width:94%;
}
ul.sliderTxt_4 li:first-child { text-align:left; }
ul.sliderTxt_4 li:last-child { text-align:right; }
ul.sliderTxt_4 li span.right1 { padding-right:2em; }
ul.sliderTxt_4 li span.left1 { padding-left:2em; }

ul.sliderTxt_5 {
    width:94%;
}
ul.sliderTxt_5 li:first-child { text-align:left; }
ul.sliderTxt_5 li:last-child { text-align:right; }
ul.sliderTxt_5 li span.right1 { padding-right:2.5em; }
ul.sliderTxt_5 li span.left1 { padding-left:2.5em; }

ul.sliderTxt_7 {
    width:98%;
}

}
/* - 640px end */


/* - 480px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 480px) {

ul.sliderTxt_4 li,ul.sliderTxt_5 li,ul.sliderTxt_7 li {
    font-size:1.0em;
}

ul.sliderTxt_5 li span.right1 { padding-right:1em; }
ul.sliderTxt_5 li span.left1 { padding-left:1em; }


}
/* - 480px end */


/* - 360px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 360px) {



}
/* - 360px end */