barley.css

/* @override 
	http://localhost:8080/static/barley.css
*/

* {
  margin: 0;
  padding: 0;
}

/* @group Basics & Layout */

body {
  background: #fff url(ribbon.png) repeat-x scroll 0 0;
  min-width: 400px;
  position: relative;
}

#logo {
  position: absolute;
  text-indent: -9000em;
  background: url(barley-logo.png) no-repeat;
  width: 250px;
  height: 80px;
}

#content {
  position: relative;
  padding: 100px 15px 0;
  background: url(barley-and-beetle.png) no-repeat right top;
}

p {
  margin: 0.5em 0;
}

ul, ol, dl {
  margin: 0.5em 3em;
}

pre {
  margin: 1em 0;
  overflow: auto;
}

.src {
  padding: 0.5em 1em;
  background: rgb(229,237,244);
}

select, input, button, textarea {
  color: #424242;
}

/* @end */

/* @group Fonts & Sizes */

/* Basic technique & IE workarounds from YUI 3
   For reasons, see:
      http://yui.yahooapis.com/3.1.1/build/cssfonts/fonts.css
 */
 
body {
  font:13px/1.4 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;;
  *font-size:small; /* for IE */
  *font:x-small; /* for IE in quirks mode */
  color: #424242;
}

h1, h2, h3, h4, h5, h6, b {
  color: #cc2900;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Skia, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

h1 { font-size: 146.5%; /* 19pt */ } 
h2 { font-size: 131%;   /* 17pt */ }
h3 { font-size: 116%;   /* 15pt */ }
h4 { font-size: 100%;   /* 13pt */ }
h5 { font-size: 100%;   /* 13pt */ }

b {
  font-weight: normal;
}

p small {
  font-size: 85%; /* 11pt */
}
select, input, button, textarea {
  font:99% sans-serif;
}

table {
  font-size:inherit;
  font:100%;
}

pre, code, kbd, samp, tt, .src {
  font-family:monospace;
  *font-size:108%;
  line-height: 124%;
}

/* @end */

/* @group Sidebar */

#content.with-sidebar {
  padding-right: 15em;
}

#sidebar {
  width: 14em;
  position: absolute;
  top: 100px;
  right: 0;
  border-left: 1px dashed #cc2900;
}

#sidebar .module {
  font-size: 85%; /* 11pt */
  line-height: 1.25em;
  margin: 0 1.5em;
}

#sidebar .module + .module {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px dashed #cc2900;
}

#sidebar pre {
  overflow: hidden;
  font-size: 100%;
}

#sidebar form {
  margin-top: 0.5em;
}
#sidebar input[type=text] {
  width: 8em;
  margin-right: 1em;
}
#sidebar input[type=submit] {
  font-size: 85%; /* 11pt */
}

#sidebar ul {
  margin: 0.5em 0;
}

#sidebar li {
  padding: 0 0 2px;
  margin: 0 0 0 1.5em;
}

#sidebar li a {
  text-decoration: none;
}

#sidebar li.op {
  list-style-type: none;
}
#sidebar li.op a {
  background-repeat: no-repeat;
  padding: 0 0 0 22px;
  display: block;
  height: 16px;
}

/* @end */

/* @group Topbar */

body.with-topbar {
  border-top: 29px solid rgb(78,98,114);
  background-position: 0 29px;
}

#topbar {
  background: rgb(41,56,69);
  color: #white;
  position: absolute;
  top: -22px;
  right: 0;
  left: 0;
  height: 22px;
  font: 12px/22px sans-serif;
}

#topbar ul {
  list-style: none;
  display: inline-table;
  margin: 0;
}

#topbar ul.left {
  float: left;
}

#topbar ul.right {
  float: right;
}

#topbar ul li {
  display: inline;
  white-space: nowrap;
  position: relative;
}

#topbar ul li + li {
  border-left: 1px solid #d5d5d5; 
}

#topbar ul li ul {
  position: absolute;
  top: 17px;
  background-color: rgba(0,0,0,0.5);
}

#topbar ul.left li ul { left: -9999em; }
#topbar ul.left li:hover ul { left: 0; }
#topbar ul.right li ul { right: 9999em; }
#topbar ul.right li:hover ul { right: 0; }

#topbar ul li a {
  padding: 4px 6px;
}

#topbar ul li a.logo {
  padding-left: 36px;
  background: url(hslogo-16.png) no-repeat 8px 3px;
}

#topbar a:link,
#topbar a:visited {
  text-decoration: none;
  color: white;
}

#topbar a:hover,
#topbar ul li a.logo:hover {
  background-color: rgba(255,255,255,0.25);
}

/* @end */

/* @group Source View */

#source-page {
  position: relative;
}

