@import "shared";

/*    Default Layout: 992px.
    Gutters: 24px.
    Outer margins: 48px.
    Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */


.inlet_slider {
  z-index: 1010;
  margin:0 !important;
  padding: 0 !important;
  
}
.inlet_slider input::-webkit-slider-thumb{
  margin-top: -19px;
}
.ColorPicker { 
 -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
  box-sizing: content-box; 
}

#display {
  //margin-top: 22px;
  margin-top: -12px;
  margin-bottom: 0;
  padding-top: @titleheight;
  //border-radius: 6px;
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
}

@panelwidth: 45%;
@fileheight: 2.4em;

#panel {
  padding-top: @titleheight;
  //width: 30%;
  width: @panelwidth;
  //min-width: 300px;
  position: fixed;
  right: 0;
  bottom: 0;
  height: 100%;
  //overflow-y: hidden;

  border-radius: 10px15;

  background-color: white;

  -webkit-box-shadow:-3px 0 6px 1px rgba(0,0,0,0.15); /* Saf3.0+, Chrome */
     -moz-box-shadow:-3px 0 6px 1px rgba(0,0,0,0.15); /* FF3.5+ */
          box-shadow:-3px 0 6px 1px rgba(0,0,0,0.15); /* Opera 10.5, IE 9.0 */

  #files {
        z-index: 6;
        position: fixed;
        top: @titleheight - .7em;
        padding: 6px 4px;
        border-bottom: 2px solid rgba(0,0,0,0.1);
        margin-top: 0;
        background-color: rgba(245,245,245,0.1);
        height: @fileheight;
        overflow-y: auto;
        width: 100%;
        overflow: hidden;
        background-color: transparent;
        /*background-color: #ebebeb;*/
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(235, 235, 235, 1.00)), to(rgba(255, 255, 255, 0.16)));
        background-image: -webkit-linear-gradient(top, rgba(235, 235, 235, 1.00), rgba(255, 255, 255, 0.16));
        background-image: -moz-linear-gradient(top, rgba(235, 235, 235, 1.00), rgba(255, 255, 255, 0.16));
        background-image: -o-linear-gradient(top, rgba(235, 235, 235, 1.00), rgba(255, 255, 255, 0.16));
        background-image: -ms-linear-gradient(top, rgba(235, 235, 235, 1.00), rgba(255, 255, 255, 0.16));
        background-image: linear-gradient(top, rgba(235, 235, 235, 1.00), rgba(255, 255, 255, 0.16));
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ebebeb', EndColorStr='#ffffff');

        -webkit-box-shadow:inset 0 -4px 1em 1px rgba(5,5,5,0.15); /* Saf3.0+, Chrome */
           -moz-box-shadow:inset 0 -4px 1em 1px rgba(5,5,5,0.15); /* FF3.5+ */
                box-shadow:inset 0 -4px 1em 1px rgba(5,5,5,0.15); /* Opera 10.5, IE 9.0 */


        //width: 100%;
        //overflow-x: scroll;
        //overflow-y: hidden;
  }
  #file-list {
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;

    //margin-top: @titleheight;
    list-style: none;
    font-size: 0.6em;
    padding-bottom: 6px;
    padding-right: 32px;

    margin-bottom: 10px;



    li {
      opacity: 0.8;
      cursor: pointer;
      display: inline-block;
      border: none;
      padding: 3px 7px;
      line-height: 1.5em;
      border-radius: 4px;
      margin: 2px 1px;

      text-shadow:rgba(245, 245, 245, 0.5) 0px 1px 1px;

      /*background-color: #717071;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(113, 112, 113, 0.72)), to(rgba(227, 226, 228, 0.60)));
      background-image: -webkit-linear-gradient(top, rgba(113, 112, 113, 0.72), rgba(227, 226, 228, 0.60));
      background-image: -moz-linear-gradient(top, rgba(113, 112, 113, 0.72), rgba(227, 226, 228, 0.60));
      background-image: -o-linear-gradient(top, rgba(113, 112, 113, 0.72), rgba(227, 226, 228, 0.60));
      background-image: -ms-linear-gradient(top, rgba(113, 112, 113, 0.72), rgba(227, 226, 228, 0.60));
      background-image: linear-gradient(top, rgba(113, 112, 113, 0.72), rgba(227, 226, 228, 0.60));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#717071', EndColorStr='#e3e2e4');
      */

      /*background-color: #ffffff;*/
      /*background-color: #ffffff;*/
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.00)), to(rgba(66, 66, 66, 0.60)));
      background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(66, 66, 66, 0.60));
      background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(66, 66, 66, 0.60));
      background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(66, 66, 66, 0.60));
      background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(66, 66, 66, 0.60));
      background-image: linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(66, 66, 66, 0.60));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#424242');


      &:hover {
        /*background-color: #ffffff;*/
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.00)), to(rgba(40, 40, 40, 0.73)));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(40, 40, 40, 0.73));
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(40, 40, 40, 0.73));
        background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(40, 40, 40, 0.73));
        background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(40, 40, 40, 0.73));
        background-image: linear-gradient(top, rgba(255, 255, 255, 0.00), rgba(40, 40, 40, 0.73));
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#282828');
      }


    }
    li.active-file {
      opacity: 1 !important;
      border: 1px solid black;
      font-weight: bold;

      /*background-color: #f8f7fa;*/
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(248, 247, 250, 0.60)), to(rgba(169, 168, 169, 0.73)));
      background-image: -webkit-linear-gradient(top, rgba(248, 247, 250, 0.60), rgba(169, 168, 169, 0.73));
      background-image: -moz-linear-gradient(top, rgba(248, 247, 250, 0.60), rgba(169, 168, 169, 0.73));
      background-image: -o-linear-gradient(top, rgba(248, 247, 250, 0.60), rgba(169, 168, 169, 0.73));
      background-image: -ms-linear-gradient(top, rgba(248, 247, 250, 0.60), rgba(169, 168, 169, 0.73));
      background-image: linear-gradient(top, rgba(248, 247, 250, 0.60), rgba(169, 168, 169, 0.73));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f8f7fa', EndColorStr='#a9a8a9');

      -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2); /* Saf3.0+, Chrome */
         -moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2); /* FF3.5+ */
              box-shadow:0 1px 2px 0 rgba(0,0,0,0.2); /* Opera 10.5, IE 9.0 */
    }

    .delete-file {
      z-index: 1000;
    }

    .add-file {
      //position: fixed;
      //top: @titleheight + 0.4em;
      //right: 6px;
      min-width: 32px;
      text-align: center;

      input {
        font-size: 0.9em;
        border-radius: 4px;
        width: 62px;
        background-color: #cccccc;
        outline: none;
        border: 0px solid transparent;
        //border-bottom: 1px solid #999;
        padding:2px 4px;
        text-shadow: none;
      }

      input.error {
          border-bottom: 1px solid red;
      }

    }


    .filetype-js { background-color: #0CADE4; }
    .filetype-css { background-color: #F5660A; }
    .filetype-json { background-color: #FFB913; }
    .filetype-html { background-color: #F6066B; color: #ebebeb;}
    .filetype-coffeescript { background-color: #CDE338; }
  }

  #config {
    font-size: 11px;
    //display: none;
    z-index: 6;
    padding: 2px;
    position: fixed;
    bottom: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(10,10,10,0.2);
    background-color: rgba(255,255,255,0.95);

    width: @panelwidth;
    text-align: center;

    button {
      font-size: 1em;
    }

    .config-content {
      border-bottom: 2px solid #e6e6e6;
      margin-bottom: 1.4em;
      padding-bottom: 0.5em;
    }

    button.active {
      background-image: none;
      text-shadow: none;
      background-color: #999;
      border: 1px solid black;
      color: white;

      /*background-color: #8f8f90;*/
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(143, 143, 144, 0.02)), to(rgba(33, 33, 33, 1.00)));
      background-image: -webkit-linear-gradient(top, rgba(143, 143, 144, 0.02), rgba(33, 33, 33, 1.00));
      background-image: -moz-linear-gradient(top, rgba(143, 143, 144, 0.02), rgba(33, 33, 33, 1.00));
      background-image: -o-linear-gradient(top, rgba(143, 143, 144, 0.02), rgba(33, 33, 33, 1.00));
      background-image: -ms-linear-gradient(top, rgba(143, 143, 144, 0.02), rgba(33, 33, 33, 1.00));
      background-image: linear-gradient(top, rgba(143, 143, 144, 0.02), rgba(33, 33, 33, 1.00));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8f8f90', EndColorStr='#212121');

    }

    #library-links {
      input {
        font-size: 12px;
      }
      .library-title {
        width: 20%;
      }
      .library-url {
        width: 40%;
      }
    }

    #trib-thumbnail {
      width: 42px;
      height: 42px;
    }

    input[type=file] {
      font-size: 10px !important;
      width: 220px;
      margin-left: auto;
      margin-right: auto;
      padding: 2px;
    }

  }
}
#code {
  //padding: 12px;
  //margin-top: 1.6em;
  margin-top: 45px;
  padding-bottom: 30px;

  //padding-top: @titleheight + 1.5em;
  //padding-bottom: @titleheight + 1.6em;

  //height: 80%;
  height: 100%;
  width: 100%;

  overflow-y: auto;
  overflow-x: auto;

  .editor {
    width: 100%;
    height: 100%;
    padding-bottom: 19%;
    position: absolute;
  }

  .CodeMirror {
    height: 100%;
    //margin-bottom: 40px;
  }
  .CodeMirror-scroll {
    width: 100%;
    //overflow-y: hidden;
    overflow-x: auto;
  }
  
  .CodeMirror-gutter.error {
    border-right: 2px solid red;
  }
  
  .toolbar {
    &.hidden { display: none;}
    font-size: 11px;
  }
  .settings {
    display: none;
  }
}

