mailcatcher/public/stylesheets/application.scss

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }

body { line-height: 1; background: #eee; color: #000; font-size: 12px; font-family: Helvetica, Arial, sans-serif; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0px; }
caption, th, td { text-align: left; font-weight: normal; }

html, body {
  width: 100%;
  height: 100%;
}
body {
  display: -webkit-box; display: -moz-box; display: box;
  -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
}
#message {
  display: -webkit-box; display: -moz-box; display: box;
  -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
  -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}
#message iframe {
  display: -webkit-box; display: -moz-box; display: box;
  -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

#mail {
  height: 10em;
  overflow: auto;
  background: #fff;
  border-bottom: 1px solid #ccc;
}
#mail table {
  width: 100%;
}
#mail table thead tr {
  background: #eee;
  color: #333;
}
#mail table thead tr th {
  padding: .25em;
  font-weight: bold;
  color: #666;
  -moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
}
#mail table tbody tr:nth-child(even) {
  background: #f0f0f0;
  color: #333;
}
#mail table tbody tr.selected {
  background: Highlight;
  color: HighlightText;
}
#mail table tbody tr td {
  padding: .25em;
}

#message .metadata {
  padding: 1em;
}
#message .metadata div {
  padding: .25em;
}
#message .metadata div label {
  display: inline-block;
  width: 8em;
  margin-right: .5em;
  text-align: right;
  font-weight: bold;
  color: #666;
  -moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
}
#message .metadata .subject span {
  font-weight: bold;
}
#message .metadata .attachments {
  display: none;
}
#message .metadata .attachments ul {
  display: inline;
}
#message .metadata .attachments ul li {
  display: inline-block;
  margin-right: .5em;
}

#message .actions ul {
  border-bottom: 1px solid #999;
  padding: 0 .5em;
}
#message .actions ul li.tab {
  display: inline-block;
  padding: .5em;
  border: 1px solid #999;
  background: #ddd;
  color: #333;
  border-width: 1px 1px 0 1px;
  cursor: pointer;
  -moz-text-shadow: 0 1px 0 #eee; -webkit-text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
}
#message .actions ul li.tab:not(.selected):hover {
  background-color: #ddd; }
#message .actions ul li.tab.selected {
  background: #fff;
  color: #000;
  height: 13px;
  -moz-box-shadow: 1px 1px 0 #ccc; -webkit-box-shadow: 1px 1px 0 #ccc; box-shadow: 1px 1px 0 #ccc;
  margin-bottom: -2px;
}
#message .actions ul li.button {
  display: inline-block;
  float: right;
  margin: 0 .25em;
}
#message .actions ul li.button a {
  display: inline-block;
  padding: .25em .5em;
  border: 1px solid #999;
  background: #ddd;
  color: #333;
  text-decoration: none;
  -moz-text-shadow: 1px 1px 0 #eee; -webkit-text-shadow: 1px 1px 0 #eee; text-shadow: 1px 1px 0 #eee;
  -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: 1px 1px 0 #ccc;
}
#message .actions ul li.button a:hover {
  background: #fff;
  -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
#message .actions ul li.button a:active {
  margin: 1px -1px -1px 1px;
  -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

#message .body {
  width: 100%;
  min-height: 20em;
  height: 100%;
  background: #fff;
}