/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
	font-family: 'theSerifItalic';
	src: url(../fonts/TheSerif_B4_Italic.eot),
		 url(../fonts/TheSerif_B4_Italic.woff) format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'theSerif';
	src: url(../fonts/TheSerif_B4_Plain_.eot),
		 url(../fonts/TheSerif_B4_Plain_.woff) format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'theSerif';
	src: url(../fonts/TheSerif_B4_Bold_.eot),
		 url(../fonts/TheSerif_B4_Bold_.woff) format("woff");
	font-weight: 800;
	font-style: normal;
}


body {
	background: #5F86A3;
	-webkit-font-smoothing: antialiased;
	float:left;
}

body.splash {
	background: #FcFcFf;
}

a {
	color: #5F86A3;
}

.btn {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

a:focus, a:active, a::-moz-focus-inner {
    border: 0;
    outline : 0;
    text-decoration: none;
}


/* Header */

#headerContainer {
	position: relative;
	width: 100%;
	min-width: 1024px;
	background: #FcFcFf;
	z-index: 1000;		
	height: 48px;
	box-shadow: 0px 4px 1px rgba(0,0,0,.25);		
}

#header {
	position: relative;
	margin: auto;
	width: 100%;
	min-width: 850px;
	height: 48px;
}

div#title {
	position:absolute;
	display: inline-block;
	font-family: 'theSerif', georgia, times, serif;
	font-size: 1.4em;
	font-weight: bold;
	top:8px;
	left:8px;
}

div#title a:hover {
	text-decoration: none;
}

nav#pageNav {
	position:absolute;
	top:15px; 
	right:8px;
	font-size: .9em;
}

nav#pageNav a {
	margin-left: 6px;
	font-weight: bold;
}

nav#pageNav a:hover {
	text-decoration: none;
	border-bottom: 3px solid #E67AC2;
}

div#lessonNavContainer {
	position:absolute;
	top:13px; 
	left: 28px;
	right:28px;
	text-align: center;	
}

.lessonButton {
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'theSerif', georgia, times, serif; 
	color: #5F86A3;
	padding: 15px 4px;
}

.lessonButton sub {
	font-size: .9em;
}

.lessonButton:hover span {
	border-bottom: 3px solid #E67AC2;
}

.lessonButton:hover {
	text-decoration: none;
} 

a.active span, a.active:hover span {
	color: #E67AC2;
	background: transparent;
	border-bottom: 3px solid #E67AC2;
	
}

/* Editor Page */

/*#interface {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	min-width: 1024px;
	min-height: 540px;
}*/

div#blogContainer {
	padding: 8px;
}

div#canvasContainer, div#editorContainer {
	display: true !important;
}

div#canvasContainer {
	display: true;
	/*position: absolute;*/
	/*top:0;*/
	/*left:455px;*/
	float:left;
	margin-left: 40px;
	padding: 6px;
	/*width: 600px;
	height: 465px;
	z-index: 500;*/
}

#horizontalRuler {
	position: relative;
	background: url('../assets/images/horizontal.svg');
	/*width: 500px;*/
	height: 20px;
	/*left: 0;
	top: -425px;*/
	display:true;
	overflow:hidden;
	background-repeat: no-repeat;
}

#verticalRuler {
	position: relative;
	background: url('../assets/images/vertical.svg');
	width: 20px;
	left: -20px;
	/*height: 400px;	
	top: -425px;*/
	display:true;
	overflow:hidden;
	background-repeat: no-repeat;
}

#toggleRulers {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
CANVAS - Box !!!!
*/
div#editorCanvasBox {
	
	/*position:absolute;
	top: 50%;
	left: 50%;*/
	float:left;
	width: 500px;
	height: 400px;
	margin-top: 0px;
	margin-left: 0px;
	background: #FcFcFf;

}

div#displayCanvasBox {
	/*position:absolute;*/
	/*top: 50%;*/
	/*left: 50%;*/
	float: left;
	width: 550px;
	height: 400px;
	/*margin-top: -48px;*/
	/*margin-left: -260px;*/
	/*z-index: 1000;*/
}

