@font-face { font-family: 'josefin_sans_light'; src: url("../../train/font/JosefinSans-ExtraLight.ttf") format("truetype"); font-weight: normal; font-style: normal; }
/** primary colors
* black:#1f1f1f;* red primary:#ba2129
* green:#48500e
* body:#d1d3d4
* white text:#d1d3d4
*/
body{-webkit-tap-highlight-color:rgba(255,255,255,0);}
body,html{width:100%;}
body{background-color:#000;color:#1f1f1f;}
#container{width:100%;position:relative;}
/* general tag styling */

h2{font-size:2.5em;color:#ba2129; margin-top:15px; margin-bottom:15px;}
h2.top{margin-bottom:0.5em;margin-top:1em;}
h3{font-size:1.75em;line-height:1.272727273em;margin-bottom:0.25em;}
h4{font-size:1.375em;margin-bottom:1em;color:#ba2129}
h1 a{display:block;width:180px;height:108px;}
p{margin-bottom:1em;}
li{list-style:none;margin:0;}
/* font styles */
h2,
.submit,
h3,h4,
#mobileprimary li a,
#secondary-content-container,
#footer h3,.phone, .cmonth,
.close, form, input, select, .packageInfoTitle, .stepTitle, .packageInfoPriceOptions a, .RezFull h1, #RezContainer h1, #content h1,
#primary li a{font-family:'josefin_sans_light',helvetica,arial,sans;text-transform:uppercase;font-weight:normal;}
input {text-transform:none;}

/* content section */
#outercontent {
    width: 100%;
    background: #d1d3d4 url('/train2/images/bg-content.gif') repeat-y 50% center;
    padding-bottom: 60px;
    line-height: 1.571428571em;
}

/* booking area specific items */

#content h5{
    color: #BA2129;
}
#content h4{margin-bottom:0;}
#content h6{color: #BA2129; font-size: 16px; font-weight: normal;}
#content td{padding: 4px 0;}
.packageInfo{
    margin-bottom: 70px;
}
.packageInfoTitle{
    font-size: 36px;
    padding:0px 20px;
    border-top: 1px solid #d1d3d4;
    background-color: #1f1f1f;
    color: #d1d3d4;
    background: #1f1f1f url(/train2/images/ui-dark-banner.jpg) no-repeat;
    line-height: 58px;

}
#content h2{
    margin-top:10px;
    font-size: 18px;
}
#content h2.cta{
    text-align:center;
    font-size: 26px;
    padding: 50px 0 50px;
}
.stepTitle, .packageItineraryTitle{
    color: #FFFFFF;
    font-family: 'josefin_sans_light',helvetica,arial,sans;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#contentSlide {width:100%;float:left; position:relative;}
#contentSlide #step1div img{ width:100%; }

#content td#rrimage {vertical-align:middle;}
#rrimage img {width:100%;}
td.podleftmin {min-width:300px;}

#Rezzervations {
    font-size:16px;
}

.RezFull {
    font-size: 16px;
    color: #464646;
}
.RezFull a{
    color: #BA2129;
    text-decoration: none;
}
.RezFull a{
    text-decoration: underline;
}
#policies{
    clear:both;
    font-size: 12px;
    color:#464646;
    padding-top:20px;
}
#packageTitle h2, #roomsform h2{
    color: #d1d3d4;
    display: block;
    font-size: 1.2975em;
    font-weight: normal;
    line-height: 108%;
    padding: 10px 26px;
    text-align: center;
}
#packagePodWrap, #roomsform, #form_packages{
    background-color: #292929;
    background-image: linear-gradient(to bottom, #292929, #111212);
    max-width: 1076px;
    overflow: hidden;
    position: relative;
    margin: 20px 0 !important;
}
#packagePod,  #roomsform form, #form_packages form{
    padding: 20px;
    border: 1px solid #3D3D3D;
    margin:3px;
}
#packagePod form{border:none; padding:0; background:none}
#packagePod #form_packages{background:none;}
#loginform_copy{
    text-transform:uppercase;
}
#content input {
    border: 1px solid #d1d3d4;
    text-transform:none;
}
#content input[type=text] {
    width:200px;
}
#content .customSelect {
    border: 1px solid #d1d3d4;
    width:200px;
    white-space: nowrap;
}

