// Variables start

@cta: rgb(255,153,0);
@rbGreen: rgb(51,51,0);
@rbGreenTrans: rgba(51,51,0,0.8);
@rbLightGreen: rgb(153,153,102);
@rbYellow: rgb(223, 220, 0);
@rbOrange: rgb(254, 152, 0);

@size9px: 62%;
@size10px: 77%;
@size11px: 85%;
@size12px: 93%;
@size13px: 100%;
@size14px: 108%;
@size15px: 116%;
@size16px: 123.1%;
@size17px: 131%;
@size18px: 138.5%;
@size19px: 146.5%;
@size20px: 153.9%;
@size26px: 200%;
@size30px: 232%;
@size40px: 308%;
@size80px: 616%;

// Variables end

// Mixins start

.border-radius (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	-o-border-radius: @radius;
	-ms-border-radius: @radius;
	border-radius: @radius;
	behavior: url(/assets/PIE-1.0/PIE.php);
}
.bottom-border-radius (@radius: 5px) {
	-webkit-border-bottom-right-radius: @radius;
	-webkit-border-bottom-left-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	-moz-border-radius-bottomleft: @radius;
	border-bottom-right-radius: @radius;
	border-bottom-left-radius: @radius;	
	behavior: url(/assets/PIE-1.0/PIE.php);
}
.box-shadow (@color: RGBa(0,0,0,0.8), @xoffset: 0, @yoffset: 0, @blur: 10px) {
	-moz-box-shadow: @color @xoffset @yoffset @blur;
	-webkit-box-shadow: @color @xoffset @yoffset @blur;
	-o-box-shadow: @color @xoffset @yoffset @blur;
	-ms-box-shadow: @color @xoffset @yoffset @blur;
	box-shadow: @color @xoffset @yoffset @blur;
	behavior: url(/assets/PIE-1.0/PIE.php);
}
.clear-box-shadow {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
	behavior: url(/assets/PIE-1.0/PIE.php);
}
.inset (@shadow: RGBa(0,0,0,0.8), @xoffset: 0, @yoffset: -1px, @blur: 0, @hilite: RGBa(255,255,255,0.2), @hiYoffset: 1px) {
	text-shadow: @shadow @xoffset @yoffset @blur;
}
.inset-light (@shadow: RGBa(0,0,0,0.8), @xoffset: 0, @yoffset: -1px, @blur: 0, @hilite: RGBa(255,255,255,0.2), @hiYoffset: 1px) {
	text-shadow: @hilite @xoffset @hiYoffset @blur;
}
.gradient-2pt (@colorStart: RGB(70,70,0), @colorEnd: RGB(51,51,0)) {
	background: @colorStart;
	background: -moz-linear-gradient(top,  @colorStart 0%, @colorEnd 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@colorStart), color-stop(100%,@colorEnd));
	background: -webkit-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background: -o-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background: -ms-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background: linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	-pie-background: linear-gradient(@colorStart,@colorEnd);
}
.bg-time (@colorStart: RGB(70,70,0), @colorEnd: RGB(51,51,0)) {
	background: @colorStart;
	background-image: url(../img/construct/icon_year.png);
	background-repeat: no-repeat;
	background-image: url(../img/construct/icon_year.png),-moz-linear-gradient(top,  @colorStart 0%, @colorEnd 100%);
	background-image: url(../img/construct/icon_year.png),-webkit-gradient(linear, left top, left bottom, color-stop(0%,@colorStart), color-stop(100%,@colorEnd));
	background-image: url(../img/construct/icon_year.png),-webkit-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_year.png),-o-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_year.png),-ms-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_year.png),linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	-pie-background: linear-gradient(@colorStart,@colorEnd);
}
.bg-download (@colorStart: RGB(70,70,0), @colorEnd: RGB(51,51,0)) {
	background: @colorStart;
	background-image: url(../img/construct/icon_download.png);
	background-repeat: no-repeat;
	background-image: url(../img/construct/icon_download.png),-moz-linear-gradient(top,  @colorStart 0%, @colorEnd 100%);
	background-image: url(../img/construct/icon_download.png),-webkit-gradient(linear, left top, left bottom, color-stop(0%,@colorStart), color-stop(100%,@colorEnd));
	background-image: url(../img/construct/icon_download.png),-webkit-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_download.png),-o-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_download.png),-ms-linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	background-image: url(../img/construct/icon_download.png),linear-gradient(top,  @colorStart 0%,@colorEnd 100%);
	-pie-background: linear-gradient(@colorStart,@colorEnd);
}


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

}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: "museo-sans","Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; font-weight: 300; }

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: @cta; text-decoration: none; }
a:visited { color: @cta - #333; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img { border: 0; -ms-interpolation-mode: bicubic; }

/*
 * Correct overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
   Primary styles
   Author: Matt King, http://www.dusteddesign.com
   ========================================================================== */

html {
	//height: 100%;
}
body {
	.gradient-2pt;
	color: white;
	color: RGBa(255,255,255,0.9);
	margin: 0;
	padding: 0;
	min-height: 100%;
}
#backstretch {
	.gradient-2pt;
}
.reveal-overlay {
	background: rgba(60,60,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	color: RGBa(255,255,255,0.9);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	.reveal {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 20px;
		background: #464600;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
		text-align: center;
		width: 500px;
		max-width: 100%;
		height: 300px;
		max-height: 100%;
	}
}

#container {
	min-height: 100%;
}
#container {
	.gradient-2pt;
}
html.oldie #container {
	display:table;
	height:100%;
	width: 100%;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

