/*
red          #c23e29
button       #44aadd
anchor       #336699
text         #666666
light brown  #eae9e3 (background)
darker brown #d4d3cd (border)
*/


/**
 * no js
 */

#wrap {
    display: none;
}

.js+#wrap {
    display: block;
}

.no-js-content {
    padding: 100px;
    text-align: center;
    color: #333;
}


/**
 * upgrading
 */

#upgrading {
    padding: 100px;
    text-align: center;
    color: #333;
}

#upgrading p {
    padding-bottom: 30px;
}

#upgrading ul {
    display: inline;
    list-style: none;
}

#upgrading li {
    display: inline;
    padding: 0 20px;
}


/**
 * div.disabled-message
 */

div.disabled-message {
    left: 0;
    top: 0;
    position: absolute;
    padding: 20px;
    text-align: center;
    background: #333;
    background: rgba( 0, 0, 0, .8);
    color: white;
    font-size: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


/**
 * general
 */

html,
body {
    overflow: hidden;
}

body {
    font-size: .8em;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
}

a {
    color: #336699;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

i {
    font-style: normal;
}

input[type=text],
input[type=submit],
textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.template {
    display: none;
}

.loading {
    padding: 3px 10px;
    text-align: center;
    background: #faf5b1;
    color: #222;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


/**
 * Header
 */

#header {
    height: 48px;
    border-bottom: 2px solid #444;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #be252c;
    /*
  background-color: #c33f2a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c84a34), to(#b93421));
  background-image: -webkit-linear-gradient(top, #c84a34, #b93421);
  background-image:    -moz-linear-gradient(top, #c84a34, #b93421);
  background-image:      -o-linear-gradient(top, #c84a34, #b93421);
  background-image:         linear-gradient(to bottom, #c84a34, #b93421);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c84a34', endColorstr='#b93421');
*/
}

#header .fix {
    min-width: 954px;
    position: relative;
}

#header h1 {
    float: left;
    width: 300px;
    height: 48px;
}

#header h1 strong {
    /*  display: none;*/
}

#header h1 a {
    position: absolute;
    display: block;
    left: 20px;
    top: 5px;
    width: 142px;
    height: 0;
    padding-top: 38px;
    overflow: hidden;
    z-index: 9999;
}

#header h1 span {
    position: absolute;
    top: 26px;
    left: 189px;
}


/** search form **/

#header form {
    position: absolute;
    left: 300px;
    padding-top: 8px;
    width: 497px;
}

#header form input.input-keyword {
    width: 180px;
}

#header form input.input-address {
    width: 220px;
}

#header form input[type=text] {
    font-size: 1em;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
    background-image: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
    /*  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e8e8e8');*/
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3), inset 0px 1px 1px 0px rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3), inset 0px 1px 1px 0px rgba(255, 255, 255, .9);
}

#header form input[type=text]:focus {
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5), inset 0px 1px 1px 0px rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5), inset 0px 1px 1px 0px rgba(255, 255, 255, .9);
}

