/* CSS Document */

body
{
    margin: 0px;
    background-color: #fff;
    font-family: "proxima-nova", "proxima-nova-1","proxima-nova-2", "calibri", "arial";
}

option
{
    font-family: "proxima-nova", "proxima-nova-1","proxima-nova-2", "calibri", "arial";
}

#mq
{
    top: 3px;
    left: 3px;
    position: absolute;
}

    #mq.Floating
    {
        margin: 3px auto;
        display: block;
        width: 980px;
        position: static;
    }

        #mq.Floating.Admin
        {
            top: 3px;
            left: 3px;
            position: absolute;
        }

.Floating .Chrome
{
    width: 980px;
    position: absolute;
    top: 3px;
}

#mq[floating='true']
{
    margin: 3px auto;
    display: block;
    width: 980px;
    position: static;
}

    #mq[floating='true'].Admin
    {
        top: 3px;
        left: 3px;
        position: absolute;
    }

[floating='true'] .Chrome
{
    width: 980px;
    position: absolute;
    top: 3px;
}
/*.Floating.Admin .MqEditingPanels
{
    top:700px;
}*/

/* Hide Variables */
.Config, .HostId, .SessionID, .RootDataNode, .Demographics, .RootDemNode, .CustomStyle, .CustomScript, .CustomTemplates
{
    visibility: hidden;
    display: none;
    height: 0px;
    width: 0px;
}

    .CustomTemplates div
    {
        display: none;
        display: none;
        height: 0px;
        width: 0px;
    }

.Details
{
    display: none;
}

[hiddenvariable]
{
    visibility: hidden;
}

.Notes
{
    display: none;
}

#EditorLocation
{
    display: none;
}