#content label {font-weight: normal;}

#roomsform #promo_copy, #packagesform #nights_packages, #packagesform #promo_packages {
    width:130px;
}

#roomsform .customSelect, #packagesform .customSelect {
    width:130px;
}

#roomsform #sdate_copy, #packagesform #sdate_packages {
    width:100px;
}

#content td {vertical-align:top;}

#content td.aformLeft, #content td.arformLeft {padding-right:10px; white-space: nowrap;}

.packageInfoWrap{
    font-size: 16px;
}
form, form p{
    text-align: left;
    text-transform:none;
    font-size: 16px;
    color:#464646;
    font-family: arial,sans-serif;
}

form span{
    display:inline-block;
    vertical-align: top;
    margin-right: 0.5em;
}
form label{
    color: #d1d3d4;
    display: block;
    font-size: 16px;
    font-weight: bold;
    marginform-bottom: 0.5em;
    text-transform: uppercase;
}
.customSelect {
    background: url("/train2/images/ui-select-arrow.gif") no-repeat scroll right 50% #FCFCFC;
    border-radius: 2px 2px 2px 2px;
    color: #8A8A8A;
    height: 20px;
    padding: 3px 5px 7px 5px;
    font-size:13px;
    min-width:100px;
}

#content .customSelect {
    padding: 3px 5px 7px 5px;
}

