ort.css

/* Main Styles for the body of the document */
/* These are used to set the responsiveness of the document */
html {
  padding: 0em;
  margin: 0em;
  background-color: white;
  width: auto;
  height: auto;
  font-family: "Roboto", Arial, sans-serif;
}

body {
  height: 100vh;
  max-width: 100vw;
  background: white;
  position: relative;
  margin: 0em;
  padding: 0em;
}

/* Font CSS */
/* Browser knows best, in most cases. Esp. with responsive text. */
h1 {

}

h2 {
  
}

h3 {
  
}

h4 {
  
}

h5 {
  
}

h6 {
  
}

p {
  
}

code {
  
}

pre {
  
}

/* Heading CSS */
header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #2196f3;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: stretch;
}

header > h1 {
  width: auto;
  display: inline-block;
  float: left;
  vertical-align: middle;
  text-align: center;
}

.reference-buttons {
  display: flex;
  width: auto;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: stretch;
  float: right;
}

.reference-button {
  flex: auto;
  padding: 1rem;
  margin: 1rem;
  color: white;
  text-decoration: none;
}

.reference-button > a {
  color: white;
  text-decoration: none;
}

.reference-button > a:hover {
  color: white;
}

.reference-button > a:active {
  color: white;
}


/* Main body of document */
.folder-view {
  background: white;
  display: flex;
  margin: 1rem;
}

.folder-names {
  background: #DDD;
  flex: 1;
  min-height: 80vh;
}

#folder-names-list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  text-align: center;
  position: relative;
}

#folder-names-list > li:last-child {
  font-weight: bold;
  position: relative;
  bottom: 0px;
}

.folder-name {
  cursor: pointer;
  padding: 0.5em;
}

#folder-create-button {
  cursor: pointer;
  padding: 0.5em;
}

.folder-references {
  background: #EEE;
  overflow: scroll;
  flex: 3;
  max-height: 80vh;
}

#folder-create-folder-dialog {
}

#folder-display {
  padding: 1rem;
}

#folder-display > button {
  display: block;
}

#folder-create-reference-dialog {
}

.dialog-hide {
  display: none;
}

#reference-form > input {
  display:block;
  margin: 0px auto;
  width: 80%;
}

#folder-display > textarea {
  width: 80%;
  display: block;
  margin: 1rem auto;
  padding: 1rem;
}

table {
  margin: auto;
  width: 75%;
  border-collapse: collapse;
}

table > tr {
  border: 1px solid black;
}
table > tr > th {
  border-right: 1px solid black;
}
table > tr > * {
  padding: 0.5rem;
  text-align: left;
  border-collapse: collapse;
}

.reference {
  background: #bbdefb;
  margin: 1rem auto;
  width: 50%;
  padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.reference > h4 {
  display: block;
  width: 80%;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.reference > button {
  display: inline-block;
  margin: 0.5rem 0px 0.25rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.ref_par {
  clear: both;
  display: block;
  width: 90%;
  margin: 1rem auto;
}

#folder-create-reference-dialog > select {
  width: 40%;
  margin: 0px auto;
  display: inline-block;
  float: left;
}

#folder-create-reference-dialog > button {
  width: 40%;
  margin: 0px auto;
  display: inline-block;
  float: right;
}

#folder-create-folder-dialog > h2 {
  display: block;
  margin: 1rem;
}

#folder-create-folder-dialog > input {
  display: block;
  width: 70%;
  margin: 0px auto;
}

#folder-create-folder-dialog > select {
  display: block;
  width: 70%;
  margin: 0px auto;
}

#folder-create-folder-dialog > button {
  display: block;
  width: 70%;
  margin: 0px auto;
}

#folder-create-reference-dialog {
  padding: 1rem;
} 



/*
Breakpoints for each device scale 
*/

/*
xsmall
*/
@media screen and (max-width: 25em){
  header {
  
  }

  .reference-buttons {
    flex-direction: column;
  }

  .reference-button {
    margin: 0px;
  }
  
}

/*
small
*/
@media screen and (max-width: 39.9375em) {
  header {
    flex-direction: column;
  }

  .reference-buttons {
    display: flex;
  }

  .folder-view {
    display: block;
  }

  .folder-names {
    min-height: 0px;
    margin: 0rem 0rem 1rem 0rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }

  .folder-references {
    height: 50vh;
  }

  .reference {
    width: auto;
  }

  .reference > table {
    width: 99%;
  }

  .folder-controls > button {
    display: block;
    width: 90%;
    margin: 1rem auto;
  }

  .folder-headings {
    display: block;
    width: 90%;
    margin: 1rem auto;
  }

  .ref_par {
    text-align: center;
  }

  #folder-create-folder-dialog > h2 {
  display: block;
  margin: 1rem;
}

  #folder-create-folder-dialog > input {
    display: block;
    width: 90%;
    margin: 0px auto;
  }
  
  #folder-create-folder-dialog > select {
    display: block;
    width: 90%;
    margin: 0px auto;
  
  }
  
  #folder-create-folder-dialog > button {
    display: block;
    width: 90%;
    margin: 0px auto;
  }
}

/*
medium and above
*/
@media screen and (min-width: 40em) {
  
}

/*
medium only
*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .reference {
    width: 90%;
  }
}

/*
large and above
*/
*/
*/

@media screen and (min-width: 64em) {
  
}

/*
Large only
*/
@media screen and (min-width: 64em) and (max-width: 74.9375em){
  
}