/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";

/*******************************
             Layout
*******************************/

html, body {
    min-width: 320px;
}

/* Main Layout */
#filelist,
#maineditor,
#sidedocs {
  position: absolute;
  bottom: 0rem;
}

#filelist, #maineditor, #sidedocs, #getting-started-btn {
    top:@mainMenuHeight;
}

.hideMenuBar #filelist,
    .hideMenuBar #maineditor,
    .hideMenuBar #sidedocs,
    .hideMenuBar #getting-started-btn {
    top: 0 !important;
}

.full-abs {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

/* Main Editor layout */
#maineditor {
    left: @simulatorWidth;
    right: 0;
    overflow: visible;
}

/* Editor tools */
@editorToolsHeight: 10rem;
@editorToolsCollapsedHeight: 4.7rem;
#editortools {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    height: @editorToolsCollapsedHeight;
    background-color: @editorToolsBackground;
}

#blocksArea, #monacoEditor, #pxtJsonEditor, #filelist {
    bottom: @editorToolsCollapsedHeight;
}

.hideEditorToolbar #blocksArea,
    .hideEditorToolbar #monacoEditor,
    .hideEditorToolbar #pxtJsonEditor,
    .hideEditorToolbar #filelist {
    bottom: 0rem !important;
}

/* File list / Simulator layout */
#simulator {
    height: 100%;
}
#filelist, #downloadArea {
    min-width: @simulatorWidth;
    max-width: @simulatorWidth;
    left: 0;
}

#filelist {
    padding: 1em 2em 1em 2em;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    background-color: @simulatorBackground;
}

#filelist .simtoolbar {
    -webkit-transition: opacity 0.2s; /* Safari */
    -moz-transition: opacity 0.2s; /* Mozilla */
    -webkit-transition-timing-function: linear; /* Mozilla */
    -o-transition: opacity 0.2s; /* Opera */
    transition: opacity 0.2s;
    transition-timing-function: linear;
}

#downloadArea {
    margin-top: 0 !important;
    padding-top: 0.7rem;
    background-color: @simulatorBackground;
}

.filemenu {
    direction:ltr;
}

#filelist .menu {
    width: 100%;
}

#filelist .nested.item {
    padding-left: 4rem;
}

#filelist .header {
    background: rgba(0,0,0,0.05);
}

#simulators {
    text-align: center;
}

/* Getting started button */
#getting-started-btn {
    display:none;
    z-index:9;
    position: absolute;
    right: 2rem;
}
#getting-started-btn:not(.sideDocs) {
    display: block;
}
.ui.button.getting-started-btn .ui.text {
    font-weight: 100 !important;
}

/* Cookie Message */
#cookiemsg {
   position: absolute;
   right: 2rem;
   bottom: 12rem;
   width: 18rem;
   text-align: left;
   z-index:1000;
}

#cookiemsg > a {
   color:white;
   text-decoration: underline;
}

.collapsedEditorTools #cookiemsg {
   bottom: 6rem;
}

/* Simulator */
div.simframe {
    border:none;
    margin:0 0 0.5rem 0;
    position: relative;
    background:transparent;
    width:100%;
    padding-bottom: 81.96%;
}

div.simframe > iframe {
    position:absolute;
    top:0; left: 0; width:100%; height:100%;
}

.simHeadless {
    height: 0 !important;
    width: 0 !important;
}