.button-set {
  text-align: right;
}

#rocker {
  position: absolute;
  width: 104px;
  text-align: right;
  top: 0;
  right: 0;
}

#rocker a {
  display: inline-block;
  width: 52;
  text-align: center;
  padding-top: 34px;
  text-decoration: none;
}

#rocker-run-image,
#rocker-edit-image {
  background-image: url(switches.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 36px;
  z-index: -1;
}

#rocker-edit-image { background-position: 0 -36px; } 
#rocker-run-image { background-position: 0 0px; } 


.button-set button,
.button-set input[type=button] {
  padding: 0 0.75em;
  margin: 0 0.25em;
}


#editor {
  margin: 0.5em 0 1em;
}


#editor-box {
  font-family:monospace;
  font-size: 93%; /* 12pt */
  line-height: 124%;
  margin: 1em 0;
  overflow: auto;
  background: #ffffe5;
  border: 1px solid #b1b18e;
  padding-left: 0.75em;
}

#editor-box.editable {
  background: #ff0 url(stripe.png);
}

#editor-box textarea,
#editor-box .CodeMirror-wrapping {
  padding-left: 3.72em;
}

#editor-box .CodeMirror-line-numbers {
  text-align: right;
  padding: 1em 1em 1em 0;
  width: 3em;
  color: #a9a9a9;
}

#editor-box .CodeMirror-line-numbers div.error-line {
  color: #ff4d4d;
  font-weight: bold;
  background: url(silk/exclamation.png) no-repeat -1px -1px;
  position: relative;
}

.error-details {
  display: none;
  position: absolute;
  text-align: left;
  background-color: #ffe5e5;
  margin: 0;
  padding: 4px;
  color: #7f3500;
  font-size: 92.3%;
  border: 1px solid #b1b18e;
}

#editor-box textarea.src {
  width: 100%;
}

#editor-box .CodeMirror-wrapping div,
#editor-box .CodeMirror-wrapping iframe {
  background: #ffffe5;
}

#editor-box .CodeMirror-wrapping .editor-column-marker {
  position: absolute;
  top: 0;
  height: 100%;
  left: 4em;
  background-color: transparent;
  border-left: 1px dashed #e0e0b4;
}
.panel {
  background-color: #eee7b9;
  width: 99%;
  padding: 4px 6px 4px 4px;
  margin: 1em 0;
  text-align: left;
}

.panel.with-errors{
  background-color: #ffe5e5;
}

.panel h1 {
  margin: 0.25em 0.25em 0 0.25em;
  font-weight: normal;
}

.panel-content {
  background: white;
  width: 100%;
  overflow: visible;
  margin: 0.5em 0 0;
  border: 1px solid #919191;
}

#preview iframe {
  height: 40em;
}

#errors pre {
  font-size: 93%; /* 12pt */
  line-height: 124%;
}

/* @end */

/* @group Project View */

table#filelist {
  margin: 1em 0;
  padding: 0;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #c0c0c0;
}

#filelist .even {
  background-color: #f4f4f4;
}
#filelist .odd {
  background-color: #fafafa;
}

#filelist tr:hover {
  background-color: #ffc;
}

#filelist tr {
}
#filelist td {
  padding: 0.25em 0.5em;
}

#filelist p {
  margin: 0;
}

#filelist .dir {
  font-style: italic;
  color: #7b9bcc;
  font-size: 85%; /* 11pt */
  padding-right: 0.5em;
}

#filelist .name {
  padding-left: 20px;
  padding-top: 2px;
  background-repeat: no-repeat;
  background-position: left center;
}
#filelist .src-page { background-image: url(silk/page_white_world.png); }
#filelist .src-text { background-image: url(silk/page_white_code.png); }
#filelist .src-image { background-image: url(silk/image.png); }
#filelist .src-script { background-image: url(silk/page_white_code_red.png); }
#filelist .src-other { background-image: url(silk/page_white.png); }
#filelist .src-dir { background-image: url(silk/folder.png); }

#filelist .op { 
  padding: 0;
  width: 30px;
}
#filelist .op a {
  font-size: 16px;
  background-repeat: no-repeat;
  padding: 0 0 0 16px;
}

#filelist a span {
  display: none;
}
/* @end */

/* @group Op Icons */

.op-preview { background-image: url(silk/magnifier.png); }
.op-edit { background-image: url(silk/pencil.png); }
.op-download { background-image: url(silk/arrow_down.png); }
.op-file { background-image: url(silk/link.png); }
.op-recompile { background-image: url(silk/lightning.png); }

/* @end */

/* @group Documentation View */

#documentation {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 112px;
  border-style: none;
  border-top: 2px solid #c0c0c0;
}



/* @end */