.window {
  font: 12px / 1.8 normal -apple-system, BlinkMacSystemFont, sans-serif;
  text-rendering: optimizeLegibility;
  background: white;
  border-radius: 5px;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 64px rgba(0,0,0,0.46), inset 0 1px 0 #f5f4f5, 0 -1px 0 rgba(0, 0, 0, 0.11), 0 1px 0 rgba(0, 0, 0, 0.26), -1px 0 0 rgba(0, 0, 0, 0.13), 1px 0 0 rgba(0, 0, 0, 0.13);  
}

.window.text {
  background: #f7f7f7;
}

.window.code {
  background: #002b36;
  box-shadow: 0 22px 64px rgba(0,0,0,0.46), 0 -1px 0 rgba(0, 0, 0, 0.11), 0 1px 0 rgba(0, 0, 0, 0.26), -1px 0 0 rgba(0, 0, 0, 0.13), 1px 0 0 rgba(0, 0, 0, 0.13);    
  padding-bottom: 14px
}

.window.folder {
  background: #fff;
}

.no-shadow {box-shadow: none}

/* 

I need to draw the corners individually because the
bottom corners are darker than the top ones and I 
don't believe it's possible to draw the rounded 
corners of a border in different colors with CSS.

*/ 

.corner {
  border-width: 1px;
  border-style: solid;
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 0; 
  display: none; f
}

.corner.left {border-right: none;left: 0;}
.corner.right {border-left: none;right: 0;}

.corner.bottom {bottom:0;border-top: none;border-color:rgba(0,0,0,0.37)}
.corner.bottom.left {border-bottom-left-radius: 6px;}
.corner.bottom.right {border-bottom-right-radius: 6px;}

.corner.top {top:0;border-bottom: none;border-color:rgba(0,0,0,0.13)}
.corner.top.left {border-top-left-radius: 6px;}
.corner.top.right {border-top-right-radius: 6px;}

/* 

I need to draw the borders individually because they
are gradients and I don't know how to do that in CSS.

*/ 

.border {
  position: absolute;
  display: none;
}

.border.left, .border.right {
  top:9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(rgba(0,0,0,0.11), rgba(0,0,0,0.36) 24%, rgba(0,0,0,0.37));
}

.border.left {left: 0;}
.border.right {right: 0;}

.border.top, .border.bottom {
  height: 1px;
  left: 9px;right: 9px;
}

.border.bottom {bottom:0;background: linear-gradient(to right, rgba(0,0,0,0.37),  rgba(0,0,0,0.56) 5%, rgba(0,0,0,0.56) 95%, rgba(0,0,0,0.37));}

.no-shadow .border.bottom {background: rgba(0,0,0,0.37);}

.border.top {top: 0px;background: linear-gradient(to right,rgba(0,0,0,.13),rgba(0,0,0,.13) 5%,rgba(0,0,0,.13) 95%,rgba(0,0,0,.13))}


.toolbar {
  font-weight: normal;
  font: inherit;
  margin: 0;
  color: #34324a;
  font-size: .78rem;
  line-height: 24px;
  height: 24px;
  margin-bottom: 1px;
  display: block;
  text-align: center;
  background-image: linear-gradient(rgb(237,235,237), rgb(211,209,211));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 1px 0 rgba(0, 0, 0, 0.26);
}

.text.with-chrome .toolbar {
  line-height: 30px;height: 27px;
}


/* Used to simulate a text editor without chrome */
.text:not(.with-chrome) .toolbar,
.code .toolbar {
  box-shadow: none;
  background: none;
  color: transparent;
}

.text .name {display: none;text-indent: 11px}
.text.with-chrome .name {display: block;}

.text:not(.with-chrome) .toolbar .dots,
.code .toolbar .dots {
  top: 8px;
  left: 4px;
}


.text.with-chrome .toolbar .dots {
  top: 2px;
  left: 5px;  
}

.window .dots {position: absolute;left: 0}

.window .dot {
  width: 12px;height: 12px;
  border-radius: 100%;
  display: inline-block;
  float: left;
  margin: 6px 0 0 8px;
  background: #000;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3)
}

.window .dot:nth-child(1) {background: rgb(252,98,93)}
.window .dot:nth-child(2) {background: rgb(253,189,65)}
.window .dot:nth-child(3) {background: rgb(53,203,75)}

.dropbox {
  background-image: url('dropbox-icon.png');
  background-size: 17px;
  width: 17px;height: 14px;
  display: inline-block;
  float: none;
  position: relative;top:2px
}

