/* Some global settings */
html {
    height:     100%;
    min-width:  320px;
    background: white;
    padding:	0px;
    margin:		0px;
    border:     0px;
    overflow:   hidden;
    font-family:Lato, Century Gothic, Arial, Helvetica, sans-serif;
}

body {text-align: left; position: fixed;}

h1, h2, #Navigation, #FileControls, #ProgramControls *, #defn, #inter, input{
    padding:	0px;
    margin:		0px;
    border:     0px;
}

#editor, #top, #middle, #splitpane, #bottom {
    width:   100%;
    padding: 0px;
    margin:  0px;
    border: 0px;
}

#top {
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    user-select: none;
}


#middle {
    width: 100%;
    height: 100%;
    font-size: 10pt;
}

.goog-splitpane-handle {
    position: absolute;
    border: 1px solid #A6A6A6;
    border-top: 0px;
    border-bottom: 0px;
    background: linear-gradient(to right, rgb(191, 191, 191) 0%, rgb(217, 217, 217) 40%, rgb(217, 217, 217) 60%, rgb(191, 191, 191) 100%);
    min-width: 10px;
}
.goog-splitpane-handle-horizontal { cursor: col-resize; }
.goog-splitpane-handle-vertical { cursor: row-resize; }
.goog-splitpane-first-container,
.goog-splitpane-second-container { overflow: none; position: absolute; }

.form { display: inline-block; }


/* 65px: LOGO AND TITLE */
#Navigation{
    width:           100%;
    min-height:      40px;
    background:     url(/css/images/icon-trans.png) 4px 4px black;
    background-size: 40px 40px;
    background-repeat:no-repeat;
    clear:           both;
    padding-bottom:  4px;
    color:           white;
    font-size:       28px;
    padding-top:     5px;
}
#Navigation * {display: inline-block; vertical-align: baseline;}

a.h1{ font-weight: bold; padding-left: 65px;}
a.h2{ font-size: 20px; font-weight: lighter; padding-left: 4px;}
a.h2, a.h2:visited {color: lightgray; margin-right: 15px; text-decoration: none;}
a.h2:hover{text-decoration: underline;}

/* 30px: FILENAME & URL */
#FileControls{
    width:        100%;
    height:       22px;	/* leave room for the border */
    clear:        both;
    white-space:   nowrap;
    padding-top:   5px;
    border-top:	solid 1px black;
    margin:       0px;
    background:   lightgray;
    font-size:    12px;
}

#FileControls *{
    width:      auto;
    float:		left;
    margin:		0px 10px;
}

/* 20px: TOOLBAR, BUTTONS, ETC */
#ProgramControls{
    width:          100%;
    background:     #B6D990;
    clear:          both;
}

#ProgramControls ul{
    clear:			both;
    list-style-type: none;
}

#ProgramControls li{
    float:        left;
    text-align:		center;
    width:        16%;
    max-width:     125px;
    min-width:     80px;
    font-size:     14px;
}

#ProgramControls .button {
  display: block;
  width: 100%;
  min-height: 20px;
  background-repeat: no-repeat;
  background-position: 15px 0px;
}

a#run    span:before{content: url(run.png);    margin-right: 3px;}
a#stop   span:before{content: url(break.png);  margin-right: 3px;}
a#save   span:before{content: url(save.png);   margin-right: 3px;}
a#share  span:before{content: url(share.png);  margin-right: 3px;}
a#recipe span:before{content: url(recipe.png); margin-right: 3px;}
a#images span:before{content: url(icon_images.gif); margin-right: 3px;}

#ProgramControls li a, #ProgramControls li a:visited{
    display:		block;
    color:			black;
    width:			100%;
    text-decoration:none;
    vertical-align: top;
    padding:    3px 0px;
}

#ProgramControls li a:hover{
    background:rgb(117, 50, 138);
    color: white;
    cursor: pointer;
}

.clickableAnchor {
    color: white;
    cursor: pointer;
}

/* DEFINITIONS */
#definitions{
    width:          100%;
    height:         50%;
    clear:			both;
    text-align:		center;
    padding:		0px;
    overflow:		hidden;
    margin:			0px;
    border:         0px;
    background:		gray;
    border-top:	solid 1px black;
}

#inter .CodeMirror, #definitions>.CodeMirror {background: none;}
#inter .CodeMirror-lines, #definitions .CodeMirror-lines {
  background: white; /* fall back to white on old browsers */
  background: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,.5))
}

#inter .CodeMirror-scroll{
  overflow: hidden !important;
}

#defn {
    clear:			both;
    width:			100%;
    height:			100%;
    overflow:		auto;
    background:		white url(/css/images/fadeIcon.png) no-repeat right bottom;
    font-family:	Monaco, sans-serif;
}
#defn:hover{background:	white url(/css/images/fadeWords.png) no-repeat right bottom;}


