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

/*** global rules ***/
/* ie7 hack */
html{
	overflow-x: hidden;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	line-height: 1.45;
	width: 100%;
	font-size: 1em;
}

/* headings */
h1, h2, h3, h4 {
	padding: 2px;
	font-weight: normal;
}

h1 {
	margin: 6px auto 0px auto;
	font-size: 2.6179em;
	color: #002533;
	background-color: #bce0ee;
	max-width: 1326px;
	border-bottom: 4px #002533 solid; 
}

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

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

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

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

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

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

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

/* pseudo classes */
a {
	font-weight: 500;	
}

a:link{
	color: #015575;		
}

a:visited{
	color: #646464;
}

a:hover{
	color: #86b200;
}

a:active{
	color: #ff6d6d;
}

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

/* lists */
ul, ul li{
	display: inline-block;
	/* ie7 hack */
	zoom: 1;
    *display: inline;
	*float: left;
}


ol li{
	display: list-item;
}

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

/* for all short quotations */
figure.quote{
	font-size: 1em;
	margin: 10px 0px 10px 50px;
	padding-left: 15px;
	border-left: 4px solid #3b4e00;
	letter-spacing: 0.3px;
	background-color: #F6FDDD;
	color: #015575;
	width: 80%;
}
  
	  /* open quote symbol */
	  figure.quote::before{
		  position: absolute;
		  content: url(../icons/open-quote.png);
	  }
	  
/* when not clicked it needs margin */	  
details{
	margin-bottom: 2.369em;
}
/*** global rules ends ***/



/*** global rules for specific purposes starts ***/
/* external links container */
aside{
	margin: 2em 0em 2em 1.5em;
	clear: both;
	padding: 1em;
}

	/* external links label */
	aside > p {
		font-size: 1.272em;
		font-weight: 600;
		margin-bottom: 5px;
	}
	
	/* external link items */
	aside li {
		display: list-item;
		margin-left: 50px;
		padding-bottom: 1em;
	} 

/* blockquote for all stories */
blockquote {
	margin-top: 10px;
	margin-left: 50px;
	padding: 20px 0px 5px 15px;
	border-left: 4px solid #3b4e00;
	letter-spacing: 0.3px;
	background-color: #F6FDDD;
	display: block;
}
	
	/* 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: #c8c8c8;
}

/** 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;
	padding: 1px;
}
	
  /* logo and flag container */
  header > div {
	  overflow: auto;
  }

	  header div:nth-of-type(2),	  
	  header div:last-of-type{
		  width: 86%;
	  }

	  /* 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;
	  }  
	  
	/* gri fare logo */
	header img:first-of-type {
		float: left;
		width: 400px;
		height: auto;
	}
	
	/* removes svg files */
	img[src$=".svg"] {
	  display: none;
	}
	  
	/* flags */
	figure#frFlagContainer img,
	header figure:last-of-type img{		
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 2px;
	  width: 5%;
	}
		
	/* fr flag */	  
	figure#frFlagContainer img{
	  right: 5.5%;
   }		
	  
	/* language texts */
	figure#frFlagContainer figcaption,
	header figure:last-of-type figcaption{
	  position: absolute;
	  clear: both;
	  margin-top: -2.2%;
	  /* viewport width */
	  font-size: 0.8vw;
	  right: 3px;
	}
	
	/* fr language text */		
	figure#frFlagContainer figcaption{	
	  right: 5.6%;
   }
	
	/* masthead and search container */
	header div:nth-of-type(2){
		position: relative;
		margin: 1em auto -0.8em auto;
		color: rgb(150,150,150);
		font-size: 1.23vw;
	}
		
		/* masthead */
		header div:nth-of-type(2) span{
			float: left;
			left: 1px;
		}
			  
		/* search */
		header div:nth-of-type(2) form{
			float: right;
			right: 1px;
			margin-top: -4px;	
		}
		
		  /* search text */
		  header form input{
			  font-size: 0.8vw;
		  }
		  
	/* menu container */
	header div:nth-of-type(3){
		position: relative;
		margin: 1.4em auto 4px auto;
		background-color: rgb(250,250,250);
		height: 28px;
		padding-top: 3px;
		overflow: hidden;
	}
	
		/* main navigation */
		nav{
			float: left;
		}
		
		/* list items of nav */
		nav li{
			margin-right: 20px;
		}
		
		/* stops underlining of links */
		nav a{
			font-weight: bold;
			text-decoration: none;	
		}
		
		/* dynamically inserted class */
		nav li.mdash:before{
			position: absolute;
			/* HTML — */
			content: '\2014';
			margin-left: -4px;
			margin-top: -54px;		
			-webkit-margin-before: -53px;
			font-size: 66px;
			color: #bb0000;	
		}
		
		/* underlines hovered menu items */
		nav li:hover{
			border-bottom: solid #3b4e00;
			border-bottom-width: 5px;
		}