input, select{
    background-color: #FCFCFC;
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: #8A8A8A;
    height: 18px;
    padding: 6px;
}
input.submit, #loginform_copy input.submit, #form_packages input.submit, #roomsform input.submit{
    background-color: #BA2129;
    border: 0 none;
    color: #FFFFFF;
    text-transform: uppercase;
    display: inline-block;
    font-size: 1.0em;
    padding: 5px 0;
    text-align: center;
    -webkit-transition: background-color 0.2s ease-out 0s;
    -moz-transition: background-color 0.2s ease-out 0s;
    transition: background-color 0.2s ease-out 0s;
    width: 122px;
    border-radius: 0;
    height:45px;
    margin-top:18px;
}
#form_packages{
    margin: 10px 0 !important;
}
#RezContainer{font-size:16px; margin-bottom:40px; overflow:hidden;}
.RezLeft{float:left;width:45%; padding-right:15px;}
.RezRight{float:right;width:48%;}
input.submit:hover{
    background-color: #48500e;
}
.date{
    background: url("/train2/images/ui-cal.gif") no-repeat scroll right 50% #FCFCFC;
    padding-right: 32px;
    width: 91px;
}
.packageInfoLeft {
    width:100%;
}
.trainSelectLeft li{
    margin-bottom:1px;
}
.trainSelectLeft li a{
    display:block;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    background-color:#BA2129;
    background-color:#1f1f1f;
    padding: 2px 10px;
    text-transform:uppercase;
    width:130px;
}
.trainSelectLeft, .packageInfoLeft{float: left; }
.trainSelectRight{float:left; margin-left:1px; width:400px; overflow:hidden; height:180px;}
.trainSelectRight img {width:400px;}
.packageShell h2{
    font-size: 16px;
    color:#ACAC9D;
    margin-bottom: 1em;
    text-transform: none;
}
.rezzervationDesc{
    clear:both;
    color: #ACAC9D;
    font-size: 16px;
    text-shadow: 0 -1px 0 #000000;
    font-size: 13px;
    line-height: 130%;
    padding:10px 15px;
}
#float_left_pkg, #float_right, #form_packages #float_left, #form_rv #float_left{display:inline;}
li.liTrainSelectActive a{
    color: #fff;
    background-color:#BA2129;
}
.packageInfoWrap{clear:both; background-color:#1f1f1f; overflow:hidden; color: #ACAC9D; width:100%;}
.packageShell,.packageInfoRight{float: left;}
.packageShell{width: 60%; padding-left:20px}
.packageInfoRight, .rezboxGold-contentNew{
    border-left: 1px solid #444;
    width:30%;
    background-color:#1f1f1f;
    color:#ACAC9D;
    float:right;
    padding:15px;
    padding-left: 30px;
    margin-left:0px;
    font-size: 16px;
    text-shadow: 0 -1px 0 #000000;
}
.rezboxGold-contentNew{width: auto;}
.packageInfoRight strong{color:#fff; font-weight: normal;}
.packageInfoRight li, .packageInfoPriceOptions li{
    background: url(/train2/images/ui-arrow-list.png) no-repeat 0 5px;
    padding-left: 20px;
}
.packageInfoPriceTitle{
    font-family: 'josefin_sans_light',helvetica,arial,sans;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 22px;
    color: #fff;
    margin-bottom: 20px;
}
.packageInfoPriceOptions p{
    margin-bottom:0;
}
p.priceSpacer{margin-bottom:1em; color:#fff;}
.packageInfoPriceOptions h2,.rezboxGold-contentNew h2{
    font-size: 28px !important;
    color: #838E35;
}
.packageInfoPriceOptions h3{
    font-size: 18px;
    color:#fff;
}
.packageInfoRight label{display: inline; margin-right:10px;}
.packageInfoPriceOptions p{margin-bottom:3px;}
.packageInfoPriceOptions em{font-size: 12px; color:#666}

.packageInfoLeft .packageInfoPriceOptions a {color:#FFFFFF;}
.packageInfoRight .packageInfoPriceOptions a, .rezboxGold-contentNew a{
    background-color: #BA2129;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1.2em;
    margin-top: 18px;
    padding: 5px 20px;
    text-align: center;
    text-shadow: none;
    transition: background-color 0.2s ease-out 0s;
    text-decoration: none;
    text-transform:uppercase;
}
.packageInfoPriceOptions a:hover, .rezboxGold-contentNew a:hover{
    background-color: #838E35;

}
.RezFull h1, #content h1 {
    background: none;
    height: auto;
    width: auto;
    text-indent: 0;
    position:inherit;
    margin-left: 0;
    line-height:35px;
}

/* calendar */
#calendar_container{
    padding-top:40px;
    max-width:980px;
    margin: 0 auto;
    text-align: center;
}
#calendar_container h3{
    background-color: #1f1f1f;
    color:#fff;
    padding: 10px;
}
#calendar_container h3 em{
    font-style: normal;
    border-radius: 2px;
    text-decoration: underline;
}
.cmonth{
    text-align:center;
    font-size: 20px;
    max-width:280px;
}
#calendar{margin-left:1px;}
#calendar td{border:1px solid #dedede;}
#content .notAvail{
    background-color:grey;
    color: #fff;
    padding: 2px 0;
}
#content td.noDate{
    padding: 0;
}

#content .avail{
    padding:0;
    background-color: #217133;
    color:#fff;
}
.avail a{
    padding: 2px 0;
    text-decoration: none;
    display:block;
    color:#FFFFFF;
}
.avail a:hover{
    background-color: #acac9d;
}
#content .closed{
    padding: 0;
    background-color: #464646;
    color:#fff;
}
#content .closed a{
    color:#fff;
    text-decoration: none;
}
.legend{

    width: 612px;
    margin: 20px auto 10px;
}
.legend li{
    width:300px;
    margin: 2px;
    float: left;
    font-size:13px;
}
.available{
    border:1px solid #dedede;
    background-color:#217133;
    color: #FFFFFF;
}
.almost{
    border:1px solid #dedede;
    background-color: #3CCE5B;
    color: #000;
}
.almost a{
    color:#000;
}