#header form input[type=submit] {
    background-color: #ebcf34;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#efd852), to(#e8c62f));
    background-image: -webkit-linear-gradient(top, #efd852, #e8c62f);
    background-image: -moz-linear-gradient(top, #efd852, #e8c62f);
    background-image: -o-linear-gradient(top, #efd852, #e8c62f);
    background-image: linear-gradient(to bottom, #efd852, #e8c62f);
    /*  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efd852', endColorstr='#e8c62f');*/
    font-size: 14px;
    width: 80px;
    cursor: pointer;
}

#header form input[type=submit]:hover {
    background-color: #FFDA3E;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFDA3E), to(#FFDA3E));
    background-image: -webkit-linear-gradient(top, #FFDA3E, #FFDA3E);
    background-image: -moz-linear-gradient(top, #FFDA3E, #FFDA3E);
    background-image: -o-linear-gradient(top, #FFDA3E, #FFDA3E);
    background-image: linear-gradient(to bottom, #FFDA3E, #FFDA3E);
}

#header form input[type=text],
#header form input[type=submit] {
    height: 30px;
    margin: 0;
    padding: 0 6px;
    border: 1px solid #a84b3c;
    color: #333;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#header form .kw-div {
    float: left;
    position: relative;
    margin-right: 3px;
}

#header form .clear {
    position: absolute;
    top: 7px;
    left: 157px;
    background: #aaa;
    color: black;
    cursor: pointer;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


/** quick-search **/

#quick-search {
    position: absolute;
    left: 797px;
    top: 9px;
    background-color: #333;
}

#quick-search h4 {
    cursor: pointer;
    height: 29px;
    color: #ccc;
    font-weight: normal;
    padding: 6px 0 0 10px;
    width: 80px;
    border: 1px solid #222;
    /*border-bottom-color: #222;*/
    /*background-color: #d5d5d5;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#555));
    background-image: -webkit-linear-gradient(top, #333, #555);
    background-image: -moz-linear-gradient(top, #333, #555);
    background-image: -o-linear-gradient(top, #333, #555);
    background-image: linear-gradient(to bottom, #333, #555);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#555');
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#quick-search.open h4 {
    /*background: white;*/
    /*border: 1px solid #ddd;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
    background-image: -webkit-linear-gradient(top, #555, #333);
    background-image: -moz-linear-gradient(top, #555, #333);
    background-image: -o-linear-gradient(top, #555, #333);
    background-image: linear-gradient(to bottom, #555, #333);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#333');
    border-bottom: 0 none;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#quick-search div {
    position: relative;
}

#quick-search ul {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #be252c;
    width: 80px;
    /*border: 1px solid #8F0100;*/
    /*border-top: 0 none;*/
    display: none;
    /*  -webkit-border-bottom-left-radius:  2px;
  -webkit-border-bottom-right-radius: 2px;
     -moz-border-radius-bottomleft:   2px;
     -moz-border-radius-bottomright:  2px;
          border-bottom-left-radius:  2px;
          border-bottom-right-radius: 2px;*/
}

#quick-search li {
    cursor: pointer;
    color: #FFD0C0;
    padding: 6px 0 6px 10px;
    height: 20px;
    line-height: 1.5;
}

#quick-search li:hover {
    background-color: #E8414D;
    color: white;
    padding-top: -3px;
    padding-bottom: -3px;
}

#quick-search.expand {
    top: 10px;
}

#quick-search.expand h4 {
    display: none;
}

#quick-search.expand ul {
    width: 251px;
    display: block;
}

#quick-search.expand li {
    border-left: 1px solid #9B212A;
    float: left;
    padding: 0px 5px;
    margin: 3px 0;
    max-width: 3px 0;
}

#quick-search.expand li:first-child {
    border: none;
}


/** functions **/

#header #functions {
    float: right;
}

#header #functions ul {
    list-style: none;
}


/**
 * Main
 */

#main {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
}


/**
 * content
 */

#content {
    position: absolute;
    top: 0;
    left: 300px;
    bottom: 0;
    right: 0;
    margin-left: 160px;
    transition: all 300ms;
}

.wide #content {
    /*left: 0; 左邊關起時切齊位置*/
    left: 15px;
    transition: all 300ms;
}


/**
 * map_canvas
 */

#map-wrapper {
    position: absolute;
    top: 0px;
    left: 0;
    /*right: 0; 往右括避免會出現空白 */
    right: -180px;
    /*ad width*/
    bottom: 0;
}

#map_canvas {
    width: 100%;
    height: 100%;
}


/**
 * map ui
 */

#map-ui {
    position: absolute;
    width: 30px;
    height: 60px;
    top: 50px;
    left: 10px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}

#zoomin,
#zoomout {
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: #aaaaaa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
    background-image: -webkit-linear-gradient(top, #bbbbbb, #999999);
    background-image: -moz-linear-gradient(top, #bbbbbb, #999999);
    background-image: -o-linear-gradient(top, #bbbbbb, #999999);
    background-image: linear-gradient(to bottom, #bbbbbb, #999999);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bbbbbb', endColorstr='#999999');
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#zoomin {
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#zoomout {
    -webkit-border-bottom-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#geolocation {
    position: absolute;
    top: 115px;
    left: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
}


/**
 * keywords
 */

#keywords {
    position: absolute;
    /*right: 5px; 加上右邊加寬寬度*/
    right: 185px;
    top: 50px;
    left: 50px;
}

#keywords #t {
    margin-bottom: 4px;
}

#keywords #t,
#keywords #o {
    height: 16px;
    overflow: hidden;
}

#keywords #t span,
#keywords #o span {
    float: left;
    padding: 2px 4px;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    margin-right: 2px;
    color: white;
    cursor: pointer;
    margin-bottom: 100px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#keywords #t span {
    background: #1982ac;
}

#keywords #t span:hover {
    background: #03B0E5;
}

#keywords #o span {
    background: #69ab49;
}

#keywords #o span:hover {
    background: #71CE41;
}


/**
 * Filter
 */

