/*  Rules from HTML5 Reset (http://html5reset.org/)
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
img,
object,
embed {
  max-width: 100%;
}
html {
  overflow-y: scroll;
}
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: bold;
  vertical-align: bottom;
}
td {
  font-weight: normal;
  vertical-align: top;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
pre {
  white-space: pre;
  /* CSS2 */

  white-space: pre-wrap;
  /* CSS 2.1 */

  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */

  word-wrap: break-word;
  /* IE */

}
input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}
select,
input,
textarea {
  font: 99% sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}
/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
  outline: none;
}
strong,
th {
  font-weight: bold;
}
td,
td img {
  vertical-align: top;
}
/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {
  cursor: pointer;
}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}
/* make buttons play nice in IE */
button {
  width: auto;
  overflow: visible;
}
/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}
/* HTML5 Reset code ends, customization starts
-------------------------------------------------------------------------------*/
small {
  font-size: 81.25%;
}
p,
blockquote {
  padding-bottom: 1.5em;
}
a {
  color: #8899bb;
}
a:hover {
  color: #006699;
}
h1 {
  font-family: 'PT Sans Narrow', 'Franklin Gothic Book', Calibri, sans-serif;
  font-weight: 700;
  line-height: 0.8;
  text-transform: none;
  text-rendering: optimizeLegibility;
  clear: both;
  color: #003366;
  font-size: 6.25em;
  border-bottom: 3px solid #8899bb;
  margin-bottom: 0.3em;
}
h1 b,
h1 i {
  display: block;
  font-weight: 700;
  font-style: normal;
}
h1 i {
  font-size: 0.6em;
  color: #8899bb;
  padding-bottom: 0.5em;
}
h2 {
  font-family: 'PT Sans Narrow', 'Franklin Gothic Book', Calibri, sans-serif;
  font-weight: 700;
  line-height: 0.8;
  text-transform: none;
  text-rendering: optimizeLegibility;
  clear: both;
  font-size: 2em;
  color: #8899bb;
  margin-bottom: 0.5em;
}
h3 {
  font-weight: normal;
}
html {
  font-size: 16px;
}
body {
  background-color: #ffffff;
  margin: 0 auto;
  min-width: 200px;
  font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  font-size: 1em;
  line-height: 1.5em;
  color: #333333;
}
.logo-col,
.title-col,
.img-col {
  width: 12.5em;
  padding: 3.125em 0 0 3.125em;
  float: left;
}
.logo-col img,
.title-col img,
.img-col img {
  max-width: 100%;
}
.title-col,
.img-col {
  width: 18.75em;
}
.comments {
  margin-top: 3.125em;
}
.comments i {
  display: block;
  text-align: right;
}
.hidden {
  display: none;
}
.button {
  display: block;
  background: #003366 url(i/lock.png) 90% 50% no-repeat;
  border: 1px solid #8899bb;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  font-family: 'PT Sans Narrow', 'Franklin Gothic Book', Calibri, sans-serif;
  font-weight: 700;
  line-height: 0.8;
  text-transform: none;
  text-rendering: optimizeLegibility;
  clear: both;
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  text-decoration: none;
}
.button:hover {
  background-color: #8899bb;
  color: #fff;
  border-color: #003366;
}
.image,
.album {
  margin-bottom: 1em;
  padding: 3%;
  -moz-box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 5px;
}
body.gallery {
  padding: 1.5625em;
  padding-right: 0;
}
.gallery-title img {
  width: 4.5em;
  margin-right: 1.5625em;
  float: left;
}
.gallery-title h1 {
  clear: none;
  border: none;
  width: 2.5em;
  float: left;
}
.gallery-title h1 i {
  padding-bottom: 0;
}
.gallery-main,
.clearer {
  clear: both;
}
.album {
  float: left;
  padding: 0;
  margin-right: 1em;
}
.msie .album {
  margin-right: 0.5em;
}
.album.video a {
  background: #ffffff url(i/icn-video.png) 100% 0 no-repeat;
}
.album.photo a {
  background: #ffffff url(i/icn-photo.png) 100% 0 no-repeat;
}
.album a {
  text-decoration: none;
  display: block;
  position: relative;
  min-height: 120px;
  padding: 0.5em 0.5em 0.5em 8em;
  border: 1px solid #eee;
}
.msie .album a {
  border: 1px solid #999;
}
.album a:hover {
  border: 1px solid #ccc;
}
.album a:visited {
  color: #999;
  background-color: #f5f5f5;
}
.album a:visited h2 {
  color: #8899bb;
}
.album img {
  position: absolute;
  left: 0.5em;
  max-width: 7em;
}
.album h2 {
  color: #003366;
  font-size: 1.5em;
  width: 7.2em;
  clear: none;
  margin: 0;
}
.email-tease {
  margin-bottom: 1.5625em;
  margin-right: 1.5625em;
  float: right;
  max-width: 10em;
}
.email-tease a {
  font-weight: bold;
  display: block;
}
@media screen and (max-width: 579px) {
  html {
    font-size: 14px;
  }
  .logo-col,
  .title-col,
  .img-col {
    width: 90%;
    padding: 5%;
  }
  .logo-col img {
    width: 50%;
    max-width: 160px;
  }
  h1 b {
    font-size: 75%;
  }
  h1 i {
    font-size: 50%;
  }
  .email-tease {
    display: none;
  }
  .gallery {
    padding: 5%;
  }
  .gallery-title img {
    width: 3em;
  }
  .album {
    margin-right: 0.5em;
  }
  .album a {
    padding-left: 6em;
  }
  .album a img {
    max-width: 80px;
  }
  .album a h2 {
    width: 6.5em;
  }
}
@media screen and (min-width: 320px) and (max-width: 579px) {
  .logo-col {
    position: absolute;
    width: 20%;
  }
  .logo-col img {
    width: 100%;
  }
  h1 {
    padding-left: 30%;
    background-color: #fff;
  }
  .title-col {
    margin-top: 1px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 320px) and (max-width: 420px) {
  h1 b {
    font-size: 60%;
  }
  h1 i {
    font-size: 40%;
  }
}
@media screen and (min-width: 580px) and (max-width: 800px) {
  .logo-col,
  .title-col,
  .img-col {
    padding: 1.5625em 0 0 1.5625em;
  }
}
@media screen and (min-width: 1100px) {
  html {
    font-size: 18px;
  }
  body.gallery {
    font-size: 16px;
  }
}