@charset "utf-8";
/* CSS Document */
/*
,---.|             |o      ,---.     o ,---.              
`---.|--- .   .,---|.,---. |  _.,---.. |__.,---.,---.,---.
    ||    |   ||   |||   | |   ||    | |   ,---||    |---'
`---'`---'`---'`---'``---' `---'`    ` `   `---^`    `---'  
 * Author name : Armagan Tekdoner
 * Release date: April 2016
 * Absolute URL: grifare.net/css/default.css
 */

/* this file handles all screens that are larger than 799 pixels
 * medium screens between 800 and 1366 utilise 98% of the screen
 * large screens that are larger than 1366 use 86% of the screen
 * while the largest image size always remains 1330px
 */

/** responsive design starts here **/
/* Large screens */
@media only screen and (min-width: 1367px) {
  /* top nav+search and menu container */
  header div:nth-of-type(2),	  
  header div:nth-of-type(3){
	  width: 86%;
  }
  
  /* content container */
  main{
	  width: 86%;
  }
		  /* dynamically inserted class */
		  .enlarge{
			  font-size: 2vw;	
		  }
}

/* Medium screens */
@media only screen and (min-width: 800px) and (max-width: 1366px) {  
	  /* logo top nav+search and menu  container */
	  header div{
		  position: relative;		  
		  width: 98%;
		  margin-left: auto;
		  margin-right: auto;		  
	  }

	  /* masthead+search container */
	  header div:nth-of-type(2){
		  font-size: 1em;
	  }	  
	  
	  /* content container */
	  main{
		  width: 98%; 
	  }
		
		/* dynamically inserted class */
		.enlarge{
			font-size: 2em;	
		}
  
  /*** PAGE-SPECIFIC CODES ***/
				
  /* form container divs */
  .form_wrapper {
	  width: 98%;
  }		
  
}
/* Medium screens ends */
/** responsive design rules end **/

/* ********************************************************* */

/*** global rules ***/
body {
	font-family: Verdana, Geneva, sans-serif;
	color: #002533;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.45;
	width: 99%;
	margin: auto;
	background-color: rgba(220, 220, 220, 0.1);
	/* new and not recognised by all browsers yet */
	text-rendering: optimizeLegibility;
}

/* headings */
h1, h2, h3, h4 {
	padding: 2px;
}

/* size ratios are from a scheme called golden ditonic scale (r = φ, n = 2) */
h1 {
	margin: 6px auto 0px auto;
	margin: auto;
	font-size: 2.6179em;
	color: #002533;
	background-color: rgba(188,224,238,0.4);
	border-bottom: 4px #002533 solid;
	margin-bottom: 0.5em;	
}

h2 {
	font-size: 2.0581em;
	color: #bce0ee;
	background-color: #002533;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 1.618em;
	font-weight: bold;
	padding: 0 0 .4em 0;
	margin-top: 1em;
	color: #002533;	
}

h4 {
	font-size: 1.272em;
	margin-top: 1em;		
}
/* headings ends */

/* body text */
p {
    margin-bottom: 1.45em;
}

small {
	font-size: 0.7862em;
}
/* body text ends */

main, section{
	position: relative;
	clear: both;
	overflow: hidden;
}

/* all responsive */
figure{
	overflow: visible;
}
	
	img{
		max-width: 100%;
		height: auto;
		overflow: auto;
	}  
	
	figcaption{
		text-align: center;
	}


/* pseudo classes */
a {
	font-weight: normal;
	display: inline-block;
}

a:link{
	color: #015575;		
}

a:visited{
	color: #646464;
}

main a:hover,
footer a:hover{
	background-color: rgba(134,178,0, 0.1);
	outline: 2px solid #3b4e00;
}

/* excludes images and suckerfish menu */
figure > a:hover,
#suckerfishnav a:hover{
	background-color: transparent;
	outline: none;
}

a:active{
	color: #ff6d6d;
}

/* skip to main content link not shown */
input[value="Skip to main content"]{
	position: absolute;
	border: none;
	background: none;
	font-weight: bold;
	color: #002533;
	text-decoration: underline;
	margin-top: -1000px;
	width: 20%;
	margin-left: 40%;
}

