/* ===== Base Reset ===== */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
ol, ul, li, table, tr, th, td, img {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 14px;
  line-height: 21px;
  color: #DCDCCC;
  background-color: #1d232f;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0 0 10px 0; }
h1 { font-size: 33px; }
h2 { font-size: 25px; color: #FFA07A; }
h3 { font-size: 18px; color: #FFD580; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p { margin: 6px 0; }

/* ===== Links ===== */
a { color: #81c266; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Utilities ===== */
.clear { clear: both; }
.left { float: left; }
.right { float: right; }  /* used in Python page */
img { max-width: 100%; height: auto; }

/* ===== Layout ===== */
#wrapper {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#page_content,
.page_content {           /* some pages use id, one uses class */
  padding: 8px 12px 8px 0;
}

/* Content blocks */
.top_content { padding: 4px 0 0 0; }
.common_content { padding: 8px 0 8px 12px; }

/* Sidebar */
.left_side_bar {
  width: 250px;
  float: left;
  padding: 0 20px 40px 0;
}
.left_side_bar h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #FFA07A;
}
.left_side_bar .col_1 { padding: 0; }
.left_side_bar .col_1 .box {
  padding: 16px;
  border: 4px solid #303020;
}

/* Right content column (Photography & Blender page) */
.right_section {
  width: 650px;
  float: right;
}

/* ===== Footer ===== */
#footer {
  clear: both;
  margin-top: 18px;
  padding: 12px 0 40px 0;
  text-align: center;
  font-size: 14px;
  line-height: 19px;
  border-top: 1px solid #525b60;
}
#footer a { color: #81c266; text-decoration: none; }
#footer a:hover { text-decoration: underline; }