/* FONTS */

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/bebas_neue/BebasNeue-webfont.eot');
    src: url('fonts/bebas_neue/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebas_neue/BebasNeue-webfont.woff') format('woff'),
         url('fonts/bebas_neue/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/bebas_neue/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lobster';
    src: url('fonts/lobster/Lobster_1.3-webfont.eot');
    src: url('fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lobster/Lobster_1.3-webfont.woff') format('woff'),
         url('fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'),
         url('fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Pictos';
	src: url('fonts/pictos/pictos-web.eot');
	src: local('☺'), url('fonts/pictos/pictos-web.woff') format('woff'), url('fonts/pictos/pictos-web.ttf') format('truetype'), url('fonts/pictos/pictos-web.svg#webfontIyfZbseF') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* GENERAL LAYOUT */

body {
    padding: 0;
    margin: 0;
    background: rgb(220,220,220) url('img/texture.png') fixed;
    overflow-y: scroll;
}

	.header,
	.nav,
	.content,
	.footer {
		width: 800px;
		margin: 40px auto;
		border-radius: 5px;
	}
	
	.header,
	.nav,
	.content {
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.7);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.7);
		box-shadow: 0 1px 3px rgba(0,0,0, 0.7);
	}

/* HEADER */

	.header {
		display: table;
		background: rgba(0, 133, 202, 0.9);
		-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8), 0 1px 4px rgba(255, 255, 255, 0.9);
		-moz-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8), 0 1px 4px rgba(255, 255, 255, 0.9);
		box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8), 0 1px 4px rgba(255, 255, 255, 0.9);
		height: 120px;
		color: rgba(255, 255, 255, 0.95);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
		margin-top: 70px;
	}

	.header > span {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
		.header .logo {
			font-family: 'BebasNeue';
			font-size: 60px;
		}
		
			.header .logo .super {
				font-size: 30px;
			}

		.header .motto {
			width: 290px;
			padding: 0 50px;
			font-family: 'Lobster';
			font-size: 25px;
		}

/* NAV */

	.nav {
		text-align: center;
		background: rgba(255, 255, 255, 0.3);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
		box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
	}
	
		.nav a {
			display: inline-block;
			height: 64px;
			line-height: 64px;
			padding: 0 20px;
			font-family: 'BebasNeue';
			font-size: 25px;
			color: rgba(0, 0, 0, 0.4);
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
			text-decoration: none;
			-webkit-transition: color 0.25s ease-out;
			-moz-transition: color 0.25s ease-out;
			-o-transition: color 0.25s ease-out;
			transition: color 0.25s ease-out;
		}
		
		.nav a:hover {
			text-decoration: none;
		}

		.nav a:hover:not(.selected) {
			color: rgb(90, 90, 90);
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 25px rgba(0, 143, 208, 0.4);
		}
		
		.nav a.selected {
			color: rgba(255, 255, 255, 0.95);
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
			background: rgba(0, 133, 202, 0.8);
			-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8);
			-moz-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8);
			box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 5px 40px rgba(0, 77, 118, 0.8);
		}
		
			.nav a span {
				font-family: 'Pictos';
				font-size: 30px;
				margin-right: 8px;
			}

