/* IMPORTS */

@import url('reset.css');
@import url('../webfonts/ashcryptofont/style.css');

/* STANDARD HTML */

body {
	background: rgb(153,153,153) url('../img/bg/footer.png') left top repeat fixed;
	color: rgb(85,85,85);
	font-family: 'adrianna', sans-serif;
	font-size: 125%;
	letter-spacing: 0.07em;
	line-height: 1.5em;
	text-shadow: 1px 1px 1px rgb(255,255,255);
}

body>* { font-size: 75%; line-height: 1.5em; } /* Workaround to WebKit letter-spacing bug */

a, a:visited {
	color: rgb(234,139,35);
	text-decoration: none;
	-moz-transition-duration: 200ms;
	-moz-transition-property: color;
	-moz-transition-timing-function: ease;
	-webkit-transition-duration: 200ms;
	-webkit-transition-property: color;
	-webkit-transition-timing-function: ease;
}

a:hover {
	color: rgb(0,113,162);
	text-decoration: none;
}

code, pre, tt {
	font-family: monospace;
}

em {
	font-style: italic;
}

h1, h2, h3 {
	font-family: 'ASHcryptofont', serif;
	font-size: 140%;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.3em;
	margin: 1.5em 0 1em 0;
	text-align: center;
}

h4 {
	font-family: 'adrianna', sans-serif;
	font-size: 100%;
	font-weight: bold;
	margin: 1.5em 0 0 0;
}

h1: first-child, h2: first-child, h3: first-child {
	margin-top: 0;
}

h1, h2 {
	color: rgb(0,113,162);
}

h3, h4 {
	color: rgb(85,85,85);
}

hr {
	background: rgb(153,153,153);
	border: 0;
	color: rgb(153,153,153);
	clear: both;
	height: 1px;
	margin: 1em 0;
	width: 100%;
}

img {
	height: auto;
	max-width: 100%;
	width: auto;
}

p, ul, ol, dl {
	margin: 0 0 1.3em 0;
}

dt {
	font-weight: normal;
	text-transform: lowercase;
}

dd {
	font-weight: bold;
}

ul {
	text-align: center;
}

li {
	margin: 0 0 1.3em 0;
}

strong {
	font-weight: bold;
}

/* CSS CLASSES */

.aligncenter {
	display: block;
	margin: inherit auto;
	text-align: center;
}

.alignjustify {
	display: block;
	text-align: justify;
}

.alignleft {
	float: left;
	margin: 0 1em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1em;
	text-align: right;
}

.alt {
	color: rgb(0,81,121);
}

.bullet_list {
	list-style: disc;
	padding-left: 2em;
	text-align: left;
}

	.bullet_list li {
		margin: 0;
		text-align: left;
	}

.caption {
	font-size: 85%;
}

.cell-image {
	clear: both;
	display: block;
	margin: 1em 0;
	width: 100%;
}

.clear {
	clear: both;
}

.date {
	font-size: 85%;
	margin: 1.5em 0;
	opacity: 0.7;
}

.download {
	background: rgb(0,113,162);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	color: rgb(255,255,255) !important;
	float: right;
	font-family: 'ASHcryptofont', serif;
	font-size: 100%;
	text-transform: lowercase;
	-moz-transition-duration: 200ms;
	-moz-transition-property: backgroundColor;
	-moz-transition-timing-function: ease;
	-webkit-transition-duration: 200ms;
	-webkit-transition-property: backgroundColor;
	-webkit-transition-timing-function: ease;
}

.download:hover {
	background-color: rgb(234,139,35);
}

.download a {
	color: rgb(255,255,255) !important;
	display: block;
	font-weight: normal !important;
	padding: 10px;
	text-shadow: none !important;
}

.fineprint {
	font-size: 65%;
}

.float_25, .float_33, .float_50, .float_66, .float_75, .float_tiles {
	float: left;
	margin: 0 2% 1em 0;
}
.float_25, .float_tiles { width: 23%; }
.float_33 { width: 31%; }
.float_50 { width: 48%; }
.float_66 { width: 64%; }
.float_75 { width: 73%; }
.float_50.odd, .float_tiles.odd { clear: both; }

	.float_tiles p {
		font-size: 70%;
		line-height: 1.5em;
		overflow: hidden;
		margin: 0.5em 0;
		white-space: nowrap;
	}

