/* ==========================================================
   Muhammad Siddiqui -- personal site
   Late-2000s "Web 2.0" styling. Hand-written, no framework.
   960px centred column, glossy gradients, rounded corners,
   letterpress headings, tab nav, sidebar widgets.
   ========================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: #dde5ec;
  background-image: url("img/bg.svg");
  background-repeat: repeat;
  font: 13px/1.65 "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  color: #3b4650;
  -webkit-font-smoothing: antialiased;
}

a { color: #2274a5; text-decoration: none; }
a:hover { color: #f26522; text-decoration: underline; }

img { border: 0; max-width: 100%; }

code {
  font-family: Monaco, Consolas, "Courier New", monospace;
  font-size: 11px;
  background: #f2f6f9;
  border: 1px solid #e0e8ee;
  border-radius: 3px;
  padding: 1px 4px;
  color: #48606f;
}

/* ---------- shell ---------- */

#wrap {
  width: 960px;
  margin: 26px auto 44px auto;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: 0 4px 18px rgba(30, 50, 70, 0.32);
  overflow: hidden;
}

/* ---------- header ---------- */

#header {
  padding: 24px 26px 20px 26px;
  background: #2a6d9e;
  background: linear-gradient(180deg, #4e9acb 0%, #2f78ac 50%, #29699a 51%, #1f5480 100%);
  border-bottom: 1px solid #17415f;
  position: relative;
  overflow: hidden;
}

#header:after {
  content: "";
  position: absolute;
  left: -60px; top: -110px;
  width: 460px; height: 190px;
  background: rgba(255,255,255,0.07);
  transform: rotate(-14deg);
  pointer-events: none;
}

#header h1 {
  margin: 0;
  font: bold 31px/1.1 "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
  letter-spacing: -0.6px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.18);
}

#header h1 a { color: #ffffff; text-decoration: none; }

#header .tagline {
  margin: 5px 0 0 0;
  font-size: 12.5px;
  color: #bcdcf2;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

#header .headright {
  position: absolute;
  right: 26px;
  top: 28px;
  text-align: right;
  font-size: 11px;
  color: #a9cee8;
}

#header .headright a { color: #dcefff; }

/* ---------- tab navigation ---------- */

#tabs {
  margin: 0;
  padding: 0 20px;
  list-style: none;
  background: #1f5480;
  background: linear-gradient(180deg, #1f5480 0%, #17415f 100%);
  border-bottom: 3px solid #ffffff;
  white-space: nowrap;
}

#tabs li { display: inline-block; margin: 0; }

#tabs a {
  display: inline-block;
  padding: 9px 17px 8px 17px;
  margin: 4px 2px 0 0;
  border-radius: 5px 5px 0 0;
  font-size: 12.5px;
  font-weight: bold;
  color: #cbe4f5;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
  text-decoration: none;
}

#tabs a:hover {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  text-decoration: none;
}

#tabs a.here {
  background: #ffffff;
  color: #1f5480;
  text-shadow: 0 1px 0 #ffffff;
}

#tabs .pill {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: #f26522;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-shadow: none;
  vertical-align: 1px;
}

/* ---------- announcement strip ---------- */

#latest {
  padding: 9px 22px;
  background: #fffbe8;
  border-bottom: 1px solid #ece0b4;
  font-size: 12px;
  color: #6e6034;
}

#latest .flag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #f26522;
  background: linear-gradient(180deg, #f88b46 0%, #f26522 50%, #e05a10 51%, #cc4f08 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

/* ---------- layout ---------- */

#content { padding: 24px 22px 10px 22px; overflow: hidden; }

#main { float: left; width: 604px; }
#side { float: right; width: 288px; }

.clear { clear: both; }

/* ---------- typography ---------- */

h2.pagetitle {
  margin: 0 0 16px 0;
  padding: 0 0 10px 0;
  font: bold 25px/1.2 "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
  color: #1f5480;
  text-shadow: 0 1px 0 #ffffff;
  border-bottom: 1px solid #e3e9ee;
}

#main h3 {
  margin: 26px 0 10px 0;
  padding: 0 0 6px 0;
  font: bold 16px/1.3 "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #2a6d9e;
  text-shadow: 0 1px 0 #ffffff;
  border-bottom: 1px solid #eef2f5;
}

#main h4 {
  margin: 16px 0 5px 0;
  font-size: 13px;
  font-weight: bold;
  color: #55636e;
}

