.single-sc_skill_resources #homepage-page-container,
.single-challenges_users #homepage-page-container,
.single-sc_skill_challenges #homepage-page-container {
    margin-top: 50px;
}
.single-sc_skill_resources #logged-in-top-nav-container,
.single-challenges_users #logged-in-top-nav-container,
.single-sc_skill_challenges #logged-in-top-nav-container {
    display: none;
}

.single-challenges_users #container #site-header {
    display: none;
}
.skill-sidebar {
	width:30%;
	padding:30px;
}

.skill-sidebar h4 {
    font-family: 'montserrat';
	font-size:14px;
	text-transform:uppercase;
}

.skill-content-main {
	border-left:1px solid #f2f2f2;
	float:left;
	width:70%;
	padding:30px 40px;
}
.skill-content-main #tabs {
    float: left;
    margin-bottom: 20px;
    overflow: auto;
    width: 367px;
}
.skill-content-main #tabs ul {
    background:#dfe0e1;
    border:1px solid #979797;
    border-radius:3px 3px 0 0;
    overflow:auto;
    margin-bottom: 0;
    width: 367px;
}

.skill-content-main #tabs ul li a {
    color:#5f5e5e;
    text-align:center;
    width:100px;
    font-family:arial;
    font-size:14px;
    display:block;
    padding: 14px 20px;
}

.skill-content-main #tabs ul li {
    float:left;
    margin-bottom:0;
    border-right:1px solid #979797;
}

.skill-content-main #tabs ul li.active {
    background:#eeeeef;
}
.skill-content-main #code-preview-preview {
    border-bottom: 1px solid #979797;
    border-right: 1px solid #979797;
    min-height: 374px;
    width: 392px;
}
.skill-content-main .code-preview-iframe-header {
    background: url("../img/backgrounds/code-preview-header-small.png") no-repeat scroll 0 0 transparent;
    /*background: none;*/
    height: 52px;
    width: 392px;
}
.skill-content-main .challenge-form-container form#core-skills-challenge-code-preview .CodeMirror {
    width: 367px;
}
.skill-content-main .challenge-form-container form#core-skills-challenge-code-embed .CodeMirror,
.skill-content-main .challenge-form-container form#core-skills-challenge-ruby-code-snippet .CodeMirror {
    border-bottom: 1px solid #BCBCBC !important;
    border-image: none !important;
    border-left: 1px solid #BCBCBC !important;
    border-right: 1px solid #BCBCBC !important;
    border-top: medium none;
}
.skill-content-main .challenge-form-container input[type="url"] {
    width: 585px;
}
.skill-main {
    border-bottom: 1px solid #f2f2f2;
	overflow:auto;
}

h1#skill-title {
    font-family: 'montserrat';
    font-size: 20px;
    margin-top: 0;
    text-transform: uppercase;
}

.skill-content {
    max-width: 800px;
}

.skill-content .inner {
    margin-bottom: 50px;
}
.skill-content .inner img {
    max-width: 720px;
    height: auto;
	border:1px solid #e3e3e3;
}

.skill-info-text p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 24px;
	color:#3b3b3b;
}

.skill-info-text h5 {
    border-bottom: 1px solid #DDDDDD;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 40px;
    padding-bottom: 4px;
    text-transform: uppercase;
}
.skill-info-text ol li {
    list-style-type: decimal;
    margin-left: 40px;
}
.skill-info-text ul li {
    list-style-type: disc;
    margin-left: 40px;
}
#iframe-holder {
    display: block;
    height: 90%;
    min-height: 600px;
    padding-top: 0;
    position: relative;
    width: 100%;
}

.skill-info-text h4 {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 40px;
}

.skill-info-text code {
	background: url("../img/backgrounds/code-lines.png") repeat scroll -44px 0 #F8F8F8;
	    border: 1px solid #DDDDDD;
	    color: #117700;
	    display: block;
	    font-family: monospace,sans-serif;
	    line-height: 33px;
	    padding: 0 20px;
}

.skill-info-text ul, .skill-info-text ol {
	margin-bottom:20px;
}
.skill-info-text ul:after, 
.skill-info-text ol:after {
  content:"";
  display:table;
  clear:both;
}
#code-preview-iframe {
    width: 392px;
}
#code-preview-iframe img {
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    margin-bottom: 20px;
    width: 712px;
}

.core-skill-description h1 .post-edit-link,
.individual-skill-holder h2 .post-edit-link,
.individual-skill-holder h4 .post-edit-link {
    font: normal 15px/20px 'Open Sans', sans-serif;
    text-transform: capitalize;
    padding: 0 10px;
    color: #4c9fb2;
}
.individual-skill-holder h2 .post-edit-link:hover,
.individual-skill-holder h4 .post-edit-link:hover {
    text-decoration: underline;
}

.individual-skill-resource ol li, 
.individual-skill-resource ul li, 
.skill-challenge ol li, .skill-challenge ul li {
    font-size: 16px;
    line-height: 32px;
    margin-bottom: 20px;
    margin-left: 26px;
    padding-left: 0;
    clear:both;
}

.individual-skill-resource .skill-info-text > ul > li {
list-style-type:disc;	
}

.skill-description .individual-skill-resource ul li {
    margin-bottom: 0;
}

/** 102 Lesson 1 **/
.individual-skill-resource #myCarousel ol li.active {
    margin-bottom: 20px;
    margin-left: 26px;
    padding-left: 0;
}
.individual-skill-resource #myCarousel .carousel-control .glyphicon-chevron-right {
    top: 48%;
    right: 13%;
}
.individual-skill-resource #myCarousel .carousel-control.right {
    margin-right: 15px;
}
/** END 102 Lesson 1 **/

.challenge-form-container form .CodeMirror {
    background: url("../img/backgrounds/code-lines.png") repeat scroll -14px 0 #f8f8f8;
    border-radius: 0 0 2px 2px;
    line-height: 33px;
    padding-top: 0;
    width: 100%;
}

#challenge-feedback #challenge-submit-alerts, #challenge-feedback #challenge-submit-errors, #challenge-feedback #success {
    border-radius: 0;
    left: 0;
    margin-left: 0;
    position: fixed;
    top: 48px;
    width: 100%;
    z-index: 101;
}

.skill-challenge-solution, .skill-challenge-solution-2, .skill-challenge-solution-3, #suggestions, .embed-example-code {
    background-color: #ebebeb;
    display: none;
    margin-bottom: 20px;
    padding: 20px;
}
#suggestions h2 {
	margin-bottom: 20px;
}
#suggestions ul li {
	background: url('../img/icons/icon-green-arrow.png') no-repeat 0px 4px;
	padding-left: 30px;
}

.skill-info-text li {
	font-size:16px;
}

/* User Challenges */
.user-challenge-main {
	border-bottom:1px solid #f2f2f2;
	padding:0 0 50px 0;
	overflow:auto;
}
.user-challenge-header {
    padding: 30px 0 20px;
    width: 60%;
}
.user-challenge-header h1 {
    font-family: 'montserrat';
}
.user-challenge-header p {
	text-transform:uppercase;
}
.user-challenge-sidebar {
	float:right;
	width:40%;
	padding: 133px 0px 0 60px;
}

.user-challenge-sidebar h3 {
    font-family: 'montserrat';
	margin-top:0;
}
.user-challenge-content-main {
	float:left;
	width:60%;
}
.user-challenge-content-main h4 {
    text-transform: uppercase;
}
.user-challenge-content-main #preview-frame {
    width: 100%;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.challenge-form-container input[type="file"] {
    height: 62px;
    padding: 0;
    width: 552px;
}

.challenge-screenshot img {
    clear: both;
    height: auto;
    margin: 0px 0 20px;
    max-width: 100%;
	border:1px solid #e3e3e3;
}

.user-challenge-content-main .challenge-form-container form {
    margin: 0 0 20px;
    overflow: auto;
}

.challenge-embed-preview {
    margin-bottom: 40px;
    margin-left: 0;
    width: 100%;
}

.challenge-embed-preview iframe {
	height: 800px !important;
	width: 100%;
}

.challenge-button-container {
	width:50%;
	float:left;
}

.challenge-button-container h4 {
    font-family: 'open-sans';
    margin: 20px 0 0;
    text-transform: none;
}

.user-challenge-author {
	margin:0 0 80px;
}

.user-challenge-author #author-avatar {
	float:left;
	width:90px;
	margin:0 10px 0 0;
}

.user-challenge-author #author-avatar img {
	width:100%;
}
.user-challenge-author a,
.user-challenge-author a:hover {
    color: #333;
    font-weight: bold;
}

.user-challenge-author p a, .user-challenge-author p a:hover {
	font-weight:normal;
}

.challenge-button,
.skill-info-text .button,
.skill-description-text .button {
    background: #3b3b3b;
    text-transform: uppercase;
    padding: 15px;
    color: #FFFFFF;
    display: inline-block;
    width: 100%;
}
.challenge-button:hover,
.skill-info-text .button:hover {
    background: #454545;
    color: #FFFFFF;
    text-decoration: none;
}
.challenge-button a,
.challenge-button a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/* HTML free time awards */
#free-time-awards {
    /*background-color: #E7F1FD;*/
    /*border: 1px solid #BFD9FC;*/
    /*border-radius: 5px 5px 5px 5px;*/
    /*clear: left;*/
    color: #414141;
    display: none;
    font-size: 16px;
    /*right: 30px;*/
    margin-left: 0;
    margin-top: 30px;
    /*padding: 20px 30px 20px 20px;*/
    /*position: fixed;*/
    /*top: 60px;*/
    /*z-index: 99;*/
    /*box-shadow: 0 0 3px 2px #EDEDED;*/
    width:300px;
}
#free-time-awards p {
    background: url("../img/icons/icon-thumbsup.png") no-repeat scroll 0 4px;
    padding-left: 50px;
    margin-top: 20px;
}
#free-time-awards h4 {
    text-align: center;
    margin-bottom: 20px;
}