/* INTERACTIONS */
#interactions{
    border-top:	    solid 1px black;
    clear:          both;
    width:          100%;
    height:         50%;
    background:		white url(images/blank.gif) no-repeat;
    overflow:       auto;
    margin-left:    4px;
    padding-top:    2px;
}

#interactions:hover{
    background:	white url(/css/images/interactions.png) no-repeat right bottom;}

#inter {
    width:         100%;
    height:		     90%;
    padding:	     0px;
    margin:		     0px;
    overflow:      auto;
    font-family:	 Monaco, sans-serif;
    background:    none;
    position:      absolute;
}

/* everything in the interactions window should have a small
   amount of left-padding, with each replOutput element
   separated by a single pixel */
#inter > * {padding-left: 5px;}
/* every value printed in the interactions window should be on it's own line */
#inter > div:first-child > * {margin-bottom: 3px; clear: left; display: block;}

#inter input{
    width:              90%;
    height:             100%;
    font-family:	Monaco, sans-serif;
    border:		0px;
    outline: 0 !important; /* disable focus ring in Safari */
    background:         none;
}

/* 22px: STATUSBAR */
#statusbar {
    clear:          both;
    width:          100%;
    height:         16px;
    padding:        5px 10px;
    border-top:     solid 1px black;
    color:          white;
    background:     #444;
    position:       relative;
    top:            -23px;
    left:           -10px;
    transition:     .5s;
    opacity:        0;
    z-index:        999;
    font-size:      12px;
    display:        none;
}


div#publicId, div#publicIdLabel{ display: none; }

/* ERROR MESSAGES */
div.moby-error {
    border-width: 1px 0px;
    color: red;
    width: 100%;
}

.colored-link {
	font-style: italic;
    padding-left: 6px;
    padding-right: 6px;
    margin: 0px 5px;
    cursor: pointer;
    white-space: pre;
}

/* Break errors will not show up in red, to avoid scaring students away */
div.moby-break-error {
    border-width: 1px 0px;
    width: 100%;
}

div.error-stack-trace {
    max-height: 100px;
    overflow: auto;
}

p.location-paragraph {
    margin-top: 0px;
    margin-bottom: 0px;
}

span.compileTimeError {color: gray; font-style: italic; font-size: 11px;}

/* To make spans as top-aligned inlined blocks, as used in the REPL */
span.top-aligned-inline-block {
    display: inline-block;
    vertical-align: top;
}

.evaluatorToplevelNode {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}


.highlight1 { background-color: green; }
.highlight2 { background-color: blue; }
.highlight3 { background-color: yellow; }

*:-webkit-full-screen *:first-child {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top:      0px;
  left:     0px;
  right:    0px;
  bottom:   0px;
}
*:fullscreen *:first-child {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top:      0px;
  left:     0px;
  right:    0px;
  bottom:   0px;
}
*:-ms-fullscreen *:first-child {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top:      0px;
  left:     0px;
  right:    0px;
  bottom:   0px;
}
*:-moz-full-screen *:first-child {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top:      0px;
  left:     0px;
  right:    0px;
  bottom:   0px;
}


/* clearix elements */
#ProgramControls ul:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

#helpDialog {
    width: 70%;
    background: black;
    color: white;
    opacity: 0.8;
    text-align: center;
    position: absolute;
    top: 110%;
    left: 15%;
    z-index: 9;
    border-radius: 20px;
    box-shadow: 0px 10px 25px black;
    transition: all .5s;
    padding: 10px;
}

#helpDialog h2{font-size: 1em;}
#helpDialog .shortcuts {list-style-type: none; display: inline-block; padding: 0px;}
#helpDialog .shortcutGroup {width: 200px; display: inline-block; text-align: left; vertical-align: top; }
#helpDialog .shortcutGroup:last-child{width: 250px;}
kbd{
    display:inline-block;
    padding:2px 3px;
    line-height:10px;
    color:#555;
    vertical-align:middle;
    background-color:#cacaca;
    border:solid 1px #ccc;
    border-bottom-color:#bbb;
    border-radius:3px;
    box-shadow:inset 0 -1px 0 black;
}

#printedCM{visibility: hidden; height: 0px;}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
    #ProgramControls li {min-width: 50px;}
    #ProgramControls li a{
        border-left:  solid 1px gray;
		padding-top: 10px;   
		padding-bottom: 10px;
		/* Hide the text by making is as small as possible, and match the BG color */ 
		font-size: 0px;
		color: black;
		}

  #FileControls *{ margin: 0px 5px; }
  #a.h1{display: none;}
  #a.h2{font-size: 16px; margin-left: 65px; margin-top: 8px;}
}

/* When printing, hide everything except the FileControls and definitions areas */
@media print{
  #Navigation, #ProgramControls, #footer, #splitpane, #help{display: none;}
  #printedCM{visibility: visible; display: block; height: auto;}
  #FileControls{border-style: solid; border-color: black; border-width: 3px 0px;}
  #FileControls img{display: none;}
}