/* banner containers */
section h1 + div{
	position: relative;
	margin: auto;
	overflow: hidden;
	max-width: 1330px;
	height: auto;
	padding: 0;	
	border-radius: 2px;
	box-shadow: 0px 10px 45px -12px #646464;
}

/* content containers */
body > section{
	width: 86%; 
	margin: 0 auto 0 auto;	
	padding-bottom: 30px;
}

/* indented text inside intro paragraphs */
section > section:first-of-type div {
	margin-left: 50px;
	margin-right: 50px;
}

/* footer */
footer{
	position: relative;
	font-size: 0.7862em;
	text-align: center;	
}
	
	/* 2 separate ul */
	footer ul{
		font-size: 0.7862em;	
	} 
	
	/* creative commons */
	footer ul:first-of-type li:nth-of-type(3){
		display: none;
	} 
	
	/* all links */
	footer li{
		margin-right: 0.6em;
	}

/* image enlarger onmouseover */
span#preview{
	position: absolute;
	background-color: #ffffff;
	padding: 0.5em;
	display: none;
	color: #002533;
	text-align: center;
}
/** common parts of the pages end **/



/*** PAGE-SPECIFIC CODES ***/
/** INDEX PAGE **/
/* banner container */
section#index h1 + div {
	height: 400px;
}	
		  
/* Bodrum caption */
section#index > p {
		position: absolute;
		margin-top: -26px;
		text-align: center;
		width: 100%;
		padding: 1px;
		color: #fff;
}

	/* Bodrum copyright */
	section#index h1 + div figcaption{
		position: relative;
		text-align: left;
		top: -5em;
		/* viewport width */
		font-size: 0.8vw;
		right: -49%;
		  -webkit-transform: rotate(90deg);
		  -moz-transform: rotate(90deg);
		  -o-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
		transform: rotate(90deg);
		padding: 4px;
		color: #fff;
	}

/* Paris container */
section#index section:first-of-type div {
	position: relative;
	margin: auto;
	overflow: hidden;
	max-width: 1330px;
	height: auto;
	padding: 0;	
	border-radius: 2px;
	box-shadow: 0px 10px 45px -12px #646464;
}
	
	/* Paris copyright */
	section#index section:first-of-type div figcaption{
		position: relative;
		text-align: left;
		top: 7.6em;
		/* viewport width */
		font-size: 0.8vw;
		right: -49%;
		  -webkit-transform: rotate(90deg);
		  -moz-transform: rotate(90deg);
		  -o-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
		transform: rotate(90deg);
		padding: 4px;
		color: #fff;
	}	
	
	/* figure inside Paris container */
	section#index section:first-of-type div figure {
		max-width: 1330px;	
		height: auto;
		margin: 0px auto -32px auto;
	}
	
	/* Paris caption */
	section#index section:first-of-type > p:nth-of-type(2) {
			position: absolute;
			margin-top: -26px;
			text-align: center;
			width: 100%;
			padding: 1px;
			color: #000;
	}	
	
	/* Paris downnlaod */
	section#index section:first-of-type > p:nth-of-type(3) {
			margin-top: 20px;
	}	

/* screenshots */
section#index section:nth-of-type(3) figure{
	float: left;
	width: 30%;
	font-size: 0.7862em;
	text-align: center;
} 
/** INDEX PAGE ends **/