.gallery {
	display: block;
	margin: 0;
	padding: 0;
}

	.gallery ul {
		list-style: none;
	}

	.gallery li {
		width: 48%;
	}

	.gallery li.odd {
		float: left;
		margin: 0 1% 2% 0;
	}

	.gallery li.even {
		float: right;
		margin: 0 0 2% 1%;
	}

	.gallery li img {
		height: auto;
		width: 100%;
	}

.image {
	display: block;
}

	.image img {
		background: rgb(166,182,190);
		display: block;
		margin: 0 auto;
		padding: 0;
		-moz-transition-duration: 200ms;
		-moz-transition-property: backgroundColor;
		-moz-transition-timing-function: ease;
		-webkit-transition-duration: 200ms;
		-webkit-transition-property: backgroundColor;
		-webkit-transition-timing-function: ease;
	}

	.image.white img { background: rgb(255,255,255); }
	.image.gray img { background: rgb(166,182,190); }
	.image.gray:hover img { background: rgb(76,93,102); }
	.image.blue img { background: rgb(0,113,162); }
	.image.blue:hover img { background: rgb(234,139,35); }
	.image.orange img { background: rgb(234,139,35); }
	.image.orange:hover img { background: rgb(0,113,162); }
	.image.dark img { background: rgb(76,93,102); }
	.image.dark:hover img { background: rgb(166,182,190); }

.inline {
	display: inline;
}

	ul.inline {
		list-style: none;
	}

	ul.inline>li {
		display: inline;
		margin: 0 1em 0 0;
	}

.status {
	color: rgb(234,139,35);
	margin: 1.3em 0;
}

/*

Slideshow

IMPORTANT: ANY DIMENSION CHANGES MADE HERE NEED TO BE ADJUSTED
IN THE resizeSlideshow() FUNCTION IN main.js AS WELL.

*/

.slideshow {
	border-bottom: 1px solid rgb(153,153,153);
	margin: 0;
	padding: 0 0 60px 0;
	position: relative;
}

.slideshow * {
	-moz-transition-duration: 400ms;
	-moz-transition-property: opacity;
	-moz-transition-timing-function: ease;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: opacity;
	-webkit-transition-timing-function: ease;
}

.slideshow .slides_loading {
	background: rgb(255,255,255) url('../img/loading_dotted_line.gif') center center no-repeat;
	background-size: 68px 8px;
	height: 512px;
	left: 0;
	position: absolute;
	top: 0;
	width: 1024px;
}

.slideshow .slides_container {
	background: transparent;
	display: none;
	height: 512px;
	overflow: hidden;
	position: relative;
	width: 1024px;
}

.slideshow.white .slides_container {
	background: rgb(255,255,255);
}

	.slideshow .slides_container li {
		display: block;
		height: 512px;
		padding: 0;
		position: relative;
		text-align: center;
		width: 1024px;
	}

	.slideshow .slides_container img {
		background: rgb(255,255,255);
		height: auto;
		max-height: 512px;
		max-width: 1024px;
		position: relative;
		width: 100%;
		z-index: 1;
	}

	.slideshow .slides_container .new {
		background: transparent url('../img/bg/new.png') right top no-repeat;
		background-size: 150px 124px;
		height: 124px;
		opacity: 1;
		position: absolute;
		right: 20px;
		top: 0;
		width: 150px;
		z-index: 2;
	}

	.slideshow .slides_container:hover .new {
		opacity: 1;
	}

.slideshow .next, .slideshow .prev {
	background-size: 100px 50px;
	display: block;
	height: 50px;
	opacity: 0.7;
	overflow: hidden;
	position: absolute;
	text-indent: 100%;
	top: 264px;
	width: 100px;
	z-index: 98;
}

.slideshow .next:hover, .slideshow .prev:hover {
	opacity: 1;
}

.slideshow .prev {
	background: url("../img/bg/prev.png");
	left: 0;
}

.slideshow .next {
	background: url("../img/bg/next.png");
	right: 0;
}

.slideshow ul.pagination {
	bottom: 20px;
	display: none; /* Gets faded in with jQuery */
	height: 12px;
	left: 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: center;
	width: 100%;
}

.slideshow ul.pagination li {
	float: left;
	margin: 0 10px;
}