#filter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    /*
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  background-image: -webkit-linear-gr
  adient(top, #eeeeee, #dddddd);
  background-image:    -moz-linear-gradient(top, #eeeeee, #dddddd);
  background-image:      -o-linear-gradient(top, #eeeeee, #dddddd);
  background-image:         linear-gradient(to bottom, #eeeeee, #dddddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd');
*/
}

#filter .topicmap {
    padding: 14px 0 0 15px;
}

#filter .topicmap strong {
    color: #c23e29;
}

#filter .topicmap span {
    background: #44aadd;
    color: white;
    padding: 5px 10px;
    margin-left: 20px;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#filter h2,
#filter h3 {
    font-weight: normal;
    float: left;
    padding-top: 14px;
}

#filter h2 {
    /*padding-left: 10px;*/
    color: #f0cb00;
    font-weight: bold;
    margin-top: 7px;
    margin-left: 5px;
    /*border:1px solid #333;*/
    padding: 7px;
}

#filter h3 {
    color: #b5b5b5;
    padding-left: 14px;
    padding-right: 6px;
}

#filter div.multi-selectbox {}


/**
 * Aside
 */

#aside {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 300px; shop list 寬度*/
    /*width: 460px; */
    width: 475px;
    /* shop list + ad + 15px*/
    border-right: 1px solid #ddd;
    bottom: 0;
    background: #f5f5f5;
}

#aside #aside-control {
    display: none;
    /*width: 25px;
  height: 50px;
  right: -26px; only arrow*/
    width: 30px;
    height: 110px;
    right: -29px;
    /*arrow + text*/
    cursor: pointer;
    background: red;
    position: absolute;
    top: 0;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    background-color: #aaaaaa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
    background-image: -webkit-linear-gradient(top, #bbbbbb, #999999);
    background-image: -moz-linear-gradient(top, #bbbbbb, #999999);
    background-image: -o-linear-gradient(top, #bbbbbb, #999999);
    background-image: linear-gradient(to bottom, #bbbbbb, #999999);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bbbbbb', endColorstr='#999999');
}

#aside #ad-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 60px;
}

#aside #tab {
    list-style: none;
    height: 40px;
    margin-left: 0;
    background-color: #555555;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
    background-image: -webkit-linear-gradient(top, #444444, #666666);
    background-image: -moz-linear-gradient(top, #444444, #666666);
    background-image: -o-linear-gradient(top, #444444, #666666);
    background-image: linear-gradient(to bottom, #444444, #666666);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
}

#aside #tab li {
    width: 98px;
    margin: 0 1px;
    margin-top: 0px;
    float: left;
    height: 25px;
    cursor: pointer;
    text-align: center;
    color: #eee;
    padding-top: 15px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#aside #tab li.active {
    color: #555;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f5f5f5));
    background-image: -webkit-linear-gradient(top, #fcfcfc, #f5f5f5);
    background-image: -moz-linear-gradient(top, #fcfcfc, #f5f5f5);
    background-image: -o-linear-gradient(top, #fcfcfc, #f5f5f5);
    background-image: linear-gradient(to bottom, #fcfcfc, #f5f5f5);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f5f5f5');
}

#aside #tab li i {
    color: #333;
    background: #eee;
    margin-left: 2px;
    display: inline-block;
    vertical-align: top;
    font-size: 9px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 10px;
    height: 10px;
    padding: 2px 5px;
    font-style: normal;
    text-align: center;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#aside #tab li.active i {
    color: white;
    background: #c23e29;
}

#aside .aside-content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 300px;
    /*bottom: 60px;*/
    bottom: 0px;
    background: #f5f5f5;
    overflow: auto;
}

#aside .aside-content div.wrapper {}

#aside .sort {
    padding: 10px 8px 5px 0;
    text-align: right;
    font-size: 12px;
}

#aside .sort strong {
    color: #333;
    font-weight: normal;
}

#aside .sort span {
    cursor: pointer;
    padding: 3px 4px;
}

#aside .sort span.active {
    padding: 3px 8px;
    background: #444;
    color: #eee;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.aside-ad {
    position: absolute;
    left: 300px;
    top: 0;
    bottom: 0;
    z-index: 2000;
    background-color: #f5f5f5;
    padding-right: 0;
    margin-top: -2px;
    transition: all 300ms;
}

.wide .aside-ad {
    padding-right: 15px;
    /*transition:all 300ms;*/
}


/**
 * ad banner
 */

#ad-banner {
    position: relative;
}

#ad-banner a {}

#ad-banner img {
    position: absolute;
}


/**
 * shop box
 */

.shopbox-list {
    list-style: none;
}