#pumpkinCalendar .available{
    border:1px solid #dedede;
    background-color:#4D5910;
    color: #fff;
}
#pumpkinCalendar .almost{
    border:1px solid #dedede;
    background-color:#C9C330;
    color: #222;
}
#pumpkinCalendar .available a{
    color: #fff;
    text-decoration: none;
}
#pumpkinCalendar .almost a{
    color: #222;
    text-decoration: none;
}
.soldout{
    background-color: grey;
    color:#fff;
    border:1px solid #dedede;

}
.past{
    background-color: #acacac;
    color:#fff;
    border:1px solid #dedede;

}
.christmas{
    border:1px solid #dedede;
    background-color: #D7C38D;
    color:#000;
}
.christmas a {
    color:#000;
    text-decoration:none;
}

#pumpkinCalendar .christmas{
    border:1px solid #dedede;
    background-color: #999;
    color:#222;
}


.nodisplay{display:none;}
.packageInfoLeft{clear:both; padding-left:30px; width:60%; }
/* span this items across the screen width */
#innercontent{clear:both;padding:0 0px;max-width:980px;margin:0 auto;position:relative; overflow:auto;}
#innercontent2{max-width:980px;}
/* footer */
#footer {
    width: 100%;
    background: #1f1f1f;
    color: #d1d3d4;
    overflow: hidden;
    text-shadow: 0px -1px 0px #000;
}
#footer h4{color:#fff;}
#footerwrap{max-width:980px;margin:0 auto;padding:60px 20px;}
#footer a{color:#acac9d;font-size:0.75em;text-transform:uppercase;text-decoration:none;-webkit-transition:color 0.3s ease-in;-moz-transition:color 0.3s ease-in;transition:color 0.3s ease-in;}
#footer a:hover{color:#ffffff;}
#footer li{line-height:1.575em;}

#footerabout {
    background: url(/train/img/logo-xanterra.png) no-repeat;
    background-position: left bottom;
    padding-bottom: 80px;
}
#footerabout ul{max-width:310px;-moz-column-count:2;-moz-column-gap:20px;-webkit-column-count:2;-webkit-column-gap:20px;column-count:2;column-gap:20px;margin-bottom:20px;}
#explorexanterra h5{font-size:0.75em;color:#838e35;font-weight:normal;text-transform:uppercase;display:inline;}
#explorexanterra li,#explorexanterra ul{display:inline;}
#explorexanterra li:not(:last-child):after{content:' |';color:#acac9d;}
#explorexanterra div{margin-bottom:1em;}

#footer small {
    display: block;
    text-transform: uppercase;
    margin-top: 3px;
    color: #d1d3d4;
}
#explorexanterra a{text-transform:none}

h2.parent{margin:-66px auto 0px;font-size:4.0625em;text-align:left;color:#fff;line-height:0.7em;padding-top:0;padding-bottom:0;}
/* hide mobile elements */
.close, #mobileprimary, .hide {
    display: none;
}


@media only screen and (max-width:735px){

    /* booking Mobile */

    .packageShell, .packageInfoLeft{width: 100%; float: none;}
    .packageInfoRight{
        width:100%;
        float:none;
        margin-left:0;
        background-color:#1f1f1f;
        color:#ACAC9D;
        text-shadow: 0 -1px 0 #000000;
    }
    .RezLeft, .RezRight, #confleft, #confright{float:none;width:100%;}




    /* setup mobile here */
    #primary,#top ul,#top nav h4,#controls,.closebooking{display:none;}

    .booking, .close, .booking, #mobileprimary {
        display: block;
    }
    /* borders for mobile */
    #subscribe form,#subscribe h2,.secondary-content{padding-left:20px;padding-right:20px;}
    label.over{margin-left:20px;}
    h1{position:absolute;left:50%;margin-left:-90px;}
    h2.parent{position:absolute; margin:0; top:130px;}
    #banner{height:220px; background-position: center bottom !important;}

    .booking {
        position: absolute;
        top: 0;
        z-index: 100;
        color: #d1d3d4;
        height: 60px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }

    #mobileprimary{position:absolute;}
    #outercontainer{overflow:hidden;}
    #container{-webkit-transform:translate3d(0,0,0);-webkit-transition:all 300ms ease-in;-moz-transform:translate3d(0,0,0);-moz-transition:all 300ms ease-in;transform:translate3d(0,0,0);transition:all 300ms ease-in;}
    #container{-webkit-box-shadow:0px 0px 4px #000;-moz-box-shadow:0px 0px 4px #000;box-shadow:0px 0px 4px #000;}
    #container.open{position:fixed;-webkit-transform:translate3d(80%,0,0);-moz-transform:translate3d(80%,0,0);transform:translate3d(80%,0,0);}

    #mobileprimary br{display:none;}
    #mobileprimary{background-color:transparent;z-index:1000;width:80%;margin:0;padding:0;top:0;left:0;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;transition:all 300ms ease-in;}
    #mobileprimary.open{-webkit-transform:translate3d(0%,0,0);-moz-transform:translate3d(0%,0,0);transform:translate3d(0%,0,0);}
    #mobileprimary li{display:block;float:none;text-align:left;border-bottom:1px solid #ccc;margin:0;}

    #mobileprimary li a {
        padding: 10px 20px;
        display: block;
        text-decoration: none;
        color: #1f1f1f;
        background-color: #d1d3d4;
    }
    #mobileprimary li a:active{background-color:#fff;}
    #container{z-index:1005;overflow:hidden;}

    .ie9 #mobileprimary.open{z-index:6000; background-color: #fff;}

    .close {
        color: #d1d3d4;
        background-color: #1f1f1f;
        line-height: 60px;
        border-bottom: 1px solid #D2D2D2;
        padding-left: 40px;
        background: #1f1f1f url(/train2/images/bg-close.gif) no-repeat 20px 50%;
        cursor: pointer;
    }

    .phone {
        display: block;
        text-align: center;
        padding: 8px;
        font-size: 1em;
        text-decoration: none;
        color: #d1d3d4;
        margin: 0 20px 20px;
        text-shadow: 0px 1px 0px #4a0103;
        border-bottom: 1px solid #4a0103;
        background: #ba2129 url(/train2/images/ui-phone.png) no-repeat 10px 50%;
    }


    /* form for mobile */

    form span{
        display:block;
        vertical-align: top;
        margin-right: 0.5em;
    }


}

/* setup mid range screen size here. */
@media only screen and (min-width:768px){
    #footerabout,#explorexanterra{float:left;width:45%}
    #explorexanterra{float:right;}
}
@media only screen and (min-width:950px){
    #outercontentholder div.parent{width:35%;}

}

#policies {font-size:13px; line-height:22px!important; padding:5px!important;}
#policies h2 { line-height:40px!important;}
#policies p {margin:0px; padding:0px;}

#logincontainer, #logincontainer a, #loginstatus, #loginstatus a, #leftpanel, #leftpanel a {
    text-decoration:none;-webkit-transition:color 0.3s ease-in;-moz-transition:color 0.3s ease-in;transition:color 0.3s ease-in;
    font-family:'josefin_sans_light',helvetica,arial,sans;text-transform:uppercase;font-weight:normal;
    color:#4a0103;
    margin-left:5px; margin-right:5px;
    font-size: 1.1em;
}

#logincontainer a:hover, #loginstatus a:hover, #leftpanel a:hover, #loginstatus span {
    color:#ba2129;
}


#errormsg {color:#cd0a0a; text-align:center;}
#infomsg {color:#c97b00; text-align:center;}

#leftpanel {text-align:left; padding-top:50px; height:20px; font-size:10px; width:40%; float:left;}
#rightpanel {text-align:right; padding-top:50px; height:20px; font-size:10px; width:40%; float:right;}


