* 
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: "White";
	overflow: hidden;
  }

a:link, a:visited {
    color: blue;
    text-decoration: none;
}

a:hover, a:active {
	color: red;
	text-decoration: underline;
}


/* This is the main shell.
   It contains the navbar, workspace and statusbar.
*/
.shell 
{
	height: 100%;
	width: 100%;
	color: "White";
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: "Roboto", "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
	font-size: 11px;
	user-select: none;

	display: flex;
	flex-direction: column;
	height: 100%;
}


/* Navbar is the top bar displayed */
.navbar {
	overflow: hidden;
	font-size: 12px;
	line-height: 31px;
	height: 32px;
	padding: 0 8px 0 6px;
	background-color: #0058AD;
	color: #fff;
	user-select: none;
	min-height: 32px;
	font-family: inherit;
}

.navbar > .navbar-item {
	display: inline-block;
	height: 100%;
	font-family: inherit;
}

.navbar > .navbar-item.left {
	float: left;
}

.navbar > .navbar-item.right {
	float: right;
	margin-left: 4px;
}

.navbarbutton {
	cursor: pointer;
	color: White;
	padding: 3px;
	border: 1px solid white;
	border-radius: 4px;
	display: none;
}

.navbarbutton:hover {
	color: whitesmoke;
}

.navbarbutton:active {
	color: lightblue;
}

.sitelogo {
	padding-right: 8px;	
	cursor: pointer;
}

.sketchTitle {
	font-style: italic;
	padding-left: 5px;
	padding-right: 5px;
}

.sketchTitle[contenteditable="true"] {
	font-style: normal;
  background-color: White;
  color: darkblue;
	border: 1px solid lightblue;
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
}

.sketchTitle:hover {
	cursor: text;
	border: 1px dashed lightblue;
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
}

.sketchTitle:hover[contenteditable="true"] {
	color: darkblue;
}

.sketchTitlePen {
	padding-left: 8px;
	cursor: pointer;
}

.sketchTitlePen > i {
	display: none;
}


.sketchTitlePen:hover {
	color: lightblue;
}

/* Workspace is the main area of the shell
   containing the editor and output */
.workspace {
	background-color: lightgray;
	flex: 1 1 0%;
	overflow: hidden;	
	user-select: text;
	display: flex;
	flex-direction: row;
}


.editor {
	flex: 1 1 auto;
	background-color: lime;	
	/*min-width: 50%;*/
	flex-basis: 50%;

	display: flex;
}


.actionbar {
	background-color: #0A0A0A;
	color:white;
	font-size:18px;
	width:50px;
	user-select : none;

	display: flex;
	flex-direction: column;
}

.actionbar > a {
	color:white;
	text-decoration: none;
}

.actionbarbutton {
	border:none;
	display:inline-block;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:white;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
}

.actionbarbuttonnotification {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: translateY(0px);
	}

	70% {
		transform: translateY(-3px);
	}

	100% {
		transform: translateY(0px);
	}
}

.actionbarbuttonselected{
	border-left: 2px solid white;
	padding-left: 14px;
}

.actionbarbutton:hover{
	color: black;
	background-color: lightgray;
}

.sidebar {
	background-color: pink;
	width: 500px;
	overflow: hidden;
	display: none;
	flex-direction: column;
	min-width: 500px;
	user-select: none;
}


.sidebarbar {
	background-color: White;
	line-height: 31px;
	height: 32px;
	min-height: 32px;
	padding-right: 10px;
	padding-left: 2px;
	font-size: 20px;
}

.sidebarbar.subtitle {
	font-size: 18px;
}


.sidebarbar > .sidebarbar-item {
	display: inline-block;
	height: 100%;
}

.sidebarbar > .sidebarbar-item.left {
	float: left;
}

.sidebarbar > .sidebarbar-item.right {
	float: right;
}