.shopbox-list li.disabled-message {
    padding: 80px 0;
    text-align: center;
}

.shopbox-list .shopbox {
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    padding: 12px 10px;
    cursor: pointer;
}


/*
.shopbox-list .shopbox:after {
  content: ".";
  display: block;
  clear: both;
  height :0;
  overflow: hidden;
  visibility: hidden;
}
*/

.shopbox-list .shopbox.active {
    background: white;
}

.shopbox {
    position: relative;
}

.shopbox .image {
    width: 60px;
    height: 60px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}

.shopbox .image img {
    width: 60px;
    height: 60px;
}

.shopbox .text {
    float: left;
}

#aside .shopbox .text {
    width: 210px;
}

.shopbox .text h3 {
    color: #c23e29;
}

.shopbox .tel {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding-top: 6px;
}

.shopbox .addr {
    padding-top: 4px;
    font-size: 12px;
}

#aside .shopbox .addr {
    width: 210px;
    height: 13px;
    line-height: 13px;
    overflow: hidden;
    white-space: nowrap;
}

.shopbox .meta {
    overflow: hidden;
    padding-top: 4px;
    height: 16px;
}

.shopbox .starbox {
    float: left;
    margin-right: 4px;
}

.shopbox .comments {
    float: left;
    padding-top: 4px;
    color: #999;
    font-size: 12px;
}


/** submenu (shopbox) **/

.shopbox .controller {
    width: 18px;
    height: 18px;
    background: #44aadd;
    position: absolute;
    right: 10px;
    top: 9px;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.shopbox .action-buttons {
    cursor: default;
    background: white;
    position: absolute;
    top: 5px;
    right: 34px;
    width: 157px;
    height: 71px;
    padding-top: 5px;
    padding-left: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}


/** starbox **/

.starbox {
    position: relative;
    /*width: 103px;*/
    width: 85px;
    height: 16px;
}

.ls-starbox {
    position: relative;
    /*width: 107px;*/
    width: 89px;
    height: 16px;
    overflow: hidden;
}

.starbox:after {
    /*background-position: -164px -0px;*/
    background-position: -164px -141px;
    /*width: 103px;*/
    width: 100px;
    padding-top: 16px;
    left: 0;
    top: 0;
}

.ls-starbox:after {
    background-position: -145px -48px;
    /*width: 107px;*/
    width: 89px;
    padding-top: 16px;
    left: 0;
    top: 0;
}

.starbox span,
.ls-starbox span {
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    height: 16px;
}

.starbox span:after {
    /*background-position: -164px -16px;*/
    background-position: -164px -125px;
    /*width: 103px;*/
    width: 100px;
    padding-top: 16px;
    left: 0;
    top: 0;
}

.closed .starbox span:after {
    background-position: -145px -100px;
}

.ls-starbox span:after {
    background-position: -145px -32px;
    /*width: 107px;*/
    width: 89px;
    padding-top: 16px;
    left: 0;
    top: 0;
}


/*.star-60 span { width: 100%; }
.star-55 span { width: 91.666666%; }
.star-50 span { width: 83.333333%; }
.star-45 span { width: 75.000000%; }
.star-40 span { width: 66.666666%; }
.star-35 span { width: 58.333333%; }
.star-30 span { width: 50.000000%; }
.star-25 span { width: 41.666666%; }
.star-20 span { width: 33.333333%; }
.star-15 span { width: 25.000000%; }
.star-10 span { width: 16.666666%; }
.star-5  span { width: 8.333333%; }
.star-0  span { width: 0%; }*/

.star-50 span {
    width: 100%;
}

.star-45 span {
    width: 90%;
}

.star-40 span {
    width: 80%;
}

.star-35 span {
    width: 70%;
}

.star-30 span {
    width: 60%;
}

.star-25 span {
    width: 50%;
}

.star-20 span {
    width: 40%;
}

.star-15 span {
    width: 30%;
}

.star-10 span {
    width: 20%;
}

.star-5 span {
    width: 10%;
}

.star-0 span {
    width: 0%;
}


/** shopbox.closed **/

.shopbox.closed .comments,
.shopbox.closed .text {
    color: #aaa;
}

.shopbox.closed .text h3 {
    color: #888;
}

.shopbox.closed .image img {
    filter: gray;
    -webkit-filter: grayscale(100%);
}


/**
 * Infobox
 */

#infobox {
    background: white;
    position: absolute;
    top: 50px;
    right: 10px;
    width: 400px;
    bottom: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}

#infobox .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#infobox .loading {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 130px;
}

