collectionstyle.css

html,body,button {font-size: 10pt; font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;}
h1,h2,h3,h4,h5,h6 {font-family: Consolas,"Helvetica", "sans-serif"; color:#c95;}

h3 {margin-left: 2ex;}
h4 {margin: 3ex 0ex 1ex 6ex;}

a {text-decoration: none; color:#c95; font-weight: bold;}
a:hover {text-decoration: underline;}

hr {
  margin: 20px 0px 20px;
  border: 2px solid #c95;
  border-radius: 2px;
}

body {
  margin: 0px;
  width: 600px;
  max-width: 100vw;
  background-color:#765;
}

main {
  padding: 0px 0px 10px 10px;
}

/* Titles & Header */
nav {
  padding:10px;
  position:fixed;
  left: 0px;
  top: 0px;
  background-image: url("images/carabiner-header-image.png");
  width: 580px;
}

#page-nav {
  margin: 10px 0px 0px;
  text-align: center;
}

#titleimg {
  max-width: 800px;
  width: 100vw;
}

#carabiner-page-header, #index-page-header {
  background-image: url("images/carabiner-header-image.png");
  width: 600px;
  height: 150px;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#carabiner-page-title, #index-page-title {
  font-family: Consolas;
  font-size: large;
  text-align: center;
  padding-top: 20px;
}

#index-page-header {
  width: 800px;
  max-width: 800px;
  background-size: cover;
  height: 200px;
}

h3.criterion {
  margin: 4ex 2ex 0ex;
}

p.about-page, ul.timeline, div.thought p {
  margin:1ex 2ex 1ex 6ex;
}

div.term p {
  margin:1ex 4ex 3ex 4ex;
}

div.example p {
  margin:1ex 6ex 3ex 6ex;
}

ul.timeline {
  list-style-type: none;
  margin-left: 14ex;
  text-indent: -7ex;
}

/* Tables */
table {
  border-spacing: 0;
  border: 0px solid #654;
  background-color:#fed
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

.indextable {
  max-width: 780px;
  width: 100vw;
}

td.description {
  text-align: left;
  width: 400px;
}

.carabiner-info, .terminology-table {
  width: 580px;
  max-width: 80vw;
}

.carabiner-info td {
  text-align: right;
}

.carabiner-info td:nth-child(even), .carabiner-info th:nth-child(even) {
  text-align: left;
  padding-left: 2ex;
}

.carabiner-info-column {
  max-width: 100px;
}

.profile-table td:nth-child(odd), .profile-table th:nth-child(odd) {
  text-align: left;
  padding-left: 2ex;
}

.shape-table td:nth-child(4), .shape-table th:nth-child(4)
{
  text-align: left;
}

/* Other */
div.carabiner-photos { /* I'm not proud of this */
  margin-bottom: -3px;
}

.carabiner-flex-grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 650px;
}

img.carabiner-photo {
  width: 290px;
}

.carabiner-photo-caption {
  margin-bottom: 0px;
  text-align: center;
}

button {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
}

.align-left {
  text-align:left;
}

.align-right {
  text-align:right;
}

.wide-col {
  width: 400px
}

div.flex-col {
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}

.img-box {
  display: flex;
  padding: 1ex 2ex 2ex;
  flex-direction: row;
  align-content: space-around;
  justify-content: space-around;
}

img.other-thoughts {
  max-width: 400px;
}

.box-border {
  border:2px solid #c95;
}



/* Tooltips */
.tooltip { /* Tooltip container */
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext { /* Tooltip text */
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Media Screen Sizing */
@media (min-width:0px)  {
}
@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
}
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */
}
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}
@media (min-width:720px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ 
}