/* skip to main content link shown */
input[value="Skip to main content"]:focus{
	margin-top: 5px;
}

/* tabbing */
:focus{
	outline: 2px solid  #bb0000;
}


/* when the user selects text */
::selection{
	color: #ffffff;
	background-color: #bb0000;
}

/* lists */
ul, ul li{
	display: inline-block;	
}

ol li{
	display: list-item;
	margin-bottom: 0.7em;	
}

/* abbreviations spelt-out */
abbr[title] {
     border-bottom: dotted 1px;
	 border-bottom-color: rgba(150,150,150,0.8);
}

/* for all short quotations figure */
.quote{
	margin: 10px 0px 10px 30px;
	padding-left: 15px;
	border-left: 4px solid #3b4e00;
	background-color: rgba(239,253,197,0.3);
	color: #015575;
	width: 85%;
}
  
	  /* open quote symbol figure */
	  .quote::before{
		  position: absolute;
/*		  content: url(icons/open-quote.png);*/
		  content: "\201C"; /*Unicode for Left Double Quote*/
		  /*Font*/
		  font-family: Georgia, serif;
		  font-size: 6em;
		  font-weight: bold;
		  color: rgb(200,200,200);
		  margin-top: 4px;
	  }
		
		.quote blockquote::after{
		  /*Reset to make sure*/
		  content: "";
		}		  

	  
/* when not clicked it needs margin */	  
details{
	margin-bottom: 2.369em;
}

/* all iframes with shadow */
iframe{
    border-radius: 2px;
    box-shadow: 0px 8px 30px -8px rgba(0,0,0,0.7);
}
/*** global rules ends ***/


/*** global rules for specific purposes starts ***/
/* blockquote for all stories */
blockquote {
	margin-top: 10px;
	margin-left: 50px;
	padding: 12px 0px 5px 15px;
}
	
	/* first letter of all quotations */
	blockquote p:first-of-type::first-letter{
		font-size: 2.6179em;
		color: #3b4e00;
	}
	
	/* italic blockquote: what a character says */
	blockquote i,
	blockquote em{
		display: block;
		margin-left: 70px;
		margin-right: 40px;
	}

/* all forms */
input{
	font-size: 0.7862em;	
}

/* code snippets */
code{
	font-family: "Courier New", Courier, monospace;
	background-color: rgba(200,200,200,0.3);
}

/** icons **/	
/* adds icon to external links */
a[itemprop="url"]::after{
	content: url(../icons/external-link.png);
	padding-left: 0.25em;
}

/* adds icon to download links */
a[download]::after{
	content: url(../icons/download.png);
	padding-left: 0.25em;
}
	
/* adds icon to pdf links */
a[href$=".pdf"]::after{
	content: url(../icons/pdficon_small.png);
	padding-left: 0.25em;
}

/* adds icon to doc links */
a[href$=".doc"]::after{
	content: url(../icons/doc-icon.png);
	padding-left: 0.25em;
}

/* adds icon to xls links */
a[href$=".xls"]::after{
	content: url(../icons/xls-icon.png);
	padding-left: 0.25em;
}

/* adds icon to rss links */
a[href$="rss.xml"]::after{
	content: url(../icons/rss-icon.png);
	padding-left: 0.25em;
}

/* lowering icons by 2 pixels */
img[src$="infobox-icon.png"],
img[src$="warning-red.png"] {
	margin-bottom: -2px;
}

/** icons ends **/		
/*** global rules for specific purposes ends ***/


