/* @override 
	http://id.yellowrubberball.com/wp-content/themes/instructionaldesign/style.css?*
	http://instructionaldesign.org/wp-content/themes/instructionaldesign/style.css?* */

/*
 Theme Name:   Instructional Design
 Theme URI:    http://id.yellowrubberball.com
  Description:  A Custom Theme for Instructional Design
 Author:       Katie Benedetto Jones
 Author URI:   https://yellowrubberball.com
 Template:     generatepress
 Version:      0.1
 Tags: 
*/

.search div.breadcrumbs, .search-no-results div.masonry-load-more, .archive .page-header-content-container {
	display: none; 
}  

.category .id-book-header, .single .id-book-header {
	padding: 0px; 
	margin-bottom: 0px;
}  

.clearfix {
	clear: both;
}

.single-book .featured-image { 
	display: none; 
}

.single-book .thumbnail-wrapper {
	float: right; 
}

.site-branding p.main-title a {
	position: relative; 
	top: 9px;
} 
 
.id-book-header { 
	text-align: center;
}

.post-type-archive header.page-header {
	display: none;  
}

ul {
	margin-left: 20px;
} 

ul.book-categories {
	text-align: center;
}

ul.book-categories li {
	float: left;
	list-style-type: none;
	margin-right: 5px;
} 

ul.book-categories li:after {
	content: "\2022";
}
  
ul.book-categories li:last-of-type:after {
	content: "";
}   
   
ul#menu-top-menu {
	background: #f9d431; 
	padding-right: 30px;
}   
   
.toggled ul#menu-top-menu {
	background: #f9d431; 
	padding-right: 0px;
}   

.toggled ul#menu-top-menu li:nth-child(2n+1) {
	background: #f9de68;  
}

.toggled ul#menu-top-menu li:hover {
	background: #fff;  
}  
   
#menu-top-menu a{ 
	font-weight: bold;
}   

#breadcrumbs {
	border-bottom: 2px solid #ddd;
	padding-bottom: 30px; 
}

.home #breadcrumbs {
	display: none; 
}
   
/*#menu-top-menu li a:after{
		content: "/";
		color: #253246;
		opacity: .5; 
		display: inline !important;
		clear: none;
		padding-left: 20px;
}*/ 

#menu-top-menu li.search-item a:after {
	content: "";
}
 
#menu-top-menu li {
	clear: none;
}

#menu-top-menu li a {
	padding-right: 0px;
} 

#masthead .inside-header {
	padding: 10px;
} 

.menu-toggle, .toggled #menu-top-menu li a {
	padding: 0px; 
}

.toggled #menu-top-menu li a {  
	text-align: center;
}

.home .page-header-content h1 {
	letter-spacing: .05em; 
}

footer {
	background: #253246 !important; 
}
 
#footer-widgets, #sticky-navigation{
	background-image:linear-gradient(0deg, rgba(0,25,53,0.79),rgba(0,25,53,0.79)), url(http://id.yellowrubberball.com/wp-content/uploads/2018/02/student-849825_1920.jpg); 
}

p.credits {
	font-size: 12px;
	opacity: .8;
}

p.credits a {
	opacity: 1;
	color: #fff !important;     
	font-weight: bold; 
}

p.copyright, p.copyright a, p.credits, p.credits a{
	color: #fff;
}

#footer-widgets {
	text-align: center; 
} 

.page-header-content h1 {
  font-family: "Noto Sans";
} 

.page-header-content h2 {
	font-family: "Noto Sans";
	font-weight: normal; 
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	font-size: 120%;
}

.home h1.entry-title {
	display: none; 
}  

.id_boxes {
	clear: both;
	margin-bottom: 80px;
	margin-top: 100px; 
}

.id_box {
	float: left;
	width: 30%;
	min-height: 200px; 
	text-align: center;
	color: #253246; 
	margin-top: 10px;
	background-size: cover;
	display: table;	
	position: relative;
	
}

.id_box div.text {
	display: table-cell;
	vertical-align: middle;
	z-index: 50;
	position: relative;
	font-weight: bold;
	font-size: 37px; 
	line-height: 40px;
	color: #fff;
}

.id_box.center {
	margin-left: 5%;
	margin-right: 5%;   
} 

.id_box:hover {
	cursor: pointer;
}

.id_box:hover .overlay {
	background: rgba(1,1,1,.2); 
} 

.id_box a {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 55;   
	color: #fff;
} 

.id_box .overlay {
	height: 100%;
	width: 100%;
	background: rgba(1,1,1,.4); 
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
}

.archive header {
	text-align: center;
}

.archive img {
	width: 100%;  
}
 
@media only screen and (min-width: 701px) {

 
}
   
@media only screen and (min-width: 320px) and (max-width: 700px) {
	#masthead .inside-header.grid-container {
		padding: 0px
	}
	
	button.menu-toggle {
		padding-left: 10px;
	}
	
	.id_box {
		width: 100%;
		margin-bottom: 10px;
	}
	
	.id_box.center {
		margin: 0px; 
	}
}