/*
  HTML5 ✰ Boilerplate

  style.css contains a reset, font normalization and some base styles.

  credit is left where credit is due.
  much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/*
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, 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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font: inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

nav 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; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */


/* fonts.css from the YUI Library: developer.yahoo.com/yui/
   refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages

  there are three custom edits:
   * remove arial, helvetica from explicit font stack
   * we normalize monospace styles ourselves
   * table font-size is reset in the HTML5 reset above so there is no need to repeat
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */

select, input, textarea, button { font:99% sans-serif; }

/* normalize monospace sizing
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/*
 * minimal base styles
 */


body, select, input, textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */
}

/* headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }

/* always force a scrollbar in non-IE: */
html { overflow-y: scroll; }


/* accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }


ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* remove margins for navigation lists */
nav ul, nav li { margin: 0; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* set sub, sup without affecting line-height: gist.github.com/413930*/
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */

/* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
 -webkit-box-shadow: 0px 0px 5px red;
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 */
::-moz-selection{ background: #602929; color:#fff; text-shadow: none; }
::selection { background:#602929; color:#fff; text-shadow: none; }

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }



/*
 * Non-semantic helper classes
 */

/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0 !important;
    clip: rect(0 0 0 0);
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }


/* Primary Styles
Author: Gregory Koberger
 */

/* Global Styles */

a:hover {
    color: #602929;
    text-decoration: none;
}

p a:hover {
    border-bottom: 1px solid #BBB !important;
}

em {
    font-style: italic;
}

/* Typekit Font Stacks */
#logo_inside, .gar, .rit, .tk-adobe-garamond-pro, h1, h1.test {
    font-family: "adobe-garamond-pro-1","adobe-garamond-pro","adobe-garamond-pro-2",Garamond, "Adobe Garamond", serif !important;
}

.article, .meta, .mozilla, .tk-ff-meta-web-pro {
    font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif !important;
}

/* Other */

#header + div { /* This is either really clever or really bad. */
    clear: both;
}

body.magazine {
    border-width: 10px 0 0;
    border-style: solid;
}

.magazine hgroup.full {
    border-width: 1px 0 0;
    border-style: solid;
    height: 300px;
    overflow:hidden;
    position: relative;
}

.magazine hgroup.content {
    height: 300px;
    width: 960px;
    padding: 0 20px;
    margin: auto;
    position: relative;
}

.magazine #header_edition, .magazine #header_nav {
    font-weight: bold;
    text-shadow: 1px 1px 1px #000000, 0 0 15px rgba(255, 255, 255, 0.3);
    font-size:15px;
    text-transform: lowercase;
}

#header_edition, #header_nav {
    font-family: Georgia, Garamond;
}

.magazine #header_edition {
    left: 20px;
    position: absolute;
    top: 10px;
}

.magazine #header_edition span {
}

.magazine #header_nav {
    right: 20px;
    position: absolute;
    top: 10px;
    text-align: right;
}

.magazine #header_nav ul li {
    display: inline-block;
    padding-left: 15px;
}

.magazine #header_nav ul li a {
    text-decoration: none;
    -moz-transition: color 0.15s linear;
}

.magazine #header_nav ul li a:hover {
}

.magazine .article-container {
    width: 960px;
    padding: 0 20px 50px 20px;
    margin: auto;
    position: relative;
}

.magazine footer {
}

.magazine footer > div {
    width: 960px;
    padding: 0 20px;
    margin: auto;
}

/*
 * Global
 */

.title {
    font-weight: 600;
}

a .title,
.title a {
    color: #333333;
    text-decoration: none;
}

.title a:hover,
a:hover .title {
    color: #8B4242;
}

.section_subtitle {
    text-align: center;
    color: #777;
    margin-top: -2px;
}

/*
 * Main page
 */


body {
    background-color: #602929;
    margin: 0;
}

nav.main {
    position: absolute;
    right: 0;
    padding-top: 17px;
    z-index: 100;
}

nav.main a {
    color: #333333;
    display: inline-block;
    font-size: 17px;
    margin: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
}

nav.main a:last-child {
    margin-right: 0;
}

nav.main a.current {
    font-weight: 600;
    color: #000;
}

nav.main a:hover {
    color: #8B4242;
}

.pattern {
    background-image: url("../images/bg-pattern.png");
}
#container {
    background-color: #EBEBEA;
    min-width: 1200px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: 0 0 10px #000000;
    margin-top: 15px;
}
#home #header {
    background-repeat: repeat-x;
}
header {
    position: relative;
}
header, #article {
    width: 1200px;
    margin: auto;
}
#sections, #notes {
    width: 1200px;
    margin: auto;
}