.unselectable
{
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.iPadLayout .RootNode
{
    position: absolute;
    left: 20px;
    top: 25px;
}

.IsKiosk .KioskHide
{
    display: none;
}

.KioskShow
{
    display: none;
}

.IsKiosk .KioskShow
{
    display: block;
}

.iPadLayout .iPadLayoutHide
{
    display: none;
}

.iPadLayoutHide
{
    display: none;
}

.iPadLayout .iPadLayoutShow
{
    display: block;
}

.Kiosk .Chrome
{
    width: 1016px;
}

/* ====================================== CHROME (HEADER, ETC.) ======================================== */

.Toolbar
{
    position: absolute;
    top: 4px;
    left: 360px;
    width: 610px;
    height: 20px;
    font-size: 12px;
    text-align: right;
}

.HeaderTitle
{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.MarginBottom
{
    position: absolute;
    top: 515px;
    left: 766px;
    width: 190px;
    font-size: 12px;
    text-align: center;
    border-left: solid 1px #bbb;
}

.MarginTop
{
    position: absolute;
    top: 70px;
    left: 768px;
}

.InfoPages
{ /* TODO_CSS */
    display: none;
}
/* =================================== DETAILS (aka BTF) ================================ */

.subhead
{
    font-size: 16px;
    margin-bottom: 15px;
    margin-top: 5px;
    padding: 5px;
    font-family: Calibri;
    color: #000;
    background-color: #ff9;
    display: block;
}

.DetailsBackButton
{
    position: absolute;
    top: 33px;
    left: 675px;
    color: Black;
    background: url(http://assets.metroquest.com/img/ui_controls/icons/grey_button_left_75.png);
    cursor: pointer;
    width: 75px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    text-decoration: none;
    color: black;
    float: right;
    font-size: 12px;
}

.Chrome .pagetitle
{
    font-size: 25px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 15px;
    margin-top: 10px;
    overflow: visible;
}

#ChallengeDetails .pagetitle
{
    color: #666;
}

#PrioritiesDetails .pagetitle
{
    color: #633;
}

.PriorityDetails .InnerSubpageTitle
{
    color: #633;
}

#ChoicesDetails .pagetitle
{
    color: #363;
}

.QuestionDetails .InnerSubpageTitle
{
    color: #363;
}

#OutcomesDetails .pagetitle
{
    color: #069;
}

.ScenarioDetails .InnerSubpageTitle
{
    color: #069;
}

#GetInvolvedDetails .pagetitle
{
    color: #69c;
}

.choicescombo
{
    background-color: #ccffcc;
    color: #000;
    padding: 3px 13px 3px 13px;
    display: inline;
}

.choicebutton
{
    float: left;
    top: -1px;
    left: -10px;
    position: relative;
}

.DetailsSubpageTitle
{
    display: block;
    margin-bottom: 15px;
    overflow: visible;
}

.InnerSubpageTitle
{
    float: left;
    overflow: visible;
}

.DetailImage
{
    float: right;
    margin: 0px 0px 20px 20px;
}

.DetailsOverviewButton
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/grey_button_left_75.png);
    cursor: pointer;
    width: 75px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    text-decoration: none;
    color: black;
    float: right;
    font-size: 12px;
    display: inline;
}

.mq_issue_image
{
    float: right;
    border: solid 1px #ccc;
    margin: 0px 0px 10px 12px;
    padding: 9px;
    background-color: #fff;
    display: inline;
}

.mq_issue_image_halfsize
{
    float: left;
    width: 75px;
    height: 75px;
    margin: 0px 10px 0px 0px;
    background-color: #fff;
    display: inline;
}


.DetailsTitleBg
{
    background: url(http://assets.metroquest.com/img/UI_Controls/Details/title_tab.png);
    background-repeat: no-repeat;
    width: 226px;
    height: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.Kiosk .DetailsTitleBg
{
    display: none; /* todo */
}

.DetailsTitle
{
    width: 190px;
    height: 31px;
    line-height: 35px;
    margin-left: -22px;
    font-size: 14px;
    margin-bottom: 20px;
}

.DetailsLoadingAnimation
{
    position: absolute;
    top: 6px;
    left: 6px;
}

.DetailsContainer
{
    position: absolute;
}

.Details, .ScenarioDetails, .PriorityDetails, .QuestionDetails
{
    min-height: 400px;
    width: 675px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    line-height: 18px;
    padding-left: 40px;
    margin-bottom: 20px;
}

.ie .Details
{
    width: 725px;
}

.SubsectionLink
{
    cursor: pointer;
    text-decoration: underline;
    padding: 0px 3px 0px 3px;
}

    .SubsectionLink.SubsectionSelected
    {
        background: #6d97d2;
        color: #fff;
        text-decoration: none;
    }
/* === COLLAPSING SECTIONS WITHIN DETAILS PAGE === */

.CollapsingDetailsSection
{
    position: relative;
}

.DetailsSectionTitle
{
    width: 575px;
    height: 18px;
    margin-bottom: 11px;
    border-top: 1px solid #aaa;
}

.CollapsingDetailsSectionWide .DetailsSectionTitle
{
    width: 675px;
}

.DetailsSectionTitle .Toggler
{
    width: 75px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    text-decoration: none;
    color: black;
    float: right;
    font-size: 12px;
    display: inline;
}

.DetailsSectionTitle .ToggleMore
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/grey_button_down_75.png);
    background-repeat: no-repeat;
}

.DetailsSectionTitle .ToggleLess
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/grey_button_up_75.png);
    background-repeat: no-repeat;
}

.DetailsSectionBody
{
    margin-bottom: 10px;
    width: 575px;
}

.CollapsingDetailsSectionWide .DetailsSectionBody
{
    width: 675px;
}

.CollapsingDetailsHidden .DetailsSectionTitle
{
    width: 690px;
}

.CollapsingDetailsHidden .DetailsSectionBody
{
    width: 690px;
}

.DetailsSectionPreview
{
    margin-bottom: 10px;
    position: relative;
    width: 575px;
    height: 40px;
}

