@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

body
{
  padding-top:0;
  background-color:transparent;
}

h1
{
  margin-bottom: 20px;
}

div.paragraph
{
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

#logo_title img
{
  height:auto;
  width:350px;
  max-width: 80%;
}

#clock
{
  color: #F2F2F2;
  position: fixed;
  font-weight: bolder;
  font-size: 200px;
  right: 17px;
  top: -54px;
  z-index:-1;
}

#flash
{
  position:fixed;
  height:50px;
  width: 300px;
  top:50%;
  left:50%;
  margin-top: -25px;
  margin-left: -150px;
  background-color:#555;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
  color:#fff;
  text-align:center;
  padding-top:15px;
  border-radius:25px;
  display:none;
}

.semi-transparent
{
    opacity: 0.5;
}

#deleteNode
{
  position:absolute;
  display:none;
  left:0;
  top:0;
  -webkit-transition:all 0.4s;
  transition:all 0.4s;
  transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.editable:focus
{
  outline:none;
}

#note
{
  margin-top:50px;
}

#loadNote
{
  position:fixed;
  display:block;
  height:100%;
  width:200px;
  overflow-y:scroll;
  background-color:#555;
  top: 0;
  right:0;
  padding-top:10px;
  padding-left:10px;
  -webkit-transition:right 0.4s;
  transition:right 0.4s;
  transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  color:#ddd;
  -webkit-box-shadow: -5px -1px 31px -2px rgba(51,51,51,1);
  -moz-box-shadow: -5px -1px 31px -2px rgba(51,51,51,1);
  box-shadow: -5px -1px 31px -2px rgba(51,51,51,1);
}

#loadNote.closed
{
  right:-200px;
  -webkit-box-shadow: 0px 0px 0px -2px rgba(51,51,51,1);
  -moz-box-shadow: 0px 0px 0px -2px rgba(51,51,51,1);
  box-shadow: 0px 0px 0px -2px rgba(51,51,51,1);
}

#toolbox
{
  position:fixed;
  display:block;
  background-color:transparent;
  bottom: 0;
  right:200px;
  padding-top:0px;
  padding-left:0px;
  -webkit-transition:right 0.4s;
  transition:right 0.4s;
  transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  color:#ddd;
  list-style: none;
}

#toolbox.closed
{
  right:0px;
}

#toolbox.collapsed .toolbox-btn
{
  position:absolute;
  bottom:0 !important;
}

#collapseToolbox
{
  background-color:#427BE7;
  padding-top: 13px;
  padding-left: 3px;
}

#toolbox .toolbox-btn
{
  position:absolute;
  bottom:0px;
  right:0px;
  -webkit-box-shadow: 0px 0px 8px -3px rgba(51,51,51,0.8);
  -moz-box-shadow: 0px 0px 8px -3px rgba(51,51,51,0.8);
  box-shadow: 0px 0px 8px -3px rgba(51,51,51,0.8);
}

.toolbox-btn, .toolbox-btn:active, .toolbox-btn:visited, .toolbox-btn:focus
{
  display:block;
  text-decoration:none;
  -webkit-box-shadow: 0px 0px 8px -3px rgba(51,51,51,1);
  -moz-box-shadow: 0px 0px 8px -3px rgba(51,51,51,1);
  box-shadow: 0px 0px 8px -3px rgba(51,51,51,1);
  width:50px;
  height:50px;
  border-radius:25px;
  background-color:#7695b3;
  margin:10px;
  text-align: center;
  padding-top: 10px;
  color: #fff;
  font-size: 20px;
  border:medium none;
  -webkit-transition:all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  outline:none;
}

.toolbox-btn:hover
{
  text-decoration:none;
  color: #fff;
  -webkit-box-shadow: 0px 0px 12px -3px rgba(51,51,51,1);
  -moz-box-shadow: 0px 0px 12px -3px rgba(51,51,51,1);
  box-shadow: 0px 0px 12px -3px rgba(51,51,51,1);
}

#openNote
{
  background-color:#555;
}

#login-btn
{
  margin: 10px auto;
  padding-top:3px;
  background-color:#7695b3;
  color:#fff;
}

#newTitle, #newHighlight, #newCode, #newParagraph
{
  background-color:#7695b3;
}

#newNote
{
  background-color:#a4b376;
}

#logout
{
  background-color:#b37680;
  padding-top:11px;
}

#save
{
  background-color:#a4b376;
  padding-top: 13px;
  padding-left: 4px;
  position:fixed;
  top:0px;
  left:0px;
}

#noteList
{
  list-style: none;
}

#noteList li
{
  cursor: pointer;
  padding: 5px 20px 5px 5px;
  border-bottom: 1px solid #666;
  position: relative;
}

a.deleteNote {
  position: absolute;
  right: 8px;
  top: 5px;
  display: block;
  width: 10px;
  color: #b37680;
}

html.no-touch a.deleteNote
{
  display:none;
}

html.no-touch #noteList li:hover a.deleteNote
{
  display:block
}

.navbar-inverse .navbar-nav>li>a {
  color: #3D3D3D;
}

.navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom
{
  background-image: none;
  background-color: #ccc;
  border-bottom: 1px solid #DFDFDF;
}

.navbar-inverse .navbar-toggle {
  border-color: #E0E0E0;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #B2B2B2;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: #ECECEC;
  box-shadow: 0px 4px 15px rgba(180, 180, 180, 89);
}

input.fancy-input
{
  width: 50%;
  margin: 0 auto;
  display: block;
  background-color: transparent;
  border: 0;
  border-bottom: 3px solid #fff;
  color: #fff;
  outline: none;
  text-align: center;
}

.notesLogin #login input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset;
}

#login
{
  text-align:center;
}

.notesLogin
{
  background: url(/static/notes/testFS2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.notesLogin body
{
  color:#fff;
  text-shadow: 0px 0px 3px rgba(71, 74, 74, 0.77);
  margin-top:10%;
}

/* button positions */
#toolbox .toolbox-btn#collapseToolbox
{
  bottom:0;
}

#toolbox .toolbox-btn#logout
{
  bottom:60px;
}

#toolbox .toolbox-btn#newNote
{
  bottom:120px;
}

#toolbox .toolbox-btn#newHighlight
{
  bottom:180px;
}

#toolbox .toolbox-btn#newTitle
{
  bottom:240px;
}

#toolbox .toolbox-btn#newParagraph
{
  bottom:300px;
}

#toolbox .toolbox-btn#openNote
{
  bottom:360px;
}

@media only screen and (max-height: 400px) and (orientation: landscape) {
  /* rules in landscape orientation */
  .notesLogin body
  {
    margin-top:0;
  }

  #logo_title img
  {
    height:100px;
    width:100px;
  }

}

@media only screen and (max-height: 400px) {
  /* button positions rounded */
  #toolbox.collapsed .toolbox-btn
  {
    right:0 !important;
  }

  #toolbox, #toolbox .toolbox-btn
  {
    margin-bottom:3px;
  }

  #toolbox .toolbox-btn#collapseToolbox
  {
    bottom:0;
    right:106px;
  }

  #toolbox .toolbox-btn#logout
  {
    bottom:39px;
    right:66px;
  }

  #toolbox .toolbox-btn#newNote
  {
    bottom:88px;
    right:37px;
  }

  #toolbox .toolbox-btn#newHighlight
  {
    bottom:143px;
    right:13px;
  }

  #toolbox .toolbox-btn#newTitle
  {
    bottom:197px;
    right:2px;
  }

  #toolbox .toolbox-btn#newParagraph
  {
    bottom:250px;
    right:0px;
  }

  #toolbox .toolbox-btn#openNote
  {
    display:none;
  }
}

#import {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
}

#import input {
  display: none;
}

#import label {
  font-size: 2em;
  background-color: rgb(218, 158, 138);
  border-radius: 10%;
  padding: 30px;
  cursor: pointer;
}

@media print {
  #loadNote, #toolbox, .toolbox-btn, #clock, #import
  {
    display:none !important;
  }

  div.jumbotron
  {
    background: #eee none no-repeat right top !important;
  }
}

@media (min-width: 1200px)
{
  .container {
    width: 970px;
  }
}