/*
Theme Name: BlankSlateGrid ShiVa
Theme URI: http://wordpress.org/themes/blankslate
Author: TidyThemes and Felix Caffier
Author URI: http://trisymphony.com
Description: Based on TidyThemes BlankSlate 4.0.3
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslateGrid
*/


/* resets -------------------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { 
	font-size:100%;
	font:inherit;
	padding:0;
	border:0;
	margin:0;
	vertical-align:baseline;
}

ol,ul{list-style:none}

blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}

table{border-collapse:collapse;border-spacing:0}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block }

.clear{clear:both}

.sticky{} .bypostauthor{} .wp-caption{} .wp-caption-text{} .gallery-caption{} .alignright{} .alignleft{} .aligncenter{} .screen-reader-text { clip:rect(1px, 1px, 1px, 1px); position:absolute !important }


/* fonts -------------------------------------------------------------- */

@font-face {
	font-weight: normal;
	font-family: 'SLR';
	src: url('fonts/sharnay_light-webfont.eot');
	src: url('fonts/sharnay_light-webfont.woff') format('woff'), url('fonts/sharnay_light-webfont.ttf') format('truetype'), url('fonts/sharnay_light-webfont.svgz#webfontLNFlRNN8') format('svg'), url('fonts/sharnay_light-webfont.svg#webfontLNFlRNN8') format('svg');
	font-size-adjust: 0.49;
}


/* html and body -------------------------------------------------------------- */

html {
	width: 94%;
	min-width: 400px;
	padding: 2% 2% 3% 2%;
	
	background-color: #111;
	background-image: url('img/background.png');
	background-size: 6px 6px !important;
	-moz-background-size: 6px 6px;

	color: #f5f5f5;
	font-family: SLR, Helvetica, sans-serif;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	
	font-size: 0.9em;
	line-height: 1.2em;
}

body {
	margin: auto;
	padding: 0;
	max-width: 2800px;
}

/* basic structure -------------------------------------------------------------- */

#mainGrid2side {
	display:grid;
	grid-template-columns: 200px auto 300px 300px;
	grid-template-rows: 100px auto 1px 50px;
	grid-gap: 20px 30px;

	grid-template-areas: 
		"logo nav nav nav"
		"content content side-dev side-social"
		"dividerB dividerB dividerB dividerB"
		"footer footer fNav fNav";
}

#mainGridDevside {
	display:grid;
	grid-template-columns: 200px auto 300px;
	grid-template-rows: 100px auto 1px 50px;
	grid-gap: 20px 30px;

	grid-template-areas: 
		"logo nav nav"
		"content content side-dev"
		"dividerB dividerB dividerB"
		"footer footer fNav";
}

#mainGridSocialside {
	display:grid;
	grid-template-columns: 200px auto 300px;
	grid-template-rows: 100px auto 1px 50px;
	grid-gap: 20px 30px;

	grid-template-areas: 
		"logo nav nav"
		"content content side-social"
		"dividerB dividerB dividerB"
		"footer footer fNav";
}

#mainGridDocside {
	display:grid;
	grid-template-columns: 200px auto 500px;
	grid-template-rows: 100px auto 1px 50px;
	grid-gap: 20px 30px;

	grid-template-areas: 
		"logo nav nav"
		"content content side-doc"
		"dividerB dividerB dividerB"
		"footer footer fNav";
}

#mainGridFull {
	display:grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 100px auto 1px 50px;
	grid-gap: 20px 30px;

	grid-template-areas: 
		"logo nav"
		"content content"
		"dividerB dividerB"
		"footer fNav";
}


/* content -------------------------------------------------------------- */

#contentColumns {
	grid-area: content;

	columns: 2;
	column-gap: 5em;
	column-rule: 4px double #444;
	
	padding: 25px 35px 30px 35px;
	
	background-color: #191919;
	border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	
	text-align: justify;
	
	border-right: 1px solid #444;
}

#contentSingle {
	grid-area: content;
	padding: 25px 35px 30px 35px;
	
	background-color: #191919;
	border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	
	text-align: justify;

	border-right: 1px solid #444;
}


/* navigation -------------------------------------------------------------- */

