@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
  box-sizing: border-box;
}

body {
  font-family: 'open_sansregular';
  margin: 0;
}

h1, h2 {
  margin-top: 0;
font-family: 'open_sansbold';
	border-bottom:2px solid #f48024;
	display: inline-block;
	
}

h1 {margin-left: 25px;}

.code-panel {background: #eee;}
.code-box {width:96%; margin: 0px auto;}

.editor {
  display: flex;
  flex-wrap: wrap;
}

.html-editor, .css-editor {
  flex: 1 1 50%;
}

textarea {
font-family:monospace !important;
  width: 100%;
  height: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  resize: none;
color:#000;	
	font-size: 18px;
}

#html-code {
  border-right: none;
}

#css-code {
  border-left: none;
}

button {
  margin: 20px 0;
  padding: 10px 20px;
  background-color: #f48024;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {background-color:#C96312}

.output {
  margin: 20px 0;
}

.output h2 {
  margin-bottom: 10px;
}

#output-frame {
  width: 100%;
  height: 400px;
  border: none;
}

.html-syntax {
	color: #000;
	font-family: monospace;
}

.html-syntax .tag {
	color: blue;
}

.html-syntax .attribute {
	color: green;
}

.html-syntax .value {
	color: red;
}

/*::::::::::: BREADCRUMB START ::::::::::::: */
#breadcrumb {margin:0px 0px 10px 25px;  padding:0px 0px 0px 0px; clear:both; overflow:hidden; }
ul.crumbs {margin: 0px; padding: 0px;}
ul.crumbs li			{ list-style:none; float:left; padding:0px; margin:0px; background:none; }
ul.crumbs li			{  font-weight:normal; display:inline-block; }
.crumbs li a { text-decoration:none; padding:0px; font-size:14px; display:inline-block; text-transform:capitalize; color: #000; font-weight: bold;}
.crumbs li a:hover  {color:#f48024;}
.crumbs li:after {content: ">"; padding:0px 10px; font-weight: bold;}
.crumbs li:last-child:after {content: "";}
.crumbs li:last-child a {color: #f48024;}

/*:::::::::::::: BREADCRUMB END ::::::::::::: */