/* CONTENT */

	.content {
		position: relative;
		background: white;
		padding: 20px;
		width: 760px;
		font-family: arial, sans-serif;
		font-size: 14px;
	}

		.content:before,
		.content:after {
		    position: absolute;
		    width: 40%;
		    height: 10px;
		    content: '';
		    left: 12px;
		    bottom: 16px;
		    background: transparent;
		    border-radius: 8px;
		    -webkit-transform: skew(-5deg) rotate(-5deg);
		    -moz-transform: skew(-5deg) rotate(-5deg);
		    -ms-transform: skew(-5deg) rotate(-5deg);
		    -o-transform: skew(-5deg) rotate(-5deg);
		    transform: skew(-5deg) rotate(-5deg);
		    -webkit-box-shadow: 0 10px 14px rgba(0,0,0, 0.3);
		    -moz-box-shadow: 0 10px 14px rgba(0,0,0, 0.3);
		    box-shadow: 0 10px 14px rgba(0,0,0, 0.3);
		    z-index: -1;
		}
	
		.content:after {
		    left: auto;
		    right: 12px;
		    -webkit-transform: skew(5deg) rotate(5deg);
		    -moz-transform: skew(5deg) rotate(5deg);
		    -ms-transform: skew(5deg) rotate(5deg);
		    -o-transform: skew(5deg) rotate(5deg);
		    transform: skew(5deg) rotate(5deg);
		}

		a {
			color: rgb(0, 141, 204);
			text-decoration: none;
		}
		
		a:hover {
			text-decoration: underline;
		}
	
		h1,
		h2 {
			font-family: 'Lobster';
			color: rgb(120, 120, 120);
			font-weight: normal;
			margin: 0;
			padding: 15px;
			border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
		}
		
		h1 {
			font-size: 35px;
			line-height: 40px;
			margin-bottom: 20px;
		}

		h2 {
			font-size: 22px;
			line-height: 27px;
			margin-top: 30px;
			margin-bottom: 20px;
		}
		
		p {
			line-height: 20px;
			text-indent: 15px;
		}
		
		ul {
			line-height: 20px;
			padding-left: 25px;
			margin: 10px 0 20px 0;
		}
		
			li {
				list-style: none;
				margin: 0;
				padding: 0;
				padding-left: 22px;
				position: relative;
			}
			
			ul.bullet li::before,
			ul.tick li::before,
			ul.link li::before {
				font-family: 'Pictos';
				position: absolute;
				left: 0;
			}

			ul.bullet li::before { 
				content: ']';
				color: rgba(100, 100, 100, 0.6);
			}

			ul.tick li::before { 
				content: '3';
				color: rgba(0, 128, 0, 0.6);
			}
			
			ul.link li::before { 
				content: 'j';
				color: rgba(0, 141, 204, 0.6);
			}

/* FIGURE */

		.figure {
			float: right;
			max-width: 220px;
			margin-left: 30px;
			margin-bottom: 30px;
		}

			.figure img {
				display: block;
				max-width: 220px;
				border-radius: 5px 5px 0 0;
			}
			
			.figure .caption {
				text-align: center;
				font-size: 12px;
				font-weight: bold;
				color: white;
				text-shadow: 0 1px 2px rgba(0,0,0, 0.7);
				background: rgb(60,60,60);
				padding: 3px 0;
				border-radius: 0 0 5px 5px;
			}
			
/* TWITTER NEWS FEED */

		#twitter_update_list {
			margin: 0;
			padding: 0;
		}
		
			#twitter_update_list li {
				display: table;
				table-layout: fixed;
				width: 100%;
				margin: 15px 0 0 0;
				padding: 0;
				background: rgb(249,249,230) url('img/texture.png') fixed;
				border-radius: 8px;
				text-shadow: 0 1px 1px rgba(255,255,255, 0.9);
				-webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.3), inset 0 -1px 4px rgba(255,255,255, 0.5);
				-moz-box-shadow: 0 1px 2px rgba(0,0,0, 0.3), inset 0 -1px 4px rgba(255,255,255, 0.5);
				box-shadow: 0 1px 2px rgba(0,0,0, 0.3), inset 0 -1px 4px rgba(255,255,255, 0.5);
			}
			
			#twitter_update_list li:first-child {
				margin: 0;
			}
				
				#twitter_update_list li span {
					display: table-cell;
					padding: 15px;
					font-family: 'Lobster';
					color: rgb(152, 152, 140);
					font-size: 18px;
					line-height: 24px;
				}
				
					#twitter_update_list li span a {
						color: inherit;
					}
				
				#twitter_update_list li > a {
					display: table-cell;
					padding: 15px;
					width: 140px;
					text-align: right;
					font-family: 'BebasNeue';
					font-size: 14px !important;
					color: rgba(152, 152, 140, 0.5);
				}
				
				#twitter_update_list li a {
					-webkit-transition: color 0.25s ease-out;
					-moz-transition: color 0.25s ease-out;
					-o-transition: color 0.25s ease-out;
					transition: color 0.25s ease-out;
				}
				
				#twitter_update_list li a:hover {
					color: rgb(0, 141, 204);
				}

