/* 	
	|===========================|
	|							|
	|	(C) Michal Sitarz 2017	|
	|							|
	|---------------------------|
	|							|
	|	www.michalsitarz.com	|
	|							|
	|===========================|
*/

/* ================================================================================ */	
/*						*** Media Queries: responsive design ***	 				*/
/* ================================================================================ */

/* DESKTOP / LAPTOP / TABLET */
@media (min-width: 810px), (min-height: 610px){
	#wrapper{
	
	background-color: #4d4d4d;
	
	border-color: lightgrey;
	border-style: solid;
	border-width: .15rem;
	border-radius: 1rem;
	
	margin: 0 auto;
	padding: 0;
	
	width: 800px; 
	height: 600px;
	
	overflow: hidden;
	
	/* centering */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	
	#smartphone-message{display: none}
}

/* SMALL TABLET / NETBOOK / ODD DEVICES + SMARTPHONES landscape*/
@media (max-width: 810px), (max-height: 610px){
	#wrapper{
	
	background-color: #4d4d4d;
	border-radius:0;
	
	margin: 0 auto;
	padding: 0;
	
	width: 100%;
	height: 100%;
	
	overflow: hidden;
	
	}
		
	#footer{display:none;}
	#smartphone-message{display: none}
}

/* SMARTPHONES portrait*/
@media (max-width: 530px){
	#wrapper{display:none;}
	#footer{display:none;}
	
	#smartphone-message{
		display: block;
	}
	
}



/* ================================================================================ */	
/*								*** Main Style.css ***	 							*/
/* ================================================================================ */

/* ====================== */
/* global document styles */
/* ====================== */

html {height: 100%; width: 100%;}

body{
	/*background-color: #4d4d4d;*/
	background-color: #333333;
	/*background-image: url("../images/bg/carbon-pattern-1.png");*/
	color: white;
	font-family: 'Abel', sans-serif;
	font-size: 115%;
}

hr {	margin-left: 1.5rem;
	margin-right: 1.5rem;
	border-style: solid;
	border-color: lightgrey;
	
}

.short-hr{
	width: 30%;
	border-color: #737373;
	margin-left: 0;
}

h1, h3 , h4{
	font-weight: normal;
}


/*** const colours ***/
/* ================= */

.blue{color: #00A5E1;}
.orange{color: #FF872D;}
.green{color: #009933;}
.yellow{color: #FFFF00;}
.grey{color: #999999;}
.white{color: white;}


/*** text highlights ***/
/* =================== */
.highlight-text{
	background-color: #404040;
	
	padding-left: .25em;
	padding-right: .25em;
	
	margin-left: -.05em;
	margin-right: -.05em;
}

.highlight{
	background-color: #404040;
	
	padding-left: .2em;
	padding-right: .2em;
	
	margin-left: -0.2em;
}

.highlight-blue{
	background-color: #00A5E1; 
	color: #4d4d4d;
	
	padding-left: .2em;
	padding-right: .2em;
	
	margin-left: -0.2em;
}

.highlight-orange{
	background-color: #FF872D; 
	color:#4d4d4d;
	
	padding-left: .2em;
	padding-right: .2em;
	
	margin-left: -0.2em;
}

.highlight-grey{
	background-color: #999999; 
	color:#404040;
	
	padding-left: .2em;
	padding-right: .2em;
	
	margin-left: -0.2em;
}


/*** intro start page ***/
/* ==================== */
#intro{
	/* centering */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
}
	#intro a {
		text-decoration: none;
	}

	
/* ================================================================================ */	
/*								*** main wrapper ***	 							*/
/* ================================================================================ */

	/* content moved to each "media query" */
	
/* ================================================================================ */	
/*								*** main containers *** 							*/
/* ================================================================================ */

#header{/*background-color: green;*/
	width: 100%;
	height: 25%;
}
#container{/*background-color: yellow;*/
	width: 100%;
	height: 75%;
}

#footer-right{
	text-align: right;
	margin-right: .6rem;
	margin-bottom: .3rem;
	/*
	margin: 0 auto;
	width: 800px;
	position: relative;
	
	---------------------
	TEMP positioning now:
	*/
	position: fixed;
	bottom: 0;
	right: 0;
}

#footer-left{ color: grey;
	text-align: left;
	margin-left: .6rem;
	margin-bottom: .3rem;
	/*
	margin: 0 auto;
	width: 800px;
	position: relative;
	
	---------------------
	TEMP positioning now:
	*/
	position: fixed;
	bottom: 0;
	left: 0;
}