.DetailsPreview
{
}

.CollapsingDetailsSectionWide .DetailsSectionPreview
{
    width: 675px;
}

.DetailsSectionToggle
{
    cursor: pointer;
    text-decoration: underline;
    color: Blue;
}

.CollapsingDetailsThumbnail
{
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    cursor: pointer;
    width: 75px;
    height: 75px;
}

.CollapsingDetails
{
    margin-bottom: 10px;
    position: relative;
    left: 90px;
}

.CollapsingDetailsHidden .CollapsingDetails
{
    left: 0px;
}

.CollapsingDetailsSectionWide .CollapsingDetails
{
    left: 0px;
}

.Toggler
{
    cursor: pointer;
}

/* ======================================= SHARING =================================== */

.AddThisTitle
{
    float: left;
    padding-left: 30px;
    padding-right: 5px;
    font-size: 14px;
}

.InterfaceChrome .Sharing
{
    position: absolute;
    top: 451px;
    left: 707px;
    font-size: 12px;
    display: none;
}

    .Sharing .SharingTitle
    {
        float: left;
        padding-left: 11px;
        padding-right: 5px;
        font-size: 12px;
    }

    .Sharing .ExternalLink
    {
        background-repeat: no-repeat;
        background: url(http://assets.metroquest.com/img/UI_Controls/Sharing/alt_temp_bg.png);
        margin-left: 3px;
        width: 105px;
        height: 24px;
        display: inline-block;
        float: left;
        cursor: pointer;
        text-align: center;
        line-height: 24px;
        color: black;
        font-size: 12px;
    }

    .Sharing .SendFeedback
    {
        background-repeat: no-repeat;
        background: url(http://assets.metroquest.com/img/UI_Controls/Sharing/alt_temp_bg.png);
        margin-left: 3px;
        width: 105px;
        height: 24px;
        display: inline-block;
        float: left;
        cursor: pointer;
        text-align: center;
        line-height: 24px;
        color: black;
        font-size: 12px;
    }

    .Sharing .SharingTools
    {
        padding-top: 4px;
        background: url(http://assets.metroquest.com/img/UI_Controls/Sharing/alt_temp_bg_wide.png);
        background-repeat: no-repeat;
        margin-left: 3px;
        width: 135px;
        height: 24px;
        display: inline-block;
        float: left;
        text-align: center;
        line-height: 16px;
        color: black;
        font-size: 12px;
        padding-left: 9px;
    }

.SharingTools #share_inject
{
    position: relative;
    top: 0px;
    margin-left: 0px;
}

.DetailsColumnLeft325
{
    float: left;
    margin: 0px;
    width: 325px;
    min-height: 380px;
}

.DetailsColumnRight500
{
    float: right;
    margin: 0px;
    width: 500px;
    min-height: 400px;
}

.ModalBackground
{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    position: absolute;
}

/* ============ STANDARD ICONS ============ */

.CloseIcon
{
    width: 16px;
    height: 16px;
    background: url(http://assets.metroquest.com/img/UI_Controls/Icons/Close_16x16.png);
    cursor: pointer;
    position: absolute;
}

    .CloseIcon.Medium
    {
        width: 24px;
        height: 24px;
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/Close_24x24.png);
    }

    .CloseIcon.Large
    {
        width: 32px;
        height: 32px;
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/Close_32x32.png);
    }

/* =========== BUTTONS ============== */

.ScalableButton
{
    width: 180px;
    height: 22px;
    line-height: 22px;
    cursor: pointer;
    position: relative;
}

    .ScalableButton .RightCap
    {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 20px;
        height: 22px;
        background-position: -25px 0px;
    }

    .ScalableButton .LeftCap
    {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 25px;
        height: 22px;
    }

    .ScalableButton.NoIcon .LeftCap
    {
        width: 20px;
    }

    .ScalableButton .ScalabeButtonText
    {
        color: #000;
        position: absolute;
        left: 25px;
        top: 0px;
        width: 160px;
        height: 22px;
        background-position: 0px -22px;
        font-size: 13px;
    }

    .ScalableButton .ScalabeButtonIcon
    {
        position: absolute;
        left: 3px;
        top: 3px;
        width: 16px;
        height: 16px;
    }

    .ScalableButton.Comment .ScalabeButtonIcon
    {
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/comment_16x16.png);
    }

    .ScalableButton.Next .ScalabeButtonIcon
    {
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/arrow_right_grey_16x16.png);
    }

    .ScalableButton.Refresh .ScalabeButtonIcon
    {
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/refresh_grey_16x16.png);
    }

    .ScalableButton.Info .ScalabeButtonIcon
    {
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/info_icon.png);
        background-position: -2px -2px;
    }

    .ScalableButton.NoIcon .ScalabeButtonIcon
    {
        display: none;
    }

    .ScalableButton.Standard .ButtonBg
    {
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/button_sprite_22_grey.png);
    }

    .ScalableButton.Green .ButtonBg
    {
        background-image: url('http://assets.metroquest.com/img/ui_controls/icons/button_sprite_22_darkgreen.png');
    }

    .ScalableButton.Green .ScalabeButtonText
    {
        color: #fff;
    }

