/* Game Screen Container  ________________________________________________________________________________________*/
#gameScreenContainer {
  display: block;
}

#gameScreenContainer canvas {
  margin-left: auto;
  margin-right: auto;
}

[data-levelname='appMenu'] #gameScreenContainer,
[data-levelname='appSaveMenu'] #gameScreenContainer,
[data-levelname='appSaveTitle'] #gameScreenContainer {
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}

[data-levelname='appDetail'] #gameScreenContainer {
  width: 662px;
  height: 496.5px;
  margin-left: 180px;
  display: block;
  overflow: hidden;
  box-shadow: 4px 4px 9px -5px rgba(0, 0, 0, .8);
  background: #333;
}

@media screen and (orientation:portrait) {
  [data-levelname='appDetail'] #gameScreenContainer {
    margin-left: 54px;
  }
}

/* HIDE AND SHOW EDITOR & COVERS ________________________________________________________________________________________*/

#noEditorCover {
  width: 100%;
  height: 448px;
  background-color: rgba(136,136,136,0.3);
}

#noEditorCover img {
  margin-left: 50%;
  width: 50%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  opacity: 0.6;
}

#noEditorCover {
  display: none;
}

@media screen and (orientation:portrait) {
  [data-levelname='mainMenu'] #noEditorCover,
  [data-levelname='appTemplateMenu'] #noEditorCover,
  [data-levelname='levelComplete'] #noEditorCover {
    display: block;  /* Show Coding Studio logo */
  }
}

@media screen and (orientation:landscape) {
  #editorElement {
    display: none;
  }
}

/* NB: we need to keep the showing/hiding of editorElement and blocklyToolboxDiv in sync */
[data-levelname='mainMenu'] #editorElement,         [data-levelname='mainMenu'] .blocklyToolboxDiv,
[data-levelname='levelComplete'] #editorElement,    [data-levelname='levelComplete'] .blocklyToolboxDiv,
[data-levelname='appSaveMenu'] #editorElement,      [data-levelname='appSaveMenu'] .blocklyToolboxDiv,
[data-levelname='appSaveTitle'] #editorElement,      [data-levelname='appSaveTitle'] .blocklyToolboxDiv,
[data-levelname='appTemplateMenu'] #editorElement,  [data-levelname='appTemplateMenu'] .blocklyToolboxDiv,
[data-levelname='appDetail'] #editorElement,        [data-levelname='appDetail'] .blocklyToolboxDiv,
[data-levelname='appMenu'] #editorElement,          [data-levelname='appMenu'] .blocklyToolboxDiv
{
  display: none;
}

#editorElement {
  width: 100%;
  background: #ccc;
}

/* Read only and No Device Covers and Header for editor element */

#readOnlyCover, #noDeviceCover {
  position: absolute;
  top: 40px;
  left: 0px;
  height: 408px; /* EDITOR_HEIGHT_PX */
  width: 100%;
  opacity: .6;
  background: white;
  z-index: 11;
}

[data-levelname='app'] #readOnlyCover,
[data-levelname='app'] #noDeviceCover {
  height: 372px; /* EDITOR_HEIGHT_PX */
}

#noDeviceCover {
  visibility: visible;
  opacity: 1;
}

.app-preview #noDeviceCover,
.showing-device #noDeviceCover {
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
}

#readOnlyCover {
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
}

/* #readOnlyCover = DIV that blocks mouse events from getting to Blockly */
.not-editable #readOnlyCover {
  opacity: .6;
  visibility: hidden;
}

#editorElement.app-preview #editor-toolbar,
#editorElement.app-preview #editor__back-button,
#editorElement.app-preview #blocklyContainer {
  visibility: hidden;
}

#editorElement.app-preview #readOnlyCover {
  background: #000;
  visibility: visible;
  opacity: 1;
}

.not-editable.banner-generic .editor__title,
.not-editable.banner-player-nearby .editor__title {
  display: none;
}