#library-checklist {
  li {
    text-align: left;

    width: 28%;
    margin: 8px 10px;
    display: inline-block;
  }
}


.fullscreen {
  #panel {
    display: none;
  }
  #display {
    width: 100%;
    height: 100%;
  }
}

#display-controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
}




/*    Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

  body {
    //max-width: 712px;
    //width: 80%;
    //padding: 32px 28px 60px;
    padding: 0;
    font-size: 1.1em;
  }

  #panel #files {
    //height: auto;
  }

  #code {
    .editor {
      padding-bottom: 15%;
    }
  }

}











/*    Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

  body {
    //width: 252px;
    //padding: 24px 34px 60px;
    width: 100%;
    padding: 0;
    //height: auto;
    height: 100%;
    font-size: 1em;
    line-height: 1.5em;

  }

  #display {
    position:relative;
    width: 100%;
  }
  #panel {
    //height: 400px;
    width: 100%;
    padding-top: 0;
    position:relative;

    -webkit-box-shadow:0 0 8px 1px rgba(0,0,0,0.2); /* Saf3.0+, Chrome */
       -moz-box-shadow:0 0 8px 1px rgba(0,0,0,0.2); /* FF3.5+ */
            box-shadow:0 0 8px 1px rgba(0,0,0,0.2); /* Opera 10.5, IE 9.0 */

    border-radius: 10px;
    #files {
      top: 0;
      position: relative;
      width: 100%;
    }
    #code {
      margin-top: 2px;

      .editor {
        padding: 0;
      }

      .CodeMirror {
        margin-bottom: 0;
      }
    }
  }

  #inlet-author {
    display: none;
  }
  #user-avatar { display: none;}
  #current-username {
    display: none;
  }
  #author-avatar {
    display: none;
  }

  #panel #files {
    height: auto;
  }

  #panel #config {
    position: static !important;
    width: 100%;

  }
}