#infobox .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: #44aadd;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#infobox .header {
    padding: 15px 0 0;
    height: 110px;
    margin: 0 15px;
    border-bottom: 1px solid #aaa;
    position: relative;
}

#infobox .shop-closed,
#infobox .shop-moved {
    padding: 2px 5px;
    color: white;
    ;
    background: #c23e29;
    font-weight: normal;
    font-size: 12px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#infobox h3 {
    color: #c23e29;
    font-weight: normal;
    font-size: 15px;
    padding-bottom: 3px;
}

#infobox h3 a {
    color: #c23e29;
    text-decoration: none;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#infobox h3 a:after {
    display: none;
}

#infobox h3:hover a:after {
    display: block;
}

#infobox .starbox {
    float: left;
}

#infobox .shop-moved-text {
    /*
  float: left;
  padding-left: 10px;
  padding-top: 3px;
  color: #888;
*/
    width: 214px;
    padding-bottom: 3px;
}

#infobox .tel {
    clear: left;
    font-family: Helvetica, Arial, sans-serif;
    padding-top: 3px;
    padding-bottom: 3px;
}

#infobox .addr {
    width: 214px;
    padding-bottom: 3px;
}

#infobox .addr a {
    color: #666;
}

#infobox .avg-price,
#infobox .cmmt {
    display: inline;
    font-size: 12px;
    color: #777;
}

#infobox .avg-price {
    margin-right: 10px;
}

#infobox .warning {
    font-size: 12px;
    padding-top: 7px;
    width: 214px;
    color: #be252c;
}

#infobox .action-buttons {
    position: absolute;
    top: 38px;
    right: -5px;
    width: 152px;
    height: 70px;
}


/** content **/

#infobox .content {
    position: absolute;
    top: 126px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

#infobox .content .innercontent {
    padding: 10px 15px 15px;
}

#infobox .metadata {
    height: 140px;
    margin-bottom: 10px;
}

#infobox .image {
    width: 140px;
    height: 140px;
    float: left;
}

#infobox .image img {
    width: 140px;
    height: 140px;
}

#infobox .text {
    width: 220px;
    height: 140px;
    margin-left: 150px;
}

#infobox .score-bar {}

#infobox .score-bar dt {
    float: left;
}

#infobox .score-bar dd {
    margin-left: 60px;
    width: 160px;
    height: 12px;
    background: #eae9e3;
    margin-bottom: 8px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#infobox .score-bar dd span {
    display: block;
    background: #c23e29;
    height: 12px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


/** class **/

#infobox .class {
    padding-bottom: 5px;
}


/** tags **/

#infobox .tags {
    line-height: 16px;
    height: 64px;
    overflow: hidden;
}

#infobox .tags span {
    float: left;
    margin-right: 5px;
}


/** discount-box **/

.discount {
    background-color: #f4f4f4;
    margin: 10px 0;
}

.discount:hover strong {}

.discount-box {
    position: relative;
    margin-left: 4px;
    line-height: 20px;
    padding: 2px;
}

.discount-box:first-child {
    padding-top: 6px;
}

.discount-box a {
    width: 100%;
    padding-left: 25px;
}


/*.discount-box em {
  float:left;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:20px;
  margin-right:5px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}*/

.discount-box a:after {
    background-image: url("/images/frame/benefits.png?update=201409251700");
    background-repeat: no-repeat;
    box-sizing: content-box;
    content: ".";
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    padding-top: 20px;
    top: 0;
    width: 20px;
}

.discount-box:first-child a:after {
    top: 4px;
}

@media not all,
only screen and (max--moz-device-pixel-ratio: 2),
not all,
not all,
not all {
    .discount-box a:after {
        background-image: url("/images/frame/benefits-2.png?update=201409251700");
        background-size: 400px 400px;
    }
}

.discount-box a.koko-gain:after {
    background-position: -125px 0px;
}

.discount-box a.koko-spend:after {
    background-position: -125px -25px;
}

.discount-box a.ticket:after {
    background-position: -125px -50px;
}

.discount-box a.stamp:after {
    background-position: -125px -75px;
}

.discount-box a.discounts:after {
    background-position: -125px -100px;
}

.discount-box a.icoupon:after {
    background-position: -125px -125px;
}

.discount-box a.koko-gain:hover:after {
    background-position: -150px 0px;
}

.discount-box a.koko-spend:hover:after {
    background-position: -150px -25px;
}

.discount-box a.ticket:hover:after {
    background-position: -150px -50px;
}

.discount-box a.stamp:hover:after {
    background-position: -150px -75px;
}