#notes {
    width: 1070px;
    position: relative;
}

#intro {
    box-shadow: 0 14px 17px -17px #888888;
    color: #444444;
    font-size: 30px;
    margin: auto auto 1em;
    padding-bottom: 0.25em;
    padding-top: 0.5em;
    text-align: center;
    text-shadow: 1px 1px 1px #FFFFFF;
}

#intro a {
    font-weight: bold;
    color: #222;
    text-decoration: none;
    -moz-transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    text-transform: lowercase;
}

#intro a.github:hover {
    color: #006EAE;
}

#intro a.twitter:hover {
    color: #2EACD6;
}

#intro a.mozilla:hover {
    color: #A5161D;
}

#intro a.rit:hover {
    color: #BF4F0F;
}

#intro .subintro {
    font-size: 0.8em;
}

#section_articles > ul {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#section_articles li {
    float: left;
    padding-left: 8px;
    color: #777;
    font-family: Verdana;
    font-size: 12px;
    margin-left: 14px;
}

#section_articles li > a {
    display: block;
    color: #666;
    text-decoration: none;
}

#sections h3 {
    font-size: 23px;
    line-height: 19px;
    margin: 3px 0 0;
    text-shadow: 1px 1px 0 #FFFFFF;
    text-transform: uppercase;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
}

#section_notepad li span {
    color: #AAA;
    font-size: 11px;
}

#section_articles li strong {
    font-family: Garmond;
    color: #333;
    font-size: 16 px;
    font-size: 22px;
    padding-bottom: 5px;
}

#section_notepad ul li a {
    text-decoration: none;
    color: #444;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 20px;
    width: 196px;
    display: block;
}

#section_notepad ul li a:hover {
    color: #000;
    background-color: rgba(220, 220, 220, 0.7);
}

#section_notepad > ul {
    overflow: auto;
    margin: 0;
    padding: 0 8px;
}

#section_notepad > ul li {
    font-family: Verdana;
    font-size: 12px;
    float: left;
    list-style: none;
}
#section_articles > ul li h3 {
    margin: 10px 0 3px;
}
#section_notepad > ul li p {
    line-height: 1.5em;
    margin-top: 0.5em;
    font-size:14px;
    font-family: Georgia;
}


#section_notepad {
    border-top: 3px double #AAA;
    margin-top: 4em;
    color: #222;
    text-shadow: 1px 1px 0 #fff;
}

#section_notepad > ul li:first-child {
    margin-left: 0;
}

#meta_links {
    display: none;
}

.logo {
    background-color: #000000;
    border-radius: 100px;
    height: 142px;
    margin: auto;
    padding: 6px;
    width: 142px;
    margin-top: 30px;
}

.logo div {
    background-color: #602929;
    border: 2px solid #FFFFFF;
    border-radius: 120px 120px 120px 120px;
    color: #FFFFFF;
    font-size: 148px;
    height: 138px;
    line-height: 80px;
    text-align: center;
    text-shadow: 2px 2px 2px #000000;
    width: 138px;
}


#header_spread h1 {
    color: #333;
    font-size: 55px;
    font-weight: bold;
    line-height: 0.9em;
    margin: auto;
    text-align: center;
    text-shadow: 0 1px 1px #fff, 0 3px 0 #B6BAB5;
    text-transform: lowercase;
    width: 500px;
    z-index: 105;
    margin-top: 15px;
    font-weight: normal;
}
#header_spread h1 span {
    z-index: 105;
    position: relative;
}

#header_spread div.subtitle {
    color: #888;
    font-size: 18px;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
    text-transform: lowercase;
}

#header_spread div.subtitle .subtitle_text {
    font-size: 17px;
    background-color: #EBEBEA;
    padding: 0 2px;
    position: relative;
    top: -30px;
    z-index:103;
}
.subtitle  {
    width:368px;
    margin:auto;
    position:relative;
}
.amperstand {
    font-family: baskerville;
    font-style: italic;
    color: #444;
}

