/*
    This file is part of Thingshare, a federated system for sharing data for home manufacturing (e.g. 3D models to 3D print)
    https://thingshare.ion.nu/
    Copyright (C) 2020-2021  Alicia <alicia@ion.nu>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
body {
  margin:0px;
  font-family:arial,sans;
}
#logo {
  height:60px;
  background-color:#00ff00;
}
#user {
  display:block;
  margin-left:10px;
}
#search {
  padding-top:0px;
  display:block;
  margin-left:10px;
}
#search input {
  vertical-align:top;
  height:calc(1em + 20px);
}
#search button {
  padding:0px;
  border:none;
  background:transparent;
  height:100%;
}
#search button>img {
  height:calc(1em + 10px);
  margin-top:5px;
}
#menu>a {
  margin-left:10px;
  display:block;
}
#user>a {
  margin-right:10px;
  display:block;
}
#loginform {
/* This doesn't work as intended, but it seems to work ok for now */
  padding-top:12%;
}
.error {
  color:#f00000;
}
#content {
  width:98%;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
}
small.subheader {
  color:#a0a0a0;
  font-size:14px;
}
div.thing {
  display:inline-block;
  width:240px;
  height:240px;
  border:solid 1px #000000;
  margin:5px;
  vertical-align:top;
  position:relative;
}
div.thing-add {
  text-align:center;
}
div.thing-add>a {
  font-size:240px;
  text-decoration:none;
}
div.paragraph {
  margin-top:14px;
  margin-bottom:14px;
}
nav {
  background: #d0d0d0; /* For non-css3 browsers */
  background: -webkit-linear-gradient(#e0e0e0, #c0c0c0);
  background: -o-linear-gradient(#e0e0e0, #c0c0c0);
  background: -moz-linear-gradient(#e0e0e0, #c0c0c0);
  background: linear-gradient(#e0e0e0, #c0c0c0);
  position:sticky;
  top:0px;
  z-index:10;
  overflow:hidden;
  height:32px;
}
nav:hover {
  height:auto;
  padding-bottom:10px;
  font-size:30px;
}
nav>div>a {
  color:#000000;
}
div.boxbottom {
  position:absolute;
  bottom:0px;
  text-align:center;
  width:100%;
  background-color:#ffffffa0;
  z-index:1;
}
div.boxtop {
  position:absolute;
  top:0px;
  background-color:#ffffffa0;
  z-index:1;
}
div.thing>a>img {
  width:100%;
  height:100%;
  object-fit:contain;
}
span.blacklist {
  background-color:#ff0000;
}
div.sidebar {
  margin:5px;
  border:solid 1px #ffffff;
}
span.code {
  font-family:monospace;
  background-color:#00ff0040;
}
div.footer {
  padding-top:80px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:20px;
  clear:both;
}
div.c2 {
  display:inline-block;
  width:50%;
}
div.top {
  vertical-align:top;
}
div.footnote {
  font-size:10px;
  text-align:center;
}
table {
  width:100%;
}
tr:nth-child(even) {
  background-color:#e8e8e8;
}
div.message:nth-child(even) {
  background-color:#e8e8e8;
}
div.message_unread {
  background-color:#d0ffd0 !important;
}
a.highlight {
  font-weight:bold;
}
a.pagenav {
  margin-right:12px;
}
div.dropdown-container {
  display:inline-block;
  vertical-align:top;
  margin-top:-8px;
  width:32px;
  height:32px;
}
div.dropdown {
  width:32px;
  height:32px;
  overflow:hidden;
  position:absolute;
}
div.dropdown:hover {
  height:258px;
  width:auto;
  background-color:#e0e0e0;
  border-radius:5px;
  box-shadow:#000000 0px 15px 20px 0px;
  z-index:20;
}
div.dropdown>div.dropdown-content {
  height:218px;
  padding:4px;
  padding-top:0px;
  overflow-y:auto;
}
div.notification {
  display:inline;
}
div.notification-unseen {
  font-weight:bold;
}
img#menuicon {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
@media only screen and (min-width: 750px) {
  #content {
    width:80%;
  }
  nav {
    position:static;
    overflow:visible;
    height:auto;
  }
  nav:hover {
    padding-bottom:0px;
    font-size:16px;
  }
  nav>div {
    padding: 10px;
    display:inline-block;
  }
  #user { float:right; }
  #search { float:right; }
  img#menuicon {
    display:none;
  }
  #menu>a {
    display:inline;
  }
  #user>a {
    display:inline;
  }
  div.sidebar {
    float:left;
    width:240px;
  }
}