/* Menu */
#menubar .ui.menu .item.editor-menuitem {
    padding: 0;
}
#menubar .ui.menu .item.editor-menuitem:hover {
    background: none;
}
#menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
    background: fade(@black, 40%) !important;
    border: 3px solid fade(@black, 20%);
    border-radius: 2.5rem !important;
    position: relative;
}
#menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
    border-radius: 2.5rem !important;
    width: 140px;
    z-index: 2;
}
#menubar .ui.menu.fixed .ui.item.editor-menuitem .item.link:hover {
    background: none;
}
#menubar .ui.menu.fixed .ui.item.editor-menuitem .item:not(.active) {
    opacity: 0.6;
}
#menubar .ui.menu.inverted.fixed .ui.item.editor-menuitem .active.item {
    background: none;
    color: @mainMenuInvertedBackground !important;
}
.ui.item.editor-menuitem .item.toggle {
    z-index: 1 !important;
    margin: 1px;
    height: 46px;
    left: 0;
    position: absolute;
    opacity: 1 !important;
    background: none;
    margin: 0;
    -webkit-transition: margin-left .3s; /* Safari */
    -moz-transition: margin-left .3s; /* Mozilla */
    -webkit-transition-timing-function: ease-in; /* Mozilla */
    -o-transition: margin-left .3s; /* Opera */
    transition: margin-left .3s;
    transition-timing-function: ease-in;
}

.active.item.blocks-menuitem ~ .toggle {
    margin-left: 0 !important;
    box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
    background: @editorToggleColor !important;
}
.active.item.javascript-menuitem ~ .toggle {
    margin-left: 140px !important;
    box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
    background: @editorToggleColor !important;
}

/* Help card */
#helpcard {
    position: absolute;
    right: 7rem;
    bottom: 2.2rem;
    margin: 0;
    z-index: 5;
    font-size:0.8rem;
}

/* Project code cards */
.ui.cardimage {
    background-color: @secondaryColor;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 10rem;
    border-top-left-radius: @defaultBorderRadius;
    border-top-right-radius: @defaultBorderRadius;
}

/* Logo */
.ui.menu .ui.item.logo {
    font-size: 2.2rem;
    margin: 0;
    padding: 0rem !important;
}
.ui.item.logo .name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, inherit;
    color: #666666;
    padding: 0 0.3rem;
}
.ui.item.logo svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ui.item.logo img {
    max-height: 1.6rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.modal img.ui.logo {
    max-width: 10em;
    max-height: 3em;
    vertical-align: middle;
}

/* Sandbox */
.sandboxfooter {
    position:absolute;
    bottom:0rem;
    right:0rem;
    z-index:100;
    margin-bottom: 0.2rem !important;
}
.sandboxfooter .item{
    font-size: 0.8rem !important;
}

/* code card */

.ui.card .image pre {
    margin-left:0.5rem;
    margin-right:0.5rem;
    color: #000;
    font-size:0.7rem;
    white-space: pre-wrap;
    max-height: 10rem;
    overflow-y: hidden;
}

/* Popup message */
#msg {
    position: absolute;
    bottom: 5rem;
    left: 0;
    right: 0;
    text-align: center;
}

#msg > div {
    display: inline-block;
    z-index: 100;
}

#msg > div:empty {
   display: none;
}

/* Scrollbars */
/* OSX Lion+ hides scrollbars while not in use, this overrides that so it's obvious when a div can be scrolled */
::-webkit-scrollbar {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
    box-shadow: 0 0 1px #ccc;
    -webkit-box-shadow: 0 0 1px #ccc;
}

/* Button Colors */
.ui.button.editortools-btn {
    &:extend(.ui.grey.button all);
}
.ui.button.getting-started-btn {
    &:extend(.ui.green.button all);
}

/* Icon and text */
.ui.menu > .menu > .ui.item > .icon-and-text.icon {
    margin: 0em auto;
}
.ui.menu > .menu > .ui.item > .icon-and-text.icon ~ span.ui.text {
    margin-left: 0.6em;
}

/* Beta */
.ui.label.betalabel {
    padding: 0.3em;
}

/*******************************
             Docs
*******************************/

#docs {
    font-family: @docsPageFont !important;
}

#docs > h1,h2,h3,h4,h5,h6 {
    font-family: @docsHeaderFont !important;
}

#docs span.block {
    display:inline-block;
    vertical-align: middle;
}

/*******************************
        Projects Modal
*******************************/