/*canvas#editorCanvas {
	position: relative;
	box-shadow: 4px 4px 1px rgba(0,0,0,.25);	
	z-index: 1000;
	outline: 0px;
	width: 100%;
	height: 100%;	
}*/

/*#hints {
	display: none;
}

#hint {
	position:absolute;
	width: 100%;
	height: 100%;
	background: #FcFcFf;
	z-index: 1000;
	padding: 12px;
	display: none;	
	overflow: auto;
}

div.hint h2{
	color: #5E86A3;	
	font-size: 1.3em;
	margin-top: 0;
}

div.hint h2, div.hint p {
		font-family: 'theSerif', georgia, times, serif; 	
} */

div#rowContainer{
	padding: 8px;
}

div#buttonsRule {
	padding: 8px;
}

div#editorContainer { 
	display: true;
	/*position: absolute;*/
	/*top: 238px;*/
	/*left: 0px;*/
	float:left;
	padding: 4px;
	width: 424px;
	height: 450px;	
	background: #FcFcFf;
	box-shadow: 4px 4px 1px rgba(0,0,0,.25);
}

#editor { 
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 500;
}

div#editorCommands {
	position: absolute;
	top: 610px;
	left: 300px;
/*	z-index: 1000;	*/
}

#errorModalText {
	border-top: 1px solid #efefef;
}

#editor .ace_color {
	pointer-events:auto;
	cursor: pointer;
	text-decoration: underline;
}

#colorPicker {
	position: absolute;
	pointer-events:none;	
}

.colorPicker {
	background: #fff;
	border: 1px solid #cfcfcf;
}

.colorPicker * {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 12px;
	text-shadow: none;
}

.colorPicker button {
	background: #fff;
	border: 1px solid #cfcfcf;	

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 14px;
	text-shadow: none;	
}

.colorPicker button:hover {
	background: #efefef;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 14px;
	text-shadow: none;		
}

.colorPicker button:active {
	background: #efefef;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	font-size: 14px;
	text-shadow: none;		
}

#snippets {
	display: none;
}

/* Display Page */

/*div#displayInfo {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 400px;
	z-index: 2000;
	box-shadow: 4px 4px 1px rgba(0,0,0,.25);	
	background: #FcFcFf;
	padding: 12px;
}*/

footer#displayFooter {
	position:absolute;
	bottom: 1em;
	text-align: center;
	width: 100%;
	color: #fff;
	z-index: 500;
}

h1#displayTitle {
	font-family: 'theSerif', georgia, times, serif; 
	font-size: 1.6em;
	color: #428BCA;
	margin: 0 0 8px 0;
	padding: 0;
}



/*canvas#displayCanvas {
	position: absolute;
	top: 0;
	left: 250px;
	box-shadow: 4px 4px 1px rgba(0,0,0,.25);	
	outline: 0px;
	width: 500px;
	height: 400px;
	background: #FcFcFf;
	z-index: 1000;
}*/

/*div#displayEditor {
	width: 100%;
	height: 256px;
}*/

/* Hints Preview */

.hintPreview {
	background: #FcFcFf;
	width: 512px;
	overflow: auto;
	margin: 12px;
	padding: 12px;
	outline: 1px solid #ccc	;
}

/* Page template */

body.about #header, body.guide #header {
	width: 80%;
}

body.about .aboutButton,  body.guide .guideButton{
	text-decoration: none;
	border-bottom: 3px solid #E67AC2;
}

div#page {
	margin: 24px auto;
	width: 80%;
	min-width: 768px;
	z-index: 2000;
	border-bottom: 8px solid #E67AC2;

	box-shadow: 4px 4px 1px rgba(0,0,0,.25);	
	background: #FcFcFf;
	padding: 12px;
	line-height: 1.5em;
	font-size: 1.1em;
	font-family: 'theSerif', georgia, times, serif; 
}

.processing {
	background: #E67AC2;
	/*overflow: auto;
	margin: 12px;
	padding: 12px;
	outline: 1px solid #ccc	;*/
}


div#page h2 {
	margin-top: 0;
}

div#page h2, div#page h3 {
	font-family: 'theSerif', georgia, times, serif; 
	color: #5E86A3;	
}