@import url('https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy');

body {
  font-family:'Sorts Mill Goudy',Times, Serif;
  text-align:center;
  color:black;
  background-color:WhiteSmoke;
}

a {
  color:DarkRed;
  font-weight:bold;
  text-decoration:none;
}

div#container {
  position:fixed;
  display:block;
  height:100%;
  width:100%;
  margin:0px;
  background-color:WhiteSmoke;
}
div#container.tablet,
div#container.phone {
  position:relative;
}

div#ism {
  font-size:250%;
  padding-left:1em;
  padding-right:1em;
  padding-top:0.7em;
  height:40%;
  display:block;
}
div#ism.tablet {
  font-size:300%;
}
div#ism.phone {
  font-size:350%;
}

div#button-container {
  display:block;
  padding-top:1em;
  padding-bottom:1em;
  height:20%;
  margin-left:auto;
  margin-right:auto;
}

button#more {
  font-family:'Sorts Mill Goudy',Times, Serif;
  color:black;
  border-radius:0.3em;
  vertical-align:middle;
  font-size:x-large;
  outline:0px;
  padding-left:1em;
  padding-right:1em;
  padding-top:0.4em;
  padding-bottom:0.4em;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
  border:2px LightGray solid;
}
button#more.tablet {
  min-width70%;
  font-size:xx-large;
}
button#more.phone {
  font-size:xx-large;
  min-width:70%;
}
button#more:hover {
  border:2px Gray solid;
  background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 100%);
  background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 100%);
  background: linear-gradient(to bottom, #cccccc 0%,#eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
}
button#more.disabled {
  color:Gray;
  border:2px transparent solid;
  background: WhiteSmoke;
}

div#footer {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  font-size:small;
  padding:0.5em;
  max-height:10%;
  background-color:rgba(255,255,255,0.8);
}
div#footer.tablet {
  font-size:medium;
}
div#footer.phone {
  font-size:large;
}
div#footer a {
  margin-left:2em;
}
div#footer img {
  max-height:1em;
  max-width:1em;
  vertical-align:middle;
}

a.url-holding-pen {
  display:none;
}

div#link-previews {
  padding-top:1em;
  display:block;
  white-space:nowrap;
  margin:0px;
  width:100%;
  height:30%;
}

div#link-previews div.preview {
  display:inline-flex;
  width:30%;
  height:4em;
  padding:0.3em;
  border-radius:0.2em;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 100%);
  background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 100%);
  background: linear-gradient(to bottom, #cccccc 0%,#eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
  cursor:pointer;
  border:2px LightGray solid;
  overflow:hidden;
  visibility:hidden;
  position:relative;
}
div#link-previews div.preview.tablet {
  width:48%;
  font-size:large;
  height:auto;
  display:inline-block;
}
div#link-previews div.preview.phone {
  width:70%;
  height:auto;
  font-size:large;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
div#link-previews div.preview:hover {
  background: #eeeeee;
}
div#link-previews div.preview a {
  height:100%;
  width:100%;
  display:block;
}
div#link-previews div.preview div {
  white-space:normal;
  width:69%;
  height:100%;
  float:right;
  font-size:small;
  display:inline-block;
}
div#link-previews div.preview span {
  position:absolute;
  right:0.3em;
  bottom:0.1em;
  font-size:x-small;
  color:DimGray;
  font-family:Helvetica,Arial,sans-serif;
}
div#link-previews div.preview.tablet div {
  font-size:large;
}
div#link-previews div.preview.tablet span {
  font-size:medium;
}
div#link-previews div.preview.phone div {
  font-size:x-large;
}
div#link-previews div.preview.phone span {
  font-size:large;
}
div#link-previews div.preview img {
  display:inline-block;
  max-height:100%;
  max-width:30%;
  float:left;
  vertical-align:middle;
  border-radius:0.2em;
}

img#mugtitle {
  margin-left:auto;
  margin-right:auto;
  display:inline-block;
  max-width:30%;
  float:right;
}