.ui.modal.projectsdialog .ui.dividing.header, .ui.modal.projectsdialog .content > .header{
    font-weight: normal !important;
}

.ui.modal.projectsdialog .ui.secondary.inverted.pointing.menu {
    border: 0;
}

.ui.modal.projectsdialog .group {
    padding: 1rem;
}

.ui.modal.projectsdialog .group .cards .card .button.iconcontent {
    min-height: 4em;
}

.ui.modal.projectsdialog .labelsgroup {
    display: block;
    position: relative;
    min-height: 18em;
}

.ui.modal.projectsdialog h2.editorname {
    top: 20%;
    width: calc(100% - 2rem);
    text-align: center;
    position: absolute;
    display: block;
}

.ui.modal.projectsdialog .loader.editoravatar {
    display: block;
    position: absolute;
    top: 50%;
}

.ui.modal.projectsdialog > .content {
    padding: 0 !important;
}

.ui.modal.projectsdialog .tabsegment {
    min-height: 450px;
    background: white !important;
}

/*******************************
        Monaco Editor
*******************************/

.monaco-editor .monaco-scrollable-element.editor-scrollable {
    margin-left: .5rem;
}

/* Monaco Editor Line number colors, changed from the default light theme */
.monaco-editor.vs .line-numbers {
    color: #2c3e50 !important;
}

/* Monaco Editor Line number background, changed from the default light theme */
.monaco-editor.vs .margin-view-overlays.monaco-editor-background {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Monaco Editor Current line highlighting, only needed for the light theme */
.monaco-editor.vs .current-line {
	background: rgba(0, 0, 255, 0.1) !important;
}

/* Monaco Editor Suggest Widget, styling */
.monaco-editor .suggest-widget {
    border-radius:5px;
}
.monaco-list-row.focused {
    background-color:#0078D7 !important;
    color: #fff !important;
}
.monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
    color: #0078D7 !important;
}
.monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
    color: #fff !important;
}
.monaco-editor.vs .suggest-widget .details > .monaco-scrollable-element > .body > .type, .monaco-editor .suggest-widget .monaco-list .monaco-list-row .type-label {
    color: #FFB900 !important;
}

/* Monaco Editor Main tokens */
.monaco-editor .highlight-statement {
    background-color: #FF8B27;
}

/* Monaco Toolbox */
.monacoFlyout {
    font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
    background: @monacoFlyoutColor;
    overflow-x: visible;
    overflow-y: auto;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.monacoFlyout > div {
    margin: 1rem;
}

.monacoFlyoutLabel {
    vertical-align: middle;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    color: white;
    font-size: 15px;
}

.monacoFlyoutHeading {
    padding-bottom: 0.4rem;
}
.monacoFlyoutHeading .monacoFlyoutHeadingText {
    color: white;
}
.monacoFlyoutHeadingIcon {
    vertical-align: middle !important;
    font-size: 1.5rem !important;
    margin: -0.7em 0.2em 0em 0.5em !important;
}
.monacoFlyoutLabelLine {
    border: none;
    border-top: 1px dotted white;
    height:1px;
}

.monacoDraggableBlock {
    color: @white;
    padding: 0.6rem;
    border-radius: 8px;
    border: solid 3px @white;
    cursor: pointer;
    display: inline-block;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.monacoDraggableBlock span.sig {
    opacity: 0.7;
}

.monacoDraggableBlock span.docs {
    display: block; /* enable as needed */
    color: @white;
    font-size:70%;
    max-width: 22rem;
}

.monacoDraggableBlock:hover {
    border: solid 3px #fc3 !important;
}

/******************************
Avatar
******************************/

.avatar {
    position: relative;
}

#docs .avatar .message {
    margin-left: 4em;
    margin-bottom: 1em;
}
#docs code.lang-typescript {
    overflow-wrap: break-word;
}