.subtitle hr {
    position:relative;
    width:100%;
    margin-top: 14px;
    top:0px;
    left:0px;
    height:1px;
    border: 0 none;
    background: #000; /* old browsers */
    background: -moz-linear-gradient(left, #EBEBEA 0%, #AAA 5%, #AAA 95%, #EBEBEA 100%); /* firefox */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#EBEBEA), color-stop(5%,#AAA), color-stop(95%,#AAA), color-stop(100%,#EBEBEA)); /* webkit */
    z-index:102;
}



/* Logo */

#logo {
    position: relative;
    z-index: 1000;
}

#logo div svg {
    display: none;
}

a#logo:hover div.logo span {
    display: none;
}

a#logo:hover div.logo svg {
    margin: 3px 6px;
    display: block;
}

/* Logo - Small */

a#logo.small {
    text-decoration: none;
    display: block;
}

a#logo.small:hover #header_spread h1 {
    color: #8B4242;
}

a#logo.small:hover #header_spread .amperstand {
    color: #4F1C1C;
}
a#logo.small:hover .logo div {
    background-color: #8B4242;
}

#logo.small {
    float: left;
    margin-top: 13px;
}

#logo.small .logo {
    float: left;
    height: 45px;
    margin: 0pt 15px 0pt 0pt;
    padding: 3px;
    width: 45px;
}

#logo.small .logo div {
    border: 2px solid #CCCCCC;
    font-size: 40px;
    height: 41px;
    line-height: 25px;
    text-shadow: none;
    width: 41px;
}

#logo.small .logo div svg polygon {
    fill: #fff;
}

#logo.small #header_spread h1 {
    font-size: 27px;
    line-height: 17px;
    margin: 10px 0 0;
    text-align: left;
    text-shadow: none;

}

#logo.small .subtitle hr {
    display: none;
}

#logo.small #header_spread div.subtitle .subtitle_text {
    font-size: 0.65em;
    padding: 0pt;
    position: relative;
    top: 0pt;
    background-color: transparent;
    background-image: none;
}

#logo.small #header_spread div.subtitle {
    margin: 0pt;
    text-align: left;
}

/* Articles */
.magazine_header {
    height: 420px;
}

.magazine_header h1 {
    font-size: 90px;
    padding-top: 70px;
    text-align: center;
    text-shadow: 0 1px 1px #FFFFFF, 0 3px 0 #B6BAB5;
}

.magazine_header_mobile {
    display: none;
}

.magazine_nav {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #ccc;
    padding: 10px 0;
    position: relative;
}

.magazine_nav_bottom {
    margin-top: 4em;
    max-width: 1200px;
    margin: auto;
}

.magazine_nav_bottom .magazine_meta {
    padding: 0.75em 0;
}

.magazine_nav .arrow {
    font-family: Baskerville,Georgia;
    font-size: 53px;
    line-height: 0.35em;
    opacity: 0.5;
    padding: 0 10px;
}
.magazine_nav .prev .arrow {
    float: right;
}
.magazine_nav .next .arrow {
    float: left;
}

.magazine_nav .next {
    left: 0px;
    text-align: left;
}

.magazine_nav .prev {
    right: 0px;
    text-align: right;
}

.magazine_nav .prev, .magazine_nav .next {
    color: #222;
    position: absolute;
    text-decoration: none;
    top: 10px;
    width: 400px;
}

.magazine_nav .prev strong, .magazine_nav .next strong {
    opacity: 0.8;
    display: block;
    font-family: Baskerville,Georgia;
    font-size: 1.3em;
    line-height: 1em;
}

.magazine_nav .nav_title {
    opacity: 0.5;
}

.magazine_nav a:hover .arrow,
.magazine_nav a:hover strong {
    opacity: 1;
}

.magazine_nav h2.title {
    text-align: center;
    font-size: 30px;
}

.magazine_nav .magazine_meta {
    text-align: center;
}

.magazine_body {
    margin: 2em 15em 0pt;
    font: 17px/29px;
}

/* Notebook */

.info_sidebar {
    background-color: rgba(150, 150, 150, 0.2);
    border-radius: 10px 10px 10px 10px;
    line-height: 1.5em;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
}

#notebook #notes h2.title {
    color: #333333;
    font-size: 40px;
    margin: 10px auto 0.3em;
    text-align: center;
    text-transform: uppercase;
    width: 850px;
}

#notebook .note .text a {
    border-bottom: 1px dotted #AAAAAA;
    color: #5E1818;
    text-decoration: none;
}

#notebook .note .text a:hover {
    color: #000;
    border-bottom: 1px solid #777;
}

#notebook #notes .title_date {
    font-weight: normal;
    letter-spacing: 3px;
    position: relative;
    top: 10px;
    font-size: 14px;
    color: #aaa;
    text-align: center;
}

