/**
 * W3C Pro
 * design and coding by Divya Manian
 * CSS aggressively edited by fantasai
 */

@import "tables.css";

/* General Typography */

	section, hgroup, aside, article, header, nav, footer {
		display: block;
	}

	.aside, aside,
	.toc {
		font-size: 0.9em;
		line-height: 1.35;
	}

	section, .section {
		margin: 0 2% 3em;
	}

	h1,
	.header > .hgroup > h2,
	header > hgroup > h2 {
		font-size: 1.5em;
		font-weight: normal;
	}

	h1, h2, h3, h4, h5, h6, caption {
		font-family: georgia, serif;
		letter-spacing: 1px;
		line-height: 1;
	}

	h1, h2, h3 {
		text-transform: uppercase;
	}

	p, ul, ol, pre {
		margin: 0 0 1.5em 0;
	}

	dt {
		font-weight: bold;
		margin: 0.4em 0 0.2em; }


/* Basic Stylistic Scheme */

	html {
		font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
		line-height: 1.5;
		min-height: 100%;
		color: #777;
		background: #DBE2E6;
		background:
							-moz-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
							transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							transparent) repeat,
							-moz-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.04) 25%, transparent 25%,
							transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							transparent) repeat,
							-moz-linear-gradient(#025A9A, #fff) repeat-x,
							#fff
							;
		background:
							-o-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
							transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							transparent) repeat,
							-o-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.04) 25%, transparent 25%,
							transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							transparent) repeat,
							-o-linear-gradient(#025A9A, #fff) repeat-x,
							#fff
							;							
		background:
								-webkit-gradient(linear, 0 100%, 100% 0,
								color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent),
								color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)),
								color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent),
								to(transparent)) repeat,
								-webkit-gradient(linear, 0 0, 100% 100%,
								color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent),
								color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)),
								color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent),
								 to(transparent)) repeat,
								 -webkit-gradient(linear,left top,left bottom,color-stop(0, #025A9A),color-stop(1, #fff)) repeat-x;

		 background:
							 -ms-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
							 transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							 hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							 transparent) repeat,
							 -ms-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.04) 25%, transparent 25%,
							 transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							 hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							 transparent) repeat,
							 -ms-linear-gradient(#025A9A, #fff) repeat-x,
							 #fff
							 ;
		 background:
							 linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%,
							 transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							 hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							 transparent) repeat,
							 linear-gradient(-45deg, hsla(300, 0%, 0%, 0.04) 25%, transparent 25%,
							 transparent 50%, hsla(300, 0%, 0%, 0.04) 50%,
							 hsla(300, 0%, 0%, 0.04) 75%, transparent 75%,
							 transparent) repeat,
							 linear-gradient(#025A9A, #fff) repeat-x,
							 #fff
							 ;															  
		background-size: 50% 50%;
	}

	#container {
		max-width: 70em;
		padding: 0;
		margin: 2em auto;
		background: #fff;
		-moz-box-shadow: 0 0 1em #0C3D5F;
		-webkit-box-shadow: 0 0 1em #0c3d5f;
		box-shadow: 0 0 1em #0c3d5f;
	}

  .article, article {
		clear: both;
		margin: 1em 1em 3em;
	}
	/* clearfix */
	.article, article {
		zoom: 1;
	}
	.article:after, article:after {
		content: "\0020";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}

	.footer, footer {
		clear: both;
		background: #eee;
		overflow: hidden; /* contain floats */
		padding: 1.2em 0 0 1.5em;
		font-size: 0.9em;
		line-height: 1.35;
	}
	.footer img, footer img {
		float: left;
		margin: -1.2em 1em 0 0;
	}
	.footer > p, footer > p {
		margin-bottom: 1em;
		text-transform: uppercase;
		font-size: 0.8em;
		line-height: 1.875;
	}

/* Translations */

	#translations {
		max-width: 70em; /* same as .container */
		text-align: center;
		font-size: 0.8em;
		margin: 1.875em auto;
		line-height: 1.875;
	}
	#translations > a {
		vertical-align: middle;
		display: inline-block;
		width: 12%;
		min-width: 7em;
		line-height: 0.937em;
	}
	#translations a {
		color: inherit;
	}
	#translations > p {
		font-weight: bold;
	}
	#translations h2 {
		display: none;
	}

	#about-translation {
			text-align: center;
			background: skyblue;
			background: rgba(255, 255, 255, 0.2);
			color: #fff;
			padding: 1em 1em 1px;
			max-width: 84em; /* same as .container */
			font-size: 0.8em;
			margin: 1.875em auto;      
	}
	#about-translation .header span {
			margin: 0 1em;
	}


