/* These rules are for the example page, and can be removed. */
body {
    background: #808080;
    font-family: 'Open Sans', sans-serif;
}

body, html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

/* 
	sprite START. 
	from http://spritegen.website-performance.org/
	save sprite image to ../img/sprite.png
	Update .sprite-.... css below
	find: background: url(../img/sprite.png)
	replace: background: url(../img/sprite.png) 
*/
.app {
    width: 100%;
    height: 100%;
    font-size: 16px;
}

.app-canvas-layer, .app-config-frame-pane, .app-config {
    /* Force compositing for some elements on some browsers. Like the terrible
     * default Android browser. That thing is *really* slow. */
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    -webkit-perspective: 1000px;
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0);
}

select {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #DDE1E1;
    background-image: none;
    box-shadow: 0 0 0 1px #949696;
    border: none;
    border-top: 1px solid #FFF;
    color: #757575 !important;
    text-shadow: 0 -1px 0 #FFF;
    overflow: hidden;
    font-size: 14px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 20px 4px 8px;
    -webkit-appearance: none;
    -moz-appearance: button;
    width: 192px;
}

/* This rule determines the size of the app canvas and all images.
Any images that are not this size will be resized to this size. */
.app-main {
    width: 100%;
    height: 100%;
    position: relative;

    background-color: #f5f5f5 !important;
    /* background:url('../img/background.jpg') ;	*/
    /* Disable selection, because it can interfere with the UI. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app-config {
    width: 347px; /* Need a few extra pixels for slimscroll. */
    top: 0;
    bottom: 0;
    position: absolute;
    margin-top: 49px;
}

.app-canvas {
    top: 0;
    bottom: 0;
    left: 347px;
    right: 0;

    /*margin-left: 355px;*/
    margin-top: 49px;
    margin-bottom: 48px;

    position: absolute;
    overflow: unset;

    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -ms-transition: opacity 300ms;
    transition: opacity 300ms;

    /* Force compositing on some browsers. */
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    -webkit-perspective: 1000px;
    -webkit-transform: translateZ(0);
}

.loading .app-canvas {
    /* Hide images while loading. */
    opacity: 0;
    filter: Alpha(opacity=0);
}

.app-overlay {
    height: 100%;
    width: 100%;

    position: absolute;
}

.app-canvas-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    border: 0 none;
}

