/*
Theme Name: Adaptive Flat
Theme URI: www.mickdegraaf.com/adaptiveflat
Description: Create a professional and personal WordPress website. Adaptive Flat allows you to style your site with over 50 styling options making your site both beautiful and seo optimized.
Version: 1.0
Author: Mick de Graaf
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-menu, one-column, theme-options
*/

* {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

body {
	background: [body_color];
	color: [text_color];
}

article a{
	color: [content_link_color];
	transition: color 0.5s;
}


article img{
	max-width: 100%;
	height: auto;
}

article a:hover{
	color: [content_link_hover_color];
}

a {
	color: inherit;
	text-decoration: none;
}

#top-bar {
	width: 100%;
	height: 20px;
	background: [top_bar_color];
}

#main-content {
	min-height: 500px;
}

/**
* #.# Header
*
* CSS for the header some gets overwritten in media querys at the end of the file
*/

#header {
	margin: 0px auto;
	overflow: auto;
	background-color: [header_color];
}



#header-left {
	display: inline-block;
	height: 100px;
}

#header-left img{
	max-width: 95%;
}

#header .site-title {
	font-size: 30px;
	font-weight: bold;
	color: [site_title_color];
}

#header p {
	font-size: 15px;
	font-weight: normal;
	color: [site_description_color];
}

#menu-wrapper {
	height: 50px;
	width: 100%;
}

.menu-bar {
	width: 100%;
	height: 50px;
	background: [menu_background];
	color: [menu_text_color];
}

.header-menu {
	margin: 0px auto !important;
}

.header-menu ul {
	list-style: none;
	height: 50px;
	text-align: center;
}

.header-menu ul li {
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	transition: background 0.5s;
}


.header-menu ul li:hover {
	background: [menu_hover_color];
	color: 	[menu_text_hover_color];
}

.header-menu ul li a {
	 vertical-align: middle;
	 text-align: center;
	 display: block;
	 width: 100%;
	 height: 100%;
	 text-decoration: none;
	 
}

.scrolling-menu {
	position: fixed;
	z-index: 1;
	top:0;
}

.searchform {	
	float: right;
	height: 30px;
	position: relative;
	margin: 10px 0px;
	border-radius: 10px;
	border: 1px solid [search_border_color];
}


.searchform .s {	
	border: none;
	float: left;
	color: [search_text_color];
	padding-left: 10px;
	width: 100px;
	height: 100%;
	transition: width 1s ease;
	background: [search_input_color];
	border-radius: 10px 0px 0px 10px;
}

/**
* #.# searchform
*
* CSS searchform
*/

.searchform .s::-webkit-input-placeholder {
    color: [search_placeholder_color];
}    
.searchform .s:-moz-placeholder {
    /* FF 4-18 */
    color: [search_placeholder_color];
}
.searchform .s::-moz-placeholder {
    /* FF 19+ */
    color: [search_placeholder_color];
}    
.searchform .s:-ms-input-placeholder {
    /* IE 10+ */
    color: [search_placeholder_color];
}



.searchform .s:focus,

.searchform .searchsubmit:focus {
	outline: none;
}

.searchform .s:focus{
	width: 170px;
	
}

.searchform .searchsubmit {
	width: 30px;
	height: 100%;
	background: [search_button_color];
	border: 0;
	border-radius: 0px 10px 10px 0px;
	cursor: pointer;
	font: normal 18px/1 'dashicons';
	color: [search_button_logo_color];
	-webkit-appearance: none;
	float: right;
}

.searchform .searchsubmit:hover {
	font: normal 20px/1 'dashicons';
}

.dashicons-admin-home:before {
	content: "\f102";
	font: normal 30px/1 'dashicons';
	line-height: 50px;
	height: 50px;
	
	display: block;
}


/* 
* #.# Headings
*
*All headings rough styling (mainly font size) takes place here
*/

h1, h2, h3, h4, h5, h6 {
	color: [headings_color];
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 25px;
}

h3 {
	font-size: 19px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 16px;
}


/**
* #.# Page title and description
*
* Page title and description styling is done here
*/