/* DOWNLOADS EXPLORER */

			ul.explorer {
				padding: 0;
				margin: 0;
			}

				ul.explorer li,
				ul.explorer a {
					margin: 4px 0;
					padding: 2px 8px;
					text-shadow: 0 1px 1px rgba(255, 255, 255, 0.95);
					border-radius: 5px;
				}
				
				ul.explorer a {
					display: list-item;
					list-style: none;
					font-weight: normal;
				}
				
				ul.explorer a:hover {
					background: rgba(0, 141, 204, 0.1) url('img/texture.png') fixed;;
					-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					-moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					text-decoration: none;
				}
	
				ul.explorer li {
					background: rgb(252, 252, 252) url('img/texture.png') fixed;
					color: rgba(0, 0, 0, 0.5);
					font-weight: bold;
					-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					-moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					box-shadow: inset 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					-webkit-transition: background 1s ease-in-out;
					-moz-transition: background 1s ease-in-out;
					-o-transition: background 1s ease-in-out;
					transition: background 1s ease-in-out;
					cursor: pointer;
				}
				
				ul.explorer li.selected {
					background: rgb(252, 252, 240) url('img/texture.png') fixed;
					-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					-moz-box-shadow: inset 0 2px 3px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
					box-shadow: inset 0 2px 3px rgba(0,0,0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.95);
				}
				
					ul.explorer li::before,
					ul.explorer a::before {
						float: left;
						font-family: 'Pictos';
						margin-right: 10px;
						color: rgba(0, 0, 0, 0.5);
					}
					
					ul.explorer li::before {
						content: '&';
					}
					
					ul.explorer li.selected::before {
						content: '_';
					}
					
					ul.explorer a::before {
						content: 'F';
					}
				
					ul.explorer li ul {
						margin: 0;
						padding: 15px;
					}

/* PRODUCTS LIST */

		.productsList {
			display: inline-block;
			float: right;
			position: relative; /* Hack to fix conflict with position: relative bullet lists in main content */
			z-index: 999; /* Hack */
			border-radius: 5px;
			background: rgb(220,220,220) url('img/texture.png') fixed;
			background-attachment: fixed;
			margin-left: 30px;
			margin-bottom: 30px;
			-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
			-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
			box-shadow: 0 1px 3px rgba(0,0,0, 0.7), inset 0 1px 4px rgba(255,255,255, 0.7);
		}
			
			.productsList a {
				display: block;
				padding: 15px 12px;
				text-align: center;
				font-family: 'BebasNeue';
				font-size: 18px;
				color: rgba(0, 0, 0, 0.4);
				text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
				text-decoration: none;
				background: rgba(255, 255, 255, 0.3);
				-webkit-transition: color 0.25s ease-out;
				-moz-transition: color 0.25s ease-out;
				-o-transition: color 0.25s ease-out;
				transition: color 0.25s ease-out;
			}
		
			.productsList a:first-child {
				border-radius: 5px 5px 0 0;
			}
			
			.productsList a:last-child {
				border-radius: 0 0 5px 5px;
			}

			.productsList a:hover:not(.selected) {
				color: rgb(90, 90, 90);
				text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 15px rgba(0, 143, 208, 0.4);
			}

			.productsList a.selected {
				background: rgba(0, 133, 202, 0.8);
				color: rgba(255, 255, 255, 0.95);
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
				-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 2px 25px rgba(0, 77, 118, 0.8);
				-moz-box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 2px 25px rgba(0, 77, 118, 0.8);
				box-shadow: inset 0 1px 4px rgba(0,0,0, 0.8), inset 0 2px 25px rgba(0, 77, 118, 0.8);
			}

/* PRODUCT PAGES */

	.productImg {
		display: block;
		margin: 15px 0;
		max-width: 550px;
	}

/* FOOTER */

	.footer {
		margin-bottom: 70px;
		font-family: 'BebasNeue';
		font-size: 17px;
		text-align: center;
		color: rgba(80,80,80, 0.25);
		text-shadow: 0 1px 2px rgba(255,255,255, 0.7);
		line-height: 28px;
	}
	
		.footer a {
			-webkit-transition: color 0.25s ease-out;
			-moz-transition: color 0.25s ease-out;
			-o-transition: color 0.25s ease-out;
			transition: color 0.25s ease-out;
			color: inherit;
		}
		
		.footer a:hover {
			color: rgb(0, 141, 204);
		}
		
		.footer div {
			font-size: 19px;
		}