[data-levelname='app'] .not-editable.banner-generic .editor__title,
[data-levelname='app'] .showing-device.not-editable.banner-generic .editor__title,
.showing-device.not-editable.banner-generic .editor__title,
.showing-device.not-editable.banner-player-nearby .editor__title {
  background-image: url('art/blockly_editor/editor__title--states.png');
  background-size: 32px;
  padding-left: 34px;
  background-repeat: no-repeat;
  display: inline-block;
}

/* program not editable - in game */
.showing-device.not-editable.banner-generic .editor__header {
  background-color: #ccc;
}

.showing-device.not-editable.banner-generic .editor__title {
  background-position: 0px 8px;
}

/* program running in workshop editor */
[data-levelname='app'] .showing-device.not-editable.banner-generic .editor__header {
  background-color: #87bf19;
}

[data-levelname='app'] .showing-device.not-editable.banner-generic .editor__title {
  background-position: 0px -33px;
}

/* moose detected in game */
.not-editable.banner-player-nearby .editor__header {
  background-color: #fbb03b;
}

.not-editable.banner-player-nearby .editor__title {
  background-position: 0px -74px;
}

/* BLOCKLY EDITOR SYTLES ________________________________________________________________________________________*/

#blocklyContainer {
  width: 100%;
  height: 408px; /* EDITOR_HEIGHT_PX */
  -webkit-filter: none;
  visibility: visible;
  background-color: #fff;
}

[data-levelname='app'] #blocklyContainer {
  height: 372px; /* EDITOR_HEIGHT_PX LESS editor__interaction-toolbar HEIGHT */
}

.not-editable #blocklyContainer {
  -webkit-filter: grayscale(50%);
  pointer-events: none;
}

.blocklyTreeRoot {
  width: 28px;
  height: 372px;
  overflow: hidden;
  padding: 0  !important;
  background-color: #f2f2f2;
}

.blocklyFlyoutBackground {
  fill: #f2f2f2 !important;
  stroke: #f2f2f2;
}

.blocklyText {
  font-family: Breg !important;
}

div.blocklyToolboxDiv {
  z-index: 10;  /* fix: toolbox below workspace */
  background-color: #fff;
}

div.blocklyTreeRow {
  height: 42px;
  background-repeat: space;
}

div[role=treeitem] .blocklyTreeRow {
  border-left: 16px solid #f89f1b;
}

.blocklyTreeRow:hover {
  background-color: #f2f2f2 !important;
}

div[role=treeitem]:nth-child(1) .blocklyTreeRow {
  border-left-color: #f89f1b;
}
div[role=treeitem]:nth-child(1) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #f89f1b !important;
}

div[role=treeitem]:nth-child(2) .blocklyTreeRow {
  border-left-color: #aa4a9b;
}
div[role=treeitem]:nth-child(2) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #aa4a9b !important;
}

div[role=treeitem]:nth-child(3) .blocklyTreeRow {
  border-left-color: #602d90;
}
div[role=treeitem]:nth-child(3) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #602d90 !important;
}

div[role=treeitem]:nth-child(4) .blocklyTreeRow {
  border-left-color: #00adee;
}
div[role=treeitem]:nth-child(4) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #00adee !important;
}

div[role=treeitem]:nth-child(5) .blocklyTreeRow {
  border-left-color: #eb008b;
}
div[role=treeitem]:nth-child(5) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #eb008b !important;
}

div[role=treeitem]:nth-child(6) .blocklyTreeRow {
  border-left-color: #b2d235;
}
div[role=treeitem]:nth-child(6) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #b2d235 !important;
}

div[role=treeitem]:nth-child(7) .blocklyTreeRow {
  border-left-color: #00a9ac;
}
div[role=treeitem]:nth-child(7) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #00a9ac !important;
}

div[role=treeitem]:nth-child(8) .blocklyTreeRow {
  border-left-color: #a0a5af;
}
div[role=treeitem]:nth-child(8) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #a0a5af !important;
}

div[role=treeitem]:nth-child(9) .blocklyTreeRow {
  border-left-color: #7a7d82;
}
div[role=treeitem]:nth-child(9) .blocklyTreeRow.blocklyTreeSelected {
  background-color: #7a7d82 !important;
}

