/* CSS Stylesheet for Faguss' Website (ofp-faguss.com) */

body 
{
    background: none repeat scroll 0 0 #555;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 18px;
	margin: 0px;
	overflow-y: scroll;
}

/* Social media icons */
.linkIcons
{
	/*position: fixed;
	right: 5px;
	top: 5px;*/
	padding: 4px;
}

	.linkIcons img
	{
		width: 32px;
		height: 32px;
	}

.main
{
	background-color: #1e1e1e;
	border-left: 5px solid #252525;
	border-right: 5px solid #252525;
	margin: 0 auto;
	/*min-width: 870px;*/
	width: 1080px;
	/*width: 61%;*/
	min-width: 640px;
}





/* UPPER PART OF THE WEBPAGE -------------------------------------------------------------*/

header
{
    background-image: url("img/csst_bg2.gif");
	position: relative;
	height: 100px; 
	border-bottom: 5px solid #252525;
}

	.headerText
	{
		/*padding: 3.5% 3%;*/
		padding: 1.8em 1.5em;
		/*position: relative;
		top: 65%;
		transform: translate(3%, -65%);*/
		/*line-height: 0.4em;*/
	}
	
	.websiteTitle
	{
		font: 30px "Trebuchet MS";
		color: #fff;
	}
	
	.ofpGradient
	{
		background-image: -webkit-gradient(
		linear,
		left top, left bottom,
		from(rgba(231, 177, 177, 1)),		/*#fa5151*/
		to(rgba(255, 0, 14, 1))			/*#8a050c*/
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		
		/*background-image: -moz-linear-gradient(#fa5151, #8a050c);*/
		/*background-clip: text;*/
		/*-moz-background-clip: text;*/
	}

	.tagline
	{
		font: 14px "Trebuchet MS";
		/*color: #666;*/
		color: #929288;
		letter-spacing: 5px;
	}

nav 
{
	margin: 0;
	padding: 0;
	background: #333;
	border-bottom: 5px solid #252525;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

	nav a
	{
		width:200px;
		/*flex-grow: 1;*/ flex: 1 0 21%;
		padding: 5px;
		text-align: center;
		text-decoration: none;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #08B8F9;
		font-weight: bold;
		border-radius: 9px;
		border-left: 1px solid #ffffff0d;
		border-right: 1px solid #ffffff0d;
	
		-webkit-transition: all, 0.35s, ease-in-out 0s;
		-moz-transition: all, 0.35s,  ease-in-out 0s;
		-o-transition: all, 0.35s,  ease-in-out 0s;
		transition: all, 0.35s,  ease-in-out 0s;
	}

	nav a:hover 
	{
		color: #FFFFFF;
		background: #08B8F9;
		/*
		Gradient background to be used when browsers start supporting gradient transition
		background-image: #08b8f9;  Old browsers 
		background-image: -moz-linear-gradient(top, #08b8f9 0%, #0677a0 100%);  FF3.6+ 
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#08b8f9), color-stop(100%,#0677a0));  Chrome,Safari4+ 
		background-image: -webkit-linear-gradient(top, #08b8f9 0%,#0677a0 100%);  Chrome10+,Safari5.1+ 
		background-image: -o-linear-gradient(top, #08b8f9 0%,#0677a0 100%);  Opera 11.10+ 
		background-image: -ms-linear-gradient(top, #08b8f9 0%,#0677a0 100%);  IE10+ 
		background-image: linear-gradient(to bottom, #08b8f9 0%,#0677a0 100%);  W3C 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08b8f9', endColorstr='#0677a0',GradientType=0 );  IE6-9 
		*/
	}

	
	
	
	
	
/* MIDDLE PART OF THE WEBPAGE ------------------------------------------------------------*/

#content
{
	display: flex;
	min-height: 640px;
	justify-content: space-between;
}

/* Field on the left that could hold news */
#sidebar
{
	order: 1;
	border: 2px solid #935050;
	padding: 1em;
	flex-grow: 1;
	
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(left,  #d6d6d6 10%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(10%,#d6d6d6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #d6d6d6 10%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #d6d6d6 10%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #d6d6d6 10%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to right,  #d6d6d6 10%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

	#sidebar p
	{
		margin-top: 4px;
	}
	
	#sidebar h1
	{
		color: #993366;
		font: bold 1em "verdana",helvetica,sans-serif;
		margin: 0 0 0px;
		padding-bottom: 5px;
		/*border-bottom: 1px solid #666A4C;*/
	}

	.localDate
	{
		font: 0.65em georgia,"times new roman",times,serif;
		/*float:right;*/
		color: #000;
		padding-top: 5px;
	}

	.news
	{
		font-family: Geneva, Arial, Helvetica, sans-serif;
		font-size: 0.75em;
		line-height: 1.75em;
		text-align: justify;
	}
	
	.smallLink
	{
		font-size: 0.7em;
		float: right;
	}

/* Field on the right that holds list of items */
#stuff
{
	order: 2;
	min-width: 69%;
	border: 2px solid #935050;
	flex-grow: 1;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffffff 0%, #d6d6d6 90%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(90%,#d6d6d6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ffffff 0%,#d6d6d6 90%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #ffffff 0%,#d6d6d6 90%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #ffffff 0%,#d6d6d6 90%); /* IE10+ */
	background: linear-gradient(to right,  #ffffff 0%,#d6d6d6 90%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6',GradientType=1 ); /* IE6-9 */
}

	/* Category list */
	.categories 
	{
		/*margin: 1em auto 3em auto;
		padding: 0;
		list-style: none;
		background-color: #f2f2f2;*/
	
		padding: 0;
		margin: 0;
		margin-top: 10px;
		margin-bottom: 2px;
		list-style: none;
		display: flex;
		justify-content: center;
		-webkit-flex-wrap: nowrap; /* Safari */
		flex-wrap: nowrap;
	}

	.categories li 
	{
		width: 100%;
		padding: 5px;
		color: white;
		font-weight: bold;
		text-align: center;
		line-height: 2em;
		background-color: rgba(211, 81, 81, 0.6);
		transition: background-color 0.35s ease-in-out 0s;
	}

	.categories li a 
	{
		font-family: verdana,​helvetica,​arial,​sans-serif;
		text-transform: uppercase;

		display: block;
		/*padding: 8px 15px;*/
		text-decoration: none;
		font-weight: bold;
		color: #069;
		color: #ffffff;
	}

	.categories li:hover, .categories .current
	{
		color: #ffffff;
		background-color: rgba(211, 81, 81, 1);
	}
	
	.categoriesBorder
	{
		margin: 0.7em 1em 1em 1em;
		border-bottom: 1px dotted #666A4C;
	}

	/* List of items styling */
	.itemsList
	{
		display: flex;
		flex-flow: row;
		
		font-family: Geneva, Arial, Helvetica, sans-serif;
		color:#333;
		margin: 1.5em 1em;
		font: "Arial";
		font-size: 12px;
		line-height:1.75em;
	}
	
		.itemThumb
		{
			order: 1;
			max-width: 240px;
		}
		
		.itemThumb img
		{
			border: 2px solid #000;
			float: left;
			margin-right: 0.6em;
			width: 60px;
			height: 45px;
		}
	
		.itemTitle
		{
			order: 2;
			flex-grow: 1;
		}
		
		.titleLink
		{
			font-family: "Arial", sans-serif;
			font-size: 1.14em;
			font-weight: bold;
			color: #0000FF;
		}
		
		.largeTitleNoLink
		{
			font-family: "Arial", sans-serif;
			font-size: 2em;
			font-weight: bold;
		}
		
		.largeLinkSection
		{
			margin: 1em 1em;
		}
		
		.filesize
		{
			font-family: Geneva,Arial,Helvetica,sans-serif;
			font-size: 1em;
			font-weight: normal;
			color: #993366;
		}
		
		.filesizesmall
		{
			font: "Times New Roman";
			font-size: 0.75em;
			font-weight: normal;
			color: #993366;
		}
		
		.extraLink
		{
			font-size: 0.84em;
		}
		
		.permalinkIcon
		{
			float: right;
		}
		
		.itemDescription
		{
		}


	
	
	
	
	
/* BOTTOM PART OF THE WEBPAGE ------------------------------------------------------------*/

footer 
{
	background-image: url("img/csst_bg2.gif");
	min-height: 55px;
	padding: 20px 10px;
	border-bottom: 5px solid #252525;
	border-top: 5px solid #252525;
}

	#footerItems
	{
		display: flex;
		justify-content: left;
	}

	#footerItems section
	{
		min-width: 10%;
		/*max-width: 33%;*/
		margin-left: 1em
	}

	.footerItemsTitle
	{
		color: #ffffff;
		/*font-size: 1.3em; */
		font-weight: bold; 
		text-transform: uppercase;
	}

	.footerItemsText
	{
		color: #929288;
		padding-top: 10px;
		padding-left: 15px; 
		line-height: 1.4em;
		font-size: 1em; 
	}





/* MISCELLANOUS STYLES -------------------------------------------------------------------*/

/* camouflage links as default text */
.dummyLink
{
	color: inherit;
	text-decoration: none;
}
.dummyLink:hover {border-bottom:1px dotted; color:inherit;}
.dummyLink:active {color:inherit;}
.dummyLink:visited {color:inherit;}


/* style for text in the "About" page */
#about
{
	padding-top: 10px;
	padding-left: 15px; 
	line-height: 1.5em;
	font-size: 1.2em; 
}