/** common parts of the pages starts **/
/** header part **/
/* container */
header{
	position: relative;
	margin: 2px;
}  

	/* logo and masthead container */
	header > div {
		overflow: auto;
		padding: 4px;
	}

	/* gri fare logo */
	header figure {
		float: left;
		width: 42.4%;
	}
		
	/* masthead -- epic emigration to Cyberland */
	header figure figcaption{
		float: left;
		margin-left: 6.2em;
		margin-top: -0.5em;
		font-size: 1.5vw;
		color: #646464;
	}
	
	/* search form */
	header form{
		float: right;
		padding: 4px;
	}
	
		/* search label not displayed */
		header label{
			position: absolute;
			margin-top: -9999px;
		}
		header form input{
			font-size: 1em;
		}
	
  /* main menu container */
  header div:nth-of-type(2){
	  position: relative;
	  margin: 1em auto -0.5em auto;
	  color: #002533;
	  font-size: 1.618em;
	  padding-left: 2px;
  }
	header div:nth-of-type(2) a:first-of-type{
		margin-right: 1em;
	}
		
	header div:nth-of-type(2) a:hover{
		background-color: rgba(134,178,0, 0.1);
		outline: 2px solid #3b4e00;
	}
		
  /* menu container */
  header div:nth-of-type(3){
	  position: relative;
	  margin: 0 auto 4px auto;
	  border-radius: 2px;
	  box-shadow: 0px 8px 30px -8px rgba(0,0,0,0.7);
	  height: 340px;
	  padding: 2px 2px 8px 2px;
	  overflow: visible;
  }
  
	  /* side navigation */
	  nav{
		  float: left;
			font-size: 1em;
		  margin-left: 1em;
		  margin-bottom: 1em;
	  }
	  
	  /* list items of nav */
	  nav li{
		  display: list-item;
		  list-style: none;
		  border-bottom: solid transparent;
		  border-bottom-width: 4px;
		  margin-bottom: 1px;			
	  }
	  
	  nav a{
		  /* stops underlining of links */
		  text-decoration: none;
		  /* increases target size */		  
		  display: inline-block;
		  min-width: 48px;
	  }
	  
	  /* dynamically inserted span */
	   .enlarge{	
		  position: absolute;
		  margin-left: 0.5em;
		  padding-left: 0.5em;
		  padding-right: 1em;
		  bottom: 0;
		  height: 100%;
		  color: #bb0000;
		  border-left: solid 4px #3b4e00;
	  }

		/* img inside the dynamically inserted class */
		header div:nth-of-type(3) .enlarge img{
			margin-top: 0.3em;
			max-height: 256px;
			width: auto;
		}

	  
	  /* underlines hovered menu items */
	  nav li:hover{
		  border-bottom-color: #3b4e00;
	  }

/* p over first h2 */
.instruction{
	margin-bottom: 0.45em;
	line-height: 2em;
	margin-top: 0em;
}
  
  .instruction::first-letter{
	  font-size: 2.6179em;
	  color: #002533;
  }

/* banner containers */
h1 + div{
	position: relative;
	margin: auto;
	overflow: hidden;
	max-width: 1330px;
	height: auto;
	padding: 0;	
	border-radius: 2px;
	box-shadow: 0px 10px 30px -12px rgba(0,0,0,0.7);
}

/* local navigation (table of contents nav) */
#toc{
	border-radius: 2px;
	box-shadow: 0px 8px 30px -8px rgba(0,0,0,0.7);
	padding: 1em;
	margin-bottom: 1em;
	float: none;
	width: 300px;
}
  
  /* "table of contents" text */
  #toc p{
	  font-weight: bold;
  }
  
  /* local navigation links */
  #toc li{
	  display: list-item;
	  list-style-position: inside;
	  cursor: pointer;
  }
  
  /* list items bullets */
  #toc li:before{
	  content: "• ";
	  color: #bb0000;
  }

/* content containers */
main{
	margin: 0 auto 0 auto;	
	padding-bottom: 2em;
}

main section{
	padding: 0 4px;
}

/* a clearfix hack after the last section */
main section:last-of-type::after {
	 visibility: hidden;
	 display: block;
	 font-size: 0;
	 content: " ";
	 clear: both;
	 height: 20px;
}

/* footer */
footer{
	position: relative;
	background-color: rgba(200,200,200,0.3);
	height: 60px;
	padding: 2px;
	font-size: 1em;
	border-radius: 2px;
	box-shadow: 0px -8px 30px -10px rgba(0,0,0,0.7);
	text-align: center;	
}
	
	/* 2 separate ul */
	footer ul{
		padding: 2px 8px 6px 8px;
		display: block;
	}
	
	/* all footer list items */
	footer li{
		padding-right: .4em;
		border-right: 2px #002533 solid;
	}
	/* last footer list item */
	footer li:last-of-type{
		border-right: none;
	}

	/* twitter button appears with a bottom margin */
	footer .twitter-share-button{
		margin-bottom: -0.35em;
	}
	