/* ====== FEEDBACK BOX ======== */

.FeedbackBox
{
    position: absolute;
    background: #fff;
    color: #000;
    border: solid 1px #666;
    padding: 5px;
}

    .FeedbackBox .FeedbackBoxTitle
    {
        text-align: center;
    }

    .FeedbackBox .FeedbackBoxClose
    {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 16px;
        height: 16px;
        background-image: url(http://assets.metroquest.com/img/ui_controls/icons/Close_16x16.png);
        cursor: pointer;
    }

    .FeedbackBox .FeedbackBoxCheckmark
    {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/checkmark.gif);
        margin-top: 5px;
        margin-left: 3px;
    }

    .FeedbackBox .Submit
    {
        float: left;
        margin-top: 5px;
    }

/* =========== ROUNDED CORNERS =============== */

.StaticContentContainer
{
    position: absolute;
}

.RoundedCorners
{
    position: absolute;
    top: 0px;
    left: 0px;
}

    .RoundedCorners .RoundedCorner
    {
        width: 10px;
        height: 10px;
        position: absolute;
        display: block;
    }

.RoundedCornerTopRow
{
    display: block;
    width: 100%;
    height: 10px;
    font-size: 5px;
    line-height: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.RoundedCornerBodyRow
{
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 10px;
    left: 0px;
}

.RoundedCornerBottomRow
{
    display: block;
    width: 100%;
    height: 10px;
    font-size: 5px;
    line-height: 5px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.RoundedCornerTop
{
    position: absolute;
    top: 0px;
    left: 10px;
    width: 10px;
    height: 10px;
}

.RoundedCornerBody
{
    margin: 0px 15px 0px 15px;
}

.RoundedCornerBottom
{
    position: absolute;
    bottom: 0px;
    left: 10px;
    width: 10px;
    height: 10px;
}

.RoundedCorners .TL
{
    background-position: 0px 0px;
    top: 0px;
    left: 0px;
}

.RoundedCorners .TR
{
    background-position: -10px 0px;
    top: 0px;
    right: 0px;
}

.RoundedCorners .BL
{
    background-position: 0px -10px;
    bottom: 0px;
    left: 0px;
}

.RoundedCorners .BR
{
    background-position: -10px -10px;
    bottom: 0px;
    right: 0px;
}

.RoundedCorners.black .BG
{
    background: #000;
    color: #fff;
}

.RoundedCorners.black .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_black.png);
}

.RoundedCorners.white .BG
{
    background: #fff;
    color: #000;
}

.RoundedCorners.white .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_white.png);
}

.RoundedCorners.lightgrey .BG
{
    background: #acacac;
    color: #000;
}

