html {
  overflow: hidden;
  height: 100%;
}

body {
	font-family: 'Open Sans';
	font-size: 16pt;
	background: white;
	margin: 0px;
  height: 100%;
  overflow: auto;
}

#header {
	background-color: #c6c6c6;
	width: 100%;
	height: 70px;
}

#credits {
  text-align: center;
  width: 100%;
  margin-top: 90px;
}

#blockly {
	border:0px solid #CCC;
	padding-left:0;
	height: 100%;
}

#blockly_editor {
	width:100%;
	height: calc(100% - 70px);
  display: none;
}

.blocklyToolboxDiv, #header {
  -webkit-user-select: none;
}

#description {
	width:49%;
	float:right;
	margin-top:0;
}

#button_run {
	margin-left:2%;
}

#logo {
  font-size: 48px;
  padding-left: 10px;
  padding-right: 10px;
  float:left;
  height:calc(100% - 3px);
}

.headerBtn {
  width: 40px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  /*padding-right: 10px;
  padding-left: 10px;*/
  padding-top: 7px;
  float:right;
  height:calc(100% - 7px);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.headerBtn.wide {
  width: 80px;
}

.wideBtn p {
  float: right;
}

.headerBtn p {
  margin-top: 4px;
  font-size: 11px;
}

.headerBtn img {
  margin-top:2px;
}

.btnDisabled {
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

#loadSD, #import {
  margin-left: 40px;
}

.sdImage {
  height:35px;
  cursor:pointer;
}

.slimImage {
  height:17px;
  cursor:pointer;
}

/* css styles for ui module begin here */
#hider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(100,100,100,0.5);
}

/*#sdSelector*/#dialog {
  width: 350px;
  height: 100px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -126px;
  border-radius: 7px;
  text-align: center;
}

/*#selectionTable*/#dialogTable {
  font-size: 13px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

/*#sdChoice*/.dialogChoice {
  width: 215px;
  float: right;
}

/*#osChoice {
  width: 110px;
  float: right;
}*/

/*#writeButton*/.dialogButton {
  margin-top: 12px;
  margin-left: 5px;
  margin-right: 5px;
}

/*#writingMessage
{
  width: 250px;
  height: 200px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -126px;
  border-radius: 7px;
  text-align: center;
}*/

/*#writeProgress {
  margin-top: 120px;
}*/

/*#writeProgressbar*/#dialogProgress {
  margin-top: 8px;
}

#dialogProgressText {
  margin-top: -1px;
  font-size: 11px;
}

/*#writeDetailedProgress
{
  margin-top: 9px;
  font-size: 11px;
}*/

/*#writeAnimation*/#dialogImage {
  max-width: 160px;
  max-height: 90px;
}
/*.updateAnimation
{
  margin-top: 10px;
  margin-bottom: 10px;
}*/
/*#closeBtn
{
  margin-top: -7px;
}*/
/*.infoParagraph {
  font-size: 12px;
  margin-left: 6px;
  margin-right: 6px;
}*/
/*.blockInfo {
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
}*/

#dialogInfo {
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: black;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
