.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;-webkit-box-shadow:inset 0 0 5px 5px #222;-moz-box-shadow:inset 0 0 5px 5px #222;box-shadow:inset 0 0 5px 5px #222}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);background-image:linear-gradient(#4d4d4d,#1a1a1a);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.0em;
    background: rgb(255, 255, 255);
}

h1 {
    margin-top: 1em;
}

p {
   padding: 0.1em 0;
}

input{
    font-size: 75%;
    font-family: "Lucida Grande" arial sans-serif;
}

/* ----------------------------------------------------*/
/* ---------->>> Pure CSS Customizations <<<-----------*/
/* ----------------------------------------------------*/
.header-menu{
    font-size: 100%;
    margin: 0;
    line-height: 1em;
    color: #ECECEC;
}

.header-menu ul li{
    display: inline-block;
}

.header-menu header-menu >ul{
    height: 1.8em;
}

.header-menu a.header-a{
    color: #EFEFEF;
    font-size: 0.9em;
    text-decoration: none;
    padding: 0 1em;
    line-height: 1.8em;
    display: inline-block;
}

.header-menu a.header-a:hover{
    text-decoration: underline;
}

.header-menu  a.header-a.heleft{
    padding-right: 0.2em;
}

.header-menu  a.header-a.heright{
    padding-left: 0.2em;
}

.header-pull-right {
    display: table;
}
.header-pull-right > ul, .header-menu > ul{
    display: table-cell;
    vertical-align: middle;
}
.header-pull-right > ul {
    text-align: right;
}

.header-title{
    display: table-cell;
    min-width: 25em;
    vertical-align: middle;
}

#mobile-header {
    display: none;
}

#mobile-header button{
    border: none;
    background: #666;
    padding: 0.2em 1em;
    color: #ECECEC;
    border: 1px #302C2C solid;
}

.sidr ul li.sidr-class-join-line{
    display: none;
}

.sidr-class-home-nav{
    display: none;
}

#sidr-id-header-search-input{
    display: none;
}

#sidr-id-mobile-header{
    display: none;
}

#sidr-id-meta-heading-search {
    display: none;
}

.sidr-class-ac-list li.sidr-class-ac-hidden {
    display: none;
}
a.sidr-class-ac-li-a {
    display: none;
}

#responsive-menu-button{
    font-size: 100%;
}


/* ---------------------------------------------------*/
/* ---------->>> General Functional Styles<<<---------*/
/* ---------------------------------------------------*/

.external-link{
    font-size: 1em;
    color: #068519;
    text-decoration: none;
}
.external-link:hover{
    color: #041F63;
    text-decoration: underline;
}


.internal-link, .focus-link{
    color: #A01F70;
    text-decoration: none;
}
.internal-link:hover, .focus-link:hover{
    text-decoration: underline;
    color: #690259;
}

.missing-link{
    color: #BBBB70;
    text-decoration: none;
}
.missing-link:hover{
    color: #666620;
    text-decoration: underline;
}

a.expand-collapse-link{
    font-size: 0.8em;
    color:#190797;
}
a.expand-collapse-link:hover{
    color: #190797;
}

.placeholder
{
  color: #aaa;
}

.underline{
    text-decoration: underline;
}

/* ---------------------------------------------------*/
/* ---------->>> Layout Styles <<<--------------------*/
/* ---------------------------------------------------*/
.noscript-alert{
    width: 100%;
    height: 100%;
    background-color: #EAF05B;
    line-height: 1.5em;
    text-align: center;
    font-size: 1.1em;
}

#header {
    background: #333;
    z-index: 10;
    position: relative;
    width: 100%;
}

#meta-heading-search{
    padding: 0;
}

.meta-home-link{
    margin-left: 0.2em;
    padding: 0.3em 0 0.5em 110px;
    background-image: url('/static/images/metacademy-toolbar-icon1.png?be1b7bb4d19d');
    background-repeat: no-repeat;
    background-position: left center;
    height: 1.7em;
}

a.home-nav{
    display: inline;
    padding: 0;
}

#header-search-input {
    height: 1.8em;
}

#header-search-input, user-form-field input{
    outline: none;
    padding: 0.2ex 0.4ex;
    /* margin-top: 0.3ex; */
    border: 1px solid #999999;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    background-color: white;
    border-radius: 2px;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
    -ms-box-sizing: border-box; /* IE */
    box-sizing: border-box;
    width: 16em;
}
#header-search-input[type="text"]:focus, .user-form-field input[type="text"]:focus{
    border-color: #501644;
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.075);
}

#header-search-input[type="text"]:hover, .user-form-field input[type="text"]:hover{
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.075);
}

#main {
    width: 100%;
    height: 100%;
    color: #333;
}

.dev-note{
    margin-top: 1em;
    line-height: 1.2em;
    font-size: 0.9em;
    text-align: center;
    font-style: italic;
    color: #512161;
}

.dev-note p{
    padding: 0.1em 0.7em;
}



/* -----------------------------------*/
/* --->>> Search/Autocomplete <<------*/
/* -----------------------------------*/
.search-container {
  position: relative;
  height: 2em;
  color: #333;
}

.search-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 2em;
  width: 2em;
  z-index: 11;
  cursor: pointer;
}