.discount-box a.discounts:hover:after {
    background-position: -150px -100px;
}

.discount-box a.icoupon:hover:after {
    background-position: -150px -125px;
}

.discount-box a.shop-guide {
    padding-left: 45px;
}

.discount-box a.shop-guide:after {
    width: 40px;
    /*padding-top: 18px;*/
    background-position: -125px -250px;
}

.discount-box a.shop-guide:hover:after {
    background-position: -175px -250px;
}

.discount-box a.flashbuy:after {
    background-position: -125px -175px;
}

.discount-box a.flashbuy:hover:after {
    background-position: -150px -175px;
}

.discount-box a.flashbuy .supertag:after {
    width: 30px;
    padding-top: 20px;
    margin-left: 5px;
    /*top: 7px;*/
    background-position: -150px -350px;
    content: ".";
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background-image: url("/images/frame/benefits.png");
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
}

.discount-box strong {
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;
    color: #555;
    width: 330px;
    display: inline-block;
    vertical-align: top;
    /*font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    padding: 0;

    width: 90%;*/
    /*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}


/*.discount-box span {
  display: block;
  font-size: 12px;
  margin-left: 75px;
  color: #c23e29;
}*/

.discount-box a:hover strong {
    color: #0077B1;
    text-decoration: none;
}

.discount-box a.shop-guide strong {}


/** credit card **/

.discount-box a.credit {}

.discount-box a.credit em {
    padding-top: 0;
    padding-left: 0;
}

.discount-box a.credit strong {
    padding-top: 21px;
}

.discount-box a.credit span {
    position: absolute;
    top: 5px;
    left: 0;
}

.discount-box a.credit span i {
    font-style: normal;
    color: #999;
}


/** tab **/

#infobox .tab {
    height: 28px;
    border-bottom: 1px solid #aaa;
}

#infobox .tab div {
    padding: 8px 15px 0;
    float: left;
    height: 20px;
    cursor: pointer;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

#infobox .tab div.active {
    position: relative;
    height: 20px;
    border: 1px solid #aaa;
    border-bottom: 0 none;
    background: white;
    color: #333;
    cursor: default;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#infobox .tab div i {
    color: white;
    background: #c23e29;
    margin-left: 2px;
    display: inline-block;
    vertical-align: top;
    font-size: 9px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 10px;
    height: 10px;
    padding: 2px 5px;
    font-style: normal;
    text-align: center;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


/**
 * Action Buttons
 */

.action-buttons {}

.action-buttons a,
.action-buttons span {
    cursor: pointer;
    float: left;
    width: 72px;
    text-align: center;
    margin: 0 2px 3px;
    background: #44aadd;
    color: white;
    height: 20px;
    padding-top: 4px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.action-buttons a:hover {
    text-decoration: none;
}


/**
 * loadmore
 */

.loadmore {
    background: #eae9e3;
    border: 1px solid #d4d3cd;
    color: #c23e29;
    padding: 12px 0;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.loadmore:hover {
    background: #d4d3cd;
}

.loadingmore {
    padding: 12px 0;
    text-align: center;
}

#shoplist .loadmore {
    margin: 10px;
}

#topicmap .loadingmore,
#infobox .tabcontent .loadingmore {
    background: #eae9e3;
    border: 1px solid #d4d3cd;
}

#infobox .tabcontent .loadingmore {
    margin-bottom: 500px;
}

#topicmap .loadingmore {
    margin: 10px;
}

.cmmt-content .loadmore:hover,
.ls-content .loadmore:hover {}

#infobox .tabcontent {
    padding: 10px 0;
}


/**
 * infobox cmmt tab
 */

.cmmt-content {}

.cmmt-list {
    list-style: none;
}