#notebook .note {
    margin-top: 6em;
    clear: both;
    overflow: auto;
}

#notebook .center {
    text-align: center;
}

#notebook .note .note_container {
    margin: auto;
    width: 850px;
}

#notebook .sidebar {
    color: #CCC;
    float: left;
    font-size: 14px;
    line-height: 1em;
    margin-left: 50px;
    width: 125px;
    position: relative;
}

#notebook .sidebar .sidebar_title {
    padding-bottom: 5px;
    font-weight: bold;
    color: #888;
    font-size: 12px;
    padding-bottom: 5px;
}

#notebook .sidebar .sidebar_scroll {
    color: #CCCCCC;
    font-size: 13px;
    line-height: 1.3em;
    padding-top: 20px;
    position: absolute;
    width: 125px;
}

#notebook .sidebar a {
    color: #AAA;
    text-decoration: none;
}

#notebook .sidebar a:hover {
    border-bottom: 1px solid #BBB;
}

#notebook .sidebar .sidebar_nav {
    text-align: center;
    border-top: 1px dotted #CCC;
    padding-top: 12px;
    margin-top: 12px;
    color: #777;
    font-size: 12px;
}

#notebook .sidebar .sidebar_nav a {
    color: #999;
    text-decoration: none;
}


#notebook .text {
    float: left;
    margin-left: 150px;
    padding-top: 1em;
    width: 500px;
    margin-left: 175px;
}

#notebook .notepad_footer {
    text-align: center;
    padding-top: 1em;
}

#notebook .note .notepad_footer a {
    text-decoration: none;
    border-bottom: 0;
}

#notebook .note .notepad_footer a strong {
    font-weight: 600;
}

#notebook .dsq-comment-text,
#notebook .dsq-comment-footer {
    font-size: 0.8em;
}

.text {
    text-align: justify;
    color: #555555;
    font: 17px/29px baskerville,Georgia,"Times New Roman",Times,serif;
}

.text > p:first-child:first-letter {
   font-size: 3.5em;
    line-height: 0.7;
    margin-top: 0.15em;
    float: left;
    display: block;
    margin-right: 5px;
    margin-left: -0.1em;
    color: #602929;
    text-transform: uppercase;
}

.text > p:first-child:first-line {
     text-transform: uppercase;
}

#notebook .text h3,
#notebook .text h4 {
    border-bottom: 1px dotted #CCCCCC;
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 1.5em;
    padding-bottom: 10px;
    text-align: center;
    font-family: "myriad-pro-condensed-1","myriad-pro-condensed-2",sans-serif;
}

.text p, .text ul, .text ol {
    margin-bottom: 1em;
}

.text li {
    margin-bottom: 0.5em;
}

#notebook ul li {
    line-height: 1.6em;
    margin-bottom: 0;
}

/*
.text code {
    background-color: #DDDDDD;
    border-left: 3px solid #CCCCCC;
    display: block;
    font-size: 13px;
    line-height: 1em;
    margin-bottom: 1em;
    padding: 10px;
    text-align: left;
}
*/

/* From Pure CSS Speech Bubbles
 * Nicolas Gallagher
 * http://nicolasgallagher.com/pure-css-speech-bubbles/ */

.text blockquote:after {
     border-color: #DDDDDD transparent;
     border-style: solid;
     border-width: 20px 0pt 0pt 20px;
     bottom: -20px;
     content: "";
     display: block;
     height: 0pt;
     left: 50px;
     position: absolute;
     width: 0pt;
}

.text blockquote {
     background-color: #DDDDDD;
     border-radius: 10px 10px 10px 10px;
     color: #555555;
     line-height: 1.7em;
     margin: 1em 0pt 2em;
     padding: 15px 20px;
     position: relative;
}

.text blockquote:first-child {
    margin-top: 0;
}

.text blockquote + cite {
    color: #999;
    display: block;
    margin-bottom: 1em;
    margin-top: -2em;
    padding-left: 80px;
}

.text cite strong {
    color: #666666;
    font-weight: normal;
}

#sections #section_notepad h2 {
    font-size: 36px;
    text-shadow: 0 1px 1px #FFFFFF, 0 3px 0 #B6BAB5;
    margin-top: -25px;
    text-align: center;
}

#sections #section_notepad h2 span {
    background-color: #EBEBEA;
    padding: 0 10px;
}


section {
    padding-bottom: 2em;
}