/** PHOTOGRAPHY PAGE begins **/
/* Belgrade Woods container inside a div to enable responsive design */
section#photography h1 + div > figure {
	max-width: 1330px;	
	height: auto;
	margin: 0 auto;	
}
	
	/* Belgrade Woods images */
	section#photography h1 + div > figure figure:first-child{
		position: absolute;
	}
	
	/* Belgrade Woods Winter */
	section#photography h1 + div > figure figure:last-child{
		opacity: 0;
	}
	
	/* Belgrade Woods Spring caption */
	section#photography h1 + div > figure figure:first-child figcaption{
		padding: 1px;
		margin-top: -32px;
		color: #fff;
	}
	
	/* Belgrade Woods Winter caption */
	section#photography h1 + div > figure figure:last-child figcaption{
		padding: 1px;
		margin-top: -32px;
		color: #000;
	}

/* thumbnails to galleries*/
section#photography section section figure {
	margin-bottom: 3em;
	font-size: 1.272em;
} 
	
	/* thumbnails to galleries 2-column */
	section#photography section section figure:nth-child(odd) {
		float: left;
		clear: left;
		width: 45%;	
	}
	
	/* captions of thumbnails to galleries */
	section#photography section section figcaption {
		text-align: left;
	} 
/** PHOTOGRAPHY PAGE ends **/



/** LITERATURE PAGE begins **/
/* figure inside banner container */
section#literature h1 + div > figure {
	max-width: 1330px;	
	height: auto;
	margin: 0px auto -6px auto;	
}
	/* Tahsin Bey caption */
	section#literature h1 + div > figure figcaption{
		position: absolute;
		text-align: center;
		width: 100%;
		padding: 1px;
		margin-top: -28px;
		color: #000;
		background-color: #ffffff;
	}

/* Murat Mentes quote */
section#literature .quote blockquote{
	border: none;
	background-color: transparent;
}
	
/* other language content */
section#literature section + section{
	/* makes the other language span across the screen */
	display: inline;
}

/* hides all literature work */
section#literature article,
/* hides other language content */
section#literature > section + section > div{
	display: none;
}

/* other language warning */
section#literature #reminder{
	background-color: #ffc7c7;
	margin: 1em auto 1em auto;
}

/* p buttons that show and hide paragraphs */
.show_article, .hide_article{
	cursor: pointer;
	border-radius: 2px;
	  box-shadow: 0px 8px 20px -8px #646464;
    padding-left:  1em; 
	margin: 1em auto 1em auto;
}
/* colours of p buttons */
	.hide_article{
	background-color: #ffc7c7;
	}
	.show_article{
	background-color: #bce0ee;
	}

/* button that toggles other language content */	
section#literature button{
	position: relative;
	width: 50%;
	margin-left: 25%;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;	
}

/* classes borrowed from the 2012 design */
/* tr novels */
	/* book covers */
	  img.img_novel {
		  margin-left: 50px;
	  }
	  
	/* back covers' containers */	  
	  div.div_novel {
		  position: relative;
		  float: left;
		  padding-left: 270px;
		  padding-right: 10px;
		  margin-top: -345px;
	  }
	  
	  p.p_section_int{
		  font-size: 1.272em;
	  }
	  
	/* who said what? containers */		  
	  div#quote_c, 
	  div#quote_tbe,
	  div#quote_ck {
		  position: relative;
		  padding: 10px;	  
	  }	  
	  /* who said what? containers */	
		div#quote_c{
			background-color: #f2f8fd;
		}
		div#quote_tbe{
			background-color: #f4fbf4;
		}
		div#quote_ck {
			background-color: #fff9f9;
		}	  	  
	
	/* overwrites the general blockquote background colour */
	  div#quote_c blockquote, 
	  div#quote_tbe blockquote,
	  div#quote_ck blockquote{
		  background-color: inherit;
	  }
/** LITERATURE PAGE ends **/



/** WEB DEVELOPMENT PAGE begins **/
		
/* fixed local nav container*/
		body nav#page_index {
			bottom: 0;
			top: auto;
			left: auto;
			display: block;
			width: 100%;
			text-align: center;
			z-index: 10;
			background-color: #effdc5;
		}
		
		/* fixed local nav items */
		body nav#page_index ul li{
			display: inline;
			list-style-type: none;
			margin-bottom: 5px;
			margin-right: 10px;
				
		}
			  
	  /* form containers */
	  section#web div.form_wrapper {
		  width: 98%;
	  }			

