<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/paddykontschak/pen/JALeB?depth=everything&limit=all&order=popularity&page=3&q=os&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@charset "UTF-8";
html {
display: table;
width: 100%;
height: 100%;
}
body {
margin: 0px;
padding: 50px;
display: table-cell;
vertical-align: middle;
font-family: "Lucida Grande", sans-serif;
font-size: 12px;
user-select: none;
text-shadow: 0px 1px 1px #fff;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzNzk5ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U4ZWJiNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #33799d), color-stop(100%, #e8ebb4));
background: -moz-linear-gradient(top left, #33799d, #e8ebb4);
background: -webkit-linear-gradient(top left, #33799d, #e8ebb4);
background: linear-gradient(to bottom right, #33799d, #e8ebb4);
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li ul {
font-size: 13px;
}
ul li ul li {
padding: 0 0 3px 15px;
}
i {
display: inline-block;
width: 19px;
height: 19px;
position: relative;
top: 4px;
background: url("https://i.imgur.com/YO1WL.png") no-repeat;
}
#finder {
display: block;
background-color: #ededed;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 1px 1px, rgba(0, 0, 0, 0.1) -1px -1px, rgba(0, 0, 0, 0.1) 1px -1px, rgba(0, 0, 0, 0.1) -1px 1px, rgba(0, 0, 0, 0.8) 0 0 70px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 1px 1px, rgba(0, 0, 0, 0.1) -1px -1px, rgba(0, 0, 0, 0.1) 1px -1px, rgba(0, 0, 0, 0.1) -1px 1px, rgba(0, 0, 0, 0.8) 0 0 70px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px, rgba(0, 0, 0, 0.1) -1px -1px, rgba(0, 0, 0, 0.1) 1px -1px, rgba(0, 0, 0, 0.1) -1px 1px, rgba(0, 0, 0, 0.8) 0 0 70px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 770px;
height: 435px;
margin: 0 auto;
}
#finder *::before,
#finder *::after {
content: "";
position: absolute;
display: block;
}
#toolbar {
position: relative;
display: block;
border-bottom: solid 1px #686868;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTRlNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I4YjdiOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e4e4e4), color-stop(100%, #b8b7b8));
background: -moz-linear-gradient(#e4e4e4, #b8b7b8);
background: -webkit-linear-gradient(#e4e4e4, #b8b7b8);
background: linear-gradient(#e4e4e4, #b8b7b8);
-moz-box-shadow: #f1f1f1 0 1px inset;
-webkit-box-shadow: #f1f1f1 0 1px inset;
box-shadow: #f1f1f1 0 1px inset;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px;
border-radius: 6px 6px 0 0;
}
#traffic-light {
position: absolute;
display: inline;
left: 4px;
}
#traffic-light #red,
#traffic-light #yellow,
#traffic-light #green {
width: 12px;
height: 12px;
display: block;
margin: 5px 4px 4px 4px;
background: #000;
float: left;
position: relative;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjZweCIgY3k9IjE4cHgiIHI9IjUlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjZweCIgY3k9Ii0xcHgiIHI9IjMlIj48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-radial-gradient(6px 18px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 5px), -moz-radial-gradient(6px -1px, #ffffff 1px, rgba(255, 255, 255, 0) 3px);
background-image: -webkit-radial-gradient(6px 18px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 5px), -webkit-radial-gradient(6px -1px, #ffffff 1px, rgba(255, 255, 255, 0) 3px);
background-image: radial-gradient(6px 18px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 5px), radial-gradient(6px -1px, #ffffff 1px, rgba(255, 255, 255, 0) 3px);
-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 1px 4px inset, rgba(255, 255, 255, 0.5) 0 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 1px 4px inset, rgba(255, 255, 255, 0.5) 0 1px;
box-shadow: rgba(0, 0, 0, 0.9) 0 1px 4px inset, rgba(255, 255, 255, 0.5) 0 1px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#traffic-light #red {
background-color: #f24443;
}
#traffic-light #yellow {
background-color: #f0aa5a;
}
#traffic-light #green {
background-color: #88be72;
}
#traffic-light:hover #red::after,
#traffic-light:hover #yellow::after,
#traffic-light:hover #green::after {
position: absolute;
top: -2px;
left: 2px;
font-weight: bold;
font-size: 13px;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px;
}
#traffic-light:hover #red::after {
content: "x";
color: rgba(186, 23, 32, 0.5);
}
#traffic-light:hover #yellow::after {
content: "-";
color: rgba(167, 99, 34, 0.5);
}
#traffic-light:hover #green::after {
left: 1px;
content: "+";
color: rgba(70, 144, 46, 0.5);
}
#windowname {
text-align: center;
font-size: 13px;
line-height: 23px;
}
#windowname i {
background: url("https://i.imgur.com/hhy5Y.png") no-repeat;
}
#actions {
height: 31px;
}
#actions input {
width: 278px;
height: 17px;
margin-right: 8px;
float: right;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#back,
#next,
#iconV,
#list,
#grid,
#coverflow {
display: inline-block;
position: relative;
height: 20px;
width: 38px;
margin-top: 1px;
border: 1px solid #767676;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(100%, #bcbcbc));
background-image: -moz-linear-gradient(#e8e8e8, #bcbcbc);
background-image: -webkit-linear-gradient(#e8e8e8, #bcbcbc);
background-image: linear-gradient(#e8e8e8, #bcbcbc);
-moz-box-shadow: #f1f1f1 0px 1px inset, #cccccc 0px 1px;
-webkit-box-shadow: #f1f1f1 0px 1px inset, #cccccc 0px 1px;
box-shadow: #f1f1f1 0px 1px inset, #cccccc 0px 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#back,
#next {
width: 25px;
}
#back {
margin-left: 8px;
margin-right: 0;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
border-radius: 4px 0 0 4px;
color: #797979;
}
#back::after {
content: "◄";
top: 1px;
left: 9px;
font-size: 13px;
}
#next {
left: -4px;
border-left: 0px solid #767676;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0;
border-radius: 0 4px 4px 0;
color: #a4a4a4;
}
#next::after {
content: "◄";
top: 4px;
left: 8px;
font-size: 13px;
text-shadow: 0px -1px -1px #fff;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#iconV,
#list,
#grid,
#coverflow {
width: 28px;
border-left: 0px;
border-right: 0px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: #e7e7e7 0px 1px inset, #e5e5e5 0px 2px inset, #bdbdbd 0px -1px inset, #bfbfbf 0px -2px inset, #a7a7a7 -1px 0px inset;
-webkit-box-shadow: #e7e7e7 0px 1px inset, #e5e5e5 0px 2px inset, #bdbdbd 0px -1px inset, #bfbfbf 0px -2px inset, #a7a7a7 -1px 0px inset;
box-shadow: #e7e7e7 0px 1px inset, #e5e5e5 0px 2px inset, #bdbdbd 0px -1px inset, #bfbfbf 0px -2px inset, #a7a7a7 -1px 0px inset;
}
#iconV {
font-size: 13px;
color: #fcfcfc;
margin-left: 69px;
border-left: 1px solid #767676;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px;
border-radius: 4px 0 0 4px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2NzY3NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzlhOWE5YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #767676), color-stop(100%, #9a9a9a));
background-image: -moz-linear-gradient(#767676, #9a9a9a);
background-image: -webkit-linear-gradient(#767676, #9a9a9a);
background-image: linear-gradient(#767676, #9a9a9a);
-moz-box-shadow: #676767 -1px 1px 4px -1px inset, #676767 0px 1px inset, #757575 0px 2px inset, #999999 0px -1px inset, #969696 0px -2px inset;
-webkit-box-shadow: #676767 -1px 1px 4px -1px inset, #676767 0px 1px inset, #757575 0px 2px inset, #999999 0px -1px inset, #969696 0px -2px inset;
box-shadow: #676767 -1px 1px 4px -1px inset, #676767 0px 1px inset, #757575 0px 2px inset, #999999 0px -1px inset, #969696 0px -2px inset;
text-shadow: 0px 1px 1px #545454;
}
#iconV::before {
content: "▫▫";
top: -2px;
left: 8px;
}
#iconV::after {
content: "▫▫";
top: 4px;
left: 8px;
}
#list {
left: -3px;
font-size: 15px;
}
#list::after {
content: "