#top-menu {
	grid-area: nav;
	align-self: end;
	justify-self: end;
	font-size: 1.2em;
}

#top-menu nav {	padding-bottom: 25px;	}

#bottom-menu {
	grid-area: fNav;
	justify-self: end;
	font-size: 0.9em;
}


/* structural dividers -------------------------------------------------------------- */

#postdividerT {
	display: none; /* only visible in low resolutions */
	grid-area: dividerT;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(127, 127, 127, 0.75), rgba(0, 0, 0, 0));
}

#postdividerB {
	grid-area: dividerB;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(127, 127, 127, 0.75), rgba(0, 0, 0, 0));
}


/* sidebars -------------------------------------------------------------- */

#side-social {
	grid-area: side-social;
	padding: 0 0 1.3em 0;
}

#side-dev {
	grid-area: side-dev;
	padding: 0 0 1.3em 0;
	height: 0; /* hack for stacking */
}

#side-doc {
	grid-area: side-doc;
	padding: 0 0 1.3em 0;
}


/* widgets -------------------------------------------------------------- */

div[id^="side"] .widget-container {
	margin: 0 0 10% 0;
}

div[id^="side"] .widget-title {
	display:block;
	margin: 0 0 10px 0;
}


/* header and footer -------------------------------------------------------------- */

#logo {
	grid-area: logo;
	background-image: url('img/WebsiteHeader.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 200px 100px;
	width:200px;
	height:100px;
}

#footer {
	grid-area: footer;
	color: #555;
	font-size: 0.9em;
}


/* Screen Size modificators -------------------------------------------------------------- */

/* 1440p, 1080p */
@media all and (max-width: 2500px) {
	
	#contentColumns {
		columns: 1;
	}
	
}

/* iPad, office, 900p laptops */
@media all and (max-width: 1440px) {
	
	#mainGrid2side {
		grid-template-columns: 200px auto 300px;
		grid-template-rows: 100px auto auto 1px 50px;

		grid-template-areas: 
			"logo nav nav"
			"content content side-dev"
			"content content side-social"
			"dividerB dividerB dividerB"
			"footer footer fNav";
	}
	
}

/* phone */
@media all and (max-width: 900px) {
	
	#mainGrid2side {
		grid-template-columns: auto;
		grid-template-rows: 100px 20px 1px auto auto auto 1px 20px 50px;

		grid-template-areas: 
			"logo"
			"nav"
			"dividerT"
			"content"
			"side-dev"
			"side-social"
			"dividerB"
			"fNav"
			"footer";
	}

	#mainGridDevside {
		grid-template-columns: auto;
		grid-template-rows: 100px 20px 1px auto auto 1px 20px 50px;

		grid-template-areas: 
			"logo"
			"nav"
			"dividerT"
			"content"
			"side-dev"
			"dividerB"
			"fNav"
			"footer";
	}

	#mainGridSocialside {
		grid-template-columns: auto;
		grid-template-rows: 100px 20px 1px auto auto 1px 20px 50px;

		grid-template-areas: 
			"logo"
			"nav"
			"dividerT"
			"content"
			"side-social"
			"dividerB"
			"fNav"
			"footer";
	}
	
	#mainGridDocside {
		grid-template-columns: auto;
		grid-template-rows: 100px 20px 1px auto auto 1px 20px 50px;

		grid-template-areas: 
			"logo"
			"nav"
			"dividerT"
			"side-doc"
			"content"
			"dividerB"
			"fNav"
			"footer";
	}
	
	#mainGridFull {
		grid-template-columns: auto;
		grid-template-rows: 100px 20px 1px auto 1px 20px 50x;

		grid-template-areas: 
			"logo"
			"nav"
			"dividerT"
			"content"
			"dividerB"
			"fNav"
			"footer";
	}
	
	#top-menu, #bottom-menu, #footer, #logo {
		align-self: center;
		justify-self: center;
		text-align: center;
	}
	
	#top-menu nav {
		padding: 0;
	}
	
	#postdividerT {
		display: block;
	}
	
	#side-dev {
		height: auto;
	}
	
	#contentColumns, #contentSingle {	
		border-right: 0px solid #444;
	}
	
	
}
	
}