/* image enlarger span onmouseover */
#preview{
	position: absolute;
	background-color: rgba(255,255,255,0.8);
	padding: 0.5em;
	display: none;
	color: #002533;
	text-align: center;
}

/* dynamically inserted update info small */
#updated{
	color: rgb(50,50,50);
	float: left;
	clear: both;	
}
/** common parts of the pages end **/


/*** PAGE-SPECIFIC CODES ***/

		/* declare web fonts */
		@font-face {
			/* demo font */
			font-family: 'DymaxionScriptRegular';
			src: url('fonts/dymaxion-script-webfont.woff') format('woff');
		}			
		@font-face {			
			/* DOS font */
			font-family: 'Terminus';
			src: url('fonts/Terminus.woff') format('woff');
		}
		
/* Welcome page */
img.black-white {
	filter: grayscale(1);
	-webkit-filter: grayscale(100%);/* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
	/* removes grey scale */
	img.black-white:hover {
		  filter: grayscale(0);
		  -webkit-filter: grayscale(0%);/* Safari 6.0 - 9.0 */
		  filter: grayscale(0%);
	} 

/* h4 sections */
main > section > section > section{
	margin-top: 10px;
}

/* usage of css demo font */		
#dymaxion_font {
	font-size: 3em;
	word-spacing: 5px;
	font-family: 'DymaxionScriptRegular';
	margin: -15px 0px 10px 0px;
	line-height: 80%;
}

/* wide images */
main section section figure{
	position: relative;
	margin: 1em auto 1em auto;
	overflow: hidden;
	max-width: 1330px;
	height: auto;
	padding: 0;	
	border-radius: 2px;
	box-shadow: 0px 10px 30px -12px rgba(0,0,0,0.7);
} 

/*Styling Input Elements*/
input#accented-checkbox{
	accent-color: #bce0ee;
	transform: scale(4);
	margin-left: 2em;
	outline: none;
}
input#accented-checkbox:focus{
	accent-color: #b00;
}
		
/* DOM Selectors section */		
#css section:nth-of-type(2) iframe{
	width: 100%;
	height: 260px;
}


/* CSS pre-processors */
#css section:last-of-type ol{
	list-style-type: lower-alpha;
}
	
	:root {
		/* declare variables */
		--darkred-background-colour: #bb0000;
		--white-font-colour: #fff;
		--width-not-to-exceed: 500px;
		--proportionate-height: calc(var(--width-not-to-exceed) / 2);
		--make-it-an-ellipse: 50%;
		--horizontal-alignment: center;
		--vertical-alignment: middle;
	}
	
	#native_CSS_variables {	
		/* use the declared variables */
		background-color: var(--darkred-background-colour);
                color: var(--white-font-colour);
		width: var(--width-not-to-exceed);
		height: var(--proportionate-height);
		border-radius: var(--make-it-an-ellipse);
		text-align: var(--horizontal-alignment);
		vertical-align: var(--vertical-alignment);
		  /* oldschool css */
		  display: table-cell;
		  padding: 1em;
	}
	
/* form container divs */
.form_wrapper {
	max-width: 1310px;
	margin: 0 auto 0 auto;
	padding: 10px;
	background-color: rgba(200,200,200,0.2);
	line-height: 1.8em;
		box-shadow: 0px 0px 30px -8px rgba(0,0,0,0.7);	
}

	/* HTML5 form */
	#html5_form label:nth-of-type(1),
	#html5_form label:nth-of-type(2){
		padding: 0;
		width: 30px;
	} 
	
	/* HTML5 form radios */
	#html5_form label {
		width: 180px;
		display: inline-block;
	}
	
	/* HTML5 form success notice */
	#html5_form p {
		color: #520000;
	}	
	
	/* emailer form labels and checkboxes */
	#emailer table{
		margin-left: 1em;
	}
	
	/* emailer form checkboxes */
	#emailer table td:nth-child(even) {
		padding-left: 1em;
		padding-top: 2px;
	}
	
	/* send email page (separate file) */
	#send_email{
		width: 800px;
		margin: auto;
		padding: 1em;
		line-height: 1.8em;
		  border-radius: 2px;
			box-shadow: 0px 10px 30px -12px rgba(0,0,0,0.7);	
	}	  
		  /* red warnings */
		  #send_email div{
			  color: #bb0000;
		  }
		  /* green success */
		  #send_email p{
			  color: #3b4e00;
		  }

		