.search-input:focus ~ .search-button .bg {
  fill: #501644;
}

.search-button:hover .bg {
  fill: #501644;
}

.search-input {
  z-index: 10;
  position: absolute;
  border-radius: 0px;
  background-color: #ffffff;
  border: 1px solid #BABDC0;
  display: block;
  font-size: 70%;
  padding-left: .5em;
  margin: 0;
  height: 100%;
}

.search-input:focus {
  outline: none;
  border-color: #501644;
}

.search-container, .search-input, .search-button, .ac-list, .ac-li, .ac-li-a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.db-search-wrap {
    position: relative;
    display: inline-block;
    font-size: 0.9em;
}

.ac-list {
  padding: 0;
  margin: 0;
  position: absolute;
  width: inherit;
  top: 2em; /* must match the container height */
  border: 1px solid #BABDC0;
  border-width: 0 1px 1px 1px;
  border-bottom: 1px solid #BABDC0;
  background-color: #ffffff;
  z-index: 9;
}

.header-menu .ac-list {
    top: 1.4em;
}

.ac-hidden, .header-menu ul li.ac-hidden {
  display: none;
}

.ac-li {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #501644;
  vertical-align:middle;
  text-decoration: none;
  text-align: left;
  width: 100%;
}

.ac-li-a {
  color: #A01F70;
  text-decoration: none;
  margin: 0;
  padding: 0.3em 0;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1.5em;
  padding-left: 2em;
}

.ac-li-a:hover {
  background-color: #F5E8F2;
  color: #690259;
}

.ac-li-a:focus {
  background-color: #F5E8F2;
  color: #690259;
  outline: none;
}

/* -----------------------------------*/
/* ---------->>> Grid System  <<------*/
/* -----------------------------------*/
[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}
.col-1-2 {
  width: 50%;
}
.col-2-5 {
  width: 40%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* .grid:after { */
/*   content: ""; */
/*   display: table; */
/*   clear: both; */
/* } */

/* .grid-pad { */
/*   padding: 20px 0 20px 20px; */
/* } */

/* .grid-pad > [class*='col-']:last-of-type { */
/*   padding-right: 20px; */
/* } */

/* [class*='col-'] { */
/*   padding-right: 20px; */
/* } */
/* [class*='col-']:last-of-type { */
/*   padding-right: 0; */
/* } */


/* -----------------------------------*/
/* ---------->>> Media Rules  <<------*/
/* -----------------------------------*/
@media only screen and (max-width:999px){
    #header-search-input{
        width: 14em;
    }
    .header-title{
        min-width: 19em;
    }
}

@media only screen and (max-width:899px){
    #mobile-header {
        display: table-cell;
        vertical-align: middle;
        direction: rtl;
        padding-right: 1em;
    }

    #header > ul{
        display: none;
    }
    #header{
        height: 1.85em;
    }
}

@media only screen and (max-width: 767px){
    .meta-home-link{
        padding: 0.5em 0 0.5em 35px;
        background-image: url('/static/images/metacademy-toolbar-icon1-crop.png?be1b7bb4d19d');
        background-repeat: no-repeat;
        background-position: left center;
        height: 1.7em;
    }
    .header-title{
        min-width: 0;
    }

    div.dev-note{
        margin-top: 1em;
    }
    .dev-note p{
        margin-top: 1em;
    }
}

#main p{
   margin:  0.5em 0;
}

#main h1{
    font-size: 1.3em;
    text-align: center;
    margin: 1em 0;
    color: #50094A;
    font-weight: bold;
}

#main ol{
    list-style-type: decimal;
}

#main ul,ol{
    padding: 0 0 0 3em;
    line-height: 1.5em;
}

#main i{
    font-style:italic;
}

#main em{
    font-style:italic;
}

.about-meta{
    width: 40em;
    margin: 0 auto;
    line-height: 1.4em;
    padding-bottom: 5em;
    font-size: 1.2em;
}

.question{
    font-weight: bold;
    font-size: 1.15em;
    margin-top: 1em;
}

.social-icons {
    text-align: center;
    margin-top: -20px;
    font-size: 0.8em;
}

.social-icons i {
    color: rgb(51, 51, 51);
    margin-right: 0.5em;
}

.social-icons .icon-twitter:hover {
    color: #55ACEE;
}

.social-icons .icon-github-circled:hover {
    color: #4183c4;
}

@media only screen and (max-width: 769px){
    section.about-meta{
        width: 95%;
    }
}

@font-face {
  font-family: 'fontello';
  src: url('/static/fonts/fontello-font/fontello.eot?40392883&4ca26ed7131f');
  src: url('/static/fonts/fontello-font/fontello.eot?40392883&4ca26ed7131f#iefix') format('embedded-opentype'),
       url('/static/fonts/fontello-font/fontello.woff?40392883&4ca26ed7131f') format('woff'),
       url('/static/fonts/fontello-font/fontello.ttf?40392883&4ca26ed7131f') format('truetype'),
       url('/static/fonts/fontello-font/fontello.svg?40392883&4ca26ed7131f#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('/static/css/font/fontello.svg?40392883#fontello') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-twitter:before { content: '\e800'; } /* '' */
.icon-github-circled:before { content: '\e801'; } /* '' */