@import url(html5-doctor-reset-stylesheet.css);
/* Kongondo.com Custom Styles */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
::1. Shared Styles
::2. Header & Footer
::3. Navigation
::4. Tutorial
::5. Media Queries
*/


/* -----------------------------------------
   1. Shared Styles
----------------------------------------- */

/* Prevent "jump" on shorter pages */
html {
overflow-y:scroll;
}

body { 

	margin: 0 auto;
	font-family: 'Archivo Narrow', sans-serif;
	line-height: 20px;
	background:#FFF;


}





/* Set the width of the site rows {overriding the default 950px} */
/*.row { 
    width:1140px; 
	padding:0 15px;
} */

a#logo img {
			margin:0 0 0 -10%;
			width: 35%;
			height: auto;
}

h1, h2, h3, h4, h5, h6, ol, ol li {
	
	margin:30px 0;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight: 400;
	color: #736359;/*##chocolate*/
	color: #6C686B; /*dark gray*/


}

h1 {
	font-size: 3.5em;
	line-height: 32px;
	margin-top: 60px;
}

h2 {
	font-size: 2.5em;
	line-height: 32px;
}

h3 {
	font-size: 1.5em;
	line-height: 28px;
	margin-bottom: 15px;
}


p	{
	font-family:'Source Sans Pro', sans-serif;
	font-size:1.125em;
	color:#333333;
	color:#595959;
	color:#4E4E4E;
	line-height: 1.5em;
	margin-bottom: 15px;

}

p a, li a {color:#8CC2D0; color:#79B803;}

p a:hover, li a:hover, ul.categories h3 a:hover {
	background-color: #6C686B;
	color:#FFF;

}

a {
	text-decoration: none;
}

hr {border:dotted #AE9F97; border:dotted #9C989B; border: dotted #BDB9BC; border-width:1px 0 0; margin:30px 0; height:5px; }

/* tutorial images */
img.ImageTags {

	max-width: 100%;
	outline: #EBE9EB 1px solid;
	margin: 20px 0;
}

/* code blocks */
pre.php, pre.css, pre.html, pre.javascript, pre.xml {padding: 1.25em; margin: 30px 0;}


p.next-lesson, p.prev-lesson {font-size: 98%; margin-top: 30px;}

.prev-lesson {
	float: left;
	width: 45%;
	margin-right: 5%;
	text-align: left;
}

.next-lesson {
	float: right;
	width: 45%;
	text-align: right;
	position: relative;
	left: -14px;
}


/* -----------------------------------------
   2. Header & Footer
----------------------------------------- */
header {
	/*background-color: #6C686B;*/
	/*height: 200px;*/
}

div#header	{
	/*background:url('images/dots.png') no-repeat 100% -35px;*/
	background-size:18% auto;

}


/* search div */

div#search {padding:0; 	}

/* search form */

form#searchform  {
	z-index: 100;
    height: 2em;
	width:13em;
    background-color: none;
	position:relative;
	margin: 0.55em 0 0 0;

}

/* input search box form */

input#searchbox {
  	box-sizing: border-box;
	height:2em;
	background: none repeat scroll 0 0 transparent;
	width: 100%;
   	color: #8CC2D0;
   	color: #79B803;
    outline: none;
	border: 1px solid #ACAAB2;
	border: 1px solid #EBE9EB;
	transition: all 0.3s ease-in-out 0s;
	
}


/* input search submit 'button'*/

button#searchsubmit {
	position: absolute;
    top: 0;
    right: 0;
    height: 2em;
    width: 3em;
    color: #fff;
    text-align: center;
    line-height: 42px;
	border: 0;
	background:  url('images/search.png') right center no-repeat;
    cursor: pointer;
	text-indent: -9999em;
	box-sizing: border-box;
}

/* search results*/

ol.searchresults {list-style:decimal-leading-zero;  margin:0;}
ol.searchresults li {color:#ADA9AC; margin-bottom:0;}

/* footer*/

div#footer p {margin-top: 3em; text-align: center; font-size: 1.015em;}

/* -----------------------------------------
   3. Navigation
----------------------------------------- */
div#navigation {padding:0;}

/*Strip the ul of padding and list styling*/
ul#menu {
	margin:0;
	padding:0;
	background:transparent;
}

/*Create a horizontal list with spacing*/
ul#menu li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

