#layout,.nav-list{padding:0}.brand-title,.content-subhead{text-transform:uppercase}.footer,.header,.post-share-links{text-align:center}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pure-g [class*=pure-u],button,html,input,select,textarea{font-family:"Source Sans Pro",serif}.brand-title,.nav-item a,.post-title{font-family:Oxygen,sans-serif}a{text-decoration:none;color:#3399CC}.brand-title a,.sidebar{color:#fff}a:focus,a:hover{font-weight: bold;}.brand-title a:hover,.post-share-links a:hover,.post-title:hover{text-decoration:none}h3{font-weight:100}.pure-img-responsive{max-width:100%;height:auto}.header{top:auto;margin:3em auto}.sidebar{background:#3d4f5d}.brand-tagline,.brand-title{margin:0}.brand-tagline{font-weight:240;color:#b0cadb;font-size: 18px}.nav-list{margin:0;list-style:none}.nav-item{display:inline-block;zoom:1}.nav-item a{background:0 0;border:2px solid #b0cadb;color:#fff;margin-top:1em;font-weight:700}.nav-item a:focus,.nav-item a:hover{border:2px solid #3d92c9;text-decoration:none}.content-subhead{color:#aaa;border-bottom:1px solid #eee;padding:.4em 0;font-size:80%;font-weight:500;letter-spacing:.1em}.hugo,.post-title,pre .class,pre .css-property,pre .css-value,pre .entity.function,pre .id,pre .keyword,pre .sass,pre .storage.function,pre .vendor-prefix{font-weight:700}.content{padding:2em 1em 0}.post{padding-bottom:1em}.post-title{font-size:1.2em;color:#0a3a5d;margin:.4em 0}.post-avatar{border-radius:50px;float:right;margin-left:1em}.post-share-links,pre{border:1px solid #ccc}.post-description{font-family:"Source Sans Pro",serif;color:#333;line-height:1.35em}.post-meta{color:#999;font-size:90%;margin:5px 0}.post-category{margin:0 .1em;padding:.3em 1em;color:#fff;background:#3165be;font-size:80%}.post-category-design{background:#5aba59}.post-category-pure{background:#4d85d1}.post-category-yui{background:#8156a7}.post-category-javascript{background:#df2d4f}.post-images{margin:1em 0}.post-image-meta{margin-top:-3.5em;margin-left:1em;color:#fff;text-shadow:0 1px 1px #333}.footer{padding:1em 0;color:#555;font-size:80%}.footer ul li a{display:inline;padding:0}.hugo{color:#333}.footer .pure-menu a:focus,.footer .pure-menu a:hover{background:0 0}.footer li{list-style-type:none}.post-share-links{margin:15px 15px 0 0;float:left;padding:10px}.post-share-links a{color:#aaa;font-size:28px;line-height:36px;margin:0 auto;display:block;transition:all .3s ease-in}.post-share-links a:hover{color:#3d92c9}.post-share-links h4{font-family:Oxygen,sans-serif;margin:0 0 5px;color:#aaa}@media (min-width:48em)
{.content{padding:2em 3em 0;margin-left:20%}.header{margin:10% 2em 0;text-align:left}
.sidebar{position:fixed;top:0;bottom:0}.tocbar{padding: 2em 1em 0;
    margin-left: 78%;
    position: fixed;
    /* background: #f9f9f9 none repeat scroll 0 0; */
}}
pre{word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px}code{border:1px solid #eaeaea;margin:0 2px;padding:0 5px;font-size:12px}pre code{border:0;padding:0;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}code,pre{font-family:Consolas,'Liberation Mono',Courier,monospace;color:#333;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}pre,pre code{font-size:13px}pre .comment{color:#998}pre .support{color:#0086B3}pre .tag,pre .tag-name{color:navy}pre .css-property,pre .css-value,pre .support.namespace,pre .vendor-prefix{color:#333}pre .constant.numeric,pre .hex-color,pre .keyword.unit{font-weight:400;color:#099}pre .entity.class{color:#458}pre .entity.function,pre .entity.id{color:#900}pre .attribute,pre .variable{color:teal}pre .string,pre .support.value{font-weight:400;color:#d14}pre .regexp{color:#009926}@font-face {font-family: 'strasuaregular';src: url('strasua-webfont.woff2') format('woff2'),url('strasua-webfont.woff') format('woff');font-weight: normal;font-style: normal;}td, th {padding: 2px 17px 4px 17px; border-bottom: 1px solid red;}

#TableOfContents > ul {
    list-style-type: none;
    padding-left: 10px;
  }
#TableOfContents > ul > li ul {
    list-style-type: none;
    padding-left: 1em;
}

#TableOfContents {
   # background: #f9f9f9 none repeat scroll 0 0;
   # border: 1px solid #aaa;
    display: table;
    font-size: 95%;
   # margin-bottom: 1em;
   # padding: 20px;
    width: auto;
    border-left: 1px solid gray;
}

#TableOfContents a:hover{
    color: black;
    font-weight: normal;
}
#TableOfContents a{
    color: #777;
    font-weight: normal;
}

.usman {display: inline-block; max-width: 700px;}

.usman img {max-width:95%; height:auto;}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}