﻿/* Variable Part */
@import "../../../OEW_UI/css/ui_oew.css";
/* */

/* Font embedding
   Please read the copyright notice in Font/LICENSE.txt
   ***************************************************** */
@font-face {
    font-family: 'ADAMFont';
    src: url('Font/webfont.eot');
    src: url('Font/webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/webfont.woff') format('woff'),
         url('Font/webfont.ttf') format('truetype'),
         url('Font/webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;}

/* Default appearance
   ***************************************************** */
body { font-size: 15px; font-family: 'ADAMFont', 'Segoe UI Light', 'Calibri Light', 'Gill Sans Light'; margin: 0; padding: 10px 0px; }
input { font-family: 'ADAMFont', 'Segoe UI Light', 'Calibri Light', 'Gill Sans Light'; }
textarea { font-family: 'ADAMFont', 'Segoe UI Light', 'Calibri Light', 'Gill Sans Light'; }
select { font-family: 'ADAMFont', 'Segoe UI Light', 'Calibri Light', 'Gill Sans Light'; }
body.msie {}
body.webkit {}
body.safari {}
body.firefox {}

table { border-collapse: collapse; border-spacing: 0; padding: 0 }
table td { padding: 0 }


/* Studio header
   ***************************************************** */
#studioHeader { position: fixed; left: 0px; right: 0px; top: 0px; height: 77px; min-width: 750px; color: #333333; z-index: 130; background-color: #fff; border-bottom: 1px solid #fff }
#studioHeader .studio-menu { position: absolute; right: 230px; top: 20px; }
#studioHeader .studio-logo { background-image: url(Images/Logo_BMWNow.png); width: 184px; height: 59px; position: absolute; right: 20px; top: 10px; text-decoration: none; background-repeat: no-repeat; }
#studioHeader .menu-item { cursor: pointer; display: inline-block; *display: inline; border: 0px none; padding-left: 10px; padding-right: 10px; }
#studioHeader .menu-item.menu-dropdown-item { padding-right: 20px; background-position: -100px 0; background-image: url(Images/studio-menu-sprite-blue.gif); }
#studioHeader .menu-item.menu-item-hover { color: #000; background-position: right 8px; background-color: transparent }
#studioHeader .menu-item.menu-item-pressed { background-position: right 8px; color: var(--main-text-color-pressed); background-color: transparent }
#studioHeader .menu-separator { padding-left: 10px; visibility: hidden }
#studioHeader #mainmenu { background-image: url(Images/studioicon.svg); background-repeat: no-repeat; background-position: 24px 25px; height: 50px; width: 50px; display: inline-block; }
#studioHeader #mainmenu .studio-name { color: #333333; background-position: right 20px; font-size: 21px; padding-top: 0px; padding-left: 50px; padding-right: 19px; line-height: 18px; position: absolute; left: 0; top: 30px; margin-right: 10px; }
#studioHeader #mainmenu .studio-name.menu-item.menu-item-hover { background-position: right -1px; color: #000 }
#studioHeader #mainmenu .studio-name.menu-item.menu-item-pressed { background-position: right -1px; color: #000; background-color: transparent }
#studioHeader #studiotools .menu-item { color: #333333; font-size: 32px; vertical-align: top; padding-top: 5px }
#studioHeader #studiotools .menu-item-hover { background-position: right 10px; }
#studioHeader #studiotools .menu-item-pressed { background-position: right 10px; color: var(--main-text-color-pressed); }
#studioHeader #globaltools .menu-item { color: #333333; font-size: 21px; vertical-align: middle; padding-top: 4px }
#studioHeader #globaltools .menu-item-pressed { color: var(--main-text-color-pressed); }
#studioHeader #globaltools .menu-avatar { padding: 1px 20px 0 20px }
#studioHeader #globaltools .menu-avatar.menu-item-hover { background-position: right 20px }
#studioHeader #globaltools .menu-avatar.menu-item-pressed { background-position: right 20px }
#studioHeader #globaltools .menu-avatar img { max-width: 54px; max-height: 54px; border-style:solid; border-color:#333 ; border-width:0px; }
.main-menu-dropdown-owner .menu-dropdown-panel { border-top: 0px none; padding: 2px; }
.main-menu-dropdown-owner .menu-item { }
.main-menu-dropdown-owner .menu-group .menu-group-title { padding-bottom: 15px; padding-top: 21px; }


/* Page header
   ***************************************************** */
.page-header { font-size: 17px; position: fixed; border-collapse: separate; left: 0px; right: 0px; top: 90px; min-width: 690px; padding: 23px 23px; z-index: 120; }
.page-header .page-title { font-size: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.page-header .page-tools { white-space: nowrap; text-align: right; padding-left: 20px; float: right; padding-top: 22px; }
.page-header .page-title-subscript { padding-top: 7px; color: #97999B; }
.page-header .page-tools-subscript { white-space: nowrap; text-align: right; float: right }
.page-header .page-tools .button { margin-left: 10px; }
.page-header .page-tools .action-icons { font-size: 15px; background-repeat: no-repeat; background-image: url(Images/Icons/iconsdarkgraylarger.png); }
.page-header .page-tools .action-icons.menu-item-hover { background-image: url(Images/Icons/iconsbluelarger.png); }
.page-header .page-tools .action-icons.menu-item-pressed { background-image: url(Images/Icons/iconsbluelarger.png); }
.page-header .page-tools .action-icons.menu-item-disabled { background-color: transparent; box-shadow: none; background-image: url(Images/Icons/iconsgraylarger.png); }
.page-header .page-tools .menu-inline-panel { border: 0px none; line-height: 20px;}
.page-header .page-tools .menu-inline-panel .menu-item { border: 0px none; }
.page-header .page-tools .menu-inline-panel .menu-item.menu-dropdown-item { padding: 5px 20px 5px 10px; background-position: right -52px }
.page-header .page-tools .menu-inline-panel .menu-item.menu-dropdown-item.menu-item-hover { padding: 5px 20px 5px 10px; background-position: right -591px }
.page-header .page-tools .menu-inline-panel .menu-item.menu-dropdown-item.menu-item-pressed { padding: 5px 20px 5px 10px; background-position: right -591px }
.page-header .page-tools .menu-inline-panel .menu-separator { margin-left: 2px; margin-right: 2px; border-left: 0px none; }
.page-header .page-tools .menu-inline-panel .menu-item.menu-item-icononly { padding: 2px 15px 2px 15px; margin-left: 1px; min-width: 25px; }


/* Page conent
   ***************************************************** */
.page-content { padding: 10px 50px; }

.page-left-panel { position: fixed; left: 0px; top: 0px; bottom: 0px; overflow: hidden; }
.page-right-panel { position: fixed; right: 0px; top: 0px; bottom: 0px; }
.page-bottom-panel { position: fixed; left: 0px; right: 0px; bottom: 0px; }

/* panel resizers  // TODO */
.panel-resize-handle { }
.panel-resize-handle.page-left-panel-resize-handle { width: 16px; position: fixed; z-index: 130; cursor: e-resize; }
.page-left-panel.panel-resizing { border-right: 1px solid #ccc; } 

.page-content .h1 { font-size: 32px; color: #B88B25; margin-top: 20px; }
.page-content .h2 { margin-left: -20px; padding: 4px 0px 4px 20px; display: inline-block; font-size: 21px; color: #000; }
.page-content .h3 { font-size: 17px; }


/* Buttons
   ***************************************************** */
.button { color: #fff; outline: none; font-size: 15px; cursor: default; border: 0px none; display: inline-block; zoom: 1; *display: inline; padding: 11px 14px; text-decoration: none; min-width: 98px; text-align: center; background-color: #97999b; }
.msie.version-7 input.button { min-width: auto; }
.button:hover { background-color: #a7a9ab; }
.button:active, .button:focus { box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }
.button.default-button { color: #fff; background-color: #fff; }
.button.default-button:hover { background-color: #10aFe2; }
.button.default-button:active, .button.default-button:focus { box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }
.button.delete-button { color: #fff; background-color: #EF3340; }
.button.delete-button:hover { background-color: #EF3340; }
.button.delete-button:active, .button.delete-button:focus { box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }
.button.disabled-button, .button.disabled-button:hover, .button.disabled-button:active, .button.disabled-button:focus { color: #aaa !important; background-color: #EcEfEf !important;  box-shadow: none !important }

.page-header .button.default-button { color: #fff; background-color: #FFA300; }
.page-header .button.default-button:hover { background-color: #FFb310; }


/* General elements
   ***************************************************** */
.label { color: #97999B; }
.label strong { font-weight: normal; color: #000; }

/* Viewing data
   ***************************************************** */
.summary-form { }
.summary-form td { vertical-align: top; padding-bottom: 10px; padding-right: 20px; }
.summary-form td.label { width: 170px; padding-bottom: 2px; padding-top: 3px; }
.summary-form .link { color: #fff; text-decoration: none; display: inline-block; padding-right: 25px; margin-right: 10px; }
.summary-form .link:hover { background-image: url(Images/Icons/link-icons.png); background-repeat: no-repeat; background-position: right -120px }
.summary-form .data-list-item .link { display: block; padding-left: 25px; padding-right: 0; margin-right: 0; }
.summary-form .data-list-item .link:hover { background-position: left -120px }
.summary-form .link.disabled { color: #000; }
.summary-form .link.disabled:hover { background-image: none }


/* Editing data
   ***************************************************** */
.input-form td { vertical-align: top; padding-bottom: 10px; padding-right: 20px; }
.input-form td.label { width: 150px; padding-bottom: 2px; padding-top: 3px; }


/* Input controls
   ***************************************************** */
input[type=text] { width: 317px; background-color: #fff; border: 1px solid #a7a7a7; font-size: 15px; padding: 10px; outline: none; margin: 0; }
input[type=text]:focus { border: 1px solid #de0000; }
input[type=text].invalid { border: 1px solid #EF3340; }
input[type=text].small-textbox { width: 164px; }
input[type=text].smaller-textbox { width: 50px; }
input[type=text].tiny-textbox { width: 25px; }
input[type=text].wide-textbox { width: 520px; }
input[type=text].full-textbox { width: 688px; }

input[type=password] { width: 317px; background-color: #fff; border: 1px solid #a7a7a7; font-size: 15px; padding: 10px; outline: none; margin: 0; }
input[type=password]:focus { border: 1px solid #de0000; }
input[type=password].invalid { border: 1px solid #EF3340; }

textarea { background-color: #fff; width: 520px; max-width: 520px; height: 150px; border: 1px solid #dbdddf; font-size: 15px; padding: 10px; outline: none; margin: 0} 
textarea:focus { border: 1px solid #fff; }
textarea.invalid { border: 1px solid #EF3340; }

select { width: 317px; background-color: #fff; border: 1px solid #dbdddf; font-size: 15px; padding: 10px; outline: none; margin: 0; }
select:focus { border: 1px solid #fff; }
select.invalid { border: 1px solid #EF3340; }


.dropdown.invalid input, .combobox.invalid input { border: 1px solid #EF3340; }

.combobox { width: 317px; }
.combobox .combobox-arrow { background-color: #fff; }

.datapickerbox { width: 180px; }
.small-datepickerbox{ width: 213px; }
.wide-datepickerbox{ width: 378px; }

/* Sections
   ***************************************************** */
.section { background-repeat: no-repeat; padding: 10px; }
.section .section-title { background-color: #fff; padding: 23px; display: block;  font-size: 21px; color: #434649; text-decoration: none }
.section .section-content { background-color: #fff; padding: 0 23px 23px 23px; }
.section .section-buttons { text-align: right; padding-top: 20px; }

.sectionarrows                      { margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; }
.sectionarrows-none        .section { }
.sectionarrows-topleft     .section { background-image: url(Images/section-arrows-vertical.png); background-repeat: no-repeat; background-position: 24px top; }
.sectionarrows-topright    .section { background-image: url(Images/section-arrows-vertical.png); background-repeat: no-repeat; background-position: right top; }
.sectionarrows-bottomleft  .section { background-image: url(Images/section-arrows-vertical.png); background-repeat: no-repeat; background-position: 24px bottom; }
.sectionarrows-bottomright .section { background-image: url(Images/section-arrows-vertical.png); background-repeat: no-repeat; background-position: right bottom; }
.sectionarrows-lefttop     .section { background-image: url(Images/section-arrows-horizontal.png); background-repeat: no-repeat; background-position: left 24px; }
.sectionarrows-leftbottom  .section { background-image: url(Images/section-arrows-horizontal.png); background-repeat: no-repeat; background-position: left bottom; }
.sectionarrows-righttop    .section { background-image: url(Images/section-arrows-horizontal.png); background-repeat: no-repeat; background-position: right 24px; }
.sectionarrows-rightbottom .section { background-image: url(Images/section-arrows-horizontal.png); background-repeat: no-repeat; background-position: right bottom; }


/* Expandable
   ***************************************************** */
.expandable { }
.expandable .section-title { outline: none; }
.expandable .section-title span { display: block; background-image: url(Images/Controls/expandable.png); background-repeat: no-repeat; }
.expandable .section-title.expanded span { background-position: right 5px; }
.expandable .section-title.collapsed span { background-position: right -115px; }
.expandable .section-content { }


/* Validation summary
   ***************************************************** */
.sectionarrows-none .section.validation-summary {background-image: none;}
.section.validation-summary { background-image: url(Images/section-arrows-red.png); border-collapse: separate; color: #fff !important; }
.section.validation-summary .section-title {  color: #fff; background-color: #EF3340; padding-left: 96px; padding-bottom: 0px; }
.section.validation-summary ul { background-image: url(Images/Icons/validation-exclamation-white.png); background-repeat: no-repeat; background-position: 50px 0px; color: #fff; background-color: #EF3340; }
.section.validation-summary ul { margin: -10px 0 0 0; padding: 15px 23px 23px 96px; font-weight: normal; min-height: 62px; }
.section.validation-summary ul li { list-style-type: none; }


/* Tooltips
   ***************************************************** */
.tooltip { z-index: 50000; position: fixed; max-width: 200px; white-space: normal; color: #fff; padding-bottom: 7px; width: auto; height: auto; background-repeat: no-repeat; background-position: right bottom;  }
.tooltip .tooltip-content { padding: 10px; display: block; box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 5px 0px; }
.tooltip .tooltip-arrow { position: absolute;  margin: 0; overflow: hidden; height: 8px; width: 15px; background-repeat: no-repeat; background-image: url(Images/Controls/tooltip-info.png); }

.tooltip.tooltip-above { padding-bottom: 7px; }
.tooltip.tooltip-above .tooltip-arrow { bottom: 0; }
.tooltip.tooltip-below { padding-top: 7px; padding-bottom: 0; }
.tooltip.tooltip-below .tooltip-arrow { top: 0; }

.tooltip.info-tooltip .tooltip-content { background-color: #97999B; }
.tooltip.info-tooltip.tooltip-above .tooltip-arrow { background-position: 0 0; }
.tooltip.info-tooltip.tooltip-below .tooltip-arrow { background-position: 0 -9px; }

.tooltip.infocard-tooltip .tooltip-content { border: solid 1px #dbdddf; background-color: #fff; color: #737577 }
.tooltip.infocard-tooltip.tooltip-above .tooltip-arrow { background-position: 0 -18px; }
.tooltip.infocard-tooltip.tooltip-below .tooltip-arrow { background-position: 0 -27px; }

.tooltip.error-tooltip .tooltip-content { background-color: #EF3340; }
.tooltip.error-tooltip.tooltip-above .tooltip-arrow { background-position: 0 -36px; }
.tooltip.error-tooltip.tooltip-below .tooltip-arrow { background-position: 0 -45px; }
.tooltip.error-tooltip span.separator { padding: 0 10px; height: 1px; background-color: #F7999F; display: block; }


/* Scroll behavior
   ***************************************************** */
body.v-scrolled { }
body.h-scrolled { }
body.scrolled { }
body.v-scrolled .page-header { box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); }


/* Status messages
   ***************************************************** */
.status-indiciator { position: fixed; z-index: 150; color: #fff; font-size: 15px; font-weight: normal; }
.status-indiciator .status-info { padding: 3px 30px 4px 30px; background-position: 8px 7px; display: block; background-repeat: no-repeat; }
.status-indiciator.status-success .status-info { background-color: #7BC143; background-image: url(Images/Icons/statussuccess.gif); padding-left: 30px; }
.status-indiciator.status-pleasewait .status-info { background-color: #939598; background-image: url(Images/Icons/statuspleasewait.gif); padding-left: 30px; }


/* Page messages 
   ***************************************************** */
.page-messages { }
.page-messages.default-page-messages { position: fixed; left: 0px; right: 0px; top: 78px; background-color: #fff; z-index: 140; }

.message { }
.message .message-header { }
.message .message-body { background-repeat: no-repeat; background-position: 10px 10px; line-height: 18px}
.message .message-footer { }
.message .message-footer .button { margin-left: 10px; }

.message.dialog-message { background-repeat: no-repeat;  }
.message.dialog-message.dialog-panel-content .dialog-header { }
.message.dialog-message.dialog-panel-content .message-body { min-width: 350px; min-height: 50px; max-width: 600px; max-height: 400px; padding-left: 70px; }

.message.page-message { padding: 5px 23px 23px 10px; border-top: 1px solid #d3d5d8; color: #000; }
.message.page-message .message-header { font-size: 32px; padding: 5px 23px; }
.message.page-message .message-body { min-height: 25px; padding-left: 70px; padding-top: 23px;  float: left; margin-top: -15px; max-width: 650px; }
.message.page-message .message-footer { float: right; margin-top: 25px; margin-right: 25px; }
.message.page-message ul { margin: -10px 0 0 0 }
.message.page-message ul li { margin-top: 10px }

.message.error-message .message-body { background-image: url(Images/Messages/error32red.png); }
.message.error-message .message-header { color: #EF3340; }
.message.error-message .message-footer .default-button { background-color: #EF3340; color: #fff }
.message.error-message .message-footer .default-button:hover { background-color: #EF3340;}
.message.error-message .message-footer .default-button:active { background-color: #EF3340; box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }

.message.stop-message .message-body { background-image: url(Images/Messages/stop32red.png); }
.message.stop-message .message-header { color: #EF3340; }
.message.stop-message .message-footer .default-button { background-color: #EF3340; color: #fff }
.message.stop-message .message-footer .default-button:hover { background-color: #EF3340;}
.message.stop-message .message-footer .default-button:active { background-color: #EF3340; box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }

.message.warning-message .message-body { background-image: url(Images/Messages/warning32black.png); }

.message.restricted-message .message-body { background-image: url(Images/Messages/restricted32red.png); }
.message.restricted-message .message-header { color: #EF3340; }

.message.added-message .message-body { background-image: url(Images/Messages/add32green.png); }

.message.deleted-message .message-body { background-image: url(Images/Messages/delete32red.png); }
.message.deleted-message .message-header { color: #EF3340; }

.message.success-message .message-body { background-image: url(Images/Messages/success32green.png) }

.message.information-message .message-body { background-image: url(Images/Messages/information32black.png); }

.message.question-message .message-body { background-image: url(Images/Messages/question32black.png); }

.message.confirmdelete-message { background-image: url(Images/Messages/error32white.png); }
.message.confirmdelete-message.dialog-panel-content .dialog-header { padding-left: 23px; }
.message.confirmdelete-message.dialog-panel-content .dialog-body { padding-left: 23px; }
.message.confirmdelete-message .message-header { color: #EF3340; }
.message.confirmdelete-message .message-footer .default-button { background-color: #EF3340; color: #fff }
.message.confirmdelete-message .message-footer .default-button:hover { background-color: #EF3340;}
.message.confirmdelete-message .message-footer .default-button:active { background-color: #EF3340; box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }


/* Layout for context search (the main search box in a studio)
   ***************************************************** */
/* the main search box */
.context-search { padding-right: 55px; padding-left: 10px; max-width: 650px; cursor: pointer; position: absolute; top: 0px; height: 78px; overflow: hidden; white-space: nowrap;  background-image: url(Images/Icons/context-search.svg); background-repeat: no-repeat; background-position: right 17px;  border-left: 1px solid #40ADCD; border-right: 1px solid #40ADCD; }
/* the main search box, when closed */
.context-search .context-search-closed { height: 50px; padding-top: 24px; display: inline-block; font-size: 21px;  }
.context-search .context-search-closed .context-name { padding-left: 10px; }
/* the main search box, when opened */
.context-search .context-search-open { height: 63px; position: relative; display: block; padding-left: 10px; }
/* the textbox used in the main search box */
.context-search .context-search-open input { color: #000; background-color: #fff; font-size: 21px; padding: 0 5px; margin: 0; margin-top: 20px; border: 5px solid #fff; outline: none; }
.context-search input:active, .context-search input:focus { border:0px none; } 
/* the selected context in the main search box  */
.context-search .selected-context { font-size: 21px; line-height: 26px; cursor: pointer; padding: 0 20px 0 7px; font-size: 17px; position: absolute; background-position: right -52px; background-repeat: no-repeat; background-color: #97999B; background-image: url(Images/studio-menu-sprite-blue.gif); }
/* the selected context in the main search box when being hovered */
.context-search .selected-context:hover { background-position: right 2px; background-color: #A4A6A8; }
/* defines the layout for the dropdown list panel shown when performing a studio search */
.context-search-menu-panel.menu-dropdown-panel { border-top: 0px none; padding: 10px 20px; }
/* defines the basic layout of a menu item in the context search */
.context-search-menu-panel .menu-item { padding-left: 7px; }
/* defines the basic layout of a menu separator in the context search */
.context-search-menu-panel .menu-group .menu-separator { margin-left: 0px; }
/* defines how menu-group titles in the context-search are displayed */
.context-search-menu-panel .menu-group .menu-group-title { padding-left: 7px; }
/* defines how the loading indicator in the context search is displayed */
.context-search-menu-panel .menu-group .menu-item.loading-indicator { padding-left: 19px; }
/* defines how the separator in the context-search-results is displayed */
.context-search-menu-panel .menu-group.search-list-items .menu-separator { margin-bottom: 0px; }
/* defines the basic layout of a context-search-result item */
.context-search-menu-panel .menu-group.search-list-items .menu-item { margin-top: 3px; padding-bottom: 2px; }
/* defines how a context-search-result item is displayed */
.context-search-menu-panel .menu-group.search-list-items .menu-item.list-item { font-size: 17px; line-height: 16px; /* provide enough space for a search result item */ padding-top: 6px; padding-bottom: 7px; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.list-item div.title { color: #fff; font-size: 17px; padding-bottom: 5px  }
.context-search-menu-panel .menu-group.search-list-items .menu-item.list-item div { color: #333; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
/* defines how a context-search-result item is displayed when hovered */
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-hover { border: solid 1px #fff; color: #fff; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-hover div.title { color: #fff; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-hover div { color: #fff; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-pressed { color: #BFE4EE; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-pressed div.title { color: #BFE4EE; }
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-pressed div { color: #BFE4EE; }
/* defines how the label of a context-search-result item is displayed */
.context-search-menu-panel .menu-group.search-list-items .menu-item .label { padding-right: 10px; } 
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-hover .label { color: #fff; } 
.context-search-menu-panel .menu-group.search-list-items .menu-item.menu-item-pressed .label { color: #BFE4EE; } 
/* defines how information elements in the context search menu are displayed */
.context-search-menu-panel .menu-group.search-actions .menu-item-hover { color: #fff }

/* layout for search suggestions */
.menu-item.search-suggestions { white-space: normal; padding-left: 0px; color: #000; }
.menu-item.search-suggestions.menu-item-pressed {background-color: #fff ;  }
.menu-item.search-suggestions b { font-weight: normal; padding-left: 5px; display: block; font-size: 17px; padding-bottom: 5px; }
.menu-item.search-suggestions div { padding-left: 5px; }
.menu-item.search-suggestions span.suggestion { padding-right: 5px; padding-left: 5px; border: solid 1px #fff; }
.menu-item.search-suggestions span.suggestion span { font-size: 15px; color: #fff; text-decoration: none;}
.menu-item.search-suggestions span.active-suggestion { color: #fff; background-color: #fff; border: solid 1px #fff; }
.menu-item.search-suggestions span.active-suggestion span { color: #fff; }


/* Standard dialog boxes
   ***************************************************** */
.dialog-aboutbox.dialog-panel-content { background-color: #fff; background-image: url(Images/studioiconlargewhite.png); background-repeat: no-repeat; color: #fff; border: 0px none }
.dialog-panel .dialog-aboutbox .dialog-body { min-width: 620px; min-height: 300px; padding: 0; margin: 0; }
.dialog-panel .dialog-aboutbox .about-header { padding: 0px 40px 0px 0px; height: 98px; }
.dialog-panel .dialog-aboutbox .about-header .logo { background-image: url(Images/logo.png); float: right; margin-top: 50px; width: 89px; height: 24px; }
.dialog-panel .dialog-aboutbox .about-header .studio-name { font-size: 32px; padding-left: 128px; padding-top: 33px; }
.dialog-panel .dialog-aboutbox .about-body { padding: 0px 50px 20px 128px; }
.dialog-panel .dialog-aboutbox .about-body DIV { line-height: 20px; }
.dialog-panel .dialog-aboutbox .about-body .label { padding-right: 10px; color: #fff; }
.dialog-panel .dialog-aboutbox .about-footer { text-align: right; position: absolute; left: 0; right: 0; bottom: 0; height: 25px; padding: 30px 40px; }
.dialog-panel .dialog-aboutbox .about-footer .button { background-color: #fff; color: #fff; }
.dialog-panel .dialog-aboutbox .about-footer .button:hover { background-color: #fff;}
.dialog-panel .dialog-aboutbox .about-footer .button:active { background-color: #fff; box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25); }
.dialog-panel .dialog-aboutbox .about-footer .vendor { float: left; padding-top: 5px; }
.dialog-panel .dialog-aboutbox .about-footer .vendor a { float: left; padding-top: 5px; color: #fff; }
.dialog-panel .dialog-aboutbox .about-footer .runtime-admin { float: left; padding-top: 5px; padding-left: 20px; }
.dialog-panel .dialog-aboutbox .about-footer .runtime-admin a { float: left; padding-top: 5px; color: #fff; }

.dialog-panel .dialog-supportrequest .dialog-header { color: #78BE20; } 
.dialog-panel .dialog-supportrequest .dialog-body { min-width: 440px; max-width: 440px; width: 440px; min-height: 200px; max-height: 200px; height: 200px; overflow: hidden !important; }
.dialog-panel .dialog-supportrequest .dialog-body table { line-height: 20px}
.dialog-panel .dialog-supportrequest .dialog-body table td { white-space: nowrap; padding-bottom: 10px; }
.dialog-panel .dialog-supportrequest .dialog-body table td.label { width: 100px; vertical-align: top }
.dialog-panel .dialog-supportrequest .dialog-body table td.page-name div { width: 334px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dialog-panel .dialog-supportrequest .dialog-body table td textarea { border: 1px solid #dbdddf; font-size: 15px; padding: 4px 6px; outline: none; margin: 0; width: 320px; height: 170px; max-width: 320px; max-height: 170px }
.dialog-panel .dialog-supportrequest .dialog-body table td textarea:focus { border: 1px solid #fff; }
.dialog-panel .dialog-supportrequest .dialog-footer .default-button { background-color: #78BE20; } 
.dialog-panel .dialog-supportrequest .dialog-footer .default-button:hover { background-color: #88CE30; } 


/* Page colors
   ***************************************************** */
body.blue-page { background-color: #f2f2f2; background-image: url(Images/Brands/login_bg.jpg); background-size: cover; background-repeat: no-repeat;}
body.blue-page .page-header { border-bottom: 6px solid #aaaaaa; color: #fff; background-color: #fff }
body.blue-page .page-title-subscript { color: #fff; }
body.blue-page.scrolled .page-header { border-bottom: 0px none; }

body.darkgray-page { background-color: #939598; }
body.darkgray-page .page-header { border-bottom: 1px solid #939598; color: #fff; background-color: #939598 }
body.darkgray-page.scrolled .page-header { border-bottom: 0px none; }
body.darkgray-page .page-title-subscript { color: #fff; }
body.darkgray-page #studioHeader { background-color: #939598; border-bottom: 1px solid #A4A6A8; }
body.darkgray-page .context-search { border-left: 1px solid #A4A6A8; border-right: 1px solid #A4A6A8; }
body.darkgray-page #studioHeader .menu-item.menu-dropdown-item { background-image: url(Images/studio-menu-sprite-gray.gif); }

body.lightgray-page { background-color: #e7e9eb; }
body.lightgray-page .page-header { border-bottom: 1px solid #e7e9eb; color: #434649; background-color: #e7e9eb;  }
body.lightgray-page.scrolled .page-header { border-bottom: 1px solid #c9c9c9 }
body.lightgray-page .page-bottom-panel { background-color: #e7e9eb; margin: 0px; padding: 10px 30px; }

body.white-page { background-color: #fff; }
body.white-page .page-header { border-bottom: 1px solid #fff; color: #434649; background-color: #fff;  }
body.white-page.scrolled .page-header { border-bottom: 1px solid #eee; }
body.white-page .page-header .page-title { color: #333; }
body.white-page .page-bottom-panel { background-color: #e7e9eb; margin: 0px; padding: 10px 30px; }

/* Studio upload progress bar
   ***************************************************** */
.upload-progressbar { border: 1px solid #e3e9ef; padding: 1px; }
.upload-progressbar .upload-progressbar-value {height: 1px; background-color: #369; overflow: hidden;}
