#blog-body {
	width: 1290px;
	margin: auto;
}
#blog-body .block {

}
    #blog-body .detail ul {
        list-style: disc;
        width: 90%;
        margin: auto;
        margin-bottom: 20px;
        padding-left: 35px;
        margin-top: -12px;
    }
#blog-body .block .detail {
	float: left;
	width: 60%;
  border-right: 1px solid #eee;
  padding-right: 5%;
	padding-top: 30px;
  padding-bottom: 20px;
}
#blog-body .block .detail a {
    padding-bottom: 1px;
    border-bottom: 1px solid #446CBC;
    color: #446CBC;
}
#blog-body .block .detail h1, .detail h2,.detail h3, .detail h4 {
	width: 90%;
	margin: auto;
	font-family: 'PT Serif', Georgia, serif;
}

#blog-body .block .detail h1 {
	font-size: 40px;
	line-height: 48px;
	width: 90%;

	margin-bottom: 20px;
}
#blog-body .block .detail h2 {
	margin-bottom: 5px;
	font-size: 22px;
}


#blog-body .block .detail p {
	width: 90%;
	margin: auto;
	margin-bottom: 20px;
}

#blog-body .block .detail ol  {
	list-style: decimal;
	width: 90%;
	margin: auto;
	margin-bottom: 20px;
	padding-left: 40px;
}

#blog-body .block .side {
	float: left;
	width: 32%;
  padding-left: 2%;	

	padding-top: 30px;
}
#blog-body .block .side strong {
	font-size: 20px;
	color: #ccc;
}

#blog-body .block .side ul {
	padding-top: 20px;
}

#blog-body .block .side ul li {
	padding-bottom: 35px;
}
#blog-body .block .side ul li span {
	padding-top: 5px;
	display: block;
	color: #666;
}
#blog-body .block .side ul li a:visited * {
  color: #666;
}
    #blog-body .block .side ul li a:hover h2 {
        /*color: #446CBC;*/
        color: #446CBC;
    }
    #blog-body .block .side ul li.active a h2 {
        /*color: #446CBC;*/
        color: #446CBC;
    }

#blog-body .block .side h2 {
	font: normal 22px/28px 'PT Serif', Georgia, serif;
}
.profile_well {
  background-color: #446CBC;
  padding: 10px;
  margin-bottom: 60px;
  margin-top: 40px;
}
.profile_well a {
  padding-bottom: 1px;
  border-bottom: 1px solid #fff;
  color: #fff;
}
.profile_well a:hover {
  border-bottom: 3px solid #fff;
}
.profile_well, .profile_well img, .profile_well .small-col {
  line-height: 0;
}

.profile_well .small-col {
    float: left;
    width: 15%;
}
.profile_well .xl-col {
  float: left;
  font: normal 14px/25px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  width: 85%;
}

.profile_well a {
    color: #fff !important;
    border-bottom: 1px solid #ffffff !important;

}

/* #SmallDesktop
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1289px) {
  #blog-body {
    width: 100%;
  }
  #blog-body .block .detail {
    width: 70%;
    padding-right: 2%;
    padding-left: 2%;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  #blog-body .block .side {
    width: 20%;
    padding-right: 2%;
    padding-left: 2%; 

    padding-top: 30px;
  }

  #blog-body .block .side h2 {
    font: normal 18px/24px 'PT Serif', Georgia, serif;
  }
  #blog-body .block .side span {
    font-size: 13px;
    line-height: 20px;
  }
}

/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #blog-body {
    width: 100%;
  }
  #blog-body .block .detail {
    clear: both;
    width: 95%;
    border-right: none;
    padding-right: 2%;
    padding-left: 2%;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  #blog-body .block .side {
    border-top: 1px solid #eee;
    clear: both;
    width: 95%;
    padding-right: 2%;
    padding-left: 2%; 

    padding-top: 30px;
  }
}

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
  .container .sixteen.columns {
    width: 100%;
  }
  #nav {
    width: 100%;
  }
  #nav li {
    width: 20%;
  }
  #blog-body {
    width: 100%;
  }
  #blog-body .block .detail {
    clear: both;
    width: 95%;
    border-right: none;
    padding-right: 2%;
    padding-left: 2%;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  #blog-body .block .side {
    border-top: 1px solid #eee;
    clear: both;
    width: 95%;
    padding-right: 2%;
    padding-left: 2%; 

    padding-top: 30px;
  }
}


/* Code styles */
code {
	white-space: nowrap;
	font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
color: #52595d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
background-color: #f9f9f9;
padding: 0px 3px;
display: inline-block;
}

pre {
  border: 1px solid #cacaca !important;
  line-height: 1.2em;
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  padding: 10px;
  overflow:auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #FAFAFB;
  color: #393939;
  margin: 0px;
}