.blocklyTreeLabel {
  display: none;
  /*color: #999;
  text-transform: uppercase;
  font-family: BBold !important;
  font-size: 12px !important;
  padding: 0 !important;
  position: relative;
  top: 14px;*/
}

.blocklyTreeRoot .blocklyTreeSelected {
  /*color: white;*/
}

/* Editor Action Buttons ___________________________________________*/
[data-levelname=appMenu] #editor__focus-buttons {
  visibility: hidden;
}

[data-levelname=app] #editor__focus-buttons {
  visibility: visible;
}

.editor__header {
  background: #333;
  color: white;
  text-align: center;
  height: 40px;
  box-sizing: border-box;
  padding: 4px;
}

.editor__title {
  font-family: Bbold;
  text-transform: uppercase;
  padding-top: 10px;
  font-size: 18px;
}

.editor__interaction-toolbar {
  width: 80px;
  position: absolute;
  top: 55px;
  right: 16px;
  text-align: center;
  z-index: 11;
}

.editor__focus-buttons--prev,
.editor__focus-buttons--next {
  background: #87bf19;
  border-radius: 12px;
  cursor: pointer;
  font-size: 32px;
  line-height: 32px;
  cursor: pointer;
  color: white;
  width: 48%;
  padding: 0 0 4px 0;
  margin: 0;
  margin-bottom: 24px;
  float: left;
  background-image: url('art/workshop/editor-sprite.png');
  background-size: 1085px 74px; /*50% sprite size*/
  background-position: -810px 6px;
  text-indent: -2000px;
}

.editor__focus-buttons--prev {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 1px;
}

.editor__focus-buttons--next {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-right: 1px;
  background-position: -453px 6px;
}

.editor__focus-buttons--prev:active,
.editor__focus-buttons--next:active {
  opacity: .8;
}

.editor__focus-buttons--prev:disabled,
.editor__focus-buttons--next:disabled {
  background-color: #999;
}

@-moz-keyframes spin {
  100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}

.editor__debug,
.editor__play,
.editor__focus-buttons {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.editor__debug,
.editor__play {
  display: none;
}

/* only show play and debug in editor */
[data-levelname=app] .editor__debug,
[data-levelname=app] .editor__play {
  display: block;
}

.editor__debug,
.editor__play {
  height: 0;
  padding-top: 53px;
  width: 53px;
  background: transparent;
  margin-bottom: 16px;
  color: white;
  background-image: url('art/workshop/editor-sprite.png');
  background-size: 1085px 74px; /*50% sprite size*/
  background-position: -140px -2px;
  overflow: hidden;
}

.editor__debug.app-running,
.editor__play.app-running {
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

.editor__debug.app-running {
  background-position: -200px -2px;
}

.editor__debug:disabled {
  background-position: -79px -2px;
  background-color: transparent;
}

.editor__play {
  width: 50px;
  padding-top: 50px;
  background-position: 385px -3px;
}

.editor__play.app-running {
  background-position: 325px -1px;
}

.editor__play:disabled {
  background-position: 445px -3px;
  background-color: transparent;
}

.editor-toolbar {
  background: #e6e6e6;
  height: 37px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100vw;
}

.editor-toolbar__background-category-list {
  margin-top: 1px;
}

.editor-toolbar__sprite-category-list,
.editor-toolbar__background-category-list {
  display: inline-block;
  border-right: 2px solid #fff;
}

.editor-toolbar__toolbar-control,
.editor-toolbar__sprite-category-list li,
.editor-toolbar__background-category-list li {
  display: inline-block;
  width: 34px;
  height: 34px;
	-webkit-border-radius: 34px;
	border-radius: 34px;
  margin-right: 16px;
  margin-top: 1px;
  overflow: hidden;
  background-image: url('art/workshop/editor-sprite.png');
  background-size: 1085px 74px; /*50% sprite size*/
  background-position: -140px -2px;
  background-repeat: no-repeat;
  text-indent: -2000px;
}

.editor-toolbar__sprite-category-list li:first-child,
.editor-toolbar__background-category-list li:first-child {
  margin-left: 16px;
}

.editor-toolbar__background-category-list li.editor-toolbar__background-category-camera {
  background-position: -39px 0px;
}

.editor-toolbar__background-category-list li.editor-toolbar__background-category-illustrated {
  background-position: 0px 0px;
}

.editor__debug.app-running {
  background-position: -200px -1px;
}

.editor-toolbar__background-category-list li.editor-toolbar__background-category-grid-switch { 
  background-color:transparent;
}

/*unselected*/
.editor-toolbar__background-category-list li.editor-toolbar__background-category-grid-switch.unselected {
  background-position: -1053px 0px;
} 

/*selected*/
.editor-toolbar__background-category-list li.editor-toolbar__background-category-grid-switch.selected { 
  background-position: -1012.4px 0px;
}

.editor-toolbar__toolbar-control {
  -moz-transition:0.5s all;
  -webkit-transition:0.5s all;
  transition:0.5s all;
  background-position: -287px 0px;
  float: right;
}

.closed .editor-toolbar__toolbar-control {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

.editor-toolbar__sprite-category-list li {
  background-image: url('art/workshop/device-categories-sprite--2px.png');
  background-size: 275px 30px; /*50% sprite size*/
  background-position: 1px 2px;
  opacity: .6;
}

.editor-toolbar__sprite-category[data-category="food"] {
  background-position: -33px 2px;
}

.editor-toolbar__sprite-category[data-category="space"]{
  background-position: -68px 2px;
}

.editor-toolbar__sprite-category[data-category="shapes"] {
  background-position: -103px 2px;
}

.editor-toolbar__sprite-category[data-category="sports"] {
  background-position: -137px 3px;
}

.editor-toolbar__sprite-category[data-category="animals"] {
  background-position: -173px 3px;
}

.editor-toolbar__sprite-category[data-category="people"] {
  background-position: -207px 3px;
}

.editor-toolbar__sprite-category[data-category="og"] {
  background-position: -243px 3px;
}

.editor-toolbar__sprite-category-list li.editor-toolbar__sprite-category--camera {
  background-image: url('art/workshop/editor-sprite.png');
  background-size: 1085px 74px; /*50% sprite size*/
  background-position: -253px 6px;
}

.editor-toolbar__toolbar-control:active,
.editor-toolbar__background-category-list li:active,
.editor-toolbar__sprite-category-list li:active,
.editor-toolbar__sprite-category-list li.selected {
  background-color: #ccc;
  opacity: 1;
}

.editor-toolbar__background-category-list li {
  background-color: #000;
}

/* Backgrounds Modal ___________________________________________*/

#app-editor__backgrounds,
#modal-overlay {
  display: none;
}

.app-editor__backgrounds {
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  display: block;
  position: absolute;
  width: 100vw;
}

.app-editor__backgrounds-list {
  width: 4000px;
  padding-left: 40px;
}

.app-editor__backgrounds-list li {
  display: inline-block;
  margin: 10px;
}

.app-editor__backgrounds-list li img {
  width: 234px;
  border: 1px solid black;
}

/* Devices Palette ___________________________________________*/
#sprite-palettes__container {
  background-color: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(0, 0, 0, .8);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 124px;
}

.closed #sprite-palettes__container {
  height: 0px;
  border: none;
}

#sprite-palettes {
  display: block;
  position: absolute;
  width: 100vw;
  bottom: 36px;
  z-index: 11;
}


[data-levelname=appMenu] #sprite-palettes {
  display: none;
}

.sprite-palettes__sprite-list {
  width: 100%;
  white-space: nowrap;
  display: block;
  height: 124px;
}

.sprite-palettes__sprite-list .sprite, .sprite-palettes__sprite-list .button {
  display: inline-block;
  margin: 10px;
}

.sprite-palettes__sprite-list .sprite img, .sprite-palettes__sprite-list .button img {
  height: 100px;
}