.article_icon {
    background-color: #FFFFFF;
    box-shadow: 0 0 5px #999999;
    height: 150px;
    padding: 10px;
    width: 260px;
    margin-bottom: 5px;
    margin-top: 10px;
    display: block;
    text-decoration: none;
    border: 0;
}

.article_icon_inner {
    overflow: hidden;
    height: 150px;
    width: 260px;
}

.article_icon_inner .parallax {
    position:relative;
    overflow:hidden;
    height:150px;
    width:260px;
    margin: 0;
}
.article_icon_inner .parallax div {
    position: absolute;
}

.parallax_front {
  width: 260px;
  height: 150px;
  box-shadow: 0 0 5px #666 inset;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
}

#section_articles a:hover .parallax_front {
  box-shadow: 0 0 7px #555 inset;
}

#section_articles > ul li:first-child  {
    margin-left: 0;
}

.footnotes {
    border-top: 1px dotted #999999;
    color: #333333;
    font-size: 14px;
    list-style-position: inside;
    margin: 2em 0 0;
    opacity: 0.6;
}

.footnotes:hover {
    opacity: 1;
}

footer {
    color: #888888;
    font-family: Verdana;
    font-size: 13px;
    margin: auto;
    padding: 25px 0;
    text-align: center;
}

footer a, footer a:visited {
    color: #555555;
    text-decoration: none;
}

footer a:hover {
    color: #8B4242;
    text-decoration: underline;
}

#detect_mobile {
    width: 0px;
    height: 1px;
}


/* CSS */

#portfolio .item {
    margin: 3em auto 0;
    width: 1200px;
}
#portfolio .item .image {
    background-color: #FFFFFF;
    display: block;
    float: left;
    margin-right: 2em;
    padding: 10px;
    box-shadow: 0 0 5px #999999;
}
#portfolio .item .image a, .item .image img {
    display: block;
}
#portfolio .item .image img {
    border: 1px solid #ccc;
}

#portfolio .title {
    font-size: 30px;
}

#portfolio .info > p {
   line-height: 1.5em;
    margin-bottom: 5px;
    margin-top: 5px;
}

#portfolio .item .block {
    margin-right: 1em;
}

#portfolio .item .block, .item .block p {
    display: inline-block;
}

#portfolio .item .icon {
    height: 16px;
    width: 16px;
    display: inline-block;
}

#portfolio .item .icon:hover {
    background-position: -16px 0;
}

#about #intro, #p404 #intro {
    padding-top: 2em;
    width: 1200px;
}

.about_longer {
    font-size: 20px;
    margin: auto auto 4em;
    text-align: center;
    width: 1200px;
}

/* DISQUS */
.show_comments {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.3em;
    padding: 10px;
    text-align: center;
}

#dsq-reply h3, #dsq-content h3, #dsq-sort-by,
#dsq-footer, #dsq-account-dropdown, .dsq-community-box {
   display: none;
}

#dsq-content .dsq-reply,
#disqus_thread #dsq-content #dsq-global-toolbar {
    margin: 0;
}

#dsq-new-post h3,
#dsq-new-post .dsq-request-user-info {
    display: none;
}

#disqus_thread #dsq-content a {
    border-bottom: 0 none;
}

#disqus_thread {
    font-family: Arial, Verdana;
}

#dsq-content .dsq-media-embed h4 {
    display: none;
}

#notebook #disqus_thread {
    margin-top: 4em;
}

/* Caution */
.caution {
margin: 1em auto; box-shadow: 0pt 3px 3px -3px rgb(170, 170, 170); overflow: auto; padding: 3em 200px 10px; width: 800px;
}

.caution strong {
display: block; font-size: 38px; float: left; text-align: left; padding-right: 1em;
}

.caution strong span {
  display: block; font-size: 18px; margin-bottom: -9px; text-transform: lowercase; font-family: Baskerville; font-style: italic; font-weight: normal; color: rgb(153, 153, 153);
}

.caution div {
  color: #555;
}

