html, body { font: 12pt Helvetica,sans-serif; }
img { vertical-align: bottom; }
.alert { text-align: center; padding: 8px; color: #500; }

a:link    { color: #112233 }  /* unvisited link */
a:visited { color: #555555 }  /* visited link */
a:hover   { text-decoration: none; }  /* mouse over link */
a:active  { color: #555555 }  /* selected link */
h1 a { text-decoration: none; color: black; }

header, footer { text-align: center; }
header { text-shadow: rgba(64, 64, 64, 0.5) 2px 2px 2px; }
.search { margin: auto; text-align: center; width: 80%; }
.search input, .search select { font-size: larger; }
input, select { border: 1px inset black; }
input.text { height: 1.5em; }
#q { width: 60%; }

#results {
  margin: auto; width: 80%;
  list-style: none outside;
}
#results li.card {
  border: 2px solid black;
  padding: 0.5em;
  margin: 0.25em;
  border-radius: 8px;
}

.pager { display: block; margin: 1em auto; text-align: center; }
.pager li { display: inline; }
.pager li.current { font-size: larger; font-weight: bold; }

.name { font-weight: bold; display: inline-block; width: 80%; }
.cost { float: right; display: inline-block; }
.cost img { height: 1.4em; }
.type img { height: 1.5em; }
.type {
  font-variant: small-caps;
  font-size: smaller;
  padding: 0; margin: 0;
}
.text img { height: 1.2em; }

.colorless { background-color: #ddd; }
.white { background-color: #fffad6; }
.blue { background-color: #c0e8fb; }
.black { background-color: #aaa; }
.red { background-color: #fabca8; }
.green { background-color: #addbbd; }
.multicolored { background-color: #ffe570; }

/* Gradients */
.white-blue {
  background: -webkit-gradient(linear, left top, right top,
                               from(#fffad6), to(#c0e8fb));
}
.white-black {
  background: -webkit-gradient(linear, left top, right top,
                               from(#fffad6), to(#aaaaaa));
}
.blue-black {
  background: -webkit-gradient(linear, left top, right top,
                               from(#c0e8fb), to(#aaaaaa));
}
.blue-red {
  background: -webkit-gradient(linear, left top, right top,
                               from(#c0e8fb), to(#fabca8));
}
.black-red {
  background: -webkit-gradient(linear, left top, right top,
                               from(#aaaaaa), to(#fabca8));
}
.black-green {
  background: -webkit-gradient(linear, left top, right top,
                               from(#aaaaaa), to(#addbbd));
}
.red-green {
  background: -webkit-gradient(linear, left top, right top,
                               from(#fabca8), to(#addbbd));
}
.red-white {
  background: -webkit-gradient(linear, left top, right top,
                               from(#fabca8), to(#fffad6));
}
.green-white {
  background: -webkit-gradient(linear, left top, right top,
                               from(#addbbd), to(#fffad6));
}
.green-blue {
  background: -webkit-gradient(linear, left top, right top,
                               from(#addbbd), to(#c0e8fb));
}

/* Card Preview */
#preview {
  position: absolute;
  display: none;
}