/* Photos __________________________*/
[data-levelname='mainMenu'] #photoControlPanel,
[data-levelname='levelComplete'] #photoControlPanel,
[data-levelname='appSaveMenu'] #photoControlPanel,
[data-levelname='appSaveTitle'] #photoControlPanel,
[data-levelname='appTemplateMenu'] #photoControlPanel,
[data-levelname='appDetail'] #photoControlPanel,
[data-levelname='appMenu'] #photoControlPanel, {
  display: none;
}

/* camera grabs css based on class and inlines it */
#photoControlPanel.photoSprite {
  display: block;
  position: absolute;
  bottom: 230px;
  width: 562px;
  height: 644px;
  background: #000;
  border-top-right-radius: 60px;
  border-top-left-radius: 60px;
  z-index: 11;
  right: 104px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 10px;
}

#photoControlPanel.photoBackground {
  display: block;
  position: absolute;
  right: 0px;
  bottom: 184px;
  width: 100vw;
  height: 720px;
  background: #000;
  border-top-right-radius: 60px;
  border-top-left-radius: 60px;
  z-index: 11;
  text-align: center;
  box-sizing: border-box;
  padding-top: 10px;
}

#photoControlPanel.photoSprite #flipBtn,
#photoControlPanel.photoSprite #takePhotoBtn,
#photoControlPanel.photoBackground #takePhotoBtn,
#photoControlPanel.photoBackground #flipBtn {
  padding-top: 46px;
  width: 60px;
  background: transparent;
  margin-bottom: 16px;
  color: white;
  background-image: url('art/workshop/editor-sprite.png');
  background-size: 1085px 74px;
  background-position: 437px -10px;
  height: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#photoControlPanel.photoSprite #flipBtn:active,
#photoControlPanel.photoBackground #flipBtn:active,
#photoControlPanel.photoSprite #takePhotoBtn:focus,
#photoControlPanel.photoBackground #takePhotoBtn:focus {
  opacity: .8;
}

#photoControlPanel.photoSprite #flipBtn,
#photoControlPanel.photoBackground #flipBtn {
  position: absolute;
  top: 20px;
  left: 40px;
}

#photoControlPanel.photoSprite #takePhotoBtn,
#photoControlPanel.photoBackground #takePhotoBtn {
  padding-top: 75px;
  padding-bottom: 12px;
  width: 80px;
  background-position: -485px -1px;
  height: 0;
  overflow: visible;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
}

#photoControlPanel.photoSprite .close-button,
#photoControlPanel.photoBackground .close-button {
  position: absolute;
  right: 32px;
  top: 20px;
  background-color: transparent;
}

/* Workshop UI Container ________________________________________________________*/
#dialog-overlay,
#dialog__secondary-button,
#apps-list-share-prompt,
#workshop__app-menu,
#editor-toolbar,
#workshop__back-button,
#app-menu__create-button,
#workshop-masthead,
#app-menu--shared,
#app-detail__title-toolbar,
#app-detail__done-button,
#app-detail__interaction-toolbar,
#app-detail__manage-app-toolbar,
#app-detail__edit-icon-button {
  display: none;
}

/* hide sprite toolbar on rotation */
@media screen and (orientation:landscape) {
  [data-levelname='app'] #editor-toolbar, [data-levelname='app'] #sprite-palettes {
    display: none;
  }
}

@media screen and (orientation:landscape) {
  #workshop-ui-container {
    height: 768px;
  }
}

@media screen and (orientation:portrait) {
  #workshop-ui-container {
    height: 576px; /* = 1024 - height of #noEditorCover */
  }
}

#workshop-ui-container {
  color: white;
}

[data-levelname='appMenu'] #workshop-ui-container,
[data-levelname='appSaveMenu'] #workshop-ui-container,
[data-levelname='appSaveTitle'] #workshop-ui-container,
[data-levelname='appDetail'] #workshop-ui-container {
  background: url(art/workshop/landing-workshop-bg_2x.png);
  background-size: 100%;
  position: relative;
  height: 100vh;
}

@media screen and (orientation:portrait) {
  [data-levelname='appMenu'] #workshop-ui-container,
  [data-levelname='appSaveMenu'] #workshop-ui-container,
  [data-levelname='appSaveTitle'] #workshop-ui-container,
  [data-levelname='appDetail'] #workshop-ui-container {
    background-repeat: repeat-y;
  }
}