/* fixed local nav container */
nav#page_index {
	position: fixed;
	left: 0;
	bottom: 60px;
	background-color: #F6FDDD;
	padding: 2px;
	font-size: 0.7862em;
	/* initially hidden */
	display: none;	
}
	
	/* fixed local nav items */
	nav#page_index ul li{
		display: list-item;
		list-style-type: none;
		margin-bottom: 5px;
		margin-right: 0px;
	}
	
	/* go to top arrow to appear even later */
	nav#page_index li:first-of-type{
		display: none;
	}
	
	/* prevents the first li of local nav from creating extra margin */
	nav#page_index li:hover{
		margin-bottom: 0px;
	}
	
/* banner container for mock DOS show */
section#web h1 + div {
	height: 480px;
	background-color: #000;
	color: #fff;
	/* fake DOS font */
	font-family: 'Terminus';
	text-align: left;
	font-size: 0.85em;
}

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

	/* mock DOS show action part */
	section#web h1 + div > figure article p,
	section#web h1 + div > figure figcaption{
		display: none;
	}
	
	/* the JOKE notice */
	section#web h1 + div + p{
		clear: both;
		text-align: center;
	}

/* names of inventors */
section#web h3 + p{
	margin-top: 1em;
	font-size: 1.272em;
} 

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

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

/* wide images */
section#web 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 45px -12px #646464;
} 

/* lists */
section#web section section ol li{
	margin-bottom: 1em;
} 

/*suckerfish demo*/
		div#sucker_fish{
			width: 580px;
	    	margin-bottom: 130px;			
		}

			#suckerfishnav {
					background:#9C1F1B;
					cursor: pointer; 
					}
				#suckerfishnav, #suckerfishnav ul {
					float:left;
					list-style:none;
					line-height:40px;
					padding:0;
					border:1px solid #aaa;
					margin:0;
					width:100%;
					}
				#suckerfishnav a {
					display:block;
					color:#eee;
					text-decoration:none;
					padding: 0px 10px;
					}
				#suckerfishnav li {
					z-index:999;
					position: relative;
					float:left;
					padding:0;
					font-size: 0.7862em;					
					}
				#suckerfishnav ul {
					position:absolute;
					left:-999em;
					height:auto;
					width:101px;
					font-weight:normal;
					margin:0;
					line-height:1;
					border:0;
					border-top:1px solid #666666;
					}
				#suckerfishnav li li {
					width: 99px;
					border-bottom:1px solid #666666;
					border-left:1px solid #666666;
					border-right:1px solid #666666;
					font-weight:bold;
					}
				#suckerfishnav li li a {
					padding:4px 4px;
					width: 86px;
					color:#DA0909;
					}
				#suckerfishnav li ul ul {
					margin:-20px 0 0 100px;
					}
				#suckerfishnav li li:hover {
					background:#9C1F1B;
					}
				#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
					color:#fff;
					}
				#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
					color:#fff;
					}
				#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
					color:#DA0909;
					}
				#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
					left:-999em;
					}
				#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
					left:auto;
					background:#222;
					}
				#suckerfishnav li:hover, #suckerfishnav li.sfhover {
					background:#DA0909;
					/* gradient background */
					background: -ms-linear-gradient(top, #9C1F1B 8%, #DA0909 82%); 
					background: -webkit-gradient(linear, left top, left bottom, from(#9C1F1B), to(#DA0909)); 
					background: -moz-linear-gradient(top, #9C1F1B, #DA0909); 
					background: -o-linear-gradient(#9C1F1B, #DA0909); 
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9C1F1B', endColorstr='#DA0909'); 
					zoom: 1;
					filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#9C1F1B', endColorstr='#DA0909'); /* IE6 & IE7 */ 
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#9C1F1B', endColorstr='#DA0909')"; /* IE8 */ 
				}
		/*suckerfish demo ends*/
/* form containers */
section#web div.form_wrapper {
	max-width: 1310px;
	margin: 0 auto 0 auto;
	padding: 10px;
	background-color: #c8c8c8;
	line-height: 1.8em;
		box-shadow: 0px 0px 41px -8px #646464;	
}

	/* HTML5 form */
	section#web #html5_form fieldset label{
		padding: 0;
		width: 30px;
	}
	
	/* HTML5 form radios */
	section#web #html5_form label {
		width: 180px;
		display: inline-block;
		zoom: 1;
		*display: inline;			
	}
	
	/* HTML5 form success notice */
	section#web #html5_form p {
		color: #520000;
	}	
	
	/* emailer form labels and checkboxes */
	section#web #emailer table{
		margin-left: 1em;
	}
	
	/* emailer form checkboxes */
	section#web #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 45px -12px #646464;	
	}	  
		  /* red warnings */
		  #send_email div{
			  color: #bb0000;
		  }
		  /* green success */
		  #send_email p{
			  color: #3b4e00;
		  }