.cmmt-list li {
    background: #eae9e3;
    margin-bottom: 10px;
    padding: 10px;
    height: 60px;
    overflow: hidden;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.cmmt-list li .cmmt-image {
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
}

.cmmt-list li .cmmt-text {
    margin-left: 70px;
}

.cmmt-list li .cmmt-date {
    float: right;
    font-size: 12px;
    color: #777;
    font-family: Helvetica, Arial, sans-serif;
}

.cmmt-list li h4 {
    color: #555;
    font-weight: normal;
    height: 18px;
}

.cmmt-list li h4 a {
    margin-right: 4px;
}

.cmmt-list li .cmmt-text p {
    line-height: 14px;
    height: 42px;
    overflow: hidden;
}

.cmmt-list li .cmmt-text p a {
    color: #555;
}

.cmmt-list li .cmmt-text p a:hover {
    text-decoration: none;
    color: #333;
}

.cmmt-content .empty {
    padding: 12px 0 30px;
}


/**
 * infobox liveshare tab
 */

.ls-content {}

.ls-list {
    list-style: none;
}

.ls-list li {
    background: #eae9e3;
    margin-bottom: 10px;
    padding: 10px;
    height: 60px;
    overflow: hidden;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.ls-list li .ls-image {
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
}

.ls-list li .ls-text {
    margin-left: 70px;
}

.ls-list li .ls-time {
    float: right;
    font-size: 12px;
    color: #777;
    font-family: Helvetica, Arial, sans-serif;
}

.ls-list li h4 {
    font-weight: normal;
    margin-bottom: 3px;
}

.ls-list .ls-starbox {}

.ls-list li .ls-text p {
    line-height: 14px;
    height: 28px;
    overflow: hidden;
    margin-top: 3px;
}

.ls-list li .ls-text p a {
    color: #555;
}

.ls-list li .ls-text p a:hover {
    text-decoration: none;
    color: #333;
}

.ls-content .empty {
    padding: 12px 0 30px;
}

.ls-content .empty p {
    margin: 0 0 12px;
}


/**
 * infobox information tab
 */

.info-content .info-text .info-res {
    padding-top: 10px;
    line-height: 130%;
}

.info-content dt {
    width: 70px;
    font-weight: bold;
    color: #222;
    clear: left;
    float: left;
}

.info-content dd {
    margin-left: 70px;
    min-height: 13px;
    padding-bottom: 14px;
}

.info-res .today {
    color: #BE252C;
}


/**
 * Recommend
 */

#recommend {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: rgba( 0, 0, 0, .5);
}

#recommend h2 {
    width: 67px;
    text-align: center;
    color: white;
    font-weight: normal;
    padding-top: 30px;
}

#recommend ul {
    position: absolute;
    top: 5px;
    left: 67px;
    right: 0;
    height: 60px;
    list-style: none;
    overflow: hidden;
}

#recommend li {
    width: 60px;
    height: 60px;
    text-align: center;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    margin-bottom: 100px;
}

#recommend li img {
    width: 60px;
    height: 60px;
}

#recommend .dialog {
    position: absolute;
    bottom: 70px;
    background: white;
    width: 180px;
    padding: 10px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}


/**
 * Topic Map
 */

#aside #topicmap {
    overflow: hidden;
}

.topic-list,
.topic-detail {
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
}

.topic-list ul {
    list-style: none;
}

.topic-list li {
    height: 90px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.topic-list li .image {
    width: 120px;
    height: 90px;
    float: left;
}

.topic-list li .image img {
    width: 120px;
    height: 90px;
}

.topic-list li .text {
    margin-left: 130px;
}

.topic-list li .text h2 {
    color: #c23e29;
    font-weight: normal;
    line-height: 13px;
    height: 26px;
    overflow: hidden;
}

.topic-list li .text p {
    height: 64px;
    line-height: 16px;
    overflow: hidden;
}

.topic-detail {}

.topic-detail .back {
    padding: 10px;
}

.topic-detail .back span {
    background: #44aadd;
    color: white;
    padding: 8px 10px;
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.topic-detail .topic-detail-content {
    padding: 0 10px 10px;
    line-height: 130%;
}

.topic-detail .topic-detail-content .image {
    text-align: center;
    margin-bottom: 10px;
}

.topic-detail .topic-detail-content .image img {
    width: 214px;
    height: 160px;
}

.topic-detail .topic-detail-content h2 {
    color: #c23e29;
    font-weight: normal;
    margin-bottom: 2px;
}


/**
 * Directions
 */

#directions {}

#directions .control {
    padding: 20px 10px 0;
}

#directions .travel-mode {
    list-style: none;
    height: 40px;
    padding-left: 30px;
}