/* Notepad Keep Reading */
#notebook .note_container #section_notepad li {
    width: 242px;
}
#notebook .note_container #section_notepad .notepad-nav-left {
    text-align: right;
}
#notebook .note_container #section_notepad .title {
    text-align: right;
    border: 0 none;
    margin: 0;
    padding: 0;
}
#notebook .note_container #section_notepad .notepad-nav-prev .title {
    text-align: left;
}
#notebook .note_container #section_notepad a {
    background-color: #E3E3E3;
    border-radius: 0 7px 7px 0;
    text-align: left;
    border-bottom: 0 none;
    width: 201px;
}
#notebook .note_container #section_notepad .notepad-nav-next a {
    border-right: 1px dotted #AAAAAA;
    border-radius: 7px 0 0 7px;
    text-align: right;
}
#notebook .note_container #section_notepad a:hover {
    background-color: #ddd;
}
#notebook .note_container #section_notepad p {
    color: #333;
}
#notebook .note_container #section_notepad {
    border-top: 0 none;
    margin-top: 0;
    width: 100%;
}
#notebook .note_container #section_notepad span {
    color: #333;
}
#notebook .note_container #disqus_thread {
    margin-top: 0;
}
#notebook .note_container h3 {
    margin-top: 3em;
}
#notebook .note_container code {
    background-color: #ddd;
    border: 1px solid #bbb;
}

/* About me! */
.aboutme {
    overflow: hidden;
}
.aboutme > div {
    float: left;
    font-size: 0.9em;
    line-height: 1.4em;
    width: 368px;
}
.aboutme img {
    background-color: #FFFFFF;
    box-shadow: 0 0 2px #AAAAAA;
    float: left;
    margin: 2px 20px 20px 2px;
    padding: 5px;
    width: 100px;
}
.twitter-follow-button {
    width: 75px !important;
}

/* Portfolio */

#work {
    width: 1070px;
    margin: 6em auto 0;
    overflow: hidden;
}

#work #work-head {
    text-align: center;
    margin-bottom: 2em;
}

#work h3.title {
    display: none;
}

#work #work-info {
    box-shadow: 14px 0 17px -21px #888888;
    padding: 30px 40px 0 20px;
    width: 300px;

    display: table-cell;
    vertical-align: top;
}

#work .work-block {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
}

#work .work-block h3 {
    margin-bottom: 5px;
}

#work .work-block a {
    text-decoration: none;
}
#work .work-block a:hover {
    text-decoration: underline;
}

#work a.go {
    display: block;
    background-color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
}
#work a.go:hover {
    opacity: 0.9;
    text-decoration: none;
}
#work a.go:active {
    position: relative;
    top: 2px;
}

#work .work-block p {
    color: #777777;
    line-height: 1.6em;
    margin-bottom: 1em;
}

#work #work-media {
    padding: 30px 20px 30px 40px;
    width: 690px;

    display: table-cell;
    vertical-align: top;
}
#work #work-media .col {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    padding-left: 20px;
}
#work #work-media .col:first-child {
    padding-left: 0px;
}

#work #work-media a {
    display: block;
    text-decoration: none;
}

#work #work-media .border {
    background-color: #FFF;
    border-radius: 3px;
    box-shadow: 0 0 10px #BBBBBB;
    padding: 5px;
}

#work #work-media a img {
    box-shadow: 0 0 10px #BBBBBB;
    width: 100%;
    display: block;

    /*
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    */

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#work #work-media a img.noshadow,
#work #work-media a:hover img.noshadow {
    -moz-box-shadow: 0 0;
    -webkit-box-shadow: 0 0;
    box-shadow: 0 0;
}

#work #work-media a:hover img {
    -moz-box-shadow: 0 0 15px #AAA;
    -webkit-box-shadow: 0 0 15px #AAA;
    box-shadow: 0 0 15px #AAA;

    /*
    -moz-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    */
}

#work #work-media figcaption {
    display: block;
    height: 20px;
    color: #888888;
    font-family: Baskerville,"Times New Roman";
    font-size: 1.1em;
    font-style: italic;
    padding: 3px 8px 15px;
    text-shadow: 1px 1px #FFFFFF;
    -moz-transition: color 0.3s ease-in;
    -webkit-transition: color 0.3s ease-in;
}

#work #work-media a:hover figcaption {
    color: #666;
}

#work h4.title {
    color: #555555;
    font-size: 2em;
    font-weight: normal;
    margin-bottom: 10px;
    text-shadow: 1px 1px #FFFFFF;
}

#work span.date {
    color: #AAAAAA;
    display: block;
    margin-bottom: 7px;
}

#work .work-block-side h4 {
    float: left;
    width: 110px;
}

#work .work-block-side ul {
    line-height: 1.2em;
    list-style: none outside none;
    margin-left: 140px;
    padding-top: 5px;
}

#work .work-block-side ul li {
    padding-top: 5px;
}

/*
 * media queries for responsive design
 * these follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/*
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}