@media only screen {
    .avatar .avatar-image {
        position: absolute;
        left: 0;
        top: 1em;
        width: 3em;
        height: 3em;
        background-size: contain;
        background-image: @avatarUrl;
    }
}

@media only print {
    .avatar .avatar-image {
        display: list-item;
        list-style-image: @avatarUrl;
        list-style-position: inside;
    }
}

.avatar .message:after {
    top: 1.1em;
    left: -1em;
    bottom: auto;
    border-width: 0px 1em 0.7em 0;
    border-color: rgba(0, 0, 0, 0) #EEE;
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

/* Modulator */

#modulatorWrapper, #modulatorAudioOutput {
    display: none;
}

/*******************************
Field editors
*******************************/

.hidden {
    display: none !important;
}

/*******************************
        Social Buttons
*******************************/

.social-icons a.facebook {
    color: white;
    background-color: #3b5998;
}
.social-icons a.twitter {
    color: white;
    background-color: #00aced;
}

/*******************************
        Layout Variables
*******************************/

.ui.widedesktop.only {
    display:none !important;
}
.ui.tablet.only {
    display:none !important;
}
.ui.mobile.only {
    display: none !important;
}

@media only screen and (min-width: @largeMonitorBreakpoint) and (min-height:30em) {
    .ui.widedesktop.only {
        display:inherit !important;
    }
    .ui.widedesktop.hide {
        display:none !important;
    }
}

/* smaller desktop screen */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 12/10) {
    .ui.desktop.only {
        display:none !important;
    }
}

/* thin desktop portrait mode */
@media only screen and (max-width: @largestTabletScreen), only screen and (max-aspect-ratio: 7/10) {
    .ui.landscape.only {
        display:none !important;
    }
}

@media only screen and (min-width: @computerBreakpoint) {
    .ui.portrait.only {
        display:none !important;
    }
}

/* Tablet only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    .ui.tablet.only {
        display:inherit !important;
    }
}

/* Mobile + Tablet */
@media only screen and (max-width: @largestTabletScreen) {
    .ui.portrait.only {
        display:inherit !important;
    }
    .ui.portrait.hide {
        display:none !important;
    }
}

/* Mobile only */
@media only screen and (max-width: @largestMobileScreen) {
    .ui.mobile.only {
        display:inherit !important;
    }
    .ui.mobile.hide {
        display:none !important;
    }
}

/* Scren heights */
@media only screen and (max-height: @tallEditorBreakpoint) {
    .ui.tall.only {
        display:none !important;
    }
}
@media only screen and (min-height: @thinEditorBreakpoint) {
    .ui.thin.only {
        display:none !important;
    }
}

/*******************************
        Media Adjustments
*******************************/

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
}

/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
}

/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
}

/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
@media only screen and (min-width: @computerBreakpoint) {
    .collapsedEditorTools #filelist {
        display: none;
    }
    .collapsedEditorTools #downloadArea {
        background: @editorToolsBackground;
    }
    .collapsedEditorTools #maineditor {
        left: 0;
    }
    #cookiemsg {
        bottom: 7.5rem;
    }

    /* Full screen */
    .fullscreensim #filelist {
        position: fixed;
        z-index:100;
        top:0;
        left:0;
        bottom:0;
        right:0;
        padding: 0;
        max-width: 100%;
        min-width: 100%;
        height:100%;
    }
    .fullscreensim #boardview {
        position: relative;
        height:100%;
        background-color: white;
        padding: @mainMenuHeight;
        padding-left: calc(2*@mainMenuHeight);
        padding-right: calc(2*@mainMenuHeight);

        background-color: @fullscreenBackgroundGradientStart;
        background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */
        background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* Standard syntax */
    }
    .fullscreensim #simulator .ui.item:not(.simtoolbar),
        .fullscreensim #simulator .ui.menu,
        .fullscreensim #menubar .ui.item:not(.logo),
        .fullscreensim #maineditor,
        .fullscreensim #editortools {
        display: none !important;
        z-index: -10;
    }
    .fullscreensim .sandboxfooter {
        z-index:100;
        bottom: 1rem;
    }
    .fullscreensim .ui.menu {
        background: transparent !important;
    }
    .fullscreensim #filelist .simtoolbar {
        position: fixed;
        bottom: 2rem;
        left:auto;
        right:auto;
    }
    .fullscreensim #simulators {
        position: relative;
        padding: 3rem;
        width: 100%;
        height: 100%;
    }
    .fullscreensim div.simframe {
        position:relative;
        width: 50%;
        height: 100%;
        float: left;
        padding-bottom: 0 !important;
    }
    .fullscreensim div.simframe > iframe {
        position:relative;
        max-width: 90%;
    }
    .fullscreensim div.simframe:only-child {
        width: 100%;
    }
    .fullscreensim div.simframe:only-child > iframe {
        max-width: 100%;
    }
}

