@charset "UTF-8";
		html {
			background-image: url("Images/Header.jpg");
			background-attachment: fixed;
			background-size: 100vw 100vh;
			font-family: Arial, Helvetica, sans-serif;
		}
		
		body {
			color: #000;
			margin: 0 auto;
			padding: 0 1em;
			background-color: rgba(20, 0, 0, 0.50);
			width: 960px;
		}
		
		header {
			margin: 0 auto;
			width: 960px;
			background-color: #EAEAEA;
			display: block;
		}
		
		header div {
			width: 100%;
			margin: 0;
			background-color: #0E0C0C;
			color: #0E0C0C;
			height: 3em;
			line-height: 3em;
		}
		
		header div span {
			color: #999999;
			float: right;
			padding: 0 2em;
		}
		
		header div a,
		header div a:link,
		header div a:visited {
			color: #D8D8D8;
			text-decoration: underline;
		}
		
		header div a:hover,
		header div a:active,
		header div a:focus {
			color: #FFA5A7;
			text-decoration: none;
			border-bottom: 1px dotted #FF595C;
		}
		
		nav {
			display: block;
			width: 100%;
			float: left;
			margin: 0 0 1em 0;
			padding: 1em 0 0 0;
			background-color: #f2f2f2;
			text-align: center;
			border-top: 1px solid #CCC;
			border-bottom: 1px solid #CCC;
			font-family: Georgia, serif;
		}
		
		nav ul {
			list-style: none;
			width: 800px;
			margin: 0 auto;
			padding: 0;
		}
		
		nav li {
			display: inline-block;
			margin: 0 0 1em 0;
		}
		
		nav li a {
			margin: 0 .2em 0 0;
			display: block;
			padding: .6em 1.2em;
			text-decoration: none;
			font-weight: bold;
			color: #94001E;
			border: 2px solid #ECC;
		}
		
		nav li a:hover {
			color: #FFE9E9;
			background-color: #882020;
			-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.6);
			-moz-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.6);
			box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.6);
		}

		nav li ul {
			display: none;
			width: 100%;
		}

		nav li:hover ul {
			/*display: inline-block;*/
			position: relative;
		}
		
		main {
			width: 960px;
			background-color: #EAEAEA;
			display: block;
			margin: 0 auto;
			padding: 0.4em 1.2em;
			margin-top: 4em;
			min-height: 70vh;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		main img{
			max-width: 90%;
		}
		
		footer {
			width: 960px;
			margin: 0 auto;
			background-color: #0E0C0C;
			text-align: center;
			color: #999999;
		}
		
		footer a,
		footer a:link,
		footer a:visited {
			color: #ffffff;
			text-decoration: underline;
		}
		
		footer a:hover,
		footer a:active,
		footer a:focus {
			color: #FFA5A7;
			text-decoration: none;
			border-bottom: 1px dotted #FF595C;
		}
		
		main a,
		main a:link,
		main a:visited {
			color: #510000;
			text-decoration: underline;
		}
		
		main a:hover,
		main a:active,
		main a:focus {
			color: #AF0000;
			text-decoration: none;
		}
		
		main ul li {
			list-style-type: none;
			margin: 5px;
		}
		
		main ul li:before {
			content: "\00BB";
			font-weight: bold;
			margin-right: .6em;
		}
		
		main table {
			color: #333;
			font-family: Helvetica, Arial, sans-serif;
			width: 90%;
			border: 1px solid rgba(96,0,8,0.20);
			margin: 0 auto;
		}
		
		main td,
		main th {
			border: 1px solid transparent;
			/* No more visible border */
			height: 30px;
			transition: all 0.3s;
			/* Simple transition for hover effect */
		}
		
		main th {
			background: #DFDFDF;
			/* Darken header a bit */
			font-weight: bold;
		}
		
		main td {
			background: #FAFAFA;
			text-align: center;
		}
		
		main tr:nth-child(even) td {
			background: #F1F1F1;
		}
		
		main tr:nth-child(odd) td {
			background: #FEFEFE;
		}
		
		main h1, main h2, main h3, main h4, main h5, main h6 {
			color: rgba(136, 32, 32, 1);
			text-decoration: none;
		} 
		
		main pre {
			font-size: 10pt;
			font-family: "Courier New", Courier, monospace;
			background: #fff;
			color: #000;
			line-height: 1em;
		}
		img.zoom {
 			transition: transform 0.8s;
 			-moz-transition: transform 0.8s;
 			-webkit-transition: transform 0.8s;
 			-o-transition: transform 0.8s;
 			-ms-transition: transform 0.8s;
		}
		img.zoom:hover {
 			cursor: zoom-in;
 			cursor: -moz-zoom-in;
 			cursor: -webkit-zoom-in;
 			transform: scale(2, 2);
 			-moz-transform: scale(2, 2);
 			-webkit-transform: scale(2, 2);
 			-o-transform: scale(2, 2);
 			-ms-transform: scale(2, 2);
		}
		
		.csgo_guide {
			position: relative;
			left: 0;
			top: 0;
			width: 920px;
			height: 920px;
			z-index: 1;
			margin: 0;
			padding: 0;
			-webkit-transition: -webkit-transform .1s linear;
			transition: transform .1s linear;
		}
		
		.csgo_guide g {
 			cursor: pointer;
 			-webkit-transition: all .2s;
 			transition: all .2s;
		}
		
		.csgo_guide g * {
 			cursor: pointer;
 			-webkit-transition: all .2s;
 			transition: all .2s;
		}

		.csgo_guide g use[href="#smoke"] {
			fill: #FFF;
			opacity: 0.7;
			stroke: rgba(0,0,0,1);
			stroke-width: 15px;
		}

		.csgo_guide g use[href="#flash"] {
			fill: rgba(80,130,210,0.3);
			opacity: 0.7;
			stroke: rgba(0,0,0,1);
			stroke-width: 20px;
			stroke-linecap: butt;
		}

		.csgo_guide g use[href="#molotov"] {
			fill: #F55;
			opacity: 0.7;
			stroke: rgba(0,0,0,0.5);
			stroke-width: 15px;
		}

		.csgo_guide g:hover use {
			opacity: 1;
		}
r		
		.csgo_guide g:hover #smoke {
			fill: #FFF;
			opacity: 1;
		}
		
		.csgo_guide g circle.hover {
			fill: #FFF;
			opacity: 0;
		}

		.csgo_guide g circle.start {
			fill: #EFEFEF;
			opacity: 0.5;
		}

		.csgo_guide g:hover circle.start {
			fill: #FFF;
			opacity: 1;
		}

		.csgo_guide g line {
			stroke: rgba(50, 255, 50, 0.5);
			stroke-width: 2px;
			stroke-linecap: "round";
			stroke-dasharray: 5 1 1;
		}

		.csgo_guide g:hover line {
			stroke-width: 2px;
			stroke-linecap: "round";
			stroke-dasharray: 5 1 1;
			animation: dash 10s linear;
  			animation-iteration-count: infinite;
		}
		
		@keyframes dash {
			to {
				stroke-dashoffset: -500;
			}
		}

		.csgo_guide g line.smoke {
			stroke: rgba(200, 200, 200, 0.8);
		}

		.csgo_guide g line.flash {
			stroke: rgba(80,130,210,0.8);
		}

		.csgo_guide g line.molotov {
			stroke: rgba(200, 40, 40, 0.8);
		}

		.csgo_guide g:hover line.smoke {
			stroke: rgba(255, 255, 255, 1);
		}

		.csgo_guide g:hover line.flash {
			stroke: rgba(80,130,210,1);
		}

		.csgo_guide g:hover line.molotov {
			stroke: rgba(200, 40, 40, 1);
		}
		
		hr {
			width: 85%;
			border: 0;
			height: 2px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,882020+50,a90329+100&0+0,1+50,0+100 */
			background: -webkit-linear-gradient(left, rgba(169, 3, 41, 0) 0%, rgba(136, 32, 32, 1) 50%, rgba(169, 3, 41, 0) 100%);
			background: -o-linear-gradient(left, rgba(169, 3, 41, 0) 0%, rgba(136, 32, 32, 1) 50%, rgba(169, 3, 41, 0) 100%);
			background: linear-gradient(to right, rgba(169, 3, 41, 0) 0%, rgba(136, 32, 32, 1) 50%, rgba(169, 3, 41, 0) 100%);
			/* FF3.6-15 */
			/* Chrome10-25,Safari5.1-6 */
			/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00a90329', endColorstr='#00a90329', GradientType=1);
			/* IE6-9 */
		}
		
		h1 {
			text-align: center;
		}