/* banner container section for mock DOS show */
#js #fake_dos {
	height: 480px;
	background-color: #000;
	color: #fff;
	/* fake DOS font */
	font-family: 'Terminus';
	text-align: left;
	font-size: 0.85em;
}

	/* mock DOS show paragraphs */
	#js #fake_dos > figure p{
		margin: 0;
	}
	/* mock DOS show figcaption */
	#js #fake_dos > figure figcaption{	
		margin: 0;
		text-align: left;
	}
	/* mock DOS show cursors */
	#js #fake_dos > figure span{
		font-size: 1.5em;
		font-weight: bold;
	}

	/* mock DOS show action part */
	#js #fake_dos > figure article p,
	#js #fake_dos > figure figcaption{
		display: none;
	}


/** Bates Motel rotating image **/
#js #motelBates {
	height: 700px;
}
#js #motelBates small {
	position: absolute;
	margin-top: 50%;
	right: 4px;
	text-align: right;
	color: #fff;
}

#js #motelBates img { 
	position: absolute; 
	left: 0; 
	top: 0; 
}


/** iframe **/
#js iframe {
	width: 100%;
	height: 410px;
}


/** angular js  **/
/* knows user-touched fields */
/* untouched */
.ng-pristine {
	background-color: rgba(200,200,200,0.2);
}

/* touched */
.ng-dirty {
	background-color: rgba(188,224,238,0.4);
	font-size: 0.7862em;	
}


/* output field rotated */
#angular-js > span {
	color: #bb0000;
    display: inline-block;
	/* Safari */
	-webkit-transform: rotate(180deg);
	/* Firefox */
	-moz-transform: rotate(180deg);
	/* IE */
	-ms-transform: rotate(180deg);
	/* Opera */
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	font-weight: bold;
}

/* cell phone section */
#jQueryMobile{
	float: left;
	margin-right: 1em;
	margin-left: 50px;	
}

/* html5 map */
#map1{
	display: none;
}

/* html5 map */
#map1,
/* php map */
#map2{
			position: relative;
			padding-bottom: 55%; 
			height: 0;
			overflow: hidden;
			padding-left: 0;
}

/** angular js  ends **/


/* cheat sheets */
main section:nth-of-type(5) ul {
	margin: 5px 0px 20px 20px;
}
  main section:nth-of-type(5) ul li{
		display: list-item;
		list-style-type: disc;
	}


/** XML ajax **/
/* movie table */
#movieContainer{
	margin: 10px 0px 10px 50px;
}

#movieContainer thead th{
	text-align: left;
	font-weight: bold;
}

/* shows the row on hover */
#movieContainer tr:hover{
	background-color: rgba(188,224,238,0.4);
}

/* every second row, a very slight hint */
#movieContainer tr:nth-of-type(even){
	background-color: rgba(188,224,238,0.1);
}

/* first column */
#movieContainer td:nth-of-type(odd){
	width: 120px;
}
/** XML ajax ends **/

/** WCAG **/
#wcag h2 a:link {
	color: #fff;
}

#wcag h2 a:visited {
	color: #fefefe;
}

#wcag section ul {
	list-style: none;	
}

#wcag ul.tabindex ol li {
	list-style: list-item;
}

#wcag section li {
	display: list-item;
	margin-left: 2em;	
}

#wcag  .tabindex{
	margin-bottom: 1em;
	margin-top: -0.5em;
}

#wcag  .tabindex > li{
	list-style-type: disc;	
}

#wcag li.checkmark:before {
	content: '\002714 ';
	font-size: 2.0581em;
	color: #868200;
	font-weight: bold;
}
#wcag li.cross:before {
	content: '\00274C ';
	font-size: 1.618em;
	color: #bb0000;
}

#wcag img:not(.no-shadow){
	border-radius: 2px;
	box-shadow: 0px 10px 30px -12px rgba(0,0,0,0.7);	
}

#wcag blockquote{
	border-left: 4px solid #002533;
}

/** WCAG ends **/