.contentful pre, .contentful pre.prettyprint {
  margin-bottom: 20px;
  padding: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

ul + pre {
  margin-top: 1em;
}

pre code {white-space: pre; border: none; }

pre span.comment {color: #aaa;}

pre.headers {
  margin-bottom: 0;
  border-bottom-width: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  color: #666;
  background-color: #f1f1f1;
  background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1)); 
  background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: linear-gradient(top, #f1f1f1, #e1e1e1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

pre.no-response {
  -webkit-border-radius: 3px 3px;
  -moz-border-radius: 3px 3px;
  border-radius: 3px 3px;
  border-bottom: 1px solid #CACACA;
}

pre.headers + pre.highlight {
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

pre.highlight {
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  background-color: #FAFAFB;
}

pre.terminal {
  background-color: #444;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 2px solid #DEDEDE;
  position: relative;
  padding: 10px;
  text-shadow: none;
  background-image: none;
  filter: none;
}

pre.terminal em {
  color: #f9fe64;
}

span.codeline {
  display: block;
  position: relative;
}

span.codeline:hover {
  background-color: #292929;
  margin: 0px;
  padding-left: 3px;
  margin-left: -3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #666666;
}

span.codeline span {
  display: inline-block;
  font-size: 10px;
  color: #fff;
  padding: 0 0.3em 0.05em;
  position: absolute;
  right: 0px;
  top: 0px;
  text-indent: -9999px;
  background-image: url(../images/qmark.png);
  background-repeat: no-repeat;
  background-position: 1px 3px;
  max-width: 8px;
  min-width: 8px;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

span.codeline span:hover {
  display: inline-block;
  text-indent: 0px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #000;
  border: 1px solid #292929;
  max-width: 1000px;
}

span.codeline:hover em {
  color: #666666;
}

pre.bootcamp {
  white-space: normal;
  margin-left: -10px;
  background-image: none;
}

span.bash-output {
  color: #63e463;
  display: block;
  position: relative;
  -moz-user-select: none;
  user-select: none;
}

/****************************/
/*       List Module        */
/****************************/

.list-module h2 {
  border: solid #cacaca;
  border-width: 1px;
  border-radius: 3px 3px 0px 0px;
  -moz-border-radius: 3px 3px 0px 0px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 6px 10px;
  background-color: #f1f1f1;
  background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1)); 
  background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: linear-gradient(top, #f1f1f1, #e1e1e1);
  color: #666;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 22px;
  margin: 0px;
}

.list-module .list-body {
  border: solid #cacaca;
  border-width: 0px 1px 1px 1px;
  border-radius: 0px 0px 3px 3px;
  -moz-border-radius: 0px 0px 3px 3px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fafafb;
  color: #666;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.list-module .list-body .icon {
  display: block;
  height: 28px;
  width: 28px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent url(images/popular_guide_sprites.png) 0 0 no-repeat;
}

.list-module a {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e9ecee;
  padding: 6px 10px;
  position: relative;
  display: block;
}

.list-module a:hover {
  border-top: 1px solid #fafafb;
  border-bottom: 1px solid #e5e8ea;
  background-color: #f0f0f3;
  text-decoration: none;
}

.list-module a h3 {
  color: #4183C4;
}

.list-module a:hover h3 {
  text-decoration: underline;
}

.list-module ul {
  list-style-type: none;
  margin: 0px;
}

.list-module h3 {
  margin: 0px;
  font-size: 13px;
}

.list-module .list-body a p {
  color: #666;
  margin: 0px;
}

/* @end */

/****************************/
/*  Expandable List Module  */
/****************************/

div.expandable > ul h3 {
  display: table;
  width: 100%;
}

div.expandable > ul h3 > a {
  display: table-cell;
  background-color: #e1e1e1;
  background-image: -moz-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -o-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1)); 
  background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1); 
  background-image: linear-gradient(top, #f1f1f1, #e1e1e1);
}

div.expandable > ul h3 > a:hover {
  background-color: #e1e1e1;
  background-image: -moz-linear-gradient(top, #e1e1e1, #d1d1d1);
  background-image: -o-linear-gradient(top, #e1e1e1, #d1d1d1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#d1d1d1));
  background-image: -webkit-linear-gradient(top, #e1e1e1, #d1d1d1);
  background-image: linear-gradient(top, #e1e1e1, #d1d1d1);
}

div.expandable > ul h3 > a.collapsed,
div.expandable > ul h3 > a.expanded {
  background-image: url(/shared/images/expand-arrows.png);
  background-position: 0px -3px;
  background-repeat: no-repeat;
  width: 13px;
  border-right: 1px solid #cacaca;
  padding: 8px 11px;
}

div.expandable > ul h3 > a.expanded {
  background-position: -38px -3px;
}

div.expandable > ul h3 > a.collapsed:hover {
  background-image: url(/shared/images/expand-arrows.png);
  background-position: 0px -43px;
  background-repeat: no-repeat;
  width: 13px;
  border-right: 1px solid #cacaca;
  padding: 8px 11px;
}

div.expandable > ul h3 > a.expanded:hover {
  background-position: -38px -43px;
}

/* @end */


/* Pygments for LIVE PREVIEW */
.highlight  { background: #ffffff; margin-bottom: 20px;} 
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */