* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #1c3e48;
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
/* jq overrides */
.menu .ui-li-has-icon .ui-btn-inner a.ui-link-inherit,
.ui-li-static.ui-li-has-icon { padding-left: 35px }
.menu .ui-btn-text { padding-top: 3px }
.footer .ui-li-icon {
    margin-bottom: 2px;
    : ;
    padding-right: 4px;
    vertical-align: middle;
}
.results-listview .ui-li-thumb,
.results-listview .ui-listview .ui-li-icon {
    left: 1px;
    max-height: 110px;
    max-width: 110px;
    height: 110px;
    width: 110px;
    position: absolute;
    top: 1px;
}
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,
.ui-li-static.ui-li-has-thumb {
    min-height: 90px;
    padding-left: 120px;
}
.ui-li-aside {
    float: right;
    margin-bottom: 0.3em;
    margin-left: 0;
    margin-right: -34px;
    margin-top: 0.3em;
    text-align: right;
    width: 50%;
    display: none;
}
input.ui-input-text.ui-slider-input {
    text-shadow: none;
    color: #111;
    border-radius: 7px;
    padding-left: 10px;
    padding-right: 10px;
}
.more {
    height: 25px;
    overflow: hidden;
}
.map {
    padding: 0;
    position : absolute !important;
    top : 40px !important;
    right : 0;
    bottom : 0 !important;
    left : 0 !important;
}
.marker-label {
     color: #222;
     background-color: white;
     font-size: 10px;
     font-weight:normal;
     text-shadow:none;
     text-align: center;
     width: 70px;     
     border: 1px solid #333;
     white-space: nowrap;
}
/*custom button sizes in header */
.ui-header { height: 42px }
.ui-header .ui-title,
.ui-footer .ui-title { font-size: 18px !important }
.ui-header .ui-btn,
.ui-header .ui-icon,
.ui-header .ui-btn-inner {
    width: 40px;
    height: 28px;
}
.ui-footer .ui-btn-text { font-size: 16px }
.ui-header .ui-btn-inner .ui-icon {
    margin: 0px;
    border-radius: 0;
}
/* custom icons */
.ui-icon-placeholder { /*bug requires this */:  }
.ui-icon-zoom-white {
    background: url("images/white/zoom_icon-16.png") 50% 50% no-repeat;
    background-size: 16px 16px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0;
}
.ui-icon-align-just {
    background: url("images/white/align_just_icon-16.png") 50% 50% no-repeat;
    background-size: 16px 16px;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .ui-icon-align-just {
        background: url("images/white/align_just_icon-32.png") 47% 45% no-repeat;
        background-size: 18px 18px;
        box-shadow: none;
        -webkit-box-shadow: none;
        margin: 0;
    }
    .ui-icon-zoom-white {
        background: url("images/white/zoom_icon-32.png") 47% 45% no-repeat;
        background-size: 18px 18px;
        box-shadow: none;
        -webkit-box-shadow: none;
        margin: 0;
    }
}
/* A bit custom styling */
/*
.results-page {
    background: #1c3e48;
}


.results-page .ui-footer {
    color: #666;
}
.results-page .ui-li-desc {
    color: #c0c0c0;
}
.results-page .ui-li-aside {
    color: #FF4700;
}
.results-page .results-listview .ui-li.ui-btn {
    background-image: none;
    border-color: #222;
}
*/
.results-page .content {
    padding-bottom: 0;
    margin-bottom: -14px;
}
/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
@media all and (min-width: 768px) { 
    .results-page .ui-content { padding: 9px }
    .results-page .results-listview .ui-li.ui-btn {
        float: left;
        width: 30.9333%;
        /* 33.3333% incl. 2 x 1.2% margin */
        height: 232px;
        margin: 9px 1.2%;
        border-width: 0;
        /* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
    }
    /* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
    .results-page .results-listview .ui-li.ui-btn-inner {
        border: inherit;
        border-width: 1px;
        margin: -1px;
    }
    .results-page .results-listview .ui-btn-inner,
    .results-page .results-listview .ui-btn-text,
    .results-page .results-listview .ui-link-inherit,
    .results-page .results-listview .ui-li-thumb {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
    }
    .results-page .results-listview .ui-link-inherit {
        padding: 0 !important;
        position: relative;
    }
    /* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
    .results-page .results-listview .ui-li,
    .results-page .results-listview .ui-btn-text,
    .results-page .results-listview .ui-link-inherit,
    .results-page .results-listview .ui-li-thumb {
        -webkit-border-radius: inherit;
        border-radius: inherit;
    }
    .results-page .results-listview .ui-li-thumb {
        height: auto;
        /* To keep aspect ratio. */
        max-width: 100%;
        max-height: none;
        margin: 0;
        left: 0;
        z-index: -1;
    }
    /* Hide the icon */
    .results-page .results-listview .ui-icon { display: none }
    /* Make text wrap. */
    .results-page .results-listview .ui-li-heading,
    .results-page .results-listview .ui-li-desc {
        white-space: normal;
        overflow: visible;
        position: absolute;
        left: 0;
        right: 0;
        color: #ffffff;
        text-shadow: none;
    }
    /* Text position */
    .results-page .results-listview .ui-li-heading {
        margin: 0;
        padding: 20px;
        bottom: 50%;
    }
    .results-page .results-listview .ui-li-desc {
        margin: 0;
        padding: 0 20px;
        min-height: 50%;
        bottom: 0;
        line-height: 1.5;
    }
    /* Semi transparent background and different position if there is a thumb */
    .results-listview .ui-li-has-thumb .ui-li-heading,
    .results-listview .ui-li-has-thumb .ui-li-desc {
        background: #111;
        background: rgba(0,0,0,.6);
        -webkit-background-clip: padding;
        background-clip: padding-box;
    }
    .results-listview .ui-li-has-thumb .ui-li-heading {
        bottom: 54px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 6px;
    }
    .results-listview .ui-li-has-thumb .ui-li-desc {
        padding: 0 10px;
        min-height: 20%;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    .results-page .results-listview .ui-li-desc.ui-li-aside {
        display: inline;
        padding: 2px 10px;
        width: auto;
        min-height: 0;
        top: 0;
        left: auto;
        bottom: auto;
        /* Custom styling. */
        color: #ffffff;
        background: #108faf;
        -webkit-border-top-right-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* If you want to add shadow, don't kill the focus style. */
    .results-page .results-listview .ui-btn:not(.ui-focus) {
        -moz-box-shadow: 0px 0px 9px #111;
        -webkit-box-shadow: 0px 0px 9px #111;
        box-shadow: 0px 0px 9px #111;
    }
    /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
    /*
        .results-page .results-listview .ui-btn:hover {
            -moz-box-shadow: 0px 0px 12px #387bbe;
            -webkit-box-shadow: 0px 0px 12px #387bbe;
            box-shadow: 0px 0px 12px #387bbe;
        }
        */
    /* Animate focus and hover style, and resizing. */
    /*
        .results-page .results-listview .ui-btn {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            -o-transition: all 500ms ease;
            -ms-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        */
}
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
@media all and (min-width: 1020px) { 
    .results-page .ui-content { padding: 10px }
    /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
        By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
    .results-page .results-listview {
        max-width: 1000px;
        margin: 0 auto;
    }
    .results-page .results-listview .ui-li.ui-btn {
        width: 23%;
        height: 230px;
        margin: 10px 1%;
    }
    /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
        but we stick to percentage values for demo purposes. */
}
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

#swipe-position li {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #141414;
	box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
	margin: 0 2px;
	cursor: pointer
}
#swipe-position li.on {
	box-shadow: inset 0 1px 3px -1px #28b4ea, 0 1px 2px rgba(0,0,0,.5);
	background-color: #1293dc;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1293dc), color-stop(100%, #0f6297));
	background-image: -webkit-linear-gradient(top, #1293dc, #0f6297);
	background-image: -moz-linear-gradient(top, #1293dc, #0f6297);
	background-image: -ms-linear-gradient(top, #1293dc, #0f6297);
	background-image: -o-linear-gradient(top, #1293dc, #0f6297);
	background-image: linear-gradient(top, #1293dc, #0f6297)
}