.RoundedCorners.lightgrey .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_grey_light.png);
}

.RoundedCorners.darkgrey .BG
{
    background: #545454;
    color: #fff;
}

.RoundedCorners.darkgrey .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_grey_dark.png);
}

.RoundedCorners.darkblue1 .BG
{
    background: #263e62;
    color: #fff;
}

.RoundedCorners.darkblue1 .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_darkblue1.png);
}

.RoundedCorners.medblue1 .BG
{
    background: #428abf;
    color: #fff;
}

.RoundedCorners.medblue1 .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_medblue1.png);
}

.RoundedCorners.teal_light .BG
{
    background: #65c7e1;
    color: #000;
}

.RoundedCorners.teal_light .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_teal_light.png);
}

.RoundedCorners.teal_dark .BG
{
    background: #009ec5;
    color: #fff;
}

.RoundedCorners.teal_dark .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_teal_dark.png);
}

.RoundedCorners.priorities_red .BG
{
    background: #8c4213;
    color: #fff;
}

.RoundedCorners.priorities_red .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_priorities_red.png);
}

.RoundedCorners.outcomes_blue .BG
{
    background: #006496;
}

.RoundedCorners.outcomes_blue .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_outcomes_blue.png);
}

.RoundedCorners.med_blue .BG
{
    background: #759ebc;
}

.RoundedCorners.med_blue .RoundedCorner
{
    background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_med_blue.png);
}