h1,h2,h3 {
	// font-family: ChunkFiveRegular;
	font-family:'museo-sans','Helvetica Neue',Arial,sans-serif;
	font-weight: 100;
	margin: 0;
	padding: 0;
}
h4 {
	padding:0 0 0.5em;
	margin:0;
	font-size: @size20px;
	font-weight:500;
}
h5 {
	padding:0;
	margin: 0;
	font-size: @size14px;
	font-weight: 700;
}
p {
	padding: 0;
	margin: 0 0 1em;
}
#main.panels,
.widthRestrict {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}
.js #bg {
	display: none;
}
#container > header {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: RGB(35,35,0);
	background: RGBa(35,35,0,0.95);
	.box-shadow(RGBa(0,0,0,0.8),0,0,20px);
	h1 {
		float: left;
		line-height: 1;
		margin: 0 50px 0 0;
		font-size: @size20px;
		text-transform: uppercase;
		font-weight:300;
		a,
		a:visited {
			color: white;
			span {
				display: block;
			}
			span.top {
				font-size: 50%;
				color: #fff - #989;
			}
			span.tail {
				float: right;
				font-size: 50%;
				color: #fff - #989;
			}
		}
	}
	div.richFact {
		display: none;
		position: relative;
		float:right;
		padding:5px 5px 5px 55px;
		background:rgba(0,0,0,0.2) url(../img/construct/icon_richfact.png) 5px 5px no-repeat;
		.border-radius;
		.box-shadow(rgba(255,255,204,0.2));
		width:270px;
		min-height: 75px;
		h2 {
			float: none;
			font-size: @size16px;
			font-weight: 500;
			padding: 0 0 0.2em;
		}
		p {
			font-size: @size11px;
			margin: 0;
		}
		a.refresh {
			position: absolute;
			bottom:0;
			left:5px;
			opacity:0.5;
		}
		a.refresh:hover {
			opacity:1;
		}
		div.text {
			display: none;
		}
		div.text:first-child {
			display: block;
		}
	}
}
header {
	nav {
		clear: both;
		display: none;
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				float: left;
				margin: 0 5px 0 0;
				text-align: center;
				a,
				a:visited {
					text-transform: uppercase;
					display: block;
					padding: 5px 10px;
					line-height:1;
					background: RGB(51,51,51);
					background: RGBa(255,255,255,0.2);
					font-size: @size13px;
					font-weight: 700;
					letter-spacing: 0em;
					// text-indent: 0.5em;
					.border-radius(10px);
					color: RGB(204,204,204);
				}
				a:hover {
					background: @rbOrange;
					color: RGB(0,0,0);
					text-shadow: none;
				}
			}
			li.active {
				a {
					background: rgb(255,255,255);
					color: @rbGreen;
					text-shadow:none;
				}
			}
		}
		a {
			.inset;
		}
	}
	#mainNav li:first-child {
		display: none;
	}
	#navToggle {
		position: absolute;
		top:10px;
		right:5px;
		text-transform: uppercase;
		display: block;
		padding: 5px 10px;
		line-height:1;
		background: RGB(51,51,51);
		background: RGBa(255,255,255,0.2);
		font-size: @size10px;
		font-weight: 700;
		letter-spacing: 0em;
		// text-indent: 0.5em;
		.border-radius(10px);
		color: RGB(204,204,204);
		.inset
	}
	h2 {
		float: left;
		line-height: 1;
		margin: 0 10px 0 0;
		font-size: @size20px;
		// .inset;
	}
}
.home {
	header {
		nav {
			display: block;
		}
		#navToggle {
			display: none;
		}
	}
}
#main {
	margin: 0 auto;
	padding: 4.4em 0 2.5em;
	overflow:auto;
	section {
		position: relative;
		header {
			position: fixed;
			z-index: 2;
			width: 100%;
			background: @rbGreen + #666;
			line-height: 1;
			margin: 0 0 20px;
			nav {
				float: left;
				clear: none;
				display: block;
				ul {
					padding: 0.3em 0 0;
					li {
						a,
						a:visited {
							background: RGB(0,0,0);
							background: RGBa(0,0,0,0.4);
							color: RGB(153,153,153);
							letter-spacing: 0em;
							text-indent: 0;
							font-size: @size9px;
						}
						a:hover {
							background: RGB(51,51,51);
							background: RGBa(0,0,0,0.6);
							color: RGB(153,153,153);
						}
					}
					li.active {
						a {
							background: rgb(255,255,255);
							color: @rbGreen;
							text-shadow:none;
						}
					}
				}
			}
		}
		article {
			position: relative;
			z-index: 1;
			min-width: 280px;
			max-width: 600px;
			padding: 5em 10px 2.5em;
			nav {
				
				ul {
					li {
						margin: 0 0 5px;
						a {
							padding: 7px;
							display: block;
							min-height: 16px;
						}
						 a.active,
						 a.active:hover {
						 	.gradient-2pt (@rbYellow, @rbYellow - #111);
						 	color: #333;
						 	text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0;
						 }
						 a:hover {
						 	.gradient-2pt (@rbOrange - #111, @rbOrange - #222);
						 }
					}
					li.time {
						 a {
							padding: 7px 7px 7px 30px;
							.bg-time (@rbLightGreen, @rbLightGreen - #111);
						 }
						 a.active,
						 a.active:hover {
						 	.bg-time (@rbYellow, @rbYellow - #111);
						 	color: #333;
						 	text-shadow: rgba(255, 255, 255, 0.2) 0 1px 0;
						 }
						 a:hover {
						 	.bg-time (@rbOrange - #111, @rbOrange - #222);
						 }
					}
				}
				p.cta a,
				ul li a {
					display: block;
					.gradient-2pt (@rbLightGreen, @rbLightGreen - #111);
					color: #fff;
					.border-radius (5px);
					font-weight: 700;
					.inset;
					span {
						display: block;
						opacity: 0.5;
					}
				}
				p.cta.download{
					a {
						.bg-download (@rbLightGreen, @rbLightGreen - #111);
						font-size: @size11px;
						padding: 7px 7px 7px 30px;
					}
					a.active {
					 	.bg-download (RGB(225,222,0), RGB(225,222,0) - #111);
					 	color: #333;
						.inset-light;
					}
					a:hover {
					 	.bg-download (@rbOrange - #111, @rbOrange - #222);
					}
				}
			}
			> div {
				padding: 0 0 100px;
			}
			> div:last-child {
				min-height: 700px;
			}
			div.contentGroup {
				padding:0;
			}
			h3 {
				font-size: @size40px;
				color: RGB(204,204,204);
				color: RGBa(255,255,255,0.1);
			}
			figure {
				position: relative;
				width: 120px;
				float: right;
				clear: right;
				padding: 5px;
				margin: 0 0 1em 3em;
				.border-radius;
				.box-shadow;
				background: RGB(0,0,0);
				background: RGBa(0,0,0,0.2);
				img {
					display: block;
					.border-radius (5px);
				}
				figcaption {
					font-size: @size11px;
					padding: 5px 0 0;
				}
				p {
					position: absolute;
					bottom: -1.4em;
					right: 5px;
					z-index: 1;
					padding: 2px;
					background: RGB(0,0,0);
					background: RGBa(0,0,0,0.4);
					margin: 0;
					float: left;
					line-height: 1;
					font-size: @size11px;
					.bottom-border-radius;
					color: RGB(153,153,153);
					color: RGBa(255,255,255,0.5);
					width:0.9em;
					overflow: hidden;
					span {
						display: block;
						white-space:nowrap;
						min-width:140px;
						padding:0 2px 0 0;
					}
				}
			}
			.filmItem,
			.theatreItem {
				border-bottom: 1px solid @rbLightGreen;
				margin: 0 0 2em;
				time {
					padding:0;
					margin:0;
				}
				dl {
					margin: 0.2em 0 1em;
				}
				dt {
					font-weight:700;
					float:left;
					clear:left;
				}
				dd {
					float:left;
					margin: 0 0 0 1em;
				}
				figure {
					width: 62px;
				}
				span.stock {
					font-size: 0.6em;
					font-weight: 300;
				}
				.award {
					
					img {
						float: left;
						max-width: 15px;
						margin: 0 5px 5px 0;
					}
					p {
						font-size: 85%;
						color: #dfdc00;
						padding: 0em;
						margin: 0 0 0.2em 20px;
					}
				}
				.info {
					.award {
						float: none;
						width: auto;

						p {
							font-size: 100%;
						}
					}
				}
				.tracks {
					clear: both;
				}
			}
			.theatreItem {
				figure {
					width: 120px;
					margin: 0 0 1em 1em;
				}
			}
			form {
				padding: 0 0 1em;

				.formRow {
					padding: 0 0 0.5em;

					label {
						display: block;
						clear: both;
					}
					input,
					select,
					textarea {
						width: 90%;
						padding: 2%;
						margin: 0;
						border: none;
						.border-radius;
					}
					select {
						width: 94%;
						height: 2em;
					}
					textarea {
						height: 10em;
					}
				}
				input[type=submit] {
					border: 0;
					.gradient-2pt (@rbLightGreen, @rbLightGreen - #111);
					color: #fff;
					.border-radius (5px);
					font-weight: 700;
					.inset;
					padding: 5px 10px;
				}
				input[type=submit]:hover {
					.gradient-2pt (@rbOrange - #111, @rbOrange - #222);
				}
				.captcha {
					clear: both;
					margin: 1em 0 1em;
				}
			}
		}
		article.gallery {
			min-height: 650px;
			figure {
				float: none;
				width: auto;
				margin: 0 0 3em 0;
				box-shadow: none;

				img {
					width: 100%;
				}
			}
			> div {
				padding: 2em 0 10em;
				overflow: hidden;
			}
			nav {
				overflow: hidden;
			}
			nav ul li a,
			nav ul li a.active {
				padding:0 3px 3px 0;
				background: none;
				float: left;

				img {
					display: block;
					.border-radius (5px);
					border:1px solid rgb(51,51,51);
					border:1px solid rgba(255,255,255,0.3);
				}
			}
			nav ul li a.active {
				img {
					border: 1px solid rgb(255,255,255);
				}
			}
		}
	}
}
#main.panels {
	min-width: 280px;
	max-width: 600px;
	padding: 10em 10px 3.5em;
	
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		
		li {
			margin: 0 0 20px;
			a {
				position: relative;
				z-index: 2;
				-webkit-transition: all 0.5s ease-out;
			    -moz-transition: all 0.5s ease-out;
			    -o-transition: all 0.5s ease-out;
			    -ms-transition: all 0.5s ease-out;
			    .gradient-2pt (rgba(40,40,0,0.9), rgba(35,35,0,0.9));
				padding: 5px;
				.border-radius;
				.box-shadow;
				border-top: 1px solid RGBa(255,255,255,0.2);
				border-left: 1px solid RGBa(255,255,255,0.2);
				display: block;
				color: white;
				img {
					float: left;
					display: block;
					margin: 0 2.333% 0 0;
					width: 21%;
					max-width: 120px;
					.border-radius(3px);
					opacity:0.6;
					-webkit-transition: all 0.5s ease-out;
				    -moz-transition: all 0.5s ease-out;
				    -o-transition: all 0.5s ease-out;
				    -ms-transition: all 0.5s ease-out;
				}
				h2 {
					font-size: @size30px;
					.inset;
				}
				p {
					float: left;
					width: 76%;
					margin: 0;
				}
			}
			a:hover {
				.box-shadow(RGBa(255,255,204,0.8));
				img {
					opacity:1;
				}
			}
			p.copyright {
				position: relative;
				min-width: 33%;
				z-index: 1;
				padding: 5px;
				background: @rbGreenTrans;
				margin: 0 5px;
				float: left;
				line-height: 1;
				font-size: @size11px;
				.bottom-border-radius;
				color: RGBa(255,255,255,0.5);
			}
		}
	}
}
footer {
	position: relative;
	margin-top: -3.5em; /* negative value of footer height */
	height: 3.5em;
	clear:both;
	background: RGB(35,35,0);
	background: RGBa(35,35,0,0.9);
	p {
		font-size: @size11px;
		margin: 0;
		padding: 10px 10px 0;
	}
	p.link {
		float:right;
	}
}

.js body {
	position: relative;
}
.js footer {
	position: absolute;
	bottom:0;
	width:100%;
}
.js .gallery > div {
	position: absolute;
}
.js .tracks .fancybox {
	display: none;
}
div.fancybox {
	background: @rbGreen;
	padding:5px;
	min-height: 100%;
}



/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
  

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
	
@import "widescreen.less";

}
@media only screen and (min-width: 900px) {
  /* Style adjustments for viewports 768px and over go here */
	
	
	#container > header {
		div.richFact {
			display: block;
		}
	}
}


/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}