.slideshow ul.pagination li a {
	background: transparent url('../img/bg/slide_pagination_sprites_x2.png') center top no-repeat;
	background-size: 12px 24px;
	display: block;
	height: 0;
	float: left;
	overflow: hidden;
	padding-top: 12px;
	width: 12px;
}

.slideshow ul.pagination li.current a {
	background-position: center -12px;
}

.vimeo_frame {
	clear: both;
	display: block;
	float: none;
	margin: 2em 0;
}

/* DOM ELEMENTS */

#wrapper, #footer {
	margin: 0;
	padding: 0;
	width: 100%;
}

#wrapper {
	background: rgb(243,243,244) url('../img/bg/wrapper.png') left top repeat fixed;
	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
	box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

	#header, #main, #footer_nav {
		clear: both;
		margin: 0 auto;
		position: relative;
		width: 90%;
	}

	#header {
		padding: 0;
		z-index: 2;
	}

		#logo {
			height: 125px;
			margin: -30px auto 20px auto;
			overflow: hidden;
			padding: 0;
			position: relative;
			text-indent: -9999px;
			width: 125px;
		}

			#logo h1 {
			}

			#logo a {
			}

			#logo img {
				height: 125px;
				left: 0;
				position: absolute;
				top: 0;
				width: 125px;
			}
		
		#supernav {
			font-size: 85%;
			text-align: center;
		}

		#nav {
			margin: 1.3em auto;
			text-align: center;
			max-width: 280px;
		}

		#nav * {
			-moz-transition-duration: 200ms;
			-moz-transition-property: color;
			-moz-transition-timing-function: ease;
			-webkit-transition-duration: 200ms;
			-webkit-transition-property: color;
			-webkit-transition-timing-function: ease;
		}

			#nav ul {
				color: rgb(153,153,153);
				list-style: none;
			}

			#nav li:hover {
				color: rgb(51,51,51);
			}

			#nav>ul>li {
				display: inline;
				margin: 0 5px;
				padding-bottom: 20px;
				position: relative;
			}

			#nav a, #nav a:visited {
				color: rgb(153,153,153);
				white-space: nowrap;
			}

			#nav .current a {
				color: rgb(234,139,35) !important;
			}

			#nav a:hover {
				color: rgb(51,51,51);
			}

			#nav li>ul {
				display: none;
				text-align: left;
			}

			#nav li:hover>ul, #nav li.open>ul {
				background: rgb(239,239,240);
				-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
				-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
				box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
				display: block;
				left: -15px;
				position: absolute;
				top: auto;
			}

			#nav li>ul>li {
				display: block;
				line-height: 1.3em;
				margin: 0;
				padding: 5px 15px;
			}


	#main {
		clear: both;
		margin: 1.3em auto 2.6em auto;
		max-width: 520px;
		padding: 0;
		z-index: 1;
	}

		#content, .sidebar {
			clear: both;
			display: block;
			float: none;
			margin: 0;
			padding: 0;
			width: 100%;
		}

		#content img, .sidebar img {
			height: auto;
			max-width: 100%;
			width: auto;
		}

		#font_meta {
			margin: 1em 0;
			width: 75%;
		}

	#footer {
		background: transparent;
		clear: both;
		font-size: 65%;
		margin: 0;
		text-align: center;
		text-shadow: 1px 1px 1px rgb(170,170,170);
	}

		#footer * {
			color: rgb(51,51,51);
			font-family: 'adrianna', sans-serif;
			-moz-transition-duration: 200ms;
			-moz-transition-property: color;
			-moz-transition-timing-function: ease;
			-webkit-transition-duration: 200ms;
			-webkit-transition-property: color;
			-webkit-transition-timing-function: ease;
		}

		#footer a:hover {
			color: rgb(17,17,17);
		}

		#footer h2 {
			font-size: 150%;
			font-weight: bold;
			text-transform: lowercase;
		}

		#footer_nav>ul {
			margin: 0;
			padding: 0;
		}

		#footer_nav>ul>li {
			display: block;
			margin: 0 auto;
			padding: 0;
		}

		#footer_nav>ul>li>ul {
			text-transform: lowercase;
		}

		#footer_nav>ul>li>ul#footer_news, #footer_nav>ul>li>ul#footer_copyright {
			text-transform: none;
		}

		#footer_nav>ul>li>ul>li {
			line-height: 1.3em;
			margin: 0 0 0.5em 0;
		}

/* ===== CSS3 MEDIA QUERIES ===== */