#title-container {
	border-bottom: 2px solid [page_title_underline_color];
	margin-bottom: 10px;
}

#content > #title-container {
	width: 95%;
}

#title-container h1 {
	display: inline-block;
	color: [page_title_color];
	font-size: 30px;
}

#description {
	width: 95%;
}


/**
* #.# Base Colors
*
* Not used very much in the theme anymore
*/

.color-1 {
	background: #1fbca7;
}

.color-2 {
	background: #f37934;
}

.color-2-font {
	color: #f37934;
}

.color-3 {
	background: #323a46;
}

.color-3-font {
	color: #323a46;
}

/**
* #.# Random css
*
* Some css that not have been grouped yet
*/

iframe,
embed,
object {
	margin: 0px auto;
	display: block;
	
}

hr {
	border: 0px;
	height: 1px;
	background: #EEEEEE;
}

p {
	margin: 10px 0px;
}


/**
* #.# Post preview
*
* Styles the post previews on archive pages
*/
.post-prev {
	border-bottom: 1px solid [post_prev_bottom_border_color];
	padding: 10px 0px;
	word-wrap: break-word;
}

.prev-title a{
	color: [post_prev_title_color];
	transition: color 0.5s;
}

.prev-title:hover a {
	color: [post_prev_title_hover_color];
}

.post-prev p {
	font-style: italic;
	word-wrap:break-word;

}


.post-prev img,
.img-placeholder {
	width: 100%;
	height: auto;
	display: block;
}

.img-placeholder {
	background: [thumb_placeholder_color]
}

.img-placeholder .icon {
	margin: 0px auto;
	text-align: center;
	width: 100%;
	float: left;
}

.img-placeholder .icon:before {
	content: "\f155";
	font: normal 150px/1 'dashicons';
	color: [thumb_placeholder_logo_color];
	transition: color 0.5s;
}

.img-placeholder:hover .icon:before {
	color: [thumb_placeholder_logo_hover_color];
}

/**
* #.# Post preview one per line
*
* Post preview one per line
*/

.post-prev2{
	width: 90%;
	height: auto;
	border-bottom: 1px solid [post_prev_bottom_border_color];
	padding: 10px 0px;
}

.post-prev2 img,
.post-prev2 .img-placeholder {
	width: 200px;
	height: auto;
	float:left;
	margin:0px 10px 0px 0px;
}

.post-prev2 p{
	display: inline;
}

.post-prev2 .img-placeholder .icon:before {
	font: normal 100px/1 'dashicons';
}

.post-prev2 .prev-title {
	margin: 10px 0px;
}


/**
* #.# WordPress styles
*
* Styles required by wordpress
*/

.wp-caption {
	max-width: 100% !important;
}

.wp-caption img{
	max-width: 100%;
}

.wp-caption-text {
	margin: 0px;
	text-align: center;
}

.sticky {
	/* Nothing here */
}

.gallery-caption {
	/* Nothing here */
}

.bypostauthor {
	/* Nothing here */
}
.alignright {
	float: right;
	margin: 10px 0px 10px 10px
}
.alignleft {
	float: left;
	margin: 10px 10px 10px 0px
}
.aligncenter {
	margin: 10px auto;
}

/**
* #.# Footer styles
*
* Styles required by wordpress
*/


#footer-top {
	margin-top: 10%;
	min-height: 100px;
	height: auto;
	width: 100%;
	background: [footer_top_color];
	color: [footer_top_text_color];
}


#footer-top .widget {
	width: 22%;
	margin: 30px 4% 30px 0px;
	float: left;
}

#footer-top .widget:last-child {
	margin: 30px 0px 30px 0px;
}

#footer-top .widget-head {
	margin-bottom: 5px;
}

#footer-top .widget-head h4{
	background: [footer_widget_head_color];
	color: [footer_widget_head_text_color];
}

#footer-top .widget-head{
	border-color: [footer_widget_head_color];
}

#footer-top .center {
	margin: 0px auto;
	width: auto;
	max-width: 1110px;
}

#footer-top .widget li {
	border-color: [footer_list_seperator_color];
}

