/*========================================================================================================================
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:10px;
	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 */
.CodeMirror {
    -moz-border-bottom-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    background: url("../img/editor-bar.png") no-repeat scroll -2px 0 transparent;
    border-bottom: 1px solid #BCBCBC !important;
    border-image: none !important;
    border-left: 1px solid #BCBCBC !important;
    border-radius: 9px 9px 9px 9px;
    border-right: 1px solid #BCBCBC !important;
    border-top: medium none;
    float: left;
    font-size: 14px;
    min-height: 300px;
    padding-top: 43px;
    width: 546px;
}

.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;
}

/*#start-project-button {
    display: block;
    margin: 60px auto 0;
    padding: 0;
    width: 210px;
}

#start-project-button a {
    background: none repeat scroll 0 0 #F15959;
    display: block;
    padding: 16px 40px;
    white-space: nowrap;
    color: #FFFFFF;
}

#start-project-button a:hover {
    background: none repeat scroll 0 0 #d12525;
}*/

/* 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;
}

#launch-step {
	
}

#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;
}

/* Editor Challenge */