#directions .travel-mode li {
    float: left;
    height: 30px;
    border: 1px solid #999;
    border-right: 0;
    width: 50px;
    cursor: pointer;
    background-color: #aaaaaa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
    background-image: -webkit-linear-gradient(top, #bbbbbb, #999999);
    background-image: -moz-linear-gradient(top, #bbbbbb, #999999);
    background-image: -o-linear-gradient(top, #bbbbbb, #999999);
    background-image: linear-gradient(to bottom, #bbbbbb, #999999);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bbbbbb', endColorstr='#999999');
}

#directions .travel-mode li.active {
    background: #555;
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#666666));
    background-image: -webkit-linear-gradient(top, #222222, #666666);
    background-image: -moz-linear-gradient(top, #222222, #666666);
    background-image: -o-linear-gradient(top, #222222, #666666);
    background-image: linear-gradient(to bottom, #222222, #666666);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666');
    -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, .3);
}

#directions .travel-mode li:first-child {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .travel-mode li:last-child {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions #dirA {}

#directions .dir-input {
    clear: left;
    margin-top: 10px;
}

.dir-icon {
    border: 2px solid #00a139;
    background: #2ad15a;
    color: #222;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
    float: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    width: 18px;
    font-style: normal;
    text-align: center;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .dir-input .text {
    border: 1px solid #aaa;
    width: 200px;
    height: 24px;
    margin-left: 30px;
    position: relative;
    background: white;
    overflow: hidden;
}

#directions .dir-input .text input[type=text] {
    width: 100%;
    height: 24px;
    border: 0;
    background: transparent;
    font-size: inherit;
    padding: 3px 5px;
}

#directions .dir-input .text input[type=text]:focus {
    outline: none;
}

#directions .dir-input .text .clear {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #aaa;
    color: black;
    cursor: pointer;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .dir-input .text .substitute {
    cursor: default;
    background: #c23e29;
    color: white;
    white-space: nowrap;
    position: absolute;
    top: 3px;
    left: 3px;
    padding: 3px 5px;
    display: inline;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .form {
    position: relative;
    padding-top: 1px;
}

#directions #swap {
    position: absolute;
    top: 15px;
    right: 0px;
    width: 30px;
    height: 50px;
    background: #999;
    color: black;
    cursor: pointer;
    background-color: #aaaaaa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#999999));
    background-image: -webkit-linear-gradient(top, #bbbbbb, #999999);
    background-image: -moz-linear-gradient(top, #bbbbbb, #999999);
    background-image: -o-linear-gradient(top, #bbbbbb, #999999);
    background-image: linear-gradient(to bottom, #bbbbbb, #999999);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bbbbbb', endColorstr='#999999');
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .start {
    height: 70px;
    position: relative;
}

#directions .start span {
    background: #44aadd;
    padding: 8px 0;
    color: white;
    cursor: pointer;
    position: absolute;
    text-align: center;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#directions .startBtn {
    left: 132px;
    top: 20px;
    width: 100px;
}

#directions .removeBtn {
    left: 30px;
    top: 20px;
    width: 70px;
}

#directions .result {
    line-height: 170%;
}

#directions .result,
#directions .noresult {
    padding: 10px;
}


/** tour travel box **/

.clear_line {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.trunk_block {
    z-index: 1200;
    background-image: url(/images/v2/tour/trunk_bg.png);
    position: fixed;
    width: 106px;
    height: 90px;
    bottom: 0;
    right: 10px;
    font-size: 13px;
    line-height: 18px;
    padding: 28px 12px 0 12px;
}

.tu_title {
    color: #F00;
    text-align: center;
    font-weight: bold;
}

.trunk_info {
    font-size: 12px;
    line-height: 18px;
    padding-left: 5px;
    color: #6a3906;
    word-wrap: break-word;
    word-break: break-all;
}

.show_all {
    font-size: 12px;
    float: right;
    margin-right: 2px;
    display: block;
    background-color: #fff9ea;
    border: 1px solid #FC0;
    padding: 0 2px;
}

.trunk_block2 {
    z-index: 1200;
    background-image: url(/images/v2/tour/trunk_bg2.png);
    width: 210px;
    height: 170px;
    font-size: 13px;
    line-height: 18px;
    position: fixed;
    bottom: 0;
    right: 10px;
    padding: 58px 18px 0 18px;
}

.tu_point {
    padding: 0 4px;
    margin-top: 3px;
    text-align: center;
}

.tu_point a {
    display: inline-block;
    margin: 0 3px;
    font-size: 12px;
}

.tu_links {
    margin: 5px 0 0 45px;
    width: 115px;
    text-align: center;
    float: left;
}

.tu_links a {
    display: inline-block;
    margin: 0 1px;
}


/**
 * topicmapbox
 */

#topicmapbox {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 130px;
    height: 115px;
    padding: 5px;
    background: rgba( 0, 0, 0, .8);
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#topicmapbox h2 {
    color: white;
    font-weight: normal;
    height: 18px;
}

#topicmapbox h2 .close {
    position: absolute;
    right: 8px;
    top: 7px;
    cursor: pointer;
}

#topicmapbox .content {
    width: 130px;
    height: 96px;
    overflow: hidden;
    cursor: pointer;
}

#topicmapbox .content img {
    width: 130px;
    height: 97px;
}