ul#menu > li, .nav-bar > li:last-child {border:none; }
ul#menu > li:hover { background:transparent; }

ul#menu li a {
	
	font-family: 'Old Standard TT', serif;
	font-style: italic;
	font-weight: 400;
	font-size:2.0em;
	color:#ADA9AC;
	border:none;
	display:block;
	height: 50px;
	text-align: center;
	line-height: 50px;

}

ul#menu li a:hover, ul#menu li a.active {color: #60534B;}
ul#menu li a:hover {background: transparent;}
ul#menu > li > a:first-child { padding:0 60px 0 0; }

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: 'Archivo Narrow', sans-serif;
	text-decoration: none;
	color: #fff;
	background: #8CC2D0;/*baby bluish*/
	background: #6C686B;/*gray*/
	background: #60534B;/*choclate*/
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]#show-menu{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/* -----------------------------------------
   4. Tutorials
----------------------------------------- */
/*categories*/
ul.categories{padding:0;}
ul.categories span{color: #ADA9AC;}
ul.categories h3{margin:5px 5px 5px 0;}
ul.categories h3 a {color:#60534B; color:#6C686B; }
ul.categories p{font-size:1.214em; margin-bottom: 25px; padding-right: 10px;}
ul.categories li{list-style: none;}
span.total-lessons {font-size: 16px; color:#C9A363!important; vertical-align: top; margin-left: 2px;}

/*tutorial lists*/
ol.tutorial-list {list-style:decimal-leading-zero;  margin:0;}
ol.tutorial-list li {color:#ADA9AC; margin-bottom:0;}

/* lessons*/

p.lesson-details {margin:20px 0 5px; color: #60534B;}
h3.lesson-details {margin-bottom: 5px;}
ul.lesson-details {color: #8CC2D0; color: #C9A363; }
ul {list-style-position:inside; }
div.lesson-credits, div.lesson-resources {padding:0;}
div.lesson-credits h5, div.lesson-resources h5 {margin:0 0 10px;}
div.lesson-credits li a, div.lesson-resources li a {color:#B96800;}
div.lesson-credits li a:hover, div.lesson-resources li a:hover, ul.lesson-details a:hover {background-color:#E8CA19; color:#60534B; background-color: #6C686B; color:#FFF;}

/* -----------------------------------------
	5. Media Queries
----------------------------------------- */



/* Responsive Styles */
.mobile {display: none;}

/*=== Tablet ===*/
@media (max-width: 769px) {
	div#header, div#main, div#secondary, div#footer {padding: 0 30px;}
	div#main {min-height: 0px; margin-top: 15px;}
	h1 {font-size: 2em;}
	h2{font-size: 1.5em;}
	h3{font-size: 1.25em;}
	.mobile {display: block;}
	.no-mobile {display: none;}
	form#searchform {margin-top: 15px;}
}

/*=== Desktop ===*/
@media (min-width: 770px) {
	body {width: 708px;}
	div#navigation {width: 75%;}
	div#search {width: 25%;}
	/*li.category{width: 25%}*/
}

/* ===Other Desktop ===*/
@media (min-width: 900px) {
	body {width: 840px;}
}

/* ===Large Desktop ===*/
@media (min-width: 1200px) {
	body {width: 1140px;}

}

/* === Even Larger Screens ===*/
@media (min-width: 1366px) {
	body {width: 1200px;}
	li.category{width: 25%}

}


/*=== main menu ===*/

@media only screen and (min-width:900px) and (max-width:1199px) {
		ul#menu li a {font-size: 1.95em;}

}

@media only screen and (min-width:769px) and (max-width:899px) {
		ul#menu li a {font-size: 1.465em; }

}

@media screen and (max-width : 769px){
	
	ul#menu  {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	ul#menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul#menu li, ul#menu li a {
		width: 100%;
			font-family: 'Archivo Narrow', sans-serif;
			font-style: normal;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}

/*logo*/

@media screen and (max-width : 1500px){
		a#logo img {margin-left: -3%; }

}


/*########## temp landing page  #############*/

/* */
body#landing {
	background-color: #322E32;
}

div.landing {

	margin-top: 50%;
}

h1.landing {
	color: #F2F2F2;
	text-align: center;
	margin-top:  10px;
}

img.landing {
	width: 9%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/*#######################*/