#contentLeft {

    width:100%;

}
#minContentSize {
    position:relative;
    width:1px;
    float:right;
}
#clear, .clear {clear:both;}
#packagePodWrap {display:none}

#hiddendiv, #ajax {display:none;}

#ajax_owsdebug {padding-top:20px; background-color:#FFFFFF;}
#ajax_owsdebug * {font-size:12px; }
td.owsdebug_left {width:50%; padding:10px; vertical-align: top;}
td.owsdebug_right {width:50%; padding:10px; vertical-align: top;}

#log {background-color:#D2D2D2; color:#b81900;}

#form2 label {font-weight:normal;font-size:12px; line-height:13px;}

#alogin_copy, #apassword_copy {width:200px;}

td.creditcard {font-size:16px; line-height:13px;}


#confleft {width:60%; position:relative; float:left; padding-bottom:40px; text-align:left;}
#confright {width:40%; position:relative; float:right; padding-bottom:40px; text-align:left;}

#content p {padding:0px; margin:0px;}

#content #adults_copy {width:80px;}


.ui-datepicker {
    width: 216px;
    height: auto;
    margin: 5px auto 0;
    font: 10pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
    text-decoration: none;
}
.ui-datepicker table {
    width: 100%;
}


#calendarWrapper {text-align:center;padding-top:20px;}
#calendar_container {text-align:center; width:100%;}
#calendarTableContainer {width:665px; height:250px; }
#calendarTable {width:665px; height:250px;}
#cal_button {width:35px; text-align:center; height:250px; }
#cal_left, #cal_right {text-align:center; width: 280px; height:250px;}
#calendar .calendar td {text-align:center; height:20px; overflow: hidden;}
#calimg_left, #calimg_right {padding-top:120px; padding-left:5px; padding-right:5px;}
#calendarWrapper h1, #calendarWrapper h2 {display:block;}

td.ajax-loading {
    background-image: url(/images/loading.gif);
    background-repeat: no-repeat;
    background-position:center;
}

#packagePodWrap * {font-weight:normal}
#packagePodWrap .customSelect {width:130px;}

td#midvalign {vertical-align:middle;}

#content input#spw, #content input#spl {width:80px;}
input[type=checkbox] {height:12px; margin-right:3px;}
input[type=radio] {height:16px; margin-right:3px;}

label.splabel {width:120px; display:inline-block; }




.datePicker a.ui-datepicker-prev{
    background:url(/train2/css/ui-lightness/images/ui-icons_ffffff_256x240.png) no-repeat -78px -188px;
    width:1.5em;
}

.datePicker a.ui-datepicker-prev span{
    display:none !important;
}

.datePicker a.ui-datepicker-next{
    background:url(/train2/css/ui-lightness/images/ui-icons_ffffff_256x240.png) no-repeat -46px -188px;
    width:1.5em;
}

.datePicker a.ui-datepicker-next span{
    display:none !important;
}

#RezContainer input[type="button"] {border:0px; padding: 0px; line-height:15px;;}

#RezContainer input[type="button"].polarselected {background-color: #48500e;}

#RezContainer a.redlink {font-size:16px; color:#cd0a0a; }

input.widebutton {width:200px;}

div.polar3calendar {}
div.pumpkin3calendar {text-aling:center;}
div.polar1calendar {width: 320px; float:left; position:relative;}
div.pumpkin1calendar {width: 192px; float:left; position:relative;}
td.pumpkinDT {width:90px; padding:5px;font-style:italic; text-align:center;}
td.pumpkinR {width:40px; text-align:center;}
.pumpkin td.pumpkinR {text-transform:uppercase;}
td.pumpkinR b {font-size:20px; font-weight:normal;}