.text-chevron {
  background-image: url('textfile-arrow.png');
  background-size: 8px;
  float: none;
  background-repeat: no-repeat;
  width: 8px;height: 4px;
  display: inline-block;
  margin-left: 0.05rem;
  position: relative;top:-0.18rem
}


.textfile {
  background-image: url('textfile.png');
  background-size: 13px;
  float: none;
  background-repeat: no-repeat;
  width: 13px;height: 17px;
  display: inline-block;
  position: relative;top:0.24rem;
  margin-right: 0.15rem
}


.sorter {
  font: inherit;
  font-weight: 500;
  font-size:11px;
  display: block;
  margin: 0;
  height: 23px;
  line-height:21px;
  padding: 0 6px;
  background: #f0f0f0;
  color:#252525;
  margin-bottom:2px;
  box-shadow: inset 0 -1px rgba(0,0,0,0.2);
  position: relative;
}

.icon.chevron {
  background-image: url('chevron.png');
  background-size: 7px;
  width: 7px;
  height: 4.5px;
  position: absolute;
  top:9px;
  right: 7px
}


.text pre {
  margin: 0 auto;
  max-width: 40rem;
  padding: 2.22rem 5rem;
  display: block;
  border: none;
  box-shadow: none;
  line-height: 24px;
  font-size: 14px;
  line-height: 1.75;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  font-family: 'IA Writer Duospace', Consolas, monaco, monospace;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.text.narrow pre {padding: 16px 19px}
.text.medium pre {padding: 16px 19px}

.code pre.hljs, .code .line-numbers {
  margin: 1rem 0 0;
  padding: 0 3rem 0;
  letter-spacing: 0.01em;
  border: none;
  font-family: 'IA Writer Duospace', Consolas, monaco, monospace;  
  font-size: 14px;
  line-height: 1.75;
  overflow-y: hidden;
  position: relative;
}

.code .line-numbers {
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 20px;
    z-index: 1;
    color: rgba(255,255,255,.3);
    padding: 0 9px 0 0;
    text-align: right;
    border-right: 1px solid rgba(255,255,255,.15);
}


.focus pre:after {
    content: "\2007";
    background: #29beea;
    width: 0.25em;
    position: relative;
    left: -1px;
    display: inline-block;
    -webkit-animation: blink 0.5s ease-in-out 0.25s infinite alternate;
}

@-webkit-keyframes blink {
  0% {opacity:1}
  100% {opacity:0}
}


.contents {
  margin: 0;
  padding: 0;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  display: block;
}

.item { 
  font: inherit;
  display: block;
  padding-left: 24px;
  position:relative;color:#242424;
  background: rgb(245,245,245);
  line-height: 1.6;
  font-weight: normal;
  margin: 0;
}

.item.nested-1 {padding-left: 44px}
.item.nested-2 {padding-left: 64px}
.item.nested-3 {padding-left: 84px}
.item.nested-4 {padding-left: 104px}
.item:nth-child(2n) {background: rgb(255,255,255)}

.icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: text-bottom;
}

.toolbar .icon {vertical-align: initial;}

.item .icon {display: block;float: left;margin-right: 3px}
.item .icon.folder:before {
  content: "";
  width: 7.5px;height: 9px;
  background: url('arrow-grey.png');
  background-size: 7.5px;
  position: absolute;left: -16px;top: 5px
}

.item.open .folder:before {
  width: 9px;height: 7.5px;
  background: url('arrow-down-grey.png');
  background-size: 9px;
  left: -16px;top: 5px
}

.item:nth-child(2n) .folder:before {
  background-image: url('arrow-white.png')
}

.item.open:nth-child(2n) .folder:before {
  background-image: url('arrow-down-white.png')
}


.folder {background: url('folder-white.png') no-repeat center 3px / 16px;}
.item:nth-child(odd) .folder {background-image: url('folder-grey.png');} 

.file {background: url('document-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .file {background-image: url('document-grey.png');} 

.md {background: url('markdown-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .md {background-image: url('markdown-grey.png');} 

.txt {background: url('txt-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .txt {background-image: url('txt-grey.png');} 

.img {background: url('image-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .img {background-image: url('image-grey.png');} 

.html {background: url('html-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .html {background-image: url('html-grey.png');} 

.zip {background: url('archive-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .zip {background-image: url('archive-grey.png');} 

.webloc {background: url('webloc-white.png') no-repeat center 2px / 14px;}
.item:nth-child(odd) .webloc {background-image: url('webloc-grey.png');} 