.app-canvas-layer img {
    display: block;
    position: absolute;

    /* These rules sizes the img to the smaller of parent's dimensions,
       while maintaining proper proportion. If the image is smaller than the
       parent, it won't be scaled up. (There's no easy way to accomplish that
       with pure CSS, without picking a dimension to scale to. (Which is the whole
       point of this code. We *don't* pick a dimension.) "zoom" can work, but is
       non-standard.)*/
    /* To solve the "not scaling up" problem, we dynamically add the portrait or
       landscape classes below. This is as close as we can get to pure CSS
       without causing major compatibility problems. In the event JS isn't
       enabled, the images just won't scale up. (But then, our page doesn't work
       without JS anyway.) */
    max-width: 100%;
    max-height: 100%;

    /* This centers the block in the parent both ways. Regardless of position type. Magic. */
    /* To be honest, I'm not entirely sure why it works. It seems to work with some elements, but not others. */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

/* These rules allow an image to actually scale up to fit it's container.
Unfortunately, there's no way to apply them automatically, so you either have
to hard-code them into the page, or use JS to dynamically update them. */
.portrait .app-canvas-layer img {
    width: auto;
    height: auto;
}

.landscape .app-canvas-layer img {
    height: auto;
    width: auto;
}

/*.app-canvas-layer.app-canvas-background img { width: 100%; height: 100%; }*/

.app-canvas-logo {
    display: block;
    bottom: 0;
    right: 0;
}

.app-canvas-logo img {
    position: absolute;
    max-width: 100%;
    bottom: 4px;
    right: 4px;
    max-height: 30px;
}

.app-config-pane {
    /* Warning: slimScroll overrides certain properties on elements it is
    attached to, making specifying them in css useless. (Except during page load.)
    At the time of writing, these are:
    overflow, width, height
    For the config pane at least, we handle these elements in the js. */

    width: 100%;
    top: 0;
    bottom: 0;
    margin-bottom: 48px;

    /* background: #d2d6d6; */
    background: url('../img/white-leather.jpg') #ffffff !important;
    position: absolute;

    /*overflow-y: auto; handled by slimscroll */
}

/*
.app-canvas-status {
	position: absolute;

	right: 0; bottom: 0;
	text-align: right;

	background-color:rgba(255,255,255,0.8);
}*/

.app-config-pane {
    /*margin: 0 2px 1px; */
    /*width: 100%;
    border-top: 1px solid #9daca9;*/
}

/*.app-config-frame-header, .app-config-status, .app-canvas-status, .app-config-frame-seat-style {*/
.app-config-frame-header, .app-canvas-status, .app-config-frame-seat-style {
    /*	padding: 0.5em; */
    border-bottom: 1px solid #9daca9;
    /*background: #f5f5f5 !important;*/
    background-image: -webkit-linear-gradient(top, rgb(209, 24, 30) 0%, rgb(174, 3, 5) 100%);
    left: 0;
    right: 0;
    height: 45px;
    vertical-align: middle;
}

.app-config-status, .app-canvas-status, .app-canvas-footer {
    height: 30px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.app-config-frame-header-label, .app-config-frame-seat-style-label {
    font-size: 16px;
    font-weight: bold;
    float: left;
    height: 100%;
    overflow: unset;
    /*background: #f5f5f5 !important;*/
    padding-right: 6px;
    /*color: #757575 !important;*/
    color: #FFFFFF;
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
    width: 220px;
}

.fa-chevron-circle-right, .fa-chevron-circle-down, .fa-pencil {
    color: #FFFFFF;
    /* background-color: #f5f5f5 !important; */
    padding: 4px;
    font-size: xx-large;
}

.app-config-frame-header-color, .app-config-frame-seat-style-seat-icon {
    width: 46px;
    height: 46px;
    float: left;
    padding-right: 20px;
    max-width: 37px;
    top: 4px;
}

.app-config-frame-header-icon {
    width: 40px;
    height: 16px;
    float: right;
}

.app-config-frame-header:after {
    /* Clear floats used in this element */
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

.app-config-frame-pane {
    padding: 0 2px 3px 0;
    /* border: 2px inset;
    background: #c0c0c0; */
    left: 0;
    right: 0;
    border-bottom: 1px solid #9daca9;
    background: #d2d6d6;
}

.app-config-frame-pane:after {
    /* Clear floats used in this element */
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

.app-config-frame-pane.closed {
    display: none;
}

.app-overlay-checkbox:after {
    /* Clear floats used in this element */
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

.app-overlay-checkbox {
    text-align: left;
}

.app-config-clear-button {
    padding: 0 90px 0 90px;
    background-color: white;
}

.app-config-clear-button-container {
    width: 100%;
    clear: both;
    text-align: center;
}

.app-config-status {
    border-bottom: 1px solid #9daca9;
    /* background: green !important; */
    left: 0;
    right: 0;
    height: 30px;
    vertical-align: middle;
    background: url(../img/background.jpg) #000 !important;
}

.app-config-status, .app-canvas-status, .app-canvas-footer {
    position: absolute;
    bottom: 0;
    border-top: 3px solid #9daca9;
    border-bottom: 0 none;
    color: white !important;
    text-align: center;
}

.app-config-status span, .app-canvas-status span , .app-canvas-footer span {
    /* float: left;*/
}

.app-config-status .app-taphint {
    /* float: left; */
    font-weight: bold;
}

.app-config-status:after, .app-canvas-status:after, .app-canvas-footer:after {
    /* Clear floats used in this element */
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

.app-config-layer-option {
    position: relative;
    float: left;
    width: 42px;
    height: 42px;
    /*	margin: 3px 0 0 2px;
        border: 3px inset #AAAAAA;*/
    box-shadow: none !important;
    border-radius: 0 !important;
}

.app-config-layer-option > div {
    width: 32px;
    height: 32px;
    top: 0;
}

.app-config-layer-option img {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
}

.app-config-layer-option, .app-config-layer-option .topcoat-icon--large {
    text-shadow: none;
    overflow: visible;
}

.app-config-option-selected {
    /*border: 1px solid #333434;*/
    border: 1px solid #9daca9;
    background-color: #eff1f1;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
}

.app_selector_option_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
}

.app-config-pattern-option {
    position: relative;
    float: left;
    width: 60px;
    height: 54px;
    /*	margin: 3px 0 0 2px;
        border: 3px inset #AAAAAA;*/
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-left: 10px;
    margin-right: 10px;
}

.app-config-pattern-option > div {
    width: 74px;
    height: 50px;
    top: 0;
}

.app-config-pattern-option img {
    position: absolute;
    top: 0;
    left: 0;
    width: 74px;
    height: 50px;
}

/*
.app-config-frame-pane-label {
	padding: 0.2em;
	padding-left: 0.5em;
	padding-bottom: 0; /* options already provide the padding we need * /
	font-size: 18px;
}*/
.app-config-frame-pane-select-overlay {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0.5em;
}

.app-menu {
    padding: 0;
    background: url('../img/background.jpg') #000 !important;
    left: 0;
    right: 0;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    height: 49px;
}
.app-canvas-footer  {
    padding: 0;
    background: url('../img/background.jpg') #000 !important;
    left: 0;
    right: 0;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    height: 46px;
}



.app-menu .topcoat-icon-button {
    position: absolute;
    padding-top: 11px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 12px;
    font-size: 26px;
    line-height: 1;
    border: 0 none;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.app-menu .topcoat-icon-button span {
    width: 26px;
    height: 26px;
}

.app-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    margin-left: 33px;
    margin-right: 105px;
    /* display: table; */
}

.app-title-span1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
}

.app-title-span2 {
    position: absolute;
    top: 23px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
}

.app-collapse-button {
    top: 0px;
    left: 10px;
}

.app-share-button {
    top: 0px;
    right: 10px;
    color: #FFFFFF;
}

.app-phone-button {
    top: 0px;
    right: 125px;
}

.app-download-button {
    top: 0px;
    right: 45px;
}

.app-email-button {
    top: 0px;
    right: 80px;
}
.app-email-button:hover, .app-download-button:hover, .app-phone-button:hover, .app-share-button:hover {
    background-image: -webkit-linear-gradient(top, rgb(209, 24, 30) 0%, rgb(174, 3, 5) 100%);
}
.app-share-pane {
    width: 35px;
    right: 0;
    top: 49px;
    position: absolute;
    border-bottom: 1px solid #9daca9;
    border-left: 1px solid #9daca9;
    padding: 0 4px 4px 4px;

    background: #f5f5f5 !important;

    display: none;
}

.app-phone-button a {
    color: #FFFFFF !important;
    text-decoration: none;
    cursor: default;
}

.app-email-button a {
    color: #FFFFFF !important;
    text-decoration: none;
    cursor: default;
}

.app-download-button a {
    color: #FFFFFF !important;
    text-decoration: none;
    cursor: default;
}

span.app-legal {
    padding-right: 10px;
    position: relative;
    top: -4px;
    float: right;
    max-width: 70%;

    font-size: 0.7em;
    text-align: right;
    color: #FFFFFF;

    background-image: url(../img/MadeInTheUSA.png);
    background-repeat: no-repeat;
    padding-left: 30px;
    display: block;
    background-size: 11%;
    background-position-y: bottom;
    padding-top: 8px;
}

.app-debug-pane {
    width: 192px;
    right: 0;
    top: 49px;
    position: absolute;
    border-bottom: 1px solid #9daca9;
    border-left: 1px solid #9daca9;
    padding: 0 4px 4px 4px;

    background: #f5f5f5 !important;

    display: none;
}

.app-debug-button {
    top: 2px;
    right: 78px;
}

.app-debug-pane > span {
    width: 100%;
    display: inline-block;
}

.app-disable {
    width: 100%;
    top: 0;
    bottom: 0;
    margin-top: 49px;
    margin-bottom: 49px;
    position: absolute;
    border-left: 1px solid #9daca9;
    background-color: rgba(69, 70, 70, 0.4);
    display: none;
}

.loading .app-disable {
    display: block;
}

.app-loading {
    display: none;
}

.loading .app-loading {
    display: block;
}

.app-loading, .app-loading div {
    width: 100%;
    height: 100%;
    position: absolute;
}

.loading-bg {
    background: url(../img/spinner-bg.png) no-repeat center center;
    width: 100px;
    height: 100px;

}

.loading-spinner {
    background: url(../img/loading.gif) no-repeat center center;
    width: 100px;
    height: 100px;
}

.ui-tooltip {
    font: 14px "Source Sans", helvetica, arial, sans-serif;
    max-width: 150px !important;
    width: auto !important;
    overflow: auto !important;
}

.simple-share-buttons a {
    margin-top: 4px;
    display: block;
}

.simple-share-buttons img {
    width: 35px;
    box-shadow: initial;
    display: block;
}

/* Only applied on larger screens. */
@media (min-width: 480px) {
    .app-title {
        font-size: 1.2em;
        font-weight: bold;
    }
}

/* Only applied on really small screens. */
@media (max-width: 400px) {
    .app-title {
        font-size: 0.875em;
        font-weight: normal;
    }
}