p { margin: 0 0 12px 0; }

ul.body { margin: 0 0 14px 0; padding-left: 20px; }
ul.body li { margin-bottom: 7px; }

.small { font-size: 11.5px; color: #7c8892; }

hr.rule {
  height: 1px;
  border: 0;
  margin: 24px 0;
  background: #e6ebef;
}

/* ---------- cards ---------- */

.card {
  position: relative;
  margin: 0 0 18px 0;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #dde4ea;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.045);
}

.card .cardtitle {
  font: bold 15px/1.35 "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #1f5480;
  padding-right: 108px;
}

.card .cardmeta {
  margin: 3px 0 10px 0;
  font-size: 11.5px;
  color: #86929c;
}

.card .cardwhen {
  position: absolute;
  right: 18px;
  top: 17px;
  font-size: 10.5px;
  color: #98a4ad;
  text-align: right;
}

.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* ---------- callout boxes ---------- */

.note {
  margin: 0 0 18px 0;
  padding: 14px 16px;
  border-radius: 7px;
  border: 1px solid #cfe0ec;
  background: #f4f9fc;
  background: linear-gradient(180deg, #f9fcfe 0%, #eef6fb 100%);
}

.note .notetitle {
  margin: 0 0 7px 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #2a6d9e;
  text-shadow: 0 1px 0 #ffffff;
}

.note p:last-child, .note ul:last-child { margin-bottom: 0; }

.note-amber { border-color: #ecdcae; background: linear-gradient(180deg, #fffdf3 0%, #fdf6df 100%); }
.note-amber .notetitle { color: #97781f; }

.note-green { border-color: #cbe3c6; background: linear-gradient(180deg, #f8fcf7 0%, #eef7ec 100%); }
.note-green .notetitle { color: #48803d; }

/* ---------- quotes ---------- */

blockquote.quote {
  position: relative;
  margin: 0 0 14px 0;
  padding: 14px 18px 13px 50px;
  background: #f7fafc;
  border: 1px solid #dbe6ee;
  border-left: 4px solid #4e9acb;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.55;
  color: #40505c;
}

blockquote.quote:before {
  content: "\201C";
  position: absolute;
  left: 12px;
  top: 2px;
  font: italic bold 52px/1 Georgia, "Times New Roman", serif;
  color: #bad6e8;
}

blockquote.quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 11.5px;
  color: #8592a0;
}

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; margin: 0 0 16px 0; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border: 1px solid #dde4ea;
  border-radius: 6px;
  overflow: hidden;
}

table.data th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #566875;
  text-shadow: 0 1px 0 #ffffff;
  background: linear-gradient(180deg, #fbfcfd 0%, #eaf0f4 100%);
  border-bottom: 1px solid #d5dee5;
}

table.data td {
  padding: 8px 10px;
  border-bottom: 1px solid #eaeef2;
  vertical-align: top;
}

table.data tr:last-child td { border-bottom: 0; }
table.data tr:nth-child(even) td { background: #fafcfd; }

.up   { color: #4a8f3c; font-weight: bold; }
.down { color: #c1662a; font-weight: bold; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid #1d5b87;
  background: linear-gradient(180deg, #6fb2dd 0%, #3d8bc0 50%, #3180b5 51%, #256d9f 100%);
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: bold;
  text-decoration: none !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.16);
  cursor: pointer;
}

.btn:hover { background: linear-gradient(180deg, #7dbde6 0%, #4694c8 50%, #3987bd 51%, #2b74a7 100%); }
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }

.btn-orange {
  border-color: #b04f0b;
  background: linear-gradient(180deg, #fda860 0%, #f47c24 50%, #ea6f14 51%, #d55f09 100%);
}
.btn-orange:hover { background: linear-gradient(180deg, #ffb573 0%, #f78933 50%, #ef7a1e 51%, #dd6a0e 100%); }

.btn-block { display: block; text-align: center; }

/* ---------- ribbons and flags ---------- */

.ribbon {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f88b46 0%, #f26522 50%, #e05a10 51%, #cc4f08 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  vertical-align: 2px;
}

.ribbon-blue { background: linear-gradient(180deg, #6fb2dd 0%, #3d8bc0 50%, #3180b5 51%, #256d9f 100%); }
.ribbon-green { background: linear-gradient(180deg, #8ecb7f 0%, #5da84c 50%, #529c41 51%, #438733 100%); }

/* ---------- sidebar widgets ---------- */

.widget {
  margin: 0 0 18px 0;
  background: #ffffff;
  border: 1px solid #dde4ea;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.widget h4 {
  margin: 0;
  padding: 9px 13px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #4d5f6c;
  text-shadow: 0 1px 0 #ffffff;
  background: linear-gradient(180deg, #fbfcfd 0%, #e9eff4 100%);
  border-bottom: 1px solid #dbe2e8;
}

.widget .inner { padding: 13px; font-size: 12px; }
.widget .inner p:last-child { margin-bottom: 0; }

.widget ul.links { margin: 0; padding: 0; list-style: none; }
.widget ul.links li { border-bottom: 1px solid #eef2f5; }
.widget ul.links li:last-child { border-bottom: 0; }

.widget ul.links a {
  display: block;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: bold;
  color: #2a6d9e;
  text-decoration: none;
}

.widget ul.links a:hover { background: #f5f9fc; color: #f26522; text-decoration: none; }

/* stat readouts */

.stat {
  text-align: center;
  padding: 4px 0 2px 0;
}

.stat .num {
  display: block;
  font: bold 30px/1.1 "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
  letter-spacing: -1px;
  color: #2a6d9e;
  text-shadow: 0 1px 0 #ffffff;
}

.stat .cap {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8b97a1;
}

ul.facts { margin: 0; padding: 0; list-style: none; font-size: 12px; }
ul.facts li { padding: 5px 0; border-bottom: 1px solid #eef2f5; }
ul.facts li:last-child { border-bottom: 0; }
ul.facts b { color: #2a6d9e; }

/* tag cloud */

.tagcloud { line-height: 2.1; }
.tagcloud span {
  display: inline-block;
  margin: 0 7px 0 0;
  color: #4a7a99;
  white-space: nowrap;
}
.tagcloud .t1 { font-size: 11px; color: #8fa3b1; }
.tagcloud .t2 { font-size: 13px; color: #6c8da0; }
.tagcloud .t3 { font-size: 15px; color: #3d7fa8; }
.tagcloud .t4 { font-size: 18px; font-weight: bold; color: #2a6d9e; }
.tagcloud .t5 { font-size: 21px; font-weight: bold; color: #1f5480; letter-spacing: -0.5px; }

/* ---------- forms ---------- */

.gform label {
  display: block;
  margin: 12px 0 4px 0;
  font-size: 12px;
  font-weight: bold;
  color: #4d5f6c;
}

.gform input[type="text"],
.gform textarea {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #c8d3db;
  border-top-color: #b3c1cb;
  border-radius: 5px;
  background: #fdfefe;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #3b4650;
}

.gform textarea { height: 110px; resize: vertical; }

.gform input[type="text"]:focus,
.gform textarea:focus {
  outline: 0;
  border-color: #7fb4d8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 5px rgba(78,154,203,0.5);
}

.gform input[type="submit"] {
  margin-top: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- footer ---------- */

#footer {
  clear: both;
  padding: 22px 24px 18px 24px;
  background: #2c3d49;
  background: linear-gradient(180deg, #34485666 0%, #2c3d49 100%), #2c3d49;
  border-top: 1px solid #1d2a33;
  color: #92a6b4;
  font-size: 12px;
  overflow: hidden;
}

#footer a { color: #8fc7ea; }
#footer a:hover { color: #f9a76b; }

#footer .col { float: left; width: 33.33%; padding-right: 20px; }
#footer .col:last-child { padding-right: 0; }

#footer h5 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #dbe7ef;
}

#footer ul { margin: 0; padding: 0; list-style: none; }
#footer li { padding: 2px 0; }

#footer .colophon {
  clear: both;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #3b4f5d;
  font-size: 11px;
  color: #78899a;
}

/* ---------- responsive ---------- */

@media (max-width: 990px) {
  #wrap { width: auto; margin: 0; border-radius: 0; }
  #main, #side { float: none; width: 100%; }
  #side { margin-top: 24px; }
  #footer .col { float: none; width: 100%; padding: 0 0 14px 0; }
  #header .headright { position: static; text-align: left; margin-top: 8px; }
  #header h1 { font-size: 24px; }
  #tabs { padding: 0 8px; overflow-x: auto; }
  #tabs a { padding: 8px 11px; font-size: 12px; }
  .card .cardtitle { padding-right: 0; }
  .card .cardwhen { position: static; text-align: left; display: block; margin-bottom: 6px; }
  table.data { min-width: 460px; }
}