/* NEW Brainstorm a web app */
#data li, #messaging li {
    background: none repeat scroll 0 0 #0000FF;
    color: #FFFFFF;
    float: left;
    height: 150px;
    list-style-type: none;
    margin: 10px;
    padding: 20px 30px;
    text-align: center;
    width: 186px;
}
#data, #messaging {
    margin-left:0;
    margin-bottom: 40px;
    padding-left: 2px;
    *zoom: 1;
}
#data:before,
#data:after,
#messaging:before,
#messaging:after {
    content: " ";
    display: table;
}
#data:after, 
#messaging:after {
    clear: both;
}
/* entire container, keeps perspective */
.flip-container {
    float: left;
    margin: 10px;
    height:150px;
    width:246px;
        margin: auto;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform:rotateY(180deg); /* Opera, Chrome, and Safari */
    -moz-transform:rotateY(180deg); /* IE 9 */
    -ms-transform:rotateY(180deg); /* IE 9 */
    transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.6s;

    -mox-perspective: 1000;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.6s;

    -ms-perspective: 1000;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    perspective: 1000;
    transform-style: preserve-3d;
    transition: 0.6s;

    position: relative;
    height: 110px;
    width: 186px;
}
/* hide back of pane during swap */
.front, .back {    
    -webkit-backface-visibility:hidden;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.6s;

    -moz-backface-visibility:hidden;
    -mox-perspective: 1000;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.6s;

    -ms-backface-visibility:hidden;
    -ms-perspective: 1000;
    -ms-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    backface-visibility: hidden;
    perspective: 1000;
    transform-style: preserve-3d;
    transition: 0.6s;

    position: absolute;
    top: 0;
    left: 0;
    height: 110px;
    padding: 0 20px;
    margin: 0;
    width: 100%;
    text-align: center;
    line-height: 110px;

}
/* front pane, placed above back */
.front {
    background: url("http://4b93n32qwvjj3ddn5w3yhffoas6.wpengine.netdna-cdn.com/wp-content/themes/skillcrush3.0/img/blueprints/dark-pattern.png") repeat scroll 0 0 #509EA8;
    color: #FFFFFF;
    font-size: 24px;
    z-index: 2;
}
/* back, initially hidden pane */
.back {
    background: url("http://4b93n32qwvjj3ddn5w3yhffoas6.wpengine.netdna-cdn.com/wp-content/themes/skillcrush3.0/img/blueprints/pattern.png") repeat scroll 0 0 #ECF1F1;
    color: #1C383C;
    -webkit-transform:rotateY(180deg); /* Opera, Chrome, and Safari */
    -moz-transform:rotateY(180deg); /* IE 9 */
    -ms-transform:rotateY(180deg); /* IE 9 */
    transform: rotateY(180deg);
}
.back span {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}
#messaging .front {
   padding-top: 0;
}
/* end */

.skill-main .html-viewer {
    float: left;
    font-family: 'Droid sans',sans serif;
    margin-top: 23px;
    width: 567px;
    background: #F8F8F8 url("../img/backgrounds/code-lines.png") repeat 0 41px;
    border: 1px solid #BCBCBC;
    border-radius: 3px;
}
.html-editor-fake {
    background: none repeat scroll 0 0 #f7f7f7;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 2px 40px 4px 60px;
}

.skill-main .html-viewer ol {
    color: #B8B8B8;
    float: left;
    font: 13px/20px 'Droid sans',sans-serif;
    height: 270px;
    list-style-type: none;
    margin: 0;
    padding: 0 31px 0 13px;
    text-align: center;
    width: 0;
}
.skill-main #see-div-html.html-viewer ol {
    height: 501px;
}
.skill-main .html-viewer ol li {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 6.5px 0;
}
.skill-main .html-viewer p {
    color: #414141;
    font-family: courier;
    font-size: 15px;
    line-height: 45px;
    margin-bottom: 0;
}
.skill-main .html-title-bar {
    border-bottom:1px solid #979797;
    font:10px/40px Arial, sans-serif;
    text-align:center;
    color:#5f5e5e;
    background:#dcddde;
    background-image: -o-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.05, rgb(214,213,214)),
        color-stop(1, rgb(226,227,228))
    );
    background-image: linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
}

.skill-info-text .modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -100%;
}
 .skill-info-text .modal.fade.in {
    top: 10%;
 }
 .skill-info-text .modal-body iframe {
    display: block;

 }
 .skill-info-text h2,
 .challenge-comments h2 {
    color: #6B6B6B;
    font-weight: bold;
    font-size: 20px;
 }

 #html-review h4,
 #js-review h4 {
    text-transform: none;
 }

.skill-info-text .book-notes {
    color: #333333;
    float: right;
    font-family: 'homemade apple';
    font-size: 24px;
    line-height: 44px;
}
.skill-info-text h5 {
    clear:both;
}
.skill-info-text h5:first-child {
    margin-top: 10px;
}
.skill-info-text p#book-of-ruby {
    padding-right: 0;
}
.skill-info-text p#eloquent-ruby {
    margin-right: -75px;
}
.skill-info-text p#beginning-ruby {
    margin-left: -75px;
}
.skill-info-text p#oreilly {
    margin-right: -25px;
    margin-left: -20px;
}

.single-challenges_users #edit-challenge-toggle {
    float: right;
    margin: 20px 0 0 10px;
}
.single-challenges_users #edit-challenge-toggle,
.single-challenges_users #edit-challenge-done-toggle {
    background-color: #e5e5e5;
    text-transform: uppercase;
    color: #737272;
    font-size: 12px;
    font-family: 'montserrat';
}
.single-challenges_users #edit-challenge-done-toggle a {
    color: #737272;
    text-decoration: none;
}
.single-challenges_users #edit-challenge-toggle:focus,
.single-challenges_users #edit-challenge-done-toggle:focus {
    outline:0;
}
.single-challenges_users .activity-nav .main {
    position: static;
}

.single-challenges_users #challenge-edit {
    display: none;
}
.single-challenges_users #challenge-share .gform_footer {
    display: none;
}

/* NEED to change in DB */
.postid-20796 aside + p {
    margin-left: 30px !important;
    width: 300px !important;
}

/* New Skill Lessons */
.iframe-wrap {
    border: 1px solid #d7d5d5;
    background: #faf8f8;
}
.btn.show-transcript {
    color: #878686;
    background: #c9c8c8 url(../img/icons/view-icon.png) no-repeat 17px center;
    border-radius: 0;
    font: 13px/13px 'Montserrat', sans-serif;
    padding: 10px 17px 10px 37px;
    margin: 10px;
    text-transform: uppercase;
    float: right;
    outline: 0;
}
.btn.show-transcript:active {
    outline: 0;
}
.transcript-wrap .title {
    color: #878686;
    font-size: 1em;
    font-weight: 400;
    border-bottom: 2px solid #eae9e9;
    padding: 35px 0 25px;
    margin: 0 7px 15px;
}
.transcript-wrap {
    display: none;
    position: relative;
    overflow: hidden;
}
.transcript-wrap .content {
    padding: 10px 75px 40px 180px;
}
.transcript-wrap .content,
.transcript-wrap .content p {
    color: #5b5b5b;
    line-height: 1.375em;
}
.transcript-wrap .content iframe {
    display: none;
}

.skill-main .download-link {
    background: none repeat scroll 0 0 #3b3b3b;
    color: #fff;
    display: block;
    font: 400 16px/53px "Montserrat",sans-serif;
    height: 53px;
    margin-top: 20px;
    max-width: 280px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.single-sc_skill_resources .skill-main {
    border-bottom: 0;
}
.single-sc_skill_resources .site-footer {
    border-top: 1px solid #f2f2f2;
}
.single-sc_skill_resources .skill-content-main {
    position: relative;
    min-height: 100%;
}
.download-img-wrap {
    background: none repeat scroll 0 0 #f5f5f5;
    text-align: center;
}
.skill-description-text ul li {
	list-style-type:disc;
}

.download-img-wrap a {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 100%;
}
.download-img-wrap img {
    box-shadow: 0 0 4px #ddd;
    margin: 60px auto 0;
    max-height: 400px;
}

.single-sc_skill_resources #homepage-page-container {
    margin: 0 0 -75px;
    padding: 50px 0 75px;
}

.single-sc_skill_resources .main-container:after {
    display: none;
}
.single-sc_skill_resources #container {
    padding-bottom: 0;
}
.single-sc_skill_resources  .social-like-buttons .twitter-follow,
.sub-footer p.footer-copyright {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}
.single-sc_skill_resources .site-footer {
    background: #fff;
    height: 75px;
    padding-top: 30px;
}
.single-sc_skill_resources .skill-sidebar {
    background: white;
    min-height: 590px;
}
.single-sc_skill_resources.download-page .skill-sidebar {
    min-height: 100%;
}
.skill-main.resource-download {
	background:#f5f5f5;
}
.old-content img {
    display: none;
}
.old-content .button {
    background: #3b3b3b;
    color: #fff;
}

/* FLEX FOR LESSONS */
.single-sc_skill_resources #homepage-page-container,
.single-sc_skill_resources .individual-skill-resource, 
.single-sc_skill_resources #container,
.single-sc_skill_resources .skill-main {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}
.single-sc_skill_resources .skill-sidebar {
    -webkit-flex: 1 30%;
    -moz-flex: 1 30%;
    -ms-flex: 1 30%;
    flex: 1 30%;
    min-height: 0;
}
.single-sc_skill_resources .skill-content-main {
    -webkit-flex: 1 70%;
    -moz-flex: 1 70%;
    -ms-flex: 1 70%;
    flex: 1 70%;
}
/* END flex for lessons */