#footer-bottom {
	min-height: 20px;
	width: 100%;
	background: [footer_bottom_color];
	color: [footer_bottom_text_color];
}

#footer-bottom a {
	color: [footer_bottom_link_color];
}

#footer-bottom .center
{
	margin: 0px auto;
	padding: 10px 0px;
}

#game {
	width: 100%;
	height: 100%;
}

#single-game, #single-page {
	width: 95%;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid [post_prev_bottom_border_color];
}


/*
* #.# Sidebar and footer widgets
*
* Style for the sidebar and footer widgets including lists
*/ 

.widget-head {
	border-bottom: 2px solid [widget_head_background_color];
	margin-bottom: 10px;
}

.widget-head h4 {
	display:inline-block; 
	padding: 5px 10px;
	background: [widget_head_background_color];
	color: [widget_head_text_color];
	width: auto; 
}
.widget ul {
	list-style: none;
}

#sidebar li:before
{
 content:" • ";  
 color: [widget_list_marker_color];
 margin: 0px 10px;
}


.widget li {	
	padding: 5px 0px;
	border-bottom: 1px solid [widget_list_seperator_color];
	font-size: 13px;
}

.widget ul li:last-child {
	border-bottom: none;	
}

.widget ul.children {
	margin-left: 15px;
}

.widget a:hover {
	text-decoration: underline;
}

#sidebar div:first-child {
	padding-top: 5px;
}




/*
* #.# Pagination css
*
* Awesome styling for pagination
*/
.navigation{
	float: left;
	
}

.navigation ul {
	list-style: none;
	margin: 10px 0px;
}

.navigation ul li {
	display: inline-block;
	margin: 2px 0px;
	background: [pagination_color];
	transition: all 0.5s;
	font-size: 30px;
	color: [pagination_text_color];
}

.navigation ul li.active, .navigation ul li:hover {
	background: [pagination_active_color];
	color: [pagination_active_text_color];
}

.navigation ul li a {
	padding: 0px 15px;
}

.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}

.tag-icon, .category-icon {
		display: inline;
		font-size: 17px;
		font: normal 17px/1 'dashicons';
}

.category-icon:before {
	content: "\f318";
	margin: 0px 10px;	
	line-height: 17px;
}

.tag-icon:before {
	content: "\f323";
	margin-right: 10px;
	line-height: 17px;
}


@media only screen and (max-width: 767px) {
    /* phones */
    
    .center {
		width: 95%;
		margin: 0px auto;
	}
	
	#content {
		margin: 10px 0px;;
		width: 100%;
	}
    
    #sidebar {
		width: 100%;
	    margin: 30px 0px; /* used for triggering in js/script.js */
	    max-width: none;
	}
	
	#sidebar li {
		font-size: 20px;
	}
	.post-prev {
		height: auto;
	}
	
	#header-left img
	{
		margin: 0px auto;
	}
	
	
	#footer-top .widget{
		width: 100%;
		float: none;
	}
	
	#footer-top .widget:last-child{
		margin: 0px;
		padding-bottom: 10px;
	}
	
	#footer-top .widget:first-child{
		padding-top: 20px;
	}

	
}

@media only screen and (min-width: 768px) {
    .center {
		width: 95%;
		max-width: 1110px;
		margin: 10px auto;
		overflow: auto;
	}
	
	#content {
		width: 70%;
		float: left;
	}
	
	.full-width #content{
		width: 100%
	}
    
    #sidebar {
		width: 30%;
		float:right;
	}
	
	.left-sidebar #sidebar {
		float: left;
	}
	
	.left-sidebar #content {
		float: right;
	}
	
	.left-sidebar .post-prev {
		float: right;
		margin-left: 5%;
		margin-right: 0px;
	}
	
	
	.left-sidebar .post-prev2 {
		float: right;
	}
	
	.left-sidebar #single-page,
	.left-sidebar #single-game {
		float: right;
	}

	.header-menu ul li {
		padding: 0px 10px; 
		padding-right: 10px;                   
	}
	
	.post-prev {
		width: 45%;
		margin-right: 5%;
		
		float: left;
		
	}
	
}


[custom_css]