.mqBG
{
    position: absolute;
}

    .mqBG .Corner
    {
        position: absolute;
    }

    .mqBG .Edge
    {
        position: absolute;
    }

    .mqBG.White .Edge
    {
        background: #fff;
    }

    .mqBG.White.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_white.png);
    }

    .mqBG.priorities_red .Edge
    {
        background: #8c4213;
    }

    .mqBG.priorities_red.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_priorities_red.png);
    }

    .mqBG.outcomes_blue .Edge
    {
        background: #006496;
    }

    .mqBG.outcomes_blue.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_outcomes_blue.png);
    }

    .mqBG.choices_green .Edge
    {
        background: #004119;
    }

    .mqBG.choices_green.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_choices_green.png);
    }

    .mqBG.grey_medium .Edge
    {
        background: #888888;
    }

    .mqBG.grey_medium.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_grey_medium.png);
    }

    .mqBG.grey_medium_dark .Edge
    {
        background: #656565;
    }

    .mqBG.grey_medium_dark.Radius10 .Corner
    {
        background: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_grey_medium_dark.png);
    }

    .mqBG.teal_light .Edge
    {
        background: #65c7e1;
    }

    .mqBG.teal_light.Radius10 .Corner
    {
        background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_teal_light.png);
    }

    .mqBG.green_light .Edge
    {
        background: #69b443;
    }

    .mqBG.green_light.Radius10 .Corner
    {
        background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_green_light.png);
    }

    .mqBG.green_medium .Edge
    {
        background: #44742b;
    }

    .mqBG.green_medium.Radius10 .Corner
    {
        background-image: url(http://assets.metroquest.com/img/UI_Controls/Icons/corner_sprite_green_medium.png);
    }

    .mqBG.Radius10 .Top.Right
    {
        background-position: -10px 0px;
    }

    .mqBG.Radius10 .Bot.Right
    {
        background-position: -10px -10px;
    }

    .mqBG.Radius10 .Bot.Left
    {
        background-position: -0px -10px;
    }

.StandardGreyButton
{
    height: 18px;
    width: 75px;
    background: url(http://assets.metroquest.com/img/ui_controls/icons/grey_button_75.png);
    text-align: center;
    line-height: 18px;
    font-size: 13px;
    color: Black;
}

.AdminMessage
{
    position: absolute;
    top: 30px;
    right: -370px;
    width: 350px;
    height: 20px;
    border: 1px solid #888;
    background: #ddd;
    color: #000;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
}

    .AdminMessage a
    {
        color: #336;
    }

    .AdminMessage.Success
    {
        top: 20px;
        background: none;
        border: none;
        color: #000;
        font-size: 12px;
        text-align: left;
        font-weight: bold;
    }

/* ------------------ LOADING, INITIALIZING ------------------ */

.ConfigStatus
{
    color: #ff9;
    font-size: 13px;
    position: absolute;
    top: 160px;
    left: 50px;
    width: 700px;
}

.ConfigErrorMessage
{
    position: absolute;
    top: 90px;
    left: 50px;
}

.ConfigProgressBar
{
    position: absolute;
    top: 60px;
    left: 50px;
    width: 760px;
}

.ConfigProgressSegment
{
    height: 20px;
    width: 4px;
    float: left;
    background: #999;
}

    .ConfigProgressSegment[state='config']
    {
        background: #060;
    }

    .ConfigProgressSegment[state='complete']
    {
        background: #3c3;
    }

    .ConfigProgressSegment[state='error']
    {
        background: #f99;
    }

    .ConfigProgressSegment[state='warning']
    {
        background: #ff9;
    }

.MqScreenshot
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.MqPromoScreenshot
{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 516px;
    height: 266px;
    background: url(http://assets.metroquest.com/img/ui_controls/icons/screenshot_bg_500x250.png);
    background-repeat: no-repeat;
    text-align: center;
    color: #ff9;
    font-size: 14px;
    line-height: 22px;
}

    .MqPromoScreenshot img
    {
        margin: 8px;
    }


/* =========================== BUTTONS ========================= */
.MqButton
{
    color: #000;
    cursor: pointer;
}
    /*.MqButton.InputFlash.Flashing
    {
        background:#ffc;
    }*/

    .MqButton.Dark
    {
        color: #fff;
    }

    .MqButton.H22
    {
        line-height: 22px;
        height: 22px;
        font-size: 13px;
    }

    .MqButton.W200
    {
        width: 200px;
    }

    .MqButton.W125
    {
        width: 125px;
    }

    .MqButton.W200.H22.Grey
    {
        background: url('http://assets.metroquest.com/img/ui_controls/icons/button_grey_200x22.png');
    }

    .MqButton.W125.H22.Grey
    {
        background: url('http://assets.metroquest.com/img/ui_controls/icons/button_grey_125x22.png');
    }

    .MqButton.W125.H22.Dark.Green
    {
        background: url('http://assets.metroquest.com/img/ui_controls/icons/button_darkgreen_125x22.png');
    }

    .MqButton.H22 .ButtonIcon
    {
        margin: 3px 5px 3px 5px;
        float: left;
    }


/* -------------------------- WIDGETS ----------------------------- */

.SurveyThankYou
{
    display: none;
}

[survey_variable]
{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 6px;
    margin-left: 20px;
    zoom: 1;
    *display: inline;
}

    [survey_variable][questionposition=LayoutFlow]
    {
        width: auto;
        margin: auto;
    }

.SurveyWidgetSubmit
{
    margin-left: 20px;
}

input[isdefault='true']
{
    color: #999;
}

input[isdefault='false']
{
    color: #000;
}

[survey_variable] .SurveyQuestionUI
{
    display: none;
}

[questiontype='textbox'] .TextboxText
{
    display: block;
}


.InlineHistogram
{
    display: inline-block;
    position: relative;
    height: 20px;
    margin-left: 6px;
}

    .InlineHistogram .HistogramElement
    {
        width: 16px;
        height: 20px;
        /*border:1px solid #666;   
    padding:3px; */
        float: left;
        position: absolute;
        top: 0px;
        left: 0px;
    }

.HistogramElement
{
    border-bottom: 1px solid #666;
}

[orientation='vertical'] .HistogramElement
{
    /*border-left:1px solid #666;  */
    border-bottom: none;
}

.HistogramCount
{
    width: 15px;
    height: 20px;
    background: #666;
    position: absolute;
    top: 0px;
    left: 0px;
}

.HistogramValue
{
    display: none;
    text-align: right;
}

.HistogramEnd
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 25px;
    text-align: center;
    font-size: 13px;
}



[mq_insert]
{
    display: inline;
}

[survey_variable].Hover .SurveyQuestionText
{
    background: #ff9;
}

[mq_widget='PopupLink']
{
    cursor: pointer;
}

[mq_widget='Button']
{
    padding: 3px 8px;
    cursor: pointer;
    background: #090;
    color: #fff;
    border-radius: 6px;
    border: #fff solid 1px;
    font-size: 14px;
    position: relative;
}

    [mq_widget='Button'][size='Large']
    {
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 16px;
    }

    [mq_widget='Button'][size='Small']
    {
        padding: 0px 8px;
        border-radius: 5px;
        border: #fff solid 1px;
        font-size: 11px;
    }

    [mq_widget='Button'][icon]
    {
        padding-left: 24px;
        height: 20px;
        line-height: 20px;
    }

    [mq_widget='Button'][size='Large'][icon]
    {
        padding-left: 30px;
    }

.ButtonWidgetIcon
{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 4px;
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_next_16.png);
    background-repeat: no-repeat;
}

[size='Large'] .ButtonWidgetIcon
{
    width: 24px;
    height: 24px;
    top: 3px;
    left: 3px;
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_next_24.png);
}