/*    Wide Mobile Layout: 480px.
    Gutters: 24px.
    Outer margins: 22px.
    Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 479px) and (max-width: 767px) {
  body {
    padding: 0;
  }
}

#container input, textarea, select {
    border: 2px solid rgba(0,0,0,0.2);
    padding: 0.5em;
    margin: 4px 8px;
    font-size: 15px;
    line-height: 1.2em;
    width: 13em;
    -webkit-appearance: none;
    -webkit-box-shadow: 1px 1px 1px #fff;
    -webkit-border-radius: 0.5em;
    outline: none;

    background-color: #ebebeb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(235, 235, 235)), to(rgb(255, 255, 255)));
    background-image: -webkit-linear-gradient(top, rgb(235, 235, 235), rgb(255, 255, 255));
    background-image: -moz-linear-gradient(top, rgb(235, 235, 235), rgb(255, 255, 255));
    background-image: -o-linear-gradient(top, rgb(235, 235, 235), rgb(255, 255, 255));
    background-image: -ms-linear-gradient(top, rgb(235, 235, 235), rgb(255, 255, 255));
    background-image: linear-gradient(top, rgb(235, 235, 235), rgb(255, 255, 255));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ebebeb', EndColorStr='#ffffff');

    //.transition(0.8s);

    &:hover {
        border: 2px solid rgba(0,0,0,0.4);
    }
    &:active, &:focus {
        border: 2px solid rgba(0,0,0,0.5);
        background-color: #ffffff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(214, 214, 214)));
        background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(214, 214, 214));
        background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(214, 214, 214));
        background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(214, 214, 214));
        background-image: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(214, 214, 214));
        background-image: linear-gradient(top, rgb(255, 255, 255), rgb(214, 214, 214));
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#d6d6d6');

        text-shadow: 0 2px 1px #FFF;
    }
}

@media only screen and (max-width: 767px) {
    input, textarea, select {
        width: 8em;
    }
}