/* <= Small Monitor (Mobile + Tablet + Small Monitor) */
@media only screen and (max-width: @largestSmallMonitor) {
    /* Layout */
    #filelist, #downloadArea {
        min-width:@simulatorWidthSmall;
        max-width:@simulatorWidthSmall;
    }
    #maineditor {
        left:@simulatorWidthSmall;
    }
    /* Logo */
    #logo .name {
        display: none !important;
    }
    /* Help card */
    #helpcard {
        top: auto;
        bottom: 2.2rem;
        margin: 0;
    }
}

/* <= Tablet (Mobile + Tablet) */
@media only screen and (max-width: @largestTabletScreen) {
    /* Logo */
    #logo, #organization {
        font-size: 0rem;
        padding-right: 0;
    }
    /* Help card */
    #helpcard {
        top: auto;
        bottom: 2rem;
        margin: 0;
    }
    /* Layout */
    #filelist {
        position:absolute;
        padding: 0;
        margin: 1em;
        z-index: 15;
        bottom:0rem !important;
        left:4rem !important;
        top:auto;
        width:auto;
        min-width: inherit;
        max-width: inherit;
        background: transparent !important;
    }
    #maineditor {
        left: 0;
        right:0;
    }
    #maineditor:not(.sandbox) {
        bottom: 0rem;
    }
    #editortools {
        height: 10rem;
    }
    #blocksArea, #monacoEditor, #pxtJsonEditor, #msg {
        bottom: 10rem;
    }
    #tutorialcard.bottom {
        bottom: 11rem;
    }
    .hideEditorFloats #editortools {
        height: @editorToolsCollapsedHeight;
    }
    .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor, .hideEditorFloats #msg {
        bottom: @editorToolsCollapsedHeight;
    }
    .hideEditorFloats #tutorialcard.bottom {
        bottom: @editorToolsCollapsedHeight;
    }
    /* Simulator */
    div.simframe {
        display:inline-block;
        width: 10rem;
        margin-right:0.5rem;
        padding-bottom: 81.96% !important;
    }
    div.simframe:not(:first-child) {
        display:none !important;
    }
    /* Hide floating editors */
    .hideEditorFloats .editorFloat {
        display:none;
    }
    #downloadArea {
        display: none;
    }
    /* Menu spacing */
    #root:not(.sandbox) #menubar .ui.menu .item {
        padding: 0.3em !important;
    }
    #root #menubar .ui.menu .item.editor-menuitem .item {
        padding: 0.7em !important;
    }
    #root #menubar .ui.menu.fixed .ui.item.editor-menuitem .item {
        width: 40px;
        height: 38px;
    }
    .active.item.javascript-menuitem ~ .toggle {
        margin-left: 40px !important;
    }
    /* Top Menu */
    #maineditor {
        top: @mobileMenuHeight;
    }
    .hideMenuBar #maineditor {
        top: 0;
    }
    .sandbox #maineditor {
        top: @sandboxMobileMenuHeight;
    }

    /* Logo */
    .ui.item.logo img {
        max-height: 2.5rem;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }
    .ui.mini.image {
        display: block !important;
    }
}