/* Header */

	.header, header {
		position: relative;
	}

  /* W3C Cascading Style Sheets header */
	.header > .hgroup,
	header > hgroup {
		background: #eee;
		color: #666;
		line-height: 1;
		position: relative;
	}
	.header > .hgroup:after,
	header > hgroup:after {
		content: "";
		position: absolute;
		height: 2px;
		bottom: -2px;
		left: 0; right: 0;
		-moz-box-shadow: 0 0 0.5em #999;
		-webkit-box-shadow: 0 0 0.5em #999;
		box-shadow: 0 0 0.5em #999;
	}
	.header h1, header h1,
	.header h2, header h2 {
		margin: 0;
		display: inline-block;
		display: table-cell;
		line-height: normal !important;
		vertical-align: middle;
		font-weight: normal;
		text-transform: none;
	}

	/* W3C Logo */
	.header h1, header h1 {
		background: #1D6DA7;
		color: white;
	}
	.header h1 img, header h1 img {
		vertical-align: middle;
	}
	/* Cascading Style Sheets */
	.header h2, header h2 {
		padding: 0.2em 1em;
	}

	/* Navigation */
	.header > .nav, header > nav {
		color: gray;
		margin: 0.937em;
		font-size: 0.8em;
		line-height: 1.875;
		text-align: center;
	}
	.header > .nav > ul,
	header > nav > ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.header > .nav > ul > li,
	header > nav > ul > li {
		display: inline-block;
	}
	.header > .nav > ul a,
	header > nav > ul a {
		text-transform: uppercase;
		display: inline-block;
		padding: 0.275em 1em 0.275em 1em;
	}
	.header > .nav > ul > li.current a,
	header > nav > ul > li.current a {
		background: #eee;
		margin-top: -1em;
		border-bottom-right-radius: 0.25em;
		border-bottom-left-radius: 0.25em;
	}

	/* Search Box */
	.header > .nav > form,
	header > nav > form {
		text-align: center;
		margin: 0.5em;
	}

	/* Other Languages */
	#langs {
		color: #666;
		margin: 0.8em 0.2em 0;
		display:block;
		font-size: 0.8em;
		text-align: center;
	}
	#langs::before {
		content: url(lang.png);
		display: inline-block;
		vertical-align: middle;
		padding: 0 0.2em;
	}

	@media screen and (min-width: 600px) and (min-width: 40em) {
		.hgroup {
			padding-right: 10em;
		}
		#langs {
			text-align: center;
			position: absolute;
			top: 1.22em;
			right: 1.875em;
			margin: 0;
			width: 12em;
		}
	}

	/* Very Narrow Screen header styling */
	@media screen and (max-width: 20em) {
		.header h1, header h1,
		.header h2, header h2 {
			display: block;
			padding-bottom: 0.2em;
			margin-left: 90px;
		}
		.header h1 img, header h1 img {
			float: left;
			margin-bottom: 0.2em;
		}
	}

	/* Widescreen header styling */
	@media screen and (min-width: 900px) and (min-width: 60em) {
		.header > .nav > ul,
		header > nav > ul {
			float: left;
			padding: 0;
			margin: 0 0 0.937em;
			padding-left: 7.5em;
			text-align: left;
		}
	
		.header > .nav > form,
		header > nav > form {
			float: right;
			margin: 0.275em 0 0.937em;;
			display: inline;
		}
	}
	
/* Links */

	a[href] {
		color: #0C3D5F;
		text-decoration: none;
	}
	a[href]:hover, a[href]:focus {
		text-decoration: underline;
	}
	a > img {
		border: none;
	}
	h1 > a, h2 > a {
		color: inherit;
	}

/* Local Navigation */


	.toc {
		background: #1876B9;
		background-image:  -moz-linear-gradient(hsl(205, 97%, 31%), hsl(205, 77%, 41%));
		background-image:  -o-linear-gradient(hsl(205, 97%, 31%), hsl(205, 77%, 41%));		
		background-image:  -ms-linear-gradient(hsl(205, 97%, 31%), hsl(205, 77%, 41%));				
		background-image:  -webkit-gradient(linear,left top,left bottom, color-stop(0, hsl(205, 97%, 31%)), color-stop(1, hsl(205, 77%, 41%)));
		background-image:  -webkit-linear-gradient(hsl(205, 97%, 31%), hsl(205, 77%, 41%));				
		background-image:   linear-gradient(hsl(205, 97%, 31%), hsl(205, 77%, 41%));				
		text-shadow: 1px 1px 1px #1A2F47; /* hsl(212, 64%, 28%) */
		color: #fff;
		padding: 1.35em 0;
		margin: 0 -0.5% 2em;
		border-radius: 0.5em;
		-moz-box-shadow: 4px 2px 3px #1A2F47; /* hsl(212, 64%, 28%) */
		-webkit-box-shadow: 4px 2px 3px #1A2F47; /* hsl(212, 64%, 28%) */ 
		box-shadow: 4px 2px 3px #1A2F47; /* hsl(212, 64%, 28%) */
	}

	.toc h1,
	.toc h2,
	.toc h3 {
		padding: 0 4%;
		margin: 0;
	}

	.toc ul,
	.toc ol {
		padding: 0 4%;
		margin: 0;
	}
	.toc ul {
		list-style-type: none;
	}
	.tocl ol {
		list-style-position: inside;
	}
	.toc ol > li,
	.toc ul > li {
		border-top: 1px solid #08395E; /* hsl(205, 91%, 18%) */
	}

	.toc a[href] {
		color: inherit;
		display: block;
		text-decoration: none;
		padding: 0.6em 5%;
		line-height: 1;
	}

