/* GENERAL */
html, body	{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body	{
	background: #c9c9cb url(/images/moon-night-c-stephen-rahn-stocksnap.jpeg) no-repeat center bottom fixed;
	background-size: cover;
	color: #1c2025;
	font: 12px/21px "Trebuchet MS", Helvetica, sans-serif;
	text-align: center;
}

/* FONT FACES */
@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('/styles/fonts/Chunkfive/Chunkfive-webfont.eot');
	src: local('☺'), url('/styles/fonts/Chunkfive/Chunkfive-webfont.woff') format('woff'), url('/styles/fonts/Chunkfive/Chunkfive-webfont.ttf') format('truetype'), url('/styles/fonts/Chunkfive/Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSansMonoRegular';
	src: url('/styles/fonts/Droid-Sans-Mono/DroidSansMono-webfont.eot');
	src: local('☺'), url('/styles/fonts/Droid-Sans-Mono/DroidSansMono-webfont.woff') format('woff'), url('/styles/fonts/Droid-Sans-Mono/DroidSansMono-webfont.ttf') format('truetype'), url('/styles/fonts/Droid-Sans-Mono/DroidSansMono-webfont.svg#webfont8LVft6NC') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FONTS */
p	{
	margin: 7px;
}

a	{
	text-decoration: none;
	color: #37414e;
	-webkit-text-shadow: 1px 1px 0px #fc0;
	-moz-text-shadow: 1px 1px 0px #fc0;
	text-shadow: 1px 1px 0px #fc0;
}
a:hover	{
	-webkit-text-shadow: 1px 1px 0px #fff;
	-moz-text-shadow: 1px 1px 0px #fff;
	text-shadow: 1px 1px 0px #fff;
}

h1, h2, h3, h4, h5, h6	{
	font-family: ChunkFiveRegular;
	margin: 7px;
	color: #37414e;
	-webkit-text-shadow: 1px 1px 0px #fff;
	-moz-text-shadow: 1px 1px 0px #fff;
	text-shadow: 1px 1px 0px #fff;
}

	h1	{
		font-size: 24px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	h2	{
		font-size: 18px;
		margin-top: 16px;
		margin-bottom: 9px;
	}
	h3	{
		font-size: 15px;
		margin-top: 11px;
		margin-bottom: 9px;
	}
	h4	{
		font-size: 12px;
	}

aside h1, aside h2, aside h3, aside h4, aside h5, aside h6	{
	color: #fc0;
	-webkit-text-shadow: 1px 1px 0px #000;
	-moz-text-shadow: 1px 1px 0px #000;
	text-shadow: 1px 1px 0px #000;
}

	aside h1	{
		font-size: 20px;
	}
	aside h2	{
		font-size: 16px;
	}
	aside h3	{
		font-size: 13px;
	}
	aside h4	{
		font-size: 12px;
	}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6	{
	color: #c9c9cb;
	-webkit-text-shadow: 1px 1px 0px #000;
	-moz-text-shadow: 1px 1px 0px #000;
	text-shadow: 1px 1px 0px #000;
}

	footer h1	{
		font-size: 20px;
	}
	footer h2	{
		font-size: 16px;
	}
	footer h3	{
		font-size: 13px;
	}
	footer h4	{
		font-size: 12px;
	}

footer a, div.switchbox div.details a	{
	color: #c9c9cb;
	text-decoration: underline;
	-webkit-text-shadow: none;
	-moz-text-shadow: none;
	text-shadow: none;
}
footer a:hover, div.switchbox div.details a:hover	{
	color: #fc0;
	-webkit-text-shadow: none;
	-moz-text-shadow: none;
	text-shadow: none;
}

pre	{
	position: relative;
	padding: 10px;
	white-space: pre-wrap;
	max-height: 400px;
	overflow: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #37414e;
	color: #c9c9cb;
}

pre, code	{
	font: 10px/15px "DroidSansMonoRegular", monospace, "Courier New", Courier;
}

/* BLOCK ELEMENTS */
header, nav, section, aside, article, footer	{
	display: block;
}

#globalWrapper	{
	position: relative;
	width: 100%;
	min-height: 100%;
}

	#sideboxWrapper	{
		position: fixed;
		top: 30%;
		left: 0;
		width: 35px;
		height: 130px;
		z-index: 30;
		overflow: hidden;
	}

		#sidebox	{
			position: absolute;
			top: 5px;
			left: 0;
			width: 30px;
			height: 120px;
			-webkit-box-shadow: 0px 0px 5px #000;
			-moz-box-shadow: 0px 0px 5px #000;
			box-shadow: 0px 0px 5px #000;
			overflow: visible;
		}

			span.icon.twitter	{
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 30px;
				height: 120px;
				font-family: ChunkFiveRegular;
				color: #37414e;
				-webkit-text-shadow: 1px 1px 0px #fff;
				-moz-text-shadow: 1px 1px 0px #fff;
				text-shadow: 1px 1px 0px #fff;
				text-align: center;
				font-size: 20px;
			}
			span.icon.twitter.nocss3	{
				background: #fc0 url(/templates/navy_pulley/images/icon-follow-me.png) center center no-repeat;
			}
			body.happybrowser span.icon.twitter.nocss3	{
				display: none;
			}
			span.icon.twitter.css3	{
				display: none;
				width: 120px;
				height: 23px;
				padding-top: 7px;
				top: 45px;
				left: -45px;
				-webkit-transform: rotate(-90deg);
				-moz-transform: rotate(-90deg);
				-o-transform: rotate(-90deg);
				transform: rotate(-90deg);
				background: rgba(255, 204, 0, 0.5);
				-webkit-transition: background 800ms ease-in-out;
				-moz-transition: background 800ms ease-in-out;
				-o-transition: background 800ms ease-in-out;
				transition: background 800ms ease-in-out;
			}
			span.icon.twitter.css3:hover	{
				background: rgba(255, 204, 0, 1);
			}
			body.happybrowser span.icon.twitter.css3	{
				display: block;
			}

	header	{
		position: relative;
		width: 100%;
		height: 500px;
		background: #37414e url(/templates/navy_pulley/images/background-header.jpg) center top repeat-x;
		border-bottom: 1px solid #595b5c;
	}

		#headerContent	{
			position: relative;
			width: 960px;
			height: 500px;
			margin: 0 auto;
		}

			#browser	{
				position: absolute;
				bottom: 50px;
				left: 0;
				z-index: 10;
				width: 300px;
				padding: 40px 15px 15px 15px;
				background: rgba(255, 204, 0, 0.8);
				text-align: left;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-shadow: 0px 0px 8px #000;
				-moz-box-shadow: 0px 0px 8px #000;
				box-shadow: 0px 0px 8px #000;
				background-repeat: no-repeat;
				background-position: 270px -30px;
			}

			#headerImage	{
				position: absolute;
				top: 0;
				left: 130px;
				width: 366px;
				height: 500px;
			}

			#headerLogo	{
				position: absolute;
				top: 50px;
				left: 50px;
				width: 373px;
				height: 100px;
			}

			nav	{
				position: absolute;
				top: 50px;
				right: 0;
			}

	#container	{
		position: relative;
		width: 960px;
		min-height: 400px;
		margin: 0 auto;
		padding: 50px 0 330px 0;
		text-align: left;
	}

		#content	{
			position: relative;
			float: left;
			width: 620px;
			padding: 10px 5px;
		}
		#content.small	{
			width: 455px;
		}

			#content article	{
				position: relative;
				margin-bottom: 30px;
			}

				#content article time	{
					position: absolute;
					top: 0;
					right: 0;
				}

					#content article time span	{
						margin-left: 3px;
						padding: 3px 5px;
						background: #37414e;
						color: #c9c9cb;
						-webkit-border-radius: 3px;
						-moz-border-radius: 3px;
						border-radius: 3px;
						-webkit-box-shadow: 1px 1px 0px #fff;
						-moz-box-shadow: 1px 1px 0px #fff;
						box-shadow: 1px 1px 0px #fff;
					}

				#content article img.header	{
					position: relative;
					float: left;
					margin: 7px;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					-webkit-box-shadow: 0px 0px 5px #000;
					-moz-box-shadow: 0px 0px 5px #000;
					box-shadow: 0px 0px 5px #000;
				}
				#content article img.header.large	{
					float: none;
					margin: 7px auto;
				}

				#content article a.tag	{
					display: inline-block;
					margin: 0 5px 0 0;
					padding: 1px 3px;
					background: #37414e;
					color: #c9c9cb;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					-webkit-box-shadow: 1px 1px 0px #fff;
					-moz-box-shadow: 1px 1px 0px #fff;
					box-shadow: 1px 1px 0px #fff;
					-webkit-transition: all 400ms ease-in;
					-moz-transition: all 400ms ease-in;
					-o-transition: all 400ms ease-in;
					transition: all 400ms ease-in;
					-webkit-text-shadow: none;
					-moz-text-shadow: none;
					text-shadow: none;
				}
				#content article a.tag:hover	{
					-webkit-transform: scale(1.1);
					-moz-transform: scale(1.1);
					-o-transform: scale(1.1);
					transform: scale(1.1);
					-webkit-text-shadow: none;
					-moz-text-shadow: none;
					text-shadow: none;
				}

				#content article a.demo	{
					display: inline-block;
					margin: 0 5px 0 0;
					padding: 6px 15px;
					background: #fc0 url(/templates/navy_pulley/images/yes-you-can.png) 80px center no-repeat;
					color: #37414e;
					font: 19px ChunkFiveRegular;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					-webkit-box-shadow: 1px 1px 0px #000;
					-moz-box-shadow: 1px 1px 0px #000;
					box-shadow: 1px 1px 0px #000;
					-webkit-text-shadow: none;
					-moz-text-shadow: none;
					text-shadow: none;
					-webkit-transition: padding 800ms ease-in-out;
					-moz-transition: padding 800ms ease-in-out;
					-o-transition: padding 800ms ease-in-out;
					transition: padding 800ms ease-in-out;
				}
				#content article a.demo:hover	{
					padding-right: 150px;
				}

		aside	{
			position: relative;
			float: right;
			width: 290px;
			padding: 10px 5px;
		}
		aside.wide	{
			width: 455px;
		}

			aside section	{
				display: relative;
			}

				aside section img.main	{
					position: relative;
					margin: 7px 0;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					-webkit-box-shadow: 0px 0px 5px #000;
					-moz-box-shadow: 0px 0px 5px #000;
					box-shadow: 0px 0px 5px #000;
				}

					div.switchbox	{
						position: relative;
					}

						div.switchbox div.turntable 	{
							position: relative;
							-webkit-transition: all 400ms linear;
							-moz-transition: all 400ms linear;
							-o-transition: all 400ms linear;
							transition: all 400ms linear;
						}
						div.switchbox:hover div.turntable	{
							-webkit-transform: rotateY(180deg);
							-moz-transform: rotateY(180deg);
							-o-transform: rotateY(180deg);
							transform: rotateY(180deg);
						}

							div.switchbox div.details	{
								position: absolute;
								top: 0;
								left: 0;
								padding: 15px;
								width: 270px;
								-webkit-transform: rotateY(90deg);
								-moz-transform: rotateY(90deg);
								-o-transform: rotateY(90deg);
								transform: rotateY(90deg);
								-webkit-transition: all 400ms linear -200ms;
								-moz-transition: all 400ms linear -200ms;
								-o-transition: all 400ms linear -200ms;
								transition: all 400ms linear -200ms;
								-webkit-opacity: 0;
								-moz-opacity: 0;
								-o-opacity: 0;
								opacity: 0;
							}
							div.switchbox:hover div.details	{
								z-index: 2;
								-webkit-transform: rotateY(180deg);
								-moz-transform: rotateY(180deg);
								-o-transform: rotateY(180deg);
								transform: rotateY(180deg);
								-webkit-opacity: 1;
								-moz-opacity: 1;
								-o-opacity: 1;
								opacity: 1;
							}

								div.switchbox div.details p	{
									padding: 3px 5px;
									background: #37414e;
									color: #c9c9cb;
									-webkit-border-radius: 3px;
									-moz-border-radius: 3px;
									border-radius: 3px;
									-webkit-box-shadow: 1px 1px 0px #fff;
									-moz-box-shadow: 1px 1px 0px #fff;
									box-shadow: 1px 1px 0px #fff;
								}

	footer	{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #37414e;
	}

		#footerContent	{
			position: relative;
			width: 960px;
			height: 100%;
			margin: 0 auto;
			text-align: left;
		}

			div.column	{
				position: relative;
				display: inline-block;
				width: 290px;
				margin-right: 25px;
				padding: 5px;
				color: #c9c9cb;
				font-size: 10px;
				line-height: 17px;
				vertical-align: top;
			}
			div.column:last-child	{
				margin-right: 0;
			}

				div.column a.twitter	{
					display: block;
					position: absolute;
					top: -51px;
					left: 90px;
					width: 150px;
					height: 55px;
					background: url(/templates/navy_pulley/images/follow-me-on-twitter.png) center center no-repeat;
				}

div.spacer	{
	position: relative;
	width: 100%;
	clear: both;
}

/* IMAGES */
img	{
	border: none;
}

img.linec, img.linel, img.nolinel, img.liner, img.noliner	{
	border: 1px #37414e solid;
	margin: 7px;
}

img.linec	{
	display: block;
	margin: 4px auto;
}

img.nolinec	{
	display: block;
	margin: 4px auto;
	border: none;
}

img.linel	{
	float: left;
}

img.nolinel	{
	float: left;
	border: none;
}

img.liner	{
	float: right;
}

img.noliner	{
	float: right;
	border: none;
}