/* Custom width treshold to force vertical stacking on the start page */
@media only screen and (max-width: 1095px) {
    .ui.modal.projectsdialog h2.editorname {
        top: 5%;
    }

    .ui.modal.projectsdialog .loader.editoravatar {
        top: 60%;
    }
}

/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    .hideEditorFloats #editortools {
        height: @editorToolsCollapsedHeight;
    }
    .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor {
        bottom: @editorToolsCollapsedHeight;
    }

    .ui.modal.projectsdialog h2.editorname {
        font-size: 1.2rem;
    }
}

/* Mobile, Tablet AND thin screen */
@media only screen and (max-width: @largestTabletScreen) and (max-height: @thinEditorBreakpoint) {
    /* Mobile embedded view */
    .sandbox #simulators{
        display: none;
    }
    .sandbox #maineditor {
        overflow: hidden;
    }
    .sandbox #blocksArea,
        .sandbox #monacoEditor,
        .sandbox #pxtJsonEditor,
        .sandbox #editortools,
        .sandbox #msg {
        bottom: 1.5rem !important;
    }
    .sandbox #cookiemsg {
        bottom: 3rem;
    }
    .sandbox #editortools {
        display: none;
    }
    .simView #simulators {
        display: inherit;
    }
    .simView #filelist {
        position: fixed;
        z-index:100;
        top:0 !important;
        left:0 !important;
        bottom:0 !important;
        right:0 !important;
        padding: 0;
        margin: 0;
        max-width: 100%;
        min-width: 100%;
        height:100%;
    }
    .simView #boardview {
        position: relative;
        height:100%;
        background-color: white;
        padding-top: @sandboxMobileMenuHeight;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2em;

        background-color: @fullscreenBackgroundGradientStart;
        background: @fullscreenBackgroundGradientStart; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* For Firefox 3.6 to 15 */
        background: linear-gradient(@fullscreenBackgroundGradientStart 50%, @fullscreenBackgroundGradientEnd); /* Standard syntax */
    }
    .simView #simulator .ui.item,
        .simView #maineditor {
        display: none !important;
        z-index: -10;
    }
    .sandboxfooter {
        left: 0.5em !important;
        right: 0.5em !important;
        margin: 0rem !important;
        right: auto;
        text-align: center;
    }
    .sandboxfooter .item{
        font-size: 0.7rem !important;
    }
    .simView .sandboxfooter {
        z-index:100;
    }
    .simView .ui.menu {
        background: transparent !important;
    }
    .simView #simulators {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .simView div.simframe {
        position:relative;
        width: 50%;
        height: 100%;
        float: left;
        padding-bottom: 0 !important;
    }
    .simView div.simframe > iframe {
        position:relative;
        max-width: 90%;
    }
    .simView div.simframe:only-child {
        width: 100%;
    }
    .simView div.simframe:only-child > iframe {
        max-width: 100%;
    }
    .sandbox #cookiemsg {
        left: 0;
        right: 0;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        width: inherit;
        bottom: 1.5rem;
        padding: 0.3rem;
    }
}

@media only screen and (max-height: @thinEditorBreakpoint) and (max-width: @computerBreakpoint){
    /* sim-menuitem visible in this view (in sandbox mode), adjust toggle margins */
    #root.sandbox .active.item.sim-menuitem ~ .toggle {
        margin-left: 0 !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    #root.sandbox .active.item.blocks-menuitem ~ .toggle {
        margin-left: 40px !important;
        box-shadow: 2px 0px 0px rgba(0,0,0,0.1), -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
    #root.sandbox .active.item.javascript-menuitem ~ .toggle {
        margin-left: 80px !important;
        box-shadow: -2px 0px 0px rgba(0,0,0,0.1) !important;
        background: @editorToggleColor !important;
    }
}
