IDE Interface w awesome box shadow

This is a generic IDE Interface for a web based spotify client

by kizer

HTML

<header class="ide">
    <input type="search" placeholder="Search..." />
    <p>Game Closure > Card Game</p>
</header>
<section class="flexbox">
 <div>
     <h1>main</h1>
     <ul>
         <li>What's New</li>
         <li>People</li>
         <li>Inbox</li>
         <li>Queue</li>
     </ul>
          <h1>Assets</h1>
     <ul>
         <li>Images</li>
         <li>Sound</li>
         <li>Video</li>
     </ul>
 </div>
 <div>
     <article class="middle">
         <p>Filter</p>
     </article>
 </div>
 <div>3</div>
</section>
<div class="gps_ring"></div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    /* Improves handling of kerning pairs and ligatures */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

header {
height: 54px;
/* ---------- */
background-color: #d1d1d1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(209, 209, 209)), to(rgb(149, 149, 149)));
background-image: -webkit-linear-gradient(top, rgb(209, 209, 209), rgb(149, 149, 149));
background-image: -moz-linear-gradient(top, rgb(209, 209, 209), rgb(149, 149, 149));
background-image: -o-linear-gradient(top, rgb(209, 209, 209), rgb(149, 149, 149));
background-image: -ms-linear-gradient(top, rgb(209, 209, 209), rgb(149, 149, 149));
background-image: linear-gradient(top, rgb(209, 209, 209), rgb(149, 149, 149));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d1d1d1', EndColorStr='#959595');
box-shadow: 0 1px 0 rgba(255,255,255, .3);
/* ---------- */
box-shadow: 0 1px 0 rgba(226,226,226,1) inset;
}

header p {
  margin-top: -30px;
  color: #212121;
 font-size: 13px;
 font-weight: 500;
 text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255, .4);  
}

input[type="search"] {
 margin-left: 10px;
 margin-top: 20px;
 box-shadow: 0 1px 0 rgba(255,255,255, .4);
 border: 1px solid red;
}

section {
    color: rgba(215,215,215,1);
...