#smartphone-message{
	
	/* centering */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
}


/* ================================================================================ */	
/*									*** main DIVs *** 								*/
/* ================================================================================ */

/* ==================================================== */
/* 						LOGO 							*/
/* ==================================================== */
#logo{ 
	height: 100%;
	width: 20%;
	float: left;
	border-right-style: solid;
	border-color: lightgrey;
	border-width: .15rem;
	
}
		
	#logo img{ /*background-color: black;*/
		width: 5em;
		position: absolute;
		top: 13.5%;
		left: 10%;
		
		transform: translate(-50%, -50%);
		
	}

	
/* ==================================================== */	
/* 						TITLE 							*/	
/* ==================================================== */
#title{
	height: 100%;
	width: 79%;
	float: right;
	/*font-size: 130%;*/
	
}
	#title-inside{ 
		padding-top: .5rem;
		padding-left: 1.5rem;
		
	}
	
	
	#title h1{ 
		color: white;
		font-family: 'Kelly Slab', sans-serif;
		font-weight:normal;
		font-size: 225%;
		margin-top: .75em;
		margin-bottom: 0;
	}
	
	#title h3 {
		font-size: 125%;
		font-weight:normal;
		color: #FF872D;
		margin: 0;
	}
	

/* ==================================================== */	
/* 						SIDEBAR 						*/
/* ==================================================== */
#sidebar{
	height: 100%;
	width: 20%;
	float: left;
	border-right-style: solid;
	border-color: lightgrey;
	border-width: .15rem;
}
	#sidebar-inside{
		padding-top: .35rem;
		padding-right: 1.5rem;
		font-size: 110%;
	}

	#sidebar ul{
		list-style-type: none;
		text-align: right;
	}
	#sidebar li{ /*background-color: orange;*/
		margin-top: .2em;
		margin-bottom: .2em;
		
	}
	
	
	#sidebar li img{
		height: 1em;
		margin-right: -0.15em;
		
	}
	
	/*
	.nav a:link, 
	.nav a:visited, 
	.nav a:active
	*/
	.nav a{
		padding-left: .2em;
		padding-right: .2em;
		
		text-decoration: none;
		color: white;
	}
		
	.nav a:hover, .this-page a:hover{
		background-color: #333333;
	}
	
	.this-page a{
		text-decoration: none;
		color: #FFFF00;
	}
		
	/*
	.this-page a{
		text-decoration: none;
		color: #999999;
		background-color: #333333;
	}
	
	.this-page a:hover{
		color: white;
	}
	*/
	
	.legend i{color: grey;}
	
	
	
	i { 
		color: white;
		margin: 0 .15em 0 .15em;
	}
	
	#fa_icons{ /*background-color: orange;*/
		display: block;
		text-align: center;
		padding-top: .25rem;
	}

	
/* ================================================================================ */	
/*										CONTENT 									*/
/* ================================================================================ */	
#content{ /*background-color: red;*/
	
	position: relative;
	height: 100%;
	width: 79%;
	float: right;
}
	#content-inside{ /*background-color: purple;*/
		
		position: relative;
		padding-top: .5rem;
		padding-left: 1.5rem;
		padding-right: 2.5rem;
		
		height: 94%;
		overflow: auto;
	}
	
	#content-inside a{
		text-decoration: none;
		color: white;
	}
	
	#content-inside a:hover{
		background-color: #333333;
	
	}
	
	#content-inside li{
		margin-bottom: .15em;
	}
	
	
	#content-inside hr{
		margin-left: 0;
		margin-right: -1rem;
		border-color: #737373;
	}
	
	#description{
		color: #999999;
		
	}
	

/* ================================================================================ */	
/*									INDIVIDUAL PAGES 								*/
/* ================================================================================ */	


/* 						>>	home page 									*/
/* ------------------------------------------------------------ */
#content-hello{ /*background-color: orange;*/
	width: 90%;
	
	position: relative;
	top: 5%;
	left: 5%;
	
}




/* 						>>	me 									*/
/* ------------------------------------------------------------ */



/* 						>>	skills page 						*/
/* ------------------------------------------------------------ */

#skills ul {
	color: grey;
	margin-top: 0;
}

#skills h3{
	margin-bottom: .5em;
}


/* education page */
#edu-content{
	padding-left: 2rem;
}

#edu-content h5{
	padding-left: 1em;
	margin-top: -1em;
	font-weight: normal;
	color: #999999;
}



/* 						>>	experience							*/
/* ------------------------------------------------------------ */