[data-levelname='appDetail'] #app-detail__title-toolbar,
[data-levelname='appDetail'] #app-detail__interaction-toolbar,
[data-levelname='appMenu'] #workshop-ui-container,
[data-levelname='appDetail'] #workshop-ui-container,
[data-levelname='appSaveMenu'] #workshop-ui-container,
[data-levelname='appSaveTitle'] #workshop-ui-container,
[data-levelname='appSaveMenu'] #workshop__back-button,
[data-levelname='appMenu'] #workshop__back-button,
[data-levelname='appDetail'] #workshop__back-button,
[data-levelname='appMenu'] #app-menu__title,
[data-levelname='appMenu'] #app-menu__sub-title,
[data-levelname='appMenu'] #app-menu__create-button,
[data-levelname='appMenu'] #workshop__app-menu,
[data-levelname='appMenu'] #app-menu--shared,
[data-levelname='appSaveMenu'] #workshop-masthead,
[data-levelname='appSaveTitle'] #workshop-masthead,
[data-levelname='appSaveTitle'] #app-detail__edit-icon-button,
[data-levelname='appSaveTitle'] #app-detail__title-toolbar,
[data-levelname='appSaveTitle'] #app-detail__done-button,
[data-levelname='appSaveMenu'] #workshop__app-menu {
  display: block;
}

[data-levelname='appMenu'] #workshop-ui-container,
[data-levelname='appSaveMenu'] #workshop-ui-container,
[data-levelname='appSaveTitle'] #workshop-ui-container {
  padding-top: 10px;
  box-sizing: border-box;
}

[data-levelname='appSaveMenu'] #workshop-ui-container h2,
[data-levelname='appSaveTitle'] #workshop-ui-container h2 {
  margin-bottom: 30px;
}

[data-levelname='appSaveMenu'] #app-menu__title,
[data-levelname='appSaveMenu'] #app-menu__sub-title {
  display: none;
}

/* wokshop back __________*/
.editor__back-button,
.workshop__back-button {
  background: url(art/workshop/back.png);
  width: 100px;
  padding-top: 50px;
  height: 0;
  overflow: hidden;
  background-size: 88%;
  background-repeat: no-repeat;
  position: absolute;
  left: 20px;
  top: 26px;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.workshop__back-button:focus,
.workshop__back-button:active {
  background-image: url(art/workshop/back__active.png);
}

.editor__back-button {
  left: 17px;
  background: url(art/workshop/editor-sprite.png);
  width: 61px;
  padding-top: 38px;
  background-size: 1085px 74px;
  background-position: -366px 5px;
  top: 0;
  display: none;
}

/* only show back button in app editor */
[data-levelname='app'] .editor__back-button {
  display: block;
}

.editor__back-button:focus,
.editor__back-button:active {
  opacity: .8;
}

.editor__back-button.disabled {
  pointer-events: none;
  opacity: .3;
}

/* wokshop masthead __________*/
#workshop-ui-container h1 {
  font-size: 50px;
  line-height: 56px;
  font-family: BBold;
  text-transform: uppercase;
  text-align: center;
}

#workshop-ui-container h2 {
  text-align: center;
  font-size: 26px;
}

/* wokshop icon and title __________*/

.app-detail__title-toolbar {
  width: 662px;
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  margin-bottom: 15px;
  color: white;
}

@media screen and (orientation:portrait) {
  .app-detail__title-toolbar {
    padding-top: 100px;
  }
  [data-levelname='appSaveTitle'] .app-detail__title-toolbar {
    padding-top: 40px;
  }
}

.workshop-masthead {
  margin-top: 100px;
  padding: 16px;
}

.app-detail__done-button {
  width: 100px;
  margin: 80px auto 0;
}

.app-icon {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 9px -5px rgba(0,0,0,0.30);
  text-align: center;
  color: white;
  display: inline-block;
  padding-top: 20px;
  box-sizing: border-box;
  width: 152px;
  height: 152px;
  overflow: hidden;
  position: relative;
}