div#roomrowselect {
    width:100%;
    clear:both;
}
div.RoomsPadContent, td.RoomsPadContent {width:400px; position:relative; float:left; padding-right:10px;}
div.RoomsPadImage {width:200px; position:relative; float:left;padding-top:45px;padding-left:20px; padding-right:10px;}
div.RoomsPadPod {width:280px; position:relative; float:left;padding-top:45px;padding-left:60px;}

.nodisplay {
    display:none;
}

h2#ratetitle {color:#464646; }
a#ratedetails {text-decoration:underline; font-size:15px;  text-transform: capitalize; margin-left:5px; color:#BA2129; font-weight:bold;}
.center {text-align:center;}

div.abmessage {border: 1px solid #ba2129; padding: 10px 10px 10px 120px; font-size:13px; color:#ba2129; background-image: url(/images/advisory.png); background-repeat:no-repeat; background-position-y: 10px; background-position-x: 10px; min-height: 95px;}

.RezLeft img, .packageInfoPriceOptions img {margin:10px 0px 0px 10px;}

div.roomSelected {background-color:#404040;}
* {-webkit-overflow-scrolling:auto;}

.customSelectInner {white-space: nowrap;}

.error ul li, form label.error {
    color:red;
    text-transform: none;
    font-size:12px;
}

/* ====== TOOLTIP ====== */
.btn-tooltip { position: relative; width: 16px; height: 16px; display: inline-block; vertical-align: bottom; background: url(../img/icon-tooltip-16.png) no-repeat center; }
.btn-tooltip.active { z-index: 20; }

.tooltip { position: absolute; z-index: 10; width: 200px; padding: 10px; border-radius: 4px; }
.tooltip .title { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; padding-bottom: 6px; }
.tooltip .content { font-size: 12px; }
.tooltip.tooltip-bottom { background: #dbecf5; border: 1px solid #cbe2ee; }
.tooltip.tooltip-bottom:after, .tooltip.tooltip-bottom:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
.tooltip.tooltip-bottom:after { border-color: rgba(219, 236, 245, 0); border-bottom-color: #dbecf5; border-width: 12px; margin-left: -12px; }
.tooltip.tooltip-bottom:before { border-color: rgba(203, 226, 238, 0); border-bottom-color: #cbe2ee; border-width: 13px; margin-left: -13px; }
.tooltip.tooltip-top { background: #dbecf5; border: 1px solid #cbe2ee; }
.tooltip.tooltip-top:after, .tooltip.tooltip-top:before { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
.tooltip.tooltip-top:after { border-color: rgba(219, 236, 245, 0); border-top-color: #dbecf5; border-width: 12px; margin-left: -12px; }
.tooltip.tooltip-top:before { border-color: rgba(203, 226, 238, 0); border-top-color: #cbe2ee; border-width: 13px; margin-left: -13px; }
.tooltip.tooltip-left { background: #dbecf5; border: 1px solid #cbe2ee; }
.tooltip.tooltip-left:after, .tooltip.tooltip-left:before { left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
.tooltip.tooltip-left:after { border-color: rgba(219, 236, 245, 0); border-left-color: #dbecf5; border-width: 12px; margin-top: -12px; }
.tooltip.tooltip-left:before { border-color: rgba(203, 226, 238, 0); border-left-color: #cbe2ee; border-width: 13px; margin-top: -13px; }
.tooltip.tooltip-right { background: #dbecf5; border: 1px solid #cbe2ee; }
.tooltip.tooltip-right:after, .tooltip.tooltip-right:before { right: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
.tooltip.tooltip-right:after { border-color: rgba(219, 236, 245, 0); border-right-color: #dbecf5; border-width: 12px; margin-top: -12px; }
.tooltip.tooltip-right:before { border-color: rgba(203, 226, 238, 0); border-right-color: #cbe2ee; border-width: 13px; margin-top: -13px; }

@media screen and (-webkit-min-device-pixel-ratio: 2) { .btn-tooltip { background: url(../img/icon-tooltip-32.png) no-repeat center; background-size: 16px 16px; } }