#exp-content{
	font-size: 85%;
}
	/*** TABLE content ***/
	/*
	#exp-content table{
		width: 100%;
	}

	#exp-content th{
		font-weight: normal;
		text-align: left;
		color: #999999;
	}
	*/
	
	#exp-content h3{ /*background-color: red;*/
		margin-top: .5em;
		margin-bottom: 0;
	}

	
	
/* 						>>	references 							*/
/* ------------------------------------------------------------ */

#ref-highlight a:hover {
	background-color: #333333;
	color: white;
}

#ref-highlight a{
	color: #404040;
	background-color: grey;
	margin-left: -0.2em;
	padding-left: .2em;
	padding-right: .2em;
}
#ref-highlight{ 
	margin-top: -0.75em;
	margin-bottom: 1.5em;
}



/* 						>>	projects 							*/
/* ------------------------------------------------------------ */

	/** vertical layout **/
	#project-box{ background-color: #595959;
		position: relative;
		height: auto;
		width: 95.5%;
				
		border: .15em solid #595959;
		padding: 0 1em 1em 1em;
		margin-bottom: .5em;
	}
	
		.screenshot{ 
			box-shadow: 0 0 .5em black;
			width: 40%;
			float: left;
			margin-right: 1em;
		}
		
		#project-box li{
			text-decoration: underline;
		}
		
		
		#project-box ol{
			list-style-type: decimal-leading-zero;
			color: #999999;
		}
		
		#project-box ol > h3{
			margin-bottom: 0;
		}
		
		
		#project-box ul{
			color: #999999;
			margin-top: 0;
		}
		
		#project-box ul > li{
			text-decoration: none;
		}
		
		#project-box h4{
			margin-bottom: 0;
			font-size:105%;
		}
		
		
		
		
	
	
	/*
		#project-title{ background-color: brown;
			width: 100%;
		}
		
		#project-header{ background-color: green;
			position: relative;
			width: 100%;
			height: 50%;
		}
	
			#project-screenshot{ background-color: purple;
				width: 40%;
				height: 50%;
				float: left;
				
			}
			
			#project-brief{ background-color: darkblue;
				width: 55%;
				height: 50%;
				float: right;
				
				margin-left: 
			}
			
		#project-description{ background-color: red;
			width: 100%;
			margin-top: 1em;
			margin-bottom: 1em;
			
		}
	*/
	
	/** END: vertical layout **/

	
	/** horizontal layout **/
	/*
	#content-projects-wrapper{ background-color: darkblue;
			
			padding-top: .5rem;
			padding-left: 1.5rem;
			padding-right: 2.5rem;
			
			height: 94%;
					
			
			overflow-x: scroll;
			overflow-y: hidden;
			
			
		}
		
		#content-projects{
			width: 580%;
			height: 100%;
		}

		.project-box{ background-color: purple;
			margin-top: .5em;
			margin-right: 1em;
			position: relative;
			
			height: 82%;
			width: 12.45%;
			float: left;
			border: white 1px solid;
			padding: 1em;
		}
	*/
	/** END: horizontal layout **/



	
/* 						>>	hobby 								*/
/* ------------------------------------------------------------ */
	
#hobby-content li{
	color: grey;
}
	
#hobby-content h3{
	width: 102%;
	background-color: #404040;
	
	padding-left: .2em;
	padding-right: .2em;
	
	margin-left: -0.2em;
	margin-bottom: .2em;
}

#hobby-content ul{
	margin-top: 0;
	padding-left: 2em;
}

	
/* 						>>	faq 								*/
/* ------------------------------------------------------------ */

#faq-content td:nth-child(1){ /*background-color: red;*/
	
	width: 20%;
	vertical-align: top;
	text-align: right;
}
#faq-content td:nth-child(2){ /*background-color: orange;*/
	width: 40%;
}



/* 						>>	bio 								*/
/* ------------------------------------------------------------ */



/* 						>>	about website page 					*/
/* ------------------------------------------------------------ */

#about-website ul{
	color: grey;
	margin-top: 0;
}

#about-website h3 {
	margin-bottom: .5em;
	color: #999999;
}



/* 						>> temp - under construction pages 		*/
/* ------------------------------------------------------------ */

#under-construction-wrapper{ /*background-color: darkblue;*/
	position: relative;
	width: 100%;
	height: 100%;
	
}
#under-construction{ /*background-color: red;*/
	
	border: solid .1em grey;
	padding: 1em;
	
	/* centering */
	position: absolute;
	top: 47%;
	left: 47%;
	transform: translate(-50%, -50%);
}