/* PRINT */
@media print {
}

/* SMALL SCREENS */
@media only screen and (max-width: 639px) {

	body {
		background: rgb(153,153,153) url('../img/bg/footer.png') left top repeat fixed;
		background-size: 50px 45px;
	}

	.alignleft, .alignright {
		display: block;
		float: none;
		margin: 1.5em auto;
		text-align: center;
	}

	.download {
		display: none;
	}

	.float_50, .float_66, .float_75 {
		clear: both;
		display: block;
		float: none;
		margin: 0 0 1em 0;
		width: 100%;
	}

	.float_25, .float_33, .float_tiles {
		width: 48%;
	}

	.slideshow .slides_container .new {
		background: transparent url('../img/bg/new.png') right top no-repeat;
		background-size: 75px 62px;
		height: 62px;
		width: 75px;
	}

	.slideshow .next, .slideshow .prev {
		background-size: 50px 25px;
		height: 25px;
		width: 50px;
	}

	#wrapper {
		background-size: 50px 50px;
	}

}

/* 640px */
@media only screen and (min-width: 640px) {

	body {
		background: rgb(153,153,153) url('../img/bg/footer_x2.png') left top repeat fixed;
		background-size: 67px 60px;
	}

	h1, h2, h3, ul { text-align: left; }

	.float_tiles {
		width: 31%;
	}

	.slideshow:first-child {
		margin-bottom: -40px;
		top: -40px;
	}

	.slideshow .slides_container .new {
		background: transparent url('../img/bg/new.png') right top no-repeat;
		background-size: 75px 62px;
		height: 62px;
		width: 75px;
	}

	.slideshow .next, .slideshow .prev {
		background-size: 50px 25px;
		height: 25px;
		width: 50px;
	}

	#header, #main, #footer_nav {
		margin: 0 auto;
		max-width: 520px;
		padding: 0;
	}

	#supernav {
		position: absolute; top: 0.5em; right: 5px;
		text-align: right;
	}

	#logo {
		margin: -30px 0 20px 0;
		float: left;
		max-width: 100%;
	}

	#nav {
		margin: 35px 0 20px 0;
		float: right;
		font-size: 85%;
		max-width: 100%;
	}

	#nav li { margin: 0 5px; }

	#footer_nav>ul>li {
		float: left;
		margin: 0 2% 0 0;
		padding: 0 0 3em 0;
		width: 23%;
	}

}

/* 800px */
@media only screen and (min-width: 800px) {

	body>* { font-size: 85%; line-height: 1.5em; } /* Workaround to WebKit letter-spacing bug */

	#header, #main, #footer_nav {
		margin: 0 auto;
		max-width: 640px;
		padding: 0;
		width: 640px;
	}

	#logo {
		height: 175px;
		margin: -40px 0 15px -20px;
		width: 175px;
	}

	#logo img {
		height: 175px;
		width: 175px;
	}

	#nav {
		font-size: 100%;
	}


}

/* 1024px */
@media only screen and (min-width: 1024px) {

	body>* { font-size: 95%; line-height: 1.5em; } /* Workaround to WebKit letter-spacing bug */
	
	.float_tiles {
		width: 23%;
	}

	.slideshow:first-child {
		margin-bottom: -80px;
		top: -80px;
	}

	.slideshow .slides_container .new {
		background: transparent url('../img/bg/new.png') right top no-repeat;
		background-size: 113px 93px;
		height: 93px;
		width: 113px;
	}

	.slideshow .next, .slideshow .prev {
		background-size: 80px 40px;
		height: 40px;
		width: 80px;
	}
	
	.table-images {
		display: table;
		height: auto;
		margin: 1em -1em 1em 0;
		width: 100%;
		width: calc(100% + 1em);
	}
	
		.cell-image {
			display: table-cell;
			padding-right: 1em;
			overflow: hidden;
			width: auto;
		}
		
		.cell-image img { display: block; }

	#header, #main, #footer_nav {
		margin: 0 auto;
		max-width: 960px;
		padding: 0;
		width: 960px;
	}

	#logo {
		height: 250px;
		margin: -60px 0 40px -40px;
		width: 250px;
	}

	#logo img {
		height: 250px;
		width: 250px;
	}

	#supernav {
		top: 1.5em;
	}

	#nav {
		margin-top: 75px;
	}

}