/** Web Security **/
/* Steganography examples */
#crypt caption{
	text-align: left;
}
#crypt th{
	text-align: left;
	font-weight: bold;
}
	  /* tricks to be tested */
	  #crypt div{
		  margin-left: 2em;
	  }
	  /* each row */	  
	  #crypt tr{
		  border-bottom: 1px solid rgba(200,200,200,0.8);
	  }
	  /* on hover event for rows */		  
	  #crypt tr:hover{
		  background-color: rgba(200,200,200,0.2);
	  }
	  /* fixes alignment issues */		  
	  #crypt td{
			  vertical-align: top;
			  padding: 1em;		
	  }
	  /* space allocated according to content */	  
	  #crypt td:nth-of-type(odd){
		  width: 45%;
		  padding-right: 5em;
	  }
	  /* space allocated according to content */		  
	  #crypt td:nth-of-type(even){
		  width: 55%;
	  }
	  /* instructions */
	  #crypt table li{
		  display: list-item;	
		  list-style-type: decimal;
		  /* keeps the bullet points inside */
		  list-style-position: inside;
	  }
	  /* Steganography example 1 */
	  #zero_pixel {
		  font-size: 0;
		  line-height: 0;
		  height: 5px;
		  margin: -5px 0px -5px 0px;
		  /* fully transparent white */
		  color: rgba(255,255,255,0.0);
	  }
	
/* encryptions form */
#input_enc1, #input_enc2 {
	margin-bottom: 0.5em;
}
	/* encryption results */
	#encrypt{
		display: none;
		position:relative;
		float: left;
		font-size: 1em;
		color: #015575;
		word-wrap: break-word;
		box-shadow: 0px 0px 30px -8px rgba(0,0,0,0.7);
		padding: 0.5em;
		margin-top: 10px;
	}

/* q&a */
#qa li{
	margin-left:2em;
	list-style-type: disc;
	display: list-item;
}

/* seo */
.page-speed{
	position: relative;
    margin: 1.4em auto 1em auto;
    border-radius: 2px;
    box-shadow: 0px 8px 30px -8px rgba(0,0,0,0.7);
    height: 520px;
	background-color: rgba(188,224,238,0.1);
}
	
.page-speed iframe{
	width: 100%;
	height: 100%;
    overflow: hidden;	
}

/* ux */
#ux section li{
	display: list-item;
	margin-bottom: 0.7em;
	list-style-type: disc;
	margin-left: 2em;
}

/* acs */
#acs img{
	float: left;
	clear: none;
	margin: 5px 20px 5px 0;
}

#acs ol{	
	overflow: hidden;
}


/** ABOUT PAGE begins **/
/* all h2 sections */
#about section {
	display: inline-block;
	margin-bottom: 0px;
} 

/* figure inside banner container */
#about h1 + div > figure {
	max-width: 1330px;	
	height: auto;
	margin: 0px auto -22px auto;	
}
	
	/* Banner caption */
	#about h1 + div figcaption{
		position: absolute;
		text-align: center;
		width: 100%;
		padding: 1px;
		margin-top: -45px;
		color: #000;
	}
	
/* Our photos' container */
#about section div{
	float: left;
	margin: 0;
	width: 38%;
	max-width: 600px;	
	height: auto;
	text-align: left;
	font-size: 0.7862em;
}
	
	/* all photos */
	#about img{
		margin-bottom: 1em;
		border-radius: 2px;
		box-shadow: 0px 8px 20px -6px rgba(0,0,0,0.7);
	}

/* our bios container */
#about section article {
	width: 60%;	
	float: right;
	margin-top: -1.5em; 
}
	
	/* our bios headlines */
	#about h3 {
		font-size: 1.272em;
	}
	
	#about section:last-of-type {
		display: inline;
	}
	
	/* display credentials sentence */
	main#about article + section > h3 {
		clear: both;
		padding-top: 2.6179em;
	}
	
	/* credentials button */
		#armagan .show_credential {
		background: none;
		border: none;
		padding: 1px;
		margin-bottom: 10px;
		text-align: left;
	}
	
	/* credentials upon request */
	.show_credential + img {
		display: none;
	}

/* social media container */
#about aside img {
	margin-bottom: 0px;
}	
/** ABOUT PAGE ends **/

/*** end of file ***/