/* Included from tutorial.css */
    /*========================================================================================================================
    Tutorial Styles
    =========================================================================================================================*/


    /* Step Content */
    .step-content p {
        margin-bottom:20px;
    }


    /* Tutorial Sidebar */
    aside.tutorial-sidebar {
        margin-left: 1%;
        max-width: 460px;
        padding-top: 30px;
        width: 33%;
    }

    aside.tutorial-sidebar h4, 
    aside.tutorial-sidebar p,
    .tutorial-right-content p {
        padding-left:30px;
    }

    aside.tutorial-sidebar h4 {
        font-family: 'montserrat';
    }

    aside.tutorial-sidebar ol,
    ol.sample-code {
        background: none repeat scroll 0 0 #F6F6F6;
        border: 1px solid #EBE7E7;
        border-radius: 3px 3px 3px 3px;
        list-style-type: decimal;
        margin-left: 30px;
    }

    aside.tutorial-sidebar ul,
    aside.tutorial-sidebar ol,
    ol.sample-code {
        margin-left: 30px;
    }

    aside.tutorial-sidebar ol, 
    aside.tutorial-sidebar p, 
    ol.sample-code {
        margin-bottom:20px;
    }

    aside.tutorial-sidebar ol.sample-code li,
    ol.sample-code li {
       list-style: decimal inside none;
        padding:4px 10px;
        border-bottom: 1px solid #EBE7E7;
    }

    aside.tutorial-sidebar ul li {
        list-style: disc outside none;
        padding:4px 0px;
          margin-left: 20px;
    }

    aside ol.sample-code li:last-child,
    ol.sample-code li:last-child {
        border-bottom:none;
    }

    /* Tutorial Content */


    .tutorial-content {
        width:1142px;
        min-height:700px;
        overflow:hidden;
        position:relative;
        clear:both;
    }

    .tutorial-up-next {
        margin: 50px auto;
        padding: 20px 30px;
        width: 700px;
        border-radius: 3px 3px 3px 3px;
        border-style: solid;
        border-width: 1px;
        border-color:#b1fbeb;
        text-align: center;
        background:rgba(230, 252, 247, 0.9);
        display:none;
    }

    .tutorial-up-next p span {
        font-weight:bold;
    }

    /* For Example */
    .tutorial-for-example h5, .tutorial-goal h5 {
        background: url("../img/backgrounds/blue-arrow.png") no-repeat scroll 0 0 transparent;
        color: white;
        font-family: 'wisdom';
        font-size: 22px;
        height: 30px;
        margin-right: 40px;
        padding-left: 24px;
        text-transform: capitalize;
        width: 134px;
        padding-top: 3px;
    }

    .tutorial-for-example h5 {
        background: url("../img/backgrounds/green-arrow-back.png") no-repeat scroll 0 0 transparent;
        margin-left: 160px;
            padding-left: 20px;
            padding-right: 10px;
         margin-bottom: 10px;
    }
        
    .tutorial-for-example img {
        margin: 10px 0 10px 60px;
    }

    .tutorial-for-example {
        overflow: auto;
        padding: 40px 0 90px;
    }

    .tutorial-right-content .tutorial-for-example {
        padding: 20px 0 90px;
    }

    .tutorial-right-content  .tutorial-for-example h5 {
        margin-left:0;
    }

    .tutorial-right-content {
        float: left;
        margin-top: 50px;
        width: 700px;
    }

    .tutorial-right-content p.tutorial-website-text {
        font-family:georgia;
        font-size:18px;
    }

    .tutorial-right-content .sample-code {
         width: 500px;
    }

    .tutorial-right-content .example-code-font {
        font-family: droid sans, courier;
            margin-bottom: 10px;
    }

    .step-content .tutorial-right-content h4 {
        margin-left:30px;
        margin-bottom:10px;
    }


    /* Your Goal */
    .tutorial-goal {
        margin-top:40px;
    }

    .tutorial-goal p {
        padding-left:30px;
    }

    /* Tutorial Left Sidebar */

    .tutorial-left-sidebar {
        width: 350px;
        margin-right:80px;
        margin-top: 50px;
    }

    .tutorial-left-sidebar p {
        font-size:24px;
        line-height:36px;
    }

    .tutorial-left-sidebar h4,
    .tutorial-right-content h4 {
        text-transform:uppercase;
    }

    .tutorial-left-sidebar p span.html-tag {
        font-family: 'montserrat';
        color:#09cda1;
    }


    /* Definition */
    .tutorial-defintion {
        padding-left: 300px;
        padding-top: 50px;
        position:relative;
    }

    .tutorial-defintion p {
        width:561px;
    }

    .tutorial-defintion h4 {
        font-size:20px;
        font-family:georgia;
    }

    .tutorial-defintion h4 span {
        font-family:arial;
        font-style:italic;
        color:#999999;
        font-size:16px;
    }

    .tutorial-defintion .editor-prep-hint {
        position:absolute;
    }


    /* PowerTip Styles */
    #powerTip {
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 6px 6px 6px 6px;
        color: #FFFFFF;
        cursor: default;
        display: none;
        padding: 10px;
        position: absolute;
        text-align: center;
        white-space: normal !important;
        max-width: 300px;
        word-wrap: normal !important;
        z-index: 2;
    }


    /* Tutorial Two Columns */
    .tutorial-column {
        float:left;
        width:480px;
           margin: 0 40px;
    }

    .tutorial-column-a {
        margin-right:60px;
    }

    .tutorial-column > p {
        text-align:center;
        padding:30px 40px;
    }

    .tutorial-column-a img {
        padding: 0 0 0 47px;
    }

    .tutorial-column .html-editor-fake {
        padding: 2px 50px 5px;
    }

    #tutorial-steps li div.step-content .tutorial-column .html-viewer {
        float: left;
        font-family: 'Droid sans',sans serif;
        margin-top: 0px;
        width: 480px;
    }


    /* All About Page Source */
    .tutorial-view-source {
        background: url("../img/tutorials/html1/right-click.png") no-repeat scroll 790px 30px transparent;
        padding-bottom: 60px;
        padding-right: 460px;
        padding-top: 50px;
    }

    .tutorial-source-topmenu {
        float:left;
    }

    .tutorial-source-sidebar {
        float:left;
        margin-left: 50px;
        margin-top:30px;
    }

    .tutorial-source-topmenu h4 {
        font-family: 'montserrat';
        font-size: 16px;
        margin-bottom: 6px;
    }

    #tutorial-steps .tutorial-view-source-footer aside.tutorial-source-sidebar ul li h4 {
        font-family: 'montserrat';
        font-size: 18px;
        margin-bottom: 0;
    }

    .tutorial-view-source-footer aside.tutorial-source-sidebar ul li {
        padding-left: 60px;
    }

    .tutorial-view-source-footer aside.tutorial-source-sidebar ul li.chrome-source {
        background:url('img/tutorials/html1/icon_chrome.png') no-repeat 0 2px;  
    }

    .tutorial-view-source-footer aside.tutorial-source-sidebar ul li.firefox-source {
        background:url('img/tutorials/html1/icon_firefox.png') no-repeat 0 2px;
    }

    .tutorial-view-source-footer aside.tutorial-source-sidebar ul li.ie-source {
        background:url('img/tutorials/html1/icon_ie.png') no-repeat 0 2px;  
    } 

    .tutorial-view-source-footer aside.tutorial-source-sidebar ul li.safari-source {
        background:url('img/tutorials/html1/icon_safari.png') no-repeat 0 2px;  
            
    }

    .step-content .tutorial-source-sidebar ul li p {
        margin-bottom: 0;
    }

    .tutorial-view-source p {
        margin-bottom:20px;
    }


    /* Peek Under the Hood */
    #peek-under ol li {
        font-size: 20px;
        line-height: 36px;
        list-style-type: decimal;
        margin-bottom: 10px;
    }

    #peek-under {
        position:relative;
    }

    #tutorial-steps li div.step-content div#peek-under.step-main-content {
        float: none;
        padding: 60px 260px;
        width: auto;
    }

    div#peek-under form.form-password input[type="text"] {
        background: none repeat scroll 0 0 white;
        border: 1px solid #DEDDD4;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 0 0 #DBDBDB inset;
        color: #999999;
        float: left;
        font-size: 20px;
        height: 40px;
        margin-left: 0;
        margin-right: 5px;
        margin-top: 0;
        padding: 6px 18px 3px 13px;
        width: 370px;
    }

    #tutorial-steps li div.step-content p.user-message.success {
        background: url("../img/icons/icon-thumbsup.png") no-repeat scroll 16px 15px #E7F1FD;
        border: 1px solid #BFD9FC;
        border-radius: 5px 5px 5px 5px;
        clear: left;
        color: #414141;
        display: none;
        font-size: 16px;
        margin-left: 0;
        margin-top: 20px;
        padding: 22px 10px 22px 70px;
    }

    .peek-under-hint {
        background: url("../img/hint-arrow.png") no-repeat scroll 110px 0 transparent;
            font-size: 14px;
            left: 30px;
            line-height: 24px;
            padding-top: 70px;
            position: absolute;
            text-align: left;
            top: 180px;
            width: 210px;
    }


    /* Prep for HTML Editor */
    .editor-prep-main {
        position:relative;
        float:left;
        width:800px;
    }

    #tutorial-steps li .editor-prep-main h3 {
        font-size: 16px;
        margin-bottom: 15px;
        margin-top: 20px;
        text-align: center;
    }

    .step-content aside.editor-prep-sidebar, aside.small-tutorial-sidebar {
        float: left;
        margin-left: 50px;
        padding-top: 58px;
        width: 290px;
    }

    .step-content aside.editor-prep-sidebar ul li,
    .step-content  aside.small-tutorial-sidebar ul li {
        list-style-type: circle;
        margin-left: 18px;
    }

    .step-content  aside.small-tutorial-sidebar ul {
       margin-left: 30px;   
    }

    #tutorial-steps .step-content aside.editor-prep-sidebar h4,
    #tutorial-steps .step-content aside.small-tutorial-sidebar h4 {
        margin-bottom:5px;
    }

    /* Hint */
    .editor-prep-hint {
        font-size: 16px;
        line-height: 24px;
        position: absolute;
        top: 790px;
        width: 200px;
    }

    #editor-definition-right-hint {
        font-size: 16px;
        left: 32px;
        line-height: 24px;
        top: 840px;
        width: 206px;
    }

    #editor-definition-left-hint {
        right: 5px;
        top: 870px;
        width: 200px;
    }

    /* Prep for Editor */
    .prep-editor-cheatsheet-main {
        float:left;
        margin-top:40px;
    }

    .step-content aside.small-tutorial-sidebar {
        float: left;
        margin-left: 30px;
        padding-top: 68px;
        width: 360px;
    }

    aside.small-tutorial-sidebar ol,
    aside.small-tutorial-sidebar h4 {
        padding-left:30px;
    }


    /* Cheatsheet */
    .step-download-html-cheatsheet {
        background: url("../img/tutorials/html1/html-tag-cheatsheet.png") no-repeat scroll 440px -50px transparent;
        margin-top: -30px;
        min-height: 600px;
        padding: 70px 0;
    }

    #tutorial-steps li div.step-content .step-download-html-cheatsheet p {
        width:552px;
        line-height:24px;
        margin-bottom:20px;
    }

    .step-download-html-cheatsheet ol li,
    .step-download-css-cheatsheet ol li {
        list-style-type:decimal;
        margin-left: 25px;
    }

    .step-download-html-cheatsheet ol {
        margin-left: 20px;
    }

    .step-download-css-cheatsheet {
        background: url("../img/tutorials/css/css-cheatsheet.png") no-repeat scroll 440px -80px transparent;
        padding-bottom: 160px;
        padding-right: 630px;
        padding-top: 40px;
    }

    /* Download your tag cheatsheet */
    #tutorial-steps li div.step-content .button.step-download-button a {
        background: url("../img/icons/icon-download.png") no-repeat scroll 384px 25px transparent;
        border: medium none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: none;
        color: white;
        display: block;
        font-size: 18px;
        padding: 20px 40px 20px 30px;
        text-shadow: none;
       font-family: 'montserrat';
    }

    #tutorial-steps li div.step-content .step-download-button {
    margin:30px 0px;    
    }

    .#tutorial-steps li div.step-content .step-download-button {
        width: 436px;
        padding:0;
    }

    .single-sc_tutorials .modal.fade {
        -webkit-transition: opacity .3s linear, top .3s ease-out;
        -moz-transition: opacity .3s linear, top .3s ease-out;
        -o-transition: opacity .3s linear, top .3s ease-out;
        transition: opacity .3s linear, top .3s ease-out;
        top: -100%;
    }

    .single-sc_tutorials .modal.fade.in {
        top: 16%;
    }

    /* Tutorial Review Step */
    .tutorial-accomplishments-main {
        position:relative;
    }

    .tutorial-good-job {
        position: absolute;
        right: 130px;
        top: -40px;
    }

    .tutorial-notepaper {
        background: url("../img/tutorials/html1/paper.jpg") repeat scroll 0 0 transparent;
        height: 389px;
        margin: 40px 180px;
        width: 787px;
    }

    .tutorial-notepaper ul li {
        font-size:16px;
        line-height:30px;
    }

    .tutorial-learnings, .tutorial-accomplishment {
        float:left;
        width:320px;
        padding: 43px 0;
    }

    .tutorial-learnings {
        margin-right:40px;
        margin-left:90px;
    }

    .tutorial-notepaper ul li {
        background: url("../img/tutorials/html1/green-check.png") no-repeat scroll 0 7px transparent;
        margin-bottom: 2px;
        padding-left: 25px;
    }

    .tutorial-notepaper h4 {
        font-size:18px;
        font-family:'montserrat';
        margin-bottom:3px;
    }


    /* Prep for Project */
    #project-right-hint,
    #project-left-hint {
        position:absolute;
    }

    #project-prep-sidebar {
        width: 290px;
    }

    .get-to-know-project-main {
        position:relative;
        width:800px;
        float:left;
    }

    .get-to-know-project-main img {
     margin: 20px 30px 20px 60px;
    }

    #project-left-hint {
        top: 280px;
    }

    #project-right-hint {
        left: 634px;
        top: 210px;
        width: 140px;
    }

    aside.small-tutorial-sidebar#project-prep-sidebar  ol {
        margin-left: 0;
        padding-left: 30px;
    }

    #project-prep-sidebar ol li {
        list-style-type: circle;
        margin-left: 20px;
    }

    .project-prep-last-note {
        clear:left;
        padding-left:370px;
    }

    .project-prep-last-note img {
        float: left;
        margin-right: 60px;
    }

    .project-prep-last-note .project-prep-aside {
        float:left;
        width:460px;
        padding-top:20px;
    }

    .project-prep-last-note .project-prep-aside p {
        line-height:28px;
    }

    .project-prep-last-note .project-prep-aside h4 {
        font-family: "DIN-bold",helvetica,arial;
        font-size: 18px;
        font-weight: normal;
    }

    /* Final Step */
    .project-example img {
        float:left;
    }

    .project-example {
        background: url("../img/tutorials/html1/right-green-arrow.png") no-repeat scroll 346px 80px transparent;
        margin-bottom: 40px;
        overflow: auto;
    }

    .project-example img.example-project-area {
        margin-right:60px;
    }

    .project-inspiration-main {
        width:730px;
        float:left;
        padding-top:40px;
    }

    aside.tutorial-sidebar#project-example-aside {
        margin-left: 60px;
        padding-top: 30px;
        width: 350px;
    }

    #project-example-aside .tutorial-goal {
        margin-top: 10px;
    }

    #tutorial-steps li div.step-content .button.step-download-button#start-project-button {
        width:350px;
        padding:0;
    }

    #tutorial-steps li div.step-content #start-project-button.button.step-download-button a {
        font-size: 20px;
        padding: 20px 50px;
        background:none;
    }

    #tutorial-steps li div.step-content aside.tutorial-sidebar h4 {
        margin-bottom: 0;
    }

    aside.tutorial-sidebar#project-example-aside ul li {
        list-style: circle outside none;
        margin-left: 20px;
        padding: 4px 0;
    }



    /* Video Tutorial */
    #tutorial-steps li div.video {
        background: none repeat scroll 0 0 white;
            border: 1px solid #E1E1E1;
            border-radius: 3px 3px 3px 3px;
            box-shadow: 0 0 3px 0 #E1E1E1;
            margin: 20px 0;
            overflow: auto;
            width: 600px;
            float:left;
             padding: 10px 10px 0;
    }

    #tutorial-steps li div.project-video {
        background: none repeat scroll 0 0 white;
            border: 1px solid #E1E1E1;
            border-radius: 3px 3px 3px 3px;
            box-shadow: 0 0 3px 0 #E1E1E1;
            margin: 20px 0;
            overflow: auto;
            width: 500px;
            float:left;
             padding: 10px 10px 0;
    }

    .tutorial-canvas .video-tutorial {
        margin-bottom:40px;
        border:1px solid #e1e1e1;
        padding:10px 10px 8px 10px;
        box-shadow:0px 0px 3px #e8e8e8;
    }

    ul.past-lessons-nav {
        float:right;
        width:270px;
    }

    ul.past-lessons-nav li {
        background: none repeat scroll 0 0 #C4F5FF;
            border-radius: 5px 5px 5px 5px;
            font-size: 14px;
            margin-bottom: 10px;
            padding:10px;
    }

    ul.past-lessons-nav li .note-step {
        color:#919191;
        font-family:arial;
        text-transform:uppercase;
        font-size:10px;
    }

    ul.past-lessons-nav li a {
        padding:5px 0px 0px 0px;
        display:block;
        color:#414141;
    }


    /* Interactive Tutorial */
    .interactive-tutorial {
         width: 607px;
           padding: 5px 30px 30px 0px;
    }

    .interactive-tutorial ul > li {
        clear:left;
        margin-bottom:40px;
        overflow:auto;
    }

    .interactive-tutorial ol {
        line-height: 46px;
            list-style-type: decimal;
            margin-top: 0px;
          margin-bottom: 11px;
    }

    .interactive-tutorial form h2 {
        font-family:'Noticia Text';
        font-weight:normal;
        font-size:24px;
        margin-left:10px;
        margin-bottom:10px;
    }

    .interactive-tutorial form input[type="submit"] {
     background: none repeat scroll 0 0 #C4F5FF;
        border: medium none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: none;
        color: #15C8ED;
        float: left;
        font-family: arial;
        font-size: 14px;
        font-weight: bold;
        height: 39px;
        padding: 0 10px 8px;
        text-shadow: none;
        width: 40px;
    }

    .interactive-tutorial form input[type="text"] {
        background: white;
        border: 1px solid #d5d5d5;
        box-shadow:inset 1px 1px 0px #d5d5d5;
        color: #E43C3B;
        font-family:'Droid sans', sans serif;
        float: left;
        font-size: 16px;
        height: 28px;
        margin-left: 0;
        margin-right: 10px;
        margin-top: 0;
        padding: 4px 8px;
        width: 228px;
        margin-left:30px;
        border-radius:5px;
    }

    .tutorial-canvas p.response {
        clear: left;
        line-height: 24px;
        margin-left: 10px;
        padding-top: 19px;
    }


    /* Double Sided Tutorial */
    .double-side-tutorial div.side {
        background:#f1efef;
        border-radius:3px;
        border:1px solid #e1e1e1;
        width:330px;
        float:left;
    }

    .double-side-tutorial {
        height:410px;
    }

    #editor {
        width: 500px;
        height: 400px;
    }

    .double-side-tutorial div.side.side-one {
    margin-right:7px;
    }

    .double-side-tutorial div.side header {
        background: none repeat scroll 0 0 #F1EFEF;
        border-bottom: 1px solid #e1e1e1;
    box-shadow: 0 1px 0 white;
        min-width: 310px;
        padding: 10px;
        width: 310px;
    }

    .line-numbers {
        background: none repeat scroll 0 0 #5E5E5E;
        color: white;
        font-family: 'Droid sans', sans serif;
        list-style-type: none;
        padding: 3px 7px;
        text-align: right;
        width: 30px;
        margin: 0 20px 0 0;
        float:left;
    }

    .line-numbers li {
        padding: 3px 0px;
    }

    .result-content {
        padding:30px 20px;
        background:white;
    }

    .code-content p {
        font-family:'Droid sans', sans serif;
        font-size:14px;
        line-height:;
    }

    .sc_skill {
        font-family:'din';
    }
    .sc_skill .tutorial-title {
        color: #FF605F;
        float: none;
        font-family: 'Din-bold';
        font-size: 36px;
        font-weight: normal;
        margin-top: 0;
        padding: 0 0 10px;
    }

    .sc_skill .tutorial-title a {
        color: #FF605F; 
    }

    #wp-admin-bar {
        font-size: 11px;
        height: 25px;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        display:none !important;
    }

    /* Individual Steps */

    /* First Step */
    .what-to-expect-content {
     background: url("../img/backgrounds/right-green-arrow.png") no-repeat scroll 290px 300px transparent;
        float: left;
        padding: 90px 60px 100px 40px;
        width: 350px;
    }

    .what-to-expect {
        margin-bottom:40px;
    }

    #example-site-after-project {
        margin-top:30px;
    }

    .what-to-expect-bottom-instructions {
        text-align:center;
        margin-top:30px;
    }


    .html-viewer .html-highlight,
    .html-highlight {
        opacity: 1;
        padding: 5px 2px;
    }

    .html-viewer .html-highlight:hover,
    .html-highlight:hover,
    #anatomy-tag .html-highlight,
    .anatomy-tag .html-highlight {
        opacity:1;
        background:#cde2ff;
        cursor:pointer;
        -webkit-transition: all 500ms ease;
           -moz-transition: all 500ms ease;
             -o-transition: all 500ms ease;
                transition: all 500ms ease;
    }

    .html-viewer p span.text-highlight:hover,
    p span.text-highlight:hover,
    p#anatomy-tag span.text-highlight,
    p.anatomy-tag span.text-highlight {
        background:#fdbfbe;
        cursor:pointer;
        -webkit-transition: all 500ms ease;
           -moz-transition: all 500ms ease;
             -o-transition: all 500ms ease;
                transition: all 500ms ease;
    }

    #tutorial-steps li div.step-content .html-viewer p {
        font-family:'Droid sans', sans serif;
        margin-bottom: 0;
        color:#414141;
         font-size: 15px;
        line-height: 33px;
    }

    #tutorial-steps li div.step-content .html-title-bar {
        border:1px solid #979797;
        font-size:10px;
        font-family:arial;
        text-align:center;
        color:#5f5e5e;
        border-radius:3px 3px 0px 0px;
        background:#dcddde;
        background-image: linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
        background-image: -o-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(214,213,214) 5%, rgb(226,227,228) 100%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.05, rgb(214,213,214)),
            color-stop(1, rgb(226,227,228))
        );
    }

    /* Tag Reveal Step */
    .step-see-tags-browser {
        clear: both;
        margin-top: 16px;
        width: 482px;
    }

    .step-see-tags-header {
        background: url("../img/tutorials/html1/tag-reveal-browser-bar.png") no-repeat scroll 0 0 transparent;
        border-right: 1px solid #bcbcbc;
        font-family: arial;
        font-size: 13px;
        height: 37px;
        padding: 6px 0 7px 122px;
    }

    .step-see-tag-site {
     background: url("../img/backgrounds/anchor-decoration.png") no-repeat scroll 50px 16px #E2E4D3;
        border-bottom: 1px solid #BCBCBC;
        border-left: 1px solid #BCBCBC;
        border-radius: 0 0 5px 5px;
        border-right: 1px solid #BCBCBC;
        font-family: georgia;
        padding: 81px 0 0;
        position: relative;
    }

    .html-highlight {
        font-family: courier;
    }


    .step-see-tag-site .html-highlight {
        font-size:14px;
        color:#4593fe;
        opacity:0;
    }


    .step-see-tag-site h1 {
        color: #414141;
        font-family: georgia;
        font-size: 28px;
        font-style: italic;
        font-weight: normal;
        margin-bottom: 16px;
        position:relative;
        padding: 0 50px;
    }

    .step-see-tag-site h2 {
        color: #414141;
        font-family: georgia;
        font-size: 16px;
        font-weight: normal;
        line-height: 26px;
        margin-bottom: 16px;
        padding: 0 50px;
        position: relative;
        text-transform: none;
    }

        #tutorial-steps .step-see-tag-site p {
            color: #8f9a35;
            font-family: georgia;
            font-size: 14px;
            font-weight: normal;
            position:relative;
            padding: 0 50px;
        }

    .step-see-tag-site .html-highlight {
        position:absolute;
        font-style:normal;
        color:white;
        left: 10px;
        line-height: normal;
        top: 0;
    }

    .step-see-tag-site h1 .html-highlight.closing-highlight {
        right:5px;
        left:auto;
    }

    .step-see-tag-site h2 .html-highlight {
        left: 13px;
    }

    .step-see-tag-site h2 .html-highlight.closing-highlight {
        left: auto;
        right: 90px;
        top: 79px;
    }

    .step-see-tag-site p .html-highlight {
      left: 21px;
    }

    .step-see-tag-site p .html-highlight.closing-highlight {
        left: 90px;
        right: auto;
        top: 25px;
    }

    .step-see-tag-site h1:hover .html-highlight,
    .step-see-tag-site h2:hover .html-highlight,
    .step-see-tag-site p:hover .html-highlight {
        opacity:1;
    }

    .step-see-tag-site h1:hover,
    .step-see-tag-site h2:hover,
    .step-see-tag-site p:hover {
        background:#b1b68c;
        cursor:pointer;
    }

    #tutorial-steps li div.step-content p.user-message {
        clear: left;
        color: #414141;
        display: none;
        font-family: "droid sans";
        font-size: 16px;
        margin-left: 0px;
        padding-top: 20px;
    }

    #tutorial-steps li div.step-content p.user-message span {
        font-family: 'montserrat';
    }

    #tutorial-steps li div.step-content aside.step-how-to .step-how-to-img-group {
        float: left;
        margin-right: -30px;
      margin-top: 30px;
        text-align:center;
        font-size:14px;
        color:#a5a5a5;
    }


    #tutorial-steps li div.step-content aside .step-how-to-info {
        background:#fbfec9;
        box-shadow: -2px 5px 4px 1px #C5C5C5;
        width:246px;
           float: left;
         padding: 30px 40px 20px;
    }

    #tutorial-steps li div.step-content aside h4,
    .tutorial-right-content h4 {
        font-family: 'montserrat';
        font-size:18px;
        margin-bottom:20px;
    }

    #tutorial-steps li div.step-content aside .step-how-to-info p {
        font-size:14px;
        line-height:20px;
        margin-bottom:20px;
    }

    #tutorial-steps li div.step-content div.step-main-content {
        width:420px;
        margin-right:20px;
        float:left;
    }

    form.form-password input[type="text"] {
        background: none repeat scroll 0 0 white;
        border: 1px solid #DEDDD4;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 0 0 #DBDBDB inset;
        float: left;
        font-family: "droid-sans";
        font-size: 20px;
        height: 32px;
        margin-left: 0;
        margin-right: 5px;
        margin-top: 0;
        padding: 7px 18px 3px 13px;
        width: 224px;
    }

    form.form-password input[type="text"] {
        background: none repeat scroll 0 0 white;
        border: 1px solid #DEDDD4;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 0 0 #DBDBDB inset;
        color: #999999;
        float: left;
        font-family: "din";
        font-size: 20px;
        height: 32px;
        margin-left: 0;
        margin-right: 5px;
        margin-top: 0;
        padding: 7px 18px 3px 13px;
        width: 224px;
    }

    form.form-password {
        margin-top:20px;
    }


    /* Global Editor Styles */

    .step-content .CodeMirror-wrap .CodeMirror-scroll {
        overflow-x: visible;
    }

    .step-content .CodeMirror {
        background: url("../img/backgrounds/code-lines.png") repeat scroll 0 0 #F8F8F8;
        border: 1px solid #EFECEC !important;
        border-radius: 3px 3px 3px 3px;
        color: #535353;
        font-family: 'droid sans';
        line-height: 33px;
        overflow: hidden;
        padding-top: 0;
        position: relative;
        width: 29%;
    }

    .step-content .CodeMirror-gutter-text {
        background: none repeat scroll 0 0 transparent;
        color: #AAAAAA;
        cursor: default;
        line-height: 33px;
        padding: 0 16px;
        text-align: center;
        white-space: pre !important;
    }

    .step-content  .CodeMirror-gutter {
        border-right: medium none;
        height: 100%;
        left: 0;
        min-width: 43px;
        position: absolute;
        top: 0;
        z-index: 10;
       background: none repeat scroll 0 0 transparent;
    }

    .step-content .CodeMirror-lines {
        cursor: text;
        padding: 0 0 0 26px;
        white-space: pre;
    }

    .CodeMirror-scroll {
    min-height:300;
    }

    iframe.code-preview {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: url("../img/tutorials/html1/iframe-bar.png") no-repeat scroll -2px 0 white;
        border-color: -moz-use-text-color #BCBCBC #BCBCBC;
        border-image: none;
        border-radius: 9px;
        border-style: none solid solid;
        border-width: medium 1px 1px;
        float: left;
        margin-left: 10px;
        min-height: 300px;
        padding: 50px 16px 20px;
        width: 550px;
    }

    iframe.code-preview, #html-review-browser,
    .html-preview-browser {
      -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: url("../img/backgrounds/browser-topbar.png") no-repeat scroll -2px 0 white;
        border-color: -moz-use-text-color #BCBCBC #BCBCBC;
        border-image: none;
        border-radius: 3px 3px 3px 3px;
        border-style: none solid solid;
        border-width: medium 1px 1px;
        float: left;
        margin-left: 10px;
        min-height: 300px;
        padding: 50px 0 20px;
        width: 667px;
    }

    .editor {
        margin-top:30px;
        opacity:0;
    }

    .show-editor {
        opacity:1;
    }

    .example-site .example-site-content,
    .example-site aside {
        float:left;
    }

    .example-site .example-site-content {
       margin-right: 30px;
        width: 336px;
    }

    #tutorial-steps li div.step-content .modal .example-site-content p {
        color: #999999;
        font-size: 14px;
        padding: 0;
        text-align: left;
    }

    #tutorial-steps li div.step-content .example-site aside {
        margin-top: 25px;
            width: 160px;
    }

    #tutorial-steps li div.step-content .example-site aside ul li {
        color:#4593fe;
    }

    #tutorial-steps li div.step-content #step12-see-example {
        float:right;
        margin-right:9px;
    }

    #tutorial-steps li div.step-content #step12-see-example:hover {
        cursor:pointer;
    }

    .award {
     background: url("../img/icons/icon-thumbsup.png") no-repeat scroll 16px 15px #E7F1FD;
        border: 1px solid #BFD9FC;
        border-radius: 5px 5px 5px 5px;
        clear: left;
        color: #414141;
        display: none;
        font-size: 16px;
        left: 60px;
        margin-left: 0;
        margin-top: 20px;
        padding: 20px 30px 20px 70px;
        position: absolute;
        top: 60px;
        z-index: 99;
     box-shadow: 0 0 3px 2px #EDEDED;
        width:300px;
    }

    #tutorial-steps li div.step-content p.award-message {
        clear: left;
        color: #414141;
        font-family: "din";
        font-size: 16px;
        margin-left: 0px;
        padding-top: 0px;
        padding-right: 20px;
    }

    #tutorial-steps li div.step-content p.award-message span {
        font-family: 'montserrat';
    }


    /* End Slate */
    #tutorial-steps li div.step-content aside.end-slate {
        float: left;
        margin-left: 20px;
        margin-top: 15px;
        width: 330px;
    }

    #tutorial-steps li div.step-content aside.end-slate .button {
        box-shadow: 0 0 4px 2px #1E7BFC inset;
        color: white;
        float: left;
        font-family: 'montserrat';
        font-size: 16px;
        margin: 22px 0;
        padding: 7px 124px 7px 24px;
    }

    #tutorial-steps li div.step-content aside.end-slate .button span {
        font-size:12px;
        text-transform:uppercase;
        width:320px;
        clear:both;
    }

    /*========================================================================================================================
    HTML2 Tutorial Styles
    =========================================================================================================================*/

    /* Step 2 */

    #html-review-browser, 
    #html-review-browser h1, 
    #html-review-browser h2, 
    #tutorial-steps li #html-review-browser h3, 
    #html-review-browser h4,
    #html-review-browser h5,
    #html-review-browser h6,
    #html-review-browser p {
        text-align:left;
        font-family:georgia;
        text-transform:none;
    }

    #html-review-browser h1, 
    #html-review-browser h2, 
    #tutorial-steps li #html-review-browser h3, 
    #html-review-browser h4,
    #html-review-browser h5,
    #html-review-browser h6 {
        font-weight:bold;
        margin-bottom:16px;
        color:black;
    }

    #html-review-browser h1 {
        font-size:36px;
    }

    #html-review-browser h2 {
        font-size:32px;
    }

    #tutorial-steps li #html-review-browser h3 {
        font-size:28px;
    }

    #html-review-browser h4 {
        font-size:24px;
    }

    #html-review-browser h5 {
        font-size:20px;
    }

    #html-review-browser h6 {
        font-size:16px;
    }

    #html-review-browser ol, 
    #html-review-browser ol li {
        list-style-type: decimal;
        margin-left: 20px;
    }

    #html-review-browser ul,
    #html-review-browser ul li {
        list-style-type:disc;
        margin-left: 20px;
    }

    #html-review-browser {
        padding: 60px 20px;
        width: 629px;
        margin-right:50px;
    }

    #tutorial-steps li #html-review-browser p strong,
    #tutorial-steps li #html-review-browser p em {
        font-family:georgia;
    }

    #tutorial-steps li #html-review-browser p strong {
        font-weight:bold;
    }

    aside.review-aside h5 {
        color:#4593fe;
        font-family:'droid sans';
    }

    /* Step 4 */

    #tutorial-steps .step-content p#anatomy-tag, 
    #tutorial-steps .step-content p.anatomy-tag {
        color: #2269CA;
        font-family: 'droid sans';
        font-size: 28px;
        line-height: 65px;
        margin-bottom: 20px;
        margin-top: 60px;
        text-align: center;
    }

    #tutorial-steps .step-content p#anatomy-tag span,
    #tutorial-steps .step-content p.anatomy-tag span {
        padding:8px;
        font-size:26px;
    }

    /* Step 6 */

    #first-photo {
      background: url("../img/backgrounds/first-photo-frame.png") no-repeat scroll 0 0 transparent;
    /*    height: 191px;*/
        margin-left: 64px;
        margin-right: 61px;
        margin-top: 69px;
        overflow: hidden;
        padding: 36px;
    /*    width: 203px;*/
    }

    #first-photo a {
        height: 191px;
        width: 203px;
    }

    #first-photo a img {
        max-width: 290px;
        height:auto;
    }

    #second-photo {
      background: url("../img/backgrounds/second-photo-frame.png") no-repeat scroll 0 0 transparent;
    /*    height: 300px;*/
        padding: 43px 36px;
    /*    width: 239px;*/
     margin-right: 64px;
    }

    #second-photo a {
        height:auto;
        width:auto;
    }

    #second-photo a img {
        border-radius: 480px 480px 480px 480px;
        height: auto;
        margin-left: 0;
        max-width: 241px;
    }

    #third-photo {
        background: url("../img/backgrounds/third-photo-frame.png") no-repeat scroll 0 0 transparent;
    /*    height: 160px;*/
        padding: 46px 42px;
    /*    width: 269px;*/
    margin-top: 79px;
    }

    #third-photo a {
        height: 161px;
    }

    #third-photo img {
        width: 270px;
    }

    .html2-photo-gallery {
        float:left;
        overflow:hidden;
    }

    .html2-photo-gallery a {
        display:block;
        overflow:hidden;
    }

    /* Step 7 */

    .empty-frame {
     background: url("../img/backgrounds/frame.png") no-repeat scroll 0 0 #88714A;
        float: left;
    /*    height: 287px;*/
        margin: 0 50px 0 38px;
        padding: 55px;
    /*    width: 304px;*/
    }

    .empty-frame-form {
        float:left;
        width:630px;
           margin-top: 100px;
    }

    #tutorial-steps .step-content p.empty-frame-input {
        color: #999999;
        font-size: 26px;
        margin-bottom:20px;
    }

    .empty-frame-form input[type="text"] {
        border-color: -moz-use-text-color -moz-use-text-color #CCCCCC;
        border-radius: 0 0 0 0;
        border-style: none none solid;
        border-width: medium medium 1px;
        box-shadow: none;
        color: #006cff;
        font-size: 22px;
        padding: 0 10px;
        width: 420px;
        font-family:'droid sans';
    }

    .empty-frame-photo {
        width:304px;
        height:287px;
        overflow:hidden;    
    }

    #empty-frame-tail {
        background: url("../img/backgrounds/comment-tail.png") no-repeat scroll 0 0 transparent;
        height: 30px;
        margin-left: 30px;
        margin-top: -6px;
        width: 33px;
    }

    .empty-frame-photo img {
        width:100%;
        height:auto;
    }

    a.button#fill-frame {
        color: white;
        display: block;
        font-size: 16px;
        margin: 20px 0 30px;
        padding: 13px 25px;
    }

    .empty-frame-step-content {
        position:relative;
        margin-top:30px;
    }

    #tutorial-steps .step-content #empty-frame-comment p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 0;
        text-align: center;
    }

    #empty-frame-comment {
        left: 260px;
        margin-top: -10px;
        position: absolute;
        display:none;
    }

    #empty-frame-content {
     background: none repeat scroll 0 0 white;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 0 3px 0 #CCCCCC;
        min-width: 320px;
        padding: 15px 20px;
    }

    #tutorial-steps .step-content p.empty-frame-form-response {
        font-family: 'montserrat';
        display:none;
    }

    /* Step 9 */

    #step9-editor {
    }

    #step9-editor .CodeMirror {
        min-height: 50px;
        width: 540px;
        margin: 20px 300px;
    }

    #step9-preview {
        margin:20px 230px;
        float:none;
    }

    /* Step 11 */

    #see-divs {
        height: 670px;
        margin-left: 12%;
        position: relative;
    }

    /* See Divs Header */

    #see-div-header {
     width: 679px;
    }

    #see-div-header p,
    #see-div-header #see-div-on,
    #see-div-header #see-div-off {
        float:left;
    }

    #see-div-header #see-div-on {
        float:left;
    }

    #see-div-header #see-div-off {
        
    }

    #show-div-html {
        float:right;
    }

    #hide-div-html {
        float:right;
        display:none;
    }

    #see-div-html > ol {
        height: 500px;
    }

    #see-div-html.front {
        z-index: 99;
    }

    #see-div-preview {
        font-family:helvetica, arial;
        position:absolute;
        z-index:9;
        top:50px;
        left:0px;
    }

    #tutorial-steps li div.step-content #see-div-html.html-viewer {
        left: 30px;
        position: absolute;
        top: 30px;
        width: 670px;
    }

    #tutorial-steps li #see-div-preview h3 {
        color:#666666;
        font-family:arial;
        margin-top:10px;
        font-size:16px;
        text-align:left;
    }

    #see-div-preview .main {
        max-width: 580px;
        min-width: 580px;
        padding: 10px;
        width: 580px;
    }

    #see-div-preview {
    color:#5f5e5e;  
    }

    #see-div-preview .div-preview {
        border: 2px dashed white;
    }

    #see-div-preview .div-preview.show-divs,
    #see-div-preview .div-preview:hover {
        border: 2px dashed #4593fe;
        cursor:pointer;
    }

    #see-div-on, #see-div-off {
        cursor: pointer;
    }

    #see-div-preview h1 {
        font-family: helvetica,arial,sans serif;
            font-size: 56px;
            font-weight: bold;
            line-height: 60px;
            margin: 40px 0 10px;
    }

    #see-div-preview h2 {
        font-size:30px;
        line-height:30px;
        font-weight:normal;
        font-family:helvetica, arial, sans serif;
        text-transform:none;
    }

    #see-div-preview p {
        font-family:helvetica, arial, sans serif;
        margin-top:10px;
    }

    #see-div-preview h2 a {
    color:white;
    background:#09cda1;
    }

    /* Step 14 */

    #block-pop-quiz {
        position:relative;
    }

    #pop-quiz-response {
     background: none repeat scroll 0 0 #09CDA1;
        color: white;
        padding: 5px;
        position: absolute;
        text-align: center;
        top: -18px;
        width: 330px;
     margin: 0 410px;
    z-index: 99999;
    display:none;
    }

    #pop-quiz-response.wrong {
        background:#ff605f;
        color:white;
    }

    #pop-quiz h2 {
        border-bottom: 14px solid #ededed;
        color: black;
        font-family: georgia;
        font-size: 32px;
        margin-bottom: 40px;
        padding: 0 0 15px;
        text-align: center;
        text-transform: none;
        clear:both;
    }

    #pop-quiz p.pop-quiz-text {
     color: #006CFF;
        font-size: 32px;
        letter-spacing: 2px;
        text-align: center;
    }

    #pop-quiz .button {
        margin: 20px 0 10px;
        padding: 10px 30px;
    }

    #pop-quiz .button#pop-quiz-block {
      margin-left: 170px;
        margin-right: 10px;
    }

    .pop-quiz-questions, .pop-quiz-right {
        font-family:georgia;
        margin-top:10px;
    }

    .pop-quiz-questions {
    float:left;
    color:#b7b7b7;
    }

    .pop-quiz-right {
    float:right;
    text-align:right;
    color:#09cda1;
    }

    /* Step 14: Photostack Styles */

    /*
    #photo_stack {
        clear: left;
        float: left;
        height: 500px;
        margin-left: 50px;
        margin-right: 0;
        margin-top: 20px;
        position: relative;
        width: 680px;
    }
    */

    #pop-quiz {
      margin: 30px 280px;
        width: 600px;
        position: relative;

    }

    #pop-quiz li {
     background: none repeat scroll 0 0 white;
        box-shadow: 0 0 4px 2px #D3D3D3;
        padding: 20px;
        width: 560px;
        position: absolute;
        transition: all 0.2s ease 0s;
        z-index: 9999;

    }

    #pop-quiz #photo1 {
        left: 100px;
        top: 0;
    }
    #pop-quiz #photo2 {
        left: 55px;
        top: 12px;
    }
    #pop-quiz #photo3 {
        left: 50px;
        top: 27px;
    }
    #pop-quiz .animate {
    }
    #pop-quiz .deg1 {
        transform: rotate(1deg);
    }
    #pop-quiz .deg2 {
        transform: rotate(2deg);
    }
    #pop-quiz .deg3 {
        transform: rotate(3deg);
    }
    #pop-quiz .deg4 {
        transform: rotate(4deg);
    }
    #pop-quiz .deg1neg {
        transform: rotate(-1deg);
    }
    #pop-quiz .deg2neg {
        transform: rotate(-2deg);
    }
    #pop-quiz .deg3neg {
        transform: rotate(-3deg);
    }
    #pop-quiz .deg4neg {
        transform: rotate(-4deg);
    }
    #pop-quiz .hover {
        cursor: pointer;
        transform: rotate(0deg);
    }

    /* Step 16 */

    .boilerplate-left {
      background: url("../img/backgrounds/swoosh-arrow.png") no-repeat scroll 200px 230px transparent;
        float: left;
        margin-left: 20px;
        margin-top: 50px;
        padding-bottom: 100px;
        padding-right: 30px;
        width: 410px;
    }

    .boilerplate-left h5, .boilerplate-left p {
        clear:both;
    }

    #signed-in-class-nav #lesson-nav.editor {
        opacity:1;
        margin-top:0;
    }

    /* Step 18 */

    .text-editor-download-main {
        float: left;
         margin: 40px 30px;
        width: 680px;
    }

    #tutorial-steps li div.step-content .text-editor-download .step-download-button  {
        margin-bottom: 0;
            margin-right: 34px;
    margin-top: 5px;
    }

    #tutorial-steps li div.step-content .text-editor-download .text-editor-description {
        float: left;
        margin-top: 0px;
        width:215px;
    }

    aside.text-editor-download-sidebar {
        float:left;
        width:400px;
    }

    aside.text-editor-download-sidebar > div {
        background:#fbfec9;
        width:320px;
        padding:40px 30px;
         box-shadow: -4px 4px 4px 1px #D3D3D3;
    }

    #tutorial-steps li div.step-content .text-editor-download .step-download-button.button {
        background: none repeat scroll 0 0 #414141;
        border: medium none;
        box-shadow: 0 2px 0 0 #989b9e;
        background-image: linear-gradient(bottom, rgb(65,65,65) 0%, rgb(82,82,82) 100%);
        background-image: -o-linear-gradient(bottom, rgb(65,65,65) 0%, rgb(82,82,82) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(65,65,65) 0%, rgb(82,82,82) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(65,65,65) 0%, rgb(82,82,82) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(65,65,65) 0%, rgb(82,82,82) 100%);
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(65,65,65)),
            color-stop(1, rgb(82,82,82))
        );
    }

    #tutorial-steps li div.step-content .text-editor-download  .button.step-download-button a {
      background: url("../img/icons/icon-download.png") no-repeat scroll 122px 15px #4593FE;
        border: medium none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: none;
        color: white;
        display: block;
        float: right;
        font-family: "din";
        font-size: 18px;
        margin: 16px;
        padding: 10px 40px 10px 30px;
        text-shadow: none;
        width: 90px;
    }

    #tutorial-steps li div.step-content .text-editor-download  .button.step-download-button a:hover {
      background: url("../img/icons/icon-download.png") no-repeat scroll 122px 15px #71acfd;
        color:white;
        cursor:pointer;
    }

    #tutorial-steps li div.step-content .text-editor-download  .button.step-download-button a:active {
      background: url("../img/icons/icon-download.png") no-repeat scroll 122px 15px #2b83fd;
    }

    .text-editor-logo {
        float: left;
        font-size: 24px;
          margin: 26px 0 26px 26px;
    /*
        text-indent: -10000px;
    */
    }

    #textmate-logo {
      background: url("../img/tutorials/html2/textmate-logo.png") no-repeat scroll 0 0 transparent;
        width: 161px;
    }

    #notepad-logo {
        background: url("../img/tutorials/html2/notepad-logo.png") no-repeat scroll 0 0 transparent;
        height: 59px;
        margin-bottom: 0;
        width: 116px;
    }

    /* Step 19 */
    #tutorial-steps li div.step-content #beginner-mistakes .html-viewer {
        clear: both;
        float: none;
        margin-bottom: 10px;
        margin-top: 0;
    }

    #tutorial-steps li div.step-content #beginner-mistakes > li > p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 10px;
        text-align: center;
      margin-top: 50px;
    }

    #tutorial-steps li div.step-content #beginner-mistakes .html-viewer ol {
     background: none repeat scroll 0 0 transparent;
        border-bottom: medium none;
        border-left: medium none;
        border-radius: 0 0 0 0;
        border-top: medium none;
        color: white;
        height: auto;
    }

    #tutorial-steps li div.step-content #beginner-mistakes .html-viewer ol li {
        padding: 5px 0 6px;
    }

    #tutorial-steps li div.step-content #beginner-mistakes  .html-editor-fake {
        background: url("../img/backgrounds/code-lines.png") repeat scroll 0 0 #F8F8F8;
        border-bottom: 1px solid #ebe7e7;
        border-radius: 2px 2px 2px 2px;
        border-right: 1px solid #ebe7e7;
        border-top: 1px solid #ebe7e7;
            padding: 0 40px 0 60px;
        color:white;
    }

    #tutorial-steps li div.step-content #beginner-mistakes .html-viewer p {
          color: white;
        font-family: 'Droid sans',sans serif;
        font-size: 15px;
        line-height: 31px;
        margin-bottom: 0;
    }

    .beginner-mistake-wrong, .beginner-mistake-right {
        padding-left:24px;
    }

    .beginner-mistake-wrong {
        background:url('img/icons/icon_wrong.png') 0 9px no-repeat;
    }

    .beginner-mistake-right {
        background:url('img/icons/icon_right.png') 0 9px no-repeat;
    }

    #tutorial-steps li div.step-content #beginner-mistakes .beginner-mistake-wrong .html-editor-fake {
        background: url("../img/backgrounds/code-lines.png") repeat scroll #ff605f;
    }

    #tutorial-steps li div.step-content #beginner-mistakes .beginner-mistake-right .html-editor-fake {
        background: url("../img/backgrounds/code-lines.png") repeat scroll #09cda1;
    }


    /* Your Challenge Steps */

    h2.your-challenge-headline {
        font-size: 42px;
        height: 34px;
        margin: 0 auto 50px;
        padding: 14px 30px;
        text-align: center;
        text-transform: none;
    }

    #tutorial-steps li h3.your-challenge-instructions {
        font-family: 'open sans';
        font-weight: normal;
        line-height: 50px;
        padding: 0 240px;
    }

    /* User Challenge Page */

    .challenge-alert {
     background: #ebebeb;
        bottom: 0;
        display: none;
        padding: 20px;
        position: fixed;
        width: 100%;
    }

    nav#signed-in-profile-nav {
        display: block;
        margin-top: 70px;
        position: absolute;
        width: 100%;
        z-index: 100;
    }


    /* CSS Styles */
    /* CSS1 */

    /* Lesson 1*/
    /* Step 1*/

    /* Step 4 */
    .css-block h4 {
        width:200px;
        line-height:24px;
    }
    .css-block {
      float: left;
        margin-top: 40px;
        width: 317px;
    }

    .css-code-preview {
     background: url("../img/backgrounds/css-code-background.png") repeat scroll 0 0 #F6F6F6;
        border: 1px solid #EBE7E7;
        border-radius: 3px 3px 3px 3px;
        color: #414141;
        font-family: 'droid sans';
        font-size: 14px;
        font-weight: 200;
        line-height: 31px;
        margin-top: 10px;
        overflow: auto;
    }

    .css-code-preview ol {
        float:left;
        width:30px;
        text-align:center;
        font-weight:normal;
        border-right:1px dotted #ebe7e7;
        margin-right:10px;
    }

    .css-code-preview .css-code {
        float:left;
        width:;
    }

    #css-block-01 {
      background: url("../img/icons/green-arrow.png") no-repeat scroll 334px 120px transparent;
        margin-left: 170px;
        padding-right: 150px;
    }

    /* CSS1 Lesson 2 */
    /* Step 2 */

    #review-text-properties, .class-list-container {
        width:100%;
    }

    #list-text-properties, .class-list {
    border-top:1px solid #cacaca;
    }

    #list-text-properties h4 {
            font-size: 18px;
            text-transform: lowercase;
    }

    .class-list h4 {
        font-size: 18px;
    text-transform: none;
    }

    #list-text-properties > li,
    .class-list > li {
        border-bottom:1px solid #cacaca;
        overflow:auto;
        padding: 26px 0 30px;
    }

    .class-list > li {
        padding-bottom:0px;
    }

    .boiler-text {
        float: left;
        padding-left: 65px;
        padding-right: 35px;
        width: 325px;
    }

    .boiler-image {
        float: left;
        padding-left: 35px;
        padding-top: 0px;
        width: 390px;
    }

    .boiler-image .button {
        margin-bottom:20px;
    }

    #boiler-step-1 {
        background:url('../img/');
    }

    #boiler-step-2 {
        background:url('../img/');
        
    }

    #boiler-step-3 {
        background:url('../img/');
        
    }

    #boiler-step-4 {
        background:url('../img/');
        
    }

    #boiler-step-5 {
        background:url('../img/');
        
    }


    .text-property-main {
        width:540px;
        float:left;
        margin-right:40px;
    }

    .text-property-example {
        float:left;
        width:250px;
    }

    #tutorial-steps .step-content .text-property-example p {
        font-family:helvetica, arial;
    }

    .text-options {
        background:#f0eeee;
        border-radius:3px;
        padding:10px 20px;
        font-size:16px;
    }

    .text-options ul li {
    line-height: 24px;
    }

    .text-options h5 {
        color:#999999;
        text-transform:uppercase;
    }

    #line-height .text-property-example p {
        background:url('img/backgrounds/line-height-background.jpg') no-repeat 0px 19px;
    }

    #text-indent .text-property-example p {
        background:url('img/backgrounds/text-indent-background.jpg') no-repeat 0px 4px;
    }

    /* Lesson 3 */
    /* Step 2 */

    .step-content #first-column {
        margin: 50px 60px 0 90px;
    }

    .step-content .two-column-step {
        float: left;
        width: 450px;
        margin-top:50px;
    }

    #tutorial-steps .step-content .two-column-step p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 0;
        margin-top: 20px;
    }

    #tutorial-steps .step-content .two-column-step h4 + p {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 20px;
        margin-top: 0;
    }

    /* Step 5 */

    #semantic-web-main {
        width:600px;
    }

    #semantic-web-explanation {
        background: url("../img/backgrounds/semantic-web.png") no-repeat scroll 640px 0 transparent;
        margin-top: 40px;
    }

    /* Lesson 4 */
    /* Step 2*/

    .one-column {
        padding: 20px 20%;
        width: 60%;
    }

    #tutorial-steps .step-content .one-column p {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 5px;
        margin-top: 20px;
    }

    #tutorial-steps .step-content p#hex-color-example {
        text-align:center;
        font-size:46px;
        margin-bottom: 40px;
    }

    #red-span {
        color:#ff0000;
    }

    #green-span {
        color:#00ff00;
    }

    #blue-span {
        color:#0000ff;
    }

    #tutorial-steps .step-content .hex-examples p {
        float: left;
        font-size: 32px;
        line-height: 26px;
        margin-bottom: 12px;
        padding-top: 14px;
        margin-top:0px;
    }

    #tutorial-steps .step-content .hex-examples li div {
        text-align:center;
        color:white;
        width:154px;
        float:right;
        padding:10px 0px;
    }

    #tutorial-steps .step-content .hex-examples,
    #tutorial-steps .step-content .hex-examples li {
        clear:both;
    }

    #tutorial-steps .step-content .hex-examples {
        margin-bottom: 50px;
        margin-left: 213px;
        width: 300px;
    }

    #tutorial-steps .step-content .hex-examples li {
        margin-bottom:10px;
        overflow:auto;
    }

    #hex-red div {
        background:#ff0000;
    }

    #hex-green div {
        background:#00ff00;
    }

    #hex-blue div {
        background:#0000ff;
    }

    #hex-black div {
        background:black;
    }

    #tutorial-steps .step-content .hex-examples #hex-white div {
        color:#414141;
        background:white;
        border:1px solid #cccccc;
    }

    /* Step 3 */

    .web-safe-examples li {
        width:200px;
        padding:12px 20px 10px;
        border-radius:3px;
        margin:0px 10px 10px 0px;
        color:white;
        float:left;
    }

    .web-safe-examples {
        clear:both;
        margin-bottom:40px;
        width:100%;
    }

    .web-safe-examples li#indianred {
        background:indianred;
    }

    .web-safe-examples li#cornflowerblue {
        background:cornflowerblue;
        
    }

    .web-safe-examples li#tomato {
        background:tomato;
        
    }

    .web-safe-examples li#darkslateblue {
        background:darkslateblue;
    }

    .web-safe-examples li#peachpuff {
        background:peachpuff;
    }

    .web-safe-examples li#slategray {
        background:slategray;
        
    }

    .web-safe-examples li#burlywood {
        background:burlywood;
        
    }

    .web-safe-examples li#seagreen {
        background:seagreen;
        
    }

    .css-step-editor {
        /*width: 200px;*/
    }

    .css-step-editor #tabs {
        width: 300px;
        /*height: 400px;*/
    }
    #tabs {
        width: 300px;
    }

    /* Lesson 5 */
    /* Step 4 */

    #css-box-model p {
        width:500px;
    }

    #css-box-model {
        background:url("../img/backgrounds/box-model.png") no-repeat scroll 520px 0 transparent;
        margin-top: 40px;
    }

    #css-box-model .css-code-preview {
        width:500px;
    }

    /* Lesson 6 */

    /* Step 3 */

    #download-css-boilerplate {
        background: url("../img/backgrounds/download-back.png") no-repeat scroll 530px 0 transparent;
        margin: 40px 231px;
        padding-bottom: 100px;
        padding-top: 20px;
        width: 700px;
    }

    #download-css-boilerplate p {
        width:400px;
    }

    /* CSS Editor Styles */

    .editor.css-101-editor {
        overflow: auto;
        margin-top:-1px;
    }

    .css-step-editor #tabs,
    .css-step-editor #tabs-problems,
    .css-step-editor #tabs-clear,
    .css-step-editor #tabs-zindex {
        float: left;
        width: 458px;
    }

    .step-content  #tabs ul,
    .css-step-editor #tabs-problems ul,
    .css-step-editor #tabs-clear ul,
    .css-step-editor #tabs-zindex ul {
        background:#dfdfe0;
        padding:0px;
        border-radius:3px 3px 0px 0px;
        border:1px solid #979797;
        color:#5f5e5e;
        text-align:center;
        font-family:arial;
        overflow:auto;
    }

    .step-content #tabs ul li,
    .css-step-editor #tabs-problems ul li,
    .css-step-editor #tabs-clear ul li,
    .css-step-editor #tabs-zindex ul li
     {
        float:left;
        
    }

    .step-content #tabs .CodeMirror,
    .css-step-editor #tabs-problems .CodeMirror,
    .css-step-editor #tabs-clear .CodeMirror,
    .css-step-editor #tabs-zindex .CodeMirror {
        background: url("../img/backgrounds/code-lines.png") repeat scroll 0 0 #F8F8F8;
        border: 1px solid #979797 !important;
        border-radius: 0 0 3px 3px;
        color: #535353;
        font-family: 'droid sans';
        line-height: 33px;
        overflow: hidden;
        padding-top: 0;
        position: relative;
        width: 456px;
    }

    .css-step-editor #tabs li:first-child,
    .css-step-editor #tabs-problems li:first-child,
    .css-step-editor #tabs-clear li:first-child,
    .css-step-editor #tabs-zindex li:first-child {
        margin-left: 0px;
    }

    .css-step-editor #tabs li.active, .css-step-editor #tabs-problems li.active, .css-step-editor #tabs-clear li.active, .css-step-editor #tabs-zindex li.active {
        background: none repeat scroll 0 0 #999999;
        color: white;
        height: 35px;
        padding: 9px 0 4px;
    }

    .css-step-editor #tabs li,
    .css-step-editor #tabs-problems li,
    .css-step-editor #tabs-clear li,
    .css-step-editor #tabs-zindex li {
        background: none repeat scroll 0 0 white;
        border-radius: 0;
        color: #999999;
        float: left;
        margin-bottom: 0;
        margin-right: 0px;
        text-align: center;
        text-transform: none;
        font-family:arial;
    }

    .css-step-editor #tabs li a,
    .css-step-editor #tabs-problems li a,
    .css-step-editor #tabs-clear li a,
    .css-step-editor #tabs-zindex li a {
        color: #999999;
        display: block;
        font-size: 14px;
        padding: 2px 20px;
    }

    .css-step-editor #tabs li a, .css-step-editor #tabs-problems li a, .css-step-editor #tabs-clear li a, .css-step-editor #tabs-zindex li a {
        color: #999999;
        display: block;
        font-size: 16px;
        padding: 11px 20px;
    }

    .css-step-editor #tabs li.active a,
    .css-step-editor #tabs-problems li.active a,
    .css-step-editor #tabs-clear li.active a,
    .css-step-editor #tabs-zindex li.active a {
        font-size: 16px;
        padding: 2px 20px;
        color:white;
    }


    /* CSS 2 Styles */

    /* Lesson 1*/
    /* Step 7 */

    #floating-tips ul li {
        list-style-type:disc;
        margin-left:20px;
    }

    /* Lesson 2 */
    #z-index-step {
        background: url("../img/backgrounds/modal-example.png") no-repeat scroll 630px 0 transparent;
        margin-top: 40px;
        overflow: auto;
    }

    /* Lesson 3 */
    /* Step 3 */

    #download-cross-browser-boilerplate div {
         width: 370px;
        padding-right:400px;
        
    }

    #download-cross-browser-boilerplate {
      background: url("../img/backgrounds/download-boilerplate-image.png") no-repeat scroll 430px 10px transparent;
        margin: 50px 172px;
        padding: 0 0 140px;
        width: 860px;
    }

    /* LEsson 4 */

    #download-firebug {
        background: url("../img/backgrounds/firebug.png") no-repeat scroll 430px 80px transparent;
        margin: 40px 171px;
        padding-right: 440px;
        width: 360px;
    position: relative;
    }

    #download-firebug ul li {
        list-style-type:disc;
        margin-left:20px;

    }
    #download-firebug ul {
        margin-bottom:40px;
    }

    #firebug-alert {
        background: none repeat scroll 0 0 #EBEBEB;
        border: 1px solid #CCCCCC;
        border-radius: 3px 3px 3px 3px;
        font-size: 15px;
        margin: 0 65px;
        padding: 6px 20px;
        position: absolute;
        text-align: center;
        top: -57px;
        width: 640px;
        display:none;
    }

    /* Lesson 7 */

    #anatomy-font-face > p {
        text-align:center;
        padding:20px 100px;
    }

    .anatomy-example-code {
        overflow: auto;
        margin-bottom:50px;
    }

    .anatomy-example-code .css-code-preview {
        float: left;
        margin-right: 60px;
        width: 600px;
    }

    .anatomy-example-code p {
        margin-top:10px;
    }

    /* Cross Browser */

    .small-web-browser {
     background: url("../img/backgrounds/smaller-browser.png") no-repeat scroll 0 0 transparent;
        height: 271px;
        margin-top: 10px;
        padding: 40px;
        width: 472px;
    }

    .step-content #cross-browser #first-column {
        margin: 50px 30px 0 0;
    }
    .step-content #cross-browser .two-column-step {
        float: left;
        margin-top: 50px;
        width: 552px;
    }

    .step-content #cross-browser p {
        text-align:center;
        padding: 0 70px;
    }

    #google-fonts.one-column {
        padding: 20px 235px;
        width: 700px;
    }

    .google-font-steps {
        margin-bottom:60px;
    }

    /* FTP Styles */

    .one-column.launch-step ul li,
    .wide-column.launch-step ul li {
            list-style-type: disc;
            margin-left: 20px;
    }

    .one-column.launch-step ol li {
        list-style-type: decimal;
        margin-left: 20px;
    }

    .one-column.launch-step h5 {
        margin-top:10px;
    }

    #tutorial-steps .step-content .one-column.launch-step h5 + p {
        margin-bottom: 20px;
        margin-top: 0;
    }

    .one-column.launch-step img {

    }

    .wide-column.launch-step img {
        float: left;
        margin: 0 20px 20px 0;
        width: 400px;
        height:auto;
    }

    .wide-column.launch-step {
        padding: 0 5%;
        width: 90%;
    }

    .one-column.launch-step img#domain-image,
    .one-column.launch-step img#web-server-image {
        float: left;
        height: auto;
        margin: 20px 20px 20px -180px;
        width: 400px;
    }

    #download-files-button {
        float: right;
        margin-right: -150px;
    }

    #first-three-steps {
        float: left;
        margin-top: 130px;
        width: 270px;
    }

    #drag-into-ftp {
        margin-top: 20px;
    }

    .one-column.launch-step .first-paragraphs {
        text-align:center;
    }

    #congrats-image {
        margin-left: -20px;
    }

    #congrats-step {
        padding: 20px 275px;
        text-align: center;
        width: 600px;
    }

    #congrats-tweet-content {
        background: none repeat scroll 0 0 #4593FE;
        border-radius: 3px 3px 3px 3px;
        color: white;
        padding: 10px 70px;
    }

    #congrats-tweet-content a {
        color:white;
    }
    .modal.fade.in {
        display: block !important;
    }
    /* Editor Challenge */

/* END include from tutorial.css */