[size='Small'] .ButtonWidgetIcon
{
    top: 2px;
    left: 2px;
}

[icon='Close'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_close_16.png);
}

[icon='Close'][size='Large'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_close_24.png);
}

[icon='Check'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_check_16.png);
}

[icon='Check'][size='Large'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_check_24.png);
}

[icon='Comment'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_comment_16.png);
}

[icon='Commfent'][size='Large'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_comment_24.png);
}

[icon='Help'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_help_16.png);
}

[icon='Help'][size='Large'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_help_24.png);
}

[icon='Info'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_info_16.png);
}

[icon='Info'][size='Large'] .ButtonWidgetIcon
{
    background: url(http://assets.metroquest.com/img/ui_controls/icons/button_icon_info_24.png);
}
[mq_widget='Marker']
{
    text-align:center;
    font-size:14px;
    width:60px;
}
[mq_widget='Marker'] .MarkerType
{
    width:50px;
    height:50px;
    margin:0px auto;
    background-repeat:no-repeat;
}

.IsKiosk *::selection
{
    background: transparent;
}

.IsKiosk *::-moz-selection
{
    background: transparent;
}

.IsKiosk *::-webkit-selection
{
    background: transparent;
}

[isweb=true] [web=false]
{
    display:none;
}
[ismobile=true] [mobile=false]
{
    display:none;
}
.WebRoot .Content [web=false]
{
    display:none;
}
.MobileRoot .Content [mobile=false]
{
    display:none;
}
.MobileRoot .Content [mobile=false] div
{
    display:none;
}
.WebRoot .Content [platform=Mobile]
{
    display:none;
}
.MobileRoot .Content [platform=Web]
{
    display:none;
}
[mobile=true] .RootNode div
{
    background:none;
    background-image:none;
}
[mobile=true] .RootNode .ScreenContainer div
{
    background:none;
    background-image:none;
}
.MqNote
{
    /*visibility:hidden;*/
    display:none;
}
.MqNotesVisible .MqNote
{
    /*visibility:visible;*/
    display:block;
}
[admin=true] .MqNote
{
    /*visibility:visible;*/
    display:block;
}
/* windows 8 workaround */
.ui-sortable
{
    -ms-touch-action: none;
}
.ui-sortable div
{
    -ms-touch-action: none;
}
.ui-draggable
{
    -ms-touch-action: none;
}
.ConfigManager
{
    display:none;
}