.top {
	background: #3a3a3a;
	border-top: 1px solid #555;
	border-bottom: 1px solid #1a1a1a;
	@include box-shadow(rgba(#000, 0.4) 0 0 6px);

	padding-right: 7px;

	&.simple .top-row > * {
		visibility: hidden;
	}
	&.simple .top-row > h1 {
		visibility: visible;
	}
}

.top-row {
	width: 100%;
	display: table;

	> * {
		display: table-cell;
		vertical-align: top;
	}

	h1 {
		font-size: 28px;
		font-weight: normal;
		padding: 6px 11px 7px;
		width: 1%;
		color: $logo-color;
		font-family: 'Oswald', sans-serif;
		@include text-shadow(rgba(#000, 0.8) 1px 0px 2px);
		@include transform(translateZ(0)); /* for smoother transition */
		letter-spacing: 1px;
	}

	> .cell-input {
		padding: 10px 0 10px 0;
		width: 600px;

		> div {
			position: relative;
		}

		.CodeMirror {
			height: auto;
			width: calc(50vw - 20px);
			background: #ddd;
			font-family: $monospace-font;
			font-size: 13px;
			padding: 2px 0;
			@include border-radius(2px);
			@include box-shadow(rgba(#000, 0.4) 0 0 6px);
			@include transition(background 0.5s);
		}

		.CodeMirror-focused {
			background: #fff;
		}

		.CodeMirror-placeholder {
			color: #888;
			padding-left: 7px;
			font-family: Arial;
		}

		.CodeMirror-selected,
		.CodeMirror-selectedtext {
			background: $source-viewer-selection;
			color: #fff;
		}
	}

	> .read-only .CodeMirror {
		background: #bbb;
		@include box-shadow();
	}

	> .cell-from {
		width: 1%;
		max-width: 200px;
		padding: 20px 0 0 8px;
		font-size: 12px;
		color: #ccc;
		@include ellipsis;

		a {
			color: blue;
			@extend %smart-underline;
		}
	}

  .btn-group {
		padding: 9px 4px 0 8px;
    	min-width: 96px;
		text-overflow: ellipsis;
		white-space: nowrap;

    > .btn {
      padding: 2px 5px;
    }
  }

  .execute-dropdown {
    margin-top: -8px;

    // Reset bootstrap's dropdown
    border-radius: 0;
    padding: 0;
    z-index: 1;

    border: 1px solid #cacaca;
    border-bottom: 0;
    background: #fff;
    list-style: none;
    @include box-shadow(rgba(#000, 0.15) 0 1px 4px);

    li {
      font-size: 12px;
      padding: 5px 7px;
      border-bottom: 1px solid #cacaca;
      cursor: pointer;
      color: #666;
      @include transition(background 0.2s);

      &:hover {
        background: #f3f3f3;
        @include box-shadow(rgba(#000, 0.05) 0 2px 2px inset);
      }
    }
  }

	> .queue-button {
		position: relative;
		text-align: right;
    	float: right;
		text-overflow: ellipsis;
		white-space: nowrap;

		p {
			margin: 0;
		}

		button {
			@include transition(padding 0.15s ease);

			span {
				padding: 1px 3px;
				border: 1px solid transparent;
				word-spacing: -2px;
				background: rgba(#000, 0.15);
				@include border-radius(3px);
				@include transition(background 0.3s, border 0.3s);

				&.active {
					background: rgba(#b00, 0.8);
					border: 1px solid rgba(#b00, 0.9);
					color: rgba(#fff, 0.8);
				}
			}

			&.empty {
				cursor: default;
			}
		}

		.tab-header {
			background: #fff;
			@include border-radius($button-border-radius $button-border-radius 0 0);
			@include box-shadow(none);
			position: relative;
			top: 0;
			z-index: 11;
			border-bottom-width: 0;
			padding-bottom: $button-padding-vertical + 4;
			padding-top: $button-padding-vertical + 3;
		}
	}

	.queue-container {
		position: absolute;
		text-align: left;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
		z-index: 10;
		right: 4px;
		top: 100%;
	}
}