/** angular js  **/
/* knows user-touched fields */
/* untouched */
section#web .ng-pristine {
	background-color: #c8c8c8;
}

/* touched */
section#web .ng-dirty {
	background-color: #bce0ee;
	font-size: 0.7862em;	
}

/* input field */
section#web p#angular-js {
	margin-left: -50px;
}

/* output field rotated */
section#web p#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;
}

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

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

/** angular js  ends **/


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

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

	/* Instructions p */
	section#web div#sec + p{
		clear: both;
	}
	

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

section#web #acs ol{
	overflow: hidden;
}
/** WEB DEVELOPMENT PAGE ends **/




/** DRAFTS PAGE begins **/
/* banner container */
section#drafts > div {
  background: -moz-linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(82,0,0,1) 10%, rgba(255,0,0,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(90%, rgba(82,0,0,1)), color-stop(100%, rgba(82,0,0,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(82,0,0,1) 10%, rgba(255,0,0,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(82,0,0,1) 10%, rgba(255,0,0,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(90deg, rgba(82,0,0,1) 0%, rgba(82,0,0,1) 10%, rgba(255,0,0,1) 100%); /* ie10+ */
  background: linear-gradient(0deg, rgba(82,0,0,1) 0%, rgba(82,0,0,1) 10%, rgba(255,0,0,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#520000',GradientType=0 ); /* ie6-9 */
  max-width: 1330px;
  height: 280px;
}
	
	/* banner form */
	section#drafts > div > form{
	float: left;
	left: 0;
	display: block;
	width: 420px;
	text-align: left;
	padding: 10px 0px 0px 10px;
	margin-right: -50px;
	}
	  
	  /* radio buttons */
	  section#drafts > div > form input[type=radio] {
		  border: 1px;
		  width: 4%;
		  height: 0.9em;
		  /* distance between radio buttons */
		  margin-left: 1em;
	  }

/*	banner animal */
	section#drafts > div > figure{
	z-index: 10;
	text-align: center;
	vertical-align: baseline;
	max-width: 350px;
	height: auto;
	}

	/* banner hello */
	section#drafts > div figcaption{
		position: absolute;
		color: #fff;
		text-align: right;
		right: 10px;
		bottom: 10px;
		font-size: 2.6179em;
		background-color: #fff;
	}
	
/* tabs ul */
section#drafts #tabNavigation {
	width: 100%;
	height: auto;
	font-size: 1.272em;
	text-align: center;
	margin: auto;
	box-shadow: 0px 0px 60px -25px #646464;	
}

/* each tab */
section#drafts #tabNavigation li{
	width: 32%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;	
	border-style: solid;
	border-width: 2px;
	border-color: #002533;
	border-bottom: none;
	box-shadow: 0px 10px 45px -12px #646464;	
}

/* dynamically added class for tab li */
section#drafts #tabNavigation li.selected a{
	color: #bb0000;
	text-decoration: none;
	/*  this beautiful code disables click */
	pointer-events: none;	
}
/** DRAFTS PAGE ends **/




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

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

/* our bios container */
section#about section article {
	width: 60%;	
	float: right;
	margin-top: -1.5em; 
}
	
	/* our bios headlines */
	section#about h3 {
		font-size: 1.272em;
	}
	
	section#about section:last-of-type {
		display: inline;
	}


/* a clearfix hack */
section#about section:last-of-type:after {
	 visibility: hidden;
	 display: block;
	 font-size: 0;
	 content: " ";
	 clear: both;
	 height: 30px;
	 }
/** ABOUT PAGE ends **/

/*** end of file ***/