.app-icon.app-icon--empty,
[data-levelname='appSaveMenu'] .app-icon {
  border: 2px dotted white;
}

.app-icon.app-icon--empty {
  background: none;
}

.app-icon:active {
  background: rgba(0, 0, 0, 0.6);
}

.app-icon p {
  color: white;
  font-size: 18px;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}

.app-icon img {
  max-height: 80px;
  max-width: 80px;
}

.app-icon.app-icon__edit {
  width: 90px;
  height: 90px;
  padding-top: 10px;
  margin-right: 10px;
  float: left;
}

.app-icon.app-icon__edit img {
  height: 50px;
}

.app-title[contenteditable="true"] p,
.app-icon.app-icon__edit p {
  font-size: 10px;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 1px 0px #000;
}

.app-title {
  font-size: 42px;
  height: 62px;
  overflow: hidden;
  font-family: BBold;
}

.app-title[contenteditable="true"] br {
  display: none;
}

.app-title[contenteditable="true"] {
  -webkit-user-select: auto;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
  white-space: nowrap;
  padding: 0 10px;
}

.app-title[contenteditable="true"] p {
  float: right;
  margin-right: 10px;
}

.app-title[contenteditable="true"]:focus,
.app-title[contenteditable="true"]:active {
  background: white;
  color: black;
  border: 2px solid rgba(0, 0, 0, 1);
  outline: none;
}

.app-title[contenteditable="true"].app-title--active p {
  display: none;
}

[data-levelname='appSaveTitle'] #app-detail__author {
  display: none;
}

[data-levelname='appSaveTitle'] .app-title {
  font-size: 62px;
  height: 86px;
}

.app-author {
  font-family: BMedium;
  color: white;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  padding: 0 10px;
}

