/* to make lines scroll instead of wrap */
/* from http://stackoverflow.com/a/23393920 */
.highlight pre code * { white-space: nowrap; }

.highlight pre { overflow-x: auto; }

.highlight pre code { white-space: pre; }

/* github style pygments theme for jekyll */
/* from https://github.com/aahan/pygments-github-style */
.highlight pre { background-color: #272822; color: #f8f8f2; max-height: 400px; }

.highlight .hll { background-color: #272822; }

.highlight .c { color: #75715e; }

/* Comment */
.highlight .err { color: #960050; background-color: #1e0010; }

/* Error */
.highlight .k { color: #66d9ef; }

/* Keyword */
.highlight .l { color: #ae81ff; }

/* Literal */
.highlight .n { color: #f8f8f2; }

/* Name */
.highlight .o { color: #f92672; }

/* Operator */
.highlight .p { color: #f8f8f2; }

/* Punctuation */
.highlight .cm { color: #75715e; }

/* Comment.Multiline */
.highlight .cp { color: #75715e; }

/* Comment.Preproc */
.highlight .c1 { color: #75715e; }

/* Comment.Single */
.highlight .cs { color: #75715e; }

/* Comment.Special */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gs { font-weight: bold; }

/* Generic.Strong */
.highlight .kc { color: #66d9ef; }

/* Keyword.Constant */
.highlight .kd { color: #66d9ef; }

/* Keyword.Declaration */
.highlight .kn { color: #f92672; }

/* Keyword.Namespace */
.highlight .kp { color: #66d9ef; }

/* Keyword.Pseudo */
.highlight .kr { color: #66d9ef; }

/* Keyword.Reserved */
.highlight .kt { color: #66d9ef; }

/* Keyword.Type */
.highlight .ld { color: #e6db74; }

/* Literal.Date */
.highlight .m { color: #ae81ff; }

/* Literal.Number */
.highlight .s { color: #e6db74; }

/* Literal.String */
.highlight .na { color: #a6e22e; }

/* Name.Attribute */
.highlight .nb { color: #f8f8f2; }

/* Name.Builtin */
.highlight .nc { color: #a6e22e; }

/* Name.Class */
.highlight .no { color: #66d9ef; }

/* Name.Constant */
.highlight .nd { color: #a6e22e; }

/* Name.Decorator */
.highlight .ni { color: #f8f8f2; }

/* Name.Entity */
.highlight .ne { color: #a6e22e; }

/* Name.Exception */
.highlight .nf { color: #a6e22e; }

/* Name.Function */
.highlight .nl { color: #f8f8f2; }

/* Name.Label */
.highlight .nn { color: #f8f8f2; }

/* Name.Namespace */
.highlight .nx { color: #a6e22e; }

/* Name.Other */
.highlight .py { color: #f8f8f2; }

/* Name.Property */
.highlight .nt { color: #f92672; }

/* Name.Tag */
.highlight .nv { color: #f8f8f2; }

/* Name.Variable */
.highlight .ow { color: #f92672; }

/* Operator.Word */
.highlight .w { color: #f8f8f2; }

/* Text.Whitespace */
.highlight .mf { color: #ae81ff; }

/* Literal.Number.Float */
.highlight .mh { color: #ae81ff; }

/* Literal.Number.Hex */
.highlight .mi { color: #ae81ff; }

/* Literal.Number.Integer */
.highlight .mo { color: #ae81ff; }

/* Literal.Number.Oct */
.highlight .sb { color: #e6db74; }

/* Literal.String.Backtick */
.highlight .sc { color: #e6db74; }

/* Literal.String.Char */
.highlight .sd { color: #e6db74; }

/* Literal.String.Doc */
.highlight .s2 { color: #e6db74; }

/* Literal.String.Double */
.highlight .se { color: #ae81ff; }

/* Literal.String.Escape */
.highlight .sh { color: #e6db74; }

/* Literal.String.Heredoc */
.highlight .si { color: #e6db74; }

/* Literal.String.Interpol */
.highlight .sx { color: #e6db74; }

/* Literal.String.Other */
.highlight .sr { color: #e6db74; }

/* Literal.String.Regex */
.highlight .s1 { color: #e6db74; }

/* Literal.String.Single */
.highlight .ss { color: #e6db74; }

/* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2; }

/* Name.Builtin.Pseudo */
.highlight .vc { color: #f8f8f2; }

/* Name.Variable.Class */
.highlight .vg { color: #f8f8f2; }

/* Name.Variable.Global */
.highlight .vi { color: #f8f8f2; }

/* Name.Variable.Instance */
.highlight .il { color: #ae81ff; }

/* Literal.Number.Integer.Long */
/* Generic Heading & Diff Header */
.highlight .gu { color: #75715e; }

/* Generic.Subheading & Diff Unified/Comment? */
.highlight .gd { color: #f92672; }

/* Generic.Deleted & Diff Deleted */
.highlight .gi { color: #a6e22e; }

/* Generic.Inserted & Diff Inserted */
body { margin: 0 !important; background-color: #FCFCFC !important; color: #363636 !important; }

table { border: 1px solid #ccc; }
table thead { background-color: #eee; }
table tr { border: 1px solid #ccc; }
table th { text-align: center; width: 200px; }
table td { text-align: center; border: 1px solid #ccc; }

.in-iframe .navbar, .in-iframe footer, .in-iframe .tutorial-nav, .in-iframe hr, .in-iframe .breadcrumb, .in-iframe .coursepartdetails, .in-iframe .progressbarcreate, .in-iframe .hidewhenincreate, .in-iframe iframe { display: none; }
.in-iframe .showwhenincreate { display: block; }
.in-iframe .hideinlearn { display: block; }
.in-iframe img { max-width: 100%; display: block; margin: 20px auto 40px auto; }
.in-iframe .homeh1 h1 { text-align: center; }
.in-iframe .continue-tutorial, .in-iframe .createhr, .in-iframe .lear { display: block; }
.in-iframe .createhr { margin-top: 20px; color: #6d6d6d; }
.in-iframe .overviewblock h2 { height: 34px; }
.in-iframe .overviewblock .title { padding: 0 10px; }
.in-iframe .overviewblock .shortdescription, .in-iframe .overviewblock .difparent { display: none; }
.in-iframe .overviewblock .button { margin: 0; text-align: center; width: 170px; padding: 5px 0; }
.in-iframe .overviewblock .imgcontainer { display: none; }
.in-iframe .overviewblock .imgcontainer-create img { display: block; width: auto; height: 60px; float: right; margin-top: 0; }
.in-iframe h1, .in-iframe h2, .in-iframe h3, .in-iframe h4, .in-iframe h5, .in-iframe h6 { font-weight: bold; color: #363636; }
.in-iframe p, .in-iframe li, .in-iframe ol { font-size: 12px; font-weight: normal; }
.in-iframe ol, .in-iframe ul { padding-left: 20px; }
.in-iframe .next-button, .in-iframe .prev-button { margin-bottom: 5px; }
.in-iframe .expanded { display: block; }
.in-iframe .hidden { display: none; }
.in-iframe .hide { display: none; }
.in-iframe .container, .in-iframe .infocontainer { margin: 15px; }
.in-iframe figure.highlight { margin: 0; }
.in-iframe figure.highlight pre { padding: 10px; font-size: 12px; }
.in-iframe table { font-size: 12px; }
.in-iframe .jumbotron { display: none; }
.in-iframe .learncreate-header { display: none; margin-bottom: 10px; height: 40px; line-height: 30px; }
.in-iframe .learncreate-header .goback { position: absolute; padding-left: 10px; text-align: center; cursor: pointer; }
.in-iframe .learncreate-header .title { letter-spacing: .05em; font-weight: 500; background-image: url("../fonts/single_icons/learn.svg"); background-position: left; background-repeat: no-repeat; padding-left: 30px; }
.in-iframe .create-course-info { display: block; }
.in-iframe .create-course-info .infocontainer { background-color: #e6ecf2; margin: 10px; padding: 4px 15px; cursor: pointer; }
.in-iframe .create-course-info .infocontainer .info-title { padding: 5px 0; text-align: center; }
.in-iframe .create-course-info .infocontainer .info-title .icon-arrow-right, .in-iframe .create-course-info .infocontainer .info-title .icon-arrow-down { float: left; }
.in-iframe .create-course-info .infocontainer .info-content { padding: 5px 0; margin-bottom: 10px; }
.in-iframe .create-course-info .infocontainer .info-content .course p { text-align: center; }
.in-iframe .create-course-info .infocontainer .info-content .course .progressbarcontainer { margin: 0 auto; display: block; }
.in-iframe .create-course-info .infocontainer .info-content .tag { display: inline-block; font-size: 14px; background-color: #90D8FF; color: white; padding: 3px 7px; margin: 0 5px 5px 0; }
.in-iframe .create-course-info .infocontainer .info-content .tag:last-of-type { margin-bottom: 10px; }
.in-iframe .create-course-info .infocontainer .info-content .sumerianfont-icon-checked { color: #8bc34a; padding: 4px 4px 0 0; }
.in-iframe .create-course-info .infocontainer .info-content .achievement { font-size: 14px; }
.in-iframe .create-course-info .infocontainer .info-content .progressbarcontainer { width: 100px; height: 100px; display: inline-block; margin: 0 auto; }
.in-iframe .create-course-info .infocontainer .info-content .progressbarcontainer .progressbar-text { font-weight: bold; }
.in-iframe .create-course-info .infocontainer .info-content .progressbarcontainer .progressbar-text:after { content: "%"; }
.in-iframe .learncreate-header { width: 100%; padding: 5px 0; text-align: center; background-color: #252525; }
.in-iframe .button, .in-iframe .previouspagepart, .in-iframe .nextpagepart { width: 100%; padding: 10px 10px 12px 10px; color: white; background-color: #4A90E2; text-align: center; border-radius: 3px; transition: all 0.3s ease 0s; margin-bottom: 10px; font-size: 12px; cursor: pointer; }
.in-iframe .button:hover { background-color: #75c6f3; }
.in-iframe a:hover { text-decoration: none; }

.abouttheauthor { background-color: #F6F6F6; padding: 16px; overflow: auto; }

.authorphoto { display: inline-block; float: left; overflow: hidden; margin-right: 16px; }
.authorphoto img { width: 96px; clip-path: circle(36px at center); }

.twitch-banner { background-color: #232f3e; }
.twitch-banner a { color: #FFFFFF; }
.twitch-banner a:visited, .twitch-banner a:hover, .twitch-banner a:active { color: #FFFFFF; }

.banner-spacer { padding: 20px 20px; margin-top: -30px; }

.slack-spacer { padding: 48px 20px; background: #F6F6F6; }

.card { /* Add shadows to create the "card" effect */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; margin-bottom: 24px; }

.cardimg { margin-left: 16px; }

.slack-button { width: 172px; height: 40px; background: #FFFFFF; border: 1px solid #999999; font-weight: 400; border-radius: 4px; color: #333; }
@media screen and (min-width: 768px) { .slack-button { margin: 25% 0; } }
.slack-button a { color: #333; }

.slack-button:hover { background: #333; color: #FFF; cursor: pointer; }

.course-button { width: 172px; height: 40px; background: #232f3e; border: 1px solid #333; font-weight: 400; border-radius: 4px; color: #FFF; }
.course-button a { color: #FFF; }

.course-button:hover { background: #FFFFFF; color: #232f3e; border-radius: 4px; cursor: pointer; }

.banner-bg { margin: 0; }
.banner-bg .watch { font-weight: 400; margin: 15px 0; }
.banner-bg .box { background-color: #ff9900; padding: 0px 15px; display: inline-block; margin: 10px 0px; }
.banner-bg h3 { margin: 0; line-height: 1.5; font-size: 20px; }
.banner-bg .description { font-weight: 200; }

.shortdescription ul { padding-inline-start: 0; }
.shortdescription ul > li { list-style-type: none; }