@media screen and (min-width: 600px) and (min-width: 45em) {
	/* Wrap around left edge */
	.toc {
		width: 40%;
		float: left;
		margin: 0.675em 0 2.35em -0.3%;
		padding-top: 0.675em;
		border-left: 1px solid #1C334D; /* hsl(212, 64%, 30%) */
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.toc h1,
	.toc h2,
	.toc h3 {
		padding: 0 6%;
	}
	.toc ul,
	.toc ol {
		padding: 0 6% 0 2%;
	}
}

	.toc a[href] {
		border-top: 1px solid #5E85A1; /* hsl(205, 41%, 50%) */
	}

	.toc li:first-child, .toc li:first-child a,
	.toc li:hover, .toc li:hover a,
	.toc li:hover + li, .toc li:hover + li a {
		border-top: 1px solid transparent;
	}
	.toc li:hover {
		background: #014A7D; /* hsl(205, 99%, 49%) */
		background: -moz-linear-gradient(left, hsl(205, 99%, 49%), hsla(300, 99%, 99%, 0)) no-repeat;
		background: -o-linear-gradient(left, hsl(205, 99%, 49%), hsla(300, 99%, 99%, 0)) no-repeat;		
		background: -ms-linear-gradient(left, hsl(205, 99%, 49%), hsla(300, 99%, 99%, 0)) no-repeat;		
		background: -webkit-gradient(linear,left top,right top, from(hsl(205, 99%, 49%)), to(hsla(205, 77%, 41%, 0))), no-repeat;
		background: -webkit-linear-gradient(left, hsl(205, 99%, 49%), hsla(300, 99%, 99%, 0)) no-repeat;				
		background:  linear-gradient(left, hsl(205, 99%, 49%), hsla(300, 99%, 99%, 0)) no-repeat;				
		margin-left: -2%;
	}

/* Forms */

	input {
		padding: .15em .5em .25em .5em;
		border: thin solid #ddc;
		border-radius: 4px;
	}

	a.button,
	button,
	input[type=submit] {
		background: #025a9a;
		background-image: -moz-linear-gradient(#025A9A, #0C3D5F);
		background-image: -o-linear-gradient(#025A9A, #0C3D5F);		
		background-image: -ms-linear-gradient(#025A9A, #0C3D5F);		
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #025A9A),color-stop(1, #0C3D5F));
		background-image: -webkit-linear-gradient(#025A9A, #0C3D5F);		
		background-image:  linear-gradient(#025A9A, #0C3D5F);		
		color: #fff; 
		text-shadow: 1px 1px 1px #000;
		text-transform: uppercase;
		text-decoration: none !important;
		display: inline-block;
		padding: 0.2em 1em;
		border-radius: 3px;
		border: 0;
	}
	button,
	input[type=submit] {
		padding: 0.2em 1em;
	}
	
	.button:focus,
	.button:active,
	button:focus,
	button:active,
	input[type=submit]:focus,
	input[type=submit]:active {
		text-decoration: none;
		background-image: -moz-linear-gradient(#0C3D5F, #025A9A);
		background-image: -o-linear-gradient(top, #0C3D5F, #025A9A);		
		background-image: -ms-linear-gradient(top, #0C3D5F, #025A9A);		
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0C3D5F),color-stop(1, #025A9A));
		background-image: -webkit-linear-gradient(top, #0C3D5F, #025A9A);		
		background-image:  linear-gradient(top, #0C3D5F, #025A9A);		
	}

/* Time Stamps  */

	time {
		text-transform: uppercase;
		font-size: 0.8em;
	}

/* Asides */

	.aside, aside {
		background: #C1D2E7;
		color: #444;
		border-radius: 0.5em;
		font-size: 0.9em;
		padding: 1px 0;
	}
	.aside > *, aside > * {
		margin-left: 8%;
		margin-right: 8%;
	}

	@media screen and (min-width: 600px) and (min-width: 40em) {
		.aside {
			float: right;
			width: 40%;
			margin-left: 1.5%
		}
	}
	@media screen and (min-width: 900px) and (min-width: 60em) {
		.aside { width: 33%; }
	}

/* Tables and Inline Legends */

	.legend caption {
		display: block;
		font-size: 1em;
		line-height: 1.5;
		text-transform: uppercase;
	}
	.legend {
		display: block;
		text-align: center;
		line-height: 2;
	}
	.legend tr {
		display: inline-block;
		line-height: 1;
	}
	table.legend th {
		padding: 0.375em 0.5em;
		display: inline-block;
	}
	table.legend td {
		margin: 0 2em 0 0;
		display: inline-block;
	}
	.legend, .legend tbody, .legend tr, .legend th, .legend td {
		border: none;
	}