.sidebarbar > .sidebarbar-item.right i {
	color: brown;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

.sidebarbar > .sidebarbar-item.right i:hover {
	font-size: 14px;
}

.sidebarbar > .sidebarbar-item.right i:active {
	color: black;
}

.sidebararea {
	background-color: white;
	flex-grow: 1;
	display:flex;
	flex-direction: column;
	min-height: 100px;
}

.sidebararea.padding {
	padding: 10px;
}


.sidebarusage {
	min-height:50px;
	height:50px; 
	background-color:whitesmoke;
	text-align: center;
	padding-top: 20px;
	/* font-size: 16px; */
	user-select: text;
}

.examplevalue {
	cursor: pointer;
	user-select: text;
}

.examplevalue:active {
	color: blue;
}


.examplevalue > i {
	visibility: hidden;
}


.examplevalue:hover > i {
	visibility: visible;
}

.tutorial {
	flex: 1;
	border:0px;
	min-height: 100px;
	height: 100px; /* hack for ipad ?! */
	overflow: auto;
	padding: 5px;
	user-select: text;
}

.sidebarnavigationarea {
	min-height:50px;
	height:50px; 
	background-color:whitesmoke;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebarnavigationarea > div {
	width:90%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.sidebarnavigationareatext {
	display: inline-block;
	text-align: center;
	margin-top: 9px;
}


.sidebarnavigationareabutton {
	height: 30px;
	background-color: #0058AC;
	color: white;
	border: 1px solid #0058AC;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	width: 75px;
	outline: none;
}

.sidebarnavigationareabutton:active {
	background-color: #0069D2;
	color:white;
	outline: none;
}

.sidebarnavigationareabutton:disabled {
	cursor: default;
	color: lightgray;
}

.closesidebar {
	color: red;
}

.codewithbararea {
	flex-grow: 1;
	background-color: white;
	margin: 0;

	display: flex;
	flex-direction: column;
}

.codearea {
	background-color: white;
	flex-grow: 1;

	display: flex;
	flex-direction: column;
}

.codeareapages {
	background-color:gray;
	flex-grow: 1;

	display: flex;
	flex-direction: column;
}

.codebar {
	background-color: White;
	/* height: 36px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 36px;
	padding-right: 10px;
}

.codebar > i {
	color: brown;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

.codebar > i:hover {
	font-size: 14px;
}

.codebar > i:active {
	color: black;
}

.playbutton {
	/*position: absolute;
	top: 10px;
	right: 10px;*/
	
	background-color: white;
	color: green;
	font-size: 20px;
	padding: 8px;
	border: 1px solid green;
	border-radius: 8px;
	width: 50px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	margin-right: 10px;
}

.playbutton:hover {
	color: darkgreen;
}

.playbutton:active {
	box-shadow: 0px 0px;
	right: 8px;
}

.stopbutton {
	background-color: white;
	color: red;
	font-size: 20px;
	padding: 8px;
	border: 1px solid red;
	border-radius: 8px;
	width: 50px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	margin-right: 10px;
}

.stopbutton:hover {
	color: darkred;
}

.stopbutton:active {
	box-shadow: 0px 0px;
	right: 8px;
}

.output {
	flex: 1 1 auto;
	background-color: pink;
	margin: 0;
	min-width: 800px;

	display: flex;
	flex-direction: column;
}

.outputbar {
	background-color: White;
	height: 36px;
	min-height: 36px;
	padding: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.outputbar > i {
	color:brown;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

.outputbar > i:hover {
	font-size: 14px;
}

.outputbar > i:active {
	font-size: 14px;
	color: black;
}

.outputarea {
	background-color: White;
	width: 100%;
	flex-grow: 1;

	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

/* div canvas (the div for canvas) should be the first element in outputarea */
.outputarea > :first-child {
	border: 1px dashed lightgray;

	margin: 0px;
	padding: 0px;
	position: absolute; 
	overflow: hidden;	
}

/* textarea (the textarea for text overlay) should be the second element in outputarea */
.outputarea > :nth-child(2) {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	background-color: transparent;
	border: 0px;
	resize: none;
	position: absolute;
	width: 800px;
	height: 600px;
	white-space:pre;
	overflow: auto;
	display: none;
}

/*
@media only screen and (max-width: 1024px) {
	.output { 
		display: none;
	}
  }
*/

/* Splitter between editor and output */
.splitter {
	background-color: whitesmoke;
	width : 5px;
	min-width: 5px;
	/*cursor: ew-resize;*/
}

/* Status bar is displayed at the bottom of the shell */
.statusbar {
	height : 16px;
	background-color: green;
	display:none;
}

.shareForm {
	padding:10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.shareForm > div {
	width: 100%;
	padding: 5px;
	margin-bottom: 10px;
}

.shareForm label {
	display: block;
}

.shareForm input {
	width: 100%;
}

.shareForm textarea {
	width: 100%;
	height: 60px;
	resize: none;
}

.shareForm button {
	margin-top: 5px;
	cursor: pointer;
}