/* app menu  __________*/
.app-menu__title {
  width: 357px;
  padding-top: 120px;
  height: 0;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: url(art/workshop/landing/workshop-title.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.app-menu__sub-title {
  width: 220px;
  height: 0;
  padding-top: 55px;
  overflow: hidden;
  margin-left: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (orientation:portrait) {
  .app-menu__sub-title {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.app-menu__sub-title.sub-title--saved {
  background-image: url(art/workshop/landing/apps-title__saved.png);
}

.app-menu__sub-title.sub-title--shared {
  background-image: url(art/workshop/landing/apps-title__shared.png);
  margin-bottom: 10px;
}

@media screen and (orientation:portrait) {
  .app-menu__sub-title.sub-title--shared {
    margin-bottom: 20px;
  }
}

.app-menu__create-button {
  width: 118px;
  height: 118px;
  margin-left: 70px;
  margin-top: 20px;
  background: url(art/workshop/landing/add.png);
  background-size: 100%;
  float: left;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (orientation:portrait) {
  .app-menu__create-button {
    margin-left: 40px;
    margin-top: 0px;
  }
}

.app-menu__create-button .button-label {
  top: 120px;
}

.app-menu__create-button:active {
  background-image: url(art/workshop/landing/add__active.png);
}

.app-menu__apps-list .app-icon p {
  max-height: 52px;
  position: absolute;
  bottom: 6px;
  padding: 10px;
  box-sizing: border-box;
  width: 152px;
  text-overflow: ellipsis;
}

.app-menu__apps-list ul li {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}

.app-menu__apps-list.apps-list--saved ul {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
}

.app-menu__apps-list.apps-list--saved ul li {
  margin-bottom: 20px;
}

@media screen and (orientation:landscape) {
  .app-menu__apps-list.apps-list--saved {
    margin-top: -10px;
  }

  .app-menu__apps-list.apps-list--saved ul li:nth-child(4)  {
    margin-right: 0;
  }

  .app-menu__apps-list.apps-list--saved ul li:nth-child(n+5)  {
    margin-bottom: 0;
  }
}

@media screen and (orientation:portrait) {
  .app-menu__apps-list.apps-list--saved ul {
    width: 530px;

  }
  .app-menu__apps-list.apps-list--saved ul li:nth-child(3),
  .app-menu__apps-list.apps-list--saved ul li:nth-child(6)  {
    margin-right: 0;
  }
  .app-menu__apps-list.apps-list--saved ul li:nth-child(n+6)  {
    margin-bottom: 0;
  }
}

.app-menu__apps-list.apps-list--shared {
  width: 953px;
  margin-left: 70px;
  padding-bottom: 12px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.app-menu__apps-list.apps-list--shared.apps-list--shared--empty  {
}

@media screen and (orientation:portrait) {
  .app-menu__apps-list.apps-list--shared {
    width: 737px;
    margin-left: 30px;
  }
}

.app-menu__apps-list.apps-list--shared ul {
  width: 100%;
  margin-left: 70px;
}

@media screen and (orientation:portrait) {
  .app-menu__apps-list.apps-list--shared ul {
    margin-left: 40px;
  }
}

.app-menu__apps-list.apps-list--shared .app-author {
  font-size: 14px;
  line-height: 16px;
  width: 152px;
  padding-top: 6px;
  padding-left: 0;
  padding-right: 0;
}

[data-levelname='appMenu'] .app-icon.app-icon--empty:active {
  background: none;
}

@media screen and (orientation:landscape) {
[data-levelname='appMenu'] .app-menu__apps-list.apps-list--saved ul {
    margin-left: 274px;
  }
}

@media screen and (orientation:portrait) {
[data-levelname='appMenu'] .app-menu__apps-list.apps-list--saved ul {
    margin-left: 210px;
  }
}

/* interaction toolbar */
.app-detail__interaction-toolbar {
  text-align: center;
  margin-top: 10px;
}

/* manage app toolbar */
.app-detail__manage-app-toolbar {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(0, 0, 0, .5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 10px 0;
  box-sizing: border-box;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

.closed.app-detail__manage-app-toolbar {
  height: 0;
  overflow: hidden;
}

.app-detail__manage-app-toolbar .button-label {
  top: 54px;
  font-size: 12px;
  text-shadow: 1px 0px #000;
}

.manage-app-toolbar__share-button,
.manage-app-toolbar__upload-button,
.manage-app-toolbar__delete-button {
  display: inline-block;
  position: relative;
  height: 70px;
  width: 136px;
  margin: 0 30px;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position-x: 50%;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.manage-app-toolbar__share-button:focus .button-label,
.manage-app-toolbar__upload-button:focus .button-label,
.manage-app-toolbar__delete-button:focus .button-label
.manage-app-toolbar__share-button:active .button-label,
.manage-app-toolbar__upload-button:active .button-label,
.manage-app-toolbar__delete-button:active .button-label {
  color: black;
}

.manage-app-toolbar__share-button {
  background-image: url(art/workshop/app-detail/icon-share.png);
}
.manage-app-toolbar__share-button:focus,
.manage-app-toolbar__share-button:active {
  background-image: url(art/workshop/app-detail/icon-share__active.png);
}

.manage-app-toolbar__upload-button {
  background-image: url(art/workshop/app-detail/icon-upload.png);
  background-size: 70px;
}
.manage-app-toolbar__upload-button:focus,
.manage-app-toolbar__upload-button:active {
  background-image: url(art/workshop/app-detail/icon-upload__active.png);
}

.manage-app-toolbar__delete-button {
  background-image: url(art/workshop/app-detail/icon-delete.png);
}
.manage-app-toolbar__delete-button:focus,
.manage-app-toolbar__delete-button:active {
  background-image: url(art/workshop/app-detail/icon-delete__active.png);
}

/* share dialog */
.share-step {
  margin-top: 40px;
  background-image: url(art/workshop/app-detail/icon-share-to.png);
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: 50%;
}

.share-step__camper,
.share-step__camper--friend {
  position: relative;
  display: inline-block;
  margin: 0 40px;
  height: 154px;
}

.share-step__camper__img {
  width: 148px;
  height: 111px;
  border: 2px solid white;
}

.share-step__camper__name {
  width: 142px;
  font-size: 18px;
